/* =========================================================================
   DER VERSMOLDER HORRORHOF · Das Gruseln beginnt
   Modi: normal (Standard) · kids · hardcore
   ========================================================================= */

:root{
  --bg:#050409;
  --panel:rgba(18,14,28,.72);
  --blood:#c1121f;
  --blood-bright:#ff2d1f;
  --pumpkin:#ff7518;
  --pumpkin-soft:#ffb15a;
  --toxic:#8dff5a;
  --purple:#6b21a8;
  --bone:#eae6da;
  --muted:#a49bb4;
  --line:rgba(255,117,24,.18);
  --moon:#ff6a3d;
  --moon-2:#ffd7a1;
  --glow-pumpkin:0 0 18px rgba(255,117,24,.55);
  --glow-blood:0 0 22px rgba(193,18,31,.55);
  --font-scream:'Creepster',system-ui,cursive;
  --font-head:'Cinzel Decorative','Cinzel',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --ember:255,117,24;
  --sky-a:#1a0b2e; --sky-b:#0a0714; --sky-c:#050409;
}
/* ---- KINDER-MODUS: freundlich, hell, grün/violett ---- */
:root[data-mode="kids"]{
  --blood:#ff8c42;--blood-bright:#ffb15a;--moon:#8dff5a;--moon-2:#d6ffb0;
  --glow-blood:0 0 22px rgba(255,177,90,.5);--ember:141,255,90;
  --sky-a:#26314f;--sky-b:#161a33;--sky-c:#0c1022;--muted:#c9c2d6;
}
/* ---- HARDCORE: tiefes Blutrot, düster ---- */
:root[data-mode="hardcore"]{
  --pumpkin:#ff3b1f;--pumpkin-soft:#ff6a4d;--blood:#8b0000;--blood-bright:#ff1a0d;
  --moon:#b8000a;--moon-2:#ff5a4d;--line:rgba(255,26,13,.22);--ember:200,20,10;
  --glow-pumpkin:0 0 20px rgba(255,26,13,.6);--glow-blood:0 0 26px rgba(139,0,0,.7);
  --sky-a:#2a0410;--sky-b:#12030a;--sky-c:#040103;--bone:#e7dcd6;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--bone);font-family:var(--font-body);line-height:1.65;
  overflow-x:hidden;max-width:100%;min-height:100vh;position:relative}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ============ HINTERGRUND-SZENE ============ */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--moon) 12%, transparent) 0%, transparent 42%),
  linear-gradient(180deg,var(--sky-a) 0%, var(--sky-b) 45%, var(--sky-c) 100%);
  transition:background 1.2s ease}
/* Sterne (zwei Ebenen, twinkle) */
.stars,.stars::after{position:absolute;inset:-50%;background-repeat:repeat;content:""}
.stars{background-image:
  radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 70% 20%,#fff,transparent),
  radial-gradient(1px 1px at 40% 60%,#dfe,transparent),
  radial-gradient(1.6px 1.6px at 85% 45%,#fff,transparent),
  radial-gradient(1px 1px at 55% 80%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 12% 75%,#fff,transparent),
  radial-gradient(1px 1px at 90% 70%,#fff,transparent);
  background-size:600px 600px;opacity:.6;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25}}
/* Blutmond */
.moon{position:absolute;top:6vh;right:9vw;width:min(190px,34vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--moon-2),var(--moon) 55%,color-mix(in srgb,var(--moon) 60%,#000) 100%);
  box-shadow:0 0 70px 12px color-mix(in srgb,var(--moon) 55%,transparent),inset -14px -10px 40px rgba(0,0,0,.5);
  transition:background 1s,box-shadow 1s;animation:moonPulse 8s ease-in-out infinite}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(7px 7px at 40% 45%,rgba(0,0,0,.18),transparent),
  radial-gradient(10px 10px at 62% 60%,rgba(0,0,0,.15),transparent),
  radial-gradient(5px 5px at 55% 30%,rgba(0,0,0,.14),transparent)}
.moon-glow{position:absolute;inset:-60% ;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--moon) 30%,transparent),transparent 60%)}
@keyframes moonPulse{50%{filter:brightness(1.12)}}
/* driftende Wolken */
.clouds{position:absolute;inset:0;opacity:.5;background:
  radial-gradient(closest-side,rgba(10,6,16,.9),transparent) 10% 14%/240px 70px,
  radial-gradient(closest-side,rgba(10,6,16,.85),transparent) 60% 10%/320px 80px,
  radial-gradient(closest-side,rgba(10,6,16,.8),transparent) 85% 20%/260px 66px;
  background-repeat:no-repeat;animation:drift 60s linear infinite}
