/* ============================================================
   SICHTBAR MIT KI — Salespage · FemBrand Studio
   Mobile-first. Alles unterhalb von 640px ist der Standardfall,
   groessere Screens bekommen Erweiterungen per @media (min-width).
   ============================================================ */


/* ============================================================
   1 · SCHRIFT — selbst gehostet, kein Google-Server-Aufruf
   ============================================================ */

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/asap-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/asap-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/asap-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/asap-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================
   2 · TOKENS — Farben, Typo, Abstaende, Effekte
   ============================================================ */

:root {
  /* Kernpalette */
  --color-magenta: #9618D1;
  --color-magenta-press: #7E14B0;
  --color-lila: #8044D8;
  --color-lila-deep: #571FA6;
  --color-blau: #3F8CFF;
  --color-navy: #191630;
  --color-glow: #B026D6;
  --color-accent-soft: #CE8BFF;

  /* Flaechen */
  --bg-page: #E7E3DB;
  --bg-card: #FBF6F3;
  --bg-tint: #F7F1F5;
  --bg-stage: #1A0E34;
  --border: #ECE7E0;
  --border-strong: #DAD3C8;

  /* Text */
  --text: #191630;
  --text-soft: #54505E;
  --text-muted: #6B6675;
  --text-faint: #9C97A4;
  --text-on-dark: #F4F2F9;
  --text-on-dark-soft: #C9C3D6;

  /* Verlaeufe */
  --gradient-signature: linear-gradient(90deg, #3F8CFF, #8044D8, #9618D1);
  --gradient-stage: linear-gradient(165deg, #2C1356 0%, #1A0E34 60%, #140924 100%);
  --gradient-lila: linear-gradient(150deg, #8044D8, #571FA6);

  /* Typo */
  --font-base: 'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  /* Radien */
  --radius-btn: 7px;
  --radius-card: 14px;
  --radius-pill: 30px;
  --radius-img: 10px;

  /* Schatten */
  --shadow-soft: 0 24px 70px rgba(25, 22, 48, .16);
  --shadow-sm: 0 2px 12px rgba(25, 22, 48, .05);
  --shadow-action: 0 10px 26px rgba(150, 24, 209, .28);
  --shadow-action-hover: 0 14px 32px rgba(150, 24, 209, .40);

  /* Layout */
  --container: 1140px;
  --pad-x: 20px;
  --sec-y: 56px;   /* vertikaler Sektionsabstand, waechst per Media Query */
  --header-h: 60px;

  --transition: .18s ease;
}


/* ============================================================
   3 · RESET + BASIS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-magenta); text-decoration: none; }
a:hover { color: var(--color-magenta-press); }

h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--color-blau);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Nur fuer Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink fuer Tastatur-Navigation */
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 100; background: var(--color-magenta); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-btn); font-weight: var(--fw-semibold);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }


/* ============================================================
   4 · LAYOUT-BAUSTEINE
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 900px; }
.wrap--text   { max-width: 860px; }

/* Vertikaler Rhythmus */
.sec        { padding-block: var(--sec-y); }
.sec--top   { padding-block: var(--sec-y) 0; }
.sec--tight { padding-block: calc(var(--sec-y) * .72); }

/* Sprungziele nicht unter den Sticky-Header schieben */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.band-tint   { background: var(--bg-tint); border-block: 1px solid var(--border); }
.band-card   { background: var(--bg-card); border-block: 1px solid var(--border); }
.band-stage  { background: var(--gradient-stage); color: var(--text-on-dark); position: relative; overflow: hidden; }
.band-lila   { background: var(--gradient-lila); color: #fff; position: relative; overflow: hidden; }

/* Der weiche Lichtschein auf dunklen Flaechen */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--color-glow), transparent 62%);
  filter: blur(16px);
}
.glow--hero   { top: -160px; right: -140px; width: 380px; height: 380px; opacity: .4; animation: fbGlow 10s ease-in-out infinite; }
.glow--tl     { top: -140px; right: -120px; width: 340px; height: 340px; opacity: .32; }
.glow--bl     { bottom: -180px; left: -100px; width: 360px; height: 360px; opacity: .42; }
.glow--br     { bottom: -180px; right: -100px; width: 360px; height: 360px; opacity: .42; }
.glow--center { bottom: -180px; left: 50%; transform: translateX(-50%); width: 420px; height: 420px; opacity: .35; }

@keyframes fbGlow { 0%, 100% { opacity: .45; } 50% { opacity: .72; } }


/* ============================================================
   5 · TYPOGRAFIE
   ============================================================ */

