/* ============================================================
   gta6karte.de · Gestaltung «Vice City» (lokaler Entwurf, Block 6, 25.09.2026)
   ------------------------------------------------------------
   Ein gemeinsames Stylesheet für alle Seiten. Roter Faden:
   - Farbwelt: tiefe Aubergine, warmes Rosa/Koralle als einziger Akzent,
     klares Türkis nur für Küste und Orientierung (Kartenraster, Kartenblatt).
   - Eigene Küstenillustration, ruhige Leseflächen und geometrische Art-déco-Linien.
   - Typografie: Anton (Display, selbst gehostet, OFL), Text in der Systemschrift.
   - Ruhige, kontrastreiche Leseflächen; Bewegung nur klein und mit
     reduced-motion-Fallback.
   Block 8: «Abend» ist Standard. Ausdrücklich gespeicherte Tag-/Abend-Wahl wird respektiert.
   ============================================================ */

/* ---------- Tokens ---------- */
/* Tag (gespeicherte Alternative): Sand und Creme, warmes Korall-/Sonnenlicht, Türkis für die Küste, dunkle Schrift */
[data-theme="tag"]{
  --bg:#F5F0E7; --bg-2:#FFFCF6; --surface:#EBE3D5; --line:#E2D2BF; --line-2:#CDB9A3;
  --text:#182D37; --text-2:#3F5460; --text-3:#566A75;
  --accent:#A73B32; --accent-hover:#882F28; --on-accent:#FFFFFF;
  --sea:#127C77; --ok:#1E7A4A; --open:#6B4600; --focus:#A73B32;
  --sky-1:#B6E3EA;  
  --glow:255,138,108;   --glow2-a:.62;
  
  --chip:rgba(34,19,47,.86); --chip-line:rgba(255,255,255,.22); --chip-text:#FFFFFF; --chip-open:#F5C86C;
  --sheet-shadow:0 24px 60px rgba(70,40,40,.25);
  --panel-shadow:0 18px 40px rgba(70,40,40,.18);
  --head-bg:rgba(245,240,231,.96);
  --water:#2c6eb8;
  color-scheme:light;
}
/* Abend: Standard, auch bei hellem Betriebssystem. */
:root:not([data-theme="tag"]),[data-theme="abend"]{
  --bg:#101D27; --bg-2:#162631; --surface:#203541; --line:#344955; --line-2:#506672;
  --text:#F7F0E5; --text-2:#D5DEE1; --text-3:#C2CED3;
  --accent:#FF997F; --accent-hover:#FFB39E; --on-accent:#241510;
  --sea:#66D6C5; --ok:#7BDDA3; --open:#F5C86C; --focus:#FFD0BC;
  --sky-1:#101D27;  
  --glow:255,153,127;   --glow2-a:.32;
  
  --chip:rgba(21,10,34,.86); --chip-line:rgba(255,255,255,.22); --chip-text:#FFFFFF; --chip-open:#F5C86C;
  --sheet-shadow:0 30px 80px rgba(0,0,0,.6);
  --panel-shadow:0 18px 40px rgba(0,0,0,.5);
  --head-bg:rgba(16,29,39,.96);
  --water:#2c6eb8;
  color-scheme:dark;
}
:root{
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:1.625rem; --fs-2xl:2rem;
  --lh-tight:1.04; --lh-head:1.25; --lh-body:1.65;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --w-text:42rem; --r-sm:6px;
  --dur:180ms; --dur-stage:900ms; --ease:cubic-bezier(.2,.7,.2,1);

}
/* Orte: je Region eine Erkennungsfarbe (nur für Punkte, Rahmen und Kicker; Aktionen bleiben im Akzent) */
[data-place="vice-city"],.place--vice-city{--place:194,41,90}
[data-place="leonida-keys"],.place--leonida-keys{--place:18,124,119}
[data-place="grassrivers"],.place--grassrivers{--place:30,122,74}
[data-place="port-gellhorn"],.place--port-gellhorn{--place:191,86,32}
[data-place="ambrosia"],.place--ambrosia{--place:138,90,0}
[data-place="mount-kalaga"],.place--mount-kalaga{--place:44,110,96}
[data-theme="abend"][data-place="vice-city"],[data-theme="abend"] .place--vice-city{--place:255,122,150}
[data-theme="abend"][data-place="leonida-keys"],[data-theme="abend"] .place--leonida-keys{--place:79,217,208}
[data-theme="abend"][data-place="grassrivers"],[data-theme="abend"] .place--grassrivers{--place:123,221,163}
[data-theme="abend"][data-place="port-gellhorn"],[data-theme="abend"] .place--port-gellhorn{--place:255,170,120}
[data-theme="abend"][data-place="ambrosia"],[data-theme="abend"] .place--ambrosia{--place:245,200,108}
[data-theme="abend"][data-place="mount-kalaga"],[data-theme="abend"] .place--mount-kalaga{--place:150,206,190}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 var(--fs-base)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p,li,dd,dt,summary{text-wrap:pretty;overflow-wrap:break-word}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:absolute;left:8px;top:-60px;z-index:100;display:inline-flex;align-items:center;min-height:44px;
  padding:0 16px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:8px;color:var(--on-accent)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font:700 var(--fs-sm)/1.2 var(--font-body);text-decoration:none;text-align:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn--quiet{color:var(--text)}
.btn--quiet:hover{color:var(--accent)}
.btn--line{border:1px solid var(--accent);color:var(--text)}
.btn--line:hover{background:var(--accent);color:var(--on-accent)}
.btn--sm{min-height:44px;padding:0 14px}
.btn svg{flex:none}
.iconbtn{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:border-color var(--dur) var(--ease)}

.iconbtn svg{width:20px;height:20px}

/* ---------- Kopfzeile ---------- */
.head{position:sticky;top:0;z-index:40;background:var(--head-bg);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.head__in{position:relative;display:flex;align-items:center;height:60px;max-width:var(--w-wide);
  margin:0 auto;padding:0 var(--s4)}
.brand{display:flex;align-items:center;min-height:44px;flex:none;color:var(--text);text-decoration:none;font-size:1.0625rem}
.brand:hover{color:var(--text)}
.brand svg{width:26px;height:26px;flex:none}
.brand__tld{color:var(--text-3)}
.head__end{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.cd{position:relative;display:none;align-items:baseline;gap:5px;padding:12px 4px;font-size:var(--fs-xs);color:var(--text-2);
  text-decoration:none;white-space:nowrap}
.cd:hover{color:var(--text)}
.cd b{font:400 1.25rem/1 var(--font-display);color:var(--text);letter-spacing:.01em}
/* Am Handy sichtbar nur «55 Tage»; Screenreader lesen immer den ganzen Satz */
.cd__pre,.cd__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:360px){.cd{display:inline-flex}}
@media (min-width:420px){.cd__pre{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

.menu{display:none}
.js .menu{display:grid}
/* Ohne JS ist der Theme-Schalter funktionslos und draengt den Datumslink aus dem Header. */
html:not(.js) .theme{display:none}
.menu .i-close,.menu[aria-expanded="true"] .i-open{display:none}
.menu[aria-expanded="true"] .i-close{display:block}
.head .btn{display:none}

/* Navigation: am Handy Klappfläche unter der Kopfzeile, ab 1080 px in der Zeile */
.nav{display:none}
.head.is-open .nav{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:var(--panel-shadow)}
.nav ul{max-width:var(--w-wide);margin:0 auto;padding:var(--s2) var(--s4) var(--s4);list-style:none}
.nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);
  color:var(--text);font-weight:600;text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent)}
@media (min-width:1080px){
  .nav,.head.is-open .nav{display:block;position:static;margin-left:var(--s5);background:none;border:0;box-shadow:none}
  .nav ul{display:flex;gap:2px;padding:0}
  .nav a{min-height:44px;padding:0 12px;border:0;color:var(--text-2);font-size:var(--fs-sm)}
  .nav a:hover{color:var(--text)}
  .nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
  .js .menu{display:none}
  .head .btn{display:inline-flex}
  .cd__long{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* ---------- Bühne (Küstenabend) ---------- */
/* Handy: Titel, Antwort und Aktion, dann Kartenblatt. Himmel von oben nach unten heller,
   warmes Licht hinter dem Blatt und oben rechts hinter dem Titel, Palmwedel als Silhouetten. */
.stage{position:relative;overflow:hidden;isolation:isolate}

.stage::before{pointer-events:none}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1}
.stage__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "map" "regions";gap:var(--s5);
  max-width:var(--w-wide);margin:0 auto;padding:var(--s2) var(--s4) var(--s7)}
.stage--kauf .stage__in,.stage--count .stage__in,.stage--place .stage__in{grid-template-areas:"head" "body" "map"}

.stage--hub .stage__in{grid-template-areas:"head" "body" "regions";padding-top:var(--s5)}
.stage__head{grid-area:head}
.stage__body{grid-area:body}
.stage__map{grid-area:map;margin:0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;font-size:var(--fs-xs);color:var(--text-2)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--text-2);text-decoration:none}
.crumb a:first-child{margin-left:-8px}
.crumb [aria-current]{padding-left:8px}
.crumb a:hover{color:var(--text)}
.kicker{display:flex;align-items:center;gap:8px;margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase}
.kicker__dot{width:9px;height:9px;border-radius:50%;flex:none;background:rgb(var(--place,var(--glow)))}
.display{display:block;margin:0;font:400 var(--fs-display)/var(--lh-tight) var(--font-display);color:var(--text)}
h1{margin:0}
.display__sub{display:block;font:700 var(--fs-lg)/1.3 var(--font-body);letter-spacing:-.01em;color:var(--text-2)}
.lead{margin:0 0 var(--s4);max-width:34rem}
.lead a{color:inherit}
.stage__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.stage__facts{display:flex;flex-wrap:wrap;gap:2px 1.1em;margin:var(--s4) 0 0;font-size:var(--fs-xs);color:var(--text-2)}
.stage__facts span{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.stage__facts span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--text-3)}