@keyframes drift{from{background-position:110% 14%,160% 10%,185% 20%}to{background-position:-40% 14%,-30% 10%,-20% 20%}}
/* Hügel */
.hills{position:absolute;left:0;right:0;bottom:12vh;height:26vh;
  background:radial-gradient(120% 100% at 50% 100%,#0a0713 0%,transparent 70%)}
/* Baum-/Haus-Silhouette */
.treeline{position:absolute;left:0;right:0;bottom:0;height:24vh;background-repeat:repeat-x;background-position:bottom;background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='%23040208'%3E%3Cpath d='M0 300 V180 l30 -10 8 -40 6 40 10 6 4 -30 5 30 14 8 V300z'/%3E%3Cpath d='M120 300 V150 l40 6 6 -60 8 60 20 8 6 -34 6 34 24 10 V300z'/%3E%3Cpath d='M1080 300 V150 l40 6 6 -60 8 60 20 8 6 -34 6 34 24 10 V300z'/%3E%3Cpath d='M300 300 V210 l60 -20 20 -50 20 50 60 20 V300z'/%3E%3Cpath d='M760 300 V205 l70 -18 18 -46 18 46 70 18 V300z'/%3E%3Cpath d='M520 300 V170 h30 v-40 l25 -26 25 26 v40 h30 V300z M560 150 h30 v20 h-30z'/%3E%3Cpath d='M0 300 V250 Q300 210 600 250 T1200 250 V300z'/%3E%3C/g%3E%3C/svg%3E")}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,transparent 42%,rgba(0,0,0,.6) 100%)}
#embers{position:absolute;inset:0}
/* ---- Echter, weicher, mehrschichtiger Nebel ---- */
/* GPU-günstig: Blur wird nur EINMAL gerastert, Bewegung über transform (kein Re-Blur pro Frame) */
.fog{position:absolute;left:-100%;width:300%;pointer-events:none;background-repeat:repeat-x;
  background-position:0 bottom;will-change:transform;transform:translateZ(0);backface-visibility:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 60%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 60%,transparent 100%)}
.fog-1{bottom:-4vh;height:62vh;background-size:1200px 100%;opacity:.5;filter:blur(6px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cfilter id='a' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.66 0 0 0 0 0.82 0.9 0 0 0 -0.28'/%3E%3C/filter%3E%3Crect width='1200' height='500' filter='url(%23a)'/%3E%3C/svg%3E");
  animation:fogA 90s linear infinite}
.fog-2{bottom:2vh;height:50vh;background-size:900px 100%;opacity:.38;filter:blur(5px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.016' numOctaves='4' seed='27' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.58 0 0 0 0 0.78 0.95 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='900' height='420' filter='url(%23b)'/%3E%3C/svg%3E");
  animation:fogB 62s linear infinite}
.fog-3{bottom:16vh;height:44vh;background-size:1500px 100%;opacity:.2;filter:blur(8px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='400'%3E%3Cfilter id='c' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.008' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.62 0 0 0 0 0.8 0.8 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='1500' height='400' filter='url(%23c)'/%3E%3C/svg%3E");
  animation:fogC 120s linear infinite}
@keyframes fogA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}
@keyframes fogB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-900px,0,0)}}
@keyframes fogC{from{transform:translate3d(-1500px,0,0)}to{transform:translate3d(0,0,0)}}
:root[data-mode="kids"] .fog{opacity:.3}

/* Blitz + Blut-Overlay */
.lightning{position:fixed;inset:0;background:#fff;opacity:0;z-index:2;pointer-events:none;mix-blend-mode:screen}
.lightning.flash{animation:flash 900ms ease-out}
@keyframes flash{0%{opacity:0}5%{opacity:.85}10%{opacity:.1}14%{opacity:.7}22%{opacity:0}100%{opacity:0}}
:root[data-mode="kids"] .lightning{display:none}
.blood-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s;
  background:radial-gradient(circle at 50% -10%,rgba(139,0,0,.35),transparent 55%),
  linear-gradient(180deg,rgba(90,0,0,.16),transparent 30%)}
:root[data-mode="hardcore"] .blood-overlay{opacity:1}
:root[data-mode="hardcore"] body{animation:hcShiver 9s ease-in-out infinite}
@keyframes hcShiver{0%,96%,100%{filter:none}97%{filter:hue-rotate(-8deg) contrast(1.06)}98%{filter:none}}

/* Jumpscare – bewusst KLEIN/zentral, nicht bildschirmfüllend */
.jumpscare{position:fixed;z-index:120;top:50%;left:50%;width:min(300px,70vw);
  transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(255,0,0,.8)) contrast(1.4) brightness(1.2)}
.jumpscare img{width:100%;filter:hue-rotate(-20deg) saturate(1.4)}
.jumpscare.hit{animation:scare .9s ease-out}
@keyframes scare{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-6deg)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(3deg)}
  20%{transform:translate(-48%,-52%) scale(1) rotate(-3deg)}
  30%{transform:translate(-52%,-48%) scale(1.02)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}

