/* ==========================================================================
   kortivo.de — Stylesheet (Konzept „Weiß", Option „Messing auf Weiß")
   ==========================================================================
   Beschluss und Begründung: website/bauplan.md §1. Vom Handy aus gebaut: die
   Grundregeln gelten für die schmale Ansicht, @media (min-width: 900px)
   erweitert für den Rechner. Eine Quelle, keine Gerätefassungen.

   Farben nur aus der Kortivo-Palette (brand/README.md). Messing (--signal) nur
   für Handeln und „live"; auf Weiß erreicht es 2,15:1 und trägt deshalb nie
   Text und nie eine Datengrafik — dafür gibt es --signal-deep (3,77:1).
   Bedienelemente: Schrift mindestens 16 px, Tippfläche mindestens 44 px.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --white: #FFFFFF;
  --frost: #F4F6F9;
  --ink: #1C2333;
  --slate: #5B6478;
  --hair: #E3E7ED;
  --signal: #EBA23A;
  --signal-deep: #B97410;
  --gold: #F0C64B;
  --brass-deep: #C98A2B;
  --metal: linear-gradient(100deg, var(--brass-deep) 0%, var(--gold) 42%, var(--signal) 68%, var(--brass-deep) 100%);
  /* Only for form feedback; the brand has no red or green of its own. */
  --alert: #B3261E;
  --ok: #1E7A46;
  --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: 16px;
  --header: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Classes like .btn set display and would otherwise override `hidden`. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.6 var(--font); font-stretch: 100%;
  overflow-x: clip;
}
img, svg, iframe { max-width: 100%; }
a { color: inherit; }
/* Wide type and long German compounds ("Datenschutzerklärung") do not fit a
   phone line. Automatic hyphenation split headings badly ("Ih-rem"), so a long
   word gets a ­ in the source; break-word is the last resort before any
   sideways scroll. */
h1, h2, h3 { font-weight: 600; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.1; hyphens: manual; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 16px; }
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer;
  font: 500 16px/1 var(--font); text-decoration: none; white-space: nowrap;
}
.btn-signal { background: var(--signal); color: var(--ink); }
.btn-signal:hover { background: var(--gold); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--frost); }
.btn[disabled] { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20; height: var(--header);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair);
}
.nav-row { display: flex; align-items: center; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand svg { display: block; height: 24px; width: auto; }
.nav-links, .nav-cta { display: none; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }

/* Phone menu: a disclosure, works without any script. */
.menu { margin-left: auto; }
.menu > summary {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.menu > summary i, .menu > summary i::before, .menu > summary i::after {
  display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .2s ease;
}
.menu > summary i { position: relative; }
.menu > summary i::before, .menu > summary i::after { content: ""; position: absolute; left: 0; }
.menu > summary i::before { top: -6px; }
.menu > summary i::after { top: 6px; }
.menu[open] > summary i { background: transparent; }
.menu[open] > summary i::before { transform: translateY(6px) rotate(45deg); }
.menu[open] > summary i::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: var(--header); max-height: calc(100vh - var(--header)); overflow: auto;
  background: var(--white); border-bottom: 1px solid var(--hair); padding: 8px var(--gutter) 20px;
  box-shadow: 0 20px 40px -24px rgba(28, 35, 51, .35);
}
.menu-panel a { display: flex; align-items: center; min-height: 48px; font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--hair); }
.menu-panel a[aria-current="page"] { font-weight: 600; }
.menu-panel .btn { display: flex; width: 100%; margin-top: 16px; border-bottom: 0; }
/* The one highlighted menu item (operator, 2026-09-26): a brass ring around
   the name, not a button. Ink carries the contrast, the ring only marks it. */
.nav-accent span { padding: 6px 14px; border-radius: 999px; line-height: 1.25; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--signal); transition: background-color .15s ease; }
.nav-accent:hover span { background: var(--frost); }

/* ---------- Breadcrumbs, byline ---------- */
.crumbs { padding-top: 12px; font-size: 16px; color: var(--slate); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--slate); opacity: .5; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.byline { margin: -4px 0 20px; font-size: 15px; color: var(--slate); }
.byline a { padding: 10px 0; color: inherit; text-underline-offset: 3px; }

