/* ============================================================
   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); }

.announce {
  background: var(--color-navy);
  color: var(--text-on-dark);
  padding: 8px var(--pad-x);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px 10px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.announce b { font-weight: var(--fw-semibold); color: #fff; }
.announce .dot { opacity: .35; }
.announce .later { color: var(--color-accent-soft); }
/* Die langen Wochentage kosten am Handy eine ganze Zeile — erst ab Tablet zeigen */
.wide-only { display: none; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(231, 227, 219, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-strong);
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 10px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); min-height: 44px; }
.brand:hover { color: var(--text); }
.brand img { width: 32px; height: 32px; }
.brand span { font-size: 17px; letter-spacing: .05em; }
.brand .fem { font-weight: var(--fw-thin); }
.brand .brand-strong { font-weight: var(--fw-extrabold); }

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


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

.hero {
  position: relative; overflow: hidden;
  background: var(--bg-stage); color: var(--text-on-dark);
  display: flex; align-items: center;
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 42%;
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 9, 36, .66), rgba(20, 9, 36, .84) 55%, rgba(20, 9, 36, .97));
}
.hero__inner {
  position: relative;
  max-width: 920px; margin-inline: auto;
  padding: 64px var(--pad-x) 68px;
  text-align: center;
}
.hero__sub {
  font-size: clamp(16px, 2.4vw, 20px); line-height: 1.6;
  color: var(--text-on-dark-soft);
  margin: 22px auto 0; max-width: 660px;
}
/* Augenbraue — steht jetzt 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-on-dark-soft);
  margin: 0 auto 16px; max-width: 620px;
}

/* 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-on-dark-soft);
  margin: 0 auto; max-width: 560px;
}

/* 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. */
.hero .h-hero { font-size: inherit; line-height: 1.06; }
.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: 16px;
  font-size: clamp(18px, 2.5vw, 25px);
  line-height: 1.34;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .84);
}
/* "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: #fff;
}

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

/* Im Hero stehen Button und Zahlwege-Zeile immer untereinander,
   auch wenn .cta-group ab 480px sonst in eine Zeile umbricht. */
.hero .cta-group { flex-direction: column; align-items: center; }

.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; }

  .announce { font-size: 14px; padding-block: 11px; gap: 6px 18px; }
  .wide-only { display: inline; }

  .hero__inner { padding-block: 72px 76px; }
  .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 */
  .site-nav {
    display: flex; align-items: center; gap: 20px;
    font-size: 15px; color: var(--text-soft);
  }
  /* :not(.btn) ist wichtig — sonst erbt der Kauf-Button die graue
     Navigationsfarbe und steht grau auf magenta. Gleiches beim Hover,
     der ihn sonst magenta auf magenta faerben wuerde. */
  .site-nav a { white-space: nowrap; }
  .site-nav a:not(.btn) { color: inherit; }
  .site-nav a:not(.btn):hover { color: var(--color-magenta); }
  .site-nav .btn { flex: none; }

  .hero { min-height: 560px; }
  /* Seit die drei Haken raus sind, traegt der Block nur noch vier Elemente.
     Bei 108/112px Polster schwamm er in der Flaeche — deshalb enger. */
  .hero__inner { padding-block: 84px 88px; }

  /* Ab Tablet steht der Text links, damit rechts das Foto frei bleibt.
     Der Verlauf laeuft dafuer horizontal statt von oben nach unten:
     links dunkel genug fuer weisse Schrift, rechts fast offen. */
  /* Ausschnitt so gewaehlt, dass rechts neben dem Text Gesicht UND
     Monitor stehen — auf dem Bildschirm steht "Sichtbar mit KI".
     Der Bildschirm sitzt am rechten Bildrand, deshalb der hohe Wert. */
  .hero__bg { object-position: 96% 42%; }
  .hero__veil {
    background:
      linear-gradient(90deg, rgba(20, 9, 36, .95) 0%, rgba(20, 9, 36, .90) 34%, rgba(20, 9, 36, .58) 58%, rgba(20, 9, 36, .30) 100%),
      linear-gradient(180deg, rgba(20, 9, 36, .34), rgba(20, 9, 36, .52));
  }
  .hero__inner {
    /* .hero ist ein Flex-Container — ohne width:100% schrumpft der
       Inhaltsblock auf Textbreite und bleibt trotz max-width mittig. */
    width: 100%;
    max-width: var(--container);
    text-align: left;
  }
  /* 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__list,
  .hero__terms { max-width: 580px; margin-left: 0; margin-right: 0; }
  .hero .cta-group { align-items: flex-start; }
  .hero .chips { justify-content: flex-start; }
  .glow--hero { opacity: .22; }

  .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; }
  .hero { min-height: 660px; }
}


/* ============================================================
   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 {
  .site-header, .sticky-buy, .announce, .countdown, .signature-bar { 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);
}


/* --- contentmitki: Nur fuer diese Seite -------------------------------
   Die Bausteinbilder sind 16:9. Die Modulkarte schneidet standardmaessig
   auf 16:10 und nimmt dem Flamingo die Beine. Hier also 16:9 stehen lassen.
   ---------------------------------------------------------------------- */
.mod img { aspect-ratio: 16 / 9; }

/* --- contentmitki: Ein Containermass -------------------------------------
   Vorher lagen fuenf Textbreiten nebeneinander (760/860/900/1200). Weil alle
   mittig sitzen, sprang die linke Kante von Abschnitt zu Abschnitt. Jetzt
   liegt jeder Abschnitt in .wrap, Fliesstext bekommt .col — dadurch starten
   alle Augenbrauen und Ueberschriften an derselben linken Kante.
   ------------------------------------------------------------------------ */
