/* Layout: eine lange Schriftrolle von den Wolken ans Meer. Jede Region ist eine Welt mit eigenen Farben,
   Inhalt in einer Spalte bis 1240 px, Tageskarten zweispaltig um eine gewundene Mittelspur. */
:root {
  color-scheme: dark;
  --flag: #da251d;      /* Flaggenrot */
  --star: #f5c518;      /* Sternengold */
  --karst: #10211f;     /* Tiefgrün der vordersten Bergkette */
  --mustard: #f0bf4c;   /* Hanois Hauswände */
  --paper: #f1f3ec;     /* Logbuch-Papier */
  --chart: #fcfcfb;     /* Diagrammfläche */
  --font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Big Shoulders Display", "Big Shoulders", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-accent: "Spectral", Georgia, "Times New Roman", serif;
  --gut: clamp(16px, 4vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; background: var(--karst); }
body { margin: 0; font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.62; color: #f5efdd; background: var(--karst); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
body { overflow-wrap: break-word; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acc, var(--star)); outline-offset: 3px; border-radius: 4px; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: #fff; color: #111; padding: .5rem .9rem; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Welten ---------- */
.world { background: var(--bg); color: var(--ink); }
.w-karst   { --bg: #10211f; --ink: #f5efdd; --mut: #aab8a8; --acc: #f0bf4c; --on: #10211f; --card: #18302c; --line: rgba(245,239,221,.18); color-scheme: dark; }
.w-hanoi   { --bg: #f0bf4c; --ink: #17241f; --mut: #4c4720; --acc: #1f4d3f; --on: #f7e8b8; --card: #f6d27a; --line: rgba(23,36,31,.26); color-scheme: light; }
.w-hagiang { --bg: #1d2a5b; --ink: #f6f1fb; --mut: #bcc4e8; --acc: #f2a6c2; --on: #1d2a5b; --card: #27366f; --line: rgba(246,241,251,.2); color-scheme: dark; }
.w-ninhbinh{ --bg: #bcd27a; --ink: #12302a; --mut: #33503a; --acc: #0f5f4a; --on: #ecf4c9; --card: #cddf93; --line: rgba(18,48,42,.26); color-scheme: light; }
.w-catba   { --bg: #06444f; --ink: #e8fbf8; --mut: #a8d9d3; --acc: #6fe0d2; --on: #06343d; --card: #0a5764; --line: rgba(232,251,248,.2); color-scheme: dark; }
.w-dalat   { --bg: #2a1a12; --ink: #f7ecdc; --mut: #ccb79f; --acc: #f5c518; --on: #2a1a12; --card: #3b271c; --line: rgba(247,236,220,.2); color-scheme: dark; }
.w-mekong  { --bg: #27134a; --ink: #faedd3; --mut: #c7b4df; --acc: #ff9f3f; --on: #27134a; --card: #36205f; --line: rgba(250,237,211,.2); color-scheme: dark; }
.w-condao  { --bg: #d6f2e8; --ink: #06343b; --mut: #2b5e5c; --acc: #007d74; --on: #ecfbf5; --card: #f5ebd0; --line: rgba(6,52,59,.22); color-scheme: light; }
.w-saigon  { --bg: #0e0b16; --ink: #f6f3ff; --mut: #aea7c9; --acc: #ff4d8d; --on: #17081a; --card: #1c1730; --line: rgba(246,243,255,.18); color-scheme: dark; }
.w-paper   { --bg: #f1f3ec; --ink: #14201d; --mut: #55605a; --acc: #b81f18; --on: #fff6e6; --card: #fcfcfb; --line: rgba(20,32,29,.16); color-scheme: light; }
.w-night   { --bg: #0b1026; --ink: #eef1ff; --mut: #a9b2d6; --acc: #f7efc9; --on: #0b1026; --card: #151c3d; --line: rgba(238,241,255,.18); color-scheme: dark; }

/* ---------- Typo-Bausteine ---------- */
.big { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 11vw, 9.5rem); line-height: .92; letter-spacing: .005em; }
.kick { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); }
.lead { font-size: clamp(1.28rem, 2.5vw, 1.9rem); line-height: 1.32; font-weight: 500; }
.acc { font-family: var(--font-accent); font-style: italic; font-weight: 500; }
.sec { padding-block: clamp(56px, 9vw, 124px); }
.muted { color: var(--mut); }
.note { font-size: .86rem; color: var(--mut); }
.btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--acc); color: var(--on); border: 0; border-radius: 999px; padding: .62rem 1.15rem; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

/* ---------- Szenen ---------- */
.scene { position: relative; overflow: hidden; height: clamp(520px, 94svh, 1040px); container-type: size; isolation: isolate; }
.scene .lay { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.scene:not(.off) .lay, .scene:not(.off) .scene-head { will-change: transform; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: .13; -webkit-mask-image: linear-gradient(#000 74%, transparent 98%); mask-image: linear-gradient(#000 74%, transparent 98%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scene.off * { animation-play-state: paused !important; }
.scene-head { position: absolute; left: 0; right: 0; bottom: calc(max(var(--ridge) / 900 * 100cqh, var(--ridge) / 1600 * 100cqw) - .1em); padding-inline: var(--gut); color: var(--t, currentColor); --fs: clamp(5rem, 23.5cqw, 26rem); font-size: var(--fs); }
@media (max-aspect-ratio: 7/5) { .scene-head { bottom: calc(var(--rm, var(--ridge)) / 900 * 100cqh - .1em); } }
.scene-head.right { text-align: right; }
.scene-head.center { text-align: center; }
.scene-head.center .kick { text-shadow: 0 0 .5em #f0bf4c, 0 0 .2em #f0bf4c, 0 0 .1em #f0bf4c; }
.scene-head h2 { font-family: var(--font-display); font-weight: 900; font-size: 1em; line-height: .84; text-transform: uppercase; letter-spacing: .002em; text-wrap: nowrap; }
.scene-head .kick { display: block; font-size: clamp(.78rem, 1.3cqw, 1rem); color: var(--k, inherit); margin-bottom: calc(var(--fs) * .2); letter-spacing: .14em; }
.scene-head .kick span { opacity: .85; }
.neon h2 { text-shadow: 0 0 .05em #fff, 0 0 .16em #ff4d8d, 0 0 .42em #ff4d8d; }
.festival h2 { font-size: .93em; text-shadow: .024em .024em 0 #27134a; }

/* Animationen in den Szenen */
.drift { animation: drift 70s ease-in-out infinite alternate; }
.drift.slow { animation-duration: 120s; }
@keyframes drift { from { transform: translateX(-70px); } to { transform: translateX(90px); } }
.flock { animation: flock 46s linear infinite; }
@keyframes flock { from { transform: translateX(-340px); } to { transform: translateX(1500px); } }
.wing { animation: wing .75s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes wing { from { transform: scaleY(1); } to { transform: scaleY(.38); } }
.tw { animation: tw 4.6s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .12; } }
.train { animation: train 34s linear infinite; }
@keyframes train { from { transform: translateX(-400px); } to { transform: translateX(1800px); } }
.ride.r1 { animation: rideR 13s linear infinite; }
.ride.r2 { animation: rideL 9s linear infinite; }
.ride.r3 { animation: rideR 31s linear infinite -11s; }
@keyframes rideR { from { transform: translateX(-160px); } to { transform: translateX(1760px); } }
@keyframes rideL { from { transform: translateX(1760px); } to { transform: translateX(-160px); } }
.bob { animation: bob 4.8s ease-in-out infinite; }
.bob-s { animation: bob 2.6s ease-in-out infinite; }
.sail { animation: sail 8s ease-in-out infinite; transform-origin: 0 0; }
@keyframes bob { 50% { transform: translateY(5px) rotate(.5deg); } }
@keyframes sail { 50% { transform: translateY(7px) rotate(-1.4deg); } }
.rip { animation: rip 6.5s ease-in-out infinite; }
@keyframes rip { 50% { transform: translateX(22px); opacity: .18; } }
.oar, .pad { animation: oar 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 0; }
.pad { transform-origin: center; }
@keyframes oar { 50% { transform: rotate(14deg); } }
.fall { stroke-dasharray: 34 20; animation: fall 1s linear infinite; }
@keyframes fall { to { stroke-dashoffset: -54; } }
.lantern { animation-name: rise; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(-780px); opacity: 0; } }
.float { animation: bob 4.4s ease-in-out infinite; }
.shim { animation: shim 2.9s ease-in-out infinite; }
@keyframes shim { 50% { opacity: .12; transform: translateX(12px); } }
.paddle { animation: paddle .85s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 100% 0; }
@keyframes paddle { from { transform: rotate(-20deg); } to { transform: rotate(22deg); } }
.ray { animation: ray 8s ease-in-out infinite; }
@keyframes ray { 50% { opacity: .34; } }
.flap { animation: flap 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 100%; }
@keyframes flap { 50% { transform: rotate(24deg); } }
.trail { stroke-dasharray: 130 340; animation: trail 3.2s linear infinite; }
.trail.rev { animation-direction: reverse; }
@keyframes trail { to { stroke-dashoffset: -470; } }
.blink { animation: blink 2.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .08; } }
.bigmoon { will-change: transform; }

/* ---------- Hero ---------- */
.hero { --t: #10211f; height: max(100svh, 600px); max-height: none; --ridge: 214; }
.hero .scene-head { font-size: min(21.5cqw, 33cqh); padding-inline: clamp(14px, 3cqw, 48px); }
.hero h1 { font-family: var(--font-display); font-weight: 900; font-size: 1em; line-height: .88; text-transform: uppercase; padding-top: .2em; }
.hero h1 span { display: inline; }
/* Die Lücke zwischen den Wörtern gibt dem Akzent über dem Ố Platz */
.hero h1 span:first-child { display: block; margin-left: .18em; word-spacing: .17em; }
.hero-sub { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.15rem, 2.6cqw, 2.3rem); line-height: 1.1; margin-bottom: .35em; }
.hero-foot { position: absolute; z-index: 25; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) clamp(12px, 2.6cqh, 26px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 28px; color: #f5efdd; }
.count { display: flex; gap: clamp(10px, 2cqw, 26px); align-items: baseline; flex-wrap: wrap; }
.count-label { font-size: .8rem; color: #c7d3c3; width: 100%; margin-bottom: -4px; }
.count div { display: flex; align-items: baseline; gap: .25rem; }
.count b { font-size: clamp(1.7rem, 3.4cqw, 3rem); font-weight: 700; line-height: 1; color: var(--mustard); }
.count span { font-size: .78rem; color: #c7d3c3; }
.hero-facts { font-size: .86rem; color: #c7d3c3; text-align: right; max-width: 38ch; }
@media (max-width: 860px) { .hero-facts { text-align: left; } }
.scroll-cue { display: inline-block; animation: cue 1.8s ease-in-out infinite; color: var(--mustard); }
@keyframes cue { 50% { transform: translateY(5px); } }
@container (max-width: 640px) {
  .hero h1 { line-height: 1.22; padding-top: .1em; }
  .hero h1 span { display: block; white-space: nowrap; }
  .hero h1 span:first-child { margin-left: 0; word-spacing: 0; }
  .hero .scene-head { font-size: min(33cqw, 17cqh); bottom: calc(230 / 900 * 100cqh - .1em); }
  .hero-facts { display: none; }
}

/* ---------- Prolog ---------- */
.alert { background: var(--flag); color: #fff; }
.alert .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding-block: .85rem; justify-content: space-between; }
.alert p { font-weight: 600; font-size: 1rem; max-width: 70ch; }
.alert a { color: #fff; font-weight: 700; white-space: nowrap; }
.pro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(14px, 2.4vw, 30px); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.6rem; }
.stats div { border-top: 1px solid var(--line); padding-top: .55rem; }
.stats b { display: block; font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.05; color: var(--acc); }
.stats span { font-size: .88rem; color: var(--mut); }
.cal-wrap { margin-top: clamp(40px, 6vw, 76px); }
.cal-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cal-title h3 { font-size: 1.15rem; font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); column-gap: 2px; }
.cal a { text-decoration: none; }
.cal-day { display: grid; justify-items: center; gap: 5px; padding: .35rem 0 .45rem; border-radius: 6px; transition: background .15s; }
.cal-day:hover, .cal-day:focus-visible { background: var(--card); }
.cal-day small { font-size: .68rem; color: var(--mut); line-height: 1; }
.cal-day b { font-size: .86rem; font-variant-numeric: tabular-nums; line-height: 1; font-weight: 600; }
.cal-day svg { width: min(100%, 30px); height: auto; }
.cal-day.mark b { color: var(--acc); }
.cal-reg { display: block; margin-top: 6px; padding: .35rem .5rem; border-radius: 4px; font-size: .78rem; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: clip; white-space: nowrap; color: var(--tc); background: var(--c); }
.cal-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .8rem; font-size: .85rem; color: var(--mut); }
.cal-legend b { color: var(--ink); font-weight: 600; }
.wins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(32px, 5vw, 60px); }
.win { background: var(--card); padding: 1.1rem 1.15rem 1.25rem; border-top: 4px solid var(--acc); }
.win time { font-weight: 700; font-size: .84rem; color: var(--acc); }
.win h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.95rem; text-transform: uppercase; margin: .3rem 0 .1rem; line-height: 1; }
.win .pl { font-size: .84rem; color: var(--mut); margin-bottom: .6rem; }
.win p:last-child { font-size: .93rem; line-height: 1.5; }
.skipbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.6rem; align-items: start; margin-top: clamp(24px, 3vw, 40px); padding: 1.15rem 0; border-block: 1px solid var(--line); }
.skipbox h3 { font-size: 1.1rem; font-weight: 700; max-width: 12ch; }
.skipbox p { font-size: .96rem; max-width: 74ch; color: var(--mut); }

/* ---------- Karte ---------- */
.route-sec { padding-top: 0; }
.route-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-top: clamp(24px, 4vw, 44px); }
.map-sticky { position: sticky; top: 62px; height: calc(100svh - 78px); }
.map-sticky svg { width: 100%; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 97%, transparent); mask-composite: intersect; }
.geo-near { fill: #1a322d; stroke: #2a4a43; stroke-width: 1; }
.geo-vn { fill: #2c5a4e; stroke: #5d9281; stroke-width: 1.2; }
.geo-lab { font: 600 14px var(--font-ui); fill: #6f8c81; letter-spacing: .14em; text-transform: uppercase; }
.geo-sea { font: italic 500 19px var(--font-accent); fill: #6f8c81; }
.leg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leg-road { stroke: var(--mustard); stroke-width: 4.5; }
.leg-air { stroke: #f5efdd; stroke-width: 1.8; }
.leg-ghost { fill: none; stroke: #f5efdd; opacity: .15; stroke-width: 1.5; }
.stop circle { fill: #10211f; stroke: #8ea99d; stroke-width: 2.5; transition: fill .25s, stroke .25s, r .25s; }
.stop text { font: 700 18px var(--font-ui); fill: #8ea99d; transition: fill .25s; paint-order: stroke; stroke: #10211f; stroke-width: 4px; stroke-linejoin: round; }
.stop.on circle { fill: var(--mustard); stroke: #fff4d0; }
.stop.on text { fill: #fff8e6; }
.stop a { cursor: pointer; }
.inset-frame { fill: #10211f; stroke: #5d9281; stroke-width: 1.2; }
.inset-lab { font: 600 12.5px var(--font-ui); fill: #cfe0d5; }
.inset-title { font: 700 11px var(--font-ui); fill: var(--mustard); letter-spacing: .12em; text-transform: uppercase; }
.steps { display: grid; gap: 0; padding-bottom: 30vh; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; opacity: .5; transition: opacity .35s; }
.step.on { opacity: 1; }
.step-link { text-decoration: none; display: block; }
.step .kick { color: var(--acc); }
.step h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: .96; margin: .2rem 0 .4rem; }
.step-link:hover h3 { color: var(--acc); }
.step p { max-width: 42ch; }
.step .how { color: var(--mut); font-size: .92rem; margin-top: .4rem; }
.step img { width: 100%; max-width: 420px; aspect-ratio: 16/9; object-fit: cover; margin-top: 1rem; background: var(--card); }

/* ---------- Kapitel ---------- */
.chap-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 76px); align-items: start; padding-top: clamp(30px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.chap-head .season { display: inline-block; font-size: .84rem; font-weight: 700; color: var(--on); background: var(--acc); padding: .22rem .7rem; border-radius: 999px; margin-bottom: .95rem; }
.why { border-top: 3px solid var(--acc); padding-top: .85rem; }
.why h3 { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 700; margin-bottom: .55rem; }
.why p { font-size: 1rem; }
.stops { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .3rem; font-size: .84rem; font-weight: 600; }
.stops li + li::before { content: "→"; color: var(--acc); margin-right: .3rem; font-weight: 700; }

.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 15.5vw, 232px); gap: clamp(6px, .9vw, 12px); }
.gal > :nth-child(6n+1) { grid-column: span 7; grid-row: span 2; }
.gal > :nth-child(6n+2) { grid-column: span 5; }
.gal > :nth-child(6n+3) { grid-column: span 5; }
.gal > :nth-child(6n+4), .gal > :nth-child(6n+5), .gal > :nth-child(6n+6) { grid-column: span 4; }
.gal[data-n="5"] > :nth-child(4), .gal[data-n="5"] > :nth-child(5) { grid-column: span 6; }

.ph { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; background: var(--card); cursor: zoom-in; text-align: left; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.ph:hover img, .ph:focus-visible img { transform: scale(1.045); }
.ph .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem .75rem .55rem; color: #fff; font-size: .8rem; line-height: 1.3; font-weight: 500; background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,0)); }
.ph.broken { background: repeating-linear-gradient(135deg, var(--card) 0 14px, transparent 14px 28px); cursor: default; }
.ph.broken img { display: none; }

/* Tage */
.days { position: relative; display: grid; gap: clamp(64px, 9vw, 128px); padding-block: clamp(56px, 8vw, 108px); }
.trail-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.trail-base { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.trail-line { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; }
.traveller { color: var(--ink); }
.traveller-bg { fill: var(--acc); }
.traveller path, .traveller circle.t { fill: var(--on); }
.day { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.12fr); align-items: start; scroll-margin-top: 72px; }
.day-media { grid-column: 1; position: sticky; top: 84px; }
.day-node { grid-column: 2; justify-self: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--line); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--ink); transition: background .3s, color .3s, box-shadow .3s; }
.day-node.on { background: var(--acc); color: var(--on); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 26%, transparent); }
.day-body { grid-column: 3; }
.day:nth-of-type(even) .day-media { grid-column: 3; grid-row: 1; }
.day:nth-of-type(even) .day-body { grid-column: 1; grid-row: 1; }
.day:nth-of-type(even) .day-node { grid-row: 1; }
.day-fig { margin: 0; }
.day-fig .ph, .day-fig .illu { height: auto; aspect-ratio: var(--ar, 4/3); max-height: calc(100svh - 150px); }
.illu { overflow: hidden; }
.illu svg { width: 100%; height: 100%; }
.day-fig figcaption { font-size: .8rem; color: var(--mut); margin-top: .4rem; }
.day-date { font-size: .84rem; font-weight: 700; letter-spacing: .05em; color: var(--acc); }
.day h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: .98; text-transform: uppercase; margin: .25rem 0 .3rem; }
.day-place { font-size: .92rem; font-weight: 600; color: var(--mut); }
.day-story { font-size: 1.1rem; line-height: 1.5; margin-block: .9rem 1.1rem; }
.plan { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.plan li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; font-size: .96rem; line-height: 1.45; }
.plan time { font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--acc); padding-top: .06rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.3rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.facts div.wide { grid-column: 1 / -1; }
.facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); margin-bottom: .12rem; }
.facts dd { margin: 0; font-size: .9rem; line-height: 1.45; }
.facts dd span { display: block; }
.word { display: flex; align-items: center; gap: .85rem; margin-top: 1.05rem; padding: .6rem .85rem .6rem .6rem; background: var(--card); }
.say { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--acc); color: var(--on); cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.say:hover { transform: scale(1.08); }
.say svg { width: 16px; height: 16px; }
.word b { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.32rem; line-height: 1.1; display: block; }
.word small { font-size: .82rem; color: var(--mut); }
.meter { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; align-items: center; margin-top: .95rem; font-size: .84rem; color: var(--mut); }
.meter b { color: var(--ink); font-weight: 600; }
.dots { display: inline-flex; gap: 3px; vertical-align: -1px; margin-left: .3rem; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dots i.f { background: var(--acc); }
.meter svg { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
.meter a { font-weight: 600; color: var(--ink); }

/* ---------- Spielzeuge ---------- */
.toy { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 100px); }
.toy-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .7rem 1.6rem; margin-bottom: 1rem; }
.toy-head h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: .98; }
.toy-head p { max-width: 58ch; font-size: .96rem; }
.toy canvas { width: 100%; touch-action: none; cursor: crosshair; background: #021a26; }
.toy-bar { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; justify-content: space-between; margin-top: .75rem; font-size: .92rem; }
.toy-bar .state { font-weight: 600; min-height: 1.6em; }

.climb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 1rem clamp(16px, 4vw, 48px); align-items: center; }
.climb-num { font-weight: 700; font-size: clamp(3.2rem, 8vw, 6rem); line-height: 1; color: var(--acc); }
.climb-of { font-size: .92rem; color: var(--mut); }
.climb-msg { margin-top: .6rem; min-height: 4.4em; font-size: 1.02rem; }
.climb svg { width: 100%; height: auto; overflow: visible; }

.phin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.phin-art { max-width: 340px; margin-inline: auto; width: 100%; }
.phin-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.phin-steps li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; padding: .4rem .5rem; border-radius: 6px; transition: background .25s; font-size: .98rem; }
.phin-steps li::before { content: counter(s); font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; color: var(--acc); }
.phin-steps li.on { background: var(--card); }
.phin-drop { animation: phindrop 1s linear infinite; }
.phin-drop.d2 { animation-delay: .33s; }
.phin-drop.d3 { animation-delay: .66s; }
@keyframes phindrop { from { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(96px); opacity: 0; } }
.drip { animation: dripl 1.1s linear infinite; }
@keyframes dripl { to { stroke-dashoffset: -20; } }

/* ---------- Puls ---------- */
.chart { background: var(--chart); padding: clamp(14px, 2vw, 24px); position: relative; }
.chart h3 { font-size: 1.08rem; font-weight: 700; }
.chart .sub { font-size: .88rem; color: #52514e; margin-top: .1rem; margin-bottom: .75rem; }
.chart svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart svg:focus-visible { outline-offset: 4px; }
.chart text { font: 500 11.5px var(--font-ui); fill: #6b6a64; }
.chart text.tick { font-variant-numeric: tabular-nums; }
.chart text.dl { fill: #0b0b0b; font-weight: 600; font-size: 12.5px; }
.grid-l { stroke: #e1e0d9; stroke-width: 1; shape-rendering: crispEdges; }
.base-l { stroke: #c3c2b7; stroke-width: 1; shape-rendering: crispEdges; }
.tip { position: absolute; z-index: 6; pointer-events: none; background: #0b0b0b; color: #f0efec; padding: .42rem .65rem; border-radius: 8px; font-size: .8rem; line-height: 1.32; opacity: 0; transition: opacity .12s; max-width: 240px; }
.tip b { display: block; font-size: 1.02rem; font-weight: 700; color: #fff; }
.tip.on { opacity: 1; }
.twin { margin-top: .75rem; font-size: .86rem; }
.twin summary { cursor: pointer; font-weight: 600; color: #52514e; }
.twin-scroll { overflow-x: auto; max-height: 320px; margin-top: .4rem; }
.twin table { border-collapse: collapse; width: 100%; font-size: .84rem; font-variant-numeric: tabular-nums; }
.twin th, .twin td { text-align: left; padding: .24rem .55rem .24rem 0; border-bottom: 1px solid #e1e0d9; white-space: nowrap; }
.twin th { color: #52514e; font-weight: 600; position: sticky; top: 0; background: var(--chart); }
.pulse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(10px, 1.4vw, 16px); }
.budget { background: var(--chart); margin-top: clamp(28px, 4vw, 48px); padding: clamp(16px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); }
.budget h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: .98; }
.ctrl { border: 0; padding: 0; margin: 1rem 0 0; }
.ctrl legend { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); padding: 0; margin-bottom: .35rem; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: .4rem .8rem; border-radius: 8px; background: #eceee6; font-size: .92rem; font-weight: 600; transition: background .15s, color .15s; }
.seg input:checked + span { background: #14201d; color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }
.tier-note { font-size: .88rem; color: var(--mut); margin-top: .45rem; min-height: 1.5em; }
.hero-fig { font-size: clamp(3rem, 7vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -.015em; }
.hero-cap { color: var(--mut); font-size: .95rem; margin-top: .3rem; }
.segbar { display: flex; gap: 2px; height: 28px; margin-top: 1.3rem; }
.segbar i { display: block; height: 100%; border-radius: 4px; font-style: normal; font-size: .76rem; font-weight: 600; line-height: 28px; padding-left: .4rem; color: #fff; white-space: nowrap; overflow: visible; transition: flex-grow .35s cubic-bezier(.2,.7,.2,1), background .2s; outline-offset: 2px; }
.segbar i.dark { color: #0b0b0b; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .7rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: #52514e; }
.legend li { display: flex; align-items: center; gap: .4rem; }
.legend i { display: block; width: 11px; height: 11px; border-radius: 3px; }

/* ---------- Werkzeugkasten ---------- */
.tool { margin-top: clamp(44px, 7vw, 92px); }
.tool > h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.3rem, 5vw, 4rem); line-height: .98; }
.tool > .intro { max-width: 62ch; margin-top: .4rem; color: var(--mut); }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: .85rem; max-width: 420px; }
.progress i { display: block; height: 100%; background: var(--acc); width: 0; border-radius: 999px; transition: width .3s; }
.prog-t { font-size: .88rem; font-weight: 600; margin-top: .4rem; }
.urgent { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0; }
.urgent li { display: grid; grid-template-columns: 6.4rem auto minmax(0, 1fr); gap: .3rem .85rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--line); }
.urgent time { font-weight: 700; font-size: .9rem; color: var(--acc); padding-top: .05rem; }
.urgent .why2 { font-size: .9rem; color: var(--mut); display: block; margin-top: .1rem; font-weight: 400; }
.urgent label { cursor: pointer; font-weight: 600; display: block; }
.chk { flex: none; width: 21px; height: 21px; margin: .14rem 0 0; accent-color: var(--acc); cursor: pointer; }
.urgent li.done label { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--mut); }
.urgent li.done .why2 { text-decoration: none; display: inline-block; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-top: 1.1rem; }
.card { background: var(--card); padding: 1.05rem 1.15rem 1.15rem; }
.card h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: .45rem; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: .93rem; line-height: 1.45; }
.planb { margin-top: 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); }
.planb details { border-top: 1px solid var(--line); padding: .75rem 0; }
.planb summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.planb summary::-webkit-details-marker { display: none; }
.planb summary::after { content: "+"; font-weight: 700; color: var(--acc); font-size: 1.25rem; line-height: 1.2; transition: transform .2s; }
.planb details[open] summary::after { transform: rotate(45deg); }
.planb p { margin-top: .45rem; font-size: .95rem; color: var(--mut); }
.pack { columns: 3 280px; column-gap: clamp(16px, 3vw, 36px); margin-top: 1.1rem; }
.pack section { break-inside: avoid; margin-bottom: 1.4rem; }
.pack h4 { font-size: 1rem; font-weight: 700; padding-bottom: .3rem; border-bottom: 2px solid var(--ink); margin-bottom: .4rem; }
.pack label { display: flex; gap: .55rem; align-items: flex-start; font-size: .94rem; line-height: 1.38; padding: .22rem 0; cursor: pointer; }
.pack input:checked + span { text-decoration: line-through; color: var(--mut); }
.tones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); margin-top: 1.1rem; }
.tone { background: var(--card); border: 0; padding: .7rem .7rem .8rem; text-align: left; cursor: pointer; transition: transform .15s; display: block; }
.tone:hover { transform: translateY(-3px); }
.tone svg { width: 100%; height: auto; margin-bottom: .3rem; overflow: visible; }
.tone svg path { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.tone.play svg path { stroke-dasharray: 80; animation: tonedraw .8s ease-out; }
@keyframes tonedraw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.tone b { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 2rem; line-height: 1; display: block; }
.tone span { display: block; font-size: .85rem; line-height: 1.3; }
.tone small { display: block; font-size: .76rem; color: var(--mut); line-height: 1.3; margin-top: .22rem; }
.voice-note { font-size: .88rem; color: var(--mut); margin-top: .7rem; min-height: 1.4em; }
.phrases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); margin-top: 1rem; }
.phrase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .42rem 0; border-top: 1px solid var(--line); }
.phrase .say { width: 34px; height: 34px; }
.phrase .say svg { width: 13px; height: 13px; }
.phrase b { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.14rem; line-height: 1.15; display: block; }
.phrase small { color: var(--mut); font-size: .8rem; }
.phrase span { font-size: .9rem; text-align: right; }
.pass { background: #7a1712; color: #fae8c2; margin-top: 1.1rem; padding: clamp(16px, 3vw, 34px); --acc: #f5c518; --mut: #e0b98e; }
.pass-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; }
.pass-head b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1; color: #f5c518; letter-spacing: .02em; }
.pass-head span { font-weight: 600; }
.pass-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-block: 1rem; }
.pass-strip .ph { aspect-ratio: 1; height: auto; background: #5e100d; }
.pass-strip .cap { font-size: .72rem; padding: 1.4rem .4rem .3rem; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: clamp(6px, 1vw, 12px); }
.stamp { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(250,232,194,.42); background: none; color: #fae8c2; cursor: pointer; padding: .5rem; display: grid; place-content: center; text-align: center; line-height: 1.15; transition: border-color .2s, color .2s, background .2s; }
.stamp b { font-size: .86rem; font-weight: 700; display: block; }
.stamp small { font-size: .66rem; opacity: .85; display: block; margin-top: .15rem; }
.stamp:hover { border-color: #f5c518; }
.stamp[aria-pressed="true"] { border: 3px solid #f5c518; color: #f5c518; background: rgba(245,197,24,.09); transform: rotate(var(--rot)); animation: stampit .28s cubic-bezier(.3,1.6,.5,1); }
.stamp[aria-pressed="true"]::after { content: "Ngon!"; position: absolute; top: 12%; left: 50%; transform: translateX(-50%) rotate(-8deg); font-family: var(--font-accent); font-style: italic; font-size: .82rem; }
@keyframes stampit { from { transform: scale(1.5) rotate(0deg); opacity: .2; } }
.manners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem clamp(14px, 2vw, 26px); margin-top: 1.1rem; }
.manners div { border-top: 2px solid var(--ink); padding-top: .45rem; }
.manners b { display: block; font-weight: 700; }
.manners span { font-size: .9rem; color: var(--mut); display: block; line-height: 1.42; margin-top: .15rem; }
.sources { margin-top: clamp(36px, 5vw, 60px); font-size: .9rem; color: var(--mut); border-top: 1px solid var(--line); padding-top: .9rem; }
.sources summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.sources p { margin: .6rem 0 0; max-width: 65ch; }
.credits { margin-top: 1rem; }
.sources ul { columns: 2 320px; margin: .7rem 0 0; padding-left: 1.1rem; font-size: .84rem; }
.sources a { overflow-wrap: anywhere; }

/* ---------- Finale ---------- */
.finale { --t: #f7efc9; height: clamp(620px, 112svh, 1180px); }
.finale .scene-head { font-size: clamp(3.6rem, 13.6cqw, 15rem); }
.finale .scene-head h2 { line-height: 1.06; text-wrap: wrap; }
.finale-sub { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.15rem, 2.4cqw, 2rem); margin-bottom: 1.3em; color: #eef1ff; }
.finish { padding-block: clamp(28px, 5vw, 60px) clamp(40px, 6vw, 72px); }
.finish-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: end; }
.finish p { max-width: 62ch; font-size: .92rem; color: var(--mut); }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 50; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.hud-pill { pointer-events: auto; display: flex; align-items: center; gap: .72rem; background: rgba(9,14,16,.88); color: #f5f5ef; border-radius: 14px; padding: .32rem .85rem .32rem .55rem; text-decoration: none; font-size: .84rem; line-height: 1.22; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; max-width: min(760px, calc(100vw - 20px)); }
.hud[data-pill="0"] .hud-pill { transform: translateY(-130%); opacity: 0; pointer-events: none; }
.hud-map svg { height: 42px; width: auto; }
.hud-map .hm-land { fill: #3b6f60; }
.hud-map .hm-dot { fill: #f5c518; stroke: #09090b; stroke-width: 10; paint-order: stroke; }
.hud-text { display: grid; min-width: 0; }
.hud-text b { font-weight: 700; white-space: nowrap; }
.hud-text span { color: #c5cdc8; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.hud-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: #e8e8df; border-left: 1px solid rgba(255,255,255,.18); padding-left: .72rem; }
.hud-moon svg { width: 24px; height: 24px; }
.hud-nav { pointer-events: auto; display: flex; gap: 2px; background: rgba(9,14,16,.72); border-radius: 12px; padding: 3px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .82rem; margin-left: auto; }
.hud-nav a { color: #f1f1e9; text-decoration: none; padding: .3rem .62rem; border-radius: 9px; font-weight: 600; transition: background .15s; }
.hud-nav a:hover, .hud-nav a:focus-visible { background: rgba(255,255,255,.16); }

.rail { position: fixed; z-index: 40; right: 6px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; background: rgba(9,14,16,.5); border-radius: 12px; padding: 5px 0; transition: opacity .3s; }
.rail[data-on="0"] { opacity: 0; pointer-events: none; }
.rail a { display: block; width: 26px; height: clamp(16px, 3.4vh, 28px); position: relative; }
.rail a::before { content: ""; position: absolute; right: 7px; top: 50%; width: 9px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--c); transition: width .2s; }
.rail a:hover::before, .rail a:focus-visible::before, .rail a.on::before { width: 15px; }
.rail a.on::before { height: 5px; margin-top: -2.5px; }
.rail a span { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); background: #0b0b0b; color: #fff; padding: .16rem .55rem; border-radius: 7px; font-size: .78rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }
@media (min-width: 1240px) { .rail { display: flex; } }

/* ---------- Lightbox ---------- */
#lightbox { border: 0; padding: 0; background: rgba(5,8,9,.94); color: #fff; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
#lightbox[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
#lightbox::backdrop { background: rgba(5,8,9,.8); }
#lightbox figure { margin: 0; grid-column: 2; display: grid; justify-items: center; gap: .6rem; }
#lightbox img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; }
#lightbox figcaption { font-size: .95rem; text-align: center; max-width: 70ch; padding-inline: 1rem; }
.lb-close { position: absolute; top: 10px; right: 12px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; }
.lb-nav { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; justify-self: center; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
#lightbox figure { grid-row: 1; }

/* ---------- Scrollgetriebene Einblendung, ohne dass Inhalt je unsichtbar wartet ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gal .ph img, .day-fig .ph img { animation: kenburns linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes kenburns { from { scale: 1.1; } to { scale: 1; } }
    .win, .day-body > header, .card, .manners > div { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes rise-in { from { translate: 0 26px; } to { translate: 0 0; } }
  }
}

/* ---------- Schmal ---------- */
@media (max-width: 1040px) {
  .wins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud-num { display: none; }
}
@media (max-width: 860px) {
  .pro-grid, .chap-head, .budget, .phin-grid { grid-template-columns: minmax(0, 1fr); }
  .route-grid { grid-template-columns: minmax(0, 1fr); }
  .map-sticky { top: 44px; height: 44svh; background: var(--bg); z-index: 3; padding-block: 4px; }
  .step { min-height: 46vh; }
  .step img { max-width: none; aspect-ratio: 21/9; }
  .step p { max-width: none; }
  .steps { padding-bottom: 12vh; }
  .day { grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; }
  .day-node, .day:nth-of-type(even) .day-node { grid-column: 1; grid-row: 1; width: 44px; height: 44px; font-size: 1.35rem; }
  .day-media, .day:nth-of-type(even) .day-media { grid-column: 2; grid-row: 1; position: static; }
  .day-body, .day:nth-of-type(even) .day-body { grid-column: 2; grid-row: 2; margin-top: 1rem; }
  .day-fig .ph, .day-fig .illu { max-height: none; }
  .pulse-grid, .planb, .phrases { grid-template-columns: minmax(0, 1fr); }
  .climb { grid-template-columns: minmax(0, 1fr); }
  .pass-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pass-strip > :nth-child(n+5) { display: none; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
  .gal > :nth-child(n), .gal[data-n="5"] > :nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gal > :first-child, .gal[data-n="5"] > :first-child { grid-column: span 2; grid-row: span 1; }
  .gal > :last-child:nth-child(even) { grid-column: span 2; }
  .urgent li { grid-template-columns: auto minmax(0, 1fr); }
  .urgent time { grid-column: 1 / -1; }
  .hud-nav a:nth-child(2) { display: none; }
  .hud-pill { padding-right: .7rem; }
  .hud { flex-direction: column; align-items: stretch; }
  .hud-nav { position: absolute; right: 0; top: 0; }
  .hud[data-pill="1"] .hud-nav { display: none; }
  .hud-pill { width: fit-content; }
}
@media (max-width: 560px) {
  .wins, .cards, .manners { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .cal-day small { display: none; }
  .cal-day b { font-size: .62rem; }
  .cal-reg { writing-mode: vertical-rl; transform: rotate(180deg); height: 74px; padding: .3rem .1rem; font-size: .68rem; display: flex; align-items: center; justify-content: flex-start; }
  .skipbox { grid-template-columns: minmax(0, 1fr); }
  .skipbox h3 { max-width: none; }
  .plan li { grid-template-columns: 5rem minmax(0, 1fr); gap: .4rem; }
  .plan time { font-size: .82rem; }
  .scene-head { --fs: 35cqw; bottom: calc(var(--rm, var(--ridge)) / 900 * 100cqh - .1em); }
  .kick-days { display: none; }
  .scene-head h2 { text-wrap: wrap; line-height: 1.06; }
  .phrase span { font-size: .84rem; }
  #lightbox[open] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lb-nav { position: absolute; bottom: 10px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stamp b { font-size: .74rem; }
  .stamp small { display: none; }
  .hud-map svg { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene .lay, .scene-head { will-change: auto; }
}

@media (forced-colors: active) {
  .segbar i { border: 1px solid CanvasText; }
}

@media (max-width: 340px) {
  p, li, .plan span { hyphens: auto; }
  .scene-head .kick { font-size: .7rem; letter-spacing: .06em; }
}
@media print {
  .hud, .rail, .scene, .toy canvas { display: none !important; }
  .world { background: #fff !important; color: #000 !important; }
  .day-media { position: static; }
}