/* ---------- Subpages ---------- */
.page { padding-top: 24px; padding-bottom: 72px; }
.page-head { max-width: 760px; margin: 8px 0 32px; }
.page-head h1 { font-size: 34px; margin: 0 0 16px; }
.lead { font-size: 18px; color: var(--slate); }
.lead a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { display: grid; gap: 22px; padding-top: 28px; padding-bottom: 44px; }
.hero-copy { display: contents; }
.hero h1 { order: 1; font-size: 34px; line-height: 1.05; margin: 0; }
.stage-phone { order: 2; margin: 0 0 12px; }
.answer { order: 3; font-size: 17px; color: var(--slate); margin: 0; }
.hero .actions { display: none; }
.terms { order: 4; margin: 0; font-size: 15px; color: var(--slate); }
.stage-phone img { display: block; width: 100%; max-width: 64vw; height: auto; margin: 0 auto; }
.stage-phone figcaption, .figure-note { text-align: center; font-size: 14px; color: var(--slate); margin-top: 4px; }

/* ---------- Scenes: real work, hands busy, the assistant answers ---------- */
.scenes { padding-top: 56px; padding-bottom: 56px; }
/* Right after the hero no rule separates them: the hero's own bottom space is enough. */
.hero + .scenes { padding-top: 32px; }
.scenes h2 { font-size: 28px; margin: 0 0 12px; max-width: 20ch; }
.scenes .sub { color: var(--slate); margin: 0 0 28px; max-width: 46em; }
.trip { display: grid; gap: 16px; }
.shot { position: relative; margin: 0; aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden; background: var(--frost); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ping {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid transparent; font-size: 15px; line-height: 1.4;
  background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) padding-box, var(--metal) border-box;
  backdrop-filter: blur(10px);
}
.ping-head { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 14px; margin-bottom: 2px; }
.ping-head time { margin-left: auto; }
.ping b { font-weight: 500; }
.live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(235, 162, 58, .18); }
.note { font-size: 14px; color: var(--slate); margin: 14px 0 0; }
.note a { text-underline-offset: 3px; }

/* ---------- Index sections: heading and core sentence, then the details ---------- */
.block { padding: 56px 0; border-top: 1px solid var(--hair); }
.block-grid { display: grid; gap: 24px; }
.block-head h2 { font-size: 26px; margin: 0 0 12px; }
.block-head p { margin: 0; color: var(--slate); }
.block-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--signal); }

.rows { margin: 0; border-top: 1px solid var(--ink); }
.rows > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.rows dt { font-weight: 600; font-stretch: 112%; }
.rows dd { margin: 0; color: var(--slate); }

/* A call as it happens: example lines (the assistant's come from the demo
   agent's own instructions) and the entry the call leaves. Words, not symbols:
   rows of icons were the look of a template (operator, 2026-09-24). */
.call { display: grid; gap: 28px; }
.dialog { margin: 0; }
.dialog ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.dialog li { padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }
.dialog li b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--slate); }
.dialog .caller { color: var(--slate); }
.dialog figcaption { margin-top: 10px; font-size: 14px; color: var(--slate); }
.entry {
  max-width: 480px; padding: 18px 20px 6px; border-radius: 14px; border: 1.5px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box, var(--metal) border-box;
  box-shadow: 0 24px 48px -32px rgba(28, 35, 51, .35);
}
.entry-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 600; font-stretch: 108%; }
.entry dl { margin: 0; }
.entry dl > div { display: grid; grid-template-columns: 124px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.entry dt { color: var(--slate); }
.entry dd { margin: 0; }

/* ---------- Setup: set up for the business, shown on the demo workshop (einrichtung.mjs) ---------- */
.setup { padding: 56px 0; border-top: 1px solid var(--hair); }
.setup-grid { display: grid; gap: 32px; }
.setup h2 { font-size: 28px; margin: 0 0 16px; max-width: 18ch; }
.setup-copy p { margin: 0 0 14px; color: var(--slate); max-width: 34em; }
.setup-copy .setup-lead { font-size: 19px; line-height: 1.5; color: var(--ink); }
.setup-steps { display: grid; gap: 40px; }
.sheet { margin: 0; padding: 20px 20px 12px; border: 1px solid var(--hair); border-radius: 16px; background: var(--white); box-shadow: 0 24px 48px -32px rgba(28, 35, 51, .35); }
.sheet-head { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sheet-head b { font-weight: 600; font-stretch: 112%; font-size: 18px; }
.sheet-head span { font-size: 14px; color: var(--slate); }
.sheet dl { margin: 0; }
.sheet dl > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.sheet dt { color: var(--slate); }
.sheet dd { margin: 0; }
/* Process consulting and AI training (offer of 2026-09-25): same layout, steps as one column. */
.consult .actions { margin: 22px 0 0; }
.consult .steps { grid-template-columns: 1fr; gap: 0; }
.consult .steps li { padding: 18px 0 20px; border-bottom: 1px solid var(--hair); }
.sheet[data-folded] .sheet-more { display: none; }
.sheet-toggle { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 16px 0 0; padding: 0; border: 0; background: none; font: 500 16px/1.3 var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair); cursor: pointer; }
.sheet-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--signal); }

