/* =========================================================================
   Stein.Digital — KI-Starterset
   Designsprache: warm & einladend, erwachsen-serioes.

   MOBILE FIRST. Basis-Regeln gelten fuer ~390px (Facebook-In-App-Browser).
   @media (min-width: ...) fuegt nur hinzu, repariert nie.

   FLUID. Groessen und Abstaende skalieren per clamp() weich ueber die Breite.
   Container 1240px mit mitwachsendem Innenabstand — keine schmale Spalte,
   die auf grossen Monitoren mittig klemmt.

   HERO: mobil zentriert und untereinander, ab 62rem zweispaltig 55/45 mit
   linksbuendigem Text und einer Produktbuehne, die nach rechts bis zum
   Viewport-Rand auslaeuft.
   ========================================================================= */

/* ---------- 0. Schrift (selbst gehostet, kein Google-CDN) ---------- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-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;
}

/* ---------- 1. Design-Tokens ---------- */
:root {
  --cream:        #faf9f6;
  --cream-warm:   #fdf6ee;
  --sand:         #f3ede3;  /* Produktbuehne */
  --white:        #ffffff;
  --ink:          #2a2622;
  --ink-soft:     #5c554d;  /* 7.0:1 auf Creme */
  --ink-mid:      #453f39;  /* kraeftiger, fuer Microcopy — 9.9:1 */
  --terracotta:   #c0603a;  /* Markenakzent, nur Flaeche (Buehnenkante) */
  --terracotta-btn: #b45332; /* Button — weisser Text erreicht 4.97:1 und
                                erfuellt AA damit bei jeder Schriftgroesse */
  --terracotta-t: #b45332;  /* Terrakotta als TEXT auf hell — 4.97:1 */
  --terracotta-d: #a44b28;
  --gold:         #c8a056;  /* nur als Flaeche mit dunkler Schrift — 6.2:1 */
  --gold-tint:    #f6ecd8;
  --anthracite:   #1c2b3a;  /* kurze dunkle Momente */
  --on-dark:      #dfe4e9;  /* Text auf Anthrazit — 11.4:1 */
  --terra-pale:   #f7ece7;  /* blasses Terrakotta, Stufe 1 */
  --line:         #e8e2d8;

  --shadow-sm: 0 1px 2px rgba(90, 60, 40, 0.05), 0 4px 12px rgba(90, 60, 40, 0.06);
  --shadow-md: 0 2px 6px rgba(90, 60, 40, 0.06), 0 14px 34px rgba(90, 60, 40, 0.09);

  /* Produktschatten: eine grosse weiche Wolke plus ein enger Kontaktschatten
     direkt unter dem Blatt. Zusammen liest es sich wie Papier auf einem
     Schreibtisch — ohne Spiegelung, ohne kuenstliche Buchdicke. */
  /* Reichweite bewusst kleiner als der Buehnenrand (min. 40px), sonst
     laeuft die Weichzeichnung ueber die Terrakotta-Kante hinaus. */
  --shadow-sheet: 0 16px 34px rgba(28, 43, 58, 0.15), 0 3px 8px rgba(28, 43, 58, 0.10);
  --shadow-sheet-back: 0 10px 24px rgba(28, 43, 58, 0.10);

  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-stage: 10px;
  --radius-sheet: 6px;

  --font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-body:   clamp(1.1875rem, 1.15rem + 0.18vw, 1.25rem);   /* 19 → 20 */
  --fs-lead:   clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);  /* 19 → 22 */
  --fs-small:  clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);      /* 16 → 17 */
  --fs-label:  clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);  /* 14 → 15 */
  --fs-micro:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 → 17 */
  /* Fest 19px: weisser Text auf #c0603a erreicht 4.2:1. Das genuegt AA nur
     als "grosser Text", und der beginnt bei 18.66px fett — mit 18px waere
     die Regel knapp verfehlt. */
  --fs-btn:    1.125rem;                                      /* 18 */
  --fs-h1:     clamp(2rem, 1.35rem + 2.7vw, 3rem);            /* 32 → 48 */
  --fs-h2:     clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem);    /* 26 → 36 */
  --fs-h3:     clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);      /* 21 → 24 */

  --gap-xs: 0.5rem;
  --gap-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  --gap-m:  clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --gap-l:  clamp(2rem, 1.5rem + 2vw, 3rem);
  --gap-xl: clamp(3.75rem, 2.5rem + 4.5vw, 5.5rem);   /* mobil 60px statt 50 */

  --container: 1320px;
  --pad: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --measure: 680px;
}

