@charset "UTF-8";
/* =====================================================================
   XBODY Funnel (Apotheken und Industriepartner) – gemeinsames Design
   Eine Datei, keine Fremdressourcen. Schrift (selbst gehostet):
   /static-assets/fonts/space-grotesk/space-grotesk.css
   Gold ist nur Fläche/Akzent oder Text auf Dunkel, nie Text auf Weiß.
   ===================================================================== */

:root {
    --ink: #111111;
    --ink-2: #1c1c1c;
    --gold: #f8bf00;
    --gold-soft: #fff4cc;
    --gold-hover: #ffcb2e;
    --paper: #ffffff;
    --sand: #f7f5f0;
    --muted: #4b4b4b;
    --line: #e6e1d6;
    --ok: #1e7f5c;
    --danger: #b3261e;
    --danger-soft: #fdeceb;
    --field: #8a8478;          /* Rand von Eingabefeldern: Kontrast >= 3:1 zu Weiß */
    --on-dark: #ffffff;
    --on-dark-muted: #cdc9be;  /* Text auf --ink: Kontrast > 11:1 */
    --line-dark: rgba(255, 255, 255, .16);
    --focus: #111111;
    --radius: 20px;
    --radius-sm: 14px;
    --radius-lg: 28px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --max: 1180px;
    --section-y: clamp(3.5rem, 6vw + 1rem, 6.5rem);
    --shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 18px 40px -18px rgba(17, 17, 17, .22);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.2rem + 4.1vw, 4rem); }