/* ============ Layout-Grundlagen ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:3}
section{position:relative;z-index:3;padding:96px 0}
.eyebrow{font-family:var(--font-scream);letter-spacing:2px;color:var(--pumpkin);text-shadow:var(--glow-pumpkin);font-size:1.5rem}
h2.title{font-family:var(--font-head);font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.1;margin:.2em 0 .6em;letter-spacing:1px}
.title .accent{color:var(--blood-bright);text-shadow:var(--glow-blood)}
.lead{color:var(--muted);max-width:64ch;font-size:1.08rem}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ Navbar ============ */
header.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;transition:.35s}
header.nav.scrolled{background:rgba(5,4,9,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700}
.brand img{width:48px;height:48px;filter:drop-shadow(var(--glow-pumpkin));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-2deg)}}
.brand span{font-size:1.05rem;letter-spacing:1px}
.brand small{display:block;font-family:var(--font-scream);color:var(--pumpkin);font-size:1rem;letter-spacing:2px}
nav.links{display:flex;align-items:center;gap:24px}
nav.links a{font-size:.86rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:.25s;position:relative}
nav.links a:hover{color:var(--bone);text-shadow:var(--glow-pumpkin)}
nav.links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--pumpkin);transition:.3s}
nav.links a:hover::after{width:100%}
.burger{display:none;background:none;border:0;color:var(--bone);font-size:1.6rem;cursor:pointer}
/* Modus-Auswahl */
.mode-picker{display:flex;gap:4px;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:30px;padding:4px}
.mode-picker button{background:none;border:0;cursor:pointer;font-size:1rem;width:34px;height:30px;border-radius:20px;transition:.25s;filter:grayscale(.5);opacity:.7}
.mode-picker button:hover{opacity:1;filter:none}
.mode-picker button.on{background:linear-gradient(135deg,var(--blood),var(--pumpkin));filter:none;opacity:1;box-shadow:var(--glow-pumpkin)}

/* ============ Hero ============ */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding-top:120px;position:relative}
.hero .badge{width:min(470px,86vw);margin:0 auto 4px;filter:drop-shadow(0 0 46px rgba(255,117,24,.4));animation:float 6s ease-in-out infinite}
:root[data-mode="hardcore"] .hero .badge{filter:drop-shadow(0 0 46px rgba(255,0,0,.5)) saturate(1.2)}
@keyframes float{50%{transform:translateY(-14px)}}
.hero h1{font-family:var(--font-scream);font-weight:400;line-height:.95;font-size:clamp(2.6rem,9vw,6rem);letter-spacing:2px;color:var(--bone);text-shadow:0 0 30px rgba(255,117,24,.35),0 0 6px rgba(193,18,31,.7);animation:flicker 5s infinite}
.hero h1 .red{color:var(--blood-bright);text-shadow:var(--glow-blood)}
@keyframes flicker{0%,19%,21%,23%,80%,100%{opacity:1}20%,22%,55%{opacity:.72}}
.hero .sub{font-family:var(--font-head);letter-spacing:4px;text-transform:uppercase;color:var(--pumpkin);font-size:clamp(.8rem,2.4vw,1.15rem);margin-top:.4rem}
.hero .tag{margin:22px auto 0;max-width:60ch;color:var(--muted);font-size:1.1rem}
.countdown{display:flex;gap:14px;justify-content:center;margin:34px 0 6px;flex-wrap:wrap}
.cd-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;min-width:86px;backdrop-filter:blur(6px);box-shadow:inset 0 0 26px rgba(255,117,24,.06)}
.cd-box b{font-family:var(--font-head);font-size:2rem;color:var(--pumpkin);text-shadow:var(--glow-pumpkin);display:block;line-height:1}
.cd-box span{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;letter-spacing:1px;padding:15px 30px;border-radius:50px;cursor:pointer;border:0;transition:.3s;position:relative}
.btn.sm{padding:8px 14px;font-size:.85rem}
.btn.primary{background:linear-gradient(135deg,var(--blood),var(--pumpkin));color:#fff;box-shadow:var(--glow-blood)}
.btn.primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 40px rgba(255,117,24,.7)}
.btn.ghost{background:transparent;color:var(--bone);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--pumpkin);color:var(--pumpkin);box-shadow:var(--glow-pumpkin)}
.hero .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}

/* ============ Jubiläums-Siegel (Hero) ============ */
.jubilee-seal{position:absolute;top:100px;right:max(20px,6vw);width:130px;height:130px;z-index:6}
.jubilee-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.jubilee-seal svg text{font-family:var(--font-head);font-size:9.2px;letter-spacing:.5px;fill:var(--pumpkin);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.seal-core{position:absolute;inset:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--blood-bright),var(--blood) 70%,#3a0a12);
  display:grid;place-content:center;text-align:center;box-shadow:0 0 26px rgba(255,45,31,.5),inset 0 0 18px rgba(0,0,0,.5);border:2px solid rgba(255,117,24,.4)}