/* Preise in der Bühne (Vorbestellen) */
.prices{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s2)}
.prices div{flex:1 1 9rem;max-width:12rem;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.prices dt{font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.prices dd{margin:4px 0 0;font:400 1.75rem/1.05 var(--font-display);letter-spacing:.01em}
.prices__note{margin:0 0 var(--s4);color:var(--text-2)}

/* Countdown in der Bühne: Kalendertage groß, genaue Restzeit darunter (Zahlen setzt das Seiten-Script) */
.count{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;margin:0;font-size:var(--fs-xl);font-weight:700;line-height:1.1;color:var(--text)}
.count__n{font:400 clamp(4.5rem,12vw,8rem)/.95 var(--font-display);letter-spacing:.01em}
.count--da{font:400 clamp(2.75rem,6vw,4rem)/1.05 var(--font-display);letter-spacing:.005em}
.stage--count .lead{margin-top:var(--s2)}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:26rem;margin:0 0 var(--s2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clock>span{display:flex;flex-direction:column;padding:var(--s2) 0 var(--s2) var(--s3);font-size:var(--fs-xs);color:var(--text-2)}
.clock>span:first-child{padding-left:0}
.clock>span+span{border-left:1px solid var(--line)}
.clock b{font:700 1.5rem/1.25 var(--font-body);font-variant-numeric:tabular-nums;color:var(--text)}
.clock__note{margin:0 0 var(--s5);max-width:34rem;font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.read .clock{margin-top:var(--s2)}
.read .clock__note{margin-bottom:var(--s4)}

/* Kartenblatt: eigenes Kartenbild mit Planquadrat-Linien (Türkis = Küste/Orientierung) */
.sheet-wrap{display:flex;padding-left:33%}
.sheet{position:relative;height:300px;aspect-ratio:720/1338;flex:none}
.sheet img{width:100%;height:100%;border-radius:inherit}
.sheet__grid{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.sheet__grid line{stroke:var(--sea);stroke-opacity:.42;stroke-width:1;vector-effect:non-scaling-stroke}
/* Namen nur zur Orientierung, ohne Link: keine kleinen Trefferflächen auf der Karte */
.labels{position:absolute;inset:0;pointer-events:none}
.region{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:6px;transform:translate(-4px,-50%)}
.region--l{flex-direction:row-reverse;transform:translate(calc(-100% + 4px),-50%)}
.region__dot{width:8px;height:8px;border-radius:50%;flex:none;background:#fff;box-shadow:0 0 0 2px var(--accent)}
.region__name{font:700 10.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  color:var(--chip-text);background:var(--chip);border:1px solid var(--chip-line);border-radius:5px;padding:4px 6px}
.stage__note{margin:var(--s3) 0 0;font-size:.75rem;color:var(--text-2)}
.stage__note a{color:var(--text)}

/* Breites Blatt: Kartenausschnitt einer Region (16:9), Rahmen in der Ortsfarbe */
.sheet--wide{display:block;height:auto;width:100%;aspect-ratio:1200/675;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sheet-shadow),0 0 0 1px rgba(var(--place,255,255,255),.55)}
.sheet--wide img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sheet__tag{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:5px;font:700 10.5px/1 var(--font-body);
  letter-spacing:.07em;text-transform:uppercase;color:var(--chip-text);background:var(--chip);border:1px solid var(--chip-line)}
a.sheet--wide:focus-visible{outline-offset:4px}

/* Regionsliste: echte Links, mindestens 44 px hoch, ohne Überlappung */
.regnav{grid-area:regions}
.regnav__t{margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase}
.regnav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:0;padding:0;list-style:none}
.regnav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2);color:var(--text);font-size:var(--fs-sm);font-weight:600;text-decoration:none;
  transition:border-color var(--dur) var(--ease)}
.regnav a:hover{border-color:var(--accent);color:var(--text)}
.regnav a:focus-visible{outline-offset:2px;border-color:var(--accent)}
.regnav__dot{width:8px;height:8px;border-radius:50%;flex:none;background:rgb(var(--place,var(--glow)))}

@media (min-width:640px){
  .sheet:not(.sheet--wide){height:460px}
  .sheet-wrap{padding-left:0;justify-content:center}
  .region__name{font-size:11.5px;padding:6px 7px}
  .regnav ul{grid-template-columns:repeat(3,minmax(0,1fr))}

}
@media (min-width:960px){

  .stage__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"head map" "body map" "regions map";
    column-gap:var(--s7);align-content:center;padding:var(--s5) var(--s5) var(--s8)}
  .stage--kauf .stage__in,.stage--count .stage__in,.stage--place .stage__in{grid-template-areas:"head map" "body map"}
  .stage--place .stage__in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  .stage--hub .stage__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "regions";padding-bottom:var(--s7)}
  .stage--hub .regnav ul{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stage__head{align-self:end}
  .stage__body,.regnav{align-self:start}
  .stage__map{align-self:center}
  .sheet:not(.sheet--wide){height:560px}
  .stage__note{text-align:center}
  .stage--place .stage__note{text-align:left}

}
/* Portal-Eröffnung (Startseite): Zweck, Hauptaktion, ab 960 px rechts die Regionen; direkt darunter folgt die Karte.
   Kompakt, damit der Anfang der Karte schon in der ersten Ansicht liegt. */

 /* Licht tiefer und schwächer: Untertitel (Text-2) bleibt über 4,5:1 */

.stage--portal .regnav{display:none}
.stage--portal::after{height:40px}
/* Frage-zuerst-Seiten (Guides, Kategorien): keine Kartenbühne; Antwort und Aktion stehen sofort da */
.stage--text .stage__in{grid-template-areas:"head" "body"}
@media (min-width:960px){
  .stage--portal .stage__in{
    column-gap:var(--s8);row-gap:var(--s4);align-items:center}
  .stage--portal .stage__head{align-self:end}
  .stage--portal .stage__body{align-self:start}
  .stage--portal .regnav{display:block;grid-area:regions;align-self:center;justify-self:end;width:100%;max-width:26rem}
  .stage--portal .regnav ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage--portal .regnav a{background:var(--bg-2)}

  .stage--text .stage__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body";row-gap:var(--s4);padding-bottom:var(--s7)}
  .stage--text .stage__head,.stage--text .stage__body{max-width:46rem;align-self:start}
}

/* Ankommen: Blatt und Namen blenden einmal ein, die Wedel atmen leicht */
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:sheet-in var(--dur-stage) var(--ease) both}
  .region{animation:fade-in 500ms var(--ease) both;animation-delay:calc(450ms + var(--i,0) * 70ms)}

}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ---------- Lesebereich ---------- */
/* Raster: Textspalte in der Mitte, Breitspalte höchstens 7rem je Seite; schrumpft bis 0, wenn kein Platz ist */
.read{display:grid;padding:var(--s6) 0 var(--s8);
  grid-template-columns:
    [full-start] minmax(var(--s4),1fr)
    [wide-start] minmax(0,7rem)
    [text-start] min(var(--w-text),calc(100% - 2 * var(--s4)))
    [text-end] minmax(0,7rem)
    [wide-end] minmax(var(--s4),1fr) [full-end]}
.read>*{grid-column:text;min-width:0}
.read>.wide{grid-column:wide}

.read h3{margin:var(--s6) 0 var(--s3);font:700 var(--fs-lg)/var(--lh-head) var(--font-body)}
.read h2:first-child,.read .toc+h2{margin-top:0}
.read p{margin:0 0 var(--s4)}
.read strong{font-weight:650}
.read ul:not([class]),.read ol:not([class]){margin:0 0 var(--s4);padding-left:1.2em}
.read ul:not([class]) li,.read ol:not([class]) li{margin:0 0 6px}
.read code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 5px;border-radius:4px;background:var(--surface)}
.small{font-size:var(--fs-xs);color:var(--text-3);line-height:1.55}

.toc{margin:0 0 var(--s6);padding:var(--s2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px;
  font-size:var(--fs-sm);font-weight:700}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font-weight:400;font-size:1.25rem;color:var(--text-2)}
.toc[open] summary::after{content:"–"}
.toc ul{margin:var(--s2) 0;padding:0;list-style:none;columns:1;column-gap:var(--s6)}
.toc li{break-inside:avoid}
.toc a{display:flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none}
.toc a:hover{color:var(--text)}
@media (min-width:720px){.toc ul{columns:2}}

.note{margin:0 0 var(--s5);padding:2px 0 2px var(--s4);border-left:2px solid var(--line-2);color:var(--text-2)}

.note strong{color:var(--text)}