/* ---------- 2. Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  margin: 0 0 var(--gap-s);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }

p { margin: 0 0 var(--gap-s); }

a { color: var(--terracotta-t); text-underline-offset: 3px; }
a:hover { color: var(--terracotta-d); }

strong { font-weight: 700; }

/* ---------- 3. Fokus & Motion ---------- */
:focus-visible {
  outline: 3px solid var(--terracotta-t);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.measure { max-width: var(--measure); margin-inline: auto; }

.section { padding-block: var(--gap-xl); }
.section--warm { background: var(--cream-warm); }
.section--white { background: var(--white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--terracotta);
  color: var(--white);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* ---------- 5. Eyebrow ---------- */
.eyebrow {
  margin: 0 0 0.875rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta-t);
}

/* ---------- 6. Button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0.875rem clamp(1.75rem, 5vw, 2.75rem);
  background: var(--terracotta-btn);
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 4px rgba(140, 70, 40, 0.16), 0 10px 22px rgba(140, 70, 40, 0.18);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (min-width: 34rem) {
  .btn { display: inline-flex; width: auto; min-height: 58px; }
}

.btn:hover,
.btn:focus-visible {
  background: var(--terracotta-d);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(140, 70, 40, 0.18), 0 14px 28px rgba(140, 70, 40, 0.22);
}
.btn:active { transform: translateY(0); }
.btn[data-placeholder="true"] { cursor: not-allowed; }

.btn-note {
  margin: var(--gap-s) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* ---------- 7. Dev-Badge ---------- */
/* Haengt am Viewport, nicht im Kundenfluss. Verschwindet, sobald
   DIGISTORE_CHECKOUT_URL gesetzt ist. */
.dev-badge {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 200;
  /* Mobil bewusst winzig — sonst verdeckt er die Ueberschrift. */
  max-width: 9.5rem;
  margin: 0;
  padding: 0.375rem 0.5rem;
  background: var(--gold-tint);
  border: 1px solid #e0cba0;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #6b5320;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 48rem) {
  .dev-badge { max-width: 15rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

/* ---------- 8. Hero ---------- */
/* overflow: hidden faengt die Buehne ab, die nach rechts ueber den
   Viewport-Rand hinauslaeuft — sonst entstuende seitliches Scrollen. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--gap-l) var(--gap-m);
  text-align: center;
}

.hero__text { max-width: var(--measure); margin-inline: auto; }

.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--terracotta-t); }

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
/* Zwei bewusste Zeilen — auf schmalen Schirmen umbrechen sie zusaetzlich */
.hero__lead span { display: block; }
.hero__lead span + span { margin-top: 0.25rem; }

/* Mobil steht der CTA hinter der Produktbuehne und braucht deshalb einen
   eigenen Abstand nach oben. Auf dem Desktop entfaellt er wieder. */
.hero__cta { max-width: 26rem; margin: var(--gap-l) auto 0; }

.hero__micro {
  margin: 0.875rem 0 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-mid);
}

/* Enthaltene Themen — kleines Label, darunter die Themen. Kein Kasten,
   keine Symbole, die Hierarchie macht die Arbeit. */
.hero__topics { margin: 1.5rem 0 0; }

.hero__topics-label {
  margin: 0 0 0.25rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__topics-list {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--ink-mid);
}

/* ---------- 9. Produktbuehne ---------- */
/* Gleichmaessiger Rand ringsum: der Stapel bringt seine Ueberstaende als
   eigenes Padding mit, deshalb rahmt ein einheitliches Buehnen-Padding das
   Produkt sauber ein, statt es oben anzuschneiden. */
.stage {
  position: relative;
  overflow: hidden;            /* harte Garantie: nichts ragt heraus */
  margin-top: var(--gap-m);
  /* Die Flaeche umschliesst den Stapel: fit-content macht die Buehne exakt
     so breit wie der Stapel plus Rand. Dadurch ist der Rahmen an allen vier
     Kanten gleich — kein Auslaufen mehr bis zum Bildschirmrand. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(2.5rem, 3.6vw, 3.5rem);   /* 40 → 56px Rahmen */
  background: var(--sand);
  border-radius: var(--radius-stage);
}

/* Duenner Terrakotta-Akzent an der Oberkante */
.stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--terracotta);
  border-radius: var(--radius-stage) var(--radius-stage) 0 0;
}