.eyebrow {
  font-size: 12px;
  font-weight: var(--fw-light);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.eyebrow--soft { color: var(--color-accent-soft); }
.eyebrow--dark { color: var(--text-on-dark-soft); }
.eyebrow--white { color: rgba(255, 255, 255, .7); }

/* Akzentwort: kursiv in Magenta */
.accent { font-style: italic; font-weight: var(--fw-medium); color: var(--color-magenta); }
.accent-soft { color: var(--color-accent-soft); font-style: italic; }

.h-hero {
  font-weight: var(--fw-thin);
  font-size: clamp(30px, 7.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}
.h-sec {
  font-weight: var(--fw-thin);
  font-size: clamp(27px, 6.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  /* Verteilt die Ueberschrift gleichmaessig auf ihre Zeilen, statt die
     letzte Zeile mit einem Restwort stehen zu lassen. Browser ohne
     Unterstuetzung ignorieren die Zeile einfach. */
  text-wrap: balance;
}
.h-sec--sm { font-size: clamp(25px, 5.4vw, 44px); }
.h-sub {
  font-weight: var(--fw-light);
  font-size: clamp(21px, 4.4vw, 34px);
  line-height: 1.22;
  color: var(--text);
}
.h-card {
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: 1.3;
  color: var(--text);
}
.on-dark, .on-dark .h-sec, .on-dark .h-sub { color: #fff; }

.lead {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.7;
  color: var(--text-soft);
}
.lead--muted { color: var(--text-muted); }
.lead--dark { color: var(--text-on-dark-soft); }
.body-sm { font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.meta { font-size: 14px; color: var(--text-muted); }
.faint { color: var(--text-faint); }

.stack > * + * { margin-top: 20px; }
.stack-sm > * + * { margin-top: 12px; }
.center { text-align: center; }


/* ============================================================
   6 · BUTTONS & LINKS
   ============================================================ */

.btn {
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.15;
  padding: 15px 26px;
  min-height: 48px;                 /* Touch-Ziel */
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), color var(--transition);
}
.btn-primary { background: var(--color-magenta); color: #fff; box-shadow: var(--shadow-action); }
.btn-primary:hover { background: var(--color-magenta-press); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-action-hover); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent; color: var(--color-magenta);
  border: 1.5px solid var(--color-magenta);
}
.btn-secondary:hover { background: var(--color-magenta); color: #fff; }

.btn-sm { font-size: 14px; padding: 10px 16px; min-height: 44px; border-radius: 6px; }
.btn-lg { font-size: 17px; padding: 17px 30px; min-height: 54px; border-radius: 8px; }

/* Auf schmalen Screens: Haupt-CTAs volle Breite */
.btn-block { width: 100%; max-width: 380px; }

.text-link {
  color: var(--color-magenta); font-weight: var(--fw-semibold);
  border-bottom: 1.5px solid var(--color-magenta); padding-bottom: 3px;
  display: inline-block; position: relative; transition: opacity var(--transition);
}
.text-link:hover { opacity: .7; }

.link-on-dark {
  color: #fff; font-weight: var(--fw-semibold); font-size: 15px;
  border-bottom: 1.5px solid rgba(255, 255, 255, .35); padding-bottom: 3px;
  display: inline-block; position: relative;
}
.link-on-dark:hover { color: #fff; border-bottom-color: #fff; }

/* Textlinks sind optisch schmal, aber der Daumen braucht 44px.
   Das unsichtbare Feld vergroessert nur die Trefferflaeche, nicht das Layout. */
.text-link::after,
.link-on-dark::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}

/* CTA-Gruppe: gestapelt am Handy, nebeneinander ab Tablet */
.cta-group {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: 32px;
}
.cta-group--start { align-items: stretch; }


/* ============================================================
   7 · TOPBAR + HEADER
   ============================================================ */

.signature-bar { height: 4px; background: var(--gradient-signature); }

/* Die langen Wochentage kosten am Handy eine ganze Zeile — erst ab Tablet zeigen */
.wide-only { display: none; }

/* ---------- Topbar ----------
   Seit 3.9.2026 im Stil der Anmeldeseite /workshop-claude/: eine dunkle
   Leiste statt der frueheren duennen .announce plus heller .site-header.
   Aufbau: Logo links, rechts Navigation, Preishinweis und Button.
   Die drei Elemente rechts blenden sich nach Platz gestaffelt ein,
   damit am Handy nur Logo und Button stehen bleiben. */
#topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--color-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
#topbar-inner {
  max-width: var(--container); margin-inline: auto;
  padding: 12px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
#topbar .logo { display: flex; align-items: center; min-height: 44px; flex: none; }
#topbar .logo img { height: 34px; width: auto; display: block; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-meta {
  display: none;
  font-size: 13.5px; font-weight: var(--fw-light);
  color: var(--text-on-dark-soft); white-space: nowrap;
}
.topbar-meta b { font-weight: var(--fw-semibold); color: #fff; }

/* Anker-Navigation ist am Handy Ballast — erst ab 1000px sichtbar */
.site-nav { display: none; }


/* ============================================================
   8 · HERO
   ============================================================ */

/* Seit 3.9.2026 hell mit Flamingo, im Stil der Anmeldeseite
   /workshop-claude/. Davor: dunkles Buehnenbild mit Foto (.hero__bg,
   .hero__veil) und mittig zentriertem Text. Der Text steht jetzt links,
   der Vogel rechts dahinter. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F4F3F3 0%, #EDECEC 55%, #E8E7E7 100%);
  color: var(--text);
  padding: 0;
}
/* Klare Kante nach unten, mit der Signatur-Linie statt weichem Verlauf */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gradient-signature);
  pointer-events: none; z-index: 3;
}
.hero-inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: clamp(32px, 5vw, 52px) var(--pad-x) clamp(48px, 7vw, 76px);
  position: relative; z-index: 2;
}
.hero-copy { max-width: 540px; }

/* Der Vogel: --bird-x schiebt ihn aus der Mitte nach rechts, damit er
   neben dem Text sitzt und nicht dahinter. */
.hero-flamingo {
  --bird-x: min(19vw, 250px);
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.hero-flamingo video {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
  transform: translateX(calc(-50% + var(--bird-x)));
  transform-origin: center center;
  /* Rand des Videobilds ausblenden, links und rechts gleich, damit die
     Spiegelung die Blende nicht mitnimmt */
  mask-image: linear-gradient(to right, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
}
.ai-tag {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: var(--fw-medium); letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(30, 20, 55, .80); color: #fff;
  border: 1px solid rgba(206, 139, 255, .55);
  pointer-events: none; white-space: nowrap;
}

.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(128, 68, 216, .09);
  border: 1px solid rgba(128, 68, 216, .26);
  border-radius: var(--radius-pill); padding: 9px 18px;
  margin-bottom: 22px;
}
.hero-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-blau); box-shadow: 0 0 10px var(--color-blau);
}
.hero-pill .t {
  font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .16em;
  text-transform: uppercase; color: #4B2A96; white-space: nowrap;
}

.hero__sub {
  font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6;
  color: var(--text-soft);
  margin: 18px 0 0; max-width: 540px;
}
/* Augenbraue — steht VOR der Headline, nicht darunter.
   Ruhiger als die H1, damit sie einordnet statt zu konkurrieren. */
.hero__for {
  font-size: 15px; line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 14px; max-width: 520px;
}

/* Drei Ergebnisse als Haken — der Scanner-Leseweg im Hero. */
.hero__list {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.hero__list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px; line-height: 1.5;
  color: var(--text-on-dark-soft);
}
.hero__list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--color-accent-soft);
  font-weight: var(--fw-semibold);
}
/* Zahlwege + Garantie direkt unter dem Kauf-Button im Hero */
.hero__terms {
  font-size: 14px; line-height: 1.6;
  color: var(--text-muted);
  margin: 0; max-width: 520px;
}
.hero__terms strong { color: var(--text); font-weight: var(--fw-semibold); }