.seal-core b{font-family:var(--font-head);font-size:2.1rem;color:#fff;line-height:.8;display:block;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.seal-core span{font-size:.56rem;letter-spacing:2px;color:#ffd7c2}

/* ============ Jubiläums-Bühne ============ */
.jubi-sec{padding:70px 0 40px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(255,117,24,.06),transparent)}
.jubi-title{font-family:var(--font-head);font-weight:900;font-size:clamp(2.2rem,7vw,4.5rem);line-height:1;margin:.1em 0 .4em;letter-spacing:1px}
.jubi-title span:first-child{color:var(--blood-bright);text-shadow:var(--glow-blood);font-size:1.25em}
.jubi-years{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.jubi-years span{font-family:var(--font-head);font-size:.9rem;padding:8px 16px;border-radius:30px;border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.jubi-years .now{color:var(--pumpkin);border-color:var(--pumpkin)}
.jubi-years .peak{color:#fff;background:linear-gradient(135deg,var(--blood),var(--pumpkin));box-shadow:var(--glow-blood);border:0;transform:scale(1.12)}
.jubi-bats{position:absolute;top:10px;left:0;right:0;font-size:1.4rem;letter-spacing:40px;opacity:.25;animation:batsFly 18s linear infinite;pointer-events:none}
@keyframes batsFly{from{transform:translateX(-60px)}to{transform:translateX(60px)}}

/* ============ Ribbon ============ */
.ribbon{background:linear-gradient(90deg,rgba(193,18,31,.14),rgba(255,117,24,.14));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.ribbon .wrap{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;text-align:center}
.ribbon b{color:var(--pumpkin);font-family:var(--font-head)}
.ribbon i{font-style:normal;color:var(--muted);font-size:.9rem}

/* ============ Story ============ */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.frame img{width:100%;height:100%;object-fit:cover;transition:1.2s;filter:saturate(.9) contrast(1.05)}
.frame:hover img{transform:scale(1.06)}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,7,12,.7))}

/* ============ Cards ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 26px;backdrop-filter:blur(6px);transition:.35s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 120px at 50% 0,rgba(255,117,24,.14),transparent);opacity:0;transition:.4s}
.card:hover{transform:translateY(-8px);border-color:var(--pumpkin);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.card:hover::before{opacity:1}
.card .ico{font-size:2.6rem;filter:drop-shadow(var(--glow-pumpkin))}
.card h3{font-family:var(--font-head);font-size:1.35rem;margin:12px 0 8px}
.card p{color:var(--muted);font-size:.96rem}
.card .kids-badge{display:inline-block;margin-top:14px;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:rgba(141,255,90,.14);color:var(--toxic);border:1px solid rgba(141,255,90,.3)}

/* ============ Parcours-Vorjahr Video ============ */
.vorjahr-sec{background:linear-gradient(180deg,transparent,rgba(139,0,0,.05),transparent)}
.video-shell{position:relative;max-width:960px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(255,117,24,.12)}
.video-shell video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.video-loader{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 40%,rgba(20,10,26,.85),rgba(3,2,6,.95));text-align:center;padding:20px;transition:opacity .6s}
.video-loader.hide{opacity:0;pointer-events:none}
.video-loader span{font-family:var(--font-head);color:var(--bone);font-size:1rem}
.video-loader b{color:var(--pumpkin)}
.video-loader small{color:var(--muted);font-size:.82rem;max-width:34ch}
.spinner{width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,117,24,.2);border-top-color:var(--pumpkin);
  animation:spinLoad .9s linear infinite;box-shadow:0 0 24px rgba(255,117,24,.4)}
@keyframes spinLoad{to{transform:rotate(360deg)}}
.video-guard{position:absolute;inset:0;z-index:2;cursor:not-allowed}
.sound-btn{position:absolute;bottom:14px;right:14px;z-index:3;background:rgba(0,0,0,.6);border:1px solid var(--line);color:var(--bone);border-radius:30px;padding:8px 14px;cursor:pointer;font-size:.82rem;backdrop-filter:blur(6px);transition:.25s}
.sound-btn:hover{border-color:var(--pumpkin);color:var(--pumpkin)}
.live-badge{position:absolute;top:14px;left:14px;z-index:3;background:rgba(139,0,0,.75);color:#fff;font-size:.7rem;letter-spacing:2px;padding:6px 12px;border-radius:20px;font-weight:700;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.4}}

/* ============ Galerie ============ */
.gallery{columns:3;column-gap:16px}
.gallery figure{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer}
.gallery img{width:100%;transition:.6s;filter:grayscale(.2) contrast(1.05)}
.gallery figure:hover img{transform:scale(1.08);filter:none}
.gallery figure::after{content:"🔍";position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;background:rgba(7,7,12,.55);opacity:0;transition:.3s}
.gallery figure:hover::after{opacity:1}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,3,6,.94);display:none;place-items:center;padding:30px}
.lightbox.on{display:grid}
.lightbox img{max-width:90vw;max-height:86vh;border-radius:12px;box-shadow:0 0 80px rgba(0,0,0,.9)}
.lightbox .x{position:absolute;top:24px;right:30px;font-size:2.4rem;color:var(--bone);cursor:pointer;line-height:1}

/* ============ FAQ ============ */
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;background:var(--panel);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--bone);cursor:pointer;padding:20px 24px;font-family:var(--font-head);font-size:1.06rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-q .plus{color:var(--pumpkin);font-size:1.6rem;transition:.3s;flex:none}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--muted)}
.faq-a p{padding:0 24px 20px}

