/* ════════════════════════════════════════════════════════════════
   responsive.css – MOBILE-Komposition (Referenz: Mobile V6)
   Gilt für Smartphones und Tablets im Hochformat.

   --u ist die Breiteneinheit der Mobile-Komposition:
   auf dem Smartphone 1vw (wie V6), ab 650 px Fensterbreite 1 % der
   zentrierten 430-px-Spalte (4,3 px). So bleibt die freigegebene
   Smartphone-Komposition auch auf Tablets unverzerrt.
   ════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) {

  :root { --u: 1vw; }
  html, body { background: #182A20; overflow-x: clip; } /* v1.0.4: JUNO-Grün (vorher #1e371a) */
  body { font-family: Quicksand, sans-serif; }

  /* ─── 01 · HERO ───────────────────────────────────────────── */
  .story { height: 265svh; position: relative; }
  .stage { height: 100svh; width: 100%; position: sticky; top: 0; overflow: hidden; background: #182A20; }
  .hero-frame, .artboard { position: absolute; inset: 0; }
  .artboard { overflow: hidden; }

  .frag {
    position: absolute; display: block; height: auto; max-width: none; object-fit: contain;
    pointer-events: none; will-change: transform, opacity;
  }
  /* v1.0.9 · Variante A: obere Collage um --m-drop tiefer (nur Ausgangslage) */
  .artboard { --m-drop: 12%; }
  .moon       { width: calc(69 * var(--u)); right: calc(-18 * var(--u)); top: calc(24% + var(--m-drop)); z-index: 1; }
  .frame      { width: calc(56 * var(--u)); right: calc(-12 * var(--u)); top: calc(30% + var(--m-drop)); z-index: 2; }
  .cloud      { width: calc(89 * var(--u)); right: calc(-23 * var(--u)); bottom: 1%; z-index: 3; }
  .peacock    { width: calc(50 * var(--u)); right: calc(24 * var(--u));  bottom: -6%; z-index: 4; }
  .flower1    { width: calc(50 * var(--u)); right: calc(-25 * var(--u)); bottom: 8%; z-index: 5; }
  .venus      { width: calc(39 * var(--u)); right: calc(3 * var(--u));   top: calc(36% + var(--m-drop)); z-index: 6; transform-origin: 50% 28%; }
  .branch-top { width: calc(55 * var(--u)); right: calc(-33 * var(--u)); top: calc(15% + var(--m-drop)); z-index: 7; }

  .title-area {
    /* v1.0.3: ohne Wortmarke beginnt die Überschrift 60 px unter dem Rand (vorher 98 px) */
    position: absolute; z-index: 11; top: calc(env(safe-area-inset-top) + 60px + var(--m-title-shift, 0) * 100%); left: 6%; right: 6%;
    color: #f7f3ed; will-change: transform;
    text-align: center; /* v1.0.9: mittig */
  }
  .title-area .heading {
    font: clamp(39.6px, calc(11.55 * var(--u)), 57.2px)/1.05 Oranienbaum, serif;
    letter-spacing: -.045em; max-width: 100%; margin: 0 0 24px;
  }
  .title-area .intro { font: 24px/1.17 Oranienbaum, serif; max-width: 300px; margin: 0 auto; } /* v1.0.9: mittig */ /* v1.0.3: 252 statt 270 px = gleiche Zeilenumbrüche wie bisher bei −0.04em */
  .title-area .cta {
    display: inline-flex; margin-top: 19px; padding: 13px 18px; border: 0; border-radius: 40px;
    background: #98000e; color: #fff; text-decoration: none;
    font: 600 12px Quicksand, sans-serif; letter-spacing: .03em;
  }

  /* v1.0.2: Countdown in einer Zeile (vorher max. 180 px breit → Umbruch).
     Schrift 20 px wie V6; nur auf sehr schmalen Displays (< ca. 305 px)
     verkleinert sie sich, damit die Zeile nie umbricht. */
  .hero-countdown {
    position: absolute; z-index: 12; left: 6%; right: 6%; bottom: calc(22px + env(safe-area-inset-bottom));
    color: #f4eee6; font: 12px Quicksand, sans-serif; white-space: nowrap;
  }
  .hero-countdown strong { display: block; margin-top: 4px; font: min(20px, calc(6.4 * var(--u))) Oranienbaum, serif; }

  /* ─── 02 · „Eine besondere Zeit …“ ───────────────────────── */
  .next-overlay {
    position: absolute; inset: 0; z-index: 20; overflow: hidden;
    background: #f5f1eb; transform: translateY(100%); will-change: transform;
  }
  .scene2-board, .s2-copy { position: absolute; inset: 0; }
  .s2-frag {
    position: absolute; display: block; height: auto; max-width: none; object-fit: contain;
    pointer-events: none; will-change: transform, opacity;
  }
  .s2-statue  { width: calc(53 * var(--u)); left: calc(-24 * var(--u));  bottom: -3%; z-index: 2; }
  .s2-flowers { width: calc(53 * var(--u)); right: calc(-46 * var(--u)); top: 28%; z-index: 2; }
  .s2-peacock { width: calc(38 * var(--u)); right: calc(-18 * var(--u)); bottom: 0; z-index: 2; }
  .s2-paper   { width: calc(23 * var(--u)); right: calc(-13 * var(--u)); top: -8%; z-index: 1; }

  /* v1.1.1 · Szene 02 immer kompakt: Überschrift und Text stehen auf jeder
     Bildschirmhöhe untereinander (vorher erst unter 760 px). Die frühere
     Höhengrenze kippte am Handy beim Ein-/Ausblenden der Adressleiste hin
     und her und erzeugte eine große Lücke unter der Überschrift.
     Der obere Abstand hängt nur an svh (ändert sich beim Scrollen nicht):
     flache Displays wie bisher, hohe Displays stufenlos etwas luftiger. */
  .s2-copy {
    display: flex; flex-direction: column; align-items: center;
    padding-top: clamp(9%, calc(13svh - 50px), 13svh);
  }
  .s2-copy h2 {
    position: relative; z-index: 3; width: 86%; margin: 0;
    text-align: center; color: #181c16;
    font: clamp(33px, calc(9 * var(--u)), 45px)/1.04 Oranienbaum, serif;
  }
  .s2-body {
    position: relative; z-index: 5; width: 76%; margin: 22px 0 0;
    text-align: center; color: #262a24; font: 15px/1.55 Quicksand, sans-serif;
  }
  .s2-body p { margin: 0; }
  .s2-body .s2-text { margin-bottom: 1.55em; } /* = eine Leerzeile */

  /* ─── Inhaltsabschnitte ─────────────────────────────────── */
  .page-continuation { position: relative; overflow: clip; background: #f5f1eb; color: #243321; }
  .editorial-section, .end-section { position: relative; isolation: isolate; overflow: clip; padding: 74px 7% 80px; }
  .editorial-section.tone-2 { background: #eee7de; }

  .page-continuation h2 {
    font: normal clamp(35px, calc(9 * var(--u)), 48px)/1.13 Oranienbaum, Georgia, serif;
    letter-spacing: -.035em; margin: 0 0 28px; color: #213720;
  }
  .page-continuation h3 { font: normal 26px/1.2 Oranienbaum, serif; margin: 0 0 10px; }
  .page-continuation p, .page-continuation .editorial-body { font: 400 16px/1.7 Quicksand, sans-serif; }
  .page-continuation p { margin: 0 0 19px; }
  .page-continuation strong { font-weight: 600; }
  .editorial-inner { position: relative; z-index: 2; }
  .editorial-body { max-width: 580px; }

  .margin-art {
    position: relative; display: block; float: right; width: 140px; max-width: calc(38 * var(--u)); height: auto;
    margin: 4px calc(-9 * var(--u)) 20px auto; opacity: 1; pointer-events: none;
  }
  #section-3 .margin-art { float: left; margin: 0 18px 12px calc(-8 * var(--u)); max-width: calc(28 * var(--u)); }

  .footer-floral {
    position: relative; display: block; float: none;
    width: clamp(110px, calc(35 * var(--u)), 160px); max-width: 42%; height: auto;
    margin: 22px 0 0 auto; object-fit: contain; opacity: 1; pointer-events: none;
  }

  .quiet-link, .purchase-btn {
    display: inline-flex; margin: 13px 0; padding: 14px 23px; border-radius: 100px;
    color: #fff; background: #920013; text-decoration: none;
    font: 600 12px Quicksand, sans-serif; letter-spacing: .04em;
  }

  /* Kaufkarte (v1.0.2) – Mobile: nahezu volle Breite */
  .editorial-section.offer { padding-left: 4%; padding-right: 4%; }
  .page-continuation .offer-title { text-align: center; letter-spacing: -.04em; }
  .offer-card { padding: 34px 22px 28px; border-radius: 12px; }
  .page-continuation .offer-card .offer-price { font-size: 58px; margin: 0; }
  .page-continuation .offer-card .offer-sub { font-size: 22px; margin: 0 0 16px; } /* v1.0.5 */
  .page-continuation .offer-card .checkout-label { font-size: 11px; margin: 0 0 12px; }
  .page-continuation .offer-card .offer-intro { margin: 32px 0 4px; font: 600 15px/1.5 Quicksand, sans-serif; }
  .page-continuation .offer-list li { font-size: 15px; line-height: 1.55; padding: 12px 0; }
  .offer-card .checkout { max-width: 100%; }

  .step { border-top: 1px solid #b9aaa0; padding: 18px 0; }
  .step + .endnote { margin-top: 36px; } /* v1.0.2: mehr Abstand nach Schritt 04 */

  /* FAQ · goldenes + / − wie V6 */
  .faq-section details { border-bottom: 1px solid #d0b79e; padding: 0; }
  .faq-section details:first-child { border-top: 1px solid #d0b79e; }
  .faq-section summary {
    position: relative; list-style: none; cursor: pointer; padding: 17px 28px 17px 0;
    font: 22px/1.2 Oranienbaum, serif; letter-spacing: -.02em;
  }
  .faq-section summary::-webkit-details-marker { display: none; }
  .faq-section summary::marker { content: ''; }
  .faq-section summary::after { content: '+'; position: absolute; right: 0; top: 14px; font: 26px Oranienbaum, serif; color: #b78a51; }
  .faq-section details[open] summary::after { content: '−'; }
  .faq-section details p { margin: 0; padding: 0 8px 18px 0; font-size: 15px; }

  .early-countdown { margin: 22px 0 30px; }
  .early-countdown .count-label { display: block; font: 600 11px Quicksand, sans-serif; letter-spacing: .12em; }
  .early-countdown strong { display: block; margin: 6px 0; font: 32px/1.2 Oranienbaum, serif; color: #950013; }
  .early-countdown small { font: 12px Quicksand, sans-serif; }
  #section-9 { padding-top: 125px; }

  .end-section { background: #182A20; color: #fff; text-align: center; }
  .page-continuation .end-section h2 { color: #fff; }

  /* Footer */
  .juno-footer { display: grid; gap: 20px; padding: 45px 6% 28px; text-align: center; background: #f5f1eb; }
  .juno-footer a { color: #213720; }
  .juno-orn { display: none; }
  .juno-footer-icons { display: flex; justify-content: center; gap: 24px; }
  .juno-footer-icons a { display: flex; align-items: center; gap: 6px; font: 12px Quicksand, sans-serif; text-decoration: none; }
  .juno-footer svg { width: 17px; height: 17px; }
  .page-continuation .juno-footer-copy { font: 11px/1.6 Quicksand, sans-serif; }
  .juno-footer-wordmark { font: 70px Oranienbaum, serif; color: #dfd4cd; letter-spacing: -.09em; }

  /* ─── HINTER JUNO · gepinntes horizontales Magazin ──────── */
  .hz { position: relative; isolation: isolate; height: 430svh; padding: 0; background: #182A20; overflow: visible; }
  .hz-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
  .hz-viewport { width: 100%; height: 100%; display: flex; align-items: center; }
  .hz-track {
    display: flex; align-items: center; gap: calc(5 * var(--u)); width: max-content;
    padding-left: calc(7 * var(--u)); will-change: transform;
  }
  .hz-panel { flex: 0 0 calc(85 * var(--u)); width: calc(85 * var(--u)); }
  .hz-card {
    position: relative; display: block; isolation: isolate; overflow: hidden;
    height: min(88svh, 790px); border-radius: 22px; background: #f5f1eb; box-shadow: 0 15px 45px #0004;
    padding: clamp(23px, calc(5 * var(--u)), 34px) clamp(20px, calc(5 * var(--u)), 28px) 0;
  }
  .hz-copy { position: relative; z-index: 3; }
  /* v1.0.2: Typografie für die finalen, längeren Kartentexte (mind. 14 px Fließtext) */
  .page-continuation .hz-card h2 { font-size: calc(clamp(25px, calc(6.7 * var(--u)), 33px) * var(--hz-mfs, 1)); line-height: 1.1; letter-spacing: -.04em; margin-bottom: clamp(14px, calc(3 * var(--u)), 20px); max-width: 100%; }
  .page-continuation .hz-card p { position: relative; z-index: 2; font-size: calc(clamp(14px, calc(3.8 * var(--u)), 15.5px) * var(--hz-mfs, 1)); line-height: 1.55; margin-bottom: .75em; }
  .page-continuation .hz-card p:last-child { margin-bottom: 0; }
  .hz-art {
    position: absolute; inset: auto 0 0 auto; z-index: 1; display: block;
    width: min(70%, 275px); height: auto; max-height: 37%;
    object-fit: contain; object-position: bottom right; opacity: 1; pointer-events: none;
    transform: scale(var(--zoom, 1)); transform-origin: bottom right; will-change: transform;
  }
  .hz-panel:first-child .hz-art { width: min(62%, 245px); max-height: 30%; }
  .hz-bottom { display: none; }

  /* ─── ORAKELKARTEN ─────────────────────────────────────── */
  .oracle { position: relative; isolation: isolate; height: 215svh; padding: 0; background: #182A20; overflow: visible; }
  /* v1.0.4: durchgehend dunkelgrüne Samtfläche (vorher oben 28 % grün,
     darunter creme). Keine cremefarbene Ebene mehr. */
  .oracle-sticky {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
    background: #182A20;
  }
  .oracle-stage { position: absolute; inset: 0; }
  /* Samttextur über die gesamte Szenenfläche, unter den Karten.
     Fehlt die Datei, bleibt die Fläche einfarbig grün (background-color). */
  .oracle-sticky::before {
    content: ''; position: absolute; inset: 0;
    background-color: #182A20; background-size: cover; background-position: center;
    background-repeat: no-repeat; pointer-events: none;
  }
  .oracle-sticky::before { background-image: url("../assets/oracle/oracle-table-texture.webp"); }
  .oracle-card {
    position: absolute; left: var(--mx); top: var(--my);
    width: clamp(65px, calc(19 * var(--u)), 104px); height: auto; aspect-ratio: 539 / 824;
    border-radius: 10px; overflow: hidden; background: #e69ac7; box-shadow: 0 6px 15px #33251e33;
    transform: translate(-50%, -50%) translateY(-110svh); opacity: 0; will-change: transform, opacity;
  }
  .oracle-card img { display: block; width: 100%; height: 100%; object-fit: contain; }

  /* v1.1.1: Die frühere Regel für „unter 760 px Höhe“ ist entfallen –
     das kompakte Szene-02-Layout gilt jetzt immer (siehe oben). */
  @media (max-height: 520px) {
    .s2-copy { padding-top: 6%; }
    .s2-copy h2 { font-size: 30px; }
    .s2-body { margin-top: 14px; font-size: 14px; line-height: 1.45; }
    .s2-body .s2-text { margin-bottom: 1.45em; }
  }

  /* v1.0.1 · Schmale Smartphones (unter 360 px, z. B. 320 px):
     FAQ-Fragen weichen dem Papierstreifen aus, statt das goldene + darunter
     zu legen. Hero- und Szene-02-Bilder passt scroll-scenes.js an. */
  @media (max-width: 359px) {
    .faq-section details { display: flow-root; }
  }

  /* Sehr kleine Smartphones (V6) */
  @media (max-width: 365px) {
    .title-area .heading { font-size: 10.7vw; }
    .title-area .intro { font-size: 21px; }
  }
  /* Flache Bildschirme (V6) */
  @media (max-height: 680px) {
    .hz-card { height: 92svh; }
    /* v1.0.2: keine Schriftverkleinerung mehr (vorher 12,5 px); höhere Karten
       bekommen stattdessen eine Lesestrecke (scroll-scenes.js) */
    .hz-art, .hz-panel:first-child .hz-art { max-height: 30%; }
  }

  /* ─── STATISCHE FASSUNG (ohne JS / Bewegung reduzieren) ───── */
  .static .story { height: auto; }
  .static .stage { position: relative; height: auto; overflow: visible; }
  .static .hero-frame { position: relative; height: 100svh; overflow: hidden; }
  .static .next-overlay { position: relative; inset: auto; height: 100svh; transform: none; }
  .static .frag, .static .s2-frag, .static .title-area, .static .hz-art, .static .oracle-card { will-change: auto; }

  .static .hz, .hz-stacked .hz { height: auto; }
  .static .hz-sticky, .hz-stacked .hz-sticky { position: relative; height: auto; display: block; overflow: visible; }
  .static .hz-viewport, .hz-stacked .hz-viewport { display: block; height: auto; }
  .static .hz-track, .hz-stacked .hz-track { display: block; width: 100%; padding: 25px 7%; transform: none; }
  .static .hz-panel, .hz-stacked .hz-panel { width: 100%; }
  .static .hz-card, .hz-stacked .hz-card { height: auto; min-height: 580px; padding-bottom: 210px; margin-bottom: 20px; }
  .static .hz-art, .static .hz-panel:first-child .hz-art,
  .hz-stacked .hz-art, .hz-stacked .hz-panel:first-child .hz-art { max-height: 190px; }

  .static .oracle { height: auto; }
  .static .oracle-sticky { position: relative; height: 310px; }
  .static .oracle-card { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ma)); }
  .static #section-9 { padding-top: 70px; }
}

/* ─── v1.0.2 · Countdown vollständig lesbar (ab 360 px; darunter weichen die
   Bilder per scroll-scenes.js aus) ───
   1. Pfau steht frei über der Countdown-Zeile (vorher 6 % unter dem Rand).
   2. Sanfter Verlauf ins Grün am unteren Rand: Wolke und Venus-Sockel treten
      hinter der Zeile zurück. Liegt unter Titel/Countdown, über den Bildern.
   Komposition und Bewegung sonst unverändert. */
/* v1.0.9: Hero-Countdown entfernt → Pfau wieder in seiner V6-Lage
   (bottom −6 %, Grundregel oben) und kein Lesbarkeitsverlauf mehr. */

/* ─── Zentrierte 430-px-Spalte ab 650 px (Tablet hochkant) ─── */
@media (orientation: portrait) and (min-width: 650px) {
  :root { --u: 4.3px; }
  body { background: #d8d2c9; }
  main { max-width: 430px; margin: 0 auto; }
  .hz-track { gap: 20px; padding-left: 30px; }
  .hz-panel { flex-basis: 365px; width: 365px; }
  .hz-art { width: 63%; }
  .hz-panel:first-child .hz-art { width: min(62%, 245px); } /* V6: erste Karte behält ihre Regel */
  .editorial-section, .end-section { padding-left: 30px; padding-right: 30px; }
  .oracle-card { width: 90px; }
  .static .hz-track, .hz-stacked .hz-track { padding: 25px 7%; }
  .static .hz-panel, .hz-stacked .hz-panel { width: 100%; }
}

/* ─── v1.0.3 · Verbindliche Laufweite für Oranienbaum ───────────────
   Jedes Oranienbaum-Element: letter-spacing −0.04em (Desktop und Mobile).
   Ausnahme: JUNO-Wortmarke im Footer (behält ihre Markenlaufweite).
   Quicksand bleibt unverändert. !important, weil diese Regel bewusst alle
   bisherigen Einzelwerte (0 bis −0.045em) ersetzt. */
.title-area .heading,
.title-area .intro,
.hero-countdown strong,
.s2-copy h2,
.editorial-inner h2,
.step h3,
.offer-title,
.offer-card .offer-price,
.offer-card .offer-sub,
.hz-card h2,
.early-countdown strong,
.faq-section summary,
.faq-section summary::after,
.end-inner h2 { letter-spacing: -.04em !important; }
/* Der rote Schlusssatz „Und jede der zwölf Nächte …“ ist nur auf Desktop Oranienbaum */
@media (orientation: landscape) {
  .editorial-body .endnote { letter-spacing: -.04em !important; }
}

/* ─── v1.0.4 · Szene 02 kompakter (Desktop und Mobile) ─────────────
   Der nächste Abschnitt schiebt sich über den leeren, gleichfarbigen
   Streifen unter dem Bildensemble von Szene 02. --s2-cut berechnet
   scroll-scenes.js (0 = wie bisher). Hero-Animation unverändert. */
.page-continuation { position: relative; z-index: 31; margin-top: calc(-1 * var(--s2-cut, 0px)); }
/* Mobile: oberer Innenabstand des nächsten Abschnitts durchsichtig
   (--s2-clear), damit Statue und Pfau nicht abgedeckt werden. */
@media (orientation: portrait) {
  .page-continuation { background: linear-gradient(to bottom, transparent 0, transparent var(--s2-clear, 0px), #f5f1eb var(--s2-clear, 0px)); }
}

/* ─── v1.0.5 · Zusätzliche Buchungsknöpfe (Mobile) ────────────────
   Gleiche Komponente .purchase-btn wie die bestehenden Kaufknöpfe. */
@media (orientation: portrait) {
  .section-cta { margin-top: 6px; }
  /* CTA B: Knopf links neben der Blume, beide unten im Abschnitt.
     Wird es zu schmal, rutscht die Blume unter den Knopf (nichts wird abgeschnitten). */
  .cta-floral {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 14px; margin-top: 22px;
  }
  .cta-floral .purchase-btn { margin: 0; flex: none; }
  .cta-floral .footer-floral { margin: 0 0 0 auto; flex: none; }
  /* CTA C: grünes Band nach „Hinter JUNO“, vor den Orakelkarten */
  .hz-cta { position: relative; background: #182A20; text-align: center; padding: 22px 7% 58px; }
  .hz-cta .purchase-btn { margin: 0; }
}

/* ─── v1.0.6 · „Ein Moment, auf den du dich freuen kannst“ ───────────
   Farblich invertiert (Desktop und Mobile): einfarbig JUNO-Grün, ohne
   Textur, Überschrift und Text im Cremeton, Buchungsknopf bleibt rot.
   Ohne Blume steht die Überschrift höher. Den Übergang aus Szene 02
   berechnet weiterhin scroll-scenes.js (--s2-cut): Die grüne Fläche
   beginnt knapp unter Statue und Pfau. */
#section-3 { background: #182A20; color: #f5f1eb; border-top: 0; }
#section-3 h2, #section-3 .editorial-inner h2 { color: #f7f3ed; }
#section-3 p, #section-3 .editorial-body { color: #f5f1eb; }
@media (orientation: landscape) {
  #section-3 { padding-top: clamp(64px, 7vw, 104px); }
}
@media (orientation: portrait) {
  #section-3 { padding-top: 48px; }
  .page-continuation #section-3 h2 { color: #f7f3ed; }
}

/* ─── v1.0.8 · „Das Early-Bird-Special“ in Kartenpink ──────────────
   Hintergrund #E99BCA = Grundfarbe der Orakelkarten (oracle-back.webp,
   gemessen: ca. 63 % aller Pixel und die gesamte Kartenfläche am Rand).
   Text, Countdown und Knopf in JUNO-Grün #182A20, Knopfschrift Cremeton. */
#section-9 { background: #E99BCA; color: #182A20; border-top: 0; }
#section-9 h2, #section-9 .editorial-inner h2,
#section-9 p, #section-9 strong, #section-9 .editorial-body,
#section-9 .early-countdown .count-label, #section-9 .early-countdown strong,
#section-9 .early-countdown small { color: #182A20; }
#section-9 .purchase-btn { background: #182A20; color: #f5f1eb; transition: background-color .2s ease, color .2s ease; }
#section-9 .purchase-btn:hover { background: #0b1510; color: #fff; }
#section-9 .purchase-btn:focus-visible { outline: 2px solid #182A20; outline-offset: 3px; background: #0b1510; color: #fff; }
/* Mobile: Countdown kompakter und immer in einer Zeile (Größe folgt der Breite) */
@media (orientation: portrait) {
  .page-continuation #section-9 h2 { color: #182A20; }
  #section-9 .early-countdown strong { font-size: min(26px, calc(6.2 * var(--u))); white-space: nowrap; margin: 4px 0; }
  #section-9 .early-countdown { margin: 18px 0 24px; }
}

/* ─── v1.0.12 · Mobile: Szene-02-Karte unten bereits im Grün des Folgeabschnitts ───
   --s2-green-top setzt scroll-scenes.js (knapp unter Statue und Pfau). Ohne Wert
   bleibt die Karte ganz creme (z. B. „Bewegung reduzieren“). */
@media (orientation: portrait) {
  .next-overlay {
    background: linear-gradient(to bottom, #f5f1eb 0, #f5f1eb var(--s2-green-top, 100%), #182A20 var(--s2-green-top, 100%));
  }
}

/* ─── v1.0.13 · „Ein Ritual, das in dein Leben passt“ ──────────────
   Gleiche Farben wie „Ein Moment …“ (Desktop und Mobile): einfarbig
   JUNO-Grün, Überschrift und Text im Cremeton. Kein Buchungsknopf. */
#section-6 { background: #182A20; color: #f5f1eb; border-top: 0; }
#section-6 h2, #section-6 .editorial-inner h2 { color: #f7f3ed; }
#section-6 p, #section-6 strong, #section-6 .editorial-body { color: #f5f1eb; }
@media (orientation: portrait) {
  .page-continuation #section-6 h2 { color: #f7f3ed; }
}

/* v1.0.15 · Begleitbuch: Hinweis statt Link */
.page-continuation .book-soon { margin-top: 6px; color: #81333c; font-weight: 600; letter-spacing: .04em; }

/* ─── v1.0.17 · „Jeden Tag eine neue Tür“ (Mobile) ───────────────────
   Das Papier beginnt direkt an der Oberkante des Abschnitts, also nahtlos
   am grünen Abschnitt darüber (wie auf Desktop). Größe und Lage rechts
   unverändert; der Text fließt weiter daneben. −74 px = oberer Innenabstand. */
@media (orientation: portrait) {
  #section-4 .art-paper { margin-top: -74px; }
}