/* Das Zitat gehoert optisch zum Button, nicht zu den Bullets — deshalb
   oben viel Luft, unten wenig. Der enge Abstand zum Button ueberschreibt
   den 32px-Standard der .cta-group. */
/* Vor dem Button eine bewusste Pause: mehr Luft als zwischen den
   Textzeilen (16px), damit der Kauf-Knopf als eigener Schritt gelesen
   wird und nicht als vierte Textzeile. */
.hero .cta-group { margin-top: 30px; gap: 10px 22px; }
/* Der Hero traegt viel: Augenbraue, H1, Unterzeile, drei Haken, Button und
   Konditionszeile. Damit die Preiszeile auf einem 900px-Laptop ueber der
   Falz bleibt, sind die Abstaende hier enger als der Seitenstandard.
   Gemessen, nicht geschaetzt — 22px Gewinn, kein Wort gekuerzt. */
/* Die Hero-Headline laeuft zweistufig: die Zusage gross, der erklaerende
   Teil deutlich kleiner. Ein einziger Satz auf einer Groesse waere entweder
   winzig oder sieben Zeilen hoch. Die Groessen stehen an den beiden Spans,
   deshalb hier nur der Rahmen. */
/* Die globale .h-hero ist weiss — sie wird auch vom Schluss-CTA auf
   dunklem Grund benutzt. Seit der Hero hell ist, muss die Farbe hier
   ueberschrieben werden, sonst steht weisse Schrift auf hellem Grund. */