/* ============ Kontakt ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px;backdrop-filter:blur(8px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;color:var(--bone);padding:13px 15px;font-family:inherit;font-size:1rem;transition:.25s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--pumpkin);box-shadow:var(--glow-pumpkin)}
.field textarea{min-height:130px;resize:vertical}
.captcha-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.captcha-row img{border-radius:8px;border:1px solid var(--line)}
.form-note{font-size:.82rem;color:var(--muted);margin-top:10px}
.form-msg{margin-top:14px;padding:12px 16px;border-radius:10px;display:none;font-size:.92rem}
.form-msg.ok{display:block;background:rgba(141,255,90,.12);border:1px solid rgba(141,255,90,.3);color:var(--toxic)}
.form-msg.err{display:block;background:rgba(193,18,31,.14);border:1px solid rgba(193,18,31,.4);color:var(--blood-bright)}
.info-block{margin-bottom:22px}
.info-block h4{font-family:var(--font-head);color:var(--pumpkin);margin-bottom:4px;display:flex;gap:10px;align-items:center}
.info-block p{color:var(--muted)}
.socials{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:50px;font-size:.85rem;transition:.3s}
.socials a:hover{border-color:var(--pumpkin);color:var(--pumpkin);box-shadow:var(--glow-pumpkin);transform:translateY(-2px)}

/* ============ Footer ============ */
footer{border-top:1px solid var(--line);padding:50px 0 34px;position:relative;z-index:3;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot-grid .brand small{font-size:1rem}
footer .mini{color:var(--muted);font-size:.82rem}
footer a.subtle{color:var(--muted);transition:.25s}
footer a.subtle:hover{color:var(--pumpkin)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem}

/* ============ Responsive ============ */
/* Tablets */
@media(max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  nav.links{gap:18px}
  nav.links a{font-size:.8rem;letter-spacing:1px}
}
/* Phones & kompakte Tablets: Slide-in-Menü */
@media(max-width:900px){
  header.nav{padding:12px 16px}
  .brand span{font-size:.95rem}
  nav.links{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);height:100vh;height:100dvh;
    flex-direction:column;background:#0b0912;padding:86px 26px 40px;gap:20px;transform:translateX(101%);
    transition:transform .38s ease, visibility 0s linear .38s;align-items:stretch;border-left:1px solid var(--line);
    box-shadow:-20px 0 60px rgba(0,0,0,.7);z-index:45;overflow-y:auto;visibility:hidden}
  nav.links.open{transform:none;visibility:visible;transition:transform .38s ease, visibility 0s}
  nav.links a{font-size:1.05rem;letter-spacing:1px;padding:6px 0}
  .burger{display:block;z-index:60;position:relative}
  body.menu-open{overflow:hidden}
  .mode-picker{margin-top:6px;justify-content:space-between}
  .mode-picker button{flex:1;height:42px;font-size:1.25rem}
  .split,.contact-grid{grid-template-columns:1fr;gap:30px}
  .cards{grid-template-columns:1fr}
  .gallery{columns:2}
  section{padding:60px 0}
  .hero{min-height:auto;padding:128px 0 66px}
  .hero .badge{width:min(280px,70vw)}
  /* Siegel wie am Desktop: oben rechts am Logo, mit voller Laufschrift; Logo dafür kleiner */
  .jubilee-seal{position:absolute;top:150px;right:2vw;width:96px;height:96px;margin:0;z-index:7}
  .jubilee-seal svg{display:block}
  .seal-core{position:absolute;inset:17px}
  .seal-core b{font-size:1.5rem}
  .seal-core span{font-size:.46rem}
  .moon{top:7vh;width:min(120px,28vw)}
  .split{gap:24px}
  .frame img{max-height:60vh}
}
/* Kleine Phones */
@media(max-width:520px){
  .wrap{padding:0 16px}
  .gallery{columns:1}
  .ribbon .wrap{gap:14px}
  .hero h1{font-size:clamp(2.1rem,11vw,3.2rem)}
  .hero .tag{font-size:1rem}
  .form-card{padding:24px 20px}
  .cd-box{min-width:64px;padding:11px 12px}
  .cd-box b{font-size:1.5rem}
  .btn{padding:13px 22px;font-size:.95rem}
  .captcha-row{flex-wrap:wrap}
  .jubi-years span{font-size:.78rem;padding:6px 12px}
  .video-loader small{display:none}
  .foot-grid{justify-content:center;text-align:center}
}
/* Touch-Geräte: teure Effekte reduzieren (Performance) */
@media (hover:none) and (pointer:coarse){
  .fog-3{display:none}
  .fog-1,.fog-2{filter:blur(4px)}
  header.nav.scrolled,.card,.form-card,.cd-box,.info-block,.video-loader{backdrop-filter:none!important}
  .card,.form-card{background:rgba(16,12,26,.95)}
  .moon{animation:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* =========================================================================
   INTRO-POPUP · Modi-Auswahl & Epilepsie-Hinweis
   ========================================================================= */
.mode-intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px 16px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.mode-intro.on{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.mode-intro[hidden]{display:none}
.mi-backdrop{position:absolute;inset:0;background:rgba(3,2,6,.86);backdrop-filter:blur(7px)}
.mi-card{position:relative;width:min(880px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(23,17,36,.985),rgba(9,7,16,.985));
  border:1px solid var(--line);border-radius:22px;padding:30px 32px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,.78),inset 0 0 70px rgba(255,117,24,.05);
  transform:translateY(20px) scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1);
  overscroll-behavior:contain}
.mode-intro.on .mi-card{transform:none}
.mi-card::-webkit-scrollbar{width:8px}
.mi-card::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

.mi-x{position:absolute;top:12px;right:14px;z-index:4;background:rgba(0,0,0,.45);border:1px solid var(--line);
  color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.9rem;transition:.25s;line-height:1}
.mi-x:hover{color:var(--bone);border-color:var(--pumpkin);box-shadow:var(--glow-pumpkin)}

.mi-eyebrow{font-family:var(--font-scream);letter-spacing:2px;color:var(--pumpkin);text-shadow:var(--glow-pumpkin);font-size:1.3rem}
.mi-card h2{font-family:var(--font-head);font-size:clamp(1.35rem,3.6vw,2.05rem);line-height:1.15;
  margin:.1em 0 .45em;padding-right:40px;letter-spacing:.5px}
.mi-card h2 span{color:var(--blood-bright);text-shadow:var(--glow-blood)}
.mi-lead{color:var(--muted);font-size:.94rem;max-width:70ch}

/* ---- Epilepsie-Hinweis ---- */
.mi-epi{display:flex;gap:14px;margin:20px 0 22px;padding:15px 17px;border-radius:14px;
  background:rgba(255,117,24,.07);border:1px solid rgba(255,177,90,.32);border-left:4px solid var(--pumpkin)}
.mi-epi-ico{font-size:1.5rem;line-height:1.1;flex:none;animation:miWarn 2.6s ease-in-out infinite}
@keyframes miWarn{0%,100%{opacity:1;transform:none}50%{opacity:.5;transform:scale(1.12)}}
.mi-epi-txt b{color:var(--pumpkin-soft)}
.mi-epi-txt>b{display:block;font-family:var(--font-head);font-size:.98rem;letter-spacing:.4px;margin-bottom:5px}
.mi-epi-txt p{color:var(--muted);font-size:.85rem;line-height:1.6}
.mi-epi-txt p+p{margin-top:7px}
.mi-epi-calm{color:var(--toxic)!important;font-size:.8rem!important}

/* ---- Modus-Auswahl im Popup ---- */
.mi-pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mi-pick-head h3,.mi-how-head h3{font-family:var(--font-head);font-size:1.02rem;letter-spacing:.5px}
.mi-current{font-size:.78rem;color:var(--muted);letter-spacing:.5px}
.mi-current b{color:var(--pumpkin)}
.mi-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mi-mode{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:18px 10px 14px;border-radius:16px;cursor:pointer;color:var(--bone);font-family:inherit;
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:.28s}
.mi-mode:hover{transform:translateY(-3px);border-color:var(--pumpkin);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.mi-mode .mi-ico{font-size:1.95rem;line-height:1;filter:grayscale(.5);transition:.28s;animation:miBob 3.6s ease-in-out infinite}
.mi-mode:nth-child(2) .mi-ico{animation-delay:.6s}
.mi-mode:nth-child(3) .mi-ico{animation-delay:1.2s}
@keyframes miBob{50%{transform:translateY(-5px) rotate(-5deg)}}
.mi-txt{display:flex;flex-direction:column;gap:1px}
.mi-mode b{font-family:var(--font-head);font-size:1rem;letter-spacing:.5px}
.mi-mode small{color:var(--muted);font-size:.75rem;line-height:1.35}
.mi-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.mi-tags i{font-style:normal;font-size:.62rem;letter-spacing:.3px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.mi-tags i.ok{color:var(--toxic);border-color:rgba(141,255,90,.28)}
.mi-tags i.warn{color:var(--blood-bright);border-color:rgba(255,45,31,.34)}
.mi-mode.on{border-color:transparent;background:linear-gradient(160deg,rgba(255,117,24,.22),rgba(193,18,31,.16));
  box-shadow:var(--glow-pumpkin),inset 0 0 34px rgba(255,117,24,.08)}
.mi-mode.on .mi-ico{filter:none;transform:scale(1.1)}
.mi-mode.on::after{content:"✓ aktiv";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--blood),var(--pumpkin));color:#fff;font-size:.6rem;letter-spacing:1px;
  padding:3px 11px;border-radius:20px;white-space:nowrap;box-shadow:var(--glow-blood)}

/* ---- Anleitung ---- */
.mi-how{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line)}
.mi-how-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mi-switch{display:flex;gap:4px;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:30px;padding:4px}
.mi-switch button{background:none;border:0;color:var(--muted);font-family:inherit;font-size:.73rem;letter-spacing:.5px;
  padding:7px 13px;border-radius:20px;cursor:pointer;transition:.25s;white-space:nowrap}