/* Der Papierstapel: Cover vorne, zwei echte Innenseiten dahinter.
   Nur Versatz, keine Rotation — fuer diese Zielgruppe ruhiger. */
/* Blattbreite als Variable: die hinteren Blaetter sind absolut positioniert
   und wuerden ohne feste Breite auf Inhaltsgroesse schrumpfen. Der Stapel
   bekommt padding-right in Hoehe des groessten Versatzes (content-box),
   damit die Fahne als Ganzes mittig sitzt. */
.stage__stack {
  /* Groessen fluid und aneinander gekoppelt: der Kasten umschliesst den
     Faecher exakt, dadurch ist er automatisch mittig und ueberlaeuft nie. */
  --sheet-w: clamp(9rem, 48vw, 19rem);     /* waechst bis Tablet mit */
  --fan:   calc(var(--sheet-w) * 0.22);
  --fan-y: calc(var(--sheet-w) * 0.07);

  position: relative;
  box-sizing: content-box;
  width: var(--sheet-w);
  padding-top: var(--fan-y);
  padding-right: var(--fan);
  margin: 0 auto;
}

.sheet { margin: 0; }
.sheet img { width: 100%; border-radius: var(--radius-sheet); }

.sheet--front { position: relative; z-index: 3; }
.sheet--front img { box-shadow: var(--shadow-sheet); }

/* Der Versatz muss groesser sein als der weisse Seitenrand (9% der Breite),
   sonst schaut nur Papierrand heraus statt einer erkennbaren Vorlage. */
.sheet--back1,
.sheet--back2 { position: absolute; width: var(--sheet-w); z-index: 1; }
.sheet--back1 { top: calc(var(--fan-y) / 2); left: calc(var(--fan) / 2); z-index: 2; }
.sheet--back2 { top: 0; left: var(--fan); }
.sheet--back1 img,
.sheet--back2 img { box-shadow: var(--shadow-sheet-back); }

/* Steht bewusst UNTER der Buehne, nicht darin: sonst waere unten deutlich
   mehr Sand als oben und der Rahmen wirkte unausgewogen. */
.hero__product { min-width: 0; }

.stage__caption {
  margin: var(--gap-s) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}
.stage__seller { display: block; margin-top: 0.25rem; font-size: var(--fs-label); }

