/* Webollo11, Schlüchtern. Gebaut für den Start. */

/* Schriften liegen lokal auf diesem Server, kein Abruf bei Dritten. */
@font-face{
  font-family:'Orbitron';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('fonts/orbitron-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/exo2-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/exo2-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --canvas:#0a1220;
  --canvas-deep:#060c17;
  --panel:#101a2c;
  --panel-edge:#22334d;
  --accent:#eda05f;
  --accent-hover:#f5b57b;
  --accent-muted:rgba(237,160,95,.24);
  --ice:#9dc2e8;
  --ice-dim:rgba(157,194,232,.34);
  --text-primary:#e9eef7;
  --text-secondary:#96a6bf;
  --tshadow:0 1px 2px rgba(5,8,14,.95),0 3px 12px rgba(5,8,14,.78),0 10px 44px rgba(5,8,14,.8);
  --ease-out:cubic-bezier(.22,.9,.28,1);
  --ease-soft:cubic-bezier(.4,.1,.2,1);
  --font-display:'Orbitron',sans-serif;
  --font-body:'Exo 2',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* 100px, damit Sprungziele nicht unter der fixierten Kopfzeile landen (die ist 85px hoch) */
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .8s var(--ease-soft);
}
body.aboard{opacity:1}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.18;letter-spacing:.015em}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem);max-width:24ch}
h3{font-size:clamp(1.05rem,1.8vw,1.3rem)}
p{max-width:58ch}
a{color:var(--ice)}
a:hover{color:var(--text-primary)}
em{font-style:normal}
.mono{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em}
.kicker{color:var(--ice);margin-bottom:1rem}
img,svg,video{max-width:100%}

::selection{background:var(--accent-muted);color:var(--text-primary)}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:1rem;top:-3.5rem;z-index:60;
  background:var(--panel);color:var(--text-primary);
  padding:.6rem 1rem;border-radius:6px;transition:top .2s var(--ease-out);
}
.skip:focus-visible{top:1rem}

/* ---------- Der feste Himmel hinter allem ---------- */

.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--canvas-deep),var(--canvas) 44%,#0c1526 100%);overflow:hidden}
.sky-stars{
  position:absolute;inset:-20%;
  /* Fertige Kachel statt fünf Farbverläufen: der Browser muss die Sterne
     nicht bei jedem Neuzeichnen ausrechnen, sondern kopiert nur ein Bild. */
  background-image:url("sterne.webp");
  background-size:340px 260px;
  will-change:transform;
}
.sky .s1{opacity:.6}
.sky .s2{background-size:520px 420px;opacity:.35}
body.motion-on .sky .s1{animation:skydrift 140s linear infinite alternate}
body.motion-on .sky .s2{animation:skydrift 210s linear infinite alternate-reverse}
@keyframes skydrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.2%,-1.6%,0)}}
.sky-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 55% at 72% 108%,rgba(237,160,95,.10),transparent 60%),
             radial-gradient(ellipse 70% 50% at 18% -12%,rgba(157,194,232,.07),transparent 62%);
}

/* ---------- Navigation ---------- */

.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;
  padding:.9rem clamp(1rem,4vw,2.6rem);
  background:linear-gradient(180deg,rgba(6,12,23,.82),rgba(6,12,23,0));
  transition:background .4s var(--ease-soft);
}
.topnav.scrolled{background:rgba(8,14,26,.93);border-bottom:1px solid rgba(34,51,77,.5)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{height:56px;width:auto;display:block}
@media (max-width:560px){.brand-logo{height:46px}}
.nav-links{display:flex;gap:1.6rem;justify-self:center}
.nav-links a{
  text-decoration:none;color:var(--text-secondary);font-size:.92rem;font-weight:600;
  transition:color .25s var(--ease-out);
}
.nav-links a:hover{color:var(--text-primary)}

.btn{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.92rem;
  letter-spacing:.05em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  padding:.72rem 1.5rem;border-radius:8px;
  transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.btn-nav{
  background:transparent;color:var(--ice);border:1px solid var(--ice-dim);
  justify-self:end;padding:.55rem 1.1rem;font-size:.8rem;
}
.btn-nav:hover{background:rgba(157,194,232,.12);color:var(--text-primary)}
.btn-fire{background:var(--accent);color:#201205;position:relative}
.btn-fire::after{
  content:"";position:absolute;inset:-3px;border-radius:11px;z-index:-1;
  box-shadow:0 0 26px 4px var(--accent-muted);opacity:0;transition:opacity .3s var(--ease-out);
}
.btn-fire:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-fire:hover::after{opacity:1}
.btn-fire{text-shadow:none}

/* ---------- Hero: die Startrampe ---------- */

.hero{height:760vh;position:relative}
.hero-stage{position:sticky;top:0;height:100vh;overflow:clip;background:var(--canvas-deep)}


.hero-poster{
  position:absolute;inset:0;background-size:cover;background-position:64% center;
}
#heroVideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;
  opacity:0;transition:opacity .7s var(--ease-soft);
  will-change:transform;transform:translateZ(0);
}
.video-ready #heroVideo{opacity:1}
.video-failed #heroVideo{display:none}

.ring{
  position:absolute;right:2rem;bottom:2rem;width:38px;height:38px;
  color:var(--ice);transform:rotate(-90deg);opacity:0;transition:opacity .4s var(--ease-soft);
}
.video-loading .ring{opacity:.9}
.video-ready .ring,.video-failed .ring{opacity:0}
.ring circle{transition:stroke-dashoffset .15s linear}

.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(6,10,18,.16),rgba(6,10,18,.16)),
             radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,10,18,0) 35%,rgba(6,10,18,.62) 100%);
}

/* Atmosphäre über dem Video: ziehender Dunst, aufsteigender Staub, Schwebeteilchen */
.atmo{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.atmo-haze{
  position:absolute;inset:-28% -38%;
  background:
    radial-gradient(ellipse 44% 28% at 22% 72%,rgba(192,207,228,.21),transparent 70%),
    radial-gradient(ellipse 56% 26% at 74% 80%,rgba(180,197,220,.17),transparent 70%),
    radial-gradient(ellipse 38% 22% at 48% 88%,rgba(192,207,228,.15),transparent 70%),
    radial-gradient(ellipse 30% 16% at 60% 64%,rgba(186,202,224,.10),transparent 70%);
  opacity:1;
}
.atmo-haze.a2{
  background:
    radial-gradient(ellipse 50% 26% at 34% 84%,rgba(192,207,228,.18),transparent 70%),
    radial-gradient(ellipse 44% 24% at 88% 72%,rgba(180,197,220,.14),transparent 70%),
    radial-gradient(ellipse 34% 18% at 12% 60%,rgba(186,202,224,.09),transparent 70%);
  opacity:.85;
}
body.motion-on .hero-stage.live .atmo-haze.a1{animation:hazedrift 42s ease-in-out -16s infinite alternate}
body.motion-on .hero-stage.live .atmo-haze.a2{animation:hazedrift 64s ease-in-out -40s infinite alternate-reverse}
@keyframes hazedrift{
  from{transform:translate3d(-5.5%,0.8%,0)}
  to{transform:translate3d(5.5%,-1.4%,0)}
}
/* Staub steigt kontinuierlich: Kachelversatz exakt eine Kachel in X, zwei in Y, darum nahtlos */
.atmo-dust{
  position:absolute;inset:-30% -20%;
  background-image:
    radial-gradient(1.8px 1.8px at 42px 64px,rgba(235,242,252,.8),transparent 60%),
    radial-gradient(1.2px 1.2px at 158px 182px,rgba(235,242,252,.55),transparent 60%),
    radial-gradient(2.4px 2.4px at 262px 92px,rgba(235,242,252,.65),transparent 60%),
    radial-gradient(1px 1px at 332px 224px,rgba(235,242,252,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 96px 268px,rgba(235,242,252,.6),transparent 60%),
    radial-gradient(2px 2px at 210px 250px,rgba(235,242,252,.55),transparent 60%),
    radial-gradient(1.3px 1.3px at 300px 30px,rgba(235,242,252,.5),transparent 60%),
    radial-gradient(1.6px 1.6px at 20px 160px,rgba(235,242,252,.55),transparent 60%);
  background-size:380px 300px;
  opacity:.8;
}
.atmo-dust.d2{background-size:560px 430px;opacity:.6}
body.motion-on .hero-stage.live .atmo-dust.d1{animation:dustrise1 30s linear infinite}
body.motion-on .hero-stage.live .atmo-dust.d2{animation:dustrise2 48s linear infinite}
@keyframes dustrise1{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-380px,-600px,0)}
}
@keyframes dustrise2{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(560px,-860px,0)}
}
/* Einzelne Schwebeteilchen im Flutlicht */
.mote{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,246,255,.9) 0%,rgba(210,225,245,.35) 45%,transparent 70%);
  box-shadow:0 0 12px 2px rgba(210,225,245,.28);
  opacity:0;
}
.m1{left:16%;top:66%}
.m2{left:37%;top:80%;width:4px;height:4px}
.m3{left:58%;top:62%;width:5px;height:5px}
.m4{left:82%;top:74%}
.m5{left:70%;top:86%;width:4px;height:4px}
body.motion-on .hero-stage.live .m1{animation:motefloat 16s ease-in-out -3s infinite alternate}
body.motion-on .hero-stage.live .m2{animation:motefloat 21s ease-in-out -9s infinite alternate-reverse}
body.motion-on .hero-stage.live .m3{animation:motefloat 13s ease-in-out -6s infinite alternate}
body.motion-on .hero-stage.live .m4{animation:motefloat 24s ease-in-out -14s infinite alternate-reverse}
body.motion-on .hero-stage.live .m5{animation:motefloat 18s ease-in-out -1s infinite alternate}
@keyframes motefloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  18%{opacity:.85}
  55%{opacity:.5}
  82%{opacity:.75}
  100%{transform:translate3d(46px,-64px,0);opacity:0}
}

/* Mission-Control-Overlay: Instrumente auf Flüsterniveau */