.mi-switch button:hover{color:var(--bone)}
.mi-switch button.on{background:linear-gradient(135deg,var(--blood),var(--pumpkin));color:#fff;box-shadow:var(--glow-pumpkin)}
.mi-how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.mi-how .mi-only-desk,.mi-how .mi-only-mob{display:none}
.mi-how.mi-view-desktop .mi-only-desk,.mi-how.mi-view-mobile .mi-only-mob{display:block}
.mi-how.mi-view-desktop ol.mi-only-desk,.mi-how.mi-view-mobile ol.mi-only-mob{display:flex}
.mi-steps{list-style:none;flex-direction:column;gap:12px}
.mi-steps li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:.87rem;line-height:1.5}
.mi-steps li b{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;
  font-family:var(--font-head);background:linear-gradient(135deg,var(--blood),var(--pumpkin));color:#fff;margin-top:1px}
.mi-steps li i{font-style:normal;color:var(--bone);letter-spacing:2px}

/* ---- Mock-Modus-Leiste (in beiden Demos) ---- */
.dm-picker{position:relative;z-index:0;isolation:isolate;display:flex;gap:3px;flex:none;padding:3px;border-radius:30px;
  background:rgba(0,0,0,.55);border:1px solid var(--line);box-shadow:0 0 0 0 rgba(255,117,24,.4)}
.dm-picker b{position:relative;z-index:2;width:30px;height:26px;display:grid;place-items:center;
  font-size:.88rem;font-weight:400;filter:grayscale(.45);opacity:.85}
.dm-knob{position:absolute;top:3px;left:36px;width:30px;height:26px;border-radius:20px;z-index:1;
  background:linear-gradient(135deg,var(--blood),var(--pumpkin));box-shadow:var(--glow-pumpkin)}
.mi-demo{position:relative;z-index:0;isolation:isolate;border-radius:14px;overflow:hidden;background:#0a0812;
  border:1px solid var(--line);box-shadow:inset 0 0 46px rgba(0,0,0,.65)}
.dm-hint{text-align:center;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  padding:7px 8px 9px;border-top:1px solid var(--line);background:rgba(0,0,0,.3)}

/* ---- Demo: Desktop ---- */
.dm-bar{display:flex;align-items:center;gap:9px;padding:7px 11px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.dm-dots{display:flex;gap:4px;flex:none}
.dm-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#3b3448}
.dm-url{flex:1;font-size:.6rem;color:var(--muted);background:rgba(0,0,0,.45);border-radius:20px;padding:3px 10px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 11px 30px}
.dm-brand{font-family:var(--font-head);font-size:.62rem;color:var(--pumpkin);white-space:nowrap}
.dm-links{display:flex;gap:6px}
.dm-links i{display:block;width:17px;height:4px;border-radius:3px;background:rgba(255,255,255,.16)}
.mi-demo-desk .dm-knob{animation:dmKnob 9s infinite}
@keyframes dmKnob{0%,29%{left:36px}31%,47%{left:3px}50%,73%{left:69px}76%,100%{left:36px}}
.mi-demo-desk .dm-picker{animation:dmGlow 9s infinite}
@keyframes dmGlow{0%,8%{box-shadow:0 0 0 0 rgba(255,117,24,0)}12%{box-shadow:0 0 0 5px rgba(255,117,24,.22)}
  20%,100%{box-shadow:0 0 0 0 rgba(255,117,24,0)}}
.dm-cursor{position:absolute;left:0;top:0;width:17px;height:17px;z-index:6;pointer-events:none;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));animation:dmCursor 9s infinite}
.dm-cursor svg{width:100%;height:100%;display:block}
.dm-cursor svg path{fill:#fff;stroke:#100c1a;stroke-width:1.4;stroke-linejoin:round}
@keyframes dmCursor{
  0%,5%{transform:translate(48px,52px);opacity:0}
  11%,26%{transform:translate(46px,12px);opacity:1}
  33%,44%{transform:translate(13px,12px);opacity:1}
  52%,70%{transform:translate(79px,12px);opacity:1}
  78%,92%{transform:translate(46px,12px);opacity:1}
  99%,100%{transform:translate(48px,52px);opacity:0}}
.dm-cursor::after{content:"";position:absolute;left:-7px;top:-5px;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--pumpkin);opacity:0;animation:dmRing 9s infinite}
@keyframes dmRing{
  0%,28%{opacity:0;transform:scale(.35)}30%{opacity:.95;transform:scale(.5)}37%{opacity:0;transform:scale(1.25)}
  48%{opacity:0;transform:scale(.35)}50%{opacity:.95;transform:scale(.5)}57%{opacity:0;transform:scale(1.25)}
  74%{opacity:0;transform:scale(.35)}76%{opacity:.95;transform:scale(.5)}83%,100%{opacity:0;transform:scale(1.25)}}