.hero .h-hero { font-size: inherit; line-height: 1.06; color: #160A3C; }
.h-hero__gross {
  display: block;
  font-size: clamp(33px, 6.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -.022em;
}
.h-hero__klein {
  display: block;
  margin-top: 14px;
  font-size: clamp(17px, 2.5vw, 23px);
  line-height: 1.34;
  letter-spacing: -.005em;
  color: var(--text-soft);
}
/* "Claude" ist der Name, um den es geht — etwas groesser und kraeftiger,
   aber ohne zweite Akzentfarbe. Die hat schon die Zusage oben. */
.h-hero__klein b {
  font-weight: var(--fw-semibold);
  font-size: 1.14em;
  color: var(--text);
}

.hero__for  { margin-bottom: 12px; }
.hero__sub  { margin-top: 16px; }
.hero__list { margin-top: 12px; }

/* Schmal: der Vogel steht UNTER dem Text statt dahinter. Hinter dem Text
   wuerde er auf 375px die Schrift unleserlich machen. */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; background: #F4F3F3; }
  .hero-inner { order: 1; padding-bottom: 12px; }
  .hero-copy { max-width: none; }
  .hero-flamingo {
    --bird-x: 0px;
    order: 2; position: relative; inset: auto;
    height: min(460px, 115vw); width: 100%;
  }
  /* obere Kante des Videobilds in den Hintergrund blenden */
  .hero-flamingo video {
    mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
  }
  .ai-tag { right: 10px; top: 10px; }
}

/* Auf sehr schmalen Geraeten (iPhone SE und aehnlich) passt die Pille in
   einer Zeile nicht mehr — sie ragte aus dem Bild und wurde vom
   overflow:hidden des Hero abgeschnitten. Hier darf sie umbrechen. */
@media (max-width: 400px) {
  .hero-pill { padding: 8px 14px; }
  .hero-pill .t { white-space: normal; line-height: 1.5; }
}

/* Die Navigation braucht mehr Luft als der Preishinweis — deshalb
   gestaffelt: erst die Anker ab 1000px, der Preis erst ab 1240px. */
@media (min-width: 1000px) { .site-nav { display: flex; } }
@media (min-width: 1240px) { .topbar-meta { display: block; } }

/* Im Hero stehen Button und Zahlwege-Zeile immer untereinander,
   auch wenn .cta-group ab 480px sonst in eine Zeile umbricht.
   Seit 3.9.2026 linksbuendig statt zentriert — der Text steht jetzt
   in der linken Spalte neben dem Flamingo. */
.hero .cta-group { flex-direction: column; align-items: flex-start; }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 30px;
}
.chip {
  font-size: 13px; padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}


/* ============================================================
   9 · ZITATE, ZAHLEN
   ============================================================ */

.stars { font-size: 13px; color: var(--color-magenta); letter-spacing: .3em; margin: 0 0 12px; }

.pullquote {
  font-size: clamp(18px, 3.4vw, 24px); line-height: 1.5;
  font-weight: var(--fw-light); color: var(--text);
}

.stats { display: grid; grid-template-columns: 1fr; gap: 22px; }
.stat__n {
  font-size: clamp(32px, 7vw, 46px); font-weight: var(--fw-thin);
  line-height: 1; color: var(--color-magenta); letter-spacing: -.02em;
}
.stat__l { font-size: 15px; line-height: 1.45; color: var(--text-muted); margin-top: 8px; }


/* ============================================================
   10 · KARTEN & RASTER
   ============================================================ */

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card__title { font-size: 18px; line-height: 1.35; font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 8px; }

/* Modulkarten */
.mod {
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mod img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mod__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mod__no { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .2em; color: var(--color-magenta); margin: 0; }
.mod__out {
  font-size: 15px; font-weight: var(--fw-medium); color: var(--color-magenta);
  margin: 0; padding-top: 8px; border-top: 1px solid var(--border-strong);
}
.mod__text { flex: 1; }

/* Zitat-Linie */
/* Betonte Stellen im Fliesstext — der zweite Leseweg fuer Scanner.
   Semibold statt Browser-Bold, damit es zur Asap passt. Sparsam einsetzen. */
.lead strong,
.body-sm strong,
.faq p strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
}

/* Im Hero traegt die Schrift die Betonung, nicht die Farbe:
   die duenne Headline bekommt fette Inseln, die Subline nur zwei. */