/* Mission-Control-Overlay: Instrumente auf Flüsterniveau */
.hud{position:absolute;inset:0;pointer-events:none;z-index:6}
.hud-c{position:absolute;width:26px;height:26px;border:1px solid rgba(157,194,232,.38)}
.hc1{top:80px;left:20px;border-right:0;border-bottom:0}
.hc2{top:80px;right:20px;border-left:0;border-bottom:0}
.hc3{bottom:20px;left:20px;border-right:0;border-top:0}
.hc4{bottom:20px;right:20px;border-left:0;border-top:0}
.chip{
  /* Fester Grund statt Echtzeit-Weichzeichner: diese Karten liegen ueber dem
     laufenden Hero-Video, dort muesste der Blur bei jedem Bild neu gerechnet werden. */
  background:rgba(8,10,17,.78);border:1px solid rgba(96,110,140,.3);border-radius:10px;
  text-shadow:0 1px 3px rgba(5,8,14,.85);
}
.hud-status{
  position:absolute;top:88px;right:2rem;display:flex;align-items:center;gap:.55rem;
  padding:.45rem .85rem;color:var(--ice);font-size:.68rem;letter-spacing:.14em;
}
.hud-status .mono{font-size:.68rem}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
body.motion-on .hud-dot{animation:hudblink 2.8s var(--ease-soft) -0.9s infinite}
@keyframes hudblink{0%,100%{opacity:1}50%{opacity:.25}}
.hud-data{
  position:absolute;left:2rem;bottom:2rem;display:flex;gap:1.4rem;
  padding:.55rem 1rem;color:var(--ice);font-size:.68rem;letter-spacing:.12em;
}
.hud-item b{color:var(--text-primary);font-weight:400}

.band{
  position:absolute;z-index:5;opacity:0;
  text-shadow:var(--tshadow);
  max-width:min(46vw,620px);
}
.band .btn{text-shadow:none}
.band::before{
  content:"";position:absolute;inset:-18% -14%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(4,7,13,var(--scrimA,.62)) 0%,rgba(4,7,13,calc(var(--scrimA,.62)*.66)) 46%,rgba(4,7,13,0) 76%);
}
.band-line{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.3;max-width:18ch;
}
.band-1{left:clamp(1.2rem,6vw,6rem);top:26vh;--scrimA:.62}
.tminus{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.1rem}
.tm-label{color:var(--ice);font-size:.78rem}
.tm-num{
  font-family:var(--font-display);font-weight:900;line-height:1;
  font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--accent);
  min-width:2ch;text-shadow:var(--tshadow);
}
.tm-num.tick{animation:tmpop .55s var(--ease-out)}
@keyframes tmpop{from{transform:scale(1.3);opacity:.35}to{transform:scale(1);opacity:1}}
.band-2{left:clamp(1.2rem,6vw,6rem);top:30vh;--scrimA:.72}
.band-2 .em{color:var(--accent)}
.band-3{left:clamp(1.2rem,6vw,6rem);top:32vh;--scrimA:.7}
.band-4{
  /* Senkrecht mittig in der Buehne: der Block haengt an seiner eigenen Mitte,
     damit er zentriert bleibt, egal wie hoch er durch Schrift und Umbruch wird. */
  left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;max-width:min(88vw,860px);
}
/* Kein Oval: randlose Abdunklung in voller Breite, wie eine Blende im Filmschnitt */
.band-4::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-16%;bottom:-16%;width:100vw;transform:translateX(-50%);
  opacity:calc(.2 + .8*var(--k,1));
  background:linear-gradient(180deg,rgba(6,10,18,0),rgba(6,10,18,.62) 24%,rgba(6,10,18,.62) 76%,rgba(6,10,18,0));
}
.band-4 h1{font-size:clamp(1.7rem,4.2vw,3.3rem);font-weight:900;max-width:22ch;margin-inline:auto}
.band-4 p,.band-4 ul{margin-inline:auto}
.band-sub{
  display:block;margin:1.3rem auto 0;max-width:52ch;color:var(--text-primary);
  font-size:clamp(.98rem,1.4vw,1.15rem);font-family:var(--font-body);
  font-weight:400;line-height:1.65;letter-spacing:0;
}
.band-cta{margin-top:1.8rem}
.static-only{display:none}

/* Zeichen- und Wortbausteine der Entrances */
.split .w,.split-words .w{display:inline-block;white-space:pre}
.split .c{display:inline-block;white-space:pre}

/* (a) Blur zu scharf: weiche Kopie als Pseudo-Element, dadurch nicht markier- oder kopierbar */
.fx-blur-wrap{position:relative;display:block}
.fx-blur-wrap::before{
  content:attr(data-text);position:absolute;inset:0;
  filter:blur(10px);opacity:calc(1 - var(--k,0));
}
.fx-blur-wrap .sharp{opacity:var(--k,0)}

/* (d) Wort-Punch mit Overshoot */
[data-fx="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
[data-fx="punch"] .w.em{--ov:0.24;--sd:0.16;--ss:2.6}

/* (f/rise) Wortweises Aufsteigen */
[data-fx="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}

/* (e) Gestaffelte Ruhe im Schlussband */
[data-fx="settle"] .split-words .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
[data-fx="settle"] .band-sub{
  --ks:clamp(0,(var(--k,0) - .66)*4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px));
}
[data-fx="settle"] .band-claims{
  --kp:clamp(0,(var(--k,0) - .72)*4.5,1);
  opacity:var(--kp);
  transform:translateY(calc((1 - var(--kp))*14px));
}
[data-fx="settle"] .band-cta{
  --kb:clamp(0,(var(--k,0) - .8)*5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*12px));
}

/* Die drei Versprechen als Missions-Pillen */
.band-claims{
  list-style:none;margin:1.3rem auto 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
}
.band-claims li{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem;border:1px solid var(--ice-dim);border-radius:999px;
  background:rgba(8,10,17,.74);
  font-size:.88rem;font-weight:600;color:var(--text-primary);text-shadow:none;
}
.band-claims li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:none;box-shadow:0 0 8px rgba(237,160,95,.55);
}

.scroll-cue{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--ice);opacity:0;
  transition:opacity .6s var(--ease-soft),color .7s var(--ease-soft),transform .7s var(--ease-out);
  text-shadow:var(--tshadow);
}
.cue-on .scroll-cue{opacity:.85}
/* Nach dem Countdown: die Aufforderung glüht auf und pulsiert */
.cue-hot.cue-on .scroll-cue{opacity:1;color:var(--accent);transform:translateX(-50%) scale(1.16)}
.cue-hot .scroll-cue .mono{
  font-family:var(--font-display);font-weight:700;font-size:.88rem;letter-spacing:.12em;
  text-shadow:0 0 20px rgba(237,160,95,.6),var(--tshadow);
}
body.motion-on .cue-hot.cue-on .scroll-cue{animation:cuepulse 1.7s var(--ease-soft) infinite}
@keyframes cuepulse{
  0%,100%{transform:translateX(-50%) scale(1.06);opacity:.8}
  50%{transform:translateX(-50%) scale(1.22);opacity:1}
}
body.motion-on .cue-hot .cue-chevron{animation-duration:1.3s}
.cue-chevron{
  width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
body.motion-on .cue-chevron{animation:cuebob 2.6s var(--ease-soft) -1.2s infinite}
@keyframes cuebob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}

/* ---------- Sektionen unterhalb ---------- */

main{position:relative;z-index:2}
section{padding:clamp(4.5rem,9vw,8rem) clamp(1.2rem,6vw,6rem);position:relative}

/* Kontrollzentrum: asymmetrisches Duett */
.kontroll-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;max-width:1180px;margin-inline:auto;
}
.kontroll-copy{color:var(--text-secondary);margin-top:1.4rem}

/* Die Deutschlandkarte im Kontrollzentrum */
.map-panel{
  position:relative;margin:0;
  background:linear-gradient(170deg,rgba(16,26,44,.55),rgba(10,17,30,.3));
  border:1px solid var(--panel-edge);border-radius:16px;
  padding:1.5rem 1.3rem 1rem;
}
.map-panel::before,.map-panel::after{
  content:"";position:absolute;width:22px;height:22px;border:1px solid var(--ice-dim);
}
.map-panel::before{top:10px;left:10px;border-right:0;border-bottom:0}
.map-panel::after{bottom:10px;right:10px;border-left:0;border-top:0}
.demap{display:block;width:100%;max-width:330px;margin-inline:auto;height:auto}
.map-label{display:block;text-align:center;color:var(--ice);font-size:.6rem;letter-spacing:.14em;margin-top:.9rem;opacity:.85}
.de-outline{
  fill:rgba(157,194,232,.06);stroke:rgba(157,194,232,.6);stroke-width:1.4;
  stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 2.6s var(--ease-soft) .2s;
}
.kontroll-grid.in .de-outline{stroke-dashoffset:0}
.de-city{fill:rgba(157,194,232,.55)}
.de-link{
  stroke:rgba(237,160,95,.45);stroke-width:1;fill:none;stroke-dasharray:3 6;
  opacity:0;transition:opacity 1.2s var(--ease-soft) 1.8s;
}
.kontroll-grid.in .de-link{opacity:1}
body.motion-on .kontroll-grid.in .de-link{animation:linkflow 5s linear infinite}
@keyframes linkflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-72}}
.de-marker{fill:var(--accent)}
.de-ring{
  fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
body.motion-on .kontroll-grid.in .de-ring{animation:mapping 4.6s var(--ease-soft) infinite}
body.motion-on .kontroll-grid.in .de-ring.r2{animation-delay:-2.3s}
@keyframes mapping{0%{transform:scale(.3);opacity:.9}70%{transform:scale(2.7);opacity:0}100%{transform:scale(2.7);opacity:0}}
.de-tag rect{fill:rgba(8,10,17,.72);stroke:rgba(96,110,140,.4)}
.de-tag text{fill:var(--ice);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em}
.coords{margin-top:2rem;color:var(--ice);display:flex;align-items:baseline;gap:.7rem}
.coords a{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--ice-dim);
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.coords a:hover{color:var(--accent);border-bottom-color:var(--accent-muted)}
.radar{
  width:10px;height:10px;border-radius:50%;flex:none;align-self:center;
  background:var(--ice);position:relative;
}
.radar::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--ice);opacity:0;
}
body.motion-on .in .radar::before{animation:ping 4.5s var(--ease-soft) -2s infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.8}55%{transform:scale(2.1);opacity:0}100%{opacity:0}}

