/* Portal Die Spielewelten | Startseite nach dem Kunden-Styleguide (Styleguide 08/2026, kunde-brandkit)
   Schriften: Ludu Cudu nur für Überschriften und immer klein getippt, alles andere Lexend.
   Farben nur aus der Palette (Türkis primär), Verläufe wie im Styleguide, Korn auf den Flächen,
   Bilder im aufgerauten Gestaltungsrahmen, Logo im Fuß unten links. */

@font-face{font-family:"Ludu Cudu";src:url(../fonts/luducudu.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lexend";src:url(../fonts/lexend-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Türkis (Primärfarbe) */
  --t1:#BAF1FF;--t2:#97D5C8;--t3:#51CAA8;--t4:#489992;--t5:#257B91;--t6:#004D69;--t7:#003E54;--t8:#002736;
  --ink:#0A0F11;                       /* Kontur wie in den Illustrationen */
  --head:"Ludu Cudu","Lexend",system-ui,sans-serif;
  --body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rough:22px 30px 20px 28px / 28px 20px 30px 22px;
  --gut:clamp(20px,4vw,56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--t8);color-scheme:dark;scrollbar-color:var(--t5) var(--t8);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font:400 17px/1.6 var(--body);color:var(--t1);background:var(--t8);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;accent-color:var(--t3);caret-color:var(--t3)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--t3);color:var(--t8)}
:focus-visible{outline:3px solid var(--t1);outline-offset:3px;border-radius:10px}
.welt-hell :focus-visible{outline-color:var(--t8)}
h1,h2,h3{font-family:var(--head);font-weight:400;text-transform:lowercase;line-height:.92;letter-spacing:.004em;text-wrap:balance}
.wrap{position:relative;max-width:1280px;margin:0 auto}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--t1);color:var(--t8);font-weight:600;border-radius:var(--rough);transition:top .2s}
.skip:focus{top:16px}

/* Icons aus dem Styleguide, per Maske in Palettenfarben */
.ic{display:inline-block;flex:none;width:1.25em;height:1.25em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-ticket{--i:url(../img/marke/icons/reservierung_ticket.svg)}
.i-kalender{--i:url(../img/marke/icons/kalender.svg)}
.i-sanduhr{--i:url(../img/marke/icons/sanduhr_spielzeit.svg)}
.i-standort{--i:url(../img/marke/icons/standort.webp)}
.i-wuerfel{--i:url(../img/marke/icons/wuerfel.svg)}
.i-controller{--i:url(../img/marke/icons/controller.svg)}
.i-joystick{--i:url(../img/marke/icons/joystick.svg)}
.i-pokal{--i:url(../img/marke/icons/siegerpokal.svg)}
.i-hand{--i:url(../img/marke/icons/zeigende-hand.svg)}
.i-home{--i:url(../img/marke/icons/home.svg)}
.i-spieler{--i:url(../img/marke/icons/spieleranzahl.svg)}
.i-pen{--i:url(../img/marke/icons/penupaper.svg)}
.i-post{--i:url(../img/marke/icons/newsletter.webp)}
.i-kontakt{--i:url(../img/marke/icons/kontakt.svg)}

/* Korn wie auf allen Illustrationen (multipliziert) */
.korn{position:relative;isolation:isolate}
.korn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:url(../img/marke/korn.png) 0 0/110px;mix-blend-mode:multiply;opacity:.26}

/* Welten als Verläufe aus dem Styleguide */
.welt-hell{background:var(--t3) radial-gradient(ellipse 75% 70% at 50% 35%,var(--t2) 0%,var(--t3) 50%,var(--t4) 100%)}
.welt-dunkel{background:var(--t7) radial-gradient(ellipse 70% 60% at 50% 42%,var(--t5) -80%,var(--t6) 35%,var(--t7) 66%,var(--t8) 100%)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px 0 22px;border:2.5px solid var(--ink);border-radius:var(--rough);
  font:600 18px/1 var(--body);white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:translate .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn .ic{width:28px;height:28px}
.btn-primary{background:var(--t3);color:var(--t8)}
.btn-primary:hover{background:var(--t2);translate:0 -2px}
.btn-ghost{color:var(--t1);border-color:var(--t2);background:rgba(0,39,54,.45)}
.btn-ghost:hover{background:rgba(0,39,54,.8);border-color:var(--t1);translate:0 -2px}
.btn:active{translate:0 1px}
.btn-sm{min-height:46px;padding:0 18px 0 15px;font-size:15px;gap:9px}
.btn-sm .ic{width:22px;height:22px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:clamp(16px,2.6vw,38px);height:var(--nav-h);padding:0 var(--gut);
  transition:background-color .3s,box-shadow .3s}
.nav.solid{background:rgba(0,39,54,.95);box-shadow:0 1px 0 rgba(151,213,200,.16),0 12px 30px -20px rgba(0,0,0,.7)}
.nav-logo img{height:50px;width:auto}
.nav-links{display:flex;gap:clamp(18px,2.2vw,32px)}
.nav-links a{position:relative;padding:8px 0;font-weight:500;font-size:16px;color:var(--t1);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--t3);scale:0 1;transform-origin:left;transition:scale .3s var(--ease)}
.nav-links a:hover{color:var(--t3)}
.nav-links a:hover::after{scale:1 1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-hours{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px 0 13px;border:2px solid rgba(151,213,200,.5);border-radius:var(--rough);
  background:rgba(0,39,54,.85);color:var(--t1);font-size:15px;font-weight:500;white-space:nowrap;transition:border-color .2s}
.nav-hours:hover{border-color:var(--t3)}
.nav-hours .ic{width:22px;height:22px;color:var(--t3)}
.nav-burger{display:none;place-content:center;gap:5px;width:46px;height:46px;border:2px solid rgba(151,213,200,.5);border-radius:var(--rough);background:rgba(0,39,54,.85)}
.nav-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--t1);transition:translate .3s var(--ease),rotate .3s var(--ease),opacity .2s}
.nav-burger span:nth-child(2){width:15px}
.nav-burger[aria-expanded="true"] span:nth-child(1){translate:0 7.5px;rotate:45deg}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){translate:0 -7.5px;rotate:-45deg}

.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;gap:30px;padding:calc(var(--nav-h) + 28px) var(--gut) 40px;overflow:auto;background:var(--t8)}
.menu nav{display:grid;gap:4px}
.menu nav a{font:400 clamp(44px,13vw,64px)/1.08 var(--head);text-transform:lowercase;color:var(--t1)}
.menu nav a:hover{color:var(--t3)}
.menu-hours{display:flex;align-items:center;gap:10px;color:var(--t2);font-weight:500}
.menu-hours .ic{width:24px;height:24px;color:var(--t3)}
.menu .btn{align-self:flex-start}