.h-hero strong { font-weight: var(--fw-semibold); color: inherit; }
.hero__sub strong { font-weight: var(--fw-semibold); color: #fff; }

/* Die Haken stehen in gedaempftem Grau — fett allein wuerde darin untergehen.
   Deshalb bekommt jede fette Insel zusaetzlich volles Weiss. Das ist der
   Scanner-Leseweg: Wer nur die fetten Stellen liest, hat die Botschaft. */
.hero__list strong { font-weight: var(--fw-semibold); color: #fff; }

/* ============================================================
   Testimonials — ein Muster fuer alle vier Stimmen:
   Sterne · Zitat · Namenszeile. Immer dieselbe Reihenfolge,
   dieselben Groessen. --compact ist die Variante direkt unter
   dem Hero, die auf einer Flaeche statt in einer Karte sitzt.
   ============================================================ */
.tm__quote {
  font-size: clamp(19px, 3.4vw, 26px); line-height: 1.5;
  font-weight: var(--fw-light); color: var(--text);
  margin: 0;
}
.tm__quote + .tm__quote { margin-top: 16px; }
.tm__by {
  font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--color-magenta); margin: 22px 0 0;
}
.tm--compact .tm__quote { font-size: clamp(17px, 2.8vw, 21px); }
.tm--compact .tm__by { font-size: 15px; margin-top: 16px; }

/* ============================================================
   Scroll-Fenster — eine komplette Kundinnenseite in einem Rahmen.
   Am Handy fest zugeschnitten mit Verlauf am unteren Rand, weil
   verschachteltes Scrollen dort den Seitenscroll kapert. Ab 900px
   ist das Fenster innen scrollbar.
   ============================================================ */
.scrollwin {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-img);
  padding: 8px;
}
.scrollwin__inner {
  position: relative;
  height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  /* verhindert, dass der Seitenscroll weiterlaeuft, wenn das Fenster
     am Ende ist — deshalb funktioniert das auch am Handy sauber */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.scrollwin__inner img { width: 100%; display: block; }
.scrollwin__hint {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin: 10px 0 0; text-align: center;
}

.quote-rule { border-left: 2px solid var(--color-magenta); padding-left: 20px; }
.rule-lila { border-left: 2px solid var(--color-lila); padding-left: 18px; }

.blockquote-lg {
  font-size: clamp(20px, 3.4vw, 26px); line-height: 1.5; font-weight: var(--fw-light);
  color: var(--text); border-left: 2px solid var(--color-magenta); padding-left: 20px;
}

/* Vorteils-/Ausschlusslisten */
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist p {
  font-size: 16px; line-height: 1.5; color: var(--text-soft);
  margin: 0; padding-left: 28px; position: relative;
}
.checklist p::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--color-blau); font-weight: 700;
}
.checklist--magenta p::before { color: var(--color-magenta); }
.checklist--on-dark p { color: #fff; }
.checklist--no p { color: var(--text-muted); }
.checklist--no p::before { content: "×"; color: var(--text-faint); }

.card--yes { background: rgba(63, 140, 255, .07); border: 1px solid rgba(63, 140, 255, .26); }


/* ============================================================
   11 · BILDSTRECKEN
   ============================================================ */

.img-soft { width: 100%; border-radius: var(--radius-img); box-shadow: var(--shadow-soft); }

/* Vorher / Nachher — Handyfoto */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.ba-pair .before img { filter: saturate(.8); }
.ba-cap {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint); margin: 9px 0 0;
}
.ba-cap--after { color: var(--color-magenta); }

/* Szenen-Streifen — am Handy scrollbar, ab Tablet Raster */
.scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.scene { position: relative; overflow: hidden; }
.scene img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.scene span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(20, 9, 36, .78));
}

/* Kundinnenseite vorher / nachher */
.case-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.pill {
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .2em;
  text-transform: uppercase; border-radius: var(--radius-pill); padding: 6px 13px;
  color: var(--text-faint); border: 1px solid var(--border-strong);
}
.pill--now { color: #fff; background: var(--color-magenta); border-color: var(--color-magenta); }
.case-frame {
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-img); padding: 8px;
}
.case-frame--now { box-shadow: var(--shadow-soft); }
.case-frame img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border-radius: 6px;
}
.case-frame--then img { filter: saturate(.92); }

/* Bild + Text nebeneinander (ab Tablet) */
.split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }

.badges {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border-strong);
}
.badges img { height: 48px; width: auto; }


/* ============================================================
   12 · BEGLEITUNG, RECHNUNG, BONUS
   ============================================================ */

.tiles {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.tile { background: var(--bg-card); padding: 24px; }
.tile p:first-child { font-size: 17px; font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 6px; }

.calc-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--border-strong);
  font-size: 17px; color: var(--text-soft);
}
.calc-row span:last-child { white-space: nowrap; }
.calc-row--sum {
  border-bottom: none; border-top: 2px solid var(--color-magenta);
  margin-top: 6px; padding: 20px 0;
  font-size: 21px; font-weight: var(--fw-semibold); color: var(--text);
}

.bonus {
  background: var(--gradient-lila); color: #fff;
  border-radius: var(--radius-card); overflow: hidden;
  display: grid; grid-template-columns: 1fr;
}
.bonus__body { padding: 28px 24px 30px; order: 2; }
.bonus img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; order: 1; }
.bonus__what { font-size: 18px; line-height: 1.6; color: #fff; font-weight: var(--fw-semibold); margin: 0 0 10px; }
.bonus__why { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .85); margin: 0 0 10px; }
.bonus__note { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .65); margin: 0; }
/* Drei Boni untereinander: grosse Ziffer links, Inhalt rechts,
   getrennt durch eine feine Linie. */