/* Missionsmodule: Kartentrio */
.module{max-width:1180px;margin-inline:auto}
.module-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);margin-top:2.6rem;
}
.mcard{
  background:linear-gradient(165deg,var(--panel),rgba(16,26,44,.55));
  border:1px solid var(--panel-edge);border-radius:14px;
  padding:1.8rem 1.5rem;position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out);
}
.mcard:hover{transform:translateY(-4px);border-color:var(--ice-dim)}
.mcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(157,194,232,.09),transparent 70%);
  transition:opacity .4s var(--ease-out);
}
.mcard:hover::after{opacity:1}
.micon{width:46px;height:46px;color:var(--ice);margin-bottom:1.1rem}
.micon .draw{stroke-dasharray:130;stroke-dashoffset:130}
.in .micon .draw{transition:stroke-dashoffset 1.3s var(--ease-soft) .25s;stroke-dashoffset:0}
.mcard h3{margin-bottom:.6rem}
.mcard p{color:var(--text-secondary);font-size:.97rem}

/* Systemdiagnose: der kostenlose Website-Check */
.check{max-width:1100px;margin-inline:auto}
.check-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.check-copy{color:var(--text-secondary);margin-top:1.4rem}
.check-console{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--panel),rgba(16,26,44,.6));
  border:1px solid var(--panel-edge);border-radius:16px;
  padding:clamp(1.4rem,3.5vw,2.2rem);
  display:flex;flex-direction:column;gap:1.15rem;text-align:left;
}
.check-console::before{
  content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;
  border:1px solid var(--ice-dim);border-left:0;border-bottom:0;
}
.check-console::after{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(157,194,232,.65),transparent);
  opacity:0;pointer-events:none;
}
body.motion-on .check-grid.in .check-console::after{animation:scanline 4.6s var(--ease-soft) -1.5s infinite}
@keyframes scanline{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.9}
  55%{opacity:.5}
  90%{opacity:0}
  100%{transform:translateY(430px);opacity:0}
}
.check-head{color:var(--accent);letter-spacing:.16em;font-size:.66rem;display:flex;align-items:center;gap:.55rem}
.check-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
body.motion-on .check-grid.in .check-dot{animation:hudblink 2.4s var(--ease-soft) -0.8s infinite}
/* Radar in der Konsolen-Kopfzeile */
.check-radar{
  margin-left:auto;width:28px;height:28px;border-radius:50%;flex:none;
  border:1px solid var(--ice-dim);position:relative;overflow:hidden;
}
.check-radar::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(157,194,232,.55),rgba(157,194,232,.08) 80deg,transparent 110deg);
}
.check-radar::after{
  content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;background:var(--ice);
}
body.motion-on .check-grid.in .check-radar::before{animation:radarspin 3.4s linear infinite}
@keyframes radarspin{to{transform:rotate(360deg)}}
/* Diagnose-Zeilen: leuchten nacheinander auf */
.check-diag{
  display:flex;flex-direction:column;gap:.35rem;
  font-size:.62rem;letter-spacing:.12em;color:var(--ice);
}
.check-diag span{opacity:.28}
body.motion-on .check-grid.in .check-diag span{animation:diagpulse 5.7s var(--ease-soft) infinite}
body.motion-on .check-grid.in .check-diag span:nth-child(2){animation-delay:1.9s}
body.motion-on .check-grid.in .check-diag span:nth-child(3){animation-delay:3.8s}
@keyframes diagpulse{
  0%,55%,100%{opacity:.28}
  12%,38%{opacity:1}
}
/* Honigtopf: fuer Menschen unsichtbar */
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check-console .btn{align-self:flex-start}
.check-success{color:var(--accent);letter-spacing:.1em;font-size:.8rem}
@media (max-width:840px){
  .check-grid{grid-template-columns:1fr}
}

/* Flugplan: die Flugbahn */
.flugplan{
  max-width:1100px;margin-inline:auto;
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--panel-edge);border-radius:24px;
}
.fp-shader{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  pointer-events:none;
}
.flugplan::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(157,194,232,.045) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(90deg,rgba(157,194,232,.045) 0 1px,transparent 1px 52px),
    linear-gradient(180deg,rgba(8,13,23,.86),rgba(8,13,23,.5) 30%,rgba(8,13,23,.42) 70%,rgba(8,13,23,.8));
}
.fp-tele{
  margin-top:1rem;color:var(--ice);font-size:.66rem;letter-spacing:.16em;
}
.fp-tele b{color:var(--accent);font-weight:400}
/* Peilring um den zuletzt passierten Waypoint */
.fp-step.aktiv .fp-node::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px dashed var(--accent);opacity:.75;
}
body.motion-on .fp-step.aktiv .fp-node::before{animation:nodespin 8s linear infinite}
@keyframes nodespin{to{transform:rotate(360deg)}}
.fp-wrap{position:relative;margin-top:3rem}
.fp-path{
  position:absolute;left:50%;top:0;height:100%;width:120px;transform:translateX(-50%);
  color:var(--ice-dim);overflow:visible;
}
.fp-flown{color:var(--ice);stroke-dasharray:1000;stroke-dashoffset:calc(1000 - var(--draw,0)*1000)}
.fp-steps{list-style:none;display:flex;flex-direction:column;gap:clamp(3rem,7vw,5.5rem)}
.fp-step{
  width:calc(50% - 70px);position:relative;
  background:rgba(12,19,33,.82);border:1px solid var(--panel-edge);border-radius:12px;
  padding:1.4rem 1.4rem 1.5rem;
}
.fp-step.pass{border-color:rgba(237,160,95,.34)}
/* Die geplante Route wandert leise weiter */
body.motion-on .flugplan.in #fpTrack{animation:trackmarch 7s linear infinite}
@keyframes trackmarch{from{stroke-dashoffset:0}to{stroke-dashoffset:-64}}
/* Das Schiff auf der Flugbahn */
.fp-ship-core{fill:var(--accent)}
.fp-ship-glow{fill:rgba(237,160,95,.25);transform-box:fill-box;transform-origin:center}
body.motion-on .flugplan.in .fp-ship-glow{animation:shipglow 2.6s var(--ease-soft) -1s infinite}
@keyframes shipglow{
  0%,100%{transform:scale(.65);opacity:.5}
  50%{transform:scale(1.3);opacity:1}
}
.fp-step:nth-child(odd){align-self:flex-start;text-align:right}
.fp-step:nth-child(even){align-self:flex-end}
.fp-step h3{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}
.fp-step:nth-child(odd) h3{align-items:flex-end}
.fp-phase{color:var(--accent);font-size:.7rem}
.fp-step p{color:var(--text-secondary);font-size:.97rem;margin-inline:auto 0}
.fp-step:nth-child(even) p{margin-inline:0 auto}
.fp-node{
  position:absolute;top:1.2rem;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas-deep);border:1px solid var(--ice-dim);color:var(--ice);
  font-size:.72rem;
}
.fp-step:nth-child(odd) .fp-node{right:-88px}
.fp-step:nth-child(even) .fp-node{left:-88px}
.fp-step.pass .fp-node{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px rgba(237,160,95,.28)}
.fp-node{transition:border-color .6s var(--ease-soft),color .6s var(--ease-soft),box-shadow .6s var(--ease-soft)}
.fp-step.pass .fp-node::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;
}
body.motion-on .fp-step.pass .fp-node::after{animation:nodeping 3.8s var(--ease-soft) -1.2s infinite}
@keyframes nodeping{
  0%{transform:scale(.55);opacity:.85}
  60%{transform:scale(2);opacity:0}
  100%{transform:scale(2);opacity:0}
}

/* Klartext: drei Ansagen */
.klartext{max-width:880px;margin-inline:auto}
.kt-rows{margin-top:2.8rem;display:flex;flex-direction:column}
.kt-row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  padding:2rem 0;border-top:1px solid var(--panel-edge);align-items:baseline;
}
.kt-row:last-child{border-bottom:1px solid var(--panel-edge)}
.kt-num{
  font-size:clamp(1.6rem,3vw,2.2rem);color:var(--accent);opacity:.85;
  font-family:var(--font-display);font-weight:900;line-height:1;
}
.kt-row h3{margin-bottom:.45rem}
.kt-row p{color:var(--text-secondary)}

/* Missionsberichte: Google-Rezensionen, statisch gepflegt statt Widget (DSGVO) */
.rezensionen{max-width:1180px;margin-inline:auto}
.rez-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);margin-top:2.6rem;
}
.rez-card{
  background:linear-gradient(165deg,var(--panel),rgba(16,26,44,.55));
  border:1px solid var(--panel-edge);border-radius:14px;
  padding:1.8rem 1.5rem;display:flex;flex-direction:column;
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out);
}
.rez-card:hover{transform:translateY(-4px);border-color:var(--ice-dim)}
.rez-stars{color:var(--accent);margin-bottom:1rem;line-height:0}
.rez-card blockquote{flex:1}
.rez-card blockquote p{color:var(--text-secondary);font-size:.97rem}
.rez-card blockquote p::before{content:"\201E"}
.rez-card blockquote p::after{content:"\201C"}
.rez-card figcaption{
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(34,51,77,.6);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-weight:600;font-size:.92rem;
}
.rez-card figcaption .mono{
  color:var(--text-secondary);font-size:.62rem;letter-spacing:.12em;font-weight:400;
}
.rez-more{margin-top:2rem;text-align:center}
.rez-more a{
  color:var(--ice);text-decoration:none;border-bottom:1px solid var(--ice-dim);
  padding-bottom:.15rem;transition:color .3s var(--ease-out),border-color .3s var(--ease-out);
}
.rez-more a:hover{color:var(--accent-hover);border-color:var(--accent-muted)}
.rez-hinweis{
  display:block;margin-top:.7rem;color:var(--text-secondary);
  font-size:.62rem;letter-spacing:.12em;opacity:.7;
}