/* ---------- 10. Hero ab Tablet/Desktop ---------- */
@media (min-width: 62rem) {
  .hero {
    padding-block: 5.5rem 3.5rem;   /* 88px oben / 56px unten */
    text-align: left;
  }

  /* 55 / 45 mit grosszuegiger Rinne */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
    /* Nur Spaltenabstand. Als Kurzform wuerde derselbe Wert auch zwischen
       Text- und CTA-Zeile wirken und dort eine Luecke von ueber 90px reissen. */
    column-gap: clamp(4.5rem, 1.5rem + 4.8vw, 6rem);   /* 72 → 96px */
    row-gap: 0;
    align-items: center;
  }

  /* Text und CTA liegen in zwei Zeilen, das Produkt ueberspannt beide.
     Ohne align-self wuerden beide in ihrer Zeile zentriert und es klaffte
     eine Luecke dazwischen — deshalb: Text unten, CTA oben andocken. */
  .hero__text    { grid-column: 1; grid-row: 1; align-self: end;
                   max-width: none; margin-inline: 0; }
  .hero__cta     { grid-column: 1; grid-row: 2; align-self: start; }
  .hero__product { grid-column: 2; grid-row: 1 / span 2; }
  .hero h1 { margin-bottom: 1.5rem; }           /* H1 → Sub 24px */
  .hero__lead { max-width: 34rem; margin-bottom: 1.875rem; }  /* Sub → CTA 30px */
  /* margin zuruecksetzen: der mobile Abstand zur Buehne gilt hier nicht mehr */
  .hero__cta { max-width: none; margin: 0; }
  .hero__micro { margin-top: 0.875rem; }        /* CTA → Microcopy 14px */

  /* Die Buehne laeuft nach rechts bis zum Viewport-Rand aus.
     Der Wert ist exakt der Abstand von der Container-Innenkante zum
     Bildschirmrand: halbe Ueberbreite plus Innenabstand. */
  .stage { margin-top: 0; }

  /* Rund 18% groesser als zuvor (max. 376px statt 320px). Die Wachstumsrate
     ist so gewaehlt, dass der Stapel bei jeder Breite zwischen 992 und 1920
     mit Rand in die Buehne passt — bei 992px bleiben 22px Luft. */
  .stage__stack {
    --sheet-w: clamp(15rem, 27vw - 1rem, 22.5rem);
    --fan:   calc(var(--sheet-w) * 0.22);
    --fan-y: calc(var(--sheet-w) * 0.07);
  }
}

/* =========================================================================
   Kapitel 2–7
   Gleiche Bausteine wie im Hero: warme Flaechen, 16px Rundung, weiche
   Schatten, Gold nur als kleiner Akzent. Alles fluid, mobil einspaltig.
   ========================================================================= */

.section__head { max-width: var(--measure); margin: 0 0 clamp(1.75rem, 5vw, 2.5rem); }

/* Zwischenueberschriften innerhalb eines Kapitels brauchen Abstand nach oben.
   Muss NACH .section__head stehen: dessen margin-Kurzschreibweise wuerde
   ein vorher notiertes margin-top wieder auf 0 setzen. */
.section__head--spaced { margin-top: clamp(2.5rem, 7vw, 3.5rem); }
.section__head p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Kapitel 2: Proof of Mechanism ---------- */
.flow {
  display: grid;
  gap: clamp(0.75rem, 2.5vw, 1rem);
  max-width: 62rem;
  margin: 0;
}

.flow__step { min-width: 0; }

.flow__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta-t);
}

.flow__arrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
}
.flow__arrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.card {
  padding: clamp(1.375rem, 5vw, 1.75rem);   /* mobil 22px statt 20px */
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.section--white .card { background: var(--cream-warm); box-shadow: none; }

/* Stufe 2: die Eingabe, als Zitat gesetzt */
.prompt-card {
  margin: 0;
  padding: var(--gap-m);
  background: var(--cream-warm);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-card);
}
.section--white .prompt-card { background: var(--cream); }
.prompt-card p { margin: 0; font-size: var(--fs-lead); line-height: 1.55; }