.col         { max-width: 720px; }
.col--wide   { max-width: 860px; }
.col--center { margin-inline: auto; }

/* --- contentmitki: Preisblock atmen lassen -------------------------------
   Auf dieser Seite fallen drei Elemente weg, die auf /sichtbar/ zwischen
   Ueberschrift, Karte und Knopf liegen: die Preis-Begruendung (.pio-why),
   der Ersparnis-Chip (.price-save) und die Zahlungszeile (.price-pay).
   Ohne sie ruecken die uebrigen Teile zusammen. Hier wieder aufgemacht.
   ------------------------------------------------------------------------ */
#preis .price-card { margin-top: 40px; padding-block: 54px 42px; }
#preis .price-note { margin: 18px auto 32px; max-width: 540px; line-height: 1.55; }
#preis .price-list { margin-bottom: 36px; }
#preis .price-list { gap: 15px; }
#preis .price-foot { margin-top: 36px; padding-top: 26px; }
@media (min-width: 700px) {
  #preis .price-card { margin-top: 48px; padding-block: 60px 48px; }
}

/* --- contentmitki: Mobil mehr Luft ---------------------------------------
   Gemessen am 17.8. auf 375px: Seitenpolster 20px, Modulkarten 18px
   auseinander, Aufzaehlungen 22px, Sektionsabstand 56px. Alles am unteren
   Rand des Vertretbaren — Texte und Karten klebten am Displayrand.
   Hier wird mobil aufgemacht. Wichtig: das Innenpolster der Karten geht
   dabei leicht RUNTER, damit die groesseren Aussenabstaende die Zeilen
   nicht zu schmal machen. Netto steht der Text gleich weit innen, die
   Karten haben aber Luft zum Rand.
   ------------------------------------------------------------------------ */
@media (max-width: 639px) {
  :root { --pad-x: 24px; --sec-y: 66px; }

  .card              { padding: 24px 20px 26px; }
  .mod__body         { padding: 22px 20px 24px; }
  .faq details       { padding: 18px 20px; }
  #preis .price-card { padding: 50px 20px 40px; margin-top: 32px; }

  .grid--mod { gap: 22px; }
  .grid--2   { gap: 26px; }
  .split     { gap: 30px; }
  .checklist { gap: 14px; }

  .hero__inner { padding-block: 60px 64px; }

  /* Fliesstextspalten duerfen mobil die volle Breite nehmen */
  .col, .col--wide { max-width: 100%; }
}

/* --- contentmitki: Karte fuer eine kommende Erweiterung -------------------
   ChatGPT Work steht mit in der Bausteine-Reihe, ist aber heute NICHT im
   Kurs. Statt eines Fotos bekommt die Karte eine Flaeche mit Hinweis — so
   sieht man auf einen Blick, dass sie dazukommt und nicht schon drinliegt.
   ------------------------------------------------------------------------ */
.mod--soon { border-color: rgba(128, 68, 216, .45); background: var(--bg-card); }
.mod--soon .mod__panel {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--gradient-lila);
  padding: 20px; text-align: center;
}
.mod--soon .mod__panel span {
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
}
.mod--soon .mod__no { color: var(--color-lila); }
.mod--soon .mod__out { color: var(--color-lila); }

/* --- contentmitki: Typografie nach den Carousels --------------------------
   Abgeglichen am 17.8. mit Isabellas eigenen Carousel- und Banner-Exporten.
   Die Farben stimmten bereits (#9618D1 ist identisch). Abweichend waren:
     1. Ueberschriften standen auf Gewicht 200. Isabellas eigene Flaechen
        nutzen 800. Riesige duenne Headlines sind DAS Erkennungsmerkmal
        generischer KI-Landingpages — das war der Hauptgrund fuers Gefuehl.
     2. Das Akzentwort war kursiv. Auf ihren Slides ist es aufrecht und fett.
     3. Seitenflaeche war greige (#E7E3DB), ihr Banner nutzt Creme (#FBF6F3).
     4. Augenbrauen waren grau. Ihre sind violett mit kurzer Linie darueber.
   ------------------------------------------------------------------------ */
:root {
  --bg-page:      #FBF6F3;
  --bg-card:      #F3EAE4;
  --bg-tint:      #F7EFF6;
  --border:       #EBE1DA;
  --border-strong:#DCCFC5;
}

/* 1 · Ueberschriften fett statt duenn */
.h-hero,
.h-hero__gross,
.h-sec        { font-weight: 800; letter-spacing: -.03em; }
.h-hero__klein{ font-weight: 400; letter-spacing: -.005em; }
.h-sub        { font-weight: 700; letter-spacing: -.02em; }
.price-new    { font-weight: 700; letter-spacing: -.04em; }

/* 2 · Akzentwort aufrecht und fett, nie kursiv */
.accent       { font-style: normal; font-weight: 800; color: var(--color-magenta); }
.accent-soft  { font-style: normal; font-weight: 800; color: #9A6CE6; }

/* 3 · Augenbraue violett, mit der kurzen Linie aus dem Banner */
.eyebrow {
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--color-magenta);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 44px; height: 2px;
  background: currentColor;
  margin-bottom: 14px;
  opacity: .9;
}
.center .eyebrow::before,
.eyebrow.center::before { margin-inline: auto; }
.eyebrow--soft  { color: #9A6CE6; }
.eyebrow--dark,
.eyebrow--white { color: rgba(255, 255, 255, .82); }
/* In Karten keine Linie — dort traegt schon der Rahmen */
.card .eyebrow::before { display: none; }