/* FAQ: Funkverkehr */
.faq{max-width:760px;margin-inline:auto}
.faq-list{margin-top:2.4rem;display:flex;flex-direction:column;gap:.7rem}
.faq details{
  background:rgba(16,26,44,.5);border:1px solid var(--panel-edge);border-radius:10px;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.faq details[open]{border-color:var(--ice-dim);background:rgba(16,26,44,.85)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem 1.3rem;font-weight:600;font-family:var(--font-body);
}
.faq summary::-webkit-details-marker{display:none}
.faq-ind{
  margin-left:auto;flex:none;width:12px;height:12px;position:relative;align-self:center;
}
.faq-ind::before,.faq-ind::after{
  content:"";position:absolute;background:var(--ice);left:0;top:5px;width:12px;height:2px;
  transition:transform .35s var(--ease-out);
}
.faq-ind::after{transform:rotate(90deg)}
.faq details[open] .faq-ind::after{transform:rotate(0deg)}
.faq details p{padding:0 1.3rem 1.25rem;color:var(--text-secondary);max-width:60ch}

/* Startfreigabe */
.startfreigabe{
  max-width:1100px;margin-inline:auto;text-align:center;
  padding-bottom:clamp(4rem,7vw,6rem);margin-bottom:clamp(3rem,6vw,5rem);
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--panel-edge);border-radius:24px;
}
/* Der echte Weltraum, dezent hinter der ganzen Sektion */
.startfreigabe::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(10,17,30,.66),rgba(10,17,30,.5) 45%,rgba(10,17,30,.72)),
    url('space-bg.webp') center/cover no-repeat;
}
/* Staub treibt über dem statischen All aufwärts */
.sf-atmo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sf-dust{
  position:absolute;inset:-30% -20%;
  /* Eine winzige Kachel statt vierzehn Radialverlaeufen: die Flaeche wird einmal
     gerastert und danach nur noch verschoben, statt bei jedem Bild neu gerechnet. */
  background-image:url("sterne.webp");
  background-size:380px 300px;
  opacity:.62;
}
.sf-dust.d2{background-size:560px 430px;opacity:.5}
body.motion-on .startfreigabe.in .sf-dust.d1{animation:dustrise1 34s linear infinite}
body.motion-on .startfreigabe.in .sf-dust.d2{animation:dustrise2 56s linear infinite}

/* Darüber: driftende Sternen-Ebene */
.startfreigabe::after{
  content:"";position:absolute;inset:-32%;z-index:-1;pointer-events:none;
  background-image:url("sterne.webp");
  background-size:300px 240px;
  opacity:.7;
}
body.motion-on .startfreigabe.in::after{animation:sfstars 64s linear infinite}
@keyframes sfstars{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-300px,-240px,0)}
}
.startfreigabe .kicker{color:var(--accent)}
.startfreigabe h2{margin-inline:auto}
.sf-lede{margin:1.2rem auto 0;color:var(--text-secondary)}
.sf-duo{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:3rem;text-align:left;
}
.sf-direct{
  position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;text-align:left;
  padding:.85rem 1.15rem;font-style:normal;white-space:nowrap;
  /* fester Grund statt Echtzeit-Weichzeichner: spart Rechenlast ueber dem laufenden Video */
  background:rgba(9,12,19,.85);backdrop-filter:none;
}
.sf-direct-label{color:var(--accent);font-size:.6rem;letter-spacing:.16em;margin-bottom:.15rem}
.sf-row{
  display:flex;align-items:center;gap:.6rem;font-size:.9rem;
  color:var(--text-secondary);text-decoration:none;
  transition:color .25s var(--ease-out);
}
.sf-row svg{width:15px;height:15px;flex:none;color:var(--ice)}
.sf-row b{color:var(--text-primary);font-weight:600}
a.sf-row:hover{color:var(--accent)}
/* Funkfrequenz über der Überschrift */
.eq{
  display:flex;justify-content:center;align-items:center;gap:3px;
  height:30px;margin:0 auto 1.2rem;
}
.eq span{
  width:3px;height:100%;border-radius:2px;
  background:linear-gradient(180deg,var(--ice),rgba(157,194,232,.3));
  transform:scaleY(.3);transform-origin:center;
}
.eq span:nth-child(11),.eq span:nth-child(12),.eq span:nth-child(13),.eq span:nth-child(14){
  background:linear-gradient(180deg,var(--accent),rgba(237,160,95,.3));
}
body.motion-on .startfreigabe.in .eq span{animation:eqbounce 1.1s ease-in-out infinite alternate}
body.motion-on .startfreigabe.in .eq span:nth-child(3n){animation-duration:.85s;animation-delay:-.3s}
body.motion-on .startfreigabe.in .eq span:nth-child(4n){animation-duration:1.45s;animation-delay:-.6s}
body.motion-on .startfreigabe.in .eq span:nth-child(5n){animation-duration:.7s;animation-delay:-.15s}
body.motion-on .startfreigabe.in .eq span:nth-child(7n){animation-duration:1.7s;animation-delay:-.85s}
@keyframes eqbounce{
  from{transform:scaleY(.12)}
  to{transform:scaleY(1)}
}

.astro-stage{
  position:relative;min-height:500px;display:flex;align-items:flex-start;justify-content:center;
  padding-bottom:7.5rem;
}
.astro-wrap{display:flex;align-items:center;justify-content:center}
.astro{
  width:min(90%,430px);height:auto;
  will-change:transform;
  /* hellere Anmutung wie zuvor im Misch-Modus, rein per Darstellung, Datei bleibt Original */
  filter:brightness(1.17) contrast(.93);
  transform:translate3d(var(--mx,0px),calc(var(--par,0px) + var(--my,0px)),0);
}
body.motion-on .startfreigabe.in .astro{animation:astrofloat 9s ease-in-out -3s infinite}
@keyframes astrofloat{
  0%,100%{transform:translate3d(var(--mx,0px),calc(var(--par,0px) + var(--my,0px) - 12px),0) rotate(-2.4deg)}
  50%{transform:translate3d(calc(var(--mx,0px) + 6px),calc(var(--par,0px) + var(--my,0px) + 14px),0) rotate(2.2deg)}
}
@media (max-width:840px){
  .sf-duo{grid-template-columns:1fr}
  .astro-stage{min-height:340px}
}
.sf-form{
  text-align:left;
  background:linear-gradient(170deg,var(--panel),rgba(16,26,44,.6));
  border:1px solid var(--panel-edge);border-radius:16px;
  padding:clamp(1.4rem,3.5vw,2.4rem);
  display:flex;flex-direction:column;gap:1.15rem;
}
.sf-field{display:flex;flex-direction:column;gap:.4rem}
.sf-field label{font-weight:600;font-size:.92rem}
.sf-field input,.sf-field textarea{
  background:rgba(6,12,23,.7);border:1px solid var(--panel-edge);border-radius:8px;
  color:var(--text-primary);font:inherit;padding:.7rem .9rem;resize:vertical;
  transition:border-color .25s var(--ease-out);
}
.sf-field input:focus-visible,.sf-field textarea:focus-visible{outline:none;border-color:var(--accent)}
.sf-field ::placeholder{color:rgba(150,166,191,.55)}
.sf-note{font-size:.85rem;color:var(--text-secondary)}
.sf-submit{align-self:flex-start}
.sf-success{color:var(--accent);letter-spacing:.1em;font-size:.8rem}

/* Footer */
.footer{
  border-top:1px solid var(--panel-edge);
  padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,6vw,6rem) 2rem;
  background:linear-gradient(180deg,transparent,rgba(6,12,23,.7));
}
.foot-grid{
  display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));
  gap:2.4rem;max-width:1180px;margin-inline:auto;
}
.foot-logo{width:min(250px,100%);height:auto;display:block}
.foot-slogan{color:var(--text-secondary);font-size:.92rem;max-width:26ch;margin-top:1rem}
.foot-head{color:var(--ice);margin-bottom:.9rem;font-size:.7rem}
.foot-col p{margin-bottom:.45rem;font-size:.95rem}
.foot-col a{text-decoration:none;color:var(--text-secondary)}
.foot-col a:hover{color:var(--text-primary)}
.foot-line{
  max-width:1180px;margin:3rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(34,51,77,.5);
  color:rgba(150,166,191,.6);font-size:.68rem;text-align:center;
}

/* ---------- Entrance-Choreografie unterhalb des Heros ---------- */