/* Stufe 3: das Ergebnis als Briefkarte */
.letter {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.letter p { margin-bottom: 1rem; }
.letter p:last-child { margin-bottom: 0; }
.letter__from,
.letter__date { color: var(--ink-soft); }
.letter__subject { font-weight: 700; }

@media (min-width: 40rem) { .letter__date { text-align: right; } }

.flow__caption {
  max-width: 62rem;
  margin: var(--gap-m) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Ab 56rem stehen Eingabe und Ergebnis nebeneinander */
@media (min-width: 56rem) {
  .flow {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "situation situation situation"
      "eingabe   arrow     ergebnis";
    gap: 0 var(--gap-m);
    align-items: start;
  }
  .flow__step--situation { grid-area: situation; margin-bottom: var(--gap-l); }
  .flow__step--eingabe   { grid-area: eingabe; }
  .flow__step--ergebnis  { grid-area: ergebnis; }
  .flow__arrow--down { display: none; }
  .flow__arrow--right { grid-area: arrow; align-self: center; }
  .flow__arrow--right::after { display: none; }
}

@media (max-width: 55.99rem) {
  .flow__arrow--right { display: none; }
  .flow__arrow { padding-block: var(--gap-s); }
}

/* ---------- Kapitel 3: Schritte ---------- */
.steps {
  display: grid;
  gap: var(--gap-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.steps li {
  counter-increment: step;
  padding: clamp(1.375rem, 5vw, 1.75rem);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.section--white .steps li { background: var(--cream-warm); box-shadow: none; }

.steps li::before {
  content: counter(step);
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--gap-s);
  background: var(--gold-tint);
  border-radius: 50%;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--ink);
}
.steps h3 { margin-bottom: 0.375rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* Abstand vor den Zwischenueberschriften in Kapitel 3 */
.section__head + .checklist,
.section__head + .preview { margin-top: 0; }

/* ---------- Kapitel 3: Value-Stack ---------- */
/* Die Eintraege sind zweizeilig (Merkmal + Nutzen). Mit dem kleinen
   Grundabstand verschwimmen sie mobil zu einem Block. */
.checklist {
  display: grid;
  gap: clamp(1.125rem, 3.5vw, 1.25rem);
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.875rem;
  align-items: start;
}

/* Gold als Scheibe, das Haekchen selbst in Textfarbe — so bleibt der
   Akzent golden, ohne die Lesbarkeit des Zeichens zu opfern. */
.checklist li::before {
  content: "✓";
  display: grid;
  place-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--gold-tint);
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
}

.checklist strong { display: block; margin-bottom: 0.125rem; }
.checklist .benefit { display: block; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Kapitel 3: Produktvorschau ---------- */
.preview {
  display: grid;
  gap: var(--gap-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) { .preview { grid-template-columns: repeat(3, 1fr); } }

.preview figure { margin: 0; }
.preview img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-md); }
.preview figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Kapitel 4 ---------- */
.duo { display: grid; gap: var(--gap-m); }
@media (min-width: 48rem) { .duo { grid-template-columns: repeat(2, 1fr); } }

.hint {
  max-width: var(--measure);
  margin: var(--gap-m) 0 0;
  padding: var(--gap-s) var(--gap-m);
  background: var(--gold-tint);
  border-radius: var(--radius-card);
  font-size: var(--fs-small);
  color: var(--ink-mid);
}

/* ---------- Garantie: hell, warm, mit Goldkante ----------
   Bewusst kein dunkler Block — der las sich wie eine Vertragsklausel. */
.guarantee {
  max-width: var(--measure);
  padding: clamp(1.25rem, 3.5vw, 2rem);
  background: var(--cream-warm);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-card);
}
.section--sand .guarantee { background: var(--white); }
.guarantee h3 { margin-bottom: 0.5rem; }
.guarantee > :last-child { margin-bottom: 0; }
.guarantee__note { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Kapitel 5 ---------- */
.about { max-width: var(--measure); }
.about p { font-size: var(--fs-lead); line-height: 1.6; }
.about > :last-child { margin-bottom: 0; }

.voices {
  display: grid;
  gap: var(--gap-m);
  margin: var(--gap-l) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 52rem) { .voices { grid-template-columns: repeat(3, 1fr); } }
.voices figure { margin: 0; }
.voices blockquote { margin: 0 0 0.5rem; font-size: var(--fs-lead); line-height: 1.5; }
.voices blockquote p { margin: 0; }
.voices figcaption { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Kapitel 6: Bestellkarte ---------- */
/* Reihenfolge bewusst: Angebot und Preis zuerst, dann die Erklaerung. Die
   Prozessinfo ist kleiner gesetzt, damit sie beruhigt statt abzulenken. */
.buy { display: grid; gap: var(--gap-l); max-width: var(--measure-wide, 54rem); }

.buy-process {
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.buy-process h3 { font-size: var(--fs-h4, 1.25rem); margin-bottom: 0.5rem; color: var(--ink); }
.buy-process p { margin-bottom: 0.75rem; }
.buy-process p:last-child { margin-bottom: 0; }
.buy-process .ordered { margin-bottom: var(--gap-m); }

.buy-card {
  max-width: 30rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.buy-card__eyebrow {
  margin: 0 0 0.125rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink);
}
.buy-card__specs { margin-bottom: var(--gap-m); font-size: var(--fs-small); color: var(--ink-soft); }

.buy-card__price {
  margin: 0;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.buy-card__terms {
  margin: 0.375rem 0 var(--gap-m);
  padding-bottom: var(--gap-m);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink-mid);
}
.buy-card .checklist { margin-bottom: var(--gap-l); }
.buy-card__contact {
  margin: var(--gap-m) 0 0;
  padding-top: var(--gap-m);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.buy-side { max-width: var(--measure); }
.buy-side h3 { margin-top: var(--gap-m); }
.buy-side h3:first-child { margin-top: 0; }
.buy-side p, .buy-side li { color: var(--ink-soft); }

.ordered { margin: 0; padding-left: 1.25rem; }
.ordered li { margin-bottom: 0.5rem; }

/* ---------- Kapitel 7: FAQ ---------- */
.faq { max-width: 62rem; margin: 0; }

.faq > div { padding-block: var(--gap-m); border-bottom: 1px solid var(--line); }
.faq > div:first-child { border-top: 1px solid var(--line); }

@media (min-width: 54rem) {
  .faq > div {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--gap-m);
  }
}

.faq dt { font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; }
.faq dd { margin: 0; color: var(--ink-soft); }

/* ---------- Finaler CTA ---------- */
.final { text-align: center; }
.final .section__head { margin-inline: auto; }
.final .btn { margin-inline: auto; }

/* ---------- Farb-Rhythmus: Flaechen ---------- */
/* Rund 85% der Seite bleibt neutral (Creme/Weiss). Sand und Anthrazit
   markieren Bedeutung — Sand die Angebots-Kapitel, Anthrazit genau zwei
   kurze Momente: das Beispiel-Ergebnis und die Garantie. */
.section--sand { background: var(--sand); }

.section--dark,
.block--dark {
  background: var(--anthracite);
  color: var(--on-dark);
}
.section--dark h2, .section--dark h3,
.block--dark h2, .block--dark h3 { color: var(--white); }
.section--dark p, .block--dark p { color: var(--on-dark); }

.block--dark {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-card);
}
.block--dark > :last-child { margin-bottom: 0; }
.block--dark a { color: #f0b8a4; }

/* ---------- Gold als Chip, nie als Text auf Creme ---------- */
/* Senf-Gold erreicht auf Creme nur 2,3:1 und ist als Schriftfarbe
   unbrauchbar. Als Flaeche mit anthrazitfarbener Schrift sind es 6,2:1. */
.chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 6px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Feine Goldkante als Bedeutungsmarker an Boxoberkanten */
.rule-gold { border-top: 3px solid var(--gold); }

/* ---------- Kapitel 2: Proof of Mechanism ---------- */
.flow__label { color: var(--ink-soft); }

/* Stufe 1 — blasses Terrakotta: die Ausgangslage */
.stage1 {
  padding: clamp(1.375rem, 5vw, 1.75rem);
  background: var(--terra-pale);
  border-radius: var(--radius-card);
}
.stage1 > :last-child { margin-bottom: 0; }
.stage1 p { font-size: var(--fs-lead); line-height: 1.55; }

/* Stufe 2 — Sand: die Eingabe */
.stage2 {
  margin: 0;
  padding: clamp(1.375rem, 5vw, 1.75rem);
  background: var(--sand);
  border-radius: var(--radius-card);
}
.stage2 p { margin: 0.75rem 0 0; font-size: var(--fs-lead); line-height: 1.55; }

/* Stufe 3 — Anthrazit: das Ergebnis */
.stage3 {
  padding: clamp(1.375rem, 5vw, 1.75rem);
  background: var(--anthracite);
  color: var(--on-dark);
  border-radius: var(--radius-card);
}
.stage3 h3 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h3);
  color: var(--white);
}
.stage3 h3 + p { margin-bottom: var(--gap-m); }
.stage3 p { color: var(--on-dark); }
.stage3 ol { margin: 0; padding-left: 1.375rem; }
.stage3 li { margin-bottom: 0.5rem; color: var(--on-dark); }
.stage3 li:last-child { margin-bottom: 0; }
.stage3 > :last-child { margin-bottom: 0; }

.flow__note {
  max-width: var(--measure);
  margin: var(--gap-s) 0 0;
  color: var(--ink-soft);
}

/* Erreichbarer Mensch — bewusst frueh auf der Seite */
.reachable {
  max-width: var(--measure);
  margin: var(--gap-l) 0 0;
  padding: var(--gap-s) var(--gap-m);
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--gold);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-mid);
}
.section--sand .reachable { background: var(--cream); }

/* ---------- Produktvorschau: anklickbar ---------- */
.preview__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.preview__btn:focus-visible { outline: 3px solid var(--terracotta-t); outline-offset: 4px; }
.preview__btn img { transition: transform 160ms ease, box-shadow 160ms ease; }
.preview__btn:hover img {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(90,60,40,0.10), 0 20px 44px rgba(90,60,40,0.16);
}

.preview__hint {
  display: block;              /* sonst klebt der Hinweis an der Bildunterschrift */
  margin-top: 0.375rem;
  font-size: var(--fs-label);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Lightbox ---------- */
.lightbox {
  width: min(92vw, 60rem);
  max-width: 92vw;
  max-height: 90vh;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 16, 12, 0.86); }

.lightbox__inner {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Das Bild muss komplett in den Screen passen — die Hoehe des Rahmens und
   der Bildunterschrift wird abgezogen, damit unten nichts abgeschnitten wird. */
.lightbox img {
  width: 100%;
  height: auto;
  max-height: calc(90vh - 6.5rem);
  object-fit: contain;
  margin-inline: auto;
  border-radius: 8px;
}

.lightbox__caption {
  margin: 0.75rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}

/* Schliessen-X: gross genug fuer Finger, immer sichtbar */
/* Immer innerhalb des sichtbaren Feldes — ausserhalb wird das X vom
   Viewport-Rand angeschnitten. */
.lightbox__close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 50%;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.lightbox__close:hover { background: var(--terracotta-t); }
.lightbox__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }



/* ---------- 11. Footer ---------- */
.footer {
  padding-block: var(--gap-l);
  background: var(--cream-warm);
  border-top: 1px solid var(--line);
}

.footer__brand {
  margin: 0 0 var(--gap-s);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.footer__brand span { font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs) var(--gap-m);
  margin: 0 0 var(--gap-m);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 700;
}
.footer__nav a { display: inline-block; padding-block: 0.5rem; }

.footer__legal {
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* ---------- 12. Cookie-Banner ---------- */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  max-height: 85vh;
  overflow-y: auto;
  padding-block: var(--gap-s);
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 30px rgba(90, 60, 40, 0.14);
}

.consent__inner { display: grid; gap: var(--gap-s); align-items: center; }

@media (min-width: 56rem) {
  .consent { padding-block: var(--gap-m); }
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-m); }
}

.consent p { margin: 0; font-size: var(--fs-small); line-height: 1.5; }

/* Beide Optionen gleichwertig: gleiche Groesse, gleiches Gewicht */
.consent__actions { display: grid; grid-auto-flow: column; gap: 0.625rem; }

.consent__actions .btn {
  width: 100%;
  min-height: 54px;
  padding-inline: 0.75rem;
  font-size: var(--fs-small);
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.consent__actions .btn:hover,
.consent__actions .btn:focus-visible {
  background: var(--cream-warm);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}
@media (min-width: 34rem) {
  .consent__actions .btn { min-width: 12rem; min-height: 56px; }
}

/* ---------- 13. Rechtsseiten ---------- */
.legal { padding-block: var(--gap-l) var(--gap-xl); }
.legal .container > * { max-width: var(--measure); }
.legal h1 { margin-bottom: var(--gap-l); }
.legal h2 { margin-top: var(--gap-l); font-size: var(--fs-h3); }

.backlink {
  display: inline-block;
  margin-bottom: var(--gap-l);
  padding-block: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
}

.todo {
  padding: var(--gap-m);
  background: var(--gold-tint);
  border-radius: var(--radius-card);
  max-width: var(--measure);
}
.todo p:last-child { margin-bottom: 0; }