/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Schriften (self-hosted) ---- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face { /* latin-ext für scene7 LT/TR-Glyphen */
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face { /* nur noch für die Unterschrift im Brief */
  font-family: 'Caveat';
  src: url('../assets/fonts/caveat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Farb-Variablen (dunkel & leuchtend; Palette wandert mit der Story) ---- */
:root {
  --paper: #0b0b12;   /* dunkle Nacht-Basis */
  --ink:   #f2e7d6;   /* helle, warme Schrift/Striche */
  --sea:   #6fc6ff;   /* Karolinas Augen — leuchtendes Meerblau */
  --warm:  #f0b45f;   /* goldene Wärme */
  --sat:   1;         /* Sättigung von Figuren/Text (0 = grau) */
  --bg-bright: .5;    /* Helligkeit des Baum-Hintergrunds */
  --bg-sat:    .9;    /* Sättigung des Baum-Hintergrunds */
  --bg-hue:    0deg;  /* Farbdrehung (kalt in der dunklen Zeit) */
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Lebendiger Baum-Hintergrund (animiertes Kirschbaum-Video) ---- */
#bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% bottom;             /* Baum im Blick, Hügel unten */
  filter: brightness(var(--bg-bright)) saturate(var(--bg-sat)) hue-rotate(var(--bg-hue));
  will-change: filter;
}
/* Vignette + Verdunklung für Textlesbarkeit */
#bg-veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(6,6,12,.72) 100%),
    linear-gradient(to bottom, rgba(6,6,12,.35) 0%, rgba(6,6,12,.15) 35%, rgba(6,6,12,.7) 100%);
}

/* ---- Text-Stile ---- */
.copy {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.12rem, 5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .004em;
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
  color: var(--ink);
  filter: saturate(var(--sat));
  text-shadow: 0 1px 12px rgba(6,6,12,.9), 0 0 30px rgba(6,6,12,.6);
}
.display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 12vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(6,6,12,.85), 0 0 26px rgba(240,180,95,.25);
}
.will-reveal { opacity: 0; }   /* wird per JS eingeblendet */

/* ---- Eure Pixel-Figuren (auf dunkel, mit warmem Glow) ---- */
.fig {
  height: clamp(200px, 44vh, 330px);
  width: auto;
  overflow: visible;
  filter: saturate(var(--sat)) drop-shadow(0 0 12px rgba(240,180,95,.26))
          drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.fig .stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig .beard { stroke-width: 2; opacity: .5; }      /* zarte Stoppeln */
.fig .hair  { stroke-width: 3; }
.fig .dot   { fill: var(--ink); }
.fig .eye   { fill: var(--sea); filter: drop-shadow(0 0 4px var(--sea)); } /* leuchtendes Meerblau */

.fig-pair { display: flex; align-items: flex-end; justify-content: center; gap: 8vw; }
.fig-pair figcaption { font-size: .95rem; opacity: .55; margin-top: .4rem; }
.fig-col { display: flex; flex-direction: column; align-items: center; }

/* ---- Szenen-Bühnen ---- */
.scene-inner { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; width: 100%; }
.stage { position: relative; width: min(92vw, 520px); height: 42vh; max-height: 400px; }
.stage .fig { position: absolute; bottom: 0; color: var(--ink); }

/* weit auseinander (Szene 1) */
.stage--apart .fig--ertac { left: 2%; }
.stage--apart .fig--karolina { right: 2%; }

/* wartend (Szene 2): Karolina mittig-präsent, Ertac klein am Rand */
.stage--wait .fig--karolina { left: 50%; transform: translateX(-50%); }
.stage--wait .fig--ertac { left: 4%; height: clamp(150px, 30vh, 220px); opacity: .8; }

/* Paar-Portrait (Pixel) */
.couple-stage { display: grid; place-items: center; }
.couple-img {
  width: min(78vw, 380px);
  height: auto;
  image-rendering: pixelated;              /* knackige Pixel-Kanten */
  filter: saturate(var(--sat)) drop-shadow(0 0 26px rgba(240,180,120,.30))
          drop-shadow(0 10px 34px rgba(0,0,0,.55));
}

/* Auto-Bild (Szene 3) */
.car-stage { display: grid; place-items: center; }
.car-img {
  width: min(86vw, 460px);
  height: auto;
  filter: saturate(var(--sat)) drop-shadow(0 0 22px rgba(150,180,220,.28))
          drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.car-stage .heartbeat { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  color: var(--sea); z-index: 2; }

/* Szenen-Illustration (z.B. Auto in Szene 3) */
.stage--illu { display: grid; place-items: center; }
.scene-illu { width: min(88vw, 380px); height: auto; overflow: visible; }
.scene-illu .stroke { fill: none; stroke: var(--ink); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round; }
.scene-illu .car-body { fill: color-mix(in srgb, var(--paper) 82%, var(--warm) 30%); }
.scene-illu .glass { fill: color-mix(in srgb, var(--paper) 70%, var(--ink) 8%); }
.scene-illu .lamp { fill: var(--warm); }
.scene-illu .eye { fill: var(--sea); }
.scene-illu .dot { fill: var(--ink); }
.stage--illu .heartbeat { position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  color: var(--sea); }

/* zusammen / Hand in Hand (Szene 4) */
.stage--together .fig--ertac { left: 30%; }
.stage--together .fig--karolina { left: 46%; }

/* eng beieinander (Szene 6) */
.stage--close .fig--ertac { left: 32%; }
.stage--close .fig--karolina { left: 44%; }

/* endlich zusammen (Zwischen-Station) */
.stage--unite .fig--ertac { left: 33%; }
.stage--unite .fig--karolina { left: 45%; }

/* dunkle Zeit (Szene 5) */
.stage--dark .fig--ertac { left: 24%; z-index: 2; }
.stage--dark .fig--karolina { left: 44%; z-index: 2; }
.dark-glow {
  position: absolute; left: 42%; bottom: 4%; width: 62%; aspect-ratio: 1;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(245,190,120,.55) 0%, rgba(240,160,110,.22) 34%, transparent 66%);
  filter: blur(8px);
}

/* Finale (Szene 7) */
.final { position: relative; }
.sunrise {
  position: absolute; left: -6vw; right: -6vw; bottom: -14vh; height: 74%; z-index: -1;
  pointer-events: none; transform-origin: 50% 100%;
  background: radial-gradient(120% 100% at 50% 100%,
    rgba(246,182,74,.5) 0%, rgba(240,140,90,.22) 32%, transparent 62%);
  filter: blur(6px);
}
.final-msg { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.final-lead { text-wrap: balance; }
.final-lead .fw { display: inline-block; }
.final-alt { font-size: clamp(1rem, 4.6vw, 1.28rem); line-height: 1.5; opacity: .84;
  font-style: italic; margin: 0; max-width: 30ch; }
.final-alt:first-of-type { margin-top: .9rem; }

/* Alter-Zähler (Szene 2) */
.age-count { font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(3.4rem, 20vw, 6.5rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--warm); }

/* ---- Einstiegs-Screen ---- */
.intro-card { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.intro-heart { color: var(--warm); opacity: .9; }
.intro-title { color: var(--ink); }
.intro-hint  { font-family: 'Manrope', sans-serif; font-weight: 500; color: var(--ink);
  opacity: .55; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.cta {
  margin-top: 1rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 1.02rem;
  color: var(--paper);
  background: var(--warm);
  border: none;
  border-radius: 999px;
  padding: .85rem 1.8rem;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover, .cta:active { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.24); }

/* ---- Liebes-Passwort-Gate — Liquid-Glass-Feld ---- */
.gate-card {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  width: min(88vw, 440px); position: relative;
}
@keyframes gate-breathe {
  0%, 100% { text-shadow: 0 2px 18px rgba(6,6,12,.85), 0 0 22px rgba(240,180,95,.20); }
  50%      { text-shadow: 0 2px 18px rgba(6,6,12,.85), 0 0 34px rgba(240,180,95,.42); }
}
.gate-q {
  font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.14;
  letter-spacing: -.005em; text-align: center;
  animation: gate-breathe 5.5s ease-in-out infinite;
}

.gate-field {
  position: relative; width: 100%; min-height: 66px; border-radius: 20px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.28),
              0 12px 34px rgba(0,0,0,.46), 0 0 0 rgba(111,198,255,0);
  transition: border-color .45s ease, box-shadow .55s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.gate-field::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(140% 90% at 50% -20%, rgba(255,255,255,.18) 0%, transparent 55%);
}
.gate-input {
  position: relative; z-index: 2; width: 100%;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500;
  font-size: 1.15rem; letter-spacing: .01em; text-align: left; color: var(--ink);
  background: transparent; border: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--sea) 22%, transparent); border-radius: 0;
  padding: 1.55rem 1.15rem .6rem; outline: none; caret-color: var(--sea);
}
.gate-label {
  position: absolute; z-index: 3; left: 1.2rem; top: 50%;
  transform: translateY(-50%); transform-origin: left center;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.16rem; line-height: 1;
  color: color-mix(in srgb, var(--sea) 55%, #ffffff); opacity: .92; pointer-events: none;
  will-change: transform;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), color .3s ease, opacity .3s ease;
}
.gate-input:focus + .gate-label,
.gate-input:not(:placeholder-shown) + .gate-label {
  transform: translateY(-1.2rem) scale(.72); color: var(--sea); opacity: 1;
}
.gate-sheen {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 150% 0; opacity: 0; transition: opacity .3s ease;
}
.gate-field:focus-within {
  border-color: color-mix(in srgb, var(--sea) 58%, transparent);
  transform: translateY(-1px); animation: gate-glow 3.2s ease-in-out infinite;
}
.gate-field:focus-within .gate-sheen { opacity: 1; animation: gate-sheen 2.6s cubic-bezier(.4,0,.2,1) .15s infinite; }
@keyframes gate-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.26),
             0 14px 40px rgba(0,0,0,.5), 0 0 20px rgba(111,198,255,.28); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.26),
             0 16px 46px rgba(0,0,0,.52), 0 0 34px rgba(111,198,255,.48); }
}
@keyframes gate-sheen { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@keyframes gate-flash { 0%, 100% { color: var(--sea); } 50% { color: color-mix(in srgb, var(--sea) 60%, #ffffff); } }
.gate-input.flash-hint + .gate-label { animation: gate-flash .9s ease; }
.gate-wrong { font-size: .95rem; opacity: .7; font-style: italic; color: color-mix(in srgb, var(--ink) 82%, var(--sea)); }
.gate-sound { margin-top: .2rem; font-size: .82rem; letter-spacing: .03em; color: var(--ink); opacity: .58; }
@media (prefers-reduced-motion: reduce) {
  .gate-q { animation: none; }
  .gate-field, .gate-field:focus-within { animation: none; transition: border-color .2s ease; }
  .gate-field:focus-within { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.26),
    0 14px 40px rgba(0,0,0,.5), 0 0 26px rgba(111,198,255,.4); }
  .gate-sheen, .gate-field:focus-within .gate-sheen { animation: none; opacity: 0; }
  .gate-label { transition: transform .12s ease, color .2s ease; }
  .gate-input.flash-hint + .gate-label { animation: none; color: var(--sea); }
}

/* ===== Minispiel (Ende) ===== */
#minigame { padding: 0; position: relative; overflow: hidden; touch-action: none; }
.mg-canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.mg-ui { position: absolute; inset: 0; pointer-events: none; }
.mg-hud {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); left: 50%; transform: translateX(-50%);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: rgba(6,6,12,.5); padding: .3rem 1.1rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mg-hud::before { content: '🧟 '; }
.mg-hint {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 28px); left: 0; right: 0;
  text-align: center; color: var(--ink); opacity: .72; font-size: .95rem; padding: 0 8vw;
  transition: opacity .6s ease; pointer-events: none;
}
.mg-start, .mg-win {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.3rem; text-align: center; padding: 0 8vw; pointer-events: auto;
  background: radial-gradient(120% 90% at 50% 42%, rgba(11,11,18,.4) 0%, rgba(6,6,12,.82) 100%);
}
.mg-start-title, .mg-win-text { color: var(--ink); font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.2; }
.mg-win-text { max-width: 22ch; text-shadow: 0 2px 18px rgba(6,6,12,.85), 0 0 26px rgba(240,180,95,.25); }
.mg-start-sub { color: var(--ink); opacity: .8; font-size: 1.05rem; }
.mg-start.hide { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.mg-win { opacity: 0; transition: opacity 1s ease; }
.mg-win.show { opacity: 1; }
.mg-win[hidden] { display: none; }

/* ===== Ton-Check (nach dem Passwort) ===== */
.sc-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center;
  padding: 8vh 8vw; text-align: center;
  background: radial-gradient(120% 90% at 50% 42%, rgba(11,11,18,.65) 0%, rgba(6,6,12,.94) 100%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sc-card { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 32ch; }
.sc-icon { font-size: 2.6rem; animation: sc-pulse 1.8s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.sc-title { color: var(--ink); font-size: clamp(1.9rem, 8vw, 2.5rem); }
.sc-sub { color: var(--ink); opacity: .8; font-size: 1rem; line-height: 1.5; }
.sc-yes { margin-top: .3rem; }
.sc-no { background: none; border: none; color: var(--ink); opacity: .55;
  font-family: 'Manrope', sans-serif; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.sc-tip { color: var(--sea); opacity: .92; font-size: .92rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .sc-icon { animation: none; } }

/* ===== Liebesbrief (öffnet sich nach richtiger Antwort) ===== */
.ll-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: max(6vh, env(safe-area-inset-top)) 6vw max(6vh, env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 42%, rgba(11,11,18,.55) 0%, rgba(6,6,12,.9) 100%);
  opacity: 0;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ll-glow {
  position: absolute; left: 50%; top: 46%;
  width: min(120vw, 760px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(240,180,95,.55) 0%, rgba(240,180,95,.18) 34%, transparent 66%);
  filter: blur(12px);
}
.ll-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2.2rem; width: 100%; }
.ll-envelope {
  position: relative; width: min(82vw, 360px); aspect-ratio: 3 / 2;
  perspective: 1100px; transform-style: preserve-3d;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.ll-env-back { position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(160deg, #e8c98f 0%, #d7ac63 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ll-env-front { position: absolute; inset: 0; z-index: 3; border-radius: 10px;
  background: linear-gradient(160deg, #e3c079 0%, #cfa254 100%);
  clip-path: polygon(0 22%, 50% 60%, 100% 22%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.ll-flap { position: absolute; left: 0; top: 0; width: 100%; height: 62%; z-index: 4;
  transform-origin: 50% 0; transform-style: preserve-3d;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, #eccd8f 0%, #dcb367 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  backface-visibility: hidden; }
.ll-seal { position: absolute; left: 50%; top: 44%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; color: #7c2d17;
  background: radial-gradient(circle at 38% 34%, #f2b6a0, #c0562f 70%);
  box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 0 6px rgba(0,0,0,.25); }
.ll-seal svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)); }
.ll-letter { position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(82vw, 360px); padding: 1.6rem 1.4rem 1.8rem; border-radius: 6px;
  background: linear-gradient(180deg, #f7efdc 0%, #efe3c6 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,90,40,.15);
  text-align: center; will-change: transform; }
.ll-letter::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(120,90,40,.08) 33px 34px); opacity: .5; }
.ll-letter-inner { position: relative; z-index: 1; }
.ll-greeting { font-size: clamp(1.7rem, 7.5vw, 2.1rem); color: #4a3320; margin-bottom: .5rem; }
.ll-line { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 5.6vw, 1.6rem); line-height: 1.5; letter-spacing: 0; color: #5a4227; margin: .18rem 0; }
.ll-line .accent { color: #b6702a; font-style: italic; }
.ll-sign { font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 2.1rem); color: #4a3320; margin-top: 1.1rem; }
.ll-weiter { margin-top: .4rem; opacity: 0; }

/* ---- Atmosphäre-Canvas (Regen / Partikel) ---- */
#fx {
  position: fixed;
  inset: 0;
  z-index: -1;                /* hinter Text/Figuren, über dem Papier */
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
/* ---- Herz-Canvas (Drift, Burst, Finger-Spur) ---- */
#fx-hearts {
  position: fixed;
  inset: 0;
  z-index: -1;                /* hinter Text/Figuren, über Regen */
  pointer-events: none;       /* Berührungen gehen an die Seite durch */
}

/* ---- Szenen: je eine bildschirmfüllende Bühne ---- */
.scene {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 12vh 6vw;
  padding-bottom: max(12vh, env(safe-area-inset-bottom));
  padding-top: max(12vh, env(safe-area-inset-top));
  text-align: center;
}

/* Platzhalter-Optik bis die echten Szenen kommen */
.scene[data-placeholder]::after {
  content: attr(data-placeholder);
  font-size: 1.1rem;
  letter-spacing: .05em;
  opacity: .35;
}