/* Faktenliste: Status als Wort, Farbe nur zusätzlich, Quelle mit Link */
.facts{margin:0 0 var(--s5);padding:0;list-style:none;border-top:1px solid var(--line)}
.facts li{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.facts p{margin:0}
.facts p+p{margin-top:6px}
.status{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.status--open::before{background:transparent;box-shadow:inset 0 0 0 2px var(--open)}
.src{font-size:var(--fs-xs);color:var(--text-3)}
.read p.src{margin-top:calc(-1 * var(--s2))}
.facts p.src{margin-top:6px}

/* Werkzeuge / Linklisten: ruhige Liste statt Kacheln */

/* Karten (Guides, Kategorien): eine Fläche, Titel, ein Satz, Weg */
.cards{display:grid;gap:var(--s3);margin:0 0 var(--s5);padding:0;list-style:none}
.card{display:flex;flex-direction:column;gap:6px;min-height:120px;height:100%;padding:var(--s4) var(--s5) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);color:var(--text);text-decoration:none;
  transition:border-color var(--dur) var(--ease)}
.card:hover{border-color:var(--accent);color:var(--text)}
.card__k{font-size:var(--fs-xs);font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase}
.card__t{font-weight:700;font-size:var(--fs-lg);line-height:1.25}
.card__d{font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.card__go{margin-top:auto;padding-top:8px;font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Orte: die Regionen mit ihrem eigenen Kartenausschnitt */
.places{display:grid;gap:var(--s3);margin:0 0 var(--s5);padding:0;list-style:none}
.place{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg-2);color:var(--text);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.place:hover{border-color:rgb(var(--place));color:var(--text)}
.place__img{display:block;overflow:hidden;background:var(--water)}
.place__img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 600ms var(--ease)}
.place:hover .place__img img{transform:scale(1.04)}
.place__body{display:block;padding:var(--s3) var(--s4) var(--s4)}
.place__k{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase}
.place__k::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:rgb(var(--place))}
.place__t{display:block;margin:4px 0 2px;font:400 1.5rem/1.1 var(--font-display);letter-spacing:.01em}
.place__d{display:block;font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
@media (min-width:560px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.places{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.place__img img{transition:none}.place:hover .place__img img{transform:none}}

/* Kartenausschnitt im Text: Handy randlos, ab 760 px in der Breitspalte */
.read>.mapfig{grid-column:full;margin:var(--s6) 0}
.mapfig>a{display:block}
.mapfig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mapfig figcaption{padding:var(--s3) var(--s4) 0;font-size:var(--fs-xs);color:var(--text-2);line-height:1.55}
.pq{font:400 .95rem/1 var(--font-display);letter-spacing:.03em;color:var(--text);margin-right:.5em}
@media (min-width:760px){
  .read>.mapfig{grid-column:wide;margin:var(--s7) 0}
  .mapfig img{border-radius:var(--r-lg)}
  .mapfig figcaption{padding:var(--s3) 0 0}
}

/* Hinweisband zur Karte */
.band{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin:var(--s6) 0}
.band p{margin:0}

@media (min-width:640px){.band{flex-direction:row;align-items:center;justify-content:space-between}.band .btn{flex:none}}

/* Deutlich getrennter Abschnitt (Spielkauf, Top-Thema) */
.apart{margin:var(--s7) 0 var(--s4);border-radius:var(--r-lg)}
.apart__label{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--s2)!important;font-size:var(--fs-xs);font-weight:700}
.apart__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.read .apart h2{margin-top:0}

.apart p:last-child{margin-bottom:0}
.apart--first{margin-top:0}

/* Kaufentscheidung (Vorbestellen) */
.editions{display:grid;gap:var(--s3);margin:var(--s5) 0 var(--s4);align-items:start}
.edition{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg)}
.read .edition h3{margin:0 0 var(--s1);font-size:var(--fs-lg)}
.read .price{margin:0 0 var(--s3);font:400 2.25rem/1 var(--font-display);letter-spacing:.01em}
.edition ul{margin:0;padding-left:1.1em;color:var(--text-2);font-size:var(--fs-sm)}
.edition li{margin:4px 0}
@media (min-width:640px){.editions{grid-template-columns:1fr 1fr}}
.pick{margin:var(--s4) 0 var(--s5);border-top:1px solid var(--line)}
.pick div{display:grid;gap:2px;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.pick dt{color:var(--text-2);font-size:var(--fs-sm)}
.pick dd{margin:0;font-weight:650}
.pick dd span{font-weight:400;color:var(--text-2)}
@media (min-width:640px){.pick div{grid-template-columns:1.1fr 1.2fr;gap:var(--s4)}}
.pick--facts{margin-top:0}
.pick--facts dt{font-weight:600}
@media (min-width:640px){.pick--facts div{grid-template-columns:11rem 1fr}}

/* Händlerliste: feste Zeilenhöhe; Produktseite und Startseite klar getrennt */
.read .shops__h{margin:var(--s5) 0 var(--s2);font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.shops{margin:0 0 var(--s4);padding:0;list-style:none;border-top:1px solid var(--line)}
.shop{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:1px solid var(--line);
  color:var(--text);text-decoration:none}
.shop__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.shop__name{font-weight:650}
.shop__type{color:var(--text-2);font-size:var(--fs-sm);line-height:1.35}
.shop__go{margin-left:auto;flex:none;color:var(--text-3)}
a.shop:hover .shop__name,a.shop:hover .shop__go{color:var(--accent)}
/* Partnerlink-Etikett: dezent, aber gut lesbar direkt am Link */
.shop__ad{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;
  font-size:var(--fs-xs);font-weight:600;line-height:1.5;color:var(--text-2);vertical-align:1px;white-space:nowrap}
/* Kaufhub: Länder zum Aufklappen, das erste ist offen */
.land>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;cursor:pointer;list-style:none}
.read .land .shops__h{margin:var(--s3) 0}
.land:not([open])>summary{border-bottom:1px solid var(--line)}
.land:last-of-type{margin-bottom:var(--s4)}
.land>summary::-webkit-details-marker{display:none}
.land>summary::after{content:"+";flex:none;font-size:1.25rem;line-height:1;color:var(--text-2)}
.land[open]>summary::after{content:"–"}
.read .land .shops__sub{display:flex;align-items:center;margin:var(--s3) 0 var(--s2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;color:var(--text-2)}
/* Kaufkarte: kompakte Partner-Box mit zwei Buttons, „Anzeige“ einmal oben rechts */
.kauf{margin:0 0 var(--s6);padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2)}
.read .kauf .kauf__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0}
.kauf__t{font-weight:700;font-size:var(--fs-lg);line-height:1.3}
.read .kauf .kauf__sub{margin:var(--s1) 0 var(--s3);font-size:var(--fs-sm);line-height:1.4;color:var(--text-2)}
.kauf__btns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
@media(min-width:560px){.kauf__btns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kauf .kauf__btn{gap:.3em;flex-wrap:wrap}
.kauf__bei{font-weight:500}
.read .kauf .kauf__fine{margin:var(--s3) 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.read .kauf .kauf__mehr{margin:var(--s2) 0 0;font-size:var(--fs-sm)}

/* Trailer mit Zwei-Klick-Lösung (Verhalten unverändert) */
.vid{position:relative;aspect-ratio:16/9;max-width:560px;margin:var(--s4) 0 var(--s5);overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.vid .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:var(--s4);text-align:center}
.vid .play{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--accent);transition:transform var(--dur) var(--ease)}
.vid:hover .play{transform:scale(1.06)}
.vid .play svg{width:24px;height:24px;margin-left:3px;fill:var(--on-accent)}
.vid .lbl{font-weight:700;color:var(--text)}
.vid .hint{font-size:var(--fs-xs);color:var(--text-2)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailers{display:grid;gap:var(--s3);margin:0 0 var(--s5)}
.trailers .vid{margin:0;max-width:none}
@media (min-width:640px){.trailers{grid-template-columns:1fr 1fr}}

/* Zeitleiste (News) */
.timeline{position:relative;margin:0 0 var(--s6);padding:0;list-style:none}
.timeline li{position:relative;padding:0 0 var(--s5) 28px}
.timeline li::before{content:"";position:absolute;left:4px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline li::after{content:"";position:absolute;left:9px;top:26px;bottom:-2px;width:1px}
.timeline li:last-child::after{display:none}
.timeline li.is-now::before{background:var(--accent)}
.timeline li.is-future::before{border-style:dashed;border-color:var(--text-3)}
.timeline time{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.read .timeline h3{margin:2px 0 4px;font-size:var(--fs-lg)}
.timeline p{margin:0;color:var(--text-2)}
.timeline .status{margin:0 0 0 6px;vertical-align:1px}

/* Rechner (Preload) */
.calc{margin:var(--s4) 0 var(--s5);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg)}
.calc__row{display:grid;gap:var(--s3);margin:0 0 var(--s3)}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.calc input,.calc select{min-height:48px;width:100%;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg);color:var(--text);font:400 1rem var(--font-body)}
.calc input:focus-visible,.calc select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.calc__out{padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--surface);color:var(--text)}
.calc__hint{margin:var(--s3) 0 0;font-size:var(--fs-xs);color:var(--text-3)}
@media (min-width:560px){.calc__row{grid-template-columns:1fr 1fr}}

/* Checkliste zum Abhaken (Preload) */
.checks{margin:var(--s4) 0 var(--s5);padding:var(--s3) var(--s5) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.checks label{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checks input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.checks input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.checks input:checked+span{color:var(--text-3);text-decoration:line-through}
.checks .calc__out{margin:var(--s4) 0 0}

/* Tabellen (Vergleich, Länder, Fundort-Listen aus scripts/build-marker-lists.mjs) */
.read table{width:100%;margin:0 0 var(--s5);font-size:var(--fs-sm)}
.read th,.read td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.read th{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.read td:first-child{font-weight:650}
.tablewrap,.mk-tablewrap{overflow-x:auto;margin:0 0 var(--s5)}
.tablewrap table,.mk-tablewrap table{margin:0}
.mk-tablewrap table{min-width:32rem}
.mk-list{margin:var(--s6) 0 0}
.read .mk-list h2{margin-top:0}
.mk-stand{margin:calc(-1 * var(--s2)) 0 var(--s3);font-size:var(--fs-xs);color:var(--text-3)}

/* Vor/Zurück (Regionen) und Verwandtes */
.prevnext{display:flex;justify-content:space-between;gap:var(--s3);margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.prevnext a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;color:var(--text);text-decoration:none;font-weight:650}
.prevnext a:hover{color:var(--accent)}
.prevnext a:last-child{margin-left:auto;text-align:right}
.prevnext .lbl{font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.related{font-size:var(--fs-sm);color:var(--text-2)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) 0;font-weight:650}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 var(--s4);color:var(--text-2)}
.read .stand{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}

/* Rechtsseiten: Titel im Lesebereich, Wortlaut unverändert */
.read--legal{padding-top:var(--s4)}
.read--legal .crumb{margin-bottom:var(--s3)}
.read .display{font-size:clamp(2.25rem,4.5vw,3.25rem);margin:0 0 var(--s5)}

.read--legal h3{font-size:var(--fs-base)}

/* Fehlerseite: kurze Bühne, Licht schwächer und tiefer, damit der zentrierte Text nicht im Lichtkegel steht */

.stage--oops .stage__in{grid-template-areas:"head" "body";grid-template-columns:minmax(0,1fr)}
.stage--oops .oops{grid-column:1 / -1}
.oops{min-height:56vh;display:grid;place-items:center;padding:var(--s7) var(--s4);text-align:center}
.oops__code{margin:0;font:400 clamp(5rem,16vw,8rem)/1 var(--font-display);color:var(--accent)}
.oops .display{font-size:clamp(1.75rem,4vw,2.5rem)}
.oops p{max-width:34rem;margin:var(--s3) auto var(--s5);color:var(--text-2)}
.oops .stage__cta{justify-content:center}

/* ---------- Fußzeile ---------- */
.foot{position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;right:-70px;bottom:-150px;width:360px;height:312px;pointer-events:none;
  -webkit-mask:var(--frond-c) center/contain no-repeat;mask:var(--frond-c) center/contain no-repeat}
.foot__in{position:relative;max-width:var(--w-wide);margin:0 auto;padding:var(--s6) var(--s4) var(--s7)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-bottom:var(--s4)}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none;font-size:var(--fs-sm)}
.foot nav a:hover,.foot nav a[aria-current="page"]{color:var(--text)}
.foot p{margin:0;max-width:48rem}
/* Solange der Cookie-Hinweis offen ist, bleibt das Fußende lesbar */
body:has(.cc-bar) .foot__in{padding-bottom:calc(var(--s6) + 170px)}

/* ---------- Cookie-Hinweis aus consent.js ---------- */
/* Gleicher Text, gleiches Verhalten und gleiche Speicherung; nur kompakter gesetzt, beide Knöpfe gleichwertig. */
html .cc-bar{left:0;right:0;bottom:0;max-width:56rem;margin:0 auto;background:var(--bg-2);color:var(--text);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.3);font-family:var(--font-body)}
html .cc-in{display:grid;gap:10px;max-width:none;padding:12px var(--s4) calc(12px + env(safe-area-inset-bottom))}
html .cc-txt{flex:none;font-size:.78125rem;line-height:1.4;color:var(--text-2)}
html .cc-txt b{color:var(--text)}
html .cc-txt a{color:var(--accent)}
html .cc-act{display:flex;gap:var(--s2);width:auto}
html .cc-btn,html .cc-ok,html .cc-no{flex:1;min-height:44px;padding:0 14px;border:1px solid var(--text-3);border-radius:var(--r);
  background:transparent;color:var(--text);font:700 .875rem/1 var(--font-body)}
html .cc-btn:hover{border-color:var(--text);background:transparent;color:var(--text)}
html .cc-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (min-width:760px){
  html .cc-bar{left:var(--s3);right:var(--s3);bottom:var(--s3);border-bottom:1px solid var(--line);border-radius:var(--r-lg)}
  html .cc-in{grid-template-columns:1fr auto;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4)}
  html .cc-txt{font-size:.8125rem}
  html .cc-btn,html .cc-ok,html .cc-no{flex:none}
  body:has(.cc-bar) .foot__in{padding-bottom:calc(var(--s6) + 100px)}
}

/* Block 8 · Küstenatlas. Editorial grid, Art-déco proportions, dusk and warm daylight. */
:root{--r:8px;--r-lg:12px;--w-wide:78rem;--fs-display:clamp(2.8rem,5.2vw,4.75rem)}
.head__in{gap:12px}.brand__mark{width:36px;height:36px;flex:none}.brand{gap:10px;letter-spacing:-.045em;font-weight:750}.brand__tld{font-weight:450;letter-spacing:-.025em}
.theme[aria-pressed="true"]{background:transparent;border-color:var(--line);color:var(--text)}
.theme__sun,.theme[aria-pressed="true"] .theme__moon{display:none}.theme[aria-pressed="true"] .theme__sun{display:block}
.iconbtn{border-radius:50%}.iconbtn:hover{background:var(--surface);border-color:var(--accent)}
.btn{border-radius:5px;min-height:50px;gap:10px;letter-spacing:-.01em}.btn--primary{box-shadow:none}.btn--quiet{padding:0 8px}
.btn--primary:hover{box-shadow:0 5px 18px rgba(0,0,0,.16)}.btn svg{width:20px;height:20px}
.stage{background:var(--bg);border-bottom:1px solid var(--line)}
.stage::before{mask:none;-webkit-mask:none;background:none;border:1px solid var(--line);border-radius:50% 50% 0 0;width:270px;height:380px;inset:auto 6% -150px auto;opacity:.45;transform:rotate(18deg);animation:none}
.stage::after{background:none;height:0}
.stage__in{padding-top:24px;padding-bottom:44px;row-gap:20px}
.stage .kicker{font-size:.75rem;letter-spacing:.12em;color:var(--text-2)}
.display{letter-spacing:.005em}.display__sub{line-height:1.4;margin-top:16px;max-width:42rem}.lead{color:var(--text-2);font-size:1.0625rem;line-height:1.65}
.sheet{box-shadow:var(--sheet-shadow);border-radius:8px}.stage__note{line-height:1.65}
.read{padding-top:44px}.read>.pick:first-child{margin-top:0}
.stage--text::before{width:360px;height:500px;right:7%;bottom:-260px;border-width:1px;box-shadow:0 0 0 12px var(--bg),0 0 0 13px var(--line),0 0 0 25px var(--bg),0 0 0 26px var(--line);opacity:.28}
.prices{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:38rem}
.prices dd{color:var(--accent)}.prices__note{font-size:.8125rem}
.coast{position:relative;overflow:hidden;background:var(--bg);isolation:isolate;border:0}
.coast::before{display:none}.coast::after{content:"";display:block;position:absolute;inset:0;z-index:-1;height:auto;background:linear-gradient(180deg,rgba(16,29,39,.02) 0%,rgba(16,29,39,.08) 12%,#101D27 44%)}
.coast__art{position:absolute;inset:0 0 auto;height:300px;z-index:-2}.coast__art img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.stage--portal .stage__in{padding:156px 20px 28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body";gap:18px}
.coast .kicker{font-size:10px;letter-spacing:.12em;color:#E1EBEA}.edition-line{width:25px;height:1px;background:var(--accent);flex:none}
.coast .display{font-size:clamp(2.65rem,11.8vw,4.2rem);line-height:1.08;color:#F7F0E5}.coast .display em{font-style:normal;color:#FFAD93}
.coast .lead{font-size:15px;line-height:1.6;color:#D6E0E2;max-width:30rem;margin-bottom:20px}
.coast .stage__cta{gap:8px}.coast .btn--quiet{color:#F7F0E5}.coast .btn--primary{background:#FF997F;color:#241510}.coast .btn--primary:hover{background:#FFB39E}
.coast__status{font-size:11px;line-height:1.55;color:#B7C9CE;max-width:27rem;margin:16px 0 0;position:relative;padding-left:12px}
.coast__status>span{position:absolute;left:0;top:5px;width:5px;height:5px;border-radius:50%;background:#66D6C5}
.coast .stage__facts{color:#B7C9CE;margin-top:12px}
.coast__caption{position:absolute;top:16px;right:16px;margin:0;display:flex;flex-direction:column;align-items:flex-end;color:#FFF5E9;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.coast__caption span{font-size:9px;font-weight:400;letter-spacing:.02em;text-transform:none}
.coast-route{background:var(--bg-2);border-block:1px solid var(--line)}.coast-route>div{display:flex;align-items:center;overflow-x:auto;max-width:var(--w-wide);margin:auto;padding:0 20px;gap:24px;scrollbar-width:thin}
.coast-route__label{display:none;color:var(--text-3);font-size:10px;letter-spacing:.12em;white-space:nowrap}
.coast-route a{display:flex;align-items:center;gap:8px;flex:none;min-height:60px;color:var(--text);font-size:12px;font-weight:600;text-decoration:none}
.coast-route a span{font-size:10px;font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}.coast-route a:hover{color:var(--accent)}
.place-atmosphere{overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}.place-atmosphere img{width:100%;object-fit:cover}.place-atmosphere>figcaption{padding:10px 14px;font-size:11px;color:var(--text-2);letter-spacing:.03em}

@media(min-width:960px){
 .head__in{padding-inline:28px}.head .nav{margin-left:18px}.head .nav a{padding-inline:10px;font-size:13px}.cd{font-size:11px}.head .btn{font-size:12px;padding-inline:14px}
 .stage__in{padding:40px 28px 56px}.stage--text .stage__in{padding-top:38px;padding-bottom:56px}.stage--text .stage__head,.stage--text .stage__body{max-width:48rem}
 .coast__art{inset:0 0 0 36%;height:auto}.coast__art img{object-position:60% center}
 .coast::after{background:linear-gradient(90deg,#101D27 0%,#101D27 30%,rgba(16,29,39,.95) 39%,rgba(16,29,39,.45) 55%,rgba(16,29,39,0) 75%),linear-gradient(0deg,rgba(16,29,39,.45),transparent 30%)}
 .stage--portal .stage__in{min-height:570px;padding:68px 28px 50px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"head ." "body .";align-content:center;gap:24px}
 .coast .display{font-size:clamp(3.8rem,5.35vw,5.5rem);line-height:1.08}.coast .kicker{font-size:11px;margin-bottom:18px}.coast .lead{font-size:17px;max-width:28rem}.coast__status{font-size:12px}.coast .stage__facts{margin-top:20px}
 .coast__caption{top:auto;bottom:25px;right:32px;font-size:14px;letter-spacing:.14em}.coast__caption span{font-size:10px;letter-spacing:.03em}
 .coast-route>div{justify-content:space-between;gap:20px;padding-inline:28px}.coast-route__label{display:block}.coast-route a{min-height:66px}
 
 .stage--coastal .stage__in{grid-template-columns:1fr 1.08fr;column-gap:48px;row-gap:24px}.stage--coastal .lead{font-size:16px}.stage--coastal .display{font-size:clamp(3rem,4.8vw,4.5rem)}
}
/* Daylight keeps the art in its own frame and the reading surfaces warm. */
[data-theme="tag"] .coast{--accent:#A73B32;background:#F5F0E7}
[data-theme="tag"] .coast::after{background:linear-gradient(180deg,rgba(245,240,231,0) 0%,rgba(245,240,231,.1) 12%,#F5F0E7 44%)}
[data-theme="tag"] .coast .display{color:#182D37}[data-theme="tag"] .coast .display em{color:#AA3E34}
[data-theme="tag"] .coast .lead,[data-theme="tag"] .coast .kicker,[data-theme="tag"] .coast .btn--quiet{color:#243C49}
[data-theme="tag"] .coast__status,[data-theme="tag"] .coast .stage__facts{color:#49616E}
[data-theme="tag"] .coast .btn--primary{background:#AA3E34;color:white}[data-theme="tag"] .coast .btn--primary:hover{background:#892E27}
[data-theme="tag"] .coast__status>span{background:#14776D}
@media(min-width:960px){[data-theme="tag"] .coast::after{background:linear-gradient(90deg,#F5F0E7 0%,#F5F0E7 30%,rgba(245,240,231,.97) 39%,rgba(245,240,231,.45) 55%,rgba(245,240,231,0) 75%)}}
@media(prefers-reduced-motion:reduce){.btn,.iconbtn,.place,.sheet,.place img{transition:none!important;animation:none!important}.place:hover img{transform:none}}
.coast__caption{background:rgba(16,29,39,.92);padding:8px 10px;border-left:2px solid #FF997F;text-shadow:none}.coast .kicker{width:fit-content;background:var(--bg);padding:5px 8px;margin-left:-8px;border-radius:2px}
@media(max-width:959px){.coast .lead{font-size:16px}.coast__status{font-size:12px}.coast__caption span{font-size:10px}}

.stage::before{content:"";position:absolute;z-index:-1}

/* =====================================================================
   Block 9 · Küstenabend über die ganze Seite (lokaler Entwurf, 25.09.2026)
   ---------------------------------------------------------------------
   Flächensystem: Bildbühnen (.stage--art, .scene), farbige Abschnitte
   (.zone--lagune, .zone--abend, .band, .band--koralle, .apart) und ruhige
   Leseflächen (.read mit Anton-Überschriften und Kapitelköpfen .chap).
   Art-déco-Details aus eigenen SVG-Masken: Raute, Sonnenfächer, Wellen,
   Horizont mit Palmen, Palmwedel (Block 6/7). Farben kommen immer aus CSS;
   Abend (Standard) und Tag sind beide gepflegt. Bilder: eigene Illustrationen,
   sichtbar als «Freie Illustration · keine Spielszene» gekennzeichnet.
   ===================================================================== */
:root{
  /* Palmwedel aus Block 6/7 (frond.py); fehlte seit Block 8, daher dunkles Rechteck in der Fußzeile */
  --frond-c:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 520%22%3E%3Cpath transform=%22matrix(-1 0 0 1 600 0)%22 d=%22M34.8 502.2 L40.7 489.5 L47 476.7 L53.6 463.9 L60.4 451.1 L67.5 438.3 L74.9 425.6 L82.6 412.8 L90.7 400.1 L99 387.4 L107.7 374.7 L116.8 362.2 L126.1 349.7 L135.9 337.2 L146 324.9 L156.4 312.7 L167.2 300.6 L178.5 288.6 L190.1 276.7 L202.1 265 L214.5 253.5 L227.3 242.1 L240.6 230.9 L254.3 219.8 L268.4 209 L283 198.4 L298 188 L313.5 177.8 L329.4 167.8 L345.8 158.1 L362.8 148.7 L380.2 139.5 L398.1 130.6 L416.5 122 L435.4 113.7 L454.9 105.7 L474.8 98 L495.3 90.7 L516.4 83.7 L538 77 L560.2 70.7 L559.8 69.3 L537.5 75.4 L515.8 81.8 L494.6 88.6 L474 95.8 L453.9 103.3 L434.3 111.1 L415.2 119.2 L396.7 127.6 L378.6 136.4 L361 145.4 L343.9 154.7 L327.3 164.2 L311.1 174 L295.4 184.1 L280.2 194.4 L265.4 204.9 L251 215.6 L237.1 226.6 L223.6 237.7 L210.5 249 L197.8 260.5 L185.6 272.2 L173.7 284 L162.2 295.9 L151.1 308 L140.4 320.2 L130 332.5 L120 344.9 L110.3 357.4 L101 369.9 L92 382.6 L83.4 395.3 L75.1 408 L67.1 420.8 L59.4 433.6 L52 446.5 L44.9 459.3 L38.1 472.2 L31.5 485 L25.2 497.8Z M56.3 453.7 Q122.3 459.9 176.2 486.7 Q122.1 454.1 56 444Z M60.4 446.4 Q30.2 407 4.3 395.2 Q25.1 409.9 52 451.2Z M67.3 434.4 Q132.3 441.1 185.4 467.8 Q132.1 435.3 67 424.9Z M71.4 427.4 Q38 377.9 9.4 361.9 Q32.8 380.5 62.9 431.9Z M78.9 415.3 Q145.4 422.7 199.7 450.6 Q145.3 417 78.7 405.8Z M83.1 408.6 Q53.1 358.5 27.5 341.6 Q48 360.9 74.5 412.5Z M91.2 396.2 Q156.6 404.1 210.2 432 Q156.6 398.4 91.1 386.8Z M95.5 389.7 Q68.1 337.3 44.4 318.9 Q62.8 339.4 86.8 393.2Z M104.2 377.2 Q176.8 386.9 236.2 418.8 Q176.8 381.3 104.2 367.9Z M108.6 371.1 Q84.8 318.4 64.1 299.3 Q79.5 320.2 99.8 374.1Z M118 358.4 Q196.8 369.9 261.2 405.5 Q196.8 364.5 118.1 349.2Z M122.4 352.5 Q99.9 293 80.2 270.6 Q94.6 294.5 113.7 355.1Z M132.6 339.7 Q216.1 353.1 284.5 391.9 Q216.2 347.7 132.8 330.7Z M137.1 334.1 Q116.8 268.5 99 243.3 Q111.5 269.8 128.3 336.2Z M147.9 321.2 Q225.7 334.6 289.3 371.3 Q225.8 329.3 148.2 312.3Z M152.5 316 Q135.5 245.5 120.4 217.9 Q130.2 246.5 143.7 317.6Z M164.1 303.1 Q243.6 317.9 308.7 356.4 Q243.9 312.6 164.5 294.3Z M168.7 298.1 Q156.9 232 146.1 205.7 Q151.7 232.7 160 299.2Z M181.2 285.1 Q260.6 301.1 325.7 340.6 Q261 295.9 181.7 276.5Z M185.8 280.5 Q178.1 212.5 170.7 185.2 Q172.9 212.9 177.1 281.1Z M199.1 267.6 Q283.7 286 353.1 329.3 Q284.2 280.8 199.8 259Z M203.7 263.2 Q200.5 195.1 196.7 167.5 Q195.3 195.1 195.1 263.4Z M217.9 250.3 Q301.8 269.9 370.6 313.9 Q302.3 264.8 218.7 241.9Z M222.5 246.2 Q223.9 173.6 223.9 144.2 Q218.9 173.5 214.1 245.9Z M237.7 233.5 Q321.4 254.3 390 299.5 Q321.9 249.4 238.6 225.2Z M242.3 229.7 Q248.4 158 252.2 128.9 Q243.4 157.5 234 228.9Z M258.4 217 Q332.8 236.7 393.9 277.6 Q333.5 231.8 259.4 208.8Z M263 213.5 Q273 146.9 280.1 120 Q268.1 146.2 254.8 212.3Z M280.1 201 Q356.7 222.6 419.5 266 Q357.4 217.8 281.2 193Z M284.6 197.8 Q297.3 139.2 306.5 115.7 Q292.5 138.2 276.7 196.2Z M302.8 185.6 Q379.3 208.5 442 252.9 Q380 203.7 304 177.6Z M307.3 182.6 Q324.3 123.2 337.2 99.6 Q319.7 121.9 299.5 180.6Z M326.5 170.6 Q394.9 192.1 451 232.6 Q395.7 187.4 327.9 162.8Z M331 167.9 Q351.9 109.6 368.1 86.9 Q347.4 108.2 323.4 165.5Z M351.3 156.2 Q417.5 178.1 471.9 218.4 Q418.4 173.6 352.8 148.6Z M355.7 153.8 Q377.8 102.7 394.8 83.2 Q373.4 101 348.4 151Z M377.2 142.4 Q443.1 165.4 497.3 206.5 Q444.1 160.9 378.8 134.9Z M381.5 140.2 Q406.1 91.9 425.4 74 Q401.9 90 374.5 137.1Z M404.2 129.2 Q464.5 151.2 514.1 189.6 Q465.5 146.8 405.9 121.8Z M408.4 127.3 Q436.1 80.6 457.9 63.9 Q432.1 78.5 401.7 123.8Z M432.3 116.7 Q490.3 138.8 538 176.5 Q491.4 134.4 434.1 109.5Z M436.4 115 Q464.5 73.6 486.7 59.4 Q460.7 71.4 430 111.2Z M461.6 104.9 Q510 123.9 549.8 155.7 Q511.1 119.6 463.4 97.8Z M465.6 103.4 Q495.2 65.1 518.7 52.6 Q491.6 62.7 459.4 99.3Z M492 93.8 Q541.6 114.1 582.4 147.5 Q542.8 109.9 494 86.8Z M495.9 92.5 Q522.7 61.7 543.8 52.1 Q519.2 59.1 490.1 88.2Z M523.7 83.5 Q568 102.2 604.6 132.5 Q569.2 98.1 525.7 76.7Z M527.4 82.4 Q556.9 52.4 580.3 43.9 Q553.6 49.7 522 77.8Z%22/%3E%3C/svg%3E");
  --deco-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 10'%3E%3Cpath d='M0 4.4h60v1.2H0z'/%3E%3Cpath d='M68 0.6l4.4 4.4L68 9.4 63.6 5z'/%3E%3C/svg%3E");
  --horizon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1440 96' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cpath d='M-2.2 0C-1 26 2.5 58 1 90h6C8.6 58 4.6 26 3 0z'/%3E%3Cpath d='M0 0C14-9 33-6 46 11 31 3 16 1.6 0 3.4z'/%3E%3Cpath d='M0 0C10-15 27-19 40-12 25-10.5 12-6.5 0 1.4z'/%3E%3Cpath d='M0 0C-14-9-33-6-46 11-31 3-16 1.6 0 3.4z'/%3E%3Cpath d='M0 0C-10-15-27-19-40-12-25-10.5-12-6.5 0 1.4z'/%3E%3Cpath d='M0 0C-2-13 4-23 13-27 8-19 5.6-9 2 1z'/%3E%3Cpath d='M0 0C18 2 31 12 35 27 25 15 14 8.4 0 3.4z'/%3E%3Cpath d='M0 0C-18 2-31 12-35 27-25 15-14 8.4 0 3.4z'/%3E%3C/g%3E%3C/defs%3E%3Crect x='0' y='76' width='150' height='20'/%3E%3Crect x='150' y='66' width='70' height='30'/%3E%3Crect x='220' y='80' width='90' height='16'/%3E%3Crect x='310' y='52' width='38' height='44'/%3E%3Crect x='348' y='68' width='60' height='28'/%3E%3Crect x='408' y='78' width='120' height='18'/%3E%3Crect x='528' y='60' width='44' height='36'/%3E%3Crect x='572' y='72' width='80' height='24'/%3E%3Crect x='652' y='82' width='140' height='14'/%3E%3Crect x='792' y='66' width='56' height='30'/%3E%3Crect x='848' y='44' width='34' height='52'/%3E%3Crect x='882' y='70' width='70' height='26'/%3E%3Crect x='952' y='78' width='120' height='18'/%3E%3Crect x='1072' y='62' width='48' height='34'/%3E%3Crect x='1120' y='74' width='90' height='22'/%3E%3Crect x='1210' y='56' width='40' height='40'/%3E%3Crect x='1250' y='80' width='110' height='16'/%3E%3Crect x='1360' y='68' width='80' height='28'/%3E%3Cpath d='M318 96V40h6v-8h8v-10h4v10h8v8h6v56z'/%3E%3Cpath d='M856 96V36h4v-6h6v-6h2v-16h2v16h2v6h6v6h4v60z'/%3E%3Cpath d='M1214 96V50c0-7 8-12 16-12s16 5 16 12v46z'/%3E%3Cuse href='%23p' transform='translate(96 18.6) scale(0.86)'/%3E%3Cuse href='%23p' transform='translate(168 36.6) scale(0.66)'/%3E%3Cuse href='%23p' transform='translate(590 13.2) scale(0.92)'/%3E%3Cuse href='%23p' transform='translate(640 33.0) scale(0.7)'/%3E%3Cuse href='%23p' transform='translate(1000 42.0) scale(0.6)'/%3E%3Cuse href='%23p' transform='translate(1178 15.0) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(1300 29.4) scale(0.74)'/%3E%3Cuse href='%23p' transform='translate(1395 40.2) scale(0.62)'/%3E%3Crect y='94' width='1440' height='2'/%3E%3C/svg%3E");
  --waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 15c20-6 40-6 60 0s40 6 60 0 40-6 60 0 40 6 60 0'/%3E%3Cpath d='M0 45c20 6 40 6 60 0s40-6 60 0 40 6 60 0 40-6 60 0' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --sunburst:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M100 100L0.1 96.2A100 100 0 0 1 2.1 79.8z'/%3E%3Cpath d='M100 100L3.9 72.4A100 100 0 0 1 9.7 57.0z'/%3E%3Cpath d='M100 100L13.3 50.2A100 100 0 0 1 22.7 36.6z'/%3E%3Cpath d='M100 100L27.7 30.9A100 100 0 0 1 40.1 19.9z'/%3E%3Cpath d='M100 100L46.4 15.6A100 100 0 0 1 61.0 7.9z'/%3E%3Cpath d='M100 100L68.2 5.2A100 100 0 0 1 84.1 1.3z'/%3E%3Cpath d='M100 100L91.8 0.3A100 100 0 0 1 108.2 0.3z'/%3E%3Cpath d='M100 100L115.9 1.3A100 100 0 0 1 131.8 5.2z'/%3E%3Cpath d='M100 100L139.0 7.9A100 100 0 0 1 153.6 15.6z'/%3E%3Cpath d='M100 100L159.9 19.9A100 100 0 0 1 172.3 30.9z'/%3E%3Cpath d='M100 100L177.3 36.6A100 100 0 0 1 186.7 50.2z'/%3E%3Cpath d='M100 100L190.3 57.0A100 100 0 0 1 196.1 72.4z'/%3E%3Cpath d='M100 100L197.9 79.8A100 100 0 0 1 199.9 96.2z'/%3E%3C/svg%3E");
  --read-cols:[full-start] minmax(var(--s4),1fr) [wide-start] minmax(0,7rem) [text-start] min(var(--w-text),calc(100% - 2 * var(--s4))) [text-end] minmax(0,7rem) [wide-end] minmax(var(--s4),1fr) [full-end];
  --night:#0A141B;
}

/* Einstieg: Titelzeilen brechen nie um (auch nicht in der Ersatzschrift, bis Anton geladen ist), damit nichts springt */
.coast .display{white-space:nowrap}
/* Abschnitte unterhalb der ersten Ansicht erst rendern, wenn sie in die Nähe kommen (weniger Arbeit beim Kartenstart) */
.sect,.scene{content-visibility:auto}
/* Platzhalterhöhen = gemessene Höhen (390/768/1440 px), damit sich beim Nachrendern nichts verschiebt */
.sect.zone--lagune{contain-intrinsic-size:auto 1320px}
.scene{contain-intrinsic-size:auto 724px}
.sect:not(.zone):not(.sect--faq){contain-intrinsic-size:auto 2690px}
.sect.zone--abend{contain-intrinsic-size:auto 870px}
.sect--faq{contain-intrinsic-size:auto 620px}
@media(min-width:640px){.sect:not(.zone):not(.sect--faq){contain-intrinsic-size:auto 1520px}.sect.zone--abend{contain-intrinsic-size:auto 590px}.sect--faq{contain-intrinsic-size:auto 550px}.scene{contain-intrinsic-size:auto 666px}}
@media(min-width:960px){.sect:not(.zone):not(.sect--faq){contain-intrinsic-size:auto 1210px}.sect.zone--abend{contain-intrinsic-size:auto 820px}.sect--faq{contain-intrinsic-size:auto 530px}.scene{contain-intrinsic-size:auto 613px}.sect.zone--lagune{contain-intrinsic-size:auto 1160px}}

/* ---------- Überschriften im Lesebereich: Anton mit Art-déco-Raute ---------- */
.read h2{margin:var(--s8) 0 var(--s4);font:400 clamp(1.95rem,1.45rem + 1.9vw,2.6rem)/1.08 var(--font-display);letter-spacing:.012em}
.read h2::before{content:"";display:block;width:76px;height:10px;margin:0 0 16px;background:var(--accent);
  -webkit-mask:var(--deco-rule) 0 0/76px 10px no-repeat;mask:var(--deco-rule) 0 0/76px 10px no-repeat}
.read h2:first-child{margin-top:0}
.read h3{letter-spacing:-.01em}
.read--legal h2{font:700 var(--fs-lg)/1.3 var(--font-body);letter-spacing:-.01em;margin-top:var(--s7)}
.read--legal h2::before,.mk-list h2::before{display:none}
/* Kapitelkopf: Nummer in Anton, Raute, Stichwort */
.chap{display:flex;align-items:center;gap:12px;margin:var(--s8) 0 var(--s3);font:700 .75rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.chap b{display:inline-flex;align-items:center;gap:12px;font:400 1.75rem/1 var(--font-display);letter-spacing:.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.chap b::after{content:"";width:48px;height:7px;background:currentColor;-webkit-mask:var(--deco-rule) 0 0/48px 7px no-repeat;mask:var(--deco-rule) 0 0/48px 7px no-repeat}
.read .chap,.zone .chap{margin:var(--s8) 0 var(--s3)}
.read .chap+h2{margin-top:0}
.chap+h2::before{display:none}
.read>.chap:first-child,.zone>.chap:first-child{margin-top:0}

/* ---------- Farbige Abschnitte ---------- */
.read,.read>.zone{grid-template-columns:var(--read-cols)}
.zone{position:relative;isolation:isolate;overflow:hidden;color:var(--text)}
.zone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.read>.zone{grid-column:full;display:grid;margin:var(--s8) 0;padding:clamp(56px,8vw,104px) 0}
.zone>*{grid-column:text;min-width:0}
.zone>.wide,.zone>.mapfig{grid-column:wide}
.zone p{color:var(--text-2)}
.zone strong,.zone b{color:var(--text)}
.zone--lagune{--text:#F1FAF7;--text-2:#C4E5DE;--text-3:#A2CFC7;--line:rgba(150,224,210,.2);--line-2:rgba(150,224,210,.36);
  --bg-2:rgba(4,22,28,.5);--surface:rgba(255,255,255,.07);--focus:#FFE3D6;
  background:#0E3D47}
.zone--lagune::before{background:rgba(120,226,208,.11);-webkit-mask:var(--waves) 0 0/360px 90px repeat;mask:var(--waves) 0 0/360px 90px repeat}
.zone--abend{--text:#FFF4EE;--text-2:#F0D6D8;--text-3:#DDBEC5;--line:rgba(255,205,195,.2);--line-2:rgba(255,205,195,.34);
  --bg-2:rgba(18,10,30,.45);--surface:rgba(255,255,255,.07);--focus:#FFE3D6;
  background:#2A1C40}
.zone--abend::before{background:rgba(255,196,170,.06);-webkit-mask:var(--sunburst) 50% 100%/min(1200px,150%) auto no-repeat;mask:var(--sunburst) 50% 100%/min(1200px,150%) auto no-repeat}
[data-theme="tag"] .zone--lagune{--text:#0E2E36;--text-2:#2A4C55;--text-3:#3E6068;--line:rgba(16,106,100,.2);--line-2:rgba(16,106,100,.34);
  --bg-2:rgba(255,255,255,.66);--surface:rgba(255,255,255,.5);--focus:#A73B32;
  background:#D6EEE8}
[data-theme="tag"] .zone--lagune::before{background:rgba(18,124,119,.16)}
[data-theme="tag"] .zone--abend{--text:#2A1622;--text-2:#513442;--text-3:#664755;--line:rgba(120,50,60,.18);--line-2:rgba(120,50,60,.3);
  --bg-2:rgba(255,255,255,.6);--surface:rgba(255,255,255,.45);--focus:#A73B32;
  background:#F8E2D8}
[data-theme="tag"] .zone--abend::before{background:rgba(167,59,50,.08)}

/* Karten-Hinweisband: Lagune (Karte = Küste); Koralle nur für den einen Aufruf je Seite */
.band{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:var(--r-lg);padding:28px 24px;
  --text:#F1FAF7;--text-2:#C4E5DE;--focus:#FFE3D6;color:var(--text);
  background:#0D3B45}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(120,226,208,.13);-webkit-mask:var(--waves) 0 0/300px 75px repeat;mask:var(--waves) 0 0/300px 75px repeat}
.band::after{content:"";position:absolute;right:-56px;bottom:-78px;width:230px;height:200px;z-index:-1;background:rgba(2,18,24,.45);
  -webkit-mask:var(--frond-c) center/contain no-repeat;mask:var(--frond-c) center/contain no-repeat}
.band p{color:var(--text-2)}
.band .band__t{margin-bottom:6px;font:400 1.7rem/1.08 var(--font-display);letter-spacing:.012em;color:var(--text)}
.band--koralle{--text:#241510;--text-2:#44261D;--accent:#241510;--accent-hover:#000;--on-accent:#FFEDE6;--focus:#241510;
  background:#FFA788}
.band--koralle::before{background:rgba(36,21,16,.07)}
.band--koralle::after{background:rgba(36,21,16,.12)}
[data-theme="tag"] .band{--text:#0E2E36;--text-2:#2A4C55;--focus:#A73B32;background:#CDEAE3}
[data-theme="tag"] .band::before{background:rgba(18,124,119,.16)}
[data-theme="tag"] .band::after{background:rgba(18,96,92,.14)}
[data-theme="tag"] .band--koralle{--text:#2A140E;--text-2:#4A2A20;--accent:#2A140E;--on-accent:#FFF1EA;background:#F8C1AA}
[data-theme="tag"] .band--koralle::before{background:rgba(42,20,14,.07)}

/* Abgesetzter Abschnitt (z. B. Spielkauf): Abendkarte mit Sonnenfächer */
.apart{position:relative;overflow:hidden;isolation:isolate;border:0;padding:clamp(24px,4vw,40px);
  --text:#FFF4EE;--text-2:#F0D6D8;--line:rgba(255,205,195,.22);--line-2:rgba(255,205,195,.36);--accent:#FF997F;--focus:#FFE3D6;color:var(--text);
  background:#2A1C40}
.apart::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,196,170,.08);
  -webkit-mask:var(--sunburst) 100% 100%/420px auto no-repeat;mask:var(--sunburst) 100% 100%/420px auto no-repeat}
.apart p{color:var(--text-2)}
.apart__label{color:var(--text-2)}
[data-theme="tag"] .apart{--text:#2A1622;--text-2:#513442;--line:rgba(120,50,60,.2);--line-2:rgba(120,50,60,.32);--accent:#A73B32;--focus:#A73B32;
  background:#F8E2D8}
[data-theme="tag"] .apart::before{background:rgba(167,59,50,.09)}

/* Kleine Flächen im Lesebereich bekommen Licht statt nur Linien */
.pick--facts{margin-bottom:var(--s6);padding:4px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2)}
.pick--facts div:last-child{border-bottom:0}
.calc{background:var(--bg-2)}
.edition{position:relative;overflow:hidden;background:var(--bg-2)}
.edition::before{content:"";position:absolute;right:-30px;top:-14px;width:150px;height:75px;background:rgba(var(--glow),.12);
  -webkit-mask:var(--sunburst) center/contain no-repeat;mask:var(--sunburst) center/contain no-repeat;transform:rotate(180deg)}
.read .price{color:var(--accent)}
.timeline li::after{background:var(--accent)}
.faq summary{min-height:52px}
.faq summary::after{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;color:var(--accent);font-size:1.15rem}
.faq details[open] summary::after{background:var(--surface)}
.note{border-left-color:var(--sea)}
.note--warn{border-left-color:var(--open)}

/* ---------- Bildbühne der Unterseiten ---------- */
.stage--art{--art-h:212px;--art-pos:50% 50%;background:var(--bg)}
.stage--art::before{display:none}
.stage--art .stage__art{position:absolute;inset:0 0 auto;height:var(--art-h);z-index:-2;margin:0}
.stage--art .stage__art img{width:100%;height:100%;object-fit:cover;object-position:var(--art-pos)}
.stage--art::after{content:"";display:block;position:absolute;inset:0;z-index:-1;height:auto;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 8%,transparent) 0,color-mix(in srgb,var(--bg) 42%,transparent) calc(var(--art-h) - 104px),var(--bg) calc(var(--art-h) - 10px))}
.stage--art .stage__in{padding-top:calc(var(--art-h) - 48px)}
.stage--art .crumb,.stage--art .crumb a{color:var(--text)}
.stage--art .kicker{color:var(--text)}
.stage--art .coast__caption{top:12px;right:12px;bottom:auto;font-size:10px}
.stage--art .coast__caption span{font-size:9.5px}
[data-theme="tag"] .stage--art .coast__caption{background:rgba(16,29,39,.92);color:#FFF5E9}
/* Handy: Bild liegt hinter Titel und Einstieg (Schleier), damit die Hauptaktion wie in Block 8 über dem Cookie-Hinweis bleibt */
@media(max-width:639px){
  .stage--art{--art-h:310px}
  .stage--art .stage__in{padding-top:24px;padding-bottom:64px}
  .stage--art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 76%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) calc(var(--art-h) * .34),color-mix(in srgb,var(--bg) 86%,transparent) calc(var(--art-h) * .64),var(--bg) calc(var(--art-h) - 6px))}
  [data-theme="tag"] .stage--art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 66%,transparent) 0,color-mix(in srgb,var(--bg) 62%,transparent) calc(var(--art-h) * .34),color-mix(in srgb,var(--bg) 84%,transparent) calc(var(--art-h) * .64),var(--bg) calc(var(--art-h) - 6px))}
  .stage--art .crumb,.stage--art .kicker,.stage--art .display{text-shadow:0 1px 10px color-mix(in srgb,var(--bg) 70%,transparent)}
  .stage--art .coast__caption{top:auto;bottom:12px}
}
@media(min-width:640px){.stage--art{--art-h:300px}}
@media(min-width:960px){
  .stage--art .stage__art{inset:0 0 0 32%;height:auto}
  .stage--art::after{background:
    linear-gradient(90deg,var(--bg) 0%,var(--bg) 31%,color-mix(in srgb,var(--bg) 86%,transparent) 40%,color-mix(in srgb,var(--bg) 38%,transparent) 57%,color-mix(in srgb,var(--bg) 0%,transparent) 76%),
    linear-gradient(0deg,color-mix(in srgb,var(--bg) 72%,transparent) 0%,color-mix(in srgb,var(--bg) 0%,transparent) 34%)}
  .stage--art .stage__in{min-height:548px;padding-top:64px;padding-bottom:76px;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);grid-template-areas:"head ." "body .";align-content:center}
  .stage--art .stage__head,.stage--art .stage__body{max-width:37rem}
  .stage--art .coast__caption{top:auto;right:28px;bottom:22px;font-size:12px}
  .stage--art .coast__caption span{font-size:10px}
  /* Hub mit Kartenblatt: das Blatt steht rechts auf dem Bild */
  .stage--art .stage__in:has(.stage__map){grid-template-areas:"head map" "body map"}
  .stage--art .stage__map .sheet{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.3)}
}
/* Kategorie-Zeichen wie auf der Karte */
.katmark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:none;background:var(--c);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.katmark svg{width:18px;height:18px}
.stage--art .kicker .katmark{margin-right:4px}
/* ---------- Bildband (Startseite: Release) ---------- */
.scene{position:relative;isolation:isolate;overflow:hidden;--text:#FFF4EE;--text-2:#EADCD6;--accent:#FF997F;--accent-hover:#FFB39E;--on-accent:#241510;--line:rgba(255,255,255,.22);--focus:#FFE3D6;
  background:var(--night);color:var(--text)}
.read>.scene{grid-column:full;margin:0}
.scene__art{position:absolute;inset:0;z-index:-2;margin:0}
.scene__art img{width:100%;height:100%;object-fit:cover;object-position:var(--art-pos,40% 40%)}
.scene__in{position:relative;max-width:var(--w-wide);margin:0 auto;padding:196px 20px 52px}
.scene p{color:var(--text-2)}
.scene .chap{margin-top:0;color:var(--text-2)}
.scene__t{margin:0 0 12px;font:400 1.5rem/1.1 var(--font-display);letter-spacing:.012em;color:var(--text)}
.scene__t b{display:block;font:400 clamp(5.5rem,20vw,9.5rem)/.86 var(--font-display);letter-spacing:.005em;color:var(--accent)}
.scene__meta{margin:0 0 10px;font-weight:700;color:var(--text)!important}
.scene .stage__cta{margin-top:22px}
.scene .btn--quiet{color:var(--text)}
.scene .coast__caption{top:14px;right:14px;bottom:auto}
@media(min-width:960px){
  .scene__art{left:50%}
  .scene__in{display:flex;flex-direction:column;justify-content:center;min-height:580px;padding:88px 28px}
  .scene__in>*{max-width:min(36rem,calc(50% - 56px))}
  .scene .coast__caption{top:auto;bottom:24px;right:28px}
}

/* Handy/Tablet: Bild oben, Text auf ruhigem Abendgrund darunter (Kontrast unabhängig vom Himmel); Desktop: Text links, Bild rechts */
@media(max-width:959px){
  .scene__art{inset:0 0 auto;height:300px}
  .scene__in{padding-top:332px}
}
/* ---------- Startseite unter der Karte: Abschnitte über die volle Breite ---------- */
.sect{position:relative}
.sect__in{max-width:calc(var(--w-wide) + 56px);margin:0 auto;padding:clamp(60px,9vw,112px) var(--s4)}
.sect__in>.chap:first-child,.faq__head>.chap:first-child{margin-top:0}
.sect__t{margin:0 0 var(--s4);font:400 clamp(2.35rem,1.6rem + 3.2vw,3.75rem)/1.02 var(--font-display);letter-spacing:.01em;color:var(--text);text-wrap:balance}
.sect__lead{max-width:40rem;margin:0 0 var(--s5);font-size:1.0625rem;line-height:1.65;color:var(--text-2)}
.sect .cards{margin-top:var(--s5)}
.sect .trailers{margin:var(--s5) 0 0}
.sect .faq p{margin:0 0 var(--s4)}
@media(min-width:960px){
  .sect__in{padding-inline:28px}
  .sect--faq .sect__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);column-gap:72px;align-items:start}
  .sect--faq .faq__head{position:sticky;top:96px}
}
/* Sechs Orte: Bildmosaik mit Ortsfarbe */
.orte{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:var(--s5) 0 10px;padding:0;list-style:none}
.orte>li{min-width:0}
.orte>li:first-child,.orte>li:last-child{grid-column:1/-1}
.ort{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:178px;overflow:hidden;isolation:isolate;
  border-radius:10px;background:var(--night);color:#FFF4EE;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -24px rgba(0,0,0,.7)}
.orte>li:first-child .ort{min-height:300px}
.ort__img{position:absolute;inset:0;z-index:-2}
.ort__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.ort::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:rgb(var(--pl))}
.ort__body{display:block;padding:14px;background:rgba(8,16,22,.86)}
.ort__k{display:flex;align-items:center;gap:8px;font:600 .6875rem/1.25 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#E9E0DB}
.ort__k b{font:400 1rem/1 var(--font-display);letter-spacing:.04em;color:rgb(var(--pl))}
.ort__t{display:block;margin-top:5px;font:400 1.55rem/1.02 var(--font-display);letter-spacing:.012em;color:#FFF8F0}
.ort__d{display:none;margin-top:5px;font-size:.875rem;line-height:1.4;color:#E4DCD8}
.ort:hover{color:#FFF4EE}
.ort:hover .ort__img img{transform:scale(1.045)}
.ort:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}
.place--vice-city{--pl:255,122,150}.place--leonida-keys{--pl:79,217,208}.place--grassrivers{--pl:123,221,163}
.place--port-gellhorn{--pl:255,170,120}.place--ambrosia{--pl:245,200,108}.place--mount-kalaga{--pl:150,206,190}
.art-note{margin:10px 0 0;font-size:.75rem;line-height:1.5;color:var(--text-2)!important}
.read .art-note{margin:calc(-1 * var(--s3)) 0 var(--s5)}
@media(max-width:559px){.orte>li:not(:first-child):not(:last-child) .ort__k span{display:none}}
@media(min-width:560px){.ort__d{display:block}.orte>li:first-child .ort{min-height:340px}.ort{min-height:210px}}
@media(min-width:960px){
  .orte{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:218px;gap:14px}
  .orte>li:first-child{grid-column:1/4;grid-row:1/3}
  .orte>li:nth-child(2),.orte>li:nth-child(3){grid-column:4/7}
  .orte>li:nth-child(n+4){grid-column:span 2}
  .orte>li:first-child .ort{min-height:0}
  .ort{min-height:0}
  .ort__body{padding:18px 20px}
  .ort__t{font-size:2.1rem}
  .orte>li:first-child .ort__t{font-size:3.6rem}
  .orte>li:first-child .ort__d{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.ort__img img{transition:none}.ort:hover .ort__img img{transform:none}}

/* Guides als Postkarten */
.cards--post .card{padding:0;overflow:hidden;gap:0;min-height:0}
.card__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--night)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.card:hover .card__img img{transform:scale(1.045)}
.card__txt{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 20px 18px}
/* Nachtrag: Countdown-Kachel mit Pier-Motiv und lesbarer Tagesanzeige über dem Bild; Preload-Kachel mit Nachtmotiv (Startseite und Guides-Hub) */
.card__img--pier img{object-position:50% 62%}
.card__days{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:10px;padding:12px 20px 14px;color:#FFF4EE;
  background:rgba(16,17,40,.84)}
.card__days b{font:400 4.6rem/.8 var(--font-display);color:#FF997F;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.card__days span{margin-bottom:6px;font:700 .8125rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.65)}
.card:hover .card__days b{color:#FFB39E}
.card__img--nacht img{object-position:50% 40%}
@media(prefers-reduced-motion:reduce){.card__img img{transition:none}.card:hover .card__img img{transform:none}}

/* Trailer als Bildschirme auf dem Abendabschnitt */
.trailers--screens{gap:18px}
.trailers--screens .vid{border-radius:16px;border:1px solid rgba(255,214,200,.3);
  background:#2A1C40;
  box-shadow:inset 0 0 0 7px rgba(8,6,16,.4),0 26px 60px -24px rgba(0,0,0,.65)}
.trailers--screens .vid::after{content:"";position:absolute;left:10%;right:10%;bottom:25%;height:1px;z-index:1;background:rgba(255,153,127,.5)}
.trailers--screens .vid .ph{z-index:2}
.trailers--screens .vid iframe{z-index:3}
.trailers--screens .vid .lbl{font:400 1.5rem/1 var(--font-display);letter-spacing:.03em;color:#FFF4EE}
.trailers--screens .vid .hint{color:#EBD3D6}
.trailers--screens .vid:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
[data-theme="tag"] .trailers--screens .vid{border-color:rgba(120,50,60,.25)}

/* ---------- Lösungsbuch: Kapitelverzeichnis und Werkzeuge ---------- */
.kapitel{grid-column:wide;margin:0 0 var(--s7);padding:18px 0 6px;border-top:1px solid var(--line)}
.kapitel__t{margin:0 0 6px!important;font:700 .75rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.kapitel ol{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;margin:0;padding:0;list-style:none}
.kapitel li{display:flex}
.kapitel a{flex:1;display:flex;align-items:center;gap:14px;min-height:50px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600;font-size:.9375rem;line-height:1.3}
.kapitel a b{flex:none;min-width:1.7em;font:400 1.4rem/1 var(--font-display);color:var(--accent);font-variant-numeric:tabular-nums}
.kapitel a:hover{color:var(--accent)}
@media(min-width:640px){.kapitel ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.kapitel ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tiles{grid-column:wide;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--s4) 0 var(--s6);padding:0;list-style:none}
.tiles>li{min-width:0}
.tiles a{display:flex;flex-direction:column;gap:6px;height:100%;min-height:138px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);color:var(--text);text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.tiles a:hover{border-color:var(--accent);color:var(--text)}
.tiles__ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:10px;background:var(--c);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tiles__ic svg{width:22px;height:22px}
.tiles__t{font-weight:700;font-size:1rem;line-height:1.25}
.tiles__d{font-size:.8125rem;line-height:1.45;color:var(--text-2)}
.tiles__main{grid-column:1/-1}
.tiles__main a{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:center;column-gap:18px;row-gap:4px;padding:18px;border-color:transparent;
  --text:#F1FAF7;--text-2:#C4E5DE;color:var(--text);background:#0D3C46}
.tiles__main a:hover{border-color:var(--accent);color:var(--text)}
.tiles__sheet{grid-row:1/5;align-self:center;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.3)}
.tiles__sheet img{width:100%;height:auto;aspect-ratio:720/1338;object-fit:cover}
.tiles__k{font:700 .6875rem/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#9FE3D7}
.tiles__main .tiles__t{font:400 1.7rem/1.05 var(--font-display);letter-spacing:.012em}
.tiles__go{margin-top:6px;font-weight:700;font-size:.875rem;color:#FF997F}
[data-theme="tag"] .tiles__main a{--text:#0E2E36;--text-2:#2A4C55;background:#CDEAE3}
[data-theme="tag"] .tiles__k{color:#146A63}
[data-theme="tag"] .tiles__go{color:#8E2F27}
@media(min-width:720px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .tiles__main{grid-column:1/3;grid-row:1/3}
  .tiles__main a{grid-template-columns:128px minmax(0,1fr);align-content:center;padding:22px}
}

.regnav--zone{grid-area:auto;grid-column:text;margin-top:var(--s5)}
.zone .regnav a{background:var(--bg-2)}
.apart>.chap:first-child{margin-top:0}
.stage--art .stage__art img{transform:scaleX(var(--art-flip,1))}
.stage--art .stage__art::after{content:"";position:absolute;inset:0;background:rgba(var(--kat,0,0,0),var(--kat-a,0));mix-blend-mode:soft-light}
.stage--art[style*="--kat:"]{--kat-a:.3}
.apart h2::before{display:none}
.stage--art .lead{color:var(--text)}
/* Weiter stöbern: Links als Chips mit 44-px-Zielen */
.related{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px}
.related a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:99px;background:var(--bg-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--text);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.related a:hover{border-color:var(--accent);color:var(--text)}
@media(min-width:720px){.tiles--kat{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Tabellen als ruhige Karten; Kopfzeile im Licht der Ortsfarbe */
.read table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.read th,.read td{padding:12px 16px}
.read th{background:rgba(var(--place,var(--glow)),.14);color:var(--text)}
.read tr:last-child td{border-bottom:0}
/* Kartenlegende auf der Bildbühne (Fundorte): als Chip, damit sie auf dem Bild in beiden Ansichten lesbar bleibt */
.stage--art .stage__map .stage__note{display:table;margin:14px auto 0;padding:6px 10px;border-radius:6px;background:rgba(10,20,27,.86);color:#E9E2D8}
.stage--art .stage__map .stage__note a{color:#FFFFFF}
/* Helle Ansicht: dunklere Kleinschrift im Einstieg, leichterer Schatten des Cookie-Hinweises, 404-Links kräftiger */
[data-theme="tag"] .coast .stage__facts{color:#2F4450}
[data-theme="tag"] .coast__status{color:#344B57}
[data-theme="tag"] .cc-bar{box-shadow:0 -6px 22px rgba(60,40,30,.12)}
/* ---------- Regionsseiten: Ortsbild in der Bühne, Ortsfarbe als Licht ---------- */
.stage--coastal{background:var(--bg)}
.stage--coastal .display{color:rgb(var(--place,var(--glow)))}
.place-atmosphere{position:relative;border-radius:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(var(--place,var(--glow)),.45)}
.place-atmosphere::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;z-index:1;border-radius:0 0 3px 3px;background:rgb(var(--place,var(--glow)))}
.place-atmosphere img{aspect-ratio:3/2}
[data-theme="tag"] .stage--coastal .display{color:rgb(var(--place,var(--glow)))}

/* ---------- Regionen-Hub: farbige Kartenbühne ---------- */
.stage--lagune{--text:#F1FAF7;--text-2:#C4E5DE;--text-3:#A2CFC7;--line:rgba(150,224,210,.22);--bg-2:rgba(4,22,28,.55);--focus:#FFE3D6;
  background:#0E3D47;color:var(--text)}
.stage--lagune::before{display:block;content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;border:0;border-radius:0;opacity:1;transform:none;
  background:rgba(120,226,208,.13);-webkit-mask:var(--waves) 0 0/360px 90px repeat;mask:var(--waves) 0 0/360px 90px repeat}
.stage--lagune .lead{color:var(--text-2)}
.stage--lagune .crumb,.stage--lagune .crumb a,.stage--lagune .kicker,.stage--lagune .stage__facts{color:var(--text-2)}
.stage--lagune .regnav a{background:rgba(4,22,28,.5)}
[data-theme="tag"] .stage--lagune{--text:#0E2E36;--text-2:#2A4C55;--text-3:#3E6068;--line:rgba(16,106,100,.2);--bg-2:rgba(255,255,255,.66);--focus:#A73B32;
  background:#D6EEE8}
[data-theme="tag"] .stage--lagune::before{background:rgba(18,124,119,.16)}
[data-theme="tag"] .stage--lagune .regnav a{background:rgba(255,255,255,.7)}
.places .place__img img{aspect-ratio:3/2}
.places--art{column-gap:var(--s5);row-gap:var(--s6)}
.places--art .place__body{padding:var(--s5)}
.places--art .place__t{margin:8px 0 6px}
.places--art .place__k::before{background:rgb(var(--place))}

/* ---------- Rechtsseiten und 404: farbige Bühne ohne Bild ---------- */
.read--legal::before{content:"";grid-column:full;order:-1;height:112px;margin:calc(-1 * var(--s4)) 0 var(--s5);
  background:#2E1D42}
.read--legal{position:relative}
.read--legal::after{content:"";position:absolute;left:0;right:0;top:72px;height:40px;background:var(--bg);pointer-events:none;
  -webkit-mask:var(--horizon) bottom center/auto 40px repeat-x;mask:var(--horizon) bottom center/auto 40px repeat-x}
[data-theme="tag"] .read--legal::before{background:#F8E2D8}
.stage--oops{--text:#FFF4EE;--text-2:#F0D6D8;--accent:#FF997F;--focus:#FFE3D6;color:var(--text);
  background:#271B3E}
.stage--oops::before{display:block;content:"";position:absolute;left:50%;bottom:0;top:auto;right:auto;width:min(980px,150%);height:auto;aspect-ratio:2/1;z-index:-1;border:0;border-radius:0;opacity:1;
  transform:translateX(-50%);background:rgba(255,196,170,.08);-webkit-mask:var(--sunburst) center/contain no-repeat;mask:var(--sunburst) center/contain no-repeat}
.stage--oops .oops p{color:var(--text-2)}
[data-theme="tag"] .stage--oops{--text:#2A1622;--text-2:#513442;--accent:#8A2C24;--focus:#8A2C24;
  background:#F8E2D8}
[data-theme="tag"] .stage--oops::before{background:rgba(167,59,50,.1)}

/* ---------- Fußzeile: Horizont mit Palmen, Wedel wieder da (Block-8-Fehler) ---------- */
.foot{--text:#F5EEE4;--text-2:#D7DFE2;--text-3:#C4CFD3;--line:rgba(255,255,255,.12);--accent:#FF997F;--accent-hover:#FFB39E;--focus:#FFD0BC;
  padding-top:112px;border-top:0;background:var(--night);color:var(--text)}
.foot::after{content:"";position:absolute;left:0;right:0;top:0;height:112px;pointer-events:none;
  background:#56284D}
.foot__in{z-index:1}
.foot__in::before{content:"";position:absolute;left:50%;top:-80px;width:100vw;height:80px;margin-left:-50vw;background:var(--night);
  -webkit-mask:var(--horizon) bottom center/auto 80px repeat-x;mask:var(--horizon) bottom center/auto 80px repeat-x}
.foot::before{background:rgba(102,214,197,.08)}
.foot .small{color:var(--text-3)}
[data-theme="tag"] .foot::after{background:#EFA995}
@media(prefers-reduced-motion:no-preference){.card,.tiles a{transition:border-color var(--dur) var(--ease)}}

/* =====================================================================
   Block 10 · Leseführung und Präzision (lokaler Entwurf, 26.09.2026)
   Kapitelnavigation (Muster: USWDS «In-page navigation», CC0): ab 1200 px als
   mitlaufende Leiste links neben dem Text, darunter oben im Text plus eine
   kompakte Kapitelleiste unter der Kopfzeile (design.js). Aktuelles Kapitel
   per aria-current. Dazu deutlichere Zwischentitel, nummerierte Listen und
   Regionskarten am Seitenende.
   ===================================================================== */
/* Zwischentitel (h3) im Fließtext: Art-déco-Raute statt nur fetter Schrift */
.read>h3:not([class]),.zone>h3:not([class]){position:relative;margin:var(--s7) 0 var(--s3);padding-left:22px;font:700 1.25rem/1.3 var(--font-body);letter-spacing:-.01em}
.read>h3:not([class])::before,.zone>h3:not([class])::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;transform:rotate(45deg);background:var(--accent)}
.read>h2+h3{margin-top:var(--s5)}

/* Status-Überblick (Muster GOV.UK «Summary list»): Thema, Status als Wort mit Punkt, kurze Erläuterung */
.pick--stand dd{font-weight:400;color:var(--text-2)}
.pick--stand dd .status{margin:0 6px 0 0;vertical-align:1px;font-weight:700;color:var(--text)}
/* Sprungziel mit Kapitelkopf darüber: der Kopf bleibt nach dem Sprung sichtbar */
.read--kapitel .chap+h2[id]{scroll-margin-top:44px}

/* Kapitelverzeichnis: Nummer, Titel, aktuelles Kapitel mit Akzentlinie */
.kapitel a[aria-current="true"]{color:var(--accent)}
.kapitel a[aria-current="true"] b{color:var(--text)}
@media(min-width:1200px){
  /* Eigene Spalte fürs Verzeichnis links; Text und breite Elemente rücken rechts daneben (keine Überlappung) */
  .read--kapitel{position:relative;--read-cols:[full-start] minmax(var(--s4),1fr) [rail-start] 13.5rem [rail-end] 2.5rem [wide-start] minmax(0,4rem)
    [text-start] min(var(--w-text),calc(100% - 2 * var(--s4))) [text-end] minmax(0,7rem) [wide-end] minmax(var(--s4),1fr) [full-end]}
  /* Absolut positioniert in der eigenen Spalte; die Liste darin läuft beim Scrollen mit (sticky) */
  .read--kapitel>.kapitel{grid-column:rail;position:absolute;z-index:1;top:var(--s6);bottom:var(--s8);left:0;right:0;margin:0;padding:0;border:0}
  .kapitel__in{position:sticky;top:92px;max-height:calc(100vh - 116px);overflow:auto;padding:14px 0 6px;border-top:1px solid var(--line)}
  .read--kapitel>.kapitel ol{grid-template-columns:minmax(0,1fr)}
  .read--kapitel>.kapitel a{min-height:44px;padding:6px 0 6px 12px;gap:10px;border-bottom:0;border-left:2px solid var(--line);font-size:.875rem;color:var(--text-2)}
  .read--kapitel>.kapitel a b{min-width:1.6em;font-size:1.05rem;color:var(--text-3)}
  .read--kapitel>.kapitel a:hover{color:var(--text)}
  .read--kapitel>.kapitel a[aria-current="true"]{border-left-color:var(--accent);color:var(--text)}
  .read--kapitel>.kapitel a[aria-current="true"] b{color:var(--accent)}
  .read--kapitel>.kapitel+*{margin-top:0}
}
/* Kompakte Kapitelleiste unter der Kopfzeile (unter 1200 px, sobald das Verzeichnis oben aus dem Bild ist) */
.kbar{position:fixed;top:60px;left:0;right:0;z-index:38;background:var(--head-bg);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kbar details{max-width:var(--w-wide);margin:0 auto}
.kbar summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 var(--s4);cursor:pointer;list-style:none;font-size:.875rem;font-weight:650;color:var(--text)}
.kbar summary::-webkit-details-marker{display:none}
.kbar summary b{flex:none;font:400 1.05rem/1 var(--font-display);letter-spacing:.02em;color:var(--accent)}
.kbar__t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kbar__all{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.kbar__all::after{content:"";width:7px;height:7px;margin-bottom:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.kbar details[open] .kbar__all::after{margin:3px 0 0;transform:rotate(-135deg)}
.kbar summary:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;border-radius:6px}
.kbar ol{max-height:min(60vh,420px);overflow:auto;margin:0;padding:4px var(--s4) 10px;list-style:none;border-top:1px solid var(--line)}
.kbar ol a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--text-2);text-decoration:none;font-size:.9375rem;font-weight:600}
.kbar ol a b{min-width:1.7em;font:400 1.1rem/1 var(--font-display);color:var(--text-3)}
.kbar ol a[aria-current="true"],.kbar ol a:hover{color:var(--text)}
.kbar ol a[aria-current="true"] b{color:var(--accent)}
@media(max-width:1199px){html.has-kbar{scroll-padding-top:124px}}
@media(min-width:1200px){.kbar{display:none}}

/* Nummerierte Liste mit Titelzeile (z. B. offizielle Motive einer Region) */
.read ul.motive{margin:0 0 var(--s5);padding:0;list-style:none;counter-reset:motiv;border-top:1px solid var(--line)}
.motive>li{position:relative;margin:0;padding:14px 0 14px 3.1rem;border-bottom:1px solid var(--line);counter-increment:motiv}
.motive>li::before{content:counter(motiv,decimal-leading-zero);position:absolute;left:0;top:13px;font:400 1.55rem/1.1 var(--font-display);letter-spacing:.02em;color:var(--accent)}
.motive>li>b:first-child{color:var(--text)}

/* Seitenende der Regionen: vorige/nächste Region als Bildkarten (gleiche Karten wie auf der Startseite) */
.prevnext--orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--s6);padding-top:0;border-top:0}
.prevnext--orte .ort{min-height:168px;justify-content:flex-end;gap:0;font-weight:400}
.prevnext--orte .ort:last-child{margin-left:0;text-align:left}
.prevnext--orte .ort__k b{font:inherit;color:rgb(var(--pl))}
.prevnext--orte .ort:hover{color:#FFF4EE}
.prevnext--orte .ort:only-child{grid-column:1/-1}
@media(min-width:760px){.read>.prevnext--orte{grid-column:wide}.prevnext--orte .ort{min-height:210px}}

/* Fundorte: Ziel jeder Kachel steht als Aktion darunter (Seite oder direkt die Karte) */
.tiles__go--map{display:inline-flex;align-items:center;gap:6px;color:var(--sea)}
.tiles__go--map svg{width:16px;height:16px;flex:none}
.tiles--kat .tiles__go{margin-top:auto;padding-top:6px;font-weight:700;font-size:.875rem}
.tiles--kat .tiles__go:not(.tiles__go--map){color:var(--accent)}

/* Lösungsbuch: Fragen am Seitenende als eigener Abschnitt; ab 960 px Kopf mit Stand links (mitlaufend), Fragen rechts */
.read>.read-faq{margin-top:var(--s8)}
.read-faq__head>.chap:first-child{margin-top:0}
.read-faq__head h2{margin-bottom:var(--s3)}
.read-faq__head .stand{margin:0 0 var(--s5);padding-top:var(--s3)}
@media(min-width:960px){
  .read>.read-faq{grid-column:wide;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);column-gap:var(--s7);align-items:start}
  .read-faq__head{position:sticky;top:96px}
}

/* Einstieg Startseite: Fakten (kostenlos, ohne Konto, lokal) lesbarer und mit Punkten; Vorschau-Hinweis ab 601 px in einer Zeile.
   Handy: Textbreite wie bei 390 px, damit Inter und Ersatzschrift gleich viele Zeilen haben (kein Springen beim Schriftwechsel) */
.coast .stage__facts{gap:2px 14px;font-size:12px}
.coast .stage__facts span::before{display:block;width:5px;height:5px;background:var(--sea)}
@media(min-width:601px){.coast__status{max-width:31rem}}
@media(max-width:600px){.coast .stage__body{max-width:22rem}}
/* Handy/Tablet: Bildnachweis leiser, aber erhalten («Freie Illustration · keine Spielszene»; Motivname erst ab 960 px) */
@media(max-width:959px){
  :is(.coast,.stage--art,.scene) .coast__caption{padding:4px 8px;border-left:0;background:rgba(16,29,39,.74);font-size:0}
  :is(.coast,.stage--art,.scene) .coast__caption span{font-size:10px;letter-spacing:.01em}
}

/* Uhrzeit & Preload: Antwort, Hauptaktion, dann Countdown mit Erläuterung (Handy: Aktion bleibt über dem Cookie-Hinweis) */
.stage__cta+.clock{margin-top:var(--s5)}
.stage__cta~.clock__note{margin-bottom:0}

/* Block 11 · Kurze Handys: Hauptaktion über dem offenen Cookie-Hinweis (Hinweis selbst unverändert).
   Startseite: Der Himmel über dem Titel wird genau um so viel schmaler, wie «Karte erkunden» sonst unter den Hinweis
   rutschen würde, höchstens um 100 px. 735 px = Höhe, bei der Block 10 mit 360 px Inhaltsbreite noch 18 px Luft hatte.
   Bild und Schleier rücken mit hoch: Skyline, Titel und Lesbarkeit bleiben wie gehabt, nur oben fehlt etwas Himmel.
   Ab 735 px Höhe (normal hohe Handys), Tablet und Desktop unverändert. svh = Höhe mit eingeblendeter Browserleiste. */
@media (max-width:959px){
  .stage--portal{--himmel-kuerzer:clamp(0px,735px - 100vh,100px)}
  @supports (height:100svh){.stage--portal{--himmel-kuerzer:clamp(0px,735px - 100svh,100px)}}
  .stage--portal .stage__in{padding-top:calc(156px - var(--himmel-kuerzer))}
  .stage--portal .coast__art,.stage--portal.coast::after{top:calc(0px - var(--himmel-kuerzer))}
}
/* Uhrzeit & Preload (Aktion vor dem Countdown) bis 760 px Höhe: gleiche Texte, engere Abstände, Antwort mit 1,5 Zeilenabstand */
@media (max-width:639px) and (max-height:760px){
  .stage--count:has(.stage__cta+.clock) .stage__in{padding-top:4px;row-gap:12px}
  .stage--count:has(.stage__cta+.clock) .kicker{margin-bottom:4px}
  .stage--count:has(.stage__cta+.clock) .display__sub{margin-top:8px;line-height:1.3}
  .stage--count:has(.stage__cta+.clock) .lead{margin:0 0 12px;line-height:1.5}
}
/* Block 12 · Kurze Handys, übrige Unterseiten: Hauptaktion über dem offenen Cookie-Hinweis (Hinweis selbst unverändert).
   Wie die Preload-Regel oben nur bis 639 px Breite und 760 px Höhe; normal hohe Handys, Tablet und Desktop bleiben gleich.
   Textbühnen (Guides, Kategorien), Regionsseiten und Regionen-Übersicht: dieselben engeren Abstände wie Uhrzeit & Preload,
   gleiche Schriftgrößen, Einstiegstext mit 1,5 Zeilenabstand.
   Textbühnen mit Illustration: Bild und Schleier rücken mit dem Kopf um 32 px hoch (so weit wie der Untertitel), damit
   hinter Titel und Untertitel derselbe Bildausschnitt mit derselben Abdunklung liegt wie bisher; oben fehlt etwas Himmel.
   Countdown und Vorbestellen (Aktion vor Uhr bzw. Preisen): Block 13 unten. */
@media (max-width:639px) and (max-height:760px){
  :is(.stage--text,.stage--place,.stage--lagune) .stage__in{padding-top:4px;row-gap:12px}
  :is(.stage--text,.stage--place,.stage--lagune) .kicker{margin-bottom:4px}
  :is(.stage--text,.stage--place,.stage--lagune) .display__sub{margin-top:8px;line-height:1.3}
  :is(.stage--text,.stage--place,.stage--lagune) .lead{margin-bottom:12px;line-height:1.5}
  .stage--text:has(>picture.stage__art)>.stage__art,.stage--text:has(>picture.stage__art)::after{top:-32px}
}
/* Block 13 · Countdown und Vorbestellen: Stehen genaue Countdown-Uhr oder Preisboxen vor der Aktion, folgt die Aktion direkt
   auf die Antwort und Uhr bzw. Preise rücken darunter. Nur die Anzeige; Uhr, Hinweis und Preise enthalten keine Links, die
   Tastaturfolge passt. Geltungsbereich gemessen mit offenem Cookie-Hinweis und Desktop-Bildlaufleiste (ungünstigster Fall):
   Handys unter 390 px Breite immer, denn dort bräuchte die gewohnte Reihenfolge bis zu 990 px Höhe (Vorbestellen, 320 px).
   Handys ab 390 px bis 830 px Höhe; darüber ist die Aktion auch in der gewohnten Reihenfolge frei (spätestens ab 802 px),
   daher bleibt z. B. 390 × 844 wie bisher. Tablet unverändert. */
@media (max-width:389px),(max-width:639px) and (max-height:830px){
  .stage__body:has(>:is(.clock,.prices)~.stage__cta){display:flex;flex-direction:column}
  .stage__body:has(>:is(.clock,.prices)~.stage__cta)>:not(.count,.lead,.stage__cta){order:1}
  .stage__body:has(>:is(.clock,.prices)~.stage__cta)>:is(.clock,.prices){margin-top:24px}
  .stage__body:has(>:is(.clock,.prices)~.stage__cta)>:is(.clock__note,.prices__note){margin-bottom:0}
}
/* Countdown am Desktop: Bei 740 bis 880 px Fensterhöhe läge die schwebende Cookie-Box sonst über «Editionen und Preise»
   (z. B. 1280 × 800). Nur dort dieselbe Umordnung. Darüber ist die Aktion frei; darunter kommt sie wie bisher erst beim
   Scrollen ins Bild (umgeordnet läge sie dort teils hinter der Box). Box, Hinweistext und Einwilligung unverändert. */
@media (min-width:960px) and (min-height:740px) and (max-height:880px){
  .stage--count .stage__body:has(>.clock~.stage__cta){display:flex;flex-direction:column}
  .stage--count .stage__body:has(>.clock~.stage__cta)>:not(.count,.lead,.stage__cta){order:1}
  .stage--count .stage__body:has(>.clock~.stage__cta)>.clock{margin-top:24px}
  .stage--count .stage__body:has(>.clock~.stage__cta)>.clock__note{margin-bottom:0}
}