h2 { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
@supports not selector(:focus-visible) { :focus { outline: 3px solid var(--focus); outline-offset: 3px; } }
.hero, .section--dark, .site-header, .site-footer, .step-nav, .cta-band { --focus: var(--gold); }
/* Hell hinterlegte Bereiche innerhalb des dunklen Kopfes: dunkler Fokusrahmen (Kontrast > 15:1) */
.customizer, .phone { --focus: #111111; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 1rem; top: -4.5rem; z-index: 100; padding: .7rem 1.1rem; border-radius: 12px;
    background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* "Schmale" Abschnitte behalten die linke Kante der übrigen Abschnitte, nur der Inhalt ist auf Lesebreite begrenzt */
.container--narrow > * { max-width: 50rem; }
.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark .lead, .section--dark p { color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head > * + * { margin-top: 1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .9375rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0;
    font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.eyebrow::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); flex: none; }
.hero .eyebrow, .section--dark .eyebrow, .cta-band .eyebrow { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 3rem; padding: .85rem 1.65rem; border: 2px solid transparent; border-radius: 999px;
    font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal;
    transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(248, 191, 0, .55); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn--lg { min-height: 3.5rem; padding: 1rem 2.1rem; font-size: 1.0625rem; }
.btn--sm { min-height: 2.5rem; padding: .5rem 1.15rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .icon { width: 1.15em; height: 1.15em; }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: .1rem; }
.link-arrow:hover { border-bottom-color: var(--gold); }
.hero .link-arrow, .section--dark .link-arrow, .cta-band .link-arrow { color: #fff; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Kopf, Schritt-Navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; border-radius: 8px; }
/* Logo: schwarze Schrift auf weißem Grund -> invertiert; "screen" lässt den schwarzen Grund auf dunklem Kopf verschwinden */
.brand img { width: 5.4rem; height: auto; filter: invert(1); mix-blend-mode: screen; }
.site-header .btn { flex: none; }

.step-nav { background: var(--ink-2); color: var(--on-dark-muted); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.step-nav__list { display: flex; flex-wrap: wrap; gap: .15rem 1.4rem; margin: 0; padding: 0; }
.step-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 0; font-size: .875rem; font-weight: 500; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.step-nav a:hover { color: #fff; }
.step-nav a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: var(--gold); }
.step-nav__num { display: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: .75rem; font-weight: 700; align-items: center; justify-content: center; }
.step-nav a[aria-current="page"] .step-nav__num { background: var(--gold); color: var(--ink); }
@media (min-width: 640px) { .step-nav__num { display: inline-flex; } .step-nav__list { gap: .15rem 2rem; } }
@media (max-width: 419px) { .step-nav__list { gap: .1rem .9rem; } .step-nav a { font-size: .8125rem; } }

/* Formularseiten: vor dem Absenden "zum Formular", danach der Weg zurück (JS: body.is-done, ohne JS: Anker #danke) */
.site-header .btn--done { display: none; }
body.is-done .site-header .btn--open { display: none; }
body.is-done .site-header .btn--done { display: inline-flex; }
body:has(.thanks:target) .site-header .btn--open { display: none; }
body:has(.thanks:target) .site-header .btn--done { display: inline-flex; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; overflow: clip; background: var(--ink); color: var(--on-dark); padding-block: clamp(2.5rem, 6vw, 5.25rem) clamp(3rem, 7vw, 6rem); }
.hero::before {
    content: ''; position: absolute; top: -18rem; right: -12rem; width: 46rem; height: 46rem; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(248, 191, 0, .24) 0%, rgba(248, 191, 0, 0) 62%);
}
.hero::after {
    content: ''; position: absolute; bottom: -16rem; left: -14rem; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(248, 191, 0, .1) 0%, rgba(248, 191, 0, 0) 65%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }
.hero__copy > * + * { margin-top: 1.4rem; }
.hero .lead { color: var(--on-dark-muted); }
.hero__copy .lead { max-width: 38rem; }
.hero h1 .accent { color: var(--gold); }
.hero h1 .accent--line { display: block; }
.h1-for { display: block; margin-bottom: .6rem; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 500; letter-spacing: 0; color: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem !important; }
.hero__visual { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.hero__copy > .hero__why { margin-top: 1rem; font-size: .9375rem; color: var(--on-dark-muted); }
.hero__why a { color: #fff; font-weight: 700; }

/* Kompakte App-Zeile (nur auf dem Handy und nur mit persönlichem Link): Kürzel, Name, Ort, Farbe */
.app-mini { display: none; align-items: center; flex-wrap: wrap; gap: .55rem .9rem; max-width: 27rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark); }
.app-mini__logo { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--apo, #1e7f5c); color: var(--apo-on, #fff); font-size: .95rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.app-mini__who { display: flex; flex-direction: column; flex: 1 1 8rem; min-width: 0; line-height: 1.25; }
.app-mini__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: #fff; font-weight: 700; }
.app-mini__city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--on-dark-muted); }
.app-mini__link { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .9375rem; font-weight: 700; color: #fff; text-underline-offset: .18em; }
.app-mini__link .icon { width: 1.05em; height: 1.05em; transform: rotate(90deg); stroke-width: 2.4; }
@media (max-width: 899px) {
    .app-mini { display: flex; }
    /* Der Name steht dann in der App-Zeile: die Zeile "Für die …" bleibt nur für Screenreader */
    .has-mini .h1-for { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.hero--page { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4.25rem); }
.hero--page h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); max-width: 22ch; }
@media (min-width: 900px) { .hero__grid--split { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }

.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; justify-items: start; }
/* Listenpunkte ohne Flex: Text mit Bindestrich-Wörtern (<span class="nowrap">) bleibt ein durchlaufender Text */
.checks li { position: relative; padding-left: 2.15rem; font-weight: 500; color: #fff; }
.checks .tick { position: absolute; left: 0; top: .1rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gold); color: var(--ink); }
.checks .tick .icon { width: .95rem; height: .95rem; stroke-width: 2.6; }

/* ---------- Karten, Raster ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 879px) { .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem); }
.card > * + * { margin-top: .8rem; }
.card p { color: var(--muted); }
.card--sand { background: var(--sand); border-color: transparent; }
.card--dark { background: var(--ink-2); border-color: var(--line-dark); color: #fff; }
.card--dark p { color: var(--on-dark-muted); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: 14px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px #f0dc8c; color: var(--ink); margin-bottom: .4rem; }
.card__icon .icon { width: 1.55rem; height: 1.55rem; }
/* Handy: kompaktere Karten, Symbol neben der Überschrift */
@media (max-width: 719px) {
    .card { padding: 1.25rem; }
    .card:has(> .card__icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .6rem; }
    .card:has(> .card__icon) > * { margin-top: 0; }
    .card:has(> .card__icon) > .card__icon { grid-column: 1; grid-row: 1; width: 2.6rem; height: 2.6rem; margin: 0; border-radius: 12px; }
    .card:has(> .card__icon) > .card__icon .icon { width: 1.35rem; height: 1.35rem; }
    .card:has(> .card__icon) > h2, .card:has(> .card__icon) > h3 { grid-column: 2; grid-row: 1; }
    .card:has(> .card__icon) > :not(.card__icon):not(h2):not(h3) { grid-column: 1 / -1; }
}
.after-grid { margin-top: clamp(2rem, 4vw, 3rem); }
.actions-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; }
.card__num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: var(--gold); font-weight: 700; margin-bottom: .4rem; }

/* Gegenüberstellung (zwei Spalten) */
.panel { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.panel--light { background: var(--paper); border: 1px solid var(--line); }
.panel--sand { background: var(--sand); }
.panel h3 { margin-bottom: 1.1rem; }
.ticks > li { display: flex; align-items: flex-start; gap: .75rem; padding-block: .55rem; }
.ticks > li + li { border-top: 1px solid var(--line); }
.ticks .icon { width: 1.35rem; height: 1.35rem; margin-top: .22rem; color: var(--ok); stroke-width: 2.4; }
.ticks--plain > li + li { border-top: 0; }
.panel--sand .ticks .icon--gift, .ticks .icon--dot { color: var(--ink); }
.section--dark .ticks > li + li { border-top-color: var(--line-dark); }
.section--dark .ticks .icon { color: var(--gold); }

/* Hinweisbox */
.after-grid + .notice, .steps + .notice { margin-top: clamp(2rem, 4vw, 3rem); }
.notice { display: flex; align-items: flex-start; gap: 1rem; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid #ecd37a; padding: 1.25rem 1.5rem; }
.notice .icon { width: 1.7rem; height: 1.7rem; margin-top: .1rem; }
.notice strong { display: block; margin-bottom: .15rem; }
.notice--error { background: var(--danger-soft); border-color: #efb6b2; color: #6e1511; }
.notice--ok { background: #e7f4ee; border-color: #b4dcc9; color: #12503a; }
.notice--error .icon { color: var(--danger); }

/* ---------- Ablauf (Schritte) ---------- */
.steps { counter-reset: schritt; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; position: relative; }
.steps > li { counter-increment: schritt; position: relative; padding-left: 4.1rem; min-height: 3rem; }
.steps > li::before {
    content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--gold); font-weight: 700; font-size: 1.15rem;
}
.steps > li::after { content: ''; position: absolute; left: 1.4rem; top: 3.1rem; bottom: -1.6rem; width: 2px; background: var(--line); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: .3rem; }
.steps p { color: var(--muted); }
.steps .meta { display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border-radius: 999px; background: var(--gold-soft); font-size: .875rem; font-weight: 700; }
@media (min-width: 900px) {
    .steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
    .steps--row > li { padding-left: 0; padding-top: 4.1rem; display: flex; flex-direction: column; align-items: flex-start; }
    .steps--row .meta { margin-top: auto; }
    .steps--row p { margin-bottom: .9rem; }
    .steps--row > li::after { left: 3.2rem; right: -1.4rem; top: 1.4rem; bottom: auto; width: auto; height: 2px; }
}
.section--dark .steps > li::before { background: var(--gold); color: var(--ink); }
.section--dark .steps > li::after { background: var(--line-dark); }
.section--dark .steps p { color: var(--on-dark-muted); }

/* Zeitleiste (Pilot-Ablauf) */
.timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.timeline > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem 1.5rem; padding: 1.35rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.timeline__day { display: inline-block; justify-self: start; padding: .25rem .8rem; border-radius: 999px; background: var(--ink); color: var(--gold); font-weight: 700; font-size: .9375rem; }
.timeline h3 { font-size: 1.2rem; }
.timeline p { color: var(--muted); }
@media (min-width: 720px) { .timeline > li { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; } .timeline__day { margin-top: .2rem; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.5rem; padding: 1.1rem .25rem;
    font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex: none; width: .7rem; height: .7rem; margin-right: .35rem; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
    transform: rotate(45deg) translateY(-.2rem); transition: transform .25s var(--ease);
}
.faq details[open] > summary::after { transform: rotate(-135deg) translateY(-.1rem); }
.faq summary:hover { color: #000; background: rgba(247, 245, 240, .6); }
.faq__body { padding: 0 .25rem 1.4rem; color: var(--muted); max-width: 46rem; }
.faq__body > * + * { margin-top: .7rem; }
.faq__body a { color: var(--ink); font-weight: 500; }
.faq__note { margin-top: 1.75rem; color: var(--muted); }

/* ---------- Abschluss-Aufruf ---------- */
.cta-band { background: var(--ink); color: var(--on-dark); text-align: center; position: relative; overflow: hidden; overflow: clip; }
.cta-band::before { content: ''; position: absolute; left: 50%; top: -22rem; width: 50rem; height: 40rem; margin-left: -25rem; background: radial-gradient(ellipse, rgba(248, 191, 0, .2), rgba(248, 191, 0, 0) 65%); pointer-events: none; }
.cta-band .container { position: relative; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin-top: 1rem; color: var(--on-dark-muted); }
.cta-band .btn { margin-top: 2rem; }
.contact-line { font-size: .9375rem; color: var(--on-dark-muted); }
.contact-line p { margin: 0; }
.contact-line p + p { margin-top: .2rem; }
.contact-line .contact-line__title { color: #fff; font-weight: 700; }
.contact-line__row { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
.contact-line a { color: #fff; font-weight: 500; }
.contact-line a:hover { color: var(--gold); }
.cta-band .contact-line { margin: 1.5rem auto 0; max-width: 42rem; }
.cta-band .contact-line p { margin-top: 0; }
.cta-band .contact-line p + p { margin-top: .2rem; }
.cta-band .contact-line__row { justify-content: center; }
.pilot__aside .contact-line { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); }

/* ---------- Fuß ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 1.75rem; font-size: .9375rem; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.site-footer a { color: #fff; text-decoration: none; padding: .35rem 0; display: inline-block; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- Einblenden beim Scrollen (nur mit JavaScript, siehe funnel.js) ---------- */
.reveal { transition: opacity .75s var(--ease), transform .75s var(--ease); }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* =====================================================================
   Formulare (mehrstufig, ohne JavaScript ein einziges Formular)
   ===================================================================== */
.pilot { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .pilot { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .pilot__aside { position: sticky; top: 6.5rem; } }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.5vw, 2.5rem); box-shadow: var(--shadow); }
.pilot__intro > * + * { margin-top: .8rem; }
.pilot-page .hero--page { padding-block: 1.5rem 4.5rem; }
.pilot-page .hero--page h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.pilot-page .pilot__intro > * + * { margin-top: .5rem; }
.pilot-page .pilot-section { padding-top: 0; }
.pilot-page .pilot { margin-top: -3rem; position: relative; z-index: 2; }
.pilot__aside { background: var(--ink-2); border: 1px solid var(--line-dark); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.pilot__aside h2 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.pilot__aside .steps > li::before { background: var(--gold); color: var(--ink); width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.pilot__aside .steps > li { padding-left: 3.3rem; min-height: 2.4rem; }
.pilot__aside .steps > li::after { left: 1.15rem; top: 2.6rem; background: var(--line-dark); }
.pilot__aside .steps { gap: 1.4rem; }
.pilot__aside p, .pilot__aside .steps p { color: var(--on-dark-muted); }
.pilot__aside .steps h3 { font-size: 1.05rem; color: #fff; }
.pilot__aside .aside-note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); font-size: .9375rem; }

.progress { margin-bottom: 1.75rem; }
/* Schrittanzeige schon vor dem Start von funnel.js (form-flag.js setzt .has-stepper, sobald JavaScript aktiv ist): beim Laden springt nichts.
   Ohne JavaScript bleibt es ein langes Formular mit einem Absenden-Knopf. */
.progress { display: none; }
.has-stepper .progress, .funnel-form.is-stepper .progress { display: block; }
.form-actions [data-next] { display: none; }
.has-stepper .form-actions [data-next], .funnel-form.is-stepper .form-actions [data-next] { display: inline-flex; }
.has-stepper .funnel-form:not(.is-stepper) .step + .step { display: none; }
.has-stepper .funnel-form:not(.is-stepper) [data-submit] { display: none; }
.progress__label { font-size: .9375rem; font-weight: 700; margin-bottom: .55rem; display: flex; justify-content: space-between; gap: 1rem; }
.progress__bar { height: .6rem; border-radius: 999px; background: var(--sand); overflow: hidden; border: 1px solid var(--line); }
.progress__bar > span { display: block; height: 100%; width: 20%; border-radius: 999px; background: var(--gold); transition: width .4s var(--ease); }

/* Ohne JavaScript stehen alle Schritte untereinander (Abstand statt Rahmen: ein Rahmen am fieldset schneidet die Überschrift an) */
.funnel-form .step + .step { margin-top: 3rem; }
.funnel-form.is-stepper .step + .step { margin-top: 0; }
.step__title { display: block; width: 100%; padding: 0; margin: 0 0 1.1rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.step__title:focus { outline: none; }
.step__hint { color: var(--muted); margin: -.5rem 0 1.25rem; font-size: 1rem; }
.step.is-entering { animation: step-in .4s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; left: 0; top: 50%; }
.choice__box {
    display: flex; align-items: center; gap: .85rem; min-height: 3.5rem; padding: .8rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); cursor: pointer; font-weight: 500; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.choice:hover .choice__box { border-color: #b8b09c; }
.choice__mark {
    flex: none; width: 1.55rem; height: 1.55rem; border: 2px solid #6f6a5d; border-radius: 50%; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s;
}
.choice--check .choice__mark { border-radius: 7px; }
.choice__mark .icon { width: .95rem; height: .95rem; stroke-width: 3; color: var(--gold); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.choice input:checked + .choice__box { border-color: var(--ink); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 700; }
.choice input:checked + .choice__box .choice__mark { background: var(--ink); border-color: var(--ink); }
.choice input:checked + .choice__box .choice__mark .icon { opacity: 1; transform: none; }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice input:disabled + .choice__box, .choice input[aria-disabled="true"] + .choice__box { opacity: .5; cursor: not-allowed; }
.step__limit { margin-top: .85rem; font-size: .9375rem; font-weight: 700; }
.step__limit:empty { display: none; }
.choice--pill .choice__box { justify-content: center; min-height: 3rem; border-radius: 999px; padding-inline: 1rem; }
.choice--pill .choice__mark { display: none; }

.field { margin-top: 1.25rem; }
.field:first-child { margin-top: 0; }
.field__label { display: block; margin-bottom: .45rem; font-weight: 700; }
.field__label .opt { font-weight: 400; color: var(--muted); }
.field__hint { margin-top: .4rem; font-size: .9375rem; color: var(--muted); }
.field__error { margin-top: .45rem; font-size: .9375rem; font-weight: 700; color: var(--danger); display: flex; gap: .45rem; align-items: flex-start; }
.field__error::before { content: ''; flex: none; width: .95rem; height: .95rem; margin-top: .22rem; border-radius: 50%; background: var(--danger); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 100%); }
.input {
    display: block; width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 2px solid var(--field); border-radius: var(--radius-sm);
    background: #fff; font-size: 1rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #6b665b; opacity: 1; }
.input:hover { border-color: var(--ink); }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(248, 191, 0, .55); outline: none; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.input[aria-invalid="true"] { border-color: var(--danger); background: #fffafa; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.funnel-form .input-row { margin-top: 1.25rem; }
.funnel-form .input-row:first-child { margin-top: 0; }
.input-row .field { margin-top: 0; }
.input-row > .field__error { grid-column: 1 / -1; margin-top: -.5rem; }
@media (min-width: 560px) { .input-row--plz { grid-template-columns: 9rem minmax(0, 1fr); } .input-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--check { margin-top: 1.5rem; }
.check-line { display: flex; align-items: flex-start; gap: .85rem; cursor: pointer; }
.check-line input { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--ink); }
.check-line span { font-size: 1rem; }
.check-line a { font-weight: 700; }

.conditional { margin-top: 1.1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--sand); border: 1px solid var(--line); }
.conditional > * + * { margin-top: .85rem; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 2rem; }
.form-actions [data-next], .form-actions [data-submit] { margin-left: auto; }
.form-actions .btn { min-width: 8.5rem; }
@media (max-width: 559px) {
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; margin-left: 0; }
}
.form-message { margin-top: 1.5rem; }
.form-message:empty { display: none; }
.form-note { margin-top: 1.1rem; font-size: .9375rem; color: var(--muted); }
/* Handy: etwas dichter, damit "Weiter" auch auf kleineren Bildschirmen ohne Scrollen im Bild steht */
@media (max-width: 559px) {
    .pilot-page .choices { gap: .5rem; }
    .pilot-page .choice:not(.choice--pill) .choice__box { min-height: 3.25rem; padding-block: .65rem; }
    .pilot-page .form-actions { margin-top: 1.5rem; }
}
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Rückmeldungen: ohne JavaScript über den Anker (/pilot-anfrage leitet auf …/#danke bzw. …/#fehler), mit JavaScript über .is-visible */
.thanks, .status-box { display: none; scroll-margin-top: 7rem; }
.thanks:target, .thanks.is-visible { display: block; }
.status-box:target, .status-box.is-visible { display: flex; }
.status-box { margin-bottom: 1.5rem; }
.thanks { text-align: center; padding-block: clamp(.5rem, 2vw, 1.5rem); }
.thanks:focus, .status-box:focus, .thanks [tabindex="-1"]:focus { outline: none; }
.thanks__badge { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--gold); color: var(--ink); margin-bottom: 1.25rem; }
.thanks__badge .icon { width: 2.3rem; height: 2.3rem; stroke-width: 2.6; }
.thanks h2 { margin-bottom: .8rem; color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.thanks .lead { max-width: 34rem; margin-inline: auto; color: var(--on-dark-muted); }
.thanks__next { margin: 2.25rem auto 0; max-width: 36rem; text-align: left; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.thanks__next h3 { margin-bottom: 1.1rem; font-size: 1.15rem; }
.thanks__next .steps { gap: 1.1rem; }
.thanks__next .steps > li { padding-left: 3.3rem; min-height: 2.4rem; }
.thanks__next .steps > li::before { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
.thanks__next .steps > li::after { left: 1.1rem; top: 2.5rem; }
.thanks__next .steps h4 { font-size: 1.0625rem; margin-bottom: .1rem; }
.thanks__next .steps p { color: var(--muted); }
.thanks__actions { margin-top: 2rem; }
.pilot-page.is-done .pilot-section { display: none; }
.pilot-page.is-done .pilot__intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pilot-page.is-done .hero { padding-block: clamp(3rem, 8vw, 6rem); }
.pilot-page:has(.thanks:target) .pilot-section { display: none; }
.pilot-page:has(.thanks:target) .pilot__intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pilot-page:has(.thanks:target) .hero { padding-block: clamp(3rem, 8vw, 6rem); }

/* =====================================================================
   App-Vorschau (Handy-Mockup, app-preview.js)
   Alle Maße in em, damit das Handy mit --pw (Breite) mitwächst.
   ===================================================================== */
.app-preview {
    --pw: min(330px, calc(100vw - 2 * var(--gutter)));
    --apo: #1e7f5c; --apo-on: #ffffff; --apo-text: #1e7f5c; --apo-soft: #e4f1ec;
    display: flex; flex-direction: column; align-items: center; gap: .9rem; width: 100%;
}
@media (min-width: 900px) { .app-preview { --pw: 300px; } }
@media (min-width: 1000px) { .app-preview--lg { --pw: 340px; } }
/* Das Handy entsteht erst per JavaScript: Platz vorab reservieren, damit nichts springt (ohne JavaScript bleibt der Platz frei) */
@media (scripting: enabled) { .hero .app-preview { min-height: calc(var(--pw) * 1.96 + 3.5rem); } }
.phone {
    position: relative; flex: none; width: var(--pw); height: calc(var(--pw) * 1.96); max-width: 100%;
    font-size: calc(var(--pw) / 21); line-height: 1.35; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #161616;
    padding: .55em; border-radius: 3.1em; background: linear-gradient(145deg, #2d2d2d, #0b0b0b);
    box-shadow: 0 0 0 .09em #3b3b3b, 0 2.4em 4.5em -1.2em rgba(0, 0, 0, .65), 0 .5em 1.2em rgba(0, 0, 0, .35);
}
.phone__notch { position: absolute; z-index: 5; top: 1.05em; left: 50%; width: 5.6em; height: 1.45em; margin-left: -2.8em; border-radius: 1em; background: #050505; }
.phone__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; overflow: clip; border-radius: 2.55em; background: #fff; }
.statusbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .85em 1.6em .15em 1.8em; height: 2.2em; font-size: .78em; font-weight: 700; color: #161616; }
.statusbar__icons { display: inline-flex; align-items: center; gap: .35em; }
.statusbar__icons i { display: block; background: #161616; border-radius: .12em; }
.statusbar__icons i:nth-child(1) { width: .9em; height: .6em; clip-path: polygon(0 100%, 0 65%, 28% 65%, 28% 100%, 36% 100%, 36% 40%, 64% 40%, 64% 100%, 72% 100%, 72% 0, 100% 0, 100% 100%); border-radius: 0; }
.statusbar__icons i:nth-child(2) { width: 1.5em; height: .72em; border-radius: .2em; opacity: .92; }

.app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.app__head { flex: none; display: flex; align-items: center; gap: .7em; padding: .35em 1em .7em; }
.app__logo {
    flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--apo); color: var(--apo-on); font-weight: 700; font-size: .95em; letter-spacing: .02em; text-transform: uppercase;
}
.app__who { min-width: 0; display: flex; flex-direction: column; }
.app__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 1em; font-weight: 700; line-height: 1.15; color: #161616; }
.app__city { font-size: .78em; color: #595959; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__body { position: relative; flex: 1; min-height: 0; background: #fff; overflow: hidden; overflow: clip; }
.screen {
    position: absolute; inset: 0; padding: .3em 1em 1em; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    opacity: 0; visibility: hidden; transform: translateY(.5em); transition: opacity .4s ease, transform .4s var(--ease), visibility 0s linear .4s;
}
.screen::-webkit-scrollbar { display: none; }
.screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.screen__title { font-size: 1.28em; font-weight: 700; letter-spacing: -.02em; margin: .05em 0 .6em; color: #161616; }

.chip { display: inline-flex; align-items: center; gap: .5em; padding: .4em .85em; border-radius: 999px; background: var(--apo-soft); color: #161616; font-size: .82em; font-weight: 700; }
.chip__dot { width: .62em; height: .62em; border-radius: 50%; background: var(--apo); box-shadow: 0 0 0 .22em rgba(255, 255, 255, .75); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .65em; margin-top: .95em; }
.tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .7em; min-height: 6em; padding: .8em;
    border: 0; border-radius: 1.1em; background: #f2f2f5; color: #161616; text-align: left; font: inherit; transition: transform .2s var(--ease), background-color .2s;
}
button.tile:hover { background: var(--apo-soft); transform: translateY(-.1em); }
.tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; border-radius: .8em; background: var(--apo); color: var(--apo-on); }
.tile__icon .icon, .tab .icon, .pill .icon, .row-ico .icon { width: 1.3em; height: 1.3em; stroke-width: 2; }
.tile__label { font-size: 1em; font-weight: 700; line-height: 1.15; }
.soon { display: inline-block; padding: .08em .55em; border-radius: 999px; background: #e5e5ea; color: #4a4a4a; font-size: .68em; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.tile .soon { position: absolute; top: .65em; right: .6em; }
.tile--soon { opacity: .78; }
.team { margin-top: .95em; padding: 1em; border-radius: 1.1em; border: 1px solid #e5e5ea; }
.team__title { font-weight: 700; font-size: .95em; margin-bottom: .6em; }
.team__actions { display: flex; gap: .5em; }
.pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .7em .5em; border-radius: 999px; background: var(--apo-soft); color: #161616; font-size: .85em; font-weight: 700; }
.pill .icon { width: 1.1em; height: 1.1em; color: var(--apo-text); }
.chip--gap { margin-top: .75em; }
.bonus { padding: .95em 1em; border-radius: 1.2em; background: var(--apo-text); color: #fff; }
.bonus__title { font-size: .92em; font-weight: 700; line-height: 1.25; }
.bonus__row { display: grid; grid-template-columns: repeat(8, 1fr); gap: .3em; margin-top: .65em; }
.bonus__row i { display: block; aspect-ratio: 1; border-radius: 50%; border: .13em solid rgba(255, 255, 255, .8); }
.bonus__row i.on { background: #fff; }
.bonus__tag { display: inline-block; margin-top: .7em; padding: .08em .65em; border-radius: 999px; background: #fff; color: #161616; font-size: .68em; font-weight: 700; white-space: nowrap; }
.match { margin-top: .6em; padding: .8em .85em; border-radius: 1.1em; border: 1px solid #e5e5ea; }
.match__row { display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: .88em; font-weight: 700; line-height: 1.25; }
.match__stock { flex: none; color: var(--apo-text); font-size: .85em; }

.demo-input { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1.15em .85em; border-radius: 1.1em; border: 1.5px dashed #aeaeb2; color: #3b3b3b; font-size: .88em; line-height: 1.3; text-align: center; }
.demo-input .icon { width: 2.4em; height: 2.4em; flex: none; color: var(--apo-text); }
.demo-field { margin-top: .7em; padding: .85em .9em; border-radius: 1em; border: 2px solid var(--apo); font-weight: 500; font-size: .95em; display: flex; align-items: center; }
.demo-field::after { content: ''; width: .12em; height: 1.1em; margin-left: .15em; background: var(--apo); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.order { margin-top: .85em; padding: 1.05em .95em; border-radius: 1.1em; background: #f2f2f5; }
.order__name { display: block; font-weight: 700; font-size: 1em; }
.order__status { margin-top: .5em; display: flex; align-items: flex-start; gap: .5em; color: #161616; font-size: .9em; font-weight: 700; line-height: 1.3; }
.order__status .icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2.6; color: var(--apo-text); }
.hint { margin-top: .8em; font-size: .8em; color: #595959; line-height: 1.35; }

.scan { position: relative; height: 7.3em; border-radius: 1.1em; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a3a3a, #161616 75%); }
.scan__c { position: absolute; width: 1.3em; height: 1.3em; border: .2em solid #fff; opacity: .9; }
.scan__c--tl { top: .7em; left: .7em; border-right: 0; border-bottom: 0; border-top-left-radius: .5em; }
.scan__c--tr { top: .7em; right: .7em; border-left: 0; border-bottom: 0; border-top-right-radius: .5em; }
.scan__c--bl { bottom: .7em; left: .7em; border-right: 0; border-top: 0; border-bottom-left-radius: .5em; }
.scan__c--br { bottom: .7em; right: .7em; border-left: 0; border-top: 0; border-bottom-right-radius: .5em; }
.scan__item { position: absolute; left: 50%; top: 52%; width: 2.9em; height: 4em; margin: -2em 0 0 -1.45em; border-radius: .55em; background: #f2f2f7; }
.scan__item::before { content: ''; position: absolute; left: 50%; top: -.8em; width: 1.7em; height: .95em; margin-left: -.85em; border-radius: .3em .3em 0 0; background: #d1d1d6; }
.scan__item::after { content: ''; position: absolute; left: 0; right: 0; top: 1.15em; height: 1.5em; background: var(--apo); }
.scan__line { position: absolute; left: 12%; right: 12%; top: 14%; height: .2em; border-radius: 1em; background: #fff; box-shadow: 0 0 .9em .2em var(--apo), 0 0 .3em #fff; animation: scan-move 2.2s ease-in-out infinite alternate; }
@keyframes scan-move { from { top: 14%; } to { top: 80%; } }
.result { margin-top: .7em; padding: .8em .85em; border-radius: 1.1em; background: #f2f2f5; }
.result__head { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-weight: 700; font-size: .95em; margin-bottom: .4em; }
.result ul { display: grid; gap: .3em; font-size: .82em; line-height: 1.3; }
.result li { display: flex; gap: .5em; align-items: flex-start; }
.result li::before { content: ''; flex: none; width: .5em; height: .5em; margin-top: .45em; border-radius: 50%; background: var(--apo); }
.code { margin-top: .75em; padding: .55em .8em; border-radius: .95em; background: #fff; border: 2px solid var(--apo); text-align: center; }
.code__label { display: block; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #4a4a4a; }
.code__value { display: block; font-size: 2.1em; font-weight: 700; letter-spacing: .1em; line-height: 1.15; color: #161616; }
.code__hint { margin-top: .55em; font-size: .78em; line-height: 1.3; color: #3b3b3b; text-align: center; }

.offers { display: grid; gap: .6em; }
.offer { position: relative; padding: .95em .95em; border-radius: 1.1em; background: #f2f2f5; }
.offer__tag { display: inline-block; margin-bottom: .35em; padding: .08em .6em; border-radius: 999px; background: var(--apo); color: var(--apo-on); font-size: .72em; font-weight: 700; }
.offer__name { display: block; font-weight: 700; font-size: .95em; line-height: 1.25; }
.offer__sub { display: block; margin-top: .15em; font-size: .78em; color: #595959; line-height: 1.3; }
.offer--feature { background: var(--apo-soft); box-shadow: inset 0 0 0 2px var(--apo); }

.card-line { margin-top: .6em; padding: .95em; border-radius: 1.1em; background: #f2f2f5; }
.pharmacy-row { display: flex; align-items: center; gap: .7em; }
.pharmacy-row .app__logo { width: 2.3em; height: 2.3em; font-size: .85em; }
.card-line__label { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #4a4a4a; margin-bottom: .5em; display: block; }
.row { display: flex; align-items: center; gap: .65em; font-size: .88em; line-height: 1.3; font-weight: 500; }
.row-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--apo-soft); color: var(--apo-text); }
.toggle-row { margin-top: .6em; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .75em .85em; border-radius: 1.1em; border: 1px solid #e5e5ea; font-weight: 700; font-size: .92em; }
.switch { position: relative; flex: none; width: 3em; height: 1.75em; padding: 0; border: 0; border-radius: 999px; background: #8e8e93; transition: background-color .2s; }
.switch::after { content: ''; position: absolute; top: .22em; left: .22em; width: 1.31em; height: 1.31em; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 .1em .3em rgba(0, 0, 0, .3); }
.switch[aria-checked="true"] { background: var(--apo-text); }
.switch[aria-checked="true"]::after { transform: translateX(1.25em); }
.switch:focus-visible { outline: 3px solid #161616; outline-offset: 2px; }
.powered { position: absolute; left: 0; right: 0; bottom: .7em; text-align: center; font-size: 11px; line-height: 1.2; color: #6b6b6b; }

.app__tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: .35em .25em 1.15em; border-top: 1px solid #e5e5ea; background: #fff; }
.tab {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .22em; min-width: 0; padding: .3em .1em; border: 0; border-radius: .8em; background: transparent;
    color: #5a5a5a; font: inherit; font-size: max(.7em, 11px); font-weight: 500; line-height: 1.12; text-align: center; hyphens: manual;
}
.tab .icon { width: 2.1em; height: 2.1em; }
.tab.is-active { color: var(--apo-text); font-weight: 700; }
.tab:focus-visible { outline: 2px solid #161616; outline-offset: -2px; }
.tab:hover { color: var(--apo-text); }

.app-preview__meta { order: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.app-preview__note { font-size: .875rem; color: var(--muted); text-align: center; }
.hero .app-preview__note, .section--dark .app-preview__note { color: var(--on-dark-muted); }
.app-preview__toggle {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid currentColor; background: transparent;
    font-size: .875rem; font-weight: 700; color: var(--muted);
}
.hero .app-preview__toggle, .section--dark .app-preview__toggle { color: var(--on-dark-muted); }
.app-preview__toggle:hover { color: var(--gold); }
.app-preview__toggle .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.app-preview.is-paused .scan__line, .app-preview.is-paused .demo-field::after { animation-play-state: paused; }

/* ---------- Farbwahl auf /apotheke/app/ ---------- */
.customizer { color: var(--ink); margin-top: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--sand); border: 1px solid var(--line); }
.customizer > * + * { margin-top: 1.1rem; }
.customizer__title { font-size: 1.15rem; color: var(--ink); }
.swatches { display: flex; flex-wrap: nowrap; gap: .5rem; }
@media (min-width: 400px) { .swatches { gap: .6rem; } }
.swatch { position: relative; display: block; flex: 0 1 3rem; min-width: 0; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.swatch__dot { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px #8a8478; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; color: #fff; }
.swatch__dot .icon { width: 1.3rem; height: 1.3rem; stroke-width: 3; opacity: 0; }
.swatch:hover .swatch__dot { transform: scale(1.06); }
.swatch input:checked + .swatch__dot { box-shadow: 0 0 0 3px var(--ink); }
.swatch input:checked + .swatch__dot .icon { opacity: 1; }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--focus); outline-offset: 3px; }
.sw-1 { --c: #1e7f5c; } .sw-2 { --c: #1f5fa8; } .sw-3 { --c: #0f6f7a; } .sw-4 { --c: #6b3fa0; } .sw-5 { --c: #b3263e; } .sw-6 { --c: #b4530f; }
.hexfield { display: flex; align-items: center; max-width: 14rem; }
.hexfield__hash { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; padding-inline: .95rem; border: 2px solid var(--field); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: #fff; font-weight: 700; }
.hexfield .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hexfield__preview { flex: none; width: 2.25rem; height: 2.25rem; margin-left: .75rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #8a8478; background: var(--apo, #1e7f5c); }
.live { min-height: 0; }
.customizer > .live:empty { margin-top: 0; }

.mini-app { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.mini-app__logo { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--apo, #1e7f5c); color: var(--apo-on, #fff); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mini-app__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mini-app__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 700; }
@media (min-width: 900px) { .customizer__mini { display: none; } }
.mini-app__city { font-size: .875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-app__btn { flex: none; margin-left: auto; padding: .4rem .95rem; border-radius: 999px; background: var(--apo, #1e7f5c); color: var(--apo-on, #fff); font-size: .875rem; font-weight: 700; }

/* ---------- Funktionsliste, Ausbaustufen ---------- */
.feature-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; counter-reset: funktion; }
.feature-list > li { counter-increment: funktion; display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); gap: .5rem 1.25rem; padding: 1.4rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.feature-list h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.feature-list h3::before { content: counter(funktion); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: .95rem; font-weight: 700; }
.feature-list dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem 1.5rem; margin: 0; }
.feature-list dt { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.feature-list dd { margin: .1rem 0 0; }
@media (min-width: 760px) { .feature-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .feature-list dl { grid-template-columns: minmax(0, 1fr); } }
.stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stage { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.stage h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.stage li { position: relative; padding: .3rem 0 .3rem 1.1rem; }
.stage li::before { content: ''; position: absolute; left: 0; top: calc(.3rem + .6em); width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.stage--now { border: 2px solid var(--ink); }
.stage--now h3 { color: var(--ink); }
@media (min-width: 880px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tag { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .8125rem; font-weight: 700; }
.tag--line { background: transparent; border: 1.5px solid var(--ink); }

/* Partner: Hebel, Phasen, Paket */
.lever { display: grid; gap: .6rem; }
.seal {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; margin-top: clamp(1rem, 2vw, 1.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg);
    background: var(--ink); color: #fff;
}
.seal__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--gold); color: var(--ink); }
.seal__icon .icon { width: 2rem; height: 2rem; stroke-width: 2; }
.seal p { color: var(--on-dark-muted); }
.seal h3 { color: #fff; margin-bottom: .3rem; }
@media (min-width: 760px) { .seal { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.75rem; } }
.phase { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .6rem; }
.phase__num { font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.phase ul { margin-top: .4rem; }
.phase li { position: relative; padding: .25rem 0 .25rem 1.15rem; color: var(--muted); }
.phase li::before { content: ''; position: absolute; left: 0; top: calc(.25rem + .62em); width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }

/* ---------- Weitere Bausteine ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); } }
.split > div > * + * { margin-top: 1.1rem; }
.lead--strong { color: #fff !important; font-weight: 500; }
.section--dark .split .eyebrow { margin-bottom: .2rem; }
.icon--ink { color: var(--ink) !important; }
.card > h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.steps h3, .steps h4 { margin-bottom: .25rem; }
.small a, .faq__body a, .form-note a, .notice a { color: inherit; font-weight: 700; }
.section--dark .small a { color: #fff; }
.small { color: var(--on-dark-muted); }

/* Geldfluss: wer die Plattform finanziert (untereinander, Pfeile nach unten) */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.flow__node { display: flex; flex-direction: column; gap: .1rem; padding: 1.15rem 1.4rem; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); }
.flow__title { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; color: #fff; }
.flow__sub { font-size: 1rem; color: var(--on-dark-muted); }
.flow__node--gold { background: var(--gold); border-color: var(--gold); }
.flow__node--gold .flow__title, .flow__node--gold .flow__sub { color: var(--ink); }
.flow__arrow { display: flex; justify-content: center; color: var(--gold); }
.flow__arrow .icon { width: 1.5rem; height: 1.5rem; transform: rotate(90deg); stroke-width: 2.2; }
@media (min-width: 560px) {
    .flow__node { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .flow__sub { text-align: right; }
}

.mini-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.mini-steps li { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); font-weight: 500; }
.mini-steps .icon { width: 1.6rem; height: 1.6rem; color: var(--ink); }

.toggle-row__ctrl { display: inline-flex; align-items: center; gap: .55em; font-size: .85em; font-weight: 500; }
.toggle-row__state { min-width: 1.6em; text-align: right; }
.form-message:empty { margin: 0; padding: 0; border: 0; }
.field__error:empty { display: none; }
.form-card { scroll-margin-top: 5.5rem; }

/* =====================================================================
   Landingpage Apotheke: Kennzahlen, Kreislauf, Bausteine, Scanner, Cockpit, Vergleich
   ===================================================================== */
@media (min-width: 640px) { .checks--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; } }

/* Zwei Kennzahlen in einfacher Sprache */
.metric { display: flex; flex-direction: column; }
.metric__q { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.2; color: var(--ink); }
@media (min-width: 720px) { .metric__q { min-height: 2.4em; } }
.metric__term { font-size: .9375rem; font-weight: 700; color: var(--muted); }
.metric__goal { display: flex; align-items: center; gap: .75rem; margin-top: auto !important; padding-top: 1.1rem; border-top: 1px solid #e2dccb; font-weight: 700; color: var(--ink); }
.metric__arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gold); color: var(--ink); }
.metric__arrow .icon { width: 1.4rem; height: 1.4rem; stroke-width: 2.6; }
.metric__arrow--down .icon { transform: rotate(90deg); }
.metric__arrow--up .icon { transform: rotate(-90deg); }
.tasks-head { margin-top: clamp(2.25rem, 4vw, 3.25rem); margin-bottom: 1.25rem; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); }
.task .card__num { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; background: var(--gold); color: var(--ink); }
.task h3 { color: #fff; }

/* Kreislauf: Neukunde, Stammkunde, kauft öfter, empfiehlt weiter, zurück */
.loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.7rem; margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radius); background: var(--sand); }
.loop > li { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; background: #fff; border: 1px solid #e2dccb; font-weight: 700; font-size: .9375rem; }
.loop > li:not(:last-child)::after { content: ''; position: absolute; right: -1.2rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-top: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); transform: rotate(45deg); }
.loop > li:last-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.loop > li:last-child .icon { width: 1.05rem; height: 1.05rem; color: var(--gold); stroke-width: 2.4; }
@media (max-width: 559px) {
    .loop { flex-direction: column; align-items: stretch; gap: 1.45rem; }
    .loop > li { justify-content: center; }
    .loop > li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -1.1rem; margin: 0 0 0 -.25rem; transform: rotate(135deg); }
}

/* Bausteine */
.modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.module { display: flex; flex-direction: column; align-items: flex-start; }
.module .tag { margin-top: auto; align-self: flex-start; }
.module--feature { border: 2px solid var(--gold); }
.module--feature h3 { color: #fff; }
.module--feature p { margin-bottom: 1rem; }
@media (min-width: 720px) {
    .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modules > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
    .modules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .modules > .module { grid-column: span 2; }
    .modules > .module--feature { grid-column: span 3; }
    .modules > .module--feature > .card__icon { width: 3.6rem; height: 3.6rem; }
    .modules > :nth-child(n+6) { grid-column: span 3; }
}
@media (max-width: 719px) { .module .tag { grid-column: 1 / -1; } }

/* Scanner im Detail */
.scan-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 880px) { .scan-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.scan-step { display: flex; flex-direction: column; gap: .8rem; }
.scan-step > * + * { margin-top: 0; }
.scan-step h3 { display: flex; align-items: center; gap: .7rem; }
.scan-step h3 .card__num { margin: 0; flex: none; background: var(--gold); color: var(--ink); width: 2.2rem; height: 2.2rem; }
.mock { display: flex; flex-direction: column; justify-content: center; gap: .55rem; min-height: 10.5rem; padding: 1rem; border-radius: var(--radius-sm); background: #f2f2f5; color: #161616; font-size: .9375rem; line-height: 1.3; --apo: var(--gold); --apo-text: #161616; }
.mock--cam { padding: 0; background: none; }
.mock--cam .scan { height: 100%; min-height: 10.5rem; font-size: 1rem; }
.bubble { align-self: flex-start; max-width: 100%; padding: .55rem .9rem; border-radius: 1rem 1rem 1rem .25rem; background: #fff; border: 1px solid #d8d8de; font-weight: 700; }
.bubble--a { align-self: flex-end; border-radius: 1rem 1rem .25rem 1rem; background: var(--gold); border-color: var(--gold); }
.mock .code { margin-top: 0; }
.mock .match { margin-top: 0; background: #fff; }
.scan-claim { margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--gold) !important; }
.fineprint { margin-top: .9rem; font-size: .9375rem; }

/* Vergleich: Kundenkarte oder eigene App */
.compare-wrap { max-width: 56rem; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: .95rem 1.2rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; font-size: .9375rem; font-weight: 700; background: #fff; }
.compare tbody th { font-weight: 700; width: 34%; }
.compare .compare__hl { background: var(--gold-soft); font-weight: 700; }
.compare thead .compare__hl { background: var(--gold); color: var(--ink); }
@media (max-width: 719px) {
    .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
    .compare { background: none; border: 0; border-radius: 0; overflow: visible; }
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
    .compare tbody tr { margin-bottom: .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
    .compare tbody th { width: auto; padding: .75rem 1rem; background: var(--ink); color: #fff; border-top: 0; }
    .compare td { display: flex; justify-content: flex-start; gap: 1rem; padding: .7rem 1rem; }
    .compare td::before { content: attr(data-label); flex: 0 0 38%; font-weight: 500; color: var(--muted); }
    .compare td.compare__hl::before { color: var(--ink); }
}

/* Vertrauen und "Warum kostenlos?" */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .trust-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); } }
.trust-grid .ticks > li { padding-block: .8rem; font-size: 1.0625rem; color: #fff; }
.trust-grid .ticks .icon { width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.why-free { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-lg); background: var(--ink-2); border: 1px solid var(--line-dark); }
.why-free h3 { margin-bottom: .6rem; }
.why-free > * + * { margin-top: 1rem; }
.why-free .flow__node { flex-direction: column; align-items: flex-start; gap: .1rem; }
.why-free .flow__sub { text-align: left; }

/* Einstufiges Formular: Gruppen, Anmerkung (mehrzeilig) */
textarea.input { min-height: 7rem; resize: vertical; }
.form-group + .form-group { margin-top: 1.75rem; }
.form-group__title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.form-group__title::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); flex: none; }
.form-actions--single .btn { width: 100%; margin-left: 0; }
.form-note + .form-note { margin-top: .5rem; }
@media (max-width: 559px) { .pilot-page .pilot__intro .lead { font-size: 1rem; } .pilot-page .pilot__intro .checks { gap: .45rem; } }

/* =====================================================================
   Cockpit-Mockup (Landingpage und /apotheke/app/)
   ===================================================================== */
/* Cockpit (Beispielansicht mit Demo-Daten): Web-App-Mockup mit Kennzahlen, Diagrammen und KI-Assistent.
   Layout über Container-Abfragen: Seitenleiste ab 1040 px Breite des Mockups, Kennzahlen 2 / 3 / 6 Spalten nach Breite des Arbeitsbereichs. */
.section--cockpit { position: relative; overflow: hidden; overflow: clip; background: #0b0b0b; border-top: 1px solid var(--line-dark); }
.section--cockpit::before {
    content: ''; position: absolute; top: -14rem; left: 50%; width: 70rem; height: 36rem; margin-left: -35rem; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(248, 191, 0, .16), rgba(248, 191, 0, 0) 65%);
}
.section--cockpit > .container { position: relative; }

.ck-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ck-point { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: .6rem 1rem; padding: 1.25rem 1.35rem 1.4rem; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); }
.ck-point .card__icon { margin: 0; width: 2.8rem; height: 2.8rem; }
.ck-point p { grid-column: 1 / -1; }
@media (min-width: 880px) {
    .ck-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
    .ck-point:not(:last-child)::after {
        content: ''; position: absolute; top: 50%; right: -1.15rem; width: .6rem; height: .6rem; margin-top: -.3rem;
        border-top: 2.5px solid var(--gold); border-right: 2.5px solid var(--gold); transform: rotate(45deg);
    }
}

.ck-fig { position: relative; margin: 0; min-width: 0; }
.ck-note { margin-top: 1rem; font-size: .9375rem; font-weight: 700; color: var(--on-dark-muted); text-align: center; }
.ck-claim { max-width: 40rem; margin-top: clamp(2rem, 4vw, 3.25rem); }
.ck-privacy { display: flex; align-items: flex-start; gap: 1rem; max-width: 56rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); border-left: 4px solid var(--gold); }
.ck-privacy .icon { width: 1.7rem; height: 1.7rem; margin-top: .1rem; color: var(--gold); }
.ck-privacy p { color: var(--on-dark-muted); }
.ck-privacy strong { color: #fff; }

/* Fenster */
.cockpit {
    --ck-bg: #f7f5f0; --ck-line: #e6e1d6; --ck-muted: #4b4b4b;
    --ck-good: #1e7f5c; --ck-good-text: #14644a; --ck-good-soft: #e7f4ee;
    --ck-high: #b3261e; --ck-high-soft: #fdeceb;
    --focus: #111111;
    container: cockpit / inline-size;
    border-radius: 22px; overflow: hidden; overflow: clip; background: var(--ck-bg); color: var(--ink);
    font-size: .875rem; line-height: 1.45; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 60px 90px -40px rgba(0, 0, 0, .9), 0 0 140px -40px rgba(248, 191, 0, .22);
}
.cockpit p, .cockpit li, .cockpit h3, .cockpit h4 { color: inherit; }
.cockpit h3 { font-size: .9375rem; line-height: 1.25; letter-spacing: -.01em; }
.cockpit h4 { font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; }
.cockpit ul, .cockpit ol { margin: 0; padding: 0; list-style: none; }
.cockpit small { font-size: .8125rem; }
.cockpit .icon { stroke-width: 2; }
.ck-dot { display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ck-good); box-shadow: 0 0 0 3px rgba(30, 127, 92, .22); }

.ck-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; padding: .7rem 1rem; background: #ebe8e0; border-bottom: 1px solid #dcd7c9; }
.ck-dots { display: inline-flex; gap: .4rem; }
.ck-dots i { display: block; width: .7rem; height: .7rem; border-radius: 50%; background: #cfc9b9; }
.ck-bar__title { font-size: .875rem; font-weight: 700; }
.ck-bar__range { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .2rem .65rem .2rem .55rem; border-radius: 999px; background: #fff; border: 1px solid #cfc9b9; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.ck-bar__range .icon { width: .95rem; height: .95rem; }
.ck-badge { padding: .12rem .65rem; border-radius: 999px; background: var(--gold-soft); border: 1px solid #ecd37a; font-size: .8125rem; font-weight: 700; white-space: nowrap; }

.ck-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.ck-side { display: none; }
@container cockpit (min-width: 1040px) {
    .ck-shell { grid-template-columns: 12rem minmax(0, 1fr); }
    .ck-side { display: block; }
}

/* Seitenleiste */
.ck-side { padding: 1.1rem .8rem 1rem; background: #111; color: var(--on-dark-muted); }
.ck-side__in { position: sticky; top: 4.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.ck-side p, .ck-side li { color: inherit; }
.ck-side__brand { display: flex; align-items: center; gap: .65rem; padding: .15rem .45rem .95rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ck-side__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.ck-side__name { color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.2; }
.ck-side__name small { display: block; color: var(--on-dark-muted); font-weight: 500; }
.ck-nav { display: grid; gap: .2rem; }
.cockpit .ck-nav li { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--on-dark-muted); }
.ck-nav .icon { width: 1.15rem; height: 1.15rem; }
.cockpit .ck-nav li.is-active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; }
.ck-nav li.is-active::before { content: ''; position: absolute; left: -.8rem; top: .55rem; bottom: .55rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.ck-nav li.is-active .icon { color: var(--gold); }
.ck-nav__badge { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .8125rem; font-weight: 700; line-height: 1.4; text-align: center; }
.ck-side__foot { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .8rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ck-side__foot strong { display: block; color: #fff; font-size: .8125rem; line-height: 1.25; }
.ck-side__foot small { display: block; color: var(--on-dark-muted); line-height: 1.25; }

/* Arbeitsbereich */
.ck-main { container: ckmain / inline-size; display: grid; align-content: start; gap: 1rem; min-width: 0; padding: clamp(.8rem, 2vw, 1.4rem); }
.ck-main > * { min-width: 0; }
.ck-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.ck-head__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.cockpit .ck-head__sub { color: var(--ck-muted); }
.ck-live { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--ck-line); font-size: .8125rem; font-weight: 700; }

.ck-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@container ckmain (min-width: 600px) { .ck-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container ckmain (min-width: 900px) { .ck-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; } }
.ck-kpi { display: flex; flex-direction: column; padding: .85rem .9rem .75rem; border-radius: 14px; background: #fff; border: 1px solid var(--ck-line); box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.cockpit .ck-kpi__label { min-height: 2.5em; font-size: .8125rem; font-weight: 500; line-height: 1.25; color: var(--ck-muted); }
.ck-kpi__value { margin-top: .3rem; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.ck-trend { align-self: flex-start; display: inline-flex; align-items: center; gap: .2rem; margin-top: .45rem; padding: .1rem .5rem .1rem .3rem; border-radius: 999px; background: var(--ck-good-soft); font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.cockpit .ck-trend { color: var(--ck-good-text); }
.ck-trend .icon { width: .9rem; height: .9rem; stroke-width: 2.6; }
.ck-spark { width: 100%; height: 2.1rem; margin-top: auto; padding-top: .55rem; box-sizing: content-box; overflow: visible; }
.ck-spark__line { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ck-spark__area { fill: rgba(248, 191, 0, .3); stroke: none; }

.ck-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container ckmain (min-width: 640px) { .ck-row--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
@container ckmain (min-width: 860px) { .ck-row--3 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }

.ck-card { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--ck-line); box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.ck-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; }
.cockpit .ck-card__meta { font-size: .8125rem; font-weight: 500; color: var(--ck-muted); }
.ck-card__meta--live { display: inline-flex; align-items: center; gap: .45rem; }
.ck-card--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.cockpit .ck-card--ink h3 { color: #fff; }

/* Diagramm: Fläche (aktive Kunden) über Balken (Neukunden), gemeinsame Wochenachse */
.ck-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; font-size: .8125rem; color: var(--ck-muted); }
.cockpit .ck-legend li { display: inline-flex; align-items: center; gap: .45rem; color: var(--ck-muted); }
.ck-legend strong { color: var(--ink); }
.ck-key { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 3px; }
.ck-key--line { width: 1.1rem; height: .7rem; border-radius: 2px; background: rgba(248, 191, 0, .45); border-top: 2.5px solid var(--ink); }
.ck-key--bar { background: var(--ink); }
.ck-plot { flex: 1; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-rows: minmax(7.5rem, 1fr) 4rem auto; column-gap: .55rem; row-gap: 1.5rem; min-height: 14rem; }
.ck-plot__y { display: flex; flex-direction: column; justify-content: space-between; margin-block: -.5em; font-size: .8125rem; line-height: 1; color: var(--ck-muted); text-align: right; }
.ck-plot__svg { width: 100%; height: 100%; overflow: visible; }
.ck-grid { stroke: var(--ck-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ck-grid--base { stroke: #bdb7a6; }
.ck-area { fill: rgba(248, 191, 0, .3); stroke: none; }
.ck-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ck-barrect { fill: var(--ink); }
.ck-barrect:hover { fill: #3a3a3a; }
.ck-plot__kw { align-self: start; font-size: .8125rem; line-height: 1; padding-top: .15rem; color: var(--ck-muted); text-align: right; }
.ck-plot__x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: .8125rem; line-height: 1; color: var(--ck-muted); text-align: center; padding-top: .15rem; }

/* Kundensegmente */
.ck-seg { container: ckseg / inline-size; }
.ck-seg__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
@container ckseg (min-width: 330px) { .ck-seg__body { flex-direction: row; align-items: center; gap: 1.1rem; } .ck-seg__body .ck-donut { width: 7.25rem; height: 7.25rem; } .ck-donut__c strong { font-size: 1.15rem; } }
.ck-donut { position: relative; flex: none; width: 8.25rem; height: 8.25rem; }
.ck-donut svg { width: 100%; height: 100%; }
.ck-ring { fill: none; stroke-width: 5; }
.ck-ring--base { stroke: #f0ede4; }
.ck-ring--neu { stroke: var(--gold); } .ck-key--neu { background: var(--gold); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35); }
.ck-ring--aktiv { stroke: var(--ck-good); } .ck-key--aktiv { background: var(--ck-good); }
.ck-ring--stamm { stroke: var(--ink); } .ck-key--stamm { background: var(--ink); }
.ck-ring--weg { stroke: #b8b2a0; } .ck-key--weg { background: #b8b2a0; }
.ck-donut__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.ck-donut__c strong { font-size: 1.3rem; letter-spacing: -.02em; }
.ck-donut__c span { font-size: .8125rem; color: var(--ck-muted); }
.ck-seg__list { align-self: center; flex: 1; width: 100%; min-width: 0; display: grid; align-content: center; }
.ck-seg__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2.6rem; align-items: center; gap: .5rem; padding: .5rem 0; }
.ck-seg__list li + li { border-top: 1px solid var(--ck-line); }
.ck-seg__name { font-weight: 700; line-height: 1.25; }
.ck-seg__name small { display: block; font-weight: 400; color: var(--ck-muted); }
.ck-seg__n { font-weight: 700; }
.ck-seg__p { text-align: right; color: var(--ck-muted); }
.cockpit .ck-seg__note { font-size: .8125rem; color: var(--ck-muted); }

/* KI-Assistent */
.ck-ai { border-top: 3px solid var(--gold); gap: .9rem; container: ckai / inline-size; }
.ck-ai__head { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .6rem .8rem; }
.ck-ai__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--gold); color: var(--ink); }
.ck-ai__icon .icon { width: 1.3rem; height: 1.3rem; }
.ck-ai__titles { flex: 1 1 11rem; min-width: 0; }
.cockpit .ck-ai__count { margin-left: auto; padding: .15rem .65rem; border-radius: 999px; background: var(--sand); border: 1px solid var(--ck-line); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.ck-recs { display: grid; gap: .65rem; }
.ck-rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .95rem 1rem; border-radius: 14px; background: #faf8f3; border: 1px solid var(--ck-line); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.ck-rec__main > * + * { margin-top: .4rem; }
.ck-rec__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ck-rec__title { order: 2; flex: 1 1 100%; min-width: 0; }
.ck-prio { display: inline-block; padding: .05rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.ck-prio--high { background: var(--ck-high-soft); color: var(--ck-high); }
.ck-prio--mid { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px #ecd37a; }
.ck-prio--done { background: var(--ck-good-soft); color: var(--ck-good-text); }
.cockpit .ck-rec__kind { order: 1; font-size: .8125rem; font-weight: 500; color: var(--ck-muted); white-space: nowrap; }
@container ckai (min-width: 480px) { .ck-rec__title { flex: 1 1 12rem; } .cockpit .ck-rec__kind { order: 3; margin-left: auto; } }
.ck-rec__title { color: var(--ink); }
.cockpit .ck-rec__text { color: #2b2b2b; }
.cockpit .ck-rec__effect { font-size: .8125rem; color: var(--ck-muted); }
.ck-rec__effect strong { color: var(--ink); }
.ck-rec__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.ck-rec__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.ck-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .45rem 1.1rem; border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.ck-btn--gold { background: var(--gold); color: var(--ink); }
.ck-btn--gold:hover { background: var(--gold-hover); box-shadow: 0 8px 18px -8px rgba(248, 191, 0, .8); }
.ck-btn--ghost { background: #fff; border-color: #bdb7a6; color: var(--ink); }
.ck-btn--ghost:hover { border-color: var(--ink); }
.ck-btn[aria-disabled="true"], .ck-btn[aria-disabled="true"]:hover { background: #fff; border-color: #b4dcc9; color: var(--ck-good-text); box-shadow: none; cursor: default; }
.cockpit .ck-rec__status { display: none; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--ck-muted); }
.ck-rec__status:not(:empty) { display: flex; }
.ck-rec__status--auto { display: flex; color: var(--ck-good-text) !important; }
.ck-rec.is-approved { background: var(--ck-good-soft); border-color: #b4dcc9; }
.ck-rec.is-approved .ck-rec__status { color: var(--ck-good-text); }
.ck-rec.is-approved .ck-prio { background: #fff; color: var(--ck-good-text); }
.ck-rec--done { background: #fff; }
.ck-ai__foot { display: flex; justify-content: flex-end; }
.ck-ai__foot[hidden] { display: none; }
.ck-reset { padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid #bdb7a6; background: #fff; color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.ck-reset:hover { border-color: var(--ink); }

/* rechte Spalte: Automationen, Häufig gescannt, Beratungs-Codes */
.ck-side-col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; min-width: 0; }
@container ckmain (min-width: 860px) { .ck-side-col { grid-template-rows: auto auto minmax(0, 1fr); } .ck-side-col > .ck-codes { justify-content: center; } }
@container ckmain (min-width: 560px) and (max-width: 859px) {
    .ck-side-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ck-side-col > .ck-codes { grid-column: 1 / -1; }
}
.ck-autos { display: grid; }
.ck-autos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem 0; }
.ck-autos li + li { border-top: 1px solid var(--ck-line); }
.ck-autos__name { font-weight: 500; }
.cockpit .ck-autos__v { color: var(--ck-muted); font-size: .8125rem; text-align: right; }
.ck-autos__v strong { color: var(--ink); font-size: .9375rem; }
.ck-scans { display: grid; gap: .55rem; }
.ck-scans li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 2rem; align-items: center; gap: .6rem; }
.ck-scan__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-scan__bar { width: 100%; height: .6rem; border-radius: 999px; overflow: hidden; }
.ck-scan__track { fill: #f0ede4; }
.ck-scan__fill { fill: var(--ink); }
.ck-scans li:first-child .ck-scan__fill { fill: #b88a00; }
.ck-scan__n { font-weight: 700; text-align: right; }
.ck-codes { gap: .3rem; background: var(--ink); }
.ck-codes__n { display: flex; align-items: baseline; gap: .6rem; }
.ck-codes__n strong { color: var(--gold); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.cockpit .ck-codes__n span { color: var(--on-dark-muted); font-weight: 500; }
.cockpit .ck-codes__t { color: var(--on-dark-muted); font-size: .8125rem; }

.ck-foot { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--ck-muted); }
.cockpit .ck-foot { color: var(--ck-muted); }
.ck-foot .icon { width: 1.1rem; height: 1.1rem; color: var(--ck-good); }

@media (max-width: 559px) {
    .ck-btn { min-height: 2.75rem; flex: 1 1 auto; }
    .ck-rec__actions { width: 100%; }
    .ck-fig { margin-inline: -.5rem; }
}

/* ---------- Druck, Bewegung ---------- */
@media print {
    .site-header, .step-nav, .site-footer, .cta-band, .app-preview__toggle { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
    html.js .reveal:not(.is-in) { opacity: 1; transform: none; }
    .scan__line { top: 47%; }
}