/* ---- Demo: Handy ---- */
.mi-demo-mob{background:none;border:0;box-shadow:none;overflow:visible}
.mi-demo-mob .dm-hint{border:1px solid var(--line);border-radius:12px;margin-top:12px;background:rgba(0,0,0,.3)}
.pm-phone{position:relative;z-index:0;isolation:isolate;width:200px;height:310px;margin:0 auto;border-radius:26px;overflow:hidden;
  background:#0a0812;border:2px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.65),inset 0 0 46px rgba(0,0,0,.6)}
.pm-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:54px;height:5px;border-radius:6px;
  background:rgba(255,255,255,.2);z-index:8}
.pm-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 12px 8px}
.pm-brand{font-size:.95rem}
.pm-burger{font-size:1rem;color:var(--bone);border-radius:8px;padding:1px 5px;animation:pmBurger 11s infinite}
@keyframes pmBurger{0%,10%{background:transparent}13%{background:rgba(255,117,24,.45)}20%,100%{background:transparent}}
.pm-body{padding:8px 12px;display:flex;flex-direction:column;gap:7px}
.pm-body i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.09)}
.pm-body i:first-child{height:30px;background:rgba(255,117,24,.14)}
.pm-drawer{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:5;background:#0b0912;
  border-left:1px solid var(--line);box-shadow:-14px 0 34px rgba(0,0,0,.75);
  padding:34px 8px 12px;display:flex;flex-direction:column;gap:9px;animation:pmDrawer 11s infinite}
