@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#2a1626; --ink-soft:#5e4256; --cream:#fdf3ec; --paper:#fbeee5;
  --red:#e4513c; --red-deep:#b8323a; --ember:#ff7a4d; --plum:#140f29;
  --serif:"Fraunces", Georgia, serif; --sans:"Inter", system-ui, sans-serif;
  --pad:clamp(1.25rem, 4vw, 4rem);
  --strip:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --p:0; --sun:0;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plum);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{scroll-margin-top:72px}
/* V19.13 (Rundgang 24.10., P44): Sprunglink, nur bei Tastaturfokus sichtbar */
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:.7rem 1.1rem;border-radius:999px;background:var(--cream);color:var(--ink);font-weight:650;text-decoration:none}
.skip:focus{top:8px}
main:focus{outline:none}

/* Körnung */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Demo-Hinweis ---------- */
.demo-strip{position:absolute;top:0;left:0;right:0;z-index:60;height:var(--strip);display:flex;align-items:center;justify-content:center;padding:0 1rem;
  font-size:.75rem;letter-spacing:.02em;color:rgb(253 243 236 / .7);background:rgb(10 6 20 / .42);box-shadow:inset 0 -1px 0 rgb(255 240 230 / .07)}
.demo-strip p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-strip a{color:#fdf3ec;font-weight:650;letter-spacing:.07em;text-decoration:underline;text-decoration-color:rgb(255 240 230 / .35);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin-block:-7px;padding:0}
/* V19.14 (Owner 24.10., P43): Tippfläche des Hinweis-Links 44 px, die Leiste bleibt 32 px hoch (Link ragt unsichtbar über) */
.demo-strip a:hover{text-decoration-color:currentColor}

/* ---------- Knöpfe ---------- */
.btn{--b:#cf3f2c;display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.8em 1.35em;border-radius:999px;border:0;cursor:pointer;
  background:var(--b);color:#fff8f2;font-weight:600;font-size:1rem;letter-spacing:-.005em;text-decoration:none;
  box-shadow:0 10px 30px -10px rgb(228 81 60 / .7), inset 0 1px 0 rgb(255 255 255 / .25);
  transition:transform .35s var(--ease), box-shadow .35s, background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgb(228 81 60 / .85), inset 0 1px 0 rgb(255 255 255 / .3)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .dot{width:.62em;height:.62em;border-radius:50%;background:#ffd9c2;box-shadow:0 0 0 3px rgb(255 217 194 / .25);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 6px rgb(255 217 194 / .08)}}
.btn.ghost{background:rgb(29 16 41 / .3);color:#fff8f2;box-shadow:inset 0 0 0 1.5px rgb(255 240 230 / .55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}
.btn.ghost:hover{background:rgb(29 16 41 / .42)}
.btn.ink{--b:var(--ink);box-shadow:0 10px 26px -12px rgb(42 22 38 / .7)}

/* ---------- Navigation ---------- */
.nav{position:fixed;z-index:50;top:calc(var(--strip) + 10px);left:50%;transform:translateX(-50%);width:min(1120px, calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:8px 8px 8px 18px;border-radius:999px;color:var(--cream);
  background:rgb(29 16 41 / .78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgb(255 230 215 / .12), 0 12px 40px -20px rgb(0 0 0 / .5);transition:top .45s var(--ease), background .45s, color .45s, box-shadow .45s}
.nav-light .nav{color:var(--ink);background:rgb(253 243 236 / .74);box-shadow:inset 0 0 0 1px rgb(42 22 38 / .09), 0 14px 40px -24px rgb(42 22 38 / .4)}
.nav-light .brand small{border-left-color:rgb(42 22 38 / .2)}
.nav-light .nav ul a:hover{background:rgb(42 22 38 / .06)}
.scrolled .nav{top:max(12px, env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;color:inherit}
.brand b{font:600 1.35rem/1 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40;letter-spacing:-.01em}
.brand small{font-size:.78rem;opacity:.7;letter-spacing:.02em;border-left:1px solid rgb(255 240 230 / .25);padding-left:.6rem}
.mark{width:28px;height:28px}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:999px;color:inherit;text-decoration:none;font-size:.95rem;opacity:.85;transition:background .2s, opacity .2s}
.nav ul a:hover{background:rgb(255 240 230 / .1);opacity:1}
.nav .btn{min-height:44px;padding:.55em 1.1em;font-size:.95rem}
.nav .btn .short{display:none}

/* ---------- Sonnenaufgang ---------- */
.sunrise{position:relative;height:300vh;height:300svh;background:var(--plum)}
.stage{--sunx:64%;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--hero-text,#fdf3ec);
  background:linear-gradient(180deg, var(--sky1,#120d26) 0%, var(--sky2,#3a1c4a) 50%, var(--sky3,#b23a3e) 76%, var(--sky3,#b23a3e) 100%)}
.stars{position:absolute;inset:0 0 35% 0;opacity:calc(1 - var(--p) * 2.2)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff3e6;animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.25}to{opacity:1}}
.stars .shoot{position:absolute;top:14%;left:62%;width:130px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#fff3e6,transparent);opacity:0;transform:rotate(-16deg);animation:shoot 11s 3.4s ease-out infinite}
@keyframes shoot{0%{opacity:0;transform:rotate(-16deg) translateX(0)}1.5%{opacity:1}7%{opacity:0;transform:rotate(-16deg) translateX(-300px)}100%{opacity:0;transform:rotate(-16deg) translateX(-300px)}}

.clouds{position:absolute;left:0;right:0;top:0;height:50vh;pointer-events:none;opacity:calc(.55 + var(--p) * .45);transform:translate3d(0, calc(var(--p) * -3vh), 0)}
.clouds svg{width:108%;height:100%;margin-left:-4%;animation:cloudDrift 70s ease-in-out infinite alternate}
@keyframes cloudDrift{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}
.c-top{stop-color:var(--cl1,#1a1230)}.c-mid{stop-color:var(--cl2,#211538)}.c-lit{stop-color:var(--cl3,#2b1a40)}

.glow{position:absolute;left:var(--sunx);bottom:0;width:180vmax;height:120vh;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 100%, rgb(255 140 90 / .72), rgb(255 110 80 / .26) 45%, transparent 100%);
  opacity:calc(.4 + var(--sun) * .6)}
.sun{--size:min(30vmin, 270px);position:absolute;left:var(--sunx);bottom:30vh;width:var(--size);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%, calc((1 - var(--sun)) * 52vh)) scaleY(calc(.9 + var(--sun) * .1));
  background:radial-gradient(circle at 50% 45%, var(--sun-core,#ffd2a8) 0%, var(--sun-mid,#ff8a5a) 48%, var(--sun-edge,#e4513c) 100%);
  box-shadow:0 0 60px 10px rgb(255 150 100 / .55), 0 0 180px 60px rgb(255 120 80 / .35)}

.land{position:absolute;left:0;right:0;bottom:11vh;height:44vh;pointer-events:none}
.land svg{width:100%;height:100%;overflow:visible}
.land.far{transform:translate3d(0, calc(var(--p) * 1.4vh), 0)}
.land.near{transform:translate3d(0, calc(var(--p) * 3vh), 0)}
.h0{fill:var(--h0,#3a2350)}.h1{fill:var(--h1,#2a1838)}.h2{fill:var(--h2,#1d1129)}.hb{fill:var(--hb,#190e22)}.h3{fill:var(--h3,#130b1c)}
.hz0{stop-color:var(--sky3,#b23a3e);stop-opacity:0}.hz1{stop-color:var(--sky3,#b23a3e);stop-opacity:.5}
.rim{fill:var(--rim,#ffb48a);opacity:calc(var(--sun) * .95)}
.rim-hill{fill:none;stroke:var(--rim,#ffb48a);stroke-width:2;opacity:calc(var(--sun) * .55)}
.rim-soft{stroke-width:1.5;opacity:calc(var(--sun) * .4)}
.rim-hill.rim-g{stroke:url(#rimG)}.rim-hill.rim-g2{stroke:url(#rimG2)}
.rg0{stop-color:var(--rim,#ffb48a);stop-opacity:.08}.rg1{stop-color:var(--rim,#ffb48a);stop-opacity:.45}.rg2{stop-color:var(--rim,#ffb48a);stop-opacity:1}
.hfar{fill:var(--hb,#190e22);opacity:.5}
.cone{opacity:calc(1 - var(--sun) * .9);transition:opacity 1.2s ease}
.stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.34;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wake rect{--t:.3;--u:.9;fill:#ffb478;opacity:min(1, max(0, calc((var(--p) - var(--t)) * 9)), max(0, calc((var(--u) - var(--p)) * 9)))}
.lights .lit{animation:lightOn 1.1s linear both, flicker 5s 1.4s steps(1) infinite}
@keyframes lightOn{0%{opacity:0}12%{opacity:.85}18%{opacity:.1}30%{opacity:.95}36%{opacity:.35}52%{opacity:1}100%{opacity:1}}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}73%{opacity:.93}}
.bloom{opacity:calc(1 - var(--sun) * .8);transition:opacity 1.2s ease}
.lit-ref{opacity:calc(.9 - var(--sun) * .5);transition:opacity 1.2s ease}
.js:not(.lights) .lit,.js:not(.lights) .cone,.js:not(.lights) .bloom,.js:not(.lights) .lit-ref,.js:not(.lights) .glint{opacity:0;animation:failsafe 0s 2.5s forwards}
.js:not(.lights) .water .mirror{opacity:0;animation:failsafeM 0s 2.5s forwards}
@keyframes failsafeM{to{opacity:.42}}
@keyframes failsafe{to{opacity:1}}
.steam path{fill:none;stroke:rgb(255 236 222 / .55);stroke-width:2.2;stroke-linecap:round;animation:steam 4.2s ease-in infinite;opacity:0}
.steam path:nth-child(2){animation-delay:1.4s}.steam path:nth-child(3){animation-delay:2.8s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}25%{opacity:.9}100%{opacity:0;transform:translate(4px, -34px)}}
.pin{opacity:calc(1 - var(--p) * 4);transition:opacity .8s ease}
.intro .pin{opacity:0}
.pin-t{font:600 14px var(--sans);fill:#ffe6d6;letter-spacing:.04em}

.mist{position:absolute;left:0;right:0;pointer-events:none;opacity:calc(.75 - var(--p) * .3)}
.mist i{position:absolute;top:0;height:100%;width:72%;border-radius:50%;background:radial-gradient(closest-side, var(--mist,#5a4a7a), transparent);animation:mist 40s ease-in-out infinite alternate}
.mist i:nth-child(1){left:-14%}.mist i:nth-child(2){left:34%;animation-duration:52s;animation-delay:-14s}.mist i:nth-child(3){left:64%;animation-duration:46s;animation-delay:-26s}
.mist.m1{bottom:calc(11vh + 11vh);height:11vh;transform:translate3d(0, calc(var(--p) * 2.2vh), 0)}
.mist.m2{bottom:calc(11vh - 4vh);height:9vh;transform:translate3d(0, calc(var(--p) * 3vh), 0)}
.mist.m2 i{opacity:.8}
@keyframes mist{from{transform:translateX(-7%)}to{transform:translateX(9%)}}

.water{position:absolute;left:0;right:0;bottom:-4vh;height:15.2vh;overflow:hidden;transform:translate3d(0, calc(var(--p) * 3vh), 0);
  background:linear-gradient(180deg, var(--water1,#2a1238), var(--water2,#140a20))}
.water .mirror{position:absolute;left:0;top:0;width:100%;height:44vh;transform:scaleY(-1);opacity:.42;transition:opacity 1.4s ease;
  -webkit-mask-image:repeating-linear-gradient(0deg, #000 0 3px, rgb(0 0 0 / .7) 3px 5px), linear-gradient(0deg, #000, transparent 32%);
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(0deg, #000 0 3px, rgb(0 0 0 / .7) 3px 5px), linear-gradient(0deg, #000, transparent 32%);mask-composite:intersect}
.water::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg, transparent, var(--water2,#140a20));pointer-events:none}
.water .refl{position:absolute;left:var(--sunx);top:0;width:min(22vmin, 200px);height:100%;transform:translateX(-50%);opacity:calc(.2 + var(--sun) * .8);
  background:repeating-linear-gradient(180deg, rgb(255 190 140 / .85) 0 2px, transparent 2px 7px);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent);mask:radial-gradient(closest-side, #000 30%, transparent);
  animation:shimmer 3.2s ease-in-out infinite alternate}
.water .glint{position:absolute;left:var(--cafex,52%);top:0;width:64px;height:62%;transform:translateX(-50%);opacity:calc(.95 - var(--sun) * .85);
  background:repeating-linear-gradient(180deg, rgb(255 184 120 / .95) 0 2px, transparent 2px 6px);
  -webkit-mask:radial-gradient(50% 100% at 50% 0, #000 25%, transparent);mask:radial-gradient(50% 100% at 50% 0, #000 25%, transparent);
  animation:shimmer 2.6s ease-in-out infinite alternate;transition:opacity 1.2s ease}
.water .line{position:absolute;height:1.5px;border-radius:2px;background:rgb(255 210 180 / .3);animation:drift 7s ease-in-out infinite alternate}
@keyframes shimmer{from{transform:translateX(-50%) scaleX(.86)}to{transform:translateX(-50%) scaleX(1.12)}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.birds{position:absolute;top:22%;left:0;width:110px;fill:none;stroke:var(--h3,#130b1c);stroke-width:2.2;stroke-linecap:round;opacity:clamp(0, calc((var(--p) - .42) * 3), .75);animation:fly 30s linear infinite}
.birds path{transform-box:fill-box;transform-origin:center;animation:flap .9s ease-in-out infinite alternate}
.birds path:nth-child(2){animation-delay:-.3s}.birds path:nth-child(3){animation-delay:-.6s}
@keyframes fly{from{transform:translate(52vw, 6vh)}to{transform:translate(110vw, -4vh)}}
@keyframes flap{to{transform:scaleY(.45)}}

.clock{position:absolute;top:calc(var(--strip) + 108px);right:var(--pad);text-align:right;font-variant-numeric:tabular-nums;z-index:3;text-shadow:var(--hero-shadow, none)}
.clock b{display:block;font:300 clamp(2rem, 4.4vw, 3.6rem)/1 var(--sans);letter-spacing:-.04em}
.clock span{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .65rem;margin-right:-.65rem;border-radius:999px;background:rgb(29 16 41 / calc(.08 + var(--p, 0) * .14));text-shadow:none}
.clock span::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff8a5a;box-shadow:0 0 10px #ff8a5a;animation:breathe 2s ease-in-out infinite}

.copy{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--strip) + 112px);max-width:920px;z-index:3;text-shadow:var(--hero-shadow, none)}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease, visibility 0s .5s}
.scene.on{opacity:1;visibility:visible;transition:opacity .4s ease, visibility 0s}
.scene{pointer-events:none}.scene.on{pointer-events:auto}
/* Die Hauptüberschrift bleibt für Screenreader im Baum, auch wenn sie ausgeblendet ist */
.scene[data-scene="0"]{visibility:visible}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em;margin:0 -.08em -.16em}
.split .wi{display:inline-block;transform:translateY(112%);transition:transform .34s cubic-bezier(.5,0,.75,0)}
.scene.on .split .wi{transform:none;transition:transform 1.05s var(--ease) calc(var(--d, 0s) + .32s)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .3s ease, transform .3s ease}
.scene.on .rv{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d, 0s) + .36s), transform 1s var(--ease) calc(var(--d, 0s) + .36s)}
.boot .scene.on .split .wi{transition-delay:var(--d, 0s)}
.intro .scene.on .split .wi{transform:translateY(112%)}
.intro .scene.on .rv{opacity:0;transform:translateY(16px)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.85;margin:0 0 1.1rem}
.scene.on .eyebrow.rv{opacity:.85}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6}
h1,.h1{font:340 clamp(2.6rem, 7.4vw, 7rem)/.95 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;letter-spacing:-.035em;margin:0;text-wrap:balance}
/* V19.16 (Owner 24.10.): Übersetzungen sind länger als das Deutsche – auf dem Telefon kleinere Überschrift, damit sie nicht in den Scroll-Hinweis läuft (DE bleibt unverändert) */
@media (max-width:420px){html:not(:lang(de)) h1,html:not(:lang(de)) .h1{font-size:2.15rem}}
h1 em,.h1 em,h2 em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;color:var(--accent,#ffb08a)}
.lede{max-width:34rem;font-size:clamp(1.05rem, 1.4vw, 1.25rem);line-height:1.5;margin:1.4rem 0 1.8rem;text-wrap:pretty}
.scene.on .lede.rv{opacity:.94}
.lede.flush{margin-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cue{position:absolute;left:50%;bottom:calc(5.6vh - 25px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:.7rem;
  padding:.65rem 1.1rem .65rem .8rem;border-radius:999px;background:rgb(20 12 30 / .45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.9rem;color:#fdf3ec;box-shadow:inset 0 0 0 1px rgb(255 230 215 / .15);opacity:calc(1 - var(--p) * 6);pointer-events:none;white-space:nowrap;transition:opacity .6s ease}
.intro .cue{opacity:0}
.cue i{width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px currentColor;position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.lead-num{margin:-.08em 0 0 -.04em;font:280 clamp(7rem, 22vw, 20rem)/.8 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.06em;display:flex;align-items:baseline;gap:.12em;font-variant-numeric:lining-nums tabular-nums}
.lead-num small{font:italic 400 clamp(1.8rem, 3.6vw, 3.1rem)/1 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;letter-spacing:-.02em}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;font-size:.92rem;background:rgb(255 255 255 / .4);box-shadow:inset 0 0 0 1px rgb(42 22 38 / .12);font-variant-numeric:tabular-nums}
.chip b{font-weight:650}

/* ---------- Morgenkarte ---------- */
.karte{position:relative;background:var(--day,#fbeee5);padding:clamp(2.2rem, 4.4vw, 4rem) var(--pad) clamp(2.5rem, 5vw, 4.5rem)}
.karte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px, 14vw, 200px);pointer-events:none;background:linear-gradient(180deg, transparent, var(--cream))}
.karte::before{content:"";position:absolute;left:0;right:0;top:0;height:min(46vh, 380px);pointer-events:none;background:linear-gradient(180deg, #e9b2a6, rgb(233 178 166 / 0))}
.wrap{position:relative;max-width:1180px;margin:0 auto}
.kicker{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--red-deep);display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.kicker::before{content:"";width:26px;height:1.5px;background:currentColor}
.kicker.center{justify-content:center}
h2{font:360 clamp(2.2rem, 5vw, 4.4rem)/1 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.03em;margin:0;text-wrap:balance;--accent:var(--red)}
.karte-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end;margin-bottom:clamp(1.5rem, 4vw, 3rem)}
.karte-head > p{margin:0;color:var(--ink-soft);font-size:1.1rem;max-width:26rem;justify-self:end}
.karte-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem, 4vw, 4rem);align-items:center}
.arc-col{position:relative}
.arc{position:relative;border-radius:24px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.arc:active{cursor:grabbing}
.arc svg{width:100%;height:auto;overflow:visible}
.arc .now{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:var(--ink)}
.arc .now b{display:block;font:300 clamp(2.6rem, 6vw, 4.8rem)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.arc .now span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:650}
.arc-sun{filter:drop-shadow(0 0 18px rgb(255 120 80 / .7))}
.night .arc-sun{filter:drop-shadow(0 0 12px rgb(150 80 140 / .55))}
.arc-path{fill:none;stroke:#2a1626;stroke-opacity:.16;stroke-width:1.5}
.arc-night{fill:none;stroke:#6a3a7a;stroke-opacity:.6;stroke-width:2.5;stroke-dasharray:3 7;stroke-linecap:round}
.grab{fill:none;stroke:#e4513c;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:grab 2s ease-out infinite}
@keyframes grab{from{transform:scale(1);opacity:.6}to{transform:scale(1.9);opacity:0}}
.used .grab{display:none}
.mini{fill:var(--ink);opacity:.2}
.mini-lit{fill:#ff9a5c;opacity:0;transition:opacity .4s}
.night .mini-lit{opacity:1}
.night .mini{opacity:.32}
.drag-hint{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;pointer-events:none;
  background:var(--ink);color:var(--cream);font-size:.75rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:opacity .4s}
.drag-hint::before{content:"‹"}.drag-hint::after{content:"›"}
.drag-hint::before,.drag-hint::after{font-size:1rem;line-height:1;opacity:.7}
.used .drag-hint{opacity:0}
.stops{position:absolute;inset:0;pointer-events:none}
.stops button{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;min-height:44px;min-width:44px;padding:0 .6rem;border-radius:999px;border:0;background:transparent;cursor:pointer;
  font-weight:650;font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.stops button:hover{background:rgb(42 22 38 / .07);color:var(--ink)}
.stops button[aria-pressed="true"]{background:rgb(228 81 60 / .12);color:var(--red-deep)}
.arc-note{margin:1.6rem 0 0;font-size:.9rem;color:var(--ink-soft);text-align:center;text-wrap:balance}
.arc-note i{display:inline-block;vertical-align:-1px;margin-right:.5rem;width:12px;height:12px;border-radius:50%;background:#ffc59a;box-shadow:0 0 0 2px #fff9f4, 0 0 10px rgb(255 140 90 / .9)}
.open-state{display:flex;justify-content:center;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;margin:.4rem 0 0;color:var(--ink-soft)}
.open-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--state,#9a8a92);box-shadow:0 0 0 4px color-mix(in oklab, var(--state,#9a8a92) 25%, transparent)}

.card{position:relative;background:rgb(255 251 247 / .76);border-radius:30px;padding:clamp(1.5rem, 3vw, 2.6rem);
  box-shadow:0 1px 0 rgb(255 255 255 / .8) inset, 0 30px 70px -40px rgb(120 40 50 / .45), 0 0 0 1px rgb(42 22 38 / .06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card .when{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--red-deep);font-variant-numeric:tabular-nums}
.card .idx{font:italic 400 1.05rem/1 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--ink-soft);font-variant-numeric:lining-nums}
.dish{display:block;width:clamp(150px, 15vw, 210px);height:auto;margin:.2rem auto -.2rem;background:radial-gradient(closest-side, rgb(255 205 175 / .5), rgb(255 205 175 / 0));border-radius:50%;fill:none;stroke:var(--red-deep);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.dish path{stroke-dasharray:1 1;stroke-dashoffset:1}
.dish.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.55,0,.2,1)}
.dish.drawn path:nth-child(n+3){transition-delay:.25s}
.dish.drawn path:nth-child(n+5){transition-delay:.5s}
.card h3{text-align:center;font:400 clamp(1.9rem, 3.4vw, 2.8rem)/1.02 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 96;letter-spacing:-.025em;margin:.7rem 0 .6rem}
.card .note{margin:0 auto 1.4rem;max-width:30rem;text-align:center;color:var(--ink-soft);text-wrap:balance}
@media (min-width: 901px){.card{min-height:38.6rem}.dish{width:clamp(128px, 10vw, 156px)}.card h3{margin:.5rem 0 .5rem}.card .note{margin-bottom:1.1rem}}
.items{list-style:none;margin:0;padding:0;clear:both}
.items li{display:grid;grid-template-columns:auto 1fr auto;column-gap:.6rem;align-items:baseline;padding:.85rem 0;border-top:1px solid rgb(42 22 38 / .1)}
.items li .n{grid-column:1}
.items li .ld{grid-column:2;align-self:end;height:1px;margin-bottom:.4em;background-image:radial-gradient(circle, rgb(42 22 38 / .35) 1px, transparent 1.4px);background-size:7px 3px;background-repeat:repeat-x;background-position:0 50%;min-width:1rem}
.items li b{grid-column:3;font:450 1.15rem/1 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 36;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.items li small{grid-column:1 / -1;display:block;color:var(--ink-soft);font-size:.9rem;margin-top:.15rem}

/* ---------- Besuch ---------- */
.besuch{background:var(--cream);padding:clamp(3rem, 7vw, 6rem) var(--pad) clamp(2.5rem, 5vw, 4rem)}
.besuch-head{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:end}
.tomorrow{margin:0 0 .6rem;font-size:clamp(1.02rem, 1.3vw, 1.18rem);line-height:1.55;color:var(--ink-soft);text-wrap:pretty;padding-left:1.2rem;border-left:1.5px solid rgb(228 81 60 / .45)}
.tomorrow b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
h2.display{font-size:clamp(2.8rem, 7.8vw, 7.6rem);line-height:.96;letter-spacing:-.04em;max-width:15ch}
.besuch-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.5rem, 4.5vw, 4.5rem);margin-top:clamp(2rem, 5vw, 4rem);align-items:start}
.ostfenster{position:sticky;top:96px;overflow:hidden;border-radius:32px;color:var(--cream);padding:clamp(1.25rem, 3vw, 2.6rem) clamp(1.25rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.6rem);
  background:radial-gradient(120% 70% at 50% 40%, rgb(255 160 110 / .28), transparent 60%), linear-gradient(170deg,#2a1538 0%,#6e2a50 46%,#c8524a 80%,#f08a62 100%)}
.ostfenster .window{width:100%;max-width:520px;height:auto;margin:0 auto;overflow:visible}
.wsun{transform:translateY(calc((1 - var(--ow, 1)) * 74px))}
.wwarm{fill:#ffb48a;opacity:calc(var(--ow, 1) * .28);mix-blend-mode:soft-light}
.ostfenster .steam path{stroke:rgb(253 243 236 / .85)}
.ost-copy{position:relative;margin-top:clamp(.5rem, 2vw, 1.25rem)}
.ost-copy h3,.block h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;margin:0 0 .9rem}
.ost-copy h3{color:#ffd2bd}
.ost-copy .big{font:400 clamp(1.7rem, 2.8vw, 2.4rem)/1.08 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;letter-spacing:-.02em;margin:0 0 .7rem;color:#fff6ef}
.ost-copy p{margin:0 0 1.5rem;color:rgb(253 243 236 / .9);max-width:30rem}
.ost-copy .btn{--b:#fdf3ec;color:var(--ink);box-shadow:0 12px 30px -12px rgb(0 0 0 / .45)}
.info{display:grid}
.block{padding:0 0 clamp(1.6rem, 3vw, 2.2rem)}
.block + .block{border-top:1px solid rgb(42 22 38 / .12);padding-top:clamp(1.6rem, 3vw, 2.2rem)}
.block h3{color:var(--red-deep)}
.block .big{color:var(--ink);font:400 clamp(1.7rem, 2.6vw, 2.3rem)/1.08 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.02em;margin:0 0 .6rem}
.block p{margin:0;color:var(--ink-soft)}
.map{width:100%;height:auto;margin:1.2rem 0 .4rem;overflow:hidden}
.m-paper{fill:#fbe8dd;stroke:rgb(168 90 82 / .18);stroke-width:1;stroke-dasharray:3 4}
.m-river{fill:none;stroke:#f1c6b9;stroke-width:22;stroke-linecap:round}
.m-bank{fill:none;stroke:#dc9c8c;stroke-width:.9;opacity:.75}
.m-bridge-deck{fill:#fbe8dd}
.m-bridge{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.m-hatch{fill:none;stroke:#fff6f0;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.m-compass path{fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.m-compass text{font:650 9px var(--sans);fill:var(--ink-soft);letter-spacing:.08em}
.m-street{fill:none;stroke:rgb(42 22 38 / .16);stroke-width:2;stroke-linecap:round}
.m-steg{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.6}
.m-plank{fill:none;stroke:var(--ink);stroke-width:1;opacity:.4}
.m-ray{stroke:#e4513c;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;animation:ray 1.4s linear infinite}
@keyframes ray{to{stroke-dashoffset:-16}}
.m-sun{fill:#ff9a6a}
.m-pin{fill:var(--red)}
.m-pin-halo{fill:var(--red);opacity:.16;transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
@keyframes halo{from{transform:scale(.6);opacity:.35}to{transform:scale(1.6);opacity:0}}
.m-fan{fill:#ffb48a;opacity:.32}
.m-lab,.m-lab2{paint-order:stroke;stroke:#fbe8dd;stroke-width:6px;stroke-linejoin:round}
.m-lab{font:italic 400 17px var(--serif);fill:#a85a52;letter-spacing:.01em}
.m-lab2{font:650 10px var(--sans);fill:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase}
.contact{list-style:none;margin:.6rem 0 0;padding:0}
.contact li{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:48px;border-top:1px solid rgb(42 22 38 / .1)}
.contact span{font-size:.85rem;color:var(--ink-soft)}
.contact a{color:var(--ink);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;min-height:44px;padding:.7rem 0;overflow-wrap:anywhere;text-align:right}
.contact a:hover{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.week{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.week li{display:grid;grid-template-columns:max(3.6rem, var(--tag-sp, 0px)) 1fr 6.6rem;align-items:center;gap:.75rem;padding:.42rem .6rem;margin:0 -.6rem;border-radius:12px;font-variant-numeric:tabular-nums;font-size:.95rem}
.week li.today{background:var(--ink);color:var(--cream)}
.week .d{font-weight:600}
.week .t{text-align:right;color:var(--ink-soft);font-size:.88rem;white-space:nowrap}
.week li.today .t{color:rgb(253 243 236 / .78)}
.track{position:relative;height:10px;border-radius:99px;background:rgb(42 22 38 / .08)}
.today .track{background:rgb(255 255 255 / .14)}
.track .open{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#f0a58c,#e4513c);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)}
.track .sm{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#fff4e8,#ffc59a 55%,#ff8a5a);box-shadow:0 0 0 2.5px #fff9f4, 0 0 14px rgb(255 140 90 / .9);transform:scale(0);transition:transform .6s var(--ease)}
.today .track .sm{box-shadow:0 0 0 2.5px var(--ink), 0 0 14px rgb(255 140 90 / .9)}
.week.in .track .open,.no-io .track .open{transform:none}
.week.in .track .sm,.no-io .track .sm{transform:none}
.axis{display:grid;grid-template-columns:max(3.6rem, var(--tag-sp, 0px)) 1fr 6.6rem;gap:.75rem;margin-top:.45rem;font-size:.75rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.axis div{position:relative;height:1.2em;grid-column:2}
.axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ax6{left:7.14%}.ax9{left:28.57%}.ax12{left:50%}.ax15{left:71.43%}.ax18{left:92.86%}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem!important;font-size:.85rem}
.legend i{display:inline-block;vertical-align:middle;margin-right:.45rem}
.legend .b{width:20px;height:8px;border-radius:9px;background:linear-gradient(90deg,#f0a58c,#e4513c)}
.legend .s{width:12px;height:12px;border-radius:50%;background:#ffc59a;box-shadow:0 0 8px rgb(255 140 90 / .9)}

/* ---------- Sonnenuntergang ---------- */
.dusk{position:relative;overflow:hidden;color:var(--cream);text-align:center;padding:clamp(4.5rem, 8vw, 7rem) var(--pad) 0;
  background:linear-gradient(180deg, var(--cream) 0%, #f6bfa8 6%, #ec7a5a 24%, #cf4542 43%, #8a2a4a 65%, #4a1b3e 86%, #2c1230 100%)}
.dusk .say{position:relative;z-index:2;font:360 clamp(2.1rem, 4.8vw, 4rem)/1.04 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.03em;margin:0 auto;max-width:16ch;color:#fff6ef;text-wrap:balance}
.dusk .say em{font-style:italic;color:#fff6ef}
.dusk .btn{position:relative;z-index:2;margin-top:2rem}
.horizon{position:relative;margin:clamp(2rem, 5vw, 4rem) calc(-1 * var(--pad)) 0}
.setsun{position:absolute;left:50%;bottom:calc(36% - var(--set, 0) * 22%);width:min(42vw, 440px);aspect-ratio:1;border-radius:50%;transform:translate(-50%, 50%);z-index:0;
  background:radial-gradient(circle at 50% 40%, #ffd2a8, #ff8a5a 50%, #e4513c);box-shadow:0 0 120px 40px rgb(255 120 80 / .4)}
.dusk-town{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(70px, 10vw, 150px);z-index:3}
.dt-back{fill:#4c1c40}.dt-front{fill:#1d1029}
.dt-win{fill:#ffb478;opacity:clamp(0, calc((var(--set, 0) - .35) * 3), 1)}
.dt-cafe{opacity:clamp(0, calc((var(--set, 0) - .6) * 4), 1)}
.dusk .word{position:relative;z-index:2;margin:0;transform:translateY(calc(max(0, 1 - var(--set, 1) * 1.3) * 60%));padding:0 0 .24em;font:300 clamp(4.6rem, 21vw, 19rem)/.8 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.055em;color:#1d1029;white-space:nowrap}
.dusk .base{position:relative;z-index:4;margin:0 calc(-1 * var(--pad));background:#1d1029;color:rgb(253 243 236 / .72);font-size:.88rem;padding:1.4rem var(--pad) calc(1.4rem + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem}
.dusk .base a{color:#fdf3ec;text-underline-offset:3px}

/* ---------- Dialog ---------- */
dialog{width:min(560px, calc(100% - 24px));max-height:calc(100svh - 24px);border:0;border-radius:28px;padding:0;background:var(--cream);color:var(--ink);box-shadow:0 40px 120px -30px rgb(20 10 30 / .6)}
dialog::backdrop{background:rgb(20 12 30 / .55);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .45s cubic-bezier(.2,.9,.25,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.dlg-head{position:relative;padding:1.6rem 1.6rem 1.2rem;background:linear-gradient(160deg,#3a1c4a,#a8405a 70%,#ff8a5a);color:var(--cream);overflow:hidden}
.dlg-head h2{font-size:clamp(1.7rem, 4vw, 2.2rem);--accent:#ffd2bd}
.dlg-head p{margin:.4rem 0 0;opacity:.88;font-size:.95rem}
.x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgb(255 255 255 / .14);color:var(--cream);cursor:pointer;font-size:1.3rem;line-height:1}
form.res{padding:1.4rem 1.6rem 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1 / -1}
.field label,.field legend{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.field input,.field select{min-height:48px;padding:.6rem .85rem;border-radius:14px;border:1px solid rgb(42 22 38 / .18);background:#fffaf6;font-size:1rem}
.field input:focus,.field select:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
fieldset.field{border:0;padding:0;margin:0}
.seats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.seats label{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.75rem .8rem;border-radius:16px;border:1px solid rgb(42 22 38 / .16);background:#fffaf6;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink);transition:border-color .2s, background .2s}
.seats label small{font-weight:400;color:var(--ink-soft);font-size:.8rem;line-height:1.3}
.seats input{position:absolute;opacity:0;pointer-events:none}
.seats label:has(input:checked){border-color:var(--red);background:#fff1ea;box-shadow:0 0 0 1px var(--red)}
.seats label:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:2px}
.err{grid-column:1 / -1;margin:0;color:var(--red-deep);font-size:.9rem;font-weight:600;min-height:1.2em}
.res .btn{grid-column:1 / -1;justify-content:center}
.demo{grid-column:1 / -1;margin:0;font-size:.8rem;color:var(--ink-soft);text-align:center}
.done{padding:2rem 1.6rem 1.8rem;text-align:center}
.done .h1{font-size:clamp(2rem, 6vw, 2.8rem);margin:.4rem 0 .8rem}
.done p{color:var(--ink-soft);margin:0 auto 1.4rem;max-width:30rem}

/* ---------- Anpassung ---------- */
@media (max-width: 900px){
  .nav ul li.l{display:none}
  .brand small{display:none}
  .karte-head,.karte-grid,.besuch-grid{grid-template-columns:1fr}
  .karte-head > p{justify-self:start}
  .besuch-head{grid-template-columns:1fr;gap:1.4rem}
  .ostfenster{position:relative;top:auto}
}
@media (max-width: 560px){
  :root{--strip:30px}
  .demo-strip{font-size:.75rem;padding:0 .5rem}
  .nav{padding-left:14px}
  .clock{top:auto;bottom:0;height:11.2vh;right:var(--pad);left:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .clock b{font-size:1.8rem}
  .clock span{font-size:.75rem;letter-spacing:.1em}
  .cue{bottom:calc(47.2vh + .5rem)}
  h1{font-size:12.6vw}
  .h1{font-size:12.6vw}
  .eyebrow{font-size:.75rem;letter-spacing:.12em}
  .copy{top:calc(var(--strip) + 92px)}
  .lead-num{font-size:38vw}
  .lead-num small{font-size:1.7rem}
  .stage{--sunx:62%}
  .sun{--size:46vw;bottom:34vh}
  .land{height:36vh}
  .land.near,.water,.mist.m2{transform:none}
  .clouds{top:47%;height:17vh;opacity:calc(.6 + var(--p) * .4)}
  .birds{top:58%;width:64px}
  @keyframes fly{from{transform:translate(20vw, 4vh)}to{transform:translate(110vw, -3vh)}}
  .mist.m1{bottom:calc(11vh + 8vh);height:8vh}
  .stops button{font-size:.78rem;padding:0 .3rem;min-height:44px;min-width:44px}
  .arc .now{top:50%}
  .arc .now b{font-size:3rem}
  .card{border-radius:24px}
  .items li b{font-size:1.05rem}
  form.res{grid-template-columns:1fr}
  .seats{grid-template-columns:1fr}
  .seats label{flex-direction:row;justify-content:space-between;align-items:center}
  .nav .btn .long{display:none}
  .nav .btn .short{display:inline}
  .week li{grid-template-columns:max(2.8rem, var(--tag-sp, 0px)) 1fr 5.6rem;gap:.6rem}
  .axis{grid-template-columns:max(2.8rem, var(--tag-sp, 0px)) 1fr 5.6rem;gap:.6rem}
  .contact li{flex-direction:column;align-items:flex-start;gap:0;padding-top:.6rem}
  .contact a{padding:.2rem 0 .7rem;text-align:left}
  .setsun{width:64vw}
  .dusk .word{padding-bottom:.62em}
  .dusk .base{justify-content:center;text-align:center}
}
/* V19.13 (Rundgang 24.10., P30): bei 320 px reichte die Leiste für Marke und Reservieren-Knopf nicht (Knopf angeschnitten) */
@media (max-width: 380px){.nav{gap:.5rem;padding-left:12px}.brand{gap:.45rem}.brand b{font-size:1.2rem}.nav .btn{padding:.55em .9em;gap:.45em}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .stars .shoot{display:none}
  .dusk .word{transform:none}
}

/* V19.15 (Owner 24.10.2026): Sprachumschalter in der Demo-Leiste – ruhige Textlinks ohne Flaggen; am Telefon zweite Zeile */
.demo-strip{gap:1.1rem}
.demo-sprachen{display:flex;align-items:center;flex:none}
.demo-strip .demo-sprachen a{justify-content:center;min-width:44px;padding:0 .3em;font-weight:500;letter-spacing:.06em;color:rgb(253 243 236 / .72);text-decoration:none}
.demo-strip .demo-sprachen a:hover{color:#fdf3ec;text-decoration:underline;text-decoration-color:currentColor}
.demo-strip .demo-sprachen a[aria-current="page"]{color:#fdf3ec;font-weight:650;text-decoration:underline;text-decoration-color:rgb(255 240 230 / .5)}
/* V19.17 (Owner 24.10., Lesbarkeit): jedes Kürzel mindestens 44 px breit; die Trennpunkte stehen ohne eigene Breite auf der Grenze und nehmen keinen Tipp, so passen 7 Kürzel auch bei 320 px in eine Zeile */
.demo-sprachen span{display:flex;justify-content:center;width:0;opacity:.45;pointer-events:none}
@media (max-width: 720px){
  :root{--strip:62px}
  .demo-strip{flex-direction:column;gap:0}
  .demo-strip p{max-width:100%}
}
/* V19.15: auf 320 px reicht die Demo-Zeile mit dem etwas kleineren Seitenrand ohne Auslassung */
@media (max-width: 340px){.demo-strip{padding:0 .25rem}}