.kontroll-grid>div,.mcard,.fp-step,.kt-row,.rez-card,.faq details,.sf-duo,.sf-lede,.check-grid>*{
  opacity:0;transform:translateY(26px);
}
.check-grid.in>*{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-out);
}
.check-grid.in>.check-console{transition-delay:.12s}
.check-grid.in.settled>*{transition-delay:0s}
.in>.kontroll-left,.in>.kontroll-right,
.module-grid.in .mcard,
.fp-steps.in .fp-step,
.kt-rows.in .kt-row,
.ein-grid.in .ein,
.usp-grid.in .usp,
.rez-grid.in .rez-card,
.faq-list.in details,
.startfreigabe.in .sf-duo,.startfreigabe.in .sf-lede{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-out);
}
.module-grid.in .mcard:nth-child(2){transition-delay:.12s}
.module-grid.in .mcard:nth-child(3){transition-delay:.24s}
.fp-steps.in .fp-step:nth-child(2){transition-delay:.15s}
.fp-steps.in .fp-step:nth-child(3){transition-delay:.3s}
.fp-steps.in .fp-step:nth-child(4){transition-delay:.45s}
.kt-rows.in .kt-row:nth-child(2){transition-delay:.14s}
.kt-rows.in .kt-row:nth-child(3){transition-delay:.28s}
.usp-grid.in .usp:nth-child(2){transition-delay:.07s}
.usp-grid.in .usp:nth-child(3){transition-delay:.14s}
.usp-grid.in .usp:nth-child(4){transition-delay:.21s}
.usp-grid.in .usp:nth-child(5){transition-delay:.28s}
.usp-grid.in .usp:nth-child(6){transition-delay:.35s}
.usp-grid.in.settled .usp:nth-child(n){transition-delay:0s}
.ein-grid.in .ein:nth-child(2){transition-delay:.08s}
.ein-grid.in .ein:nth-child(3){transition-delay:.16s}
.ein-grid.in .ein:nth-child(4){transition-delay:.24s}
.ein-grid.in.settled .ein:nth-child(n){transition-delay:0s;transition:transform .35s var(--ease-out),border-color .35s var(--ease-out)}
.rez-grid.in .rez-card:nth-child(2){transition-delay:.12s}
.rez-grid.in .rez-card:nth-child(3){transition-delay:.24s}
.faq-list.in details:nth-child(2){transition-delay:.08s}
.faq-list.in details:nth-child(3){transition-delay:.16s}
.faq-list.in details:nth-child(4){transition-delay:.24s}
.faq-list.in details:nth-child(5){transition-delay:.32s}
.faq-list.in details:nth-child(6){transition-delay:.4s}
.faq-list.in details:nth-child(7){transition-delay:.48s}
/* Nach der Entrance: Verzögerungen in Rente schicken, damit Hover sofort reagiert */
.module-grid.in.settled .mcard:nth-child(n),
.fp-steps.in.settled .fp-step:nth-child(n),
.kt-rows.in.settled .kt-row:nth-child(n),
.rez-grid.in.settled .rez-card:nth-child(n),
.faq-list.in.settled details:nth-child(n){transition-delay:0s}
/* Nach der Landung: schnelle Alltags-Transitions zurückgeben */
.module-grid.in.settled .mcard:nth-child(n){transition:transform .35s var(--ease-out),border-color .35s var(--ease-out)}
.rez-grid.in.settled .rez-card:nth-child(n){transition:transform .35s var(--ease-out),border-color .35s var(--ease-out)}
.faq-list.in.settled details:nth-child(n){transition:border-color .3s var(--ease-out),background .3s var(--ease-out)}
.fp-steps.in.settled .fp-step:nth-child(n){transition:border-color .6s var(--ease-soft)}

/* ---------- Responsive Inhalte ---------- */

@media (max-width:1024px){
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcard:last-child{grid-column:1/-1}
  .rez-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rez-card:last-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:840px){
  .nav-links{display:none}
  .kontroll-grid{grid-template-columns:1fr}
  .fp-path{left:20px;transform:none}
  .fp-step{width:auto;margin-left:64px}
  .fp-step:nth-child(odd){align-self:stretch;text-align:left}
  .fp-step:nth-child(even){align-self:stretch}
  .fp-step h3,.fp-step:nth-child(odd) h3{align-items:flex-start}
  .fp-step:nth-child(odd) .fp-node{right:auto;left:-64px}
  .fp-step:nth-child(even) .fp-node{left:-64px}
  .fp-step p,.fp-step:nth-child(even) p{margin-inline:0}
}

@media (max-width:560px){
  .module-grid{grid-template-columns:1fr}
  .rez-grid{grid-template-columns:1fr}
  .mcard:last-child{grid-column:auto}
  .foot-grid{grid-template-columns:1fr}
  .band-line{font-size:1.35rem}
}

/* Nur für Telefone im Querformat (360 bis 430px hoch). 560px erwischte auch
   normale Desktop-Fenster auf hochauflösenden Bildschirmen und blendete dort
   die Anzeigen aus, obwohl reichlich Platz war.
   Die Koordinatenzeile steht weit unten im Kontrollzentrum und hat mit der
   Fensterhöhe nichts zu tun; sie ist deshalb nicht mehr betroffen. */
@media (max-height:440px){
  .scroll-cue,.hud{display:none}
}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .faq summary{min-height:44px}
  .nav-links a{padding:.5rem 0}
}

/* Telefon im Hochformat: dieselbe Szene, nur kompakter.
   - kuerzere Scrollstrecke, weil 760vh am Daumen sehr lang sind
   - svh statt vh, damit die ein- und ausfahrende Adressleiste die Buehne
     nicht unten abschneidet
   - das Video ist hier schon im Hochformat geschnitten, deshalb mittig
     statt auf 64 Prozent versetzt */
@media (orientation: portrait) and (max-width: 900px){
  .hero{height:480vh}
  .hero-stage{height:100svh}
  /* Nur das Video ist hier schon zugeschnitten und darf mittig stehen.
     Das Vorschaubild ist die volle Querformat-Aufnahme und behaelt seine
     64-Prozent-Position - sonst springt das Bild, sobald das Video einsetzt. */
  #heroVideo{object-position:center}

  /* Die Bänder duerfen hier fast die volle Breite nehmen. 46vw sind auf einem
     390px-Telefon nur 180px - die Überschrift bräche dort in vier Zeilen. */
  .band{max-width:min(84vw,520px)}
  .band-1 .band-line,.band-2 .band-line,.band-3 .band-line{font-size:clamp(1.4rem,6.4vw,2rem)}

  /* Telemetrie ueber die volle Breite verteilt, damit sie in eine Zeile passt */
  .hud-data{left:1rem;right:1rem;bottom:1.5rem;gap:.5rem;padding:.5rem .7rem;
    font-size:.58rem;letter-spacing:.04em;justify-content:space-between}
  .hud-status{top:84px;right:1rem;font-size:.62rem;padding:.4rem .7rem}
  .hud-status .mono{font-size:.62rem}
  .hud-c{width:18px;height:18px}
  .hc1,.hc2{top:76px}

  /* Dunst, Staub und Partikel bleiben auf dem Telefon aus.
     Die beiden Dunstebenen messen durch inset:-28% -38% rund 2500 x 4100
     Geraetepunkte, dazu zwei Staubebenen derselben Groesse und fuenf Partikel
     mit Schlagschatten - alle dauerhaft animiert, ueber einem Video, das
     ohnehin schon hochskaliert wird. Auf dem statischen Hero waren sie hier
     nie zu sehen; das Bild verliert also nichts, was es vorher hatte. */
  .atmo{display:none}
}

/* ---------- Die drei Gates: statischer Hero ----------
   Diese drei Bedingungen müssen ZEICHENGLEICH in assets/app.js stehen.
   Telefone im Hochformat sind bewusst nicht mehr dabei: sie bekommen den
   Scroll-Hero mit der Hochformat-Fassung des Videos. Statisch bleibt es nur,
   wo wirklich kein Platz ist (flaches Querformat), wo der Nutzer Daten sparen
   will oder wo er weniger Bewegung eingestellt hat. */

@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-data: reduce),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh;height:100svh}
  .hero-stage{position:relative;height:100%}
  #heroVideo,.ring,.band-1,.band-2,.band-3,.scroll-cue,.hud,.atmo{display:none}
  .hero-poster{background-image:url('../assets/hero-poster.jpg')}
  .hero-scrim{background:linear-gradient(180deg,rgba(6,10,18,.55),rgba(6,10,18,.28) 40%,rgba(6,10,18,.78) 100%)}
  .band-4{
    opacity:1;--k:1;
    /* Statischer Hero: der Block sitzt unten, deshalb hier keine Verschiebung
       um die halbe Eigenhoehe - sonst rutscht er aus dem Bild. */
    top:auto;bottom:8vh;transform:translateX(-50%);
  }
  .band-4 .split-words .w,.band-4 .band-sub,.band-4 .band-claims,.band-4 .band-cta{opacity:1;transform:none}
  .static-only{display:block;margin-bottom:1rem}
}

/* ---------- Reduced Motion: alles steht im Endzustand ---------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    transition-delay:0s !important;
  }
  body{opacity:1}
  .kontroll-grid>div,.mcard,.fp-step,.kt-row,.faq details,.sf-stage,.sf-lede{opacity:1;transform:none}
  .micon .draw{stroke-dashoffset:0}
  .de-outline{stroke-dashoffset:0}
  .de-link{opacity:1}
  .fp-flown{--draw:1}
  .fp-ship{display:none}
  .fp-step .fp-node{box-shadow:none}
  .sf-duo,.sf-lede,.check-grid>*,.usp,.ein{opacity:1;transform:none}
  .band-4{transform:translateX(-50%)}
}


/* Missionsberichte: Empfangs-Signal, Sterne und Absender */
.rez-card{position:relative;overflow:hidden;gap:1rem}
.rez-card::before{
  content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;
  border:1px solid var(--ice-dim);border-left:0;border-bottom:0;
}
.rez-wave{display:flex;align-items:flex-end;gap:3px;height:15px}
.rez-wave i{
  width:3px;height:100%;border-radius:2px;display:block;
  background:linear-gradient(180deg,var(--ice),rgba(157,194,232,.22));
  transform:scaleY(.25);transform-origin:bottom;
}
body.motion-on .rez-grid.in .rez-wave i{animation:rezwave 1.3s ease-in-out infinite alternate}
body.motion-on .rez-grid.in .rez-wave i:nth-child(3n){animation-duration:.95s;animation-delay:-.35s}
body.motion-on .rez-grid.in .rez-wave i:nth-child(4n){animation-duration:1.6s;animation-delay:-.7s}
body.motion-on .rez-grid.in .rez-wave i:nth-child(5n){animation-duration:.8s;animation-delay:-.2s}
body.motion-on .rez-grid.in .rez-card:nth-child(2) .rez-wave i{animation-delay:-.55s}
body.motion-on .rez-grid.in .rez-card:nth-child(3) .rez-wave i{animation-delay:-1.1s}
@keyframes rezwave{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
.rez-stars{color:var(--accent);line-height:0}
.rez-card blockquote{margin:0;position:relative;padding-left:1.5rem}
.rez-card blockquote p{
  margin:0;font-size:1rem;line-height:1.6;color:var(--text-primary);max-width:none;
}
.rez-card blockquote::before{
  content:"„";position:absolute;left:0;top:-.4rem;
  font-family:var(--font-display);font-size:2.1rem;line-height:1;
  color:var(--accent);opacity:.7;
}
.rez-card figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:.4rem}
.rez-av{
  width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;padding:3px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,#24405f,#111c2c);
  border:1px solid var(--ice-dim);color:var(--ice);
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
}
.rez-meta{display:flex;flex-direction:column;gap:.2rem;min-width:0;font-weight:600;font-size:.95rem}
.rez-meta .mono{color:var(--text-secondary);font-size:.58rem;letter-spacing:.12em;font-weight:400}
.rez-more{display:flex;flex-direction:column;gap:.4rem;align-items:center;margin:2.4rem auto 0;text-align:center}
.rez-more a{color:var(--ice);text-decoration:none;border-bottom:1px solid var(--ice-dim);font-size:.95rem}
.rez-more a:hover{color:var(--accent);border-bottom-color:var(--accent-muted)}
.rez-hinweis{color:var(--text-secondary);font-size:.58rem;letter-spacing:.12em}