@keyframes pmDrawer{0%,15%{transform:translateX(101%)}22%,88%{transform:translateX(0)}96%,100%{transform:translateX(101%)}}
.pm-drawer>i{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.14)}
.pm-drawer .dm-picker{margin-top:auto;align-self:center}
.mi-demo-mob .dm-knob{animation:pmKnob 11s infinite}
@keyframes pmKnob{0%,44%{left:36px}46%,60%{left:3px}62%,76%{left:69px}78%,100%{left:36px}}
.pm-finger{position:absolute;left:0;top:0;z-index:7;font-size:1.15rem;line-height:1;pointer-events:none;opacity:0;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.8));animation:pmFinger 11s infinite}
@keyframes pmFinger{
  0%,3%{transform:translate(150px,330px);opacity:0}
  9%,17%{transform:translate(166px,26px);opacity:1}
  30%,44%{transform:translate(84px,254px);opacity:1}
  60%{transform:translate(150px,254px);opacity:1}
  76%,88%{transform:translate(117px,254px);opacity:1}
  95%,100%{transform:translate(117px,330px);opacity:0}}
.pm-finger::after{content:"";position:absolute;left:-4px;top:-3px;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--pumpkin);opacity:0;animation:pmRing 11s infinite}
@keyframes pmRing{
  0%,11%{opacity:0;transform:scale(.35)}13%{opacity:.95;transform:scale(.55)}19%{opacity:0;transform:scale(1.3)}
  44%{opacity:0;transform:scale(.35)}46%{opacity:.95;transform:scale(.55)}52%{opacity:0;transform:scale(1.3)}
  60%{opacity:0;transform:scale(.35)}62%{opacity:.95;transform:scale(.55)}68%{opacity:0;transform:scale(1.3)}
  76%{opacity:0;transform:scale(.35)}78%{opacity:.95;transform:scale(.55)}84%,100%{opacity:0;transform:scale(1.3)}}

/* ---- Aktionen ---- */
.mi-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.mi-actions .btn{justify-content:center}
/* Gesperrter Bestätigen-Button (Handy: erst nach dem Scrollen bis zum Ende) */
.mi-actions .btn[disabled]{opacity:.42;filter:grayscale(.65);cursor:not-allowed;box-shadow:none}
.mi-actions .btn[disabled]:hover{transform:none;box-shadow:none}
.mi-scrollhint{display:none}
.mi-link{color:var(--muted);font-size:.78rem;border-bottom:1px solid transparent;transition:.25s}
.mi-link:hover{color:var(--pumpkin);border-bottom-color:var(--pumpkin)}
body.intro-open,html.intro-open{overflow:hidden}

/* ---- Nach dem Schließen: Weg zur Modus-Leiste zeigen ---- */
.mode-picker.hh-hint{animation:hhHint 1.5s ease-in-out 4}
.burger.hh-hint{animation:hhHint 1.5s ease-in-out 4;border-radius:10px}
@keyframes hhHint{0%,100%{box-shadow:0 0 0 0 rgba(255,117,24,0)}
  50%{box-shadow:0 0 0 8px rgba(255,117,24,.22),var(--glow-pumpkin)}}

/* ---- Popup: Tablets & Handys ---- */
@media(max-width:820px){
  .mode-intro{padding:0;place-items:stretch}
  .mi-card{width:100%;max-height:100vh;max-height:100dvh;height:100dvh;border:0;border-radius:0;
    padding:24px 18px 0;transform:translateY(28px)}
  .mi-card h2{padding-right:44px}
  .mi-epi{margin:16px 0 18px;padding:13px 14px;gap:11px}
  .mi-modes{grid-template-columns:1fr;gap:9px}
  .mi-mode{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:13px;padding:13px 14px;padding-right:74px}
  .mi-mode .mi-ico{font-size:1.7rem;flex:none}
  .mi-txt{flex:1;min-width:0}
  .mi-tags{justify-content:flex-start;width:100%;margin-top:0;order:3;flex-basis:100%}
  .mi-mode.on::after{top:50%;left:auto;right:12px;transform:translateY(-50%)}
  .mi-how-grid{grid-template-columns:1fr;gap:18px}
  .mi-how-head{margin-bottom:13px}
  .mi-actions{position:sticky;bottom:0;z-index:9;margin:22px -18px 0;padding:14px 18px 18px;
    background:#090710;border-top:1px solid var(--line);justify-content:center;text-align:center}
  /* Hinweis über der Leiste, solange noch nicht bis zum Ende gescrollt wurde */
  .mi-actions.locked .mi-scrollhint{display:block;position:absolute;left:50%;bottom:100%;margin-bottom:10px;
    background:rgba(20,14,30,.97);border:1px solid var(--line);color:var(--pumpkin-soft);font-family:inherit;
    font-size:.74rem;letter-spacing:.3px;padding:8px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;
    transform:translateX(-50%);box-shadow:0 8px 22px rgba(0,0,0,.55);animation:miDown 1.9s ease-in-out infinite}
  @keyframes miDown{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}
  /* weicher Übergang oberhalb der Leiste, statt harter Kante */
  .mi-actions::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;pointer-events:none;
    background:linear-gradient(180deg,rgba(9,7,16,0),#090710)}
  .mi-actions .btn{width:100%}
  .mi-link{width:100%;text-align:center}
}
@media(max-width:400px){
  .mi-card{padding:20px 14px 0}
  .mi-actions{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .mi-mode{padding-right:14px}
  .mi-mode.on::after{top:-8px;right:12px;left:auto;transform:none}
  .pm-phone{width:186px;height:296px}
}