/* ---------- Portal band: the laptop shows the real portal ---------- */
.portal-band { padding: 56px 0 64px; border-top: 1px solid var(--hair); }
.portal-head { max-width: 720px; margin: 0 0 28px; }
.portal-head h2 { font-size: 28px; margin: 0 0 12px; }
.portal-head p { margin: 0; color: var(--slate); }
.laptop { position: relative; margin: 0 auto; max-width: 1100px; }
.laptop > img { display: block; width: 100%; height: auto; }
.laptop-screen { position: absolute; left: 14.108%; top: 7.786%; width: 71.666%; height: 77.351%; overflow: hidden; background: #fff; }
.laptop-screen iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 911px; max-width: none; border: 0; transform-origin: 0 0; pointer-events: none; }

/* ---------- Live demo ---------- */
.panel {
  border-radius: 14px; overflow: hidden; border: 1.5px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box, var(--metal) border-box;
}
.panel-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--slate); }
.demo-status { color: var(--ink); font-weight: 500; }
.panel-mic { margin-left: auto; }
.panel-body { padding: 20px 18px 22px; }
.label { display: block; font-size: 15px; color: var(--slate); margin: 0 0 8px; }
.panel select, .form-row input, .form-row textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #C9D0DA; border-radius: 8px;
  background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--font);
}
.panel select:focus-visible, .form-row input:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.hint { font-size: 15px; color: var(--slate); margin: 12px 0 0; }
.panel-wave { display: block; width: 100%; height: 48px; margin: 18px 0; }
.panel.is-live .panel-wave rect { animation: level 1.1s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.panel.is-live .panel-wave rect:nth-child(3n) { animation-duration: .8s; }
.panel.is-live .panel-wave rect:nth-child(4n) { animation-duration: 1.4s; }
@keyframes level { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-transcript { margin-top: 16px; padding: 14px; max-height: 240px; overflow: auto; border-radius: 10px; background: var(--frost); font-size: 15px; }
.demo-transcript p { margin: 0 0 8px; }
.demo-transcript .line-agent { color: var(--ink); font-weight: 500; }
.demo-transcript .line-user { color: var(--slate); }
.demo-grid { display: grid; gap: 40px; }
.demo-side h2 { font-size: 22px; margin: 0 0 12px; }
.demo-side p { color: var(--slate); margin-bottom: 24px; }

/* ---------- Trades, offers ---------- */
.trades, .offers { border-top: 1px solid var(--ink); }
.trades { display: grid; grid-template-columns: 1fr 1fr; }
.trades > :nth-child(odd) { padding-right: 12px; }
.trades > :nth-child(even) { padding-left: 12px; border-left: 1px solid var(--hair); }
.trades > a, .trades > div { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 14px 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.trades b, .offers b { font-weight: 600; font-stretch: 112%; }
.trades span, .offers span { font-size: 15px; color: var(--slate); }
.trades a:hover b, .offers a:hover b { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.offers > a, .offers > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); text-decoration: none; }

/* ---------- Founder ---------- */
.founder { display: grid; gap: 24px; align-items: center; }
.founder img { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--frost); }
.founder h3 { font-size: 24px; margin: 0 0 4px; }
.founder .role { color: var(--slate); margin: 0 0 16px; }
.founder p { max-width: 52ch; }

/* ---------- Price ---------- */
.price-box { border-top: 1px solid var(--ink); padding-top: 24px; display: grid; gap: 8px; }
.amount { margin: 0; font-size: 56px; line-height: .95; font-weight: 600; font-stretch: 125%; letter-spacing: -0.03em; }
.amount small { font-size: 22px; font-weight: 500; letter-spacing: 0; }
.per { margin: 0; color: var(--slate); }
.incl { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 20px; padding: 0; list-style: none; }
.incl li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--signal); vertical-align: 2px; }
.demo-side .incl { display: grid; gap: 10px; margin: 0 0 28px; }

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: s; }
.steps li { padding-top: 18px; counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-weight: 600; font-stretch: 125%; font-size: 28px; margin-bottom: 6px; }
.steps b { display: block; font-weight: 600; font-stretch: 112%; margin-bottom: 4px; }
.steps span { font-size: 15px; color: var(--slate); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq-groups, .faq-groups + .cta-box { max-width: 820px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 22px; margin: 0 0 14px; }
/* A guide's questions (.prose details) look like the FAQ's. */
.faq details, .prose details { border-bottom: 1px solid var(--hair); }
.prose :not(details) + details { border-top: 1px solid var(--ink); }
.faq summary, .prose summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 56px; padding: 14px 0; font-weight: 600; font-stretch: 108%; font-size: 17px;
}
.faq summary::-webkit-details-marker, .prose summary::-webkit-details-marker { display: none; }
.faq summary::after, .prose summary::after { content: "+"; flex: none; font-weight: 400; font-size: 22px; line-height: 1; color: var(--slate); }
.faq details[open] summary::after, .prose details[open] summary::after { content: "\2013"; }
.faq details p, .prose details p { margin: 0 0 18px; color: var(--slate); max-width: 64ch; }
.faq details a, .prose details a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Closing band ---------- */
.closing { margin: 0 12px 16px; padding: 56px 0; border-radius: 20px; background: var(--frost); }
.closing h2 { font-size: 30px; margin: 0 0 24px; max-width: 17ch; }
.closing-grid { display: grid; gap: 32px; align-items: center; }
.wave-img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* ---------- Text pages (Impressum, Datenschutz) ---------- */
.prose { max-width: 72ch; }
.prose h1 { font-size: 34px; margin: 8px 0 24px; }
.prose h2 { font-size: 22px; margin: 36px 0 12px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; font-stretch: 108%; }
.prose a { text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Tables scroll inside their own frame (layout.mjs), never the page. */
.table-scroll { overflow-x: auto; margin: 16px 0 24px; }
.table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table-scroll th { font-weight: 600; }
.table-scroll thead th { border-bottom-color: var(--ink); }
.table-scroll caption { caption-side: top; text-align: left; max-width: calc(100vw - 2 * var(--gutter)); font-weight: 600; font-stretch: 108%; padding-bottom: 10px; }
.prose .price-box { margin: 40px 0 8px; }
/* A calculation the reader does with his own numbers (ratgeber.md). */
.prose .formula { margin: 20px 0 24px; padding: 16px 20px; border-radius: 12px; background: var(--frost); color: var(--ink); font-weight: 500; }
/* A text to take over word for word, e.g. an announcement: same frame, plain weight. */
.prose blockquote { margin: 12px 0 24px; padding: 16px 20px; border-radius: 12px; background: var(--frost); color: var(--ink); }
.prose blockquote p { margin: 0; }
/* Source references stay inline; the padding only widens where a finger hits. */
.prose a[href^="#quelle-"] { padding: 10px 2px; }
.prose .sources { padding-left: 1.4em; font-size: 15px; color: var(--slate); }
.prose .sources li { margin-bottom: 8px; }
.prose .sources a { color: var(--ink); }

/* ---------- Guide overview (generator/ratgeber.mjs) ---------- */
.guides { max-width: 760px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.guides li { padding: 16px 0 24px; border-bottom: 1px solid var(--hair); }
.guides h2 { font-size: 22px; margin: 0 0 6px; }
.guides h2 a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.guides h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--signal); }
.guides p { margin: 0; color: var(--slate); max-width: 62ch; }
.guides .guide-date { margin-top: 10px; font-size: 15px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 40px; }
.contact-actions { display: grid; gap: 12px; margin: 0 0 16px; }
.contact-note { font-size: 16px; color: var(--slate); }
.contact-note a { color: var(--ink); text-underline-offset: 3px; }
/* What happens in the first call: the steps stack like on the home page (.consult). */
.contact-consult { margin-top: 40px; }
.contact-consult h2 { font-size: 22px; margin: 0 0 8px; }
.contact-form { border-top: 1px solid var(--ink); padding-top: 24px; }
.contact-form-title { font-size: 22px; margin: 0 0 8px; }
.contact-form-intro { color: var(--slate); }
.form-row { display: grid; gap: 6px; margin: 0 0 16px; }
.form-row label { font-size: 16px; font-weight: 500; }
.form-row textarea { min-height: 140px; resize: vertical; }
.pflicht { color: var(--signal-deep); }
.form-row.hat-fehler input, .form-row.hat-fehler textarea { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.form-fehler { font-size: 15px; color: var(--alert); }
.form-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-hinweis { font-size: 15px; color: var(--slate); }
.form-hinweis a { color: var(--ink); text-underline-offset: 3px; }
.form-status { margin: 16px 0 0; font-size: 16px; }
.form-status:empty { display: none; }
.form-status[data-status="ok"] { color: var(--ok); }
.form-status[data-status="fehler"] { color: var(--alert); }
/* After sending only the confirmation stays. */
.contact-form.ist-gesendet .form-row,
.contact-form.ist-gesendet .form-hinweis,
.contact-form.ist-gesendet .contact-form-intro,
.contact-form.ist-gesendet .btn { display: none; }

/* ---------- 404 ---------- */
.notfound { padding-top: 72px; padding-bottom: 96px; }
.notfound h1 { font-size: 40px; margin: 0 0 16px; }
.notfound .lead { max-width: 40em; margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 40px 0 112px; font-size: 16px; color: var(--slate); }
.foot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.foot-about { grid-column: 1 / -1; max-width: 40ch; }
.foot-about svg { display: block; height: 22px; width: auto; margin-bottom: 12px; }
.foot-about p { margin: 0 0 8px; }
.foot-about a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 3px; }
.foot-title { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.foot nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot nav a:hover, .foot-legal a:hover { color: var(--ink); text-decoration: underline; }
.foot nav a[aria-current="page"] { color: var(--ink); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 24px; font-size: 15px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 16px; }

/* ---------- Depth pages: product, about, services, study ---------- */
.page-top { padding-top: 24px; }
.page-top .page-head { margin-bottom: 40px; }
.evidence { margin: 20px 0 0; max-width: 60em; }
.evidence a, .split a:not(.btn) { color: var(--ink); font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--signal); }
.splits { border-top: 1px solid var(--ink); }
.split { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.split h2 { font-size: 22px; margin: 0; }
.split p { margin: 0 0 12px; color: var(--slate); max-width: 62ch; }
.split p:last-child { margin-bottom: 0; }
.split .actions { margin: 16px 0 0; }
.split-lead h2 { font-size: 28px; }
.about-founder { margin: 0 0 48px; }
.about-founder h2 { font-size: 26px; margin: 0 0 4px; }
.cta-box { margin-top: 56px; padding: 28px 20px; border-radius: 16px; background: var(--frost); }
.cta-box h2 { font-size: 24px; margin: 0 0 10px; }
.cta-box p { color: var(--slate); max-width: 60ch; }
.cta-box .actions { margin: 20px 0 0; }

/* Why Kortivo: the same call without and with a connection. */
.block-head .block-note { margin-top: 12px; color: var(--ink); font-weight: 500; }
.mail { max-width: 480px; margin: 0; }
.mail-label { margin: 0 0 8px; font-weight: 600; font-stretch: 108%; }
.mail-body { padding: 16px 18px; border-radius: 14px; background: var(--frost); font-size: 15px; color: var(--slate); }
.mail-body p { margin: 0; }
.mail-body .mail-subject { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-bottom: 8px; color: var(--ink); }
.mail-todo { margin: 10px 0 0; font-size: 15px; }
.call .figure-note { margin: 0; text-align: left; }
.statement { max-width: 26ch; margin: 0 0 20px; font-size: 24px; line-height: 1.3; font-weight: 600; font-stretch: 112%; }
.statement-note { max-width: 52ch; margin: 0; color: var(--slate); }
.statement-note + .statement-note { margin-top: 12px; }
.statement-note a { color: var(--ink); text-underline-offset: 3px; }
.prose-short p { max-width: 62ch; margin: 0 0 16px; }
.prose-short p:last-child { margin-bottom: 0; }
.founder-why h2 { margin-bottom: 12px; }

/* Trade pages: the scene, photo beside its text. */
.scene-grid { display: grid; gap: 24px; }
.scene-grid h2 { font-size: 26px; margin: 0 0 12px; }
.scene-grid p { color: var(--slate); max-width: 56ch; }
.scene-grid .evidence { color: var(--ink); }

/* Study charts are tables, so the numbers stay text. Accent bars in dark brass
   (3,77:1 on white), the rest in grey (3,1:1): both above the 3:1 for graphics. */
.chart { margin: 24px 0 32px; }
.chart table { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; }
.chart caption { caption-side: top; text-align: left; font-weight: 600; font-stretch: 108%; padding-bottom: 12px; }
.chart th, .chart td { text-align: left; padding: 10px 0; vertical-align: middle; border-bottom: 1px solid var(--hair); }
.chart thead th { font-size: 15px; font-weight: 400; color: var(--slate); border-bottom-color: var(--ink); }
.chart thead th:last-child { text-align: right; }
.chart tbody th { font-weight: 400; white-space: nowrap; padding-right: 12px; width: 1%; }
.chart .bar-cell { width: 100%; }
.bar { display: block; height: 14px; min-width: 3px; border-radius: 0 4px 4px 0; background: #8A93A6; }
.bar.is-accent { background: var(--signal-deep); }
.bar.is-zero { min-width: 0; width: 0; }
.chart .value { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.chart .sub { display: block; font-size: 14px; color: var(--slate); }

/* ---------- The dark band: where the product comes alive ---------- */
/* Ink with a brass glow, Kortivo colours only. Text in a cool near-white,
   never cream: warm greys read as generated. */
.demo-band {
  --on-dark: #EEF1F6; --muted-dark: #AAB3C5; --line-dark: rgba(255, 255, 255, .14);
  background: radial-gradient(55% 70% at 88% 12%, rgba(240, 198, 75, .16), transparent 70%), var(--ink);
  color: var(--on-dark); border-top: 0;
}
.demo-band .block-head { position: static; }
.demo-band h2 { color: #fff; }
.demo-band .block-head p { color: var(--muted-dark); }
.demo-band .panel { background: linear-gradient(#222A3D, #222A3D) padding-box, var(--metal) border-box; }
.demo-band .panel-top { border-bottom-color: var(--line-dark); color: var(--muted-dark); }
.demo-band .demo-status { color: #fff; }
.demo-band .label, .demo-band .hint, .demo-band .note { color: var(--muted-dark); }
.demo-band .note strong, .demo-band .note a { color: #fff; }
.demo-band .panel select { background: #161C2B; color: #fff; border-color: rgba(255, 255, 255, .24); }
.demo-band .btn-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.demo-band .btn-line:hover { background: rgba(255, 255, 255, .08); }
.demo-band :focus-visible, .demo-band .panel select:focus-visible { outline-color: #fff; }
.demo-band .panel-wave { filter: drop-shadow(0 0 12px rgba(240, 198, 75, .35)); }
.demo-band .demo-transcript { background: rgba(255, 255, 255, .06); }
.demo-band .demo-transcript .line-agent { color: #fff; }
.demo-band .demo-transcript .line-user { color: var(--muted-dark); }

/* ---------- Voice samples: hear the assistant with one tap ---------- */
.samples { --line: var(--hair); --muted: var(--slate); margin-top: 28px; }
.demo-band .samples { --line: var(--line-dark); --muted: var(--muted-dark); }
.demo-side .samples { margin: 0 0 36px; }
.samples-title { margin: 0 0 8px; font-weight: 600; font-stretch: 108%; }
.sample-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sample { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.sample-play {
  grid-row: span 2; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--signal); color: var(--ink); font: 500 16px/1 var(--font);
}
.sample-play:hover { background: var(--gold); }
.sample-play svg { width: 20px; height: 20px; fill: currentColor; }
.sample-play .i-pause, .sample-play[aria-pressed="true"] .i-play { display: none; }
.sample-play[aria-pressed="true"] .i-pause { display: block; }
.sample-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; min-height: 48px; }
.sample-name { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.35; color: var(--muted); }
.sample-name b { margin-right: 6px; font-weight: 600; color: var(--ink); }
.demo-band .sample-name b, .demo-band .samples-title { color: #fff; }
.sample-track { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sample-progress { display: block; width: 0; height: 100%; background: var(--signal); }
.sample-time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sample-text { grid-column: 2; }
.sample-text summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.sample-text ol { margin: 0 0 12px; padding: 0; list-style: none; font-size: 15px; }
.sample-text li { margin: 0 0 6px; }
.sample-text li b { margin-right: 6px; font-weight: 600; }
.samples-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- The study's evidence on the home page ---------- */
.evidence-chart { display: grid; gap: 20px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--hair); }
.evidence-chart figcaption { font-size: 19px; line-height: 1.5; max-width: 34em; }
.evidence-chart figcaption a { font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--signal); }

/* ---------- Home page rhythm: not every section in the same two columns ---------- */
.more-offers { margin-top: 48px; }
.more-offers h3 { font-size: 20px; margin: 0 0 12px; }

.price-band { padding: 64px 0 72px; border-top: 1px solid var(--hair); text-align: center; }
.price-band h2 { font-size: 28px; margin: 0 0 10px; }
.price-lead { max-width: 40ch; margin: 0 auto 28px; color: var(--slate); }
.price-band .price-box { justify-items: center; padding-top: 0; border-top: 0; }
.price-band .amount { font-size: 76px; }
.price-band .incl, .price-band .actions { justify-content: center; }

.faq-band { padding: 56px 0; border-top: 1px solid var(--hair); }
.faq-band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 16px; }
.faq-band-head h2 { font-size: 28px; margin: 0; }
.faq-band .faq summary { font-size: 18px; }

/* ---------- Motion: small, and only in answer to the visitor ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .prose details::details-content, .sample-text::details-content {
    height: 0; overflow: clip; transition: height .25s ease, content-visibility .25s allow-discrete;
  }
  .faq details[open]::details-content, .prose details[open]::details-content, .sample-text[open]::details-content { height: auto; }
  .menu[open] .menu-panel { animation: drop-in .18s ease-out; }
  .btn, .sample-play { transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
  .btn:active, .sample-play:active { transform: translateY(1px); }
  .trades a b, .offers a b, .block-more, .foot a { transition: color .15s ease, text-decoration-color .15s ease; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Sticky actions on phones ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--hair);
}
.sticky-bar .btn { flex: 1; padding: 0 12px; }

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 900px) {
  :root { --gutter: 24px; --header: 68px; }
  body { font-size: 17px; }
  .menu { display: none; }
  .brand svg { height: 26px; }
  .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
  .nav-links > a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; white-space: nowrap;
    font-size: 16px; color: var(--slate); text-decoration: none; border-bottom: 2px solid transparent;
  }
  .nav-links > a:hover { color: var(--ink); }
  .nav-links > a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
  .nav-links > a.nav-accent { padding: 0 6px; }
  .nav-links > a.nav-accent[aria-current="page"] { border-bottom-color: transparent; font-weight: 600; }
  .nav-cta { display: flex; gap: 10px; margin-left: auto; }
  .nav-cta .btn { min-height: 44px; padding: 0 16px; }
  .sticky-bar { display: none; }
  .site-footer { padding-bottom: 56px; }

  .page { padding-top: 40px; padding-bottom: 104px; }
  .crumbs + main.page { padding-top: 16px; }
  .page-head h1 { font-size: 48px; }
  .lead { font-size: 19px; }

  .hero { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
  .hero-copy { display: block; }
  .hero h1 { font-size: 54px; margin: 0 0 22px; }
  .answer { font-size: 19px; margin: 0 0 30px; max-width: 34em; }
  .hero .actions { display: flex; }
  .stage-phone { margin: 0; }
  .stage-phone img { max-width: 440px; }

  .scenes { padding-top: 96px; padding-bottom: 88px; }
  .scenes h2 { font-size: 40px; }
  .setup { padding: 88px 0; }
  .setup-grid { grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
  .setup h2 { font-size: 40px; }
  .sheet { padding: 28px 32px 16px; }
  .sheet dl > div { grid-template-columns: 170px 1fr; gap: 16px; }
  .sheet[data-folded] .sheet-more { display: grid; }
  .sheet-toggle { display: none; }
  .trip { grid-template-columns: repeat(3, 1fr); }
  .shot { aspect-ratio: 4 / 5; }
  .ping { left: 14px; right: 14px; bottom: 14px; }

  .block { padding: 96px 0; }
  .block-grid { grid-template-columns: 4fr 7fr; gap: 64px; }
  .block-head { position: sticky; top: 100px; align-self: start; }
  .block-head h2 { font-size: 34px; }
  .rows > div { grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; }


  .portal-band { padding: 96px 0 104px; }
  .portal-head { margin-bottom: 36px; }
  .portal-head h2 { font-size: 40px; }

  .demo-grid { grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; }

  .trades > :nth-child(odd) { padding-right: 24px; }
  .trades > :nth-child(even) { padding-left: 24px; }
  .offers > a, .offers > div { grid-template-columns: 260px 1fr; gap: 24px; padding: 18px 0; }

  .founder { grid-template-columns: 300px 1fr; gap: 40px; }
  .founder img { max-width: none; }
  .statement { font-size: 32px; }

  .price-box { grid-template-columns: auto 1fr; gap: 12px 48px; align-items: end; padding-top: 28px; }
  .amount { font-size: 72px; }
  .per { padding-bottom: 8px; }
  .incl, .price-box .actions { grid-column: 1 / -1; }

  .steps { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .steps li { padding: 22px 20px 0 0; }

  .closing { margin: 0 24px 24px; padding: 96px 0; }
  .closing h2 { font-size: 46px; }
  .closing-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .contact-grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
  .contact-actions { display: flex; flex-wrap: wrap; }

  .notfound h1 { font-size: 56px; }

  .evidence-chart { grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
  .evidence-chart figcaption { font-size: 22px; }
  .more-offers { margin-top: 72px; }
  .more-offers h3 { font-size: 24px; }
  .price-band { padding: 104px 0 112px; }
  .price-band h2 { font-size: 40px; }
  .price-band .price-box { grid-template-columns: 1fr; }
  .price-band .per { padding-bottom: 0; }
  .price-band .amount { font-size: 136px; }
  .price-band .amount small { font-size: 34px; }
  .faq-band { padding: 96px 0; }
  .faq-band-head h2 { font-size: 40px; }
  .faq-band .faq summary { font-size: 20px; min-height: 68px; }

  .page-top { padding-top: 48px; }
  .scene-grid { grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
  .scene-grid .shot { aspect-ratio: 4 / 3; }
  .scene-grid h2 { font-size: 34px; }
  .prose h1 { font-size: 44px; }
  .split { grid-template-columns: 4fr 7fr; gap: 48px; padding: 32px 0; }
  .split-lead { padding: 40px 0 44px; }
  .split-lead h2 { font-size: 34px; }
  .cta-box { padding: 40px 48px; }

  .foot { grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
  .foot-about { grid-column: auto; }
}

/* The header needs about 1,080 px for its five links and two buttons on one
   line (measured 2026-09-26). Narrower, the phone menu stays beside the
   buttons, so no link wraps onto two lines. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .nav-links { display: none; }
  .menu { display: block; margin-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}