/* Kundenlogos im Absender-Kreis */
.rez-av img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
.rez-stars{margin-top:-.2rem}

/* Kundenlogos auf hellem Kreis, sonst gehen dunkle Marken im Nachtblau unter */
/* Breite Wortmarken brauchen ein Rechteck, kein Kreisfenster */
.rez-av-logo{
  width:112px;height:46px;border-radius:9px;padding:7px 9px;
  background:#f4f7fb;border-color:rgba(157,194,232,.45);
}
.rez-av-logo img{border-radius:0}
/* Porträt im Funk-Chip */
.sf-portrait{
  width:64px;height:64px;border-radius:50%;display:block;margin-bottom:.55rem;
  border:1px solid var(--ice-dim);background:#eef2f8;object-fit:cover;
}

/* Vorteile als Systemcheckliste unter dem Kontrollzentrum */
.usp-grid{
  list-style:none;margin:clamp(2.6rem,5vw,4rem) auto 0;padding:0;
  max-width:1180px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2rem) clamp(1.6rem,3vw,2.6rem);
}
.usp{
  display:grid;grid-template-columns:auto 1fr;gap:.95rem;align-items:start;
  padding-top:1.15rem;border-top:1px solid var(--panel-edge);
}
.usp>svg{
  width:26px;height:26px;color:var(--ice);flex:none;margin-top:.1rem;
}
.usp h3{
  font-size:.98rem;margin-bottom:.35rem;letter-spacing:.01em;
  display:flex;align-items:baseline;gap:.5rem;
}
.usp h3::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 8px rgba(237,160,95,.5);
}
.usp p{color:var(--text-secondary);font-size:.92rem;line-height:1.6;max-width:42ch}
body.motion-on .usp-grid.in .usp>svg{animation:uspglow 6s var(--ease-soft) infinite}
body.motion-on .usp-grid.in .usp:nth-child(2)>svg{animation-delay:-1s}
body.motion-on .usp-grid.in .usp:nth-child(3)>svg{animation-delay:-2s}
body.motion-on .usp-grid.in .usp:nth-child(4)>svg{animation-delay:-3s}
body.motion-on .usp-grid.in .usp:nth-child(5)>svg{animation-delay:-4s}
body.motion-on .usp-grid.in .usp:nth-child(6)>svg{animation-delay:-5s}
@keyframes uspglow{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
@media (max-width:900px){
  .usp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .usp-grid{grid-template-columns:1fr}
}

/* Funkverkehr: Einwände und Antworten */
.einwaende{max-width:1100px;margin-inline:auto}
.ein-lede{color:var(--text-secondary);margin-top:1.1rem;max-width:56ch}
.ein-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);margin-top:2.8rem;
}
.ein{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(16,26,44,.72),rgba(11,18,31,.5));
  border:1px solid var(--panel-edge);border-radius:14px;
  padding:1.4rem 1.5rem 1.5rem;
  transition:border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.ein:hover{border-color:var(--ice-dim);transform:translateY(-3px)}
.ein::after{
  content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(237,160,95,.5),transparent);
  opacity:.55;
}
.ein-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--accent);font-size:.58rem;letter-spacing:.18em;margin-right:.6rem;
  vertical-align:.14em;
}
.ein-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
body.motion-on .ein-grid.in .ein-dot{animation:hudblink 2.6s var(--ease-soft) infinite}
body.motion-on .ein-grid.in .ein:nth-child(2n) .ein-dot{animation-delay:-1.3s}
body.motion-on .ein-grid.in .ein:nth-child(3n) .ein-dot{animation-delay:-.7s}
.ein-frage{
  font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;line-height:1.45;color:var(--text-primary);
  margin-bottom:.85rem;max-width:none;
}
.ein-antwort{
  color:var(--text-secondary);font-size:.95rem;line-height:1.65;max-width:none;
  padding-left:1rem;border-left:2px solid var(--accent-muted);
}
@media (max-width:840px){
  .ein-grid{grid-template-columns:1fr}
}

/* vierte Staubebene: feiner, schneller, andere Richtung */

/* Scan-Roboter ueber der Systemdiagnose, laeuft mit dem Scrollen */
.roboszene{
  max-width:1100px;margin:0 auto;
  padding:0 clamp(1.2rem,6vw,6rem);
}
.robo-rahmen{
  position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--panel-edge);
  aspect-ratio:1100/471;background:var(--canvas-deep);
}
.robo-poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.robo-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease-soft);
  will-change:transform;transform:translateZ(0);
}
.robo-rahmen.bereit .robo-vid{opacity:1}
.robo-rahmen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,17,30,.5),transparent 22%,transparent 74%,rgba(10,17,30,.72));
}
.robo-ecke{
  position:absolute;width:20px;height:20px;border:1px solid var(--ice-dim);pointer-events:none;
}
.re1{top:12px;left:12px;border-right:0;border-bottom:0}
.re2{top:12px;right:12px;border-left:0;border-bottom:0}
.re3{bottom:12px;left:12px;border-right:0;border-top:0}
.re4{bottom:12px;right:12px;border-left:0;border-top:0}
.robo-status{
  position:absolute;left:1.4rem;bottom:1.1rem;z-index:2;
  color:var(--ice);font-size:.6rem;letter-spacing:.18em;
  display:flex;align-items:center;gap:.5rem;
  text-shadow:0 1px 3px rgba(5,8,14,.9);
}
.robo-status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
}
body.motion-on .robo-status::before{animation:hudblink 2.4s var(--ease-soft) infinite}
@media (max-width:840px){
  .robo-status{font-size:.55rem;left:1rem;bottom:.9rem}
}

/* Überschrift über der Scan-Animation */
.robo-kopf{text-align:center;margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.robo-kopf h2{margin-inline:auto}
.robo-sub{
  margin:.7rem auto 0;color:var(--accent);
  font-size:.95rem;letter-spacing:.02em;
}
/* Der Diagnose-Bereich rückt näher an die Animation */
.roboszene + .check{padding-top:clamp(1.6rem,3vw,2.6rem)}
.roboszene{margin-top:clamp(1rem,2vw,1.6rem)}

/* Porträt im Kontrollzentrum */
.kontroll-person{
  display:flex;align-items:center;gap:1rem;
  margin-top:1.6rem;
}
.kp-bild{
  width:84px;height:84px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--ice-dim);background:#eef2f8;
}
.kp-text{display:flex;flex-direction:column;gap:.25rem}
.kp-text b{font-weight:600;font-size:1rem}
.kp-text .mono{color:var(--ice);font-size:.6rem;letter-spacing:.14em}
.kontroll-person + .kontroll-copy{margin-top:1.2rem}

/* Enger Anschluss: Vorteile -> Missionsmodule */
#kontrollzentrum{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.module{padding-top:clamp(1.8rem,3.5vw,3rem)}

/* Enger Anschluss: Missionsberichte -> Einwaende */
.rezensionen{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.einwaende{padding-top:clamp(1.8rem,3.5vw,3rem)}

/* Einwaende einspaltig, Nummer als eigene Zeile */
.ein-grid{grid-template-columns:1fr}
.ein-tag{display:inline-flex;margin:0 0 .45rem}
.ein-frage{max-width:none}
.ein-antwort{max-width:none}

/* Einwilligung in den Formularen */
.sf-consent{
  display:grid;grid-template-columns:auto 1fr;gap:.65rem;
  align-items:start;cursor:pointer;
  font-size:.85rem;line-height:1.55;color:var(--text-secondary);
}
.sf-consent input{
  width:18px;height:18px;margin-top:.15rem;flex:none;
  accent-color:var(--accent);cursor:pointer;
}
.sf-consent a{color:var(--ice)}
.sf-consent a:hover{color:var(--accent)}
.sf-consent.fehlt{color:var(--accent)}
.sf-consent.fehlt input{outline:2px solid var(--accent);outline-offset:2px}

/* Modul-Symbole: eigene Bewegung je Leistung */
.micon{overflow:visible}
.micon .akzent{color:var(--accent)}
.mi-block,.mi-bar,.mi-punkt,.mi-lade{fill:currentColor}
.mi-block.akzent,.mi-bar.akzent,.mi-punkt.akzent,.mi-lade.akzent{fill:var(--accent)}
.mi-puls{stroke:var(--accent)}

/* 1. Aufbau: die Inhaltsbloecke erscheinen nacheinander, wie eine entstehende Seite */
.mi-block{opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(.2)}
.module-grid.in .mi-block{
  opacity:1;transform:scaleX(1);
  transition:opacity .5s var(--ease-soft),transform .6s var(--ease-out);
}
.module-grid.in .mi-block.b1{transition-delay:.35s}
.module-grid.in .mi-block.b2{transition-delay:.5s}
.module-grid.in .mi-block.b3{transition-delay:.65s}
.module-grid.in .mi-block.b4{transition-delay:.8s;transform-origin:center bottom}
body.motion-on .module-grid.in .mcard:hover .mi-block.b4{
  animation:blockpuls 1.6s var(--ease-soft) infinite;
}
@keyframes blockpuls{0%,100%{opacity:1}50%{opacity:.45}}

/* 2. Sichtbarkeit: Balken wachsen, Funkwellen laufen nach aussen */
.mi-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);opacity:0}
.module-grid.in .mi-bar{
  opacity:1;transform:scaleY(1);
  transition:transform .65s var(--ease-out),opacity .4s var(--ease-soft);
}
.module-grid.in .mi-bar.s1{transition-delay:.4s}
.module-grid.in .mi-bar.s2{transition-delay:.55s}
.module-grid.in .mi-bar.s3{transition-delay:.7s}
.mi-ping{opacity:0;transform-box:fill-box;transform-origin:center}
body.motion-on .module-grid.in .mi-ping{animation:seoping 4.2s var(--ease-soft) infinite}
body.motion-on .module-grid.in .mi-ping.p2{animation-delay:-2.1s}
@keyframes seoping{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}