.bonus__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
}
.bonus__item + .bonus__item {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.bonus__item > div > :last-child { margin-bottom: 0; }

.bonus__no {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: var(--fw-thin);
  line-height: .9;
  color: rgba(255, 255, 255, .34);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.bonus__price {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-soft);
  margin: 0 0 9px;
}


/* ============================================================
   13 · PREIS-BLOCK + COUNTDOWN
   ============================================================ */

.price-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 28px 20px 30px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.price-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.price-old { font-size: 21px; color: var(--text-on-dark-soft); text-decoration: line-through; }
.price-new {
  font-size: clamp(46px, 13vw, 84px); font-weight: var(--fw-thin);
  line-height: 1; color: #fff; letter-spacing: -.03em;
}
.price-note { font-size: 15px; color: var(--color-accent-soft); margin: 10px 0 18px; }
/* Zahlwege — muss vor dem Checkout sichtbar sein, nicht erst darin */
.price-pay {
  font-size: 15px; line-height: 1.5; font-weight: var(--fw-semibold);
  color: #fff; margin: 0 auto 26px; max-width: 420px;
}
.price-list { max-width: 470px; margin: 0 auto 26px; text-align: left; }
.price-foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  align-items: center;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; color: var(--text-on-dark-soft);
}
/* Die Rechtshinweise muessen VOR dem Kauf erreichbar sein — deshalb hier verlinkt */
.price-foot a {
  color: var(--text-on-dark-soft);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.price-foot a:hover { color: #fff; }

.countdown { margin-top: 36px; text-align: center; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-box {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 13px 4px;
}
.cd-n {
  font-size: clamp(24px, 7vw, 34px); font-weight: var(--fw-thin);
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.cd-l {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-dark-soft); margin-top: 7px;
}

/* Garantie-Kreis */
.guarantee { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.seal {
  width: min(190px, 60vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .05);
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.seal__n { font-size: clamp(56px, 16vw, 86px); font-weight: var(--fw-thin); line-height: .85; color: #fff; letter-spacing: -.04em; }
.seal__u { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .9); margin-top: 10px; }
.seal__s { font-size: 14px; color: rgba(255, 255, 255, .75); margin-top: 5px; }


/* ============================================================
   14 · FAQ
   ============================================================ */

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 16px 20px;
}
.faq summary {
  font-size: 17px; font-weight: var(--fw-semibold); color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 14px;
  list-style: none; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 26px; font-weight: var(--fw-thin);
  color: var(--color-magenta); line-height: 1; flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 12px 0 0; }


/* ============================================================
   15 · ERSTGESPRAECH-KARTE, FOOTER, STICKY-LEISTE
   ============================================================ */

.talk {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  box-shadow: var(--shadow-soft);
}
.talk img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 50% 25%; }
.talk__body { padding: 28px 24px 30px; }

.site-footer { background: var(--bg-card); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
.footer-col p:first-child {
  font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px;
}
.footer-links { display: flex; flex-direction: column; font-size: 15px; }
.footer-links a {
  color: var(--text-soft);
  display: flex; align-items: center; min-height: 44px;
}
.footer-links a:hover { color: var(--color-magenta); }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 18px var(--pad-x);
  text-align: center; font-size: 14px; color: var(--text-faint);
}
.footer-bottom p { margin: 0; }

/* Transparenz-Hinweis — steht auf allen vier Seiten in der Fusszeile.
   Icon ist inline-SVG, damit es keinen zusaetzlichen Request kostet
   und die Markenfarbe per currentColor erbt. */
.ki-hinweis {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 1.4;
  margin: 0 0 9px;
}
.ki-hinweis svg { color: var(--color-magenta); flex: none; }

/* Sticky-Kaufleiste unten */
.sticky-buy {
  position: sticky; bottom: 0; z-index: 50;
  background: var(--color-navy); color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sticky-buy .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding-block: 10px;
}
.sticky-buy__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.sticky-buy__old { font-size: 14px; color: var(--text-on-dark-soft); text-decoration: line-through; }
.sticky-buy__new { font-size: 20px; font-weight: var(--fw-light); }
.sticky-buy__until { font-size: 13px; color: var(--text-on-dark-soft); }
.sticky-buy__cd { font-size: 13px; color: var(--color-accent-soft); white-space: nowrap; display: none; }
.sticky-buy .btn { flex: none; }

/* Nur wenn main.js laeuft, darf die Leiste sich verstecken — sonst bleibt
   sie unveraendert sichtbar. Siehe Kommentar in main.js. */
.sticky-buy--auto { transition: transform .25s ease, opacity .25s ease; }
.sticky-buy--auto.is-hidden {
  transform: translateY(100%); opacity: 0;
  pointer-events: none; visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-buy--auto { transition: none; }
}

/* Am Handy braucht "bis So 16.8." keinen Platz — der Countdown steht oben */
@media (max-width: 419px) {
  .sticky-buy__until { display: none; }
}


/* ============================================================
   16 · AB 480px — zwei Spalten werden moeglich
   ============================================================ */

@media (min-width: 480px) {
  .btn-block { width: auto; }
  .cta-group { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px 22px; }
  .cta-group--start { justify-content: flex-start; align-items: center; }
  .scenes { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   17 · AB 640px — Tablet hoch
   ============================================================ */

@media (min-width: 640px) {
  :root { --pad-x: 24px; --sec-y: 72px; }

  body { font-size: 17px; }

  .wide-only { display: inline; }
  #topbar .logo img { height: 38px; }

  .chips { gap: 9px 10px; margin-top: 34px; }

  /* Vier Zahlen: ab 640px zwei nebeneinander, ab 900px alle vier in einer Reihe.
     Bei drei Spalten wuerde die vierte allein in der zweiten Zeile stehen. */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }

  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid--mod { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .card { padding: 28px; }
  .tile { padding: 28px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }

  .ba-pair { gap: 16px; }
  .case-frame { padding: 10px; }

  .price-card { padding: 40px 32px; }
  .cd-grid { gap: 12px; }
  .cd-box { padding: 15px 8px; }
  .cd-l { font-size: 11px; letter-spacing: .18em; }

  .faq details { padding: 20px 26px; }
  .faq summary { font-size: 18px; }
  .faq details p { font-size: 17px; }

  .bonus__body { padding: 40px 34px; }
  .talk__body { padding: 36px 32px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-block: 48px; }

  .sticky-buy__cd { display: inline; }
  .sticky-buy__new { font-size: 22px; }
}


/* ============================================================
   18 · AB 900px — Desktop-Layout
   ============================================================ */

@media (min-width: 900px) {
  :root { --sec-y: 88px; --header-h: 62px; }

  /* Ankernavigation einblenden — seit 3.9.2026 hell auf der dunklen Topbar.
     :not(.btn) ist wichtig, sonst erbt der Button die Navigationsfarbe. */
  .site-nav {
    display: flex; align-items: center; gap: 20px;
    font-size: 15px; color: var(--text-on-dark-soft);
  }
  .site-nav a { white-space: nowrap; }
  .site-nav a:not(.btn) { color: inherit; }
  .site-nav a:not(.btn):hover { color: #fff; }
  .site-nav .btn { flex: none; }

  /* Ab 900px steht der Text links und der Flamingo rechts dahinter —
     der Hero wird zum Flex-Container, damit die Spalte mittig sitzt. */
  .hero { min-height: 80vh; display: flex; align-items: center; }
  .hero-inner { width: 100%; }
  .hero-copy { max-width: 540px; }

  /* WICHTIG: .h-hero hier auf .hero einschraenken. Die Klasse wird auch
     vom Schluss-CTA benutzt, der zentriert bleiben muss. */
  .hero .h-hero,
  .hero__sub,
  .hero__for,
  .hero__terms { max-width: 540px; margin-left: 0; margin-right: 0; }
  .hero .cta-group { align-items: flex-start; }
  .hero .chips { justify-content: flex-start; }
  .glow--hero { display: none; }

  .stats { grid-template-columns: repeat(4, 1fr); gap: 28px 32px; }

  .grid--mod { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid--2 { gap: 24px; }

  .mod:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(25, 22, 48, .14); }

  .split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px); }
  .split--wide-text { grid-template-columns: 0.9fr 1.1fr; }

  .scenes { grid-template-columns: repeat(6, 1fr); }
  .scene span { padding: 28px 14px 12px; letter-spacing: .22em; }

  .bonus { grid-template-columns: 1fr 1fr; }
  .bonus__body { order: 1; padding: clamp(36px, 4vw, 52px); }
  .bonus img { order: 2; min-height: 300px; }

  /* Variante ohne Bild: eine Spalte, Text auf Lesebreite begrenzt,
     damit die Zeilen auf dem Desktop nicht ueber die volle Breite laufen. */
  .bonus--solo { grid-template-columns: 1fr; }
  .bonus--solo .bonus__body { max-width: 820px; }

  /* Am Desktop mehr Hoehe, gescrollt wird auf allen Groessen. */
  .scrollwin__inner { height: 580px; scrollbar-width: thin; }

  .talk { grid-template-columns: 1fr 1fr; }
  .talk img { min-height: 340px; }

  .price-card { padding: 48px 44px; }
  .price-list { margin-bottom: 30px; }

  .guarantee { grid-template-columns: auto 1fr; gap: clamp(32px, 4vw, 56px); }
  .seal { width: clamp(190px, 20vw, 240px); }

  .badges img { height: 54px; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 36px; }

  .sticky-buy .wrap { padding-block: 12px; }
}


/* ============================================================
   19 · AB 1140px — grosszuegiger Rhythmus
   ============================================================ */

@media (min-width: 1140px) {
  :root { --sec-y: 100px; }
}


/* ============================================================
   20 · RECHTSTEXTE (Impressum, Datenschutz, Widerruf)
   Eigener Lesemodus: schmale Spalte, ruhige Typografie.
   ============================================================ */

.legal { padding-block: 40px 64px; }
.legal .wrap { max-width: 760px; }

.legal-head { margin-bottom: 36px; padding-bottom: 26px; border-bottom: 1px solid var(--border-strong); }
.legal-head h1 {
  font-weight: var(--fw-thin); font-size: clamp(30px, 7vw, 46px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--text);
}
.legal-head .stand { font-size: 14px; color: var(--text-faint); margin-top: 12px; }

.legal h2 {
  font-weight: var(--fw-semibold); font-size: 20px; line-height: 1.3;
  color: var(--text); margin: 40px 0 12px;
}
.legal h3 {
  font-weight: var(--fw-semibold); font-size: 17px; line-height: 1.35;
  color: var(--text); margin: 26px 0 8px;
}
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--text-soft); }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { margin: 12px 0; padding-left: 22px; }
.legal li + li { margin-top: 7px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Datenblock im Impressum */
.legal-data {
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-card); padding: 22px 24px; margin: 16px 0;
}
.legal-data p { margin: 0; }
.legal-data p + p { margin-top: 6px; }
.legal-data strong { color: var(--text); font-weight: var(--fw-semibold); }

/* Hinweiskasten — fuer alles, was Isabella noch pruefen/ergaenzen muss */
.legal-note {
  background: rgba(63, 140, 255, .07); border: 1px solid rgba(63, 140, 255, .26);
  border-left-width: 3px; border-radius: var(--radius-card);
  padding: 18px 20px; margin: 20px 0;
}
.legal-note p { font-size: 15px; color: var(--text-soft); }
.legal-note strong { color: var(--text); }

/* Musterformular zum Heraustrennen */
.legal-form {
  background: var(--bg-tint); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card); padding: 22px 24px; margin: 20px 0;
}
.legal-form p { font-size: 15px; line-height: 1.9; }

.legal-back { display: inline-block; margin-top: 44px; }

@media (min-width: 640px) {
  .legal { padding-block: 56px 80px; }
  .legal p, .legal li { font-size: 17px; }
  .legal h2 { font-size: 22px; margin-top: 48px; }
  .legal-data, .legal-note, .legal-form { padding: 24px 28px; }
}


/* ============================================================
   21 · DRUCK
   ============================================================ */

@media print {
  #topbar, .sticky-buy, .countdown, .signature-bar, .hero-flamingo { display: none !important; }
  body { background: #fff; }
  .faq details { break-inside: avoid; }
}


/* ============================================================
   22 · PIONIERGRUPPE — Preisblock (4.8.2026)

   Die Begruendung, warum die ersten fuenf weniger zahlen, ist das
   Vertrauensstueck dieses Abschnitts. Sie steht deshalb in einem
   eigenen Kasten mit Akzentkante und nicht als Fliesstext.
   ============================================================ */

.pio-why {
  max-width: 580px;
  margin: 0 auto 38px;
  padding: 22px 24px;
  text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--color-accent-soft);
  border-radius: 10px;
}
.pio-why p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}
.pio-why p + p { margin-top: 13px; }
.pio-why strong { color: #fff; font-weight: var(--fw-semibold); }

/* Die Karte traegt oben ein Schild — deshalb Platz schaffen und Bezug setzen */
.price-card {
  position: relative;
  padding-top: 42px;
}
.price-badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: var(--color-magenta);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  box-shadow: var(--shadow-action);
}

/* Ersparnis als eigene Pille — die Zahl soll nicht im Fliesstext untergehen */
.price-save {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--color-accent-soft);
  border: 1px solid rgba(206, 139, 255, .45);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}

/* Freie Plaetze als Punkte. Gefuellt = frei, hohl = vergeben.

   DERZEIT NICHT IM EINSATZ (Entscheidung 4.8.2026): Solange alle fuenf
   Plaetze frei sind, verraet der Zaehler, dass noch niemand gekauft hat.
   Die Stile bleiben stehen, damit der Zaehler schnell zurueckkommen kann,
   sobald zwei, drei Plaetze weg sind. Siehe Kommentar in main.js. */
.seats {
  display: flex; justify-content: center; align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
}
.seat {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-accent-soft);
  border: 1.5px solid var(--color-accent-soft);
}
.seat--weg { background: transparent; opacity: .34; }
.seats-l {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
}