/* ---------- Hero: Primärwelt, oben das Portal, darunter die drei ---------- */
.hero{overflow:clip;background:var(--t8)}
.hero-in{max-width:1360px;margin:0 auto;padding:calc(var(--nav-h) + 36px) var(--gut) 28px;display:grid;grid-template-columns:minmax(0,1fr) clamp(440px,46vw,660px);gap:clamp(16px,3vw,40px);align-items:center;min-height:min(100svh,1000px)}
.hero-copy{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border:2px solid var(--ink);border-radius:var(--rough);background:var(--t1);color:var(--t8);font-weight:600;font-size:15px;rotate:-2deg}
.badge .ic{width:22px;height:22px;color:var(--t5)}
.hero h1{font-size:clamp(84px,9.4vw,136px)}
.h1-a{display:block;margin:28px 0 8px;font-size:clamp(30px,4vw,58px);color:var(--t2)}
.h1-b{display:block;font-size:inherit;line-height:.84;color:var(--t3)}
.lead{max-width:34em;margin-top:28px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--t1)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* Adressen führen zur Route in Google Maps */
.ort-link{text-decoration:underline;text-decoration-color:rgba(151,213,200,.5);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.ort-link:hover{color:var(--t3);text-decoration-color:var(--t3)}

/* Bühne in Titelbild-Maßen (1080 × 1300): Ebenen aus der Original-Illustration */
.buehne{position:relative;aspect-ratio:1080/1300;width:100%}
/* Leuchten der Primärwelt (Türkis-Verlauf aus dem Styleguide) sitzt direkt hinter dem Portal */
.buehne::before{content:"";position:absolute;z-index:-2;left:53%;top:34%;width:262%;height:164%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--t3) 0%,var(--t5) 34%,var(--t7) 66%,rgba(0,39,54,0) 100%)}
.b-flug{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.portal{position:absolute;left:19.877%;top:.769%;width:61.265%;display:block;transform-origin:54.61% 41.94%;border-radius:42%;-webkit-tap-highlight-color:transparent}
.p-glow{position:absolute;left:-17.935%;top:-14.383%;width:141.01%;max-width:none;pointer-events:none;transition:filter .5s var(--ease)}
.p-scherben{position:relative;width:100%;transition:scale .5s var(--ease)}
.p-licht{position:absolute;left:54.61%;top:41.94%;width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#F2FFF9 0%,var(--t1) 30%,rgba(151,213,200,.55) 55%,rgba(81,202,168,0) 72%)}
.portal:hover .p-glow,.portal:focus-visible .p-glow{filter:brightness(1.22) saturate(1.1)}
.portal:hover .p-scherben,.portal:focus-visible .p-scherben{scale:1.025}
.portal:focus-visible{outline-offset:10px}
.b-freunde{position:absolute;left:5.34%;top:39.487%;width:85.185%;pointer-events:none}
/* Am Event-Tag: Leuchten und Sticker in den Farben des Events */
.buehne.event-tag::before{background:radial-gradient(closest-side,var(--ev-licht) 0%,var(--t6) 40%,var(--t7) 66%,rgba(0,39,54,0) 100%)}
.ev-heute{position:absolute;right:2%;bottom:15%;z-index:4;display:inline-flex;align-items:center;gap:9px;max-width:290px;padding:9px 14px 9px 11px;border:2px solid var(--ink);border-radius:var(--rough);
  background:var(--ev-hell);color:var(--ev-dunkel);font-size:14px;font-weight:500;line-height:1.35;rotate:3deg;transition:translate .25s var(--ease)}
.ev-heute b{font-weight:700}
.ev-heute .ic{flex:none;width:22px;height:22px}
.ev-heute:hover{translate:0 -2px}
.motion .portal{animation:schweben 6.5s ease-in-out infinite}
.motion .b-freunde{animation:schweben2 5.4s ease-in-out infinite}
.motion .b-flug{animation:treiben 14s ease-in-out infinite}
.springt .portal,.springt .b-freunde,.springt .b-flug,.springt .track{animation-play-state:paused}
@keyframes schweben{50%{translate:0 -10px}}
@keyframes schweben2{50%{translate:0 7px}}
@keyframes treiben{50%{translate:-8px 6px}}

/* ---------- Laufband wie im Steady-Banner ---------- */
.ticker{z-index:3;overflow:hidden;padding:14px 0 12px;border-block:2.5px solid var(--ink);background:var(--t1)}
.track{display:flex;width:max-content}
.motion .track{animation:lauf 52s linear infinite}
.ticker:hover .track{animation-play-state:paused}
html:not(.motion) .track{translate:-90px 0}
.lauf{display:flex;align-items:center;gap:30px;padding-right:30px;font:400 36px/1 var(--head);text-transform:lowercase;color:var(--t7);white-space:nowrap}
.lauf .ic{width:30px;height:30px;color:var(--t5)}
@keyframes lauf{to{translate:-50% 0}}

/* ---------- Abschnitte mit gezeichneter Oberkante ---------- */
.sec{position:relative;padding:clamp(72px,9vw,120px) var(--gut) clamp(80px,9vw,124px);overflow-x:clip}
.kante{margin-top:-30px;padding-top:clamp(104px,11vw,150px)}
.kante-linie{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.kante-linie path{stroke-dasharray:1 1;stroke-dashoffset:var(--zug,0)}
/* der vorige Abschnitt wird beim Überdecken dunkler (Wert kommt beim Scrollen aus site.js) */
.ueberdeckt::after{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;background:var(--t8);opacity:var(--dunkel,0)}
/* Figuren zum Anklicken: W20 würfelt, die Karte dreht sich um, der Joy-Stick wackelt */
.figur{display:block;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .25s}
.figur img{display:block;width:100%;height:auto;pointer-events:none}
.figur:hover{filter:drop-shadow(0 0 0 transparent) brightness(1.06)}
.figur:focus-visible{outline-offset:6px;border-radius:24px}
.wurf{position:absolute;right:-6px;top:-10px;display:grid;place-items:center;min-width:46px;height:46px;padding:0 8px;border:2.5px solid var(--ink);border-radius:var(--rough);
  background:#C4FF66;color:#232347;font:400 30px/1 var(--head);opacity:0;scale:.4;transition:opacity .2s,scale .35s var(--ease);pointer-events:none}
.wurf.da{opacity:1;scale:1}
/* Anfahrt: Karte aus OpenStreetMap-Daten im Stil der Portal-Grafiken, der Joy-Stick ist der Pin */
.anfahrt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(56px,6vw,90px)}
.anfahrt-text h3{font-size:clamp(40px,4vw,60px);color:var(--t8)}
.anfahrt-text p{margin-top:14px;max-width:30em;color:var(--t8);font-size:17px;line-height:1.55}
.anfahrt-text .btn{margin-top:24px}
.karte-rahmen{position:relative;rotate:1deg}
.karte-rahmen.gezeigt{--zug:0}
.karte{position:relative;border:3px solid var(--ink);border-radius:30px 44px 26px 40px / 40px 26px 44px 30px;overflow:hidden;background:var(--t3)}
.karte::before{z-index:1}
.karte-grund{display:block;width:100%;height:auto}
.karte-ebene{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.karte-weg,.karte-weg-rand{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:var(--zug,1)}
.karte-weg-rand{stroke:var(--ink);stroke-width:20}
.karte-weg{stroke:#F76443;stroke-width:11}
.karte-ort{fill:var(--t1);stroke:var(--ink);stroke-width:6}
.karte-name{font:400 54px var(--head);color:var(--t8);fill:var(--t8);paint-order:stroke;stroke:var(--t1);stroke-width:12px;stroke-linejoin:round}
.karte-pin{position:absolute;left:var(--x);top:var(--y);z-index:3;width:clamp(38px,4.6vw,60px);padding:0;border:0;background:none;cursor:pointer;translate:-50% -95%;-webkit-tap-highlight-color:transparent}
.karte-pin img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.karte-pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:150%;aspect-ratio:2.2;translate:-50% 0;border:3px solid #F76443;border-radius:50%;opacity:0;z-index:-1}
.motion .karte-rahmen:not(.gezeigt) .karte-pin::after{animation:pinPuls 1.8s ease-out infinite}
@keyframes pinPuls{0%{opacity:.9;scale:.4}100%{opacity:0;scale:1.5}}
.karte-pin:focus-visible{outline-offset:4px;border-radius:12px}
.karte-blase{position:absolute;left:calc(var(--x) + clamp(28px,3vw,42px));top:calc(var(--y) - clamp(110px,10vw,150px));z-index:4;display:grid;gap:4px;width:min(270px,48%);padding:14px 16px 16px;
  border:2.5px solid var(--ink);border-radius:var(--rough);background:var(--t8);color:var(--t1);font-size:14px;line-height:1.4;
  display:none;transform-origin:0% 50%}
.karte-rahmen.gezeigt .karte-blase{display:grid}
.motion .karte-rahmen.gezeigt .karte-blase{animation:blaseAuf .45s var(--ease) .7s both}
@keyframes blaseAuf{from{opacity:0;scale:.6}}
.karte-blase b{font:400 26px/1 var(--head);text-transform:lowercase;color:var(--t3)}
.karte-blase span{color:var(--t2)}
.karte-blase a{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--t3);font-weight:600}
.karte-blase a .ic{width:22px;height:22px}
.karte-quelle{position:absolute;right:10px;bottom:8px;z-index:2;padding:2px 8px;border-radius:8px;background:rgba(186,241,255,.85);color:var(--t8);font-size:12px}
/* Pfeil von der Reise zu „entdecke das portal“ */
.weiter-pfeil{display:flex;flex-direction:column;align-items:center;width:max-content;margin:56px auto 0;color:var(--t8);font:400 clamp(30px,3vw,42px)/1 var(--head);text-transform:lowercase}
.weiter-pfeil svg{width:56px;height:104px;margin-top:6px;overflow:visible}
.weiter-pfeil path{fill:none;stroke:var(--t8);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.motion .weiter-pfeil svg{animation:pfeil 1.8s ease-in-out infinite}
.weiter-pfeil:hover{color:var(--t7)}
@keyframes pfeil{50%{translate:0 10px}}
.deko{position:absolute;z-index:1;width:clamp(72px,7vw,104px);pointer-events:none}
.d-1{right:-22px;top:58px}
.d-2{left:-26px;top:47%}
.d-3{right:4%;top:110px}
.d-4{left:-24px;top:80px}

/* ---------- Reise: helltürkise Welt mit dem W20 ---------- */
.reise-head{display:flex;align-items:center;gap:30px}
.reise-head .w20{flex:none;width:clamp(150px,15vw,220px);margin:-20px 0 -10px -10px}
.reise h2{max-width:9.5em;font-size:clamp(52px,6vw,86px);color:var(--t8)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:54px}
.step{padding:28px 26px 32px;border:2.5px solid var(--ink);border-radius:26px 34px 24px 32px / 32px 24px 34px 26px;background:var(--t1);color:var(--t7)}
.step:nth-child(1){rotate:-1.2deg}
.step:nth-child(2){rotate:.8deg;translate:0 10px}
.step:nth-child(3){rotate:-.6deg}
.step:nth-child(4){rotate:1.1deg;translate:0 8px}
.step-top{display:flex;align-items:flex-start;justify-content:space-between}
.num{font:400 80px/.8 var(--head);color:var(--t5)}
.step .ic{width:60px;height:60px;color:var(--t7)}
.step h3{margin:24px 0 12px;font-size:clamp(34px,2.9vw,42px);color:var(--t8)}
.step p{font-size:16.5px;line-height:1.55}

/* ---------- Entdecke: Bilder im Gestaltungsrahmen ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
/* das Pik-Ass steht oben auf der Überschrift */
.sec-head{position:relative}
.entdecke h2{font-size:clamp(60px,7vw,100px);color:var(--t3)}
.sec-head p{max-width:330px;margin-bottom:10px;color:var(--t2);font-size:18px;line-height:1.5}
.areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin-top:58px}
.area{position:relative}
.rahmen{position:relative;aspect-ratio:4/5;overflow:hidden;-webkit-mask:url(../img/marke/rahmen.svg) center/100% 100% no-repeat;mask:url(../img/marke/rahmen.svg) center/100% 100% no-repeat;
  transition:rotate .5s var(--ease)}
.rahmen>img:only-child{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.rahmen.lebt{-webkit-mask:none;mask:none}
.area h3{margin:24px 0 14px;font-size:clamp(40px,3.4vw,48px);color:var(--t1)}
.area h3 a{display:inline-flex;align-items:center;gap:12px;outline:none}
.area h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.area h3 .ic{width:38px;height:38px;color:var(--t3)}
.area:has(a:focus-visible){outline:3px solid var(--t1);outline-offset:10px;border-radius:24px}
.area ul{display:grid;gap:8px;color:var(--t2);font-size:16px;line-height:1.4}
.area li{display:flex;gap:11px}
.area li::before{content:"";flex:none;width:8px;height:8px;margin-top:.48em;border-radius:2px 4px 3px 4px;background:var(--t3);rotate:14deg}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--t2);font-weight:600;font-size:16px;transition:gap .3s var(--ease),color .2s}
.more .ic{width:26px;height:26px;color:var(--t3)}
.area:hover .rahmen{rotate:-1.2deg}
.area:hover .rahmen>img:only-child,.area:hover .rw-karte{scale:1.05}
.area:hover .more,a.more:hover{gap:15px;color:var(--t1)}
/* rote Welt aus Original-Teilen: Hintergrund, Portal, Karte, fliegende Elemente */
.rw{background:#A63614}
.rw img{position:absolute}
.rw-bg{inset:0;width:100%;height:100%;object-fit:cover}
.rw-portal{left:6%;top:4%;width:88%}
.rw-karte{left:21%;bottom:5%;width:60%;transform-origin:50% 100%;transition:scale .6s var(--ease)}
.rw-f1{right:4%;top:58%;width:22%}
.rw-f2{left:2%;top:8%;width:24%}

/* ---------- Preise & Öffnungszeiten: dunkle Tafel ---------- */
.tafel-sec h2{font-size:clamp(54px,6.2vw,90px);color:var(--t8)}
.tafel{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin:48px 0 0 150px;padding:46px 54px 0;border:3px solid var(--ink);border-radius:30px 44px 26px 40px / 40px 26px 44px 30px;background:var(--t8)}
.tafel .joy{position:absolute;left:-196px;bottom:30px;width:200px}
.t-col h3{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:clamp(40px,3.5vw,50px);color:var(--t3)}
.t-col h3 .ic{width:40px;height:40px}
.rows>div{display:grid;gap:10px;padding:18px 0 20px;border-top:2px dashed rgba(151,213,200,.35)}
.rows dt{color:var(--t2);font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.rows dd{display:flex;align-items:baseline;gap:12px;white-space:nowrap;color:var(--t1)}
.rows b{font:400 clamp(54px,5vw,70px)/.8 var(--head);text-transform:lowercase;color:var(--t1)}
.rows dd span{color:var(--t2);font-size:16px}
.t-col .more{margin-top:10px}
.t-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 44px;margin:34px -54px 0;padding:22px 54px 24px;border-top:2.5px solid var(--ink);border-radius:0 0 40px 26px / 0 0 44px 30px;
  background:var(--t7);color:var(--t1);font-weight:500;font-size:16px}
.t-foot span{display:flex;align-items:center;gap:10px}
.t-foot .ic{width:24px;height:24px;color:var(--t3)}

/* ---------- Das sind wir: Foto im Gestaltungsrahmen ---------- */
.team{background:var(--t7) radial-gradient(ellipse 70% 70% at 30% 45%,var(--t5) -80%,var(--t6) 34%,var(--t7) 64%,var(--t8) 100%)}
.team-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(34px,5vw,70px);align-items:center}
.team-foto{aspect-ratio:16/11}
.team-foto>img:only-child{object-position:50% 40%}
.team-copy{position:relative}
.team h2{font-size:clamp(62px,6.6vw,96px);color:var(--t3)}
.team .lead{margin-top:20px}
.team .ctas{margin-top:30px}
/* Pfeile mit Namen zu den Köpfen, darunter steht jedem seine Figur (Felix: Karte, Max: Joy-Stick, Sven: W20) */
.team-bild{position:relative;margin:86px 0 54px}
.crew{position:absolute;inset:0;pointer-events:none}
.crew li{position:absolute;top:0;bottom:0;left:var(--x);width:0}
.c-felix{--x:16.4%;--kopf:11%}
.c-max{--x:49.3%;--kopf:25.5%}
.c-sven{--x:75.9%;--kopf:19%}
.c-name{position:absolute;left:0;bottom:calc(100% + 36px);translate:-50% 0;font:400 clamp(30px,2.8vw,42px)/1 var(--head);text-transform:lowercase;color:var(--t1);white-space:nowrap}
.c-schaft{position:absolute;left:0;top:-30px;width:20px;height:calc(var(--kopf) + 14px);translate:-50% 0;overflow:visible}
.c-spitze{position:absolute;left:0;top:calc(var(--kopf) - 18px);width:22px;height:15px;translate:-50% 0;overflow:visible}
.crew path{fill:none;stroke:var(--t3);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* Portal-Lupe im Teamfoto: durch die Öffnung des Portals sieht man, welche Figur zu wem gehört */
.lupe-flaeche{position:absolute;inset:0;z-index:3;touch-action:pan-y}
.lupe{position:absolute;left:0;top:0;width:240px;aspect-ratio:365/445;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
.lupe:active{cursor:grabbing}
.lupe:focus-visible .lupe-rahmen{filter:drop-shadow(0 0 0 var(--t1)) drop-shadow(0 0 6px var(--t1))}
.lupe-fenster{position:absolute;left:21.92%;top:31.69%;width:42.19%;height:42.47%;overflow:hidden;clip-path:polygon(53.90% 0.00%,41.56% 2.65%,29.87% 12.17%,2.60% 29.10%,0.00% 29.10%,3.90% 60.32%,7.14% 60.85%,13.64% 70.90%,23.38% 96.83%,27.92% 100.00%,37.66% 100.00%,86.36% 89.95%,90.26% 85.71%,95.45% 71.43%,96.10% 58.20%,100.00% 46.03%,99.35% 26.46%,76.62% 11.64%);background:var(--t8)}
.lupe-bild{position:absolute;left:0;top:0;max-width:none;pointer-events:none}
.lupe-rahmen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 12px rgba(81,202,168,.75))}
.lupe-rahmen path{fill:var(--t3);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.lupe-info{position:absolute;left:43%;top:calc(100% - 4px);display:grid;justify-items:center;gap:2px;width:max-content;max-width:240px;translate:-50% 0;padding:8px 14px 9px;
  border:2.5px solid var(--ink);border-radius:var(--rough);background:var(--t1);color:var(--t8);font-size:13px;line-height:1.35;text-align:center;rotate:-2deg;pointer-events:none}
.lupe-info b{font:400 26px/1 var(--head);text-transform:lowercase;color:var(--t8)}
.lupe-tipp{position:absolute;right:4%;bottom:6%;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border:2px solid var(--ink);border-radius:var(--rough);
  background:var(--t1);color:var(--t8);font-weight:600;font-size:14px;rotate:3deg;pointer-events:none;transition:opacity .4s}
.lupe-tipp .ic{width:22px;height:22px;color:var(--t5)}
.benutzt .lupe-tipp{opacity:0}
.motion .lupe-flaeche:not(.benutzt) .lupe{animation:lupeSchweben 3.2s ease-in-out infinite}
@keyframes lupeSchweben{50%{translate:0 -8px}}
/* Sprung zum Team am Ende von „Entdecke“: als Knopf, damit ihn niemand für die nächste Überschrift hält */
.zum-team{display:flex;width:max-content;max-width:100%;margin:56px auto 0}
.zum-team .runter{flex:none;width:20px;height:20px;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.motion .zum-team .runter{animation:runter 1.8s ease-in-out infinite}
@keyframes runter{50%{translate:0 3px}}

/* Mitgliedschaft als großes Ticket unter der Tafel */
.mitglied{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;margin:30px 0 0 150px;padding:30px 0 32px 40px;
  border:3px solid var(--ink);border-radius:28px 40px 24px 36px / 36px 24px 40px 28px;background:var(--t1);color:var(--t8);rotate:-.8deg}
.mitglied h3{display:flex;align-items:center;gap:14px;font-size:clamp(40px,4.4vw,64px);color:var(--t8)}
.mitglied h3 .ic{width:52px;height:52px;color:var(--t5)}
.m-text p{margin-top:10px;font-size:18px;line-height:1.5;color:var(--t7)}
.m-text .m-angebot{display:inline-flex;margin-top:16px;padding:7px 14px;border:2px solid var(--ink);border-radius:var(--rough);background:var(--t3);color:var(--t8);font-weight:600;font-size:16px;rotate:1.5deg}
/* Abrisskante des Tickets als gestrichelte Linie */
.m-stub{display:flex;align-items:center;margin-left:40px;padding:0 40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='18'%3E%3Crect width='3' height='10' fill='%23002736' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/3px 18px repeat-y}
.m-cta{min-height:66px;gap:14px;padding:0 24px 0 30px;font-size:20px;background:var(--t8);color:var(--t1)}
.m-cta:hover{background:var(--t7);translate:0 -2px}
.m-cta .ic{width:30px;height:30px;color:var(--t3)}

/* ---------- Fuß: Logo unten links ---------- */
.fuss{background:var(--t8);padding-bottom:46px}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px;padding-bottom:56px;border-bottom:2px solid rgba(151,213,200,.22)}
.f-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 15px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.f-h .ic{width:24px;height:24px}
.f-cols p{font-size:18px;line-height:1.55;color:var(--t1)}
.f-cols a,.f-legal a{text-decoration:underline;text-decoration-color:rgba(151,213,200,.45);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.f-cols a:hover,.f-legal a:hover{color:var(--t3);text-decoration-color:var(--t3)}
/* Kanäle des Portals: im Fuß und im Handy-Menü */
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid rgba(151,213,200,.5);border-radius:var(--rough);
  color:var(--t1);font-weight:600;font-size:16px;text-decoration:none;transition:border-color .2s,background-color .2s,translate .25s var(--ease)}
.social a:hover{border-color:var(--t3);background:rgba(81,202,168,.14);translate:0 -2px}
.menu .social{margin-top:6px}
.f-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-top:44px}
.f-logo{height:84px;width:auto}
.f-legal{color:var(--t2);font-size:14px;line-height:1.7;text-align:right}

/* ---------- Räume: fünf Welten hinter dem Portal ----------
   Drei Welten aus dem Styleguide (dunkeltürkis, helltürkis, rot) und die zwei dort vorgesehenen Erweiterungen (lila, blau).
   Jede Welt trägt ihre eigene Palette: Titel, Sticker und Karte nehmen die Farben derselben Familie. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn-nacht{background:var(--t8);color:var(--t1)}
.btn-nacht:hover{background:var(--t7);translate:0 -2px}
.btn-nacht .ic{color:var(--t3)}
.btn-hell{background:var(--t1);color:var(--t8)}
.btn-hell:hover{background:var(--t2);translate:0 -2px}
.btn-hell .ic{color:var(--t5)}
.welten{position:relative;background:var(--t8)}
.w-stage{--w-pfeil:clamp(44px,3.6vw,52px);--w-rand:var(--gut);position:relative;display:flex;flex-direction:column}
.w-panel{--w-mitte:72% 46%;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(20px,4vw,64px);
  min-height:100svh;padding:calc(var(--nav-h) + 74px) var(--gut) 112px;overflow:hidden;background:var(--w-grund);color:var(--w-text)}
.w-sterne{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../img/marke/vorlader/sterne.webp) 50% 50%/cover;opacity:.7}
.w-art{position:relative;grid-column:2;grid-row:1;justify-self:center;display:block;width:min(100%,calc(100svh - var(--nav-h) - 220px));aspect-ratio:1;
  border-radius:40%;-webkit-tap-highlight-color:transparent}
.wa{position:absolute;left:var(--l);top:var(--t);width:var(--w);max-width:none;pointer-events:none;transition:filter .4s var(--ease)}
.w-art:hover .wa-portal,.w-art:focus-visible .wa-portal{filter:brightness(1.12)}
.w-art:focus-visible{outline-offset:8px}
.w-text{position:relative;z-index:2;grid-column:1;grid-row:1;max-width:560px}
.w-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.w-title{font-size:clamp(64px,8.4vw,128px);line-height:.86;color:var(--w-titel)}
.w-kopf+.w-title{margin-top:clamp(14px,1.6vw,22px)}
/* „Hier geht’s los“ ruhig in der Akzentfarbe der Welt, „Kommt bald“ als Aufkleber zum Absperrband */
.w-los{display:inline-flex;align-items:center;gap:8px;color:var(--w-text);font-weight:600;font-size:15px}
.w-los .ic{width:22px;height:22px;color:var(--w-link)}
.w-bald-sticker{display:inline-flex;padding:6px 13px;border:2px solid var(--ink);border-radius:var(--rough);background:#C4FF66;color:#232347;font-weight:600;font-size:15px;rotate:2deg}
/* Bedienelemente auf der Bühne (zurück, Pfeile): wie die Leiste, dunkel mit Tintenrand und hellem Innenrand, damit sie auf jeder Welt stehen */
.w-zurueck,.w-pfeil{border:2px solid var(--ink);border-radius:var(--rough);background:rgba(0,39,54,.88);box-shadow:inset 0 0 0 1.5px rgba(151,213,200,.4),0 8px 18px rgba(0,0,0,.25);
  transition:translate .25s var(--ease),background-color .2s,scale .15s}
.w-zurueck svg,.w-pfeil svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* zurück zur Startseite */
.w-zurueck{position:absolute;left:var(--w-rand);top:calc(var(--nav-h) + 16px);z-index:45;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px 0 9px;
  color:var(--t1);font-weight:600;font-size:14px}
.w-zurueck svg{width:22px;height:22px;color:var(--t3)}
.w-zurueck:hover{background:var(--t8);translate:-3px 0}
.w-zurueck-kurz{display:none}
/* Pfeile zur vorigen und zur nächsten Welt, nur auf der stehenden Bühne */
.w-pfeil{display:none}
.w-gepinnt .w-pfeil{position:absolute;top:50%;z-index:41;display:grid;place-items:center;width:var(--w-pfeil);height:var(--w-pfeil);margin-top:calc(var(--w-pfeil) / -2);color:var(--t3)}
.w-pfeil svg{width:26px;height:26px}
.w-pfeil-zurueck{left:clamp(10px,1.4vw,22px)}
.w-pfeil-vor{right:clamp(10px,1.4vw,22px)}
.w-pfeil:hover{background:var(--t8)}
.w-pfeil-zurueck:hover{translate:-3px 0}
.w-pfeil-vor:hover{translate:3px 0}
.w-pfeil:active{scale:.94}
/* echte Fotos vom Dschungel im Gestaltungsrahmen, zwischen Titel und Portal */
.w-fotos{position:absolute;inset:0;pointer-events:none}
.w-foto{position:absolute;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.w-foto img{width:100%;height:100%;object-fit:cover}
.f-1{left:-6%;top:14%;width:34%;aspect-ratio:4/5;rotate:-7deg}
.f-2{left:2%;top:56%;width:38%;aspect-ratio:1;rotate:5deg}
/* Raum im Aufbau: Absperrband quer über das Bild */
.band{position:absolute;left:-22%;width:144%;height:auto;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.b-1{top:36%;rotate:-13deg}
.b-2{top:56%;rotate:9deg}
.w-bald{margin-left:6px;padding:2px 7px;border:1.5px solid var(--ink);border-radius:var(--rough);background:#C4FF66;color:#232347;font-size:12px;font-weight:700}
/* Beschreibung direkt auf der Welt, ohne Kasten */
.w-karte{margin-top:clamp(20px,2.2vw,30px)}
.w-karte h3{display:flex;align-items:center;gap:12px;font-size:clamp(28px,2.4vw,36px);color:var(--w-text)}
.w-karte h3 .ic{width:32px;height:32px;color:var(--w-link)}
.w-karte p{max-width:34em;margin-top:12px;font-size:17px;line-height:1.55;color:var(--w-text2)}
.w-link{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;color:var(--w-link);transition:gap .3s var(--ease)}
.w-link .ic{width:26px;height:26px}
.w-link:hover{gap:15px}
.w-dunkel{--w-grund:radial-gradient(ellipse 60% 70% at var(--w-mitte),var(--t3) 0%,var(--t5) 36%,var(--t7) 70%,var(--t8) 100%) var(--t8);
  --w-titel:var(--t3);--w-text:var(--t1);--w-text2:var(--t2);--w-link:var(--t3)}
.w-hell{--w-grund:radial-gradient(ellipse 75% 75% at var(--w-mitte),var(--t2) 0%,var(--t3) 48%,var(--t4) 100%) var(--t3);
  --w-titel:var(--t8);--w-text:var(--t8);--w-text2:var(--ink);--w-link:var(--ink)}
.w-lila{--w-grund:radial-gradient(ellipse 60% 70% at var(--w-mitte),#BC96FF 0%,#5B5CB5 42%,#273067 78%,#232347 100%) #273067;
  --w-titel:#B9BCED;--w-text:#B9BCED;--w-text2:#B9BCED;--w-link:#BC96FF}
.w-blau{--w-grund:radial-gradient(ellipse 60% 70% at var(--w-mitte),#4079ED 0%,#2D49AD 38%,#273067 74%,#232347 100%) #232347;
  --w-titel:#B9BCED;--w-text:#B9BCED;--w-text2:#B9BCED;--w-link:#BC96FF}
.w-rot{--w-grund:radial-gradient(ellipse 62% 72% at var(--w-mitte),#E5BC9A 0%,#F76443 32%,#A63614 68%,#73250E 100%) #73250E;
  --w-titel:#F5F1E4;--w-text:#F5F1E4;--w-text2:#F5F1E4;--w-link:#F5F1E4}
/* Portal-Rand beim Übergang in die nächste Welt */
.w-ring{position:absolute;left:0;top:0;z-index:30;width:240px;height:240px;margin:-120px 0 0 -120px;overflow:visible;opacity:0;pointer-events:none;
  fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
/* Leiste: Welt wählen oder überspringen */
.w-tabs{position:sticky;bottom:22px;z-index:40;align-self:center;display:flex;align-items:center;gap:6px;max-width:calc(100% - 2 * var(--gut));
  margin:-80px auto 22px;padding:6px;border:2px solid var(--ink);border-radius:var(--rough);background:rgba(0,39,54,.9);overflow-x:auto;scrollbar-width:none}
.w-tabs::-webkit-scrollbar{display:none}
.w-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px 0 11px;border-radius:var(--rough);color:var(--t1);font-weight:600;font-size:15px;white-space:nowrap;transition:background-color .2s,color .2s}
.w-tab .ic{width:20px;height:20px;color:var(--t3)}
.w-tab:hover{background:rgba(81,202,168,.18)}
.w-tab[aria-current="true"]{background:var(--t3);color:var(--t8)}
.w-tab[aria-current="true"] .ic{color:var(--t8)}
.w-skip{flex:none;padding:0 12px;color:var(--t2);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.w-skip:hover{color:var(--t1)}
/* mit Bewegung: die Bühne steht, die Welten liegen übereinander */
/* Rand so breit, dass die Pfeile neben dem Text Platz haben */
.w-gepinnt{--w-rand:max(var(--gut),calc(clamp(10px,1.4vw,22px) + var(--w-pfeil) + 12px));height:100svh;overflow:hidden}
.w-gepinnt .w-panel{position:absolute;inset:0;min-height:0;padding-inline:var(--w-rand)}
.w-gepinnt .w-tabs{position:absolute;top:auto;bottom:22px;left:50%;translate:-50% 0;margin:0}
/* danach */
.weiter-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,80px);align-items:start}
.weiter h2{font-size:clamp(60px,7vw,100px);color:var(--t8)}
.weiter .lead{max-width:30em}
.woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,.8vw,10px);max-width:620px;margin-top:30px}
.woche li{display:grid;place-items:center;align-content:center;gap:2px;aspect-ratio:1;border:2.5px solid var(--ink);border-radius:var(--rough);background:var(--t1);color:var(--t8)}
.woche li:nth-child(odd){rotate:-2deg}
.woche li:nth-child(even){rotate:1.5deg}
.woche b{font:400 clamp(28px,3.2vw,44px)/.9 var(--head);text-transform:lowercase}
.woche .we{background:var(--t8);color:var(--t1)}
.woche .aus{background:var(--t2);color:var(--t7);rotate:-6deg}
.woche .aus b{text-decoration:line-through;text-decoration-thickness:3px}
.woche li{position:relative}
.woche .aus span:not(.sr-only){position:absolute;left:50%;bottom:-13px;translate:-50% 0;padding:1px 6px;border:1.5px solid var(--ink);border-radius:var(--rough);background:var(--t1);color:var(--t8);font-size:11px;font-weight:700;white-space:nowrap;rotate:4deg}
.woche-preise{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,.8vw,10px);max-width:620px;margin-top:12px;font-weight:600;font-size:15px;color:var(--t8)}
.woche-preise span{padding-top:8px;border-top:3px solid var(--ink);text-align:center}
.p-woche{grid-column:2/6}
.p-we{grid-column:6/8}
.woche-zeit{display:flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;color:var(--t8)}
.woche-zeit .ic{width:22px;height:22px}
.weiter-wege{display:grid;gap:22px}
.ort{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px;padding:24px 26px;border:3px solid var(--ink);border-radius:30px 44px 26px 40px / 40px 26px 44px 30px;
  background:var(--t8);color:var(--t1);rotate:-1deg;transition:translate .25s var(--ease)}
.ort:hover{translate:0 -3px}
.ort>.ic{width:44px;height:44px;color:var(--t3);grid-row:span 2}
.ort-text{display:grid}
.ort-text b{font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.2}
.ort-text span{color:var(--t2);font-size:17px}
.ort-cta{grid-column:2;display:inline-flex;align-items:center;gap:10px;margin-top:8px;color:var(--t3);font-weight:600}
.ort-cta .ic{width:26px;height:26px}
.ort:hover .ort-cta{gap:15px}
.weg{display:grid;justify-items:start;gap:10px}
.weg p{color:var(--t8);font-size:16px;font-weight:500}
.weiter.welt-hell{background:var(--t3) radial-gradient(ellipse 85% 95% at 30% 30%,var(--t2) 0%,var(--t3) 62%)}
.weiter .lead{color:var(--t8)}
/* Ankunft durchs Portal: der Lichtblitz der Startseite geht hier weiter */
.arrive-flash{display:none}
html.arrive .arrive-flash{display:block;position:fixed;inset:0;z-index:90;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#FFFFFF 0%,#D6FFF0 38%,#7FE6C2 100%);animation:ankunftAus .8s 3.5s forwards}
@keyframes ankunftAus{to{opacity:0;visibility:hidden}}
.ankunft-text{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max-content;max-width:90vw;text-align:center;font:400 clamp(56px,10vw,150px)/.9 var(--head);text-transform:lowercase;color:var(--t8)}
@media (max-width:700px){
  .w-stage{--w-bild:min(70vw,30svh);--w-pfeil:46px}
  .w-panel{--w-mitte:50% 24%;grid-template-columns:1fr;align-content:start;gap:6px;padding:calc(var(--nav-h) + 60px) var(--gut) 92px}
  .w-gepinnt{--w-rand:var(--gut)}
  .w-art{grid-column:1;grid-row:1;width:var(--w-bild)}
  .w-zurueck{top:calc(var(--nav-h) + 10px)}
  .w-zurueck-lang{display:none}
  .w-zurueck-kurz{display:inline}
  /* Pfeile auf Höhe des Bilds, links und rechts daneben */
  .w-gepinnt .w-pfeil{top:calc(var(--nav-h) + 60px + var(--w-bild) / 2)}
  .w-pfeil svg{width:22px;height:22px}
  .w-pfeil-zurueck{left:8px}
  .w-pfeil-vor{right:8px}
  .w-los{font-size:14px}
  .w-los .ic{width:20px;height:20px}
  .f-1{left:-14%;top:16%;width:36%}
  .f-2{left:-8%;top:58%;width:38%}
  .weiter-in{grid-template-columns:1fr}
  .woche-preise{font-size:12px}
  .woche .aus span:not(.sr-only){left:-2px;translate:0}
  .w-text{grid-column:1;grid-row:2}
  .w-title{font-size:clamp(46px,13vw,62px)}
  .w-kopf+.w-title{margin-top:10px}
  .w-karte{margin-top:14px}
  .w-karte h3{font-size:24px}
  .w-karte h3 .ic{width:26px;height:26px}
  .w-karte p{margin-top:8px;font-size:15px}
  .w-link{margin-top:10px}
  .w-tabs{max-width:calc(100% - 2 * var(--gut));bottom:14px;margin:-68px auto 14px}
  .w-gepinnt .w-tabs{left:var(--gut);right:var(--gut);bottom:14px;translate:none;max-width:none}
  .w-tab{min-height:38px;font-size:14px}
}
@media (max-width:700px) and (max-height:760px){
  .w-stage{--w-bild:min(56vw,24svh)}
  .w-title{font-size:44px}
  .w-karte p{font-size:14px;line-height:1.5}
}

/* ---------- Vorlader: drei Welten, die vier Teile des Portals rasten ein, es leuchtet, man geht hinein ---------- */
.vorlader{display:none}
html.mit-vorlader{overflow:hidden}
html.mit-vorlader .vorlader{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;background:#73250E;
  --bw:min(62vw,calc(min(66vh,600px) * .7975),470px);--bh:calc(var(--bw) / .7975);
  --su:min(var(--bw),36vw);--sv:min(var(--bh),32vh)}
.v-welt{position:absolute;inset:0}
.v-welt.w-rot{background:radial-gradient(ellipse 85% 75% at 32% 40%,#E5BC9A 0%,#F76443 34%,#A63614 72%,#73250E 100%)}
.v-welt.w-hell{opacity:0;background:radial-gradient(ellipse 80% 75% at 52% 38%,var(--t2) 0%,var(--t3) 46%,var(--t4) 100%)}
.v-welt.w-dunkel{opacity:0;background:radial-gradient(ellipse 70% 70% at 50% 46%,var(--t3) 0%,var(--t5) 36%,var(--t7) 72%,var(--t8) 100%)}
.v-sterne{position:absolute;inset:0;background:url(../img/marke/vorlader/sterne.webp) 50% 50%/cover;opacity:.75}
.vorlader::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(../img/marke/korn.png) 0 0/110px;mix-blend-mode:multiply;opacity:.3}
.v-portal{position:absolute;left:50%;top:50%;width:var(--bw);height:var(--bh);translate:-50% -50%}
.v-glow{position:absolute;left:-17.935%;top:-14.383%;width:141.01%;aspect-ratio:420/444;visibility:hidden;background:url(../img/marke/hero/glow.webp) 0 0/100% 100% no-repeat}
.v-licht{position:absolute;left:54.61%;top:41.94%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#F2FFF9 0%,var(--t1) 30%,rgba(151,213,200,.5) 55%,rgba(81,202,168,0) 72%)}
/* Startlage: die Teile liegen verstreut und schweben, bis der Magnet sie holt */
.v-teil{position:absolute;display:block;transform:translate(calc(var(--sx) * var(--su)),calc(var(--sy) * var(--sv))) rotate(var(--r)) scale(var(--s))}
.v-teil img{width:100%;animation:liegen 2.4s ease-in-out infinite;animation-delay:var(--d)}
.v-teil.fest img{animation:none}
.t-ring{left:19.244%;top:11.45%;width:76.474%;--sx:-.35;--sy:.62;--r:-34deg;--s:.86;--d:-.4s}
.t-links{left:0;top:0;width:48.413%;--sx:-.85;--sy:-.3;--r:52deg;--s:.9;--d:-1.1s}
.t-oben{left:63.375%;top:1.085%;width:36.625%;--sx:.75;--sy:-.42;--r:-74deg;--s:.86;--d:-.7s}
.t-unten{left:37.985%;top:86.983%;width:34.71%;--sx:.62;--sy:.5;--r:118deg;--s:.86;--d:-1.6s}
@keyframes liegen{50%{translate:0 -7px;rotate:3deg}}

/* ---------- Der Sprung ins Portal: Tunnel, Logo, Lichtblitz ---------- */
/* beim Zoom darf das Portal über den Hero hinaus wachsen, dahinter wird alles dunkel */
.springt .hero{z-index:10;overflow:visible}
.sprung-grund{position:fixed;inset:0;z-index:9;visibility:hidden;opacity:0;pointer-events:none;background:var(--t8)}
.warp{position:fixed;inset:0;z-index:80;visibility:hidden;opacity:0;pointer-events:none}
.warp.on{pointer-events:auto;cursor:pointer}
.warp-gl{position:absolute;inset:0;display:block;width:100%;height:100%;background:var(--t8)}
.warp-emblem{position:absolute;left:50%;top:50%;width:min(62vmin,560px);height:min(62vmin,560px);margin:calc(min(62vmin,560px) / -2) 0 0 calc(min(62vmin,560px) / -2);
  overflow:visible;opacity:0;filter:drop-shadow(0 0 28px rgba(81,202,168,.65))}
.warp-emblem .we-shard{fill:var(--t3)}
.warp-flash{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#FFFFFF 0%,#D6FFF0 38%,#7FE6C2 100%)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 34px}
  .tafel{margin-left:120px;gap:0 36px;padding-inline:36px}
  .t-foot{margin-inline:-36px;padding-inline:36px}
  .tafel .joy{left:-150px;width:150px}
  .mitglied{grid-template-columns:1fr;margin-left:120px;padding-right:40px}
  .m-stub{margin:22px 0 0;padding:22px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='3'%3E%3Crect width='10' height='3' fill='%23002736' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/18px 3px repeat-x}
}

/* ---------- Handy ---------- */
@media (max-width:700px){
  :root{--nav-h:68px}
  .nav{gap:10px}
  .nav-logo img{height:34px}
  .nav-cta{display:none}
  .nav-hours{min-height:42px;padding:0 11px 0 9px;gap:7px;font-size:13px}
  .nav-hours .ic{width:18px;height:18px}
  .nav-burger{width:44px;height:44px}
  .buehne::before{left:52%;top:42%;width:190%;height:200%}
  .hero-in{grid-template-columns:1fr;gap:0;min-height:0;padding:calc(var(--nav-h) + 24px) var(--gut) 8px}
  .badge{padding:7px 13px 7px 10px;font-size:13px}
  .badge .ic{width:18px;height:18px}
  .hero h1{font-size:clamp(58px,17.5vw,74px)}
  .h1-a{margin:18px 0 6px;font-size:clamp(22px,6.6vw,28px)}
  .lead{margin-top:16px;font-size:16px}
  .ctas{gap:10px;margin-top:22px}
  .ctas .btn{flex:1 1 auto;min-height:48px;padding:0 14px 0 12px;gap:8px;font-size:15px;white-space:nowrap}
  .ctas .btn .ic{width:21px;height:21px}
  .buehne{width:calc(100% + 2 * var(--gut));margin:14px calc(-1 * var(--gut)) 0}
  .ev-heute{right:4%;bottom:7%;max-width:250px;font-size:13px}
  .ticker{padding:12px 0 10px}
  .lauf{gap:22px;padding-right:22px;font-size:27px}
  .lauf .ic{width:24px;height:24px}
  .kante{margin-top:-22px}
  .reise-head{flex-direction:column;align-items:flex-start;gap:6px}
  .reise-head .w20{width:150px;margin:0 0 0 -6px}
  .steps{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .step{padding:22px 22px 24px}
  .num{font-size:62px}
  .step .ic{width:48px;height:48px}
  .step h3{margin:14px 0 8px}
  .step p{font-size:16px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .weiter-pfeil,.zum-team{margin-top:40px}
  .lupe-flaeche>.lupe-info{left:50%;top:calc(100% + 14px);max-width:none;width:max-content;rotate:-1deg}
  .lupe-info{font-size:12px}
  .lupe-info b{font-size:22px}
  .lupe-tipp{font-size:12px;bottom:4%}
  .anfahrt{grid-template-columns:1fr}
  .karte-rahmen{rotate:0deg}
  .karte-name{font-size:64px}
  .karte-blase{position:static;width:auto;margin-top:12px;transform-origin:50% 0%}
  .weiter-pfeil svg{height:84px}
  .sec-head p{font-size:16px}
  .areas{grid-template-columns:1fr;gap:48px;margin-top:34px}
  .rahmen{aspect-ratio:1}
  .rw-portal{left:12%;top:2%;width:76%}
  .rw-karte{left:27%;width:46%}
  .rw-f1{top:55%;width:18%}
  .rw-f2{width:19%}
  .area h3{margin:18px 0 10px}
  .tafel{grid-template-columns:1fr;gap:26px;margin:196px 0 0;padding:30px 22px 0}
  .tafel .joy{left:auto;right:12px;bottom:auto;top:-184px;width:106px}
  .t-col h3{margin-bottom:12px}
  .rows dt{font-size:13px}
  .t-foot{flex-direction:column;gap:12px;margin:6px -22px 0;padding:18px 22px 20px;font-size:15px}
  .team{background:var(--t7) radial-gradient(ellipse 110% 50% at 50% 30%,var(--t5) -80%,var(--t6) 36%,var(--t7) 66%,var(--t8) 100%)}
  .team-in{grid-template-columns:1fr}
  .team-foto{aspect-ratio:4/3}
  .team-bild{margin:66px 0 118px}
  .c-felix{--x:13.3%}
  .c-max{--x:49.2%}
  .c-sven{--x:78.3%}
  .c-name{bottom:calc(100% + 26px);font-size:26px}
  .c-schaft{top:-22px;height:calc(var(--kopf) + 6px)}
  .mitglied{grid-template-columns:1fr;margin:26px 0 0;padding:24px 22px;rotate:-.5deg}
  .mitglied h3 .ic{width:40px;height:40px}
  .m-text p{font-size:16px}
  .m-stub{margin:22px 0 0;padding:22px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='3'%3E%3Crect width='10' height='3' fill='%23002736' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/18px 3px repeat-x}
  .m-cta{flex:1 1 100%}
  .f-cols{grid-template-columns:1fr;gap:28px;padding-bottom:36px}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:22px}
  .f-logo{height:58px}
  .f-legal{text-align:left}
  .deko{display:none}
}

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}