/* 3. Betreuung: der Pulsschlag laeuft durch das Schild */
.mi-puls{stroke-dasharray:100;stroke-dashoffset:100}
.module-grid.in .mi-puls{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-soft) .45s}
body.motion-on .module-grid.in.settled .mi-puls{animation:pulslauf 3.6s linear infinite}
@keyframes pulslauf{
  0%{stroke-dasharray:22 100;stroke-dashoffset:100}
  100%{stroke-dasharray:22 100;stroke-dashoffset:-22}
}
.mi-punkt{opacity:0}
.module-grid.in .mi-punkt{opacity:1;transition:opacity .5s var(--ease-soft) 1.2s}
body.motion-on .module-grid.in.settled .mi-punkt{animation:hudblink 2.8s var(--ease-soft) infinite}

/* Der Begleiter: schwebt neben der Einwandliste mit und zeigt auf den Einwand,
   der gerade auf seiner Höhe steht. */
.ein-buehne{
  display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr);
  gap:clamp(1.3rem,3.4vw,3rem);align-items:start;margin-top:2.8rem;
}
.ein-buehne .ein-grid{margin-top:0}
.ein-spur{
  position:sticky;top:calc(50vh - 132px);z-index:2;
  height:264px;display:flex;align-items:center;justify-content:flex-start;
}
.ein-robo{
  position:relative;width:100%;max-width:172px;
  transform:translate3d(0,var(--drift,0px),0) rotate(var(--neig,0deg));
  will-change:transform;
}
.ein-schweb{display:block}
.ein-robo img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 20px 38px rgba(4,9,18,.72));
}
body.motion-on .ein-spur.in .ein-schweb{animation:begleitschweb 8.4s var(--ease-soft) infinite}
@keyframes begleitschweb{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-13px,0)}
}
.ein-strahl{
  position:absolute;left:0;top:0;width:0;height:2px;
  transform-origin:0 50%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(157,194,232,.9),rgba(157,194,232,.3) 55%,rgba(157,194,232,.72));
  box-shadow:0 0 16px rgba(157,194,232,.42);
}
.ein-spur.gerichtet .ein-strahl{opacity:1;transition:opacity .6s var(--ease-soft)}
.ein-strahl::after{
  content:"";position:absolute;right:-5px;top:50%;
  width:10px;height:10px;margin-top:-5px;border-radius:50%;
  border:1px solid var(--ice);box-shadow:0 0 12px rgba(157,194,232,.55);
}
body.motion-on .ein-spur.gerichtet .ein-strahl::after{animation:hudblink 2.2s var(--ease-soft) infinite}

/* Der angepeilte Einwand tritt hervor */
.ein.aktiv{border-color:var(--ice-dim);box-shadow:-20px 0 46px -28px rgba(157,194,232,.8)}
.ein.aktiv::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;
  background:linear-gradient(180deg,transparent,var(--ice),transparent);
}
.ein-grid.in.settled .ein:nth-child(n){
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .5s var(--ease-out);
}

@media (max-width:900px){
  /* Zu schmal für eine eigene Spur: der Roboter steht einmal über der Liste */
  .ein-buehne{grid-template-columns:1fr;gap:0;margin-top:1.7rem}
  .ein-spur{position:static;height:auto;justify-content:center;margin-bottom:1.1rem}
  .ein-robo{max-width:148px;transform:none}
  .ein-strahl{display:none}
  .ein.aktiv{border-color:var(--panel-edge);box-shadow:none}
  .ein.aktiv::before{display:none}
}

/* Siegel in der Fußzeile: Google-Bewertung und SSL */
.foot-siegel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1rem,2.6vw,2.2rem);
  max-width:1180px;margin:clamp(2.2rem,4vw,3rem) auto 0;
}
.siegel-google{
  display:inline-flex;align-items:center;gap:.9rem;
  padding:.72rem 1.2rem .72rem .95rem;border-radius:12px;
  background:linear-gradient(168deg,rgba(16,26,44,.78),rgba(11,18,31,.5));
  border:1px solid var(--panel-edge);
}
.g-mark{width:27px;height:27px;flex:none}
.g-body{min-width:0}
.g-kopf{display:flex;align-items:center;gap:.6rem;margin:0}
.g-wert{
  font-family:var(--font-display);font-weight:700;
  font-size:1.24rem;line-height:1;color:var(--text-primary);
}
.g-sterne{width:84px;height:15px;flex:none;fill:#fbbc04}
.g-quelle{margin:.34rem 0 0;font-size:.56rem;letter-spacing:.16em;color:var(--text-secondary)}
.siegel-ssl{height:54px;width:auto;display:block;opacity:.9;transition:opacity .3s var(--ease-out)}
.siegel-ssl:hover{opacity:1}
.foot-siegel + .foot-line{margin-top:clamp(2rem,3.4vw,2.6rem)}
@media (max-width:520px){
  .siegel-ssl{height:46px}
  .g-wert{font-size:1.12rem}
}
.siegel-ssl-rahmen{
  display:inline-flex;align-items:center;
  padding:.58rem 1.05rem;border-radius:12px;
  background:linear-gradient(168deg,rgba(16,26,44,.78),rgba(11,18,31,.5));
  border:1px solid var(--panel-edge);
}

/* Modul-Symbole: dauerhafte Bewegung, damit die Karten nicht nach dem
   Aufbau erstarren */

/* Fensterampel blinkt der Reihe nach, darunter laeuft ein Ladebalken durch */
.mi-led{opacity:.35}
body.motion-on .module-grid.in.settled .mi-led{animation:ledlauf 3.2s var(--ease-soft) infinite}
body.motion-on .module-grid.in.settled .mi-led.l2{animation-delay:.22s}
body.motion-on .module-grid.in.settled .mi-led.l3{animation-delay:.44s}
@keyframes ledlauf{
  0%,55%,100%{opacity:.3}
  20%{opacity:1}
}
.mi-lade{opacity:0;transform-box:fill-box;transform-origin:left center}
body.motion-on .module-grid.in.settled .mi-lade{animation:ladelauf 4.6s var(--ease-soft) infinite}
@keyframes ladelauf{
  0%{opacity:0;transform:translateX(0) scaleX(.25)}
  12%{opacity:1}
  70%{opacity:1;transform:translateX(27px) scaleX(1)}
  85%,100%{opacity:0;transform:translateX(27px) scaleX(1)}
}
/* der Seitenblock atmet dauerhaft, beim Zeigen deutlicher */
body.motion-on .module-grid.in.settled .mi-block.b4{animation:blockatem 4.4s var(--ease-soft) infinite}
@keyframes blockatem{0%,100%{opacity:1}50%{opacity:.62}}

/* Ranking-Balken messen weiter nach */
body.motion-on .module-grid.in.settled .mi-bar{animation:balkenmess 5.2s var(--ease-soft) infinite}
body.motion-on .module-grid.in.settled .mi-bar.s2{animation-delay:-1.7s}
body.motion-on .module-grid.in.settled .mi-bar.s3{animation-delay:-3.4s}
@keyframes balkenmess{
  0%,100%{transform:scaleY(1)}
  35%{transform:scaleY(.68)}
  70%{transform:scaleY(1.12)}
}
body.motion-on .module-grid.in .mi-ping.p3{animation-delay:-3.15s}

/* Kontrollstrahl laeuft die Schildkontur ab */
.mi-scan{opacity:0;stroke:var(--accent);stroke-width:2.6;stroke-dasharray:12 88;stroke-dashoffset:0}
body.motion-on .module-grid.in.settled .mi-scan{animation:schildscan 5.4s linear infinite}
@keyframes schildscan{
  0%{opacity:0;stroke-dashoffset:0}
  10%,80%{opacity:.85}
  100%{opacity:0;stroke-dashoffset:-100}
}

/* Karten: ein Lichtpunkt wandert die Oberkante entlang, versetzt je Karte */
.mcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(157,194,232,.85),transparent);
  transform:translateX(-40%) scaleX(.35);opacity:0;
}
body.motion-on .module-grid.in.settled .mcard::before{animation:kantenlicht 7.2s var(--ease-soft) infinite}
body.motion-on .module-grid.in.settled .mcard:nth-child(2)::before{animation-delay:-2.4s}
body.motion-on .module-grid.in.settled .mcard:nth-child(3)::before{animation-delay:-4.8s}
@keyframes kantenlicht{
  0%{transform:translateX(-70%) scaleX(.35);opacity:0}
  18%,62%{opacity:.9}
  100%{transform:translateX(70%) scaleX(.35);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .mi-led{opacity:.75}
  .mi-scan,.mi-lade{display:none}
}

/* Weniger Vorlauf über den häufigen Fragen */
.faq{padding-top:clamp(1.8rem,3.5vw,3rem)}

/* Funksymbol im Menü-Knopf */
.btn-nav{display:inline-flex;align-items:center;gap:.55rem}
.btn-funk{width:15px;height:15px;flex:none;overflow:visible}
.btn-funk circle{fill:currentColor}
.btn-funk path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.btn-funk .bf-fern{opacity:.55}
body.motion-on .btn-nav:hover .bf-nah{animation:funkwelle 1.4s var(--ease-soft) infinite}
body.motion-on .btn-nav:hover .bf-fern{animation:funkwelle 1.4s var(--ease-soft) .2s infinite}
@keyframes funkwelle{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

/* Tippflächen auf Touch-Geräten: 18px hohe Links trifft man mit dem Daumen nicht */
@media (max-width:840px){
  .foot-col p{margin-bottom:.2rem}
  .foot-col a{display:inline-flex;align-items:center;min-height:30px}
  .foot-col a[href^="mailto"],.foot-col a[href^="tel"]{min-height:42px}
  .sf-direct .sf-row{min-height:40px}
  .sf-consent input{width:22px;height:22px;margin-top:.05rem}
  .sf-consent span a{display:inline-block;padding:.28rem 0}
}

/* Kopfzeile auf schmalen Displays: der Knopf drückte sonst die Wortmarke platt */
@media (max-width:560px){
  /* Spalten nach Inhalt statt 1fr: sonst schrumpft die Logospalte auf Restbreite */
  .topnav{grid-template-columns:auto 1fr auto;gap:.6rem;padding-inline:.9rem}
  .brand-logo{height:36px;flex:none}
  .btn-nav{padding:.5rem .75rem;font-size:.66rem;gap:.4rem}
  .btn-funk{width:13px;height:13px}
}
@media (max-width:360px){
  .brand-logo{height:30px}
  .btn-nav{padding:.45rem .6rem;font-size:.6rem}
}

/* ---------- Ortsseiten (Webdesign + Ortsname) ---------- */
.brotkrumen{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-secondary);margin-bottom:1.8rem;
}
.brotkrumen a{color:var(--ice);text-decoration:none}
.brotkrumen a:hover{color:var(--text-primary)}
.brotkrumen span[aria-current]{color:var(--text-secondary)}

/* Ortsseiten stehen enger: kein Hero, der den Rhythmus vorgibt */
.ortsseite main > section{
  padding-top:clamp(2.4rem,5vw,4.2rem);
  padding-bottom:clamp(2.4rem,5vw,4.2rem);
}
.ortsseite .startfreigabe{padding-bottom:clamp(3rem,6vw,5rem)}
/* Verweis auf die Ortsseiten im Fließtext */
.kontroll-copy a{
  color:var(--ice);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ice-dim);transition:color .25s var(--ease-out);
}
.kontroll-copy a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* Ortsseiten in der Fußzeile */
.foot-orte{
  max-width:1180px;margin:clamp(2rem,4vw,2.8rem) auto 0;
  padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid rgba(34,51,77,.5);
}
.foot-orte ul{
  list-style:none;padding:0;margin:.9rem 0 0;
  display:flex;flex-wrap:wrap;gap:.55rem .7rem;
}
.foot-orte a{
  display:inline-flex;align-items:center;min-height:34px;
  padding:.15rem .95rem;border:1px solid var(--panel-edge);border-radius:999px;
  color:var(--text-secondary);text-decoration:none;font-size:.9rem;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.foot-orte a:hover{color:var(--text-primary);border-color:var(--ice-dim)}
.foot-orte a[aria-current]{color:var(--ice);border-color:var(--ice-dim)}

/* Ortsseiten-Karte: Standort und Zielort nebeneinander */
.de-basis{fill:var(--ice)}
.de-nachbar{
  stroke:var(--accent);stroke-width:1.1;fill:none;stroke-dasharray:2.5 3;
  opacity:0;transition:opacity 1s var(--ease-soft) 1.4s;
}
.kontroll-grid.in .de-nachbar{opacity:.85}
.de-leiter{stroke:rgba(96,110,140,.5);stroke-width:.8;fill:none}
.de-tag-basis text{fill:var(--text-secondary)}

/* Ortung: Text links, Ortsbild rechts */
.ortung-kopf{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
}
/* Bildrahmen: ein Licht wandert am Rand entlang, dazu Eckklammern */
.ortung-bild{
  margin:0;position:relative;isolation:isolate;
  padding:5px;border-radius:18px;
}
.ob-ring{
  position:absolute;inset:0;z-index:0;border-radius:18px;
  overflow:hidden;pointer-events:none;background:rgba(34,51,77,.85);
}
.ob-lauf{
  position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;
  translate:-50% -50%;opacity:0;
  transition:opacity .9s var(--ease-soft) .3s;
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 186deg,
    rgba(157,194,232,.9) 242deg,
    rgba(237,160,95,1) 268deg,
    rgba(157,194,232,.9) 294deg,
    transparent 340deg, transparent 360deg);
}
.ortung-bild.in .ob-lauf{opacity:1}
body.motion-on .ortung-bild.in .ob-lauf{animation:rahmenlauf 7.5s linear infinite}
@keyframes rahmenlauf{from{rotate:0deg}to{rotate:360deg}}
.ortung-bild img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  border-radius:13px;box-shadow:0 0 0 1px rgba(4,9,18,.9);
}
.ortung-bild::after{
  content:"";position:absolute;inset:auto 5px 5px 5px;height:26%;z-index:2;pointer-events:none;
  border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,transparent,rgba(6,12,23,.5));
}
.ortung-bild figcaption{
  position:absolute;left:1.3rem;bottom:1.1rem;z-index:4;
  color:var(--ice);font-size:.58rem;letter-spacing:.18em;
  text-shadow:0 1px 3px rgba(5,8,14,.9);
}
/* Klammern sitzen ausserhalb des Rahmens auf dem dunklen Grund */
.ob-ecke{
  position:absolute;z-index:3;width:22px;height:22px;
  border:1px solid var(--ice);pointer-events:none;opacity:.55;
}
.oe1{top:-8px;left:-8px;border-right:0;border-bottom:0}
.oe2{top:-8px;right:-8px;border-left:0;border-bottom:0}
.oe3{bottom:-8px;left:-8px;border-right:0;border-top:0}
.oe4{bottom:-8px;right:-8px;border-left:0;border-top:0}
body.motion-on .ortung-bild.in .ob-ecke{animation:eckenpuls 3.6s var(--ease-soft) infinite}
body.motion-on .ortung-bild.in .oe2{animation-delay:-.9s}
body.motion-on .ortung-bild.in .oe3{animation-delay:-1.8s}
body.motion-on .ortung-bild.in .oe4{animation-delay:-2.7s}
@keyframes eckenpuls{0%,100%{opacity:.35}50%{opacity:1}}
.ortung-kopf .ein-lede{margin-top:1.1rem}
@media (max-width:900px){
  .ortung-kopf{grid-template-columns:1fr;gap:1.6rem}
}
/* Ortsbild als Abschluss des Schlüchtern-Abschnitts */
.ort-band{max-width:860px;margin:clamp(2.6rem,5vw,4rem) auto 0}
.kontroll-left .ort-band{margin:clamp(1.6rem,3vw,2.4rem) auto 0 0}
/* Ab der Breite, in der das Raster zweispaltig wird (841px), steht das Bild
   auf halber Spaltenbreite. Darunter bleibt es voll, sonst sind die feinen
   Laserlinien auf dem Telefon nicht mehr zu erkennen.
   Die linke Spalte wird durch das Bild höher, deshalb rückt die Karte mittig. */
@media (min-width:841px){
  .kontroll-left .ort-band{max-width:64%}
  .kontroll-left:has(.ort-band) + .kontroll-right{align-self:center}
}

/* ---------- Kompaktere Formulare und Einwände ---------- */

/* Website-Check und Kontaktformular: weniger Innenabstand, engere Reihen */
.check-console,.sf-form{
  padding:clamp(1.1rem,2.4vw,1.6rem);
  gap:.8rem;
}
.sf-field{gap:.3rem}
.sf-field label{font-size:.86rem}
.sf-field input,.sf-field textarea{padding:.55rem .8rem;font-size:.95rem}
.sf-form textarea,.check-console textarea{min-height:0}
.sf-note{font-size:.78rem;line-height:1.5}
.sf-consent{font-size:.8rem;line-height:1.45;gap:.55rem}
.check-diag{gap:.22rem;font-size:.58rem}
.check-copy{margin-top:1rem}

/* Einwände: engere Karten, kleinerer Text */
.ein-grid{gap:clamp(.7rem,1.6vw,1.1rem);margin-top:2.2rem}
.ein{padding:1.05rem 1.2rem 1.15rem;border-radius:12px}
.ein-frage{font-size:.94rem;line-height:1.4;margin-bottom:.6rem}
.ein-antwort{font-size:.88rem;line-height:1.55;padding-left:.85rem}
.ein-tag{font-size:.54rem;margin:0 0 .35rem}
.ein-lede{margin-top:.9rem}

/* Startseite: Karte kleiner, Ortsbild größer */
.kontroll-left:has(.ort-band) + .kontroll-right .demap{max-width:250px}
.kontroll-left:has(.ort-band) + .kontroll-right .map-panel{padding:1.2rem 1.1rem .8rem}

/* Bereiche ausserhalb des Sichtfensters pausieren ihre Animationen.
   Spart auf der Startseite rund 90 dauerhaft laufende Animationen. */
.ruht,.ruht *,.ruht *::before,.ruht *::after{animation-play-state:paused !important}

/* ---------- Hero-Abschluss bei niedrigen Fenstern ----------
   Überschrift, Pillen und Knopf brauchen zusammen mehr Höhe, als ein
   flaches Fenster hergibt. Schrift und Abstände wachsen deshalb mit.
   Die Verschiebung nach oben nur bei Mauszeigern: auf Telefonen im
   Querformat läuft der statische Hero, der die Position selbst setzt. */
@media (max-height:760px){
  .band-4 h1{font-size:clamp(1.35rem,3.2vw,2.3rem)}
  .band-sub{margin-top:.75rem;font-size:clamp(.88rem,1.15vw,1rem);line-height:1.5}
  .band-claims{margin-top:.75rem;gap:.45rem}
  .band-claims li{padding:.36rem .8rem;font-size:.8rem}
  .band-cta{margin-top:1rem}
}
@media (max-height:600px){
  .band-4 h1{font-size:clamp(1.2rem,2.7vw,1.8rem)}
  .band-sub{margin-top:.55rem;font-size:.86rem;line-height:1.45}
  .band-claims{margin-top:.55rem;gap:.38rem}
  .band-claims li{padding:.3rem .7rem;font-size:.75rem}
  .band-cta{margin-top:.8rem}
  .band-cta .btn{padding:.55rem 1.15rem;font-size:.84rem}
  .band-1 .band-line,.band-2 .band-line,.band-3 .band-line{font-size:clamp(1.15rem,2.4vw,1.8rem)}
}
/* Die frueheren festen Werte fuer flache Fenster sind entfallen: der Block
   ist jetzt senkrecht zentriert und findet seine Lage selbst. */