*{margin:0;padding:0;box-sizing:border-box;}
body{background:#000;color:#fff;font-family:Arial;}

.top-headline{
position:fixed;
top:0;
width:100%;
height:85px;
background:linear-gradient(135deg,rgba(3,10,18,.45),rgba(1,4,9,.45));
box-shadow:0 12px 28px rgba(0,0,0,.442),0 30px 75px rgba(0,0,0,.51),0 0 18px rgba(0,0,0,.272);
z-index:100;
border-bottom:1px solid #299bd7;
}

.headline-inner{display:grid;grid-template-columns:repeat(3,1fr);height:100%;}
.headline-sector{display:flex;align-items:center;justify-content:center;font-size:14px;}

.landing-slider{
width:100%;
height:100vh;
height:100dvh;
position:relative;
overflow:hidden;
isolation:isolate;
}

.landing-video{
display:block;
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:none;
max-height:none;
object-fit:cover;
object-position:center;
z-index:1;
pointer-events:none;
}

/* Vorspann: Clip aus dem Bus-Planer über dem Video, blendet danach aus */
.planer-clip{position:absolute;inset:0;z-index:1;background:#02070c;pointer-events:none;transition:opacity 1.2s ease;}
.planer-clip iframe{display:block;width:100%;height:100%;border:0;}
.planer-clip.is-done{opacity:0;}

/* Bus-Planer-Modal: Aufbau wie das Impressum */
.planer-info h3 i{width:22px;margin-right:6px;color:#75d3ff;text-align:center;}
.planer-info ul{margin:6px 0 14px;padding-left:20px;line-height:1.6;}
.planer-info li{margin-bottom:4px;}
.planer-info .planer-soon{margin-top:22px;padding:14px 16px;border:1px solid #67cfff55;border-radius:10px;background:rgba(41,155,215,.12);}

.grid-overlay{
position:absolute;
inset:0;
z-index:2;
opacity:.6;
pointer-events:none;
background-image:linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px);
background-size:3px 3px;
}

.landing-content{
position:absolute;
inset:0;
z-index:20;
pointer-events:none;
}

.hero-social-links{
position:absolute;
left:50%;
bottom:50px;
transform:translateX(-50%);
display:flex;
gap:40px;
z-index:30;
pointer-events:auto;
position:absolute;
isolation:isolate;
}

.hero-social-links a{
font-size:110px;
opacity:.5;
color:#fff;
text-shadow:0 8px 16px rgba(0,0,0,.9);
transition:.3s;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
pointer-events:auto;
position:relative;
z-index:3;
}

.hero-social-links a:hover{
opacity:1;
color:#ffffff;
transform:translateY(-8px) scale(1.08);
text-shadow:0 0 6px rgba(255,255,255,.6),0 0 12px rgba(255,255,255,.35),0 0 20px rgba(255,255,255,.2);
}

p{
position:absolute;
bottom:50px;
left:50%;
transform:translateX(-50%);
font-family:"Yellowtail",cursive;
font-size:28px;
z-index:21;
pointer-events:none;
}

/* Textslider: nur die neuen Inhalte, bestehender Overlay unverändert. */
.text-slider{--slider-blue:#299bd7;--slider-subline:#f0d3a0;background:linear-gradient(135deg,rgba(3,10,18,.45),rgba(1,4,9,.45));border-radius:24px;padding:clamp(22px,3vw,42px);box-shadow:0 12px 28px rgba(0,0,0,.442),0 30px 75px rgba(0,0,0,.51),0 0 18px rgba(0,0,0,.272);position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:min(90%,960px);z-index:21;text-align:center;pointer-events:auto;}
.text-slides{display:grid;align-items:center;}
.text-slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(0);transition:opacity 1.5s ease,transform 1.7s ease,filter 1.5s ease,visibility 1.7s;}
.text-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;}
.text-slide h2{color:var(--slider-blue);font-size:clamp(30px,4.5vw,66px);font-weight:800;line-height:1.06;letter-spacing:-.04em;text-wrap:balance;text-shadow:0 3px 24px #000;}
.text-slide .text-slide-subtitle{color:var(--slider-subline);position:static;transform:none;font-family:Arial,Helvetica,sans-serif;font-size:clamp(15px,1.5vw,20px);line-height:1.5;max-width:680px;margin:18px auto 24px;text-wrap:balance;text-shadow:0 2px 12px #000;}
.text-slide-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:12px 24px;border:1px solid rgba(255,255,255,.65);border-radius:6px;background:rgba(0,0,0,.35);color:#fff;text-decoration:none;font:600 14px Arial,sans-serif;backdrop-filter:blur(8px);cursor:pointer;transition:background .2s;}
.text-slide-button:hover{background:rgba(255,255,255,.22);}
.text-slider :focus-visible{outline:2px solid #fff;outline-offset:5px;}
.text-slider-controls{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:18px;}
.text-slider-dot{width:30px;height:30px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;}
.text-slider-dot::after{content:"";width:7px;height:7px;border:1px solid #fff;border-radius:50%;background:transparent;}
.text-slider-dot[aria-pressed="true"]::after{background:#fff;box-shadow:0 0 9px #ffffff80;}
.text-slider-pause{width:30px;height:30px;border:0;background:transparent;color:#fff;font-size:15px;cursor:pointer;}
@media(max-width:600px){.text-slider{top:35%;width:90%;}.text-slide h2{font-size:32px;}.text-slide .text-slide-subtitle{font-size:15px;margin:14px auto 18px;}}
@media(max-height:650px){.text-slider{top:33%;}.text-slide h2{font-size:clamp(24px,4vw,42px);}.text-slide .text-slide-subtitle{font-size:14px;margin:10px auto 12px;}.text-slider-controls{margin-top:6px;}}
@media(prefers-reduced-motion:reduce){.text-slide{transition:none;}}

/* Impressum Modal */

.impressum-modal{
position:fixed;
inset:0;
z-index:3000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .28s ease, visibility .28s ease;
}

.impressum-modal.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.impressum-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.74);
backdrop-filter:blur(7px);
}

.impressum-box{
position:relative;
width:min(92vw,760px);
max-height:78vh;
background:rgba(0,0,0,.40);
border:1px solid rgba(255,255,255,.34);
box-shadow:
  0 30px 90px rgba(0,0,0,.88),
  0 0 35px rgba(255,255,255,.10);
backdrop-filter:blur(12px);
padding:34px;
z-index:2;
overflow:auto;
transform:translateY(16px) scale(.96);
transition:transform .28s ease;
}

.impressum-modal.is-open .impressum-box{
transform:translateY(0) scale(1);
}

.impressum-close{
position:absolute;
top:12px;
right:14px;
width:36px;
height:36px;
border:1px solid rgba(255,255,255,.32);
border-radius:50%;
background:rgba(0,0,0,.25);
color:#fff;
font-size:27px;
line-height:32px;
cursor:pointer;
transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.impressum-close:hover{
transform:scale(1.08);
background:rgba(255,255,255,.10);
box-shadow:0 0 18px rgba(255,255,255,.25);
}

.impressum-box h2{
font-family:"Yellowtail",cursive;
font-size:52px;
font-weight:400;
line-height:1;
margin-bottom:22px;
text-align:center;
}

.impressum-content{
font-size:14px;
line-height:1.55;
color:rgba(255,255,255,.84);
}

.impressum-content h3{
font-size:14px;
letter-spacing:.08em;
text-transform:uppercase;
margin:22px 0 8px;
color:rgba(255,255,255,.95);
}

.impressum-content p{
position:static;
left:auto;
bottom:auto;
transform:none;
width:auto;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
margin:0 0 14px;
text-align:left;
pointer-events:auto;
}

.impressum-content a{
color:#fff;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.35);
}

/* Cookie Banner */

.cookie-banner{
position:fixed;
left:50%;
bottom:22px;
transform:translateX(-50%);
width:min(92vw,760px);
min-height:64px;
padding:14px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background:rgba(0,0,0,.72);
border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(8px);
box-shadow:0 20px 50px rgba(0,0,0,.78);
z-index:2500;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .28s ease, visibility .28s ease;
}

.cookie-banner.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.cookie-banner p{
position:static;
left:auto;
bottom:auto;
transform:none;
width:auto;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
line-height:1.35;
margin:0;
text-align:left;
pointer-events:auto;
}

.cookie-banner button{
height:34px;
padding:0 18px;
border:1px solid rgba(255,255,255,.42);
background:transparent;
color:#fff;
cursor:pointer;
white-space:nowrap;
transition:background .22s ease, box-shadow .22s ease;
}

.cookie-banner button:hover{
background:rgba(255,255,255,.10);
box-shadow:0 0 14px rgba(255,255,255,.22);
}

@media(max-width:700px){
  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .impressum-box{
    padding:30px 22px;
  }
}

/* HEADLINE STATUS */

.headline-live{
justify-content:flex-end;
gap:8px;
padding-right:22px;
font-size:12px;
white-space:nowrap;
}

.headline-live a{
color:#fff;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:4px;
}

.twitch-status{
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}

.twitch-status.online{
color:#5cff8d;
text-shadow:
  0 0 8px rgba(92,255,141,.65),
  0 0 18px rgba(92,255,141,.35);
}

.twitch-status.offline{
color:#ff5c5c;
text-shadow:
  0 0 8px rgba(255,92,92,.45),
  0 0 16px rgba(255,92,92,.22);
}

.twitch-status.checking{
color:#ffffff;
opacity:.7;
text-shadow:0 0 8px rgba(255,255,255,.35);
}

@media(max-width:900px){

  .headline-live{
    font-size:10px;
    gap:5px;
    padding-right:10px;
  }
}

/* HEADLINE SUPPORT BUTTON - REPAIRED */

.headline-support{
justify-content:flex-start;
padding-left:58px;
}

.support-button,
.support-button:visited,
.support-button:active{
height:30px;
padding:0 12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(255,255,255,.26);
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.88);
text-decoration:none;
font-size:14px;
letter-spacing:.03em;
white-space:nowrap;
transition:
  background .25s ease,
  box-shadow .25s ease,
  color .25s ease,
  transform .25s ease;
}

.support-button:hover{
background:rgba(255,255,255,.10);
box-shadow:0 0 14px rgba(255,255,255,.22);
color:#fff;
transform:translateX(3px);
}

.support-icon{
font-size:14px;
opacity:.75;
animation:supportFade 3.2s ease-in-out infinite;
}

.support-heart{
font-size:14px;
color:#ff5c6c;
opacity:.92;
text-shadow:0 0 8px rgba(255,92,108,.45);
}

/* FINAL TUNING */

/* Follow + Icons Size */
/* stronger fade */
/* ensure icons same size */
.hero-social-links i{
font-size:85px;
}

/* more spacing */
.hero-social-links{
gap:25px;
}

/* faster support animation */
@keyframes supportFade{
0%{opacity:0.2;}
50%{opacity:1;}
100%{opacity:0.2;}
}

.support-icon{
animation:supportFade 1.5s ease-in-out infinite;
}

/* FOLLOW US TECH STYLE ONLY */

.hero-social-links a{
position:relative;
z-index:2;
}

/* FOLLOW US SOFT GLOW - SLOW */

.follow-label{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1;
pointer-events:none;

font-family:Arial Black, Arial, Helvetica, sans-serif;
font-size:194px; /* ca 10% kleiner */
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
white-space:nowrap;
line-height:1;

color:rgba(185,185,185,.10);
filter:blur(1.2px);

text-shadow:
  0 0 18px rgba(255,255,255,.08),
  0 0 40px rgba(255,255,255,.06),
  0 0 80px rgba(255,255,255,.04);

background:linear-gradient(
  90deg,
  rgba(255,255,255,.02) 0%,
  rgba(255,255,255,.04) 44%,
  rgba(255,255,255,.45) 50%,
  rgba(255,255,255,.04) 56%,
  rgba(255,255,255,.02) 100%
);

background-size:260% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;

animation:followGlowSweep 10s ease-in-out infinite;
}

@keyframes followGlowSweep{
0%{
background-position:260% 0;
}
15%{
background-position:120% 0;
}
45%{
background-position:120% 0;

}
}
.hero-social-links a{
position:relative;
z-index:3;
filter:drop-shadow(0 0 12px rgba(0,0,0,.95))
       drop-shadow(0 0 24px rgba(0,0,0,.75));
}

@media(max-width:900px){
  .follow-label{
    font-size:100px;
  }
}

/* Der komplette Slider inklusive Hintergrund und Navigation animiert gemeinsam. */
.text-slide{transition:none;}
.text-slide:not(.is-active){transform:none;filter:none;}

/* Neue Buttonfamilie: klare Konturen, Lichtreflex, Tiefe und bewegter Pfeil. */
.slide-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.text-slide-button,.support-button,.cookie-banner button{
position:relative;isolation:isolate;overflow:hidden;border:1px solid #5ac4f566;border-radius:12px;
background:linear-gradient(135deg,#12344a,#091924);color:#f5fbff;
box-shadow:inset 0 1px 0 #ffffff15,0 5px 18px #0003;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.text-slide-button{padding:10px 12px 10px 22px;gap:22px;min-height:52px;font:600 14px Arial,sans-serif;letter-spacing:.02em;backdrop-filter:none;}
.text-slide-button::before,.support-button::before,.cookie-banner button::before{
content:"";position:absolute;inset:-100% -50%;background:linear-gradient(110deg,transparent 38%,#ffffff38 50%,transparent 62%);transform:translateX(-100%) rotate(12deg);transition:transform .8s ease;pointer-events:none;z-index:-1;
}
.button-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#299bd72b;color:#85d9ff;font-size:20px;transition:transform .4s ease,background .4s ease,color .4s ease;}
.text-slide-button:hover,.support-button:hover,.cookie-banner button:hover{
background:linear-gradient(135deg,#185272,#0b263b);border-color:#7dd9ff;transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff30,0 10px 30px #0005,0 0 22px #299bd72b;color:#fff;
}
.text-slide-button:hover::before,.support-button:hover::before,.cookie-banner button:hover::before{transform:translateX(100%) rotate(12deg);}
.text-slide-button:hover .button-arrow{transform:rotate(45deg);background:#75d3ff;color:#092235;}
.text-slide-button:active,.support-button:active,.cookie-banner button:active{transform:translateY(0) scale(.98);}
button:focus-visible,a:focus-visible{outline:2px solid #8cddff;outline-offset:4px;}
.hero-social-links a{border-radius:20px;padding:8px;background:linear-gradient(145deg,#0d2e4238,#07101b52);border:1px solid #80cfff25;box-shadow:inset 0 1px 0 #ffffff10;transition:transform .4s ease,background .4s ease,box-shadow .4s ease,color .4s ease,opacity .4s ease;}
.hero-social-links a:hover{transform:translateY(-8px) rotate(-3deg);background:#17496680;box-shadow:0 10px 30px #0005,inset 0 0 20px #57caff30;color:#b8e9ff;}
.text-slider-dot{border-radius:8px;transition:background .25s ease;}
.text-slider-dot:hover{background:#299bd72b;}
.text-slider-dot::after{width:14px;height:4px;border:0;border-radius:4px;background:#ffffff50;transition:width .3s ease,background .3s ease;}
.text-slider-dot[aria-pressed="true"]::after{width:24px;background:#61caff;box-shadow:0 0 10px #299bd780;}
.text-slider-pause,.impressum-close{border:1px solid #67cfff55;border-radius:10px;background:#102d40;color:#c6edff;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;}
.text-slider-pause:hover,.impressum-close:hover{background:#215879;transform:scale(1.08);box-shadow:0 0 18px #299bd740;}
@media(max-width:600px){.text-slide-button{min-height:46px;font-size:13px;padding:8px 10px 8px 16px;gap:14px;}.slide-actions{gap:8px;}.hero-social-links{gap:8px;}.hero-social-links i{font-size:clamp(25px,7vw,40px);}.hero-social-links a{font-size:inherit;padding:8px;border-radius:12px;}}
@media(prefers-reduced-motion:reduce){.text-slide-button,.text-slide-button::before,.button-arrow,.support-button,.support-button::before,.cookie-banner button,.cookie-banner button::before,.hero-social-links a,.text-slider-dot::after,.text-slider-pause,.impressum-close{transition:none;}}

/* Einzeilige, automatisch eingepasste Sliderüberschriften. */
.text-slide h2{white-space:nowrap;text-wrap:nowrap;width:100%;font-size:var(--slide-title-size,clamp(18px,4vw,66px));}
.text-slide .text-slide-subtitle{font-size:var(--slide-subtitle-size,20px);max-width:100%;line-height:1.45;}

.text-slides{grid-template-columns:minmax(0,1fr);}
.text-slide{min-width:0;}

/* Hauptnavigation: reine Textlinks mit Lichtlauf und animierter Unterstreichung. */
.headline-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;}
.headline-nav{display:flex;align-items:center;justify-content:center;gap:16px;white-space:nowrap;}
.headline-nav > span{font-size:12px;color:#71bbdf66;}
.headline-nav a{position:relative;display:inline-block;padding:9px 0;color:#d4e8f3;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:color .35s ease,transform .35s ease,text-shadow .35s ease;}
.headline-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:linear-gradient(90deg,#299bd7,#bcefff,#299bd7);box-shadow:0 0 10px #299bd780;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.headline-nav a:hover,.headline-nav a:focus-visible{color:#91ddff;transform:translateY(-2px);text-shadow:0 0 12px #299bd780;}
.headline-nav a:hover::after,.headline-nav a:focus-visible::after{transform:scaleX(1);}
@supports (background-clip:text){
.headline-nav a:hover{background-image:linear-gradient(110deg,#65caff 20%,#ffffff 48%,#65caff 70%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:navTextShine 1s ease both;}
}
@keyframes navTextShine{from{background-position:100% 0;}to{background-position:0 0;}}
@media(max-width:1400px){.headline-support .support-button span{display:none;}.headline-inner{gap:12px;}.headline-nav{gap:12px;}}
@media(max-width:700px){
.headline-inner{grid-template-columns:1fr 1fr;grid-template-rows:38px 47px;gap:0;}
.headline-support{grid-column:1;grid-row:1;}
.headline-live{grid-column:2;grid-row:1;}
.headline-nav{grid-column:1/-1;grid-row:2;gap:clamp(6px,2vw,12px);padding:0 12px;}
.headline-nav a{font-size:clamp(10px,2.5vw,12px);letter-spacing:.04em;}
}
@media(prefers-reduced-motion:reduce){.headline-nav a,.headline-nav a::after{transition:none;}.headline-nav a:hover{animation:none;}}

/* Größere Textnavigation: doppelte Schriftgröße auf allen Bildschirmbreiten. */
.headline-nav a{font-size:26px;}
.headline-nav > span{font-size:24px;}
@media(max-width:1100px){
.headline-inner{grid-template-columns:1fr 1fr;grid-template-rows:32px 53px;gap:0;}
.headline-support{grid-column:1;grid-row:1;}
.headline-live{grid-column:2;grid-row:1;}
.headline-nav{grid-column:1/-1;grid-row:2;gap:12px;}
}
@media(max-width:700px){
.headline-nav{justify-content:flex-start;overflow-x:auto;max-width:100%;padding:0 14px;gap:10px;scrollbar-width:thin;}
.headline-nav a{font-size:clamp(20px,5vw,24px);flex-shrink:0;}
.headline-nav > span{font-size:20px;flex-shrink:0;}
}

/* Weiße Textnavigation mit Themenicons und Button-verwandtem Lichtreflex. */
.headline-nav a{display:inline-flex;align-items:center;gap:9px;font-size:20.8px;color:#fff;background:none;-webkit-text-fill-color:currentColor;animation:none;text-shadow:none;overflow:hidden;}
.headline-nav a i{font-size:.85em;color:inherit;transition:transform .4s ease,color .4s ease;}
.headline-nav a::after{content:none;}
.headline-nav a::before{content:"";position:absolute;inset:-100% -50%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff38 50%,transparent 62%);transform:translateX(-100%) rotate(12deg);transition:transform .8s ease;}
.headline-nav a:hover,.headline-nav a:focus-visible{color:#fff;background:none;-webkit-text-fill-color:currentColor;animation:none;transform:translateY(-3px);text-shadow:0 0 16px #299bd780;}
.headline-nav a:hover::before,.headline-nav a:focus-visible::before{transform:translateX(100%) rotate(12deg);}
.headline-nav a:hover i,.headline-nav a:focus-visible i{color:#85d9ff;transform:translateY(-1px) rotate(-8deg);}
.headline-nav a:active{transform:translateY(0) scale(.98);}
@media(max-width:700px){.headline-nav a{font-size:clamp(16px,4vw,19.2px);gap:7px;}}
@media(prefers-reduced-motion:reduce){.headline-nav a::before,.headline-nav a i{transition:none;}}

/* Headline-Navigation: Glow-Slide nur auf den Buchstaben/Icons (Text-Clip), nicht auf der Link-Fläche. */
.headline-nav a{overflow:visible;transition:transform .35s ease,filter .35s ease;}
.headline-nav a::before{content:none;}
.headline-nav a span,
.headline-nav a i{
  background-image:linear-gradient(110deg,#fff 0%,#fff 40%,#7fd6ff 50%,#fff 60%,#fff 100%);
  background-size:300% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transition:background-position .8s ease,transform .4s ease;
}
.headline-nav a span{transition-delay:.08s,0s;}
.headline-nav a:hover span,
.headline-nav a:focus-visible span,
.headline-nav a:hover i,
.headline-nav a:focus-visible i{
  background-position:0 0;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.headline-nav a:hover,
.headline-nav a:focus-visible{
  text-shadow:none;
  filter:drop-shadow(0 0 8px #299bd780);
}
@media(prefers-reduced-motion:reduce){
  .headline-nav a span,.headline-nav a i{transition:none;}
}

/* Mehr Abstand zwischen den Navigationslinks; die Navigation bleibt zentriert. */
.headline-nav{gap:36px;justify-content:center;}
@media(max-width:1400px){.headline-nav{gap:28px;}}
@media(max-width:1100px){.headline-nav{gap:22px;}}
@media(max-width:700px){.headline-nav{gap:14px;justify-content:flex-start;}}

/* Textslider vertikal mittig im freien Bereich zwischen Headline (85px) und Social-Icons unten (~210px). */
@media(min-width:601px) and (min-height:651px){
  .text-slider{top:calc(50% - 62px);}
}

/* Slide-Typografie: Blinker. Headline Großbuchstaben, Light 400 (Größe dynamisch per JS); Subline ExtraLight 200 (Größe unverändert). */
.text-slide h2{
  font-family:"Blinker",Arial,sans-serif;
  font-weight:400;
  text-transform:uppercase;
}
.text-slide .text-slide-subtitle{
  font-family:"Blinker",Arial,sans-serif;
  font-weight:200;
}

/* Besucherzähler im Kilometerzähler-Stil: direkt unter der Headline, scrollt mit der Seite (nicht sticky). */
.visitor-counter{
  position:absolute;top:calc(85px + 10px);right:20px;z-index:22;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;
  color:#fff;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
}
.visitor-counter.is-ready{opacity:1;}
.visitor-counter-label{
  font:400 15px/1.3 "Blinker",Arial,sans-serif;letter-spacing:.03em;text-align:right;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.5);
}
.odometer{
  display:flex;align-items:flex-end;gap:2px;padding:5px 6px;border-radius:9px;
  background:linear-gradient(180deg,rgba(10,14,19,.6),rgba(26,33,42,.6) 50%,rgba(10,14,19,.6));
  border:1px solid #ffffff26;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 #ffffff1f;
}
.odometer-digit{
  position:relative;display:grid;place-items:center;
  width:21px;height:30px;border-radius:3px;
  font:700 19px/1 "Orbitron","Arial Black",Arial,sans-serif;color:#fff;
  background:linear-gradient(180deg,rgba(5,7,9,.6) 0%,rgba(35,43,53,.6) 50%,rgba(5,7,9,.6) 100%);
  box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 #ffffff14;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px #ffffff30;
}
.odometer-digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#00000090;pointer-events:none;}
.odometer-sep{
  width:6px;text-align:center;padding-bottom:3px;
  font:700 16px/1 "Orbitron","Arial Black",Arial,sans-serif;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
@media(max-width:700px){
  .visitor-counter{right:12px;flex-direction:column;align-items:flex-end;gap:5px;}
  .visitor-counter-label{font-size:13px;}
  .odometer-digit{width:17px;height:25px;font-size:15px;}
  .odometer-sep{width:5px;font-size:13px;}
}

/* Navigation in der Headline: Bruno Ace SC, alle Links klein geschrieben. */
.headline-nav a{
  font-family:"Bruno Ace SC",Arial,sans-serif;
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:.02em;
}

/* Navigation: Schrift 26px (Desktop) / 16px (Mobil); Icons minimal größer und mittig vor dem Text. */
.headline-nav a{
  font-size:26px;
  line-height:1;
  gap:10px;
  align-items:center;
  --nav-icon-shift:0px; /* Feinjustage: positiver Wert schiebt die Icons nach unten, negativer nach oben */
}
.headline-nav a span{line-height:1;display:block;}
.headline-nav a i{
  position:relative;top:var(--nav-icon-shift);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.2em;height:1em;line-height:1;
  font-size:1.1em;
  flex:none;
}
@media(max-width:700px){
  .headline-nav a{font-size:16px;gap:7px;}
}

/* Navigation-Icons etwas kleiner (ca. 3px): 21px Desktop, 15px Mobil. */
.headline-nav a i{font-size:21px;}
@media(max-width:700px){
  .headline-nav a i{font-size:15px;}
}

/* ZAHLEN-SEKTION: sechs Kennzahlen als Instrumente, leicht verdreht; beim Hovern drehen sie sich gerade und starten. */
html{scroll-behavior:smooth;}
.stats-section{
  position:relative;overflow:hidden;scroll-margin-top:84px;
  padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px);
  background:linear-gradient(180deg,#02070c 0%,#07131d 100%);
}
.stats-head{
  max-width:900px;margin:0 auto clamp(36px,5vw,64px);text-align:center;
  opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;
}
.stats-section.is-visible .stats-head{opacity:1;transform:none;}
.stats-subtitle{
  margin:16px auto 0;max-width:680px;text-wrap:balance;
  font:200 clamp(16px,1.6vw,22px)/1.5 "Blinker",Arial,sans-serif;color:#f0d3a0;text-shadow:0 2px 12px #000;
}

.stats-hint{margin:14px 0 0;font:400 13px/1 "Blinker",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#85d9ff;opacity:.85;}
.stats-hint .hint-touch{display:none;}
@media(hover:none),(pointer:coarse){.stats-hint .hint-mouse{display:none;}.stats-hint .hint-touch{display:inline;}}

/* Die allgemeine p-Regel (absolut positioniert) im Kopf der Sektion aufheben. */
.stats-head p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;}

/* Symmetrisches Raster: zwei Reihen à vier Karten, alle gerade und gleich hoch. */
.stats-grid{
  --face-h:170px;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.stat-slot{display:flex;min-width:0;}

/* Wendekarte: vorn nur das leere Instrument, hinten Titel, Instrument und Zahlenwert.
   Die Seiten werden per JS aus dem vorhandenen Karteninhalt erzeugt (.stat-flip > .stat-front + .stat-back). */
.stat-card{
  flex:1;min-width:0;display:grid;perspective:1100px;
  border-radius:16px;text-align:center;cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.stat-card.is-active{transform:translateY(-4px);}
.stat-card:focus-visible{outline:2px solid #fff;outline-offset:4px;}
.stat-flip{
  display:grid;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.45,.05,.25,1);
}
.stat-card.is-flipped .stat-flip{transform:rotateY(180deg);}
.stat-front,.stat-back{
  grid-area:1/1;min-width:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:16px;border:1px solid #299bd733;
  background:linear-gradient(135deg,rgba(18,52,74,.45),rgba(3,10,18,.55));
  box-shadow:0 12px 28px rgba(0,0,0,.442),0 0 18px rgba(0,0,0,.272),inset 0 1px 0 #ffffff12;
  padding:20px 12px 22px;
  transition:border-color .4s ease,box-shadow .4s ease;
}
/* Feste Zeilen: Titel oben, Instrument in gleich hoher Fläche, Zahlenwert unten auf einer Linie. */
.stat-back{
  transform:rotateY(180deg);
  display:grid;grid-template-rows:auto var(--face-h) auto;justify-items:center;align-items:center;gap:16px;
}
.stat-front{display:flex;align-items:center;justify-content:center;}
.stat-front .face{height:var(--face-h);filter:brightness(.85) saturate(.9);}
.stat-card.is-active .stat-front,.stat-card.is-active .stat-back{
  border-color:#5ac4f58c;
  box-shadow:0 18px 38px rgba(0,0,0,.5),0 0 24px #299bd733,inset 0 1px 0 #ffffff20;
}

.stat-label{
  margin:0;font:400 clamp(13px,1.2vw,16px)/1.2 "Blinker",Arial,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.stat-label::after{content:"";display:block;width:34px;height:2px;margin:12px auto 0;border-radius:2px;background:linear-gradient(90deg,#299bd7,#bcefff,#299bd7);box-shadow:0 0 10px #299bd780;}
.stat-value{display:flex;align-items:flex-end;justify-content:center;gap:10px;max-width:100%;}
.stat-odometer{
  --d-w:clamp(20px,1.9vw,28px);
  display:flex;align-items:flex-end;gap:3px;padding:6px 7px;border-radius:10px;max-width:100%;
  background:linear-gradient(180deg,rgba(10,14,19,.9),rgba(26,33,42,.9) 50%,rgba(10,14,19,.9));
  border:1px solid #ffffff26;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 #ffffff1f;
}
.stat-digit{
  position:relative;display:grid;place-items:center;
  width:var(--d-w);height:calc(var(--d-w) * 1.45);border-radius:4px;
  font:700 calc(var(--d-w) * .62)/1 "Orbitron","Arial Black",Arial,sans-serif;color:#fff;
  background:linear-gradient(180deg,rgba(5,7,9,.95) 0%,rgba(35,43,53,.95) 50%,rgba(5,7,9,.95) 100%);
  box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 #ffffff14;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px #ffffff30;
}
.stat-digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#00000090;pointer-events:none;}
.stat-sep{
  width:calc(var(--d-w) * .3);text-align:center;padding-bottom:calc(var(--d-w) * .12);
  font:700 calc(var(--d-w) * .5)/1 "Orbitron","Arial Black",Arial,sans-serif;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.stat-unit{
  padding-bottom:6px;font:400 clamp(14px,1.3vw,18px)/1 "Blinker",Arial,sans-serif;
  letter-spacing:.12em;color:#9fdcf7;text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;
}

.stat-value{flex-wrap:wrap;}
.face{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}

/* Rundinstrumente (Baujahr, Tacho, Hubraum, Kilometer) */
.gauge{display:block;width:auto;height:auto;max-width:100%;max-height:var(--face-h);aspect-ratio:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));}
.gauge-fuel{width:100%;max-height:none;aspect-ratio:200/118;}
.needle{filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));}

/* Kilometer-Ring mit Weltkugel */
.ring-wrap{position:relative;height:100%;aspect-ratio:1;max-width:100%;display:flex;align-items:center;justify-content:center;}
.ring-wrap .gauge{height:100%;}
.ring-icon{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:calc(var(--face-h) * .26);color:#9fdcf7;text-shadow:0 0 14px #299bd780,0 2px 6px #000;}

/* Zylinder: sechs Zylinder in Reihe, Kolben fahren beim Hochzählen nacheinander hoch. */
.cyl-meter{width:100%;max-width:230px;}
.cyl-block{
  display:flex;justify-content:space-between;gap:5px;padding:10px 10px 8px;border-radius:10px;
  background:#050a0f;border:1px solid #ffffff22;box-shadow:inset 0 2px 8px #000,0 6px 14px rgba(0,0,0,.45);
}
.cyl{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.cyl .piston{
  position:relative;display:block;width:100%;height:74px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(90deg,#0a141c,#16283a 50%,#0a141c);border:1px solid #ffffff1c;overflow:hidden;
}
.cyl .piston::after{
  content:"";position:absolute;left:3px;right:3px;bottom:3px;height:26px;border-radius:3px;
  background:linear-gradient(#3a4c5c,#1d2a36);transform:translateY(0);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.cyl b{font:700 11px/1 "Orbitron",Arial,sans-serif;color:#9fdcf7;}
.cyl.is-lit .piston{border-color:#5ac4f58c;box-shadow:inset 0 0 12px #299bd755;}
.cyl.is-lit .piston::after{transform:translateY(-38px);background:linear-gradient(#bcefff,#299bd7);box-shadow:0 0 10px #299bd7aa;}

/* Tankanzeige */
.fuel-wrap{position:relative;width:min(100%,220px);}
.fuel-icon{position:absolute;left:50%;top:60%;transform:translateX(-50%);font-size:clamp(16px,1.6vw,22px);color:#9fdcf7;text-shadow:0 1px 6px #000;}

/* LED-Leistungsanzeige (Leistung) */
.led-meter{width:100%;max-width:240px;}
.led-bar{
  display:flex;align-items:flex-end;gap:3px;height:62px;padding:8px;border-radius:10px;
  background:#050a0f;border:1px solid #ffffff22;box-shadow:inset 0 2px 8px #000,0 6px 14px rgba(0,0,0,.45);
}
.led{flex:1;border-radius:2px;background:#10202c;height:var(--h);transition:background .12s ease,box-shadow .12s ease;}
.led:nth-child(-n+15).is-lit{background:linear-gradient(#bcefff,#299bd7);box-shadow:0 0 8px #299bd7aa;}
.led:nth-child(n+16):nth-child(-n+21).is-lit{background:linear-gradient(#ffe7a8,#f0a93c);box-shadow:0 0 8px #f0a93caa;}
.led:nth-child(n+22).is-lit{background:linear-gradient(#ffb0a6,#ff4b3a);box-shadow:0 0 8px #ff4b3aaa;}
.led-scale{display:flex;justify-content:space-between;margin-top:8px;padding:0 4px;font:400 13px/1 "Blinker",Arial,sans-serif;letter-spacing:.06em;color:#9fdcf7;}

/* Maßband (Gesamtlänge) */
.tape{width:100%;max-width:240px;padding:0 6px;}
.tape-track{
  position:relative;height:42px;border-radius:6px;overflow:visible;
  background:#07121b;border:1px solid #ffffff26;box-shadow:inset 0 2px 8px #000,0 6px 14px rgba(0,0,0,.45);
}
.tape-fill{
  position:absolute;inset:0;border-radius:5px;
  background-color:#e9cf8f;
  background-image:
    repeating-linear-gradient(90deg,#2b2111 0 2px,transparent 2px calc(100% / 14)),
    repeating-linear-gradient(90deg,#2b2111 0 1px,transparent 1px calc(100% / 28)),
    linear-gradient(180deg,#f6e3ae,#d8b86c);
  background-size:100% 70%,100% 42%,100% 100%;
  background-repeat:no-repeat;
  clip-path:inset(0 calc(100% - var(--reveal,0%)) 0 0);
}
.tape-end{
  position:absolute;top:-5px;bottom:-5px;width:6px;left:var(--reveal,0%);transform:translateX(-50%);
  border-radius:3px;background:linear-gradient(90deg,#bcefff,#5ac4f5);box-shadow:0 0 10px #299bd7;
}
.tape-labels{position:relative;height:18px;margin-top:10px;}
.tape-labels span{position:absolute;top:0;transform:translateX(-50%);font:400 13px/1 "Blinker",Arial,sans-serif;letter-spacing:.06em;color:#9fdcf7;}

/* Einblenden: jede Karte mit eigener Animation, bei jedem erneuten Aufruf der Sektion. */
.stats-section:not(.is-visible) .stat-card{opacity:0;}
.stats-section.is-visible .stat-card{
  opacity:1;animation-duration:1s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;
}
.stats-section.is-visible .stat-card{animation-name:statIn;}
.stats-section.is-visible .stat-slot:nth-child(2) .stat-card{animation-delay:.08s;}
.stats-section.is-visible .stat-slot:nth-child(3) .stat-card{animation-delay:.16s;}
.stats-section.is-visible .stat-slot:nth-child(4) .stat-card{animation-delay:.24s;}
.stats-section.is-visible .stat-slot:nth-child(5) .stat-card{animation-delay:.32s;}
.stats-section.is-visible .stat-slot:nth-child(6) .stat-card{animation-delay:.4s;}
.stats-section.is-visible .stat-slot:nth-child(7) .stat-card{animation-delay:.48s;}
.stats-section.is-visible .stat-slot:nth-child(8) .stat-card{animation-delay:.56s;}

@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;}
  .stat-odometer{--d-w:clamp(20px,3.6vw,28px);}
}
@media(max-width:520px){
  .stats-grid{--face-h:130px;gap:12px;}
  .stat-front,.stat-back{padding:16px 8px 18px;}
  .stat-back{gap:12px;}
  .stat-label{letter-spacing:.1em;font-size:12px;}
  .stat-odometer{--d-w:clamp(15px,4.4vw,22px);padding:5px;gap:2px;}
  .stat-unit{font-size:13px;}
  .cyl .piston{height:56px;}
  .cyl.is-lit .piston::after{transform:translateY(-26px);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .stats-head{opacity:1;transform:none;transition:none;}
  .stats-section .stat-card{opacity:1 !important;animation:none !important;transform:none;filter:none;transition:none;}
  .stat-flip{transition:none;}
  .led,.cyl .piston::after{transition:none;}
}

/* KONTROLLLEUCHTEN: Ausstattung als Armaturenbrett-Leiste unter den Zahlen-Karten. */
.telltales{position:relative;max-width:1180px;margin:clamp(40px,5vw,64px) auto 0;transition:opacity .8s ease,transform .8s ease;}
.stats-section:not(.is-visible) .telltales{opacity:0;transform:translateY(24px);}
.telltales p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;}
.telltales-head{text-align:center;margin-bottom:18px;}
.telltales-title{
  margin:0;font:400 clamp(20px,2.4vw,30px)/1.1 "Blinker",Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#299bd7;text-shadow:0 3px 24px #000;
}
.telltales-panel{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  padding:14px;border-radius:16px;
  background:linear-gradient(180deg,#050a0f,#08131c);border:1px solid #299bd733;
  box-shadow:inset 0 2px 14px #000,0 12px 28px rgba(0,0,0,.44);
}
/* Jede Gruppe ist ein eigener Instrumentenblock; die Breite richtet sich nach der Zahl der Leuchten (--n). */
.tell-group{
  flex:1 1 calc(var(--n,4) * 72px + 28px);min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 12px 10px;
  border-radius:12px;border:1px solid #ffffff10;background:#ffffff05;
}
.tell-group:not(:has(.tell)){display:none;}
.tell-group-title{margin:0;font:400 12px/1 "Blinker",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--tell-color,#9fdcf7);opacity:.8;}
.tell-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;}
.tell{
  width:72px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 2px;
  background:none;border:0;border-radius:10px;color:#fff;cursor:pointer;
}
.tell-lamp{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 50% 35%,#16222c,#070d12);border:1px solid #ffffff1a;
  box-shadow:inset 0 2px 6px #000;color:#22303b;font-size:18px;
  transition:color .3s ease,box-shadow .3s ease,border-color .3s ease,transform .3s ease,text-shadow .3s ease;
}
.tell-name{max-width:100%;hyphens:manual;font:400 12px/1.15 "Blinker",Arial,sans-serif;letter-spacing:.01em;color:#ffffff70;transition:color .3s ease;}
.tell.is-lit .tell-lamp{
  color:var(--tell-color,#61caff);border-color:#ffffff30;text-shadow:0 0 10px currentColor;
  box-shadow:inset 0 2px 6px #000,0 0 16px -3px currentColor;
  animation:tellFlash .7s ease-out;
}
.tell.is-lit .tell-name{color:#fff;}
/* Kontrollleuchten-Symbole aus dem SVG-Sprite */
.tell-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.tell-ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:filter .3s ease;}
.tell.is-lit .tell-ico{filter:drop-shadow(0 0 3px currentColor);}
@keyframes tellFlash{0%{filter:brightness(2.6);transform:scale(1.14);}100%{filter:none;transform:none;}}
.tell:hover .tell-lamp,.tell[aria-expanded="true"] .tell-lamp{transform:translateY(-2px);}
.tell[aria-expanded="true"] .tell-lamp{box-shadow:inset 0 2px 6px #000,0 0 16px -3px currentColor,0 0 0 2px #ffffff40;}

/* Infoblase über (oder unter) der angetippten Leuchte */
.tell-bubble{
  position:absolute;z-index:5;width:min(270px,calc(100% - 16px));padding:12px 14px;border-radius:12px;
  background:#0b1823;border:1px solid #5ac4f566;box-shadow:0 14px 40px #000a;
  text-align:left;font:400 15px/1.45 "Blinker",Arial,sans-serif;color:#e6f0f6;pointer-events:none;
}
.tell-bubble strong{display:block;margin-bottom:4px;font:400 13px/1.2 "Blinker",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#85d9ff;}
.tell-bubble::after{
  content:"";position:absolute;left:var(--arrow-x,50%);bottom:-6px;width:10px;height:10px;background:#0b1823;
  border-right:1px solid #5ac4f566;border-bottom:1px solid #5ac4f566;transform:translateX(-50%) rotate(45deg);
}
.tell-bubble.is-below::after{bottom:auto;top:-6px;transform:translateX(-50%) rotate(225deg);}

@media(max-width:700px){
  .telltales-panel{padding:10px;gap:10px;}
  .tell-group{flex-basis:100%;padding:12px 6px 8px;}
  .tell{width:76px;}
  .tell-lamp{width:42px;height:42px;font-size:17px;}
  .tell-ico{width:24px;height:24px;}
}
@media(prefers-reduced-motion:reduce){
  .telltales,.tell-lamp,.tell-name{transition:none;}
  .stats-section:not(.is-visible) .telltales{transform:none;}
  .tell.is-lit .tell-lamp{animation:none;}
}

/* Aufklappbare technische Daten unter den Kontrollleuchten */
.techdata{margin-top:14px;border-radius:14px;border:1px solid #299bd733;background:linear-gradient(135deg,rgba(18,52,74,.35),rgba(3,10,18,.5));}
.techdata-toggle{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;
  font:400 14px/1 "Blinker",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#85d9ff;border-radius:14px;
}
.techdata-toggle::-webkit-details-marker{display:none;}
.techdata-toggle i{font-size:12px;transition:transform .3s ease;}
.techdata[open] .techdata-toggle i{transform:rotate(180deg);}
.techdata-toggle:hover{color:#fff;}
.techdata-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;padding:4px 14px 6px;}
.techdata-group{padding:14px 16px;border-radius:12px;border:1px solid #ffffff10;background:#ffffff05;}
.techdata-group h4{margin:0 0 10px;font:400 12px/1 "Blinker",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#9fdcf7;}
.techdata-group dl{margin:0;}
.techdata-group dl div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed #ffffff14;}
.techdata-group dl div:last-child{border-bottom:0;}
.techdata-group dt{font:400 14px/1.3 "Blinker",Arial,sans-serif;color:#9fdcf7;}
.techdata-group dd{margin:0;text-align:right;font:400 14px/1.3 "Blinker",Arial,sans-serif;color:#fff;}
.techdata-note{margin:6px 14px 14px;font:200 13px/1.4 "Blinker",Arial,sans-serif;color:#ffffff80;text-align:center;}
@media(prefers-reduced-motion:reduce){.techdata-toggle i,.tell-ico{transition:none;}}

/* ÜBERGANG Landing → Zahlen: Video blendet unten aus, darunter eine Straße, über die Lilly beim Scrollen fährt. */
.landing-slider::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(2,7,12,0) 0%,rgba(2,7,12,.55) 55%,#02070c 100%);
}
.road-transition{position:relative;background:#02070c;padding:10px 0 34px;overflow:hidden;text-align:center;}
.road{position:relative;height:84px;}
.road-surface{
  position:absolute;left:0;right:0;bottom:4px;height:22px;
  background:linear-gradient(#0b141c,#060b10);
  border-top:1px solid #299bd7b0;border-bottom:1px solid #299bd740;
  box-shadow:0 -8px 26px -12px #299bd7,inset 0 1px 0 #ffffff10;
}
/* Mittelstreifen */
.road-surface::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#ffffff45 0 30px,transparent 30px 62px);
}
/* Lichtstreif, der über die Fahrbahnkante läuft */
.road-surface::before{
  content:"";position:absolute;top:-1px;left:0;width:28%;height:2px;
  background:linear-gradient(90deg,transparent,#bcefff,transparent);
  filter:drop-shadow(0 0 6px #299bd7);animation:roadSweep 7s ease-in-out infinite;
}
@keyframes roadSweep{0%{transform:translateX(-110%);}60%,100%{transform:translateX(420%);}}
.road-bus{
  position:absolute;left:0;bottom:6px;width:clamp(150px,16vw,230px);height:auto;overflow:visible;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.7));will-change:transform;transform:translateX(-200px);
}
.bus-wheel{transform-box:fill-box;transform-origin:center;}
/* Fahrzielanzeige im Punktmatrix-Stil */
.road-sign{
  position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 18px;border-radius:6px;
  background:#07090b;border:1px solid #ffffff1c;box-shadow:inset 0 0 12px #000,0 8px 20px rgba(0,0,0,.5);
  font:700 12px/1 "Orbitron","Arial Black",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:#ffb347;text-shadow:0 0 6px #ff9d2a,0 0 14px #ff9d2a80;transition:color .3s ease,box-shadow .3s ease;
}
.road-sign::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle,transparent 45%,#07090bcc 46%) 0 0/3px 3px;
}
.road-sign:hover{color:#ffd08a;box-shadow:inset 0 0 12px #000,0 8px 24px rgba(0,0,0,.6),0 0 18px #ff9d2a40;}
.road-sign-dot{width:7px;height:7px;border-radius:50%;background:#ffb347;box-shadow:0 0 8px #ff9d2a;animation:signBlink 1.6s steps(1) infinite;}
@keyframes signBlink{50%{opacity:.25;}}
@media(max-width:600px){
  .road-sign{font-size:10px;letter-spacing:.1em;padding:8px 12px;}
}
@media(prefers-reduced-motion:reduce){
  .road-surface::before,.road-sign-dot{animation:none;}
  .road-surface::before{display:none;}
}

/* Ausstattungs-Icons: im Ruhezustand auf 20 % abgeschwächt; einmal überfahren, fokussiert oder angetippt bleiben sie voll sichtbar (.is-seen). */
.tell .tell-lamp{
  opacity:.2;
  transition:opacity .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease,transform .3s ease,text-shadow .3s ease;
}
.tell:hover .tell-lamp,.tell:focus-visible .tell-lamp,.tell[aria-expanded="true"] .tell-lamp,.tell.is-seen .tell-lamp{opacity:1;}
@media(prefers-reduced-motion:reduce){.tell .tell-lamp{transition:none;}}

/* HEADER BEIM SCROLLEN: ganz oben transparenter Hintergrund (mit Linie und Schatten), sobald gescrollt wird eine helle, volle Fläche mit dunkler Schrift.
   Die Klasse .is-scrolled setzt main.js. */
.top-headline{
  background:transparent;   /* blaue 1px-Linie und Schatten bleiben aus der Grundregel erhalten */
  transition:background-color .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.top-headline.is-scrolled{
  background-color:#eef5fa;border-bottom-color:#299bd7;
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 1px 0 #ffffff inset;
}
/* Navigation: Verlauf für den Lichtlauf von Weiß auf dunkles Navy umstellen, Hover-Licht bleibt blau. */
.headline-nav a span,.headline-nav a i{transition:background-position .8s ease,transform .4s ease,background-image .4s ease;}
.top-headline.is-scrolled .headline-nav a span,
.top-headline.is-scrolled .headline-nav a i{
  background-image:linear-gradient(110deg,#0b2233 0%,#0b2233 40%,#299bd7 50%,#0b2233 60%,#0b2233 100%);
}
.top-headline.is-scrolled .headline-nav a:hover,
.top-headline.is-scrolled .headline-nav a:focus-visible{filter:drop-shadow(0 0 6px #299bd755);}
/* Live-Status */
.headline-live a{transition:color .4s ease;}
.top-headline.is-scrolled .headline-live,
.top-headline.is-scrolled .headline-live a{color:#0b2233;}
.top-headline.is-scrolled .twitch-status.offline{color:#d32f2f;text-shadow:none;}
.top-headline.is-scrolled .twitch-status.online{color:#12924a;text-shadow:0 0 8px rgba(18,146,74,.25);}
.top-headline.is-scrolled .twitch-status.checking{color:#0b2233;text-shadow:none;}
@media(prefers-reduced-motion:reduce){.top-headline,.headline-live a{transition:none;}}

/* SEITENNAVIGATION: Header-Icons senkrecht am linken Rand, mittig im Fensterbereich unter dem Header.
   Icons 64px; auf niedrigen Fenstern kleiner, damit alle fünf samt Abständen unter den Header passen. */
.side-nav{
  --side-ico:min(64px,calc((100vh - 85px - 40px - 120px - 40px - 48px) / 5));  /* Header, Lücken, Innenränder, Luft, Pfeil */
  position:fixed;left:14px;top:calc(50% + 42px);transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:10px;
}
.side-nav a{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;
  width:calc(var(--side-ico) * 1.25 + 24px);height:calc(var(--side-ico) + 24px);
  border:1px solid transparent;border-radius:16px;text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
/* Glossy-Fläche wie bei den Slider-Buttons, im Ruhezustand ausgeblendet */
.side-nav a::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;opacity:0;
  background:linear-gradient(135deg,#185272,#0b263b);box-shadow:inset 0 1px 0 #ffffff30;
  transition:opacity .35s ease;
}
/* Lichtreflex, der beim Hover durchläuft */
.side-nav a::before{
  content:"";position:absolute;inset:-100% -50%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,#ffffff38 50%,transparent 62%);
  transform:translateX(-100%) rotate(12deg);transition:transform .8s ease;
}
/* Ein durchgehender Farbverlauf von oben nach unten über alle Icons: jedes Icon zeigt sein Fünftel. */
.side-nav i{
  font-size:var(--side-ico);line-height:1;
  background-image:linear-gradient(to bottom,#bcefff 0%,#61caff 30%,#299bd7 60%,#f0d3a0 100%);
  background-size:100% 500%;background-position:0 calc(var(--i,0) * 25%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .4s ease;
}
.side-nav a:hover,.side-nav a:focus-visible{
  border-color:#7dd9ff;transform:translateY(-3px);
  box-shadow:0 10px 30px #0005,0 0 22px #299bd72b;
}
.side-nav a:hover::after,.side-nav a:focus-visible::after{opacity:1;}
.side-nav a:hover::before,.side-nav a:focus-visible::before{transform:translateX(100%) rotate(12deg);}
.side-nav a:hover i,.side-nav a:focus-visible i{transform:scale(.92);}
.side-nav a:active{transform:translateY(0) scale(.98);}
@media(max-width:1000px),(max-height:520px){.side-nav{display:none;}}
@media(prefers-reduced-motion:reduce){.side-nav a,.side-nav a::after,.side-nav a::before,.side-nav i{transition:none;}}

/* Pfeil zum Aus- und Einklappen der Seitennavigation; bleibt sichtbar, die Icons fahren nach links hinaus. */
.side-nav{gap:12px;}
.side-nav-toggle{
  align-self:center;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  border:1px solid #67cfff55;border-radius:10px;background:#102d40;color:#c6edff;font-size:15px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.side-nav-toggle:hover{background:#215879;transform:scale(1.08);box-shadow:0 0 18px #299bd740,0 6px 16px rgba(0,0,0,.45);}
.side-nav-toggle i{transition:transform .4s ease;}
.side-nav.is-collapsed .side-nav-toggle i{transform:rotate(180deg);}
.side-nav-items{
  display:flex;flex-direction:column;gap:10px;
  transition:transform .5s cubic-bezier(.45,.05,.25,1),opacity .35s ease,visibility 0s linear 0s;
}
.side-nav.is-collapsed .side-nav-items{
  transform:translateX(calc(-100% - 40px));opacity:0;visibility:hidden;
  transition:transform .5s cubic-bezier(.45,.05,.25,1),opacity .35s ease .1s,visibility 0s linear .5s;
}
/* Beim Laden ohne Animation in den gemerkten Zustand springen */
.side-nav.is-instant .side-nav-items,.side-nav.is-instant .side-nav-toggle i{transition:none;}
@media(prefers-reduced-motion:reduce){.side-nav-toggle,.side-nav-toggle i,.side-nav-items{transition:none;}}

/* SEITENNAVIGATION ALS DOCK: Icons 24px, das überfahrene wächst auf 48px (mit Glossy-Hover), die direkten Nachbarn auf 32px.
   Die Leiste ist oben verankert (auf die Mitte der Grundgröße berechnet), damit sie beim Vergrößern nicht springt.
   Grundhöhe: Pfeil 36 + Lücke 12 + 5 × (24 + 16) + 4 × 6 = 272px → halbe Höhe 136px. */
.side-nav{top:calc(50% + 42px - 136px);transform:none;align-items:flex-start;gap:12px;}
.side-nav-toggle{align-self:flex-start;margin-left:5px;}
.side-nav-items{gap:6px;align-items:flex-start;}
.side-nav a{
  --size:24px;
  width:calc(var(--size) * 1.25 + 16px);height:calc(var(--size) + 16px);border-radius:12px;
  transition:width .22s ease,height .22s ease,transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.side-nav a i{font-size:var(--size);transition:font-size .22s ease;}
.side-nav a:hover,.side-nav a:focus-visible{--size:48px;}
.side-nav a:hover + a,.side-nav a:focus-visible + a,
.side-nav a:has(+ a:hover),.side-nav a:has(+ a:focus-visible){--size:32px;}
.side-nav a:hover i,.side-nav a:focus-visible i{transform:none;}
@media(prefers-reduced-motion:reduce){.side-nav a,.side-nav a i{transition:none;}}

/* DOCK: Pfeil als normales Dock-Element (gleiche Größe, Abstände, Lupe und Glossy-Hover),
   alle Icons einheitlich in Chrom-Silber statt Farbverlauf.
   Grundhöhe: 6 × (24 + 16) + 5 × 6 = 270px → halbe Höhe 135px. */
.side-nav{top:calc(50% + 42px - 135px);gap:6px;}
.side-nav i{
  background:none;color:#c8d4dd;-webkit-text-fill-color:currentColor;
  transition:font-size .22s ease,color .3s ease;
}
.side-nav a:hover i,.side-nav a:focus-visible i,
.side-nav-toggle:hover i,.side-nav-toggle:focus-visible i{color:#eef3f7;}
.side-nav-toggle{
  --size:24px;
  position:relative;isolation:isolate;overflow:hidden;
  align-self:flex-start;margin-left:0;
  width:calc(var(--size) * 1.25 + 16px);height:calc(var(--size) + 16px);
  border:1px solid transparent;border-radius:12px;background:transparent;box-shadow:none;
  font-size:calc(var(--size) * .8);
  transition:width .22s ease,height .22s ease,font-size .22s ease,transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.side-nav-toggle i{font-size:inherit;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .4s ease,color .3s ease;}
.side-nav-toggle::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;opacity:0;
  background:linear-gradient(135deg,#185272,#0b263b);box-shadow:inset 0 1px 0 #ffffff30;transition:opacity .35s ease;
}
.side-nav-toggle::before{
  content:"";position:absolute;inset:-100% -50%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,#ffffff38 50%,transparent 62%);
  transform:translateX(-100%) rotate(12deg);transition:transform .8s ease;
}
.side-nav-toggle:hover,.side-nav-toggle:focus-visible{
  --size:48px;background:transparent;border-color:#7dd9ff;transform:translateY(-3px);
  box-shadow:0 10px 30px #0005,0 0 22px #299bd72b;
}
.side-nav-toggle:hover::after,.side-nav-toggle:focus-visible::after{opacity:1;}
.side-nav-toggle:hover::before,.side-nav-toggle:focus-visible::before{transform:translateX(100%) rotate(12deg);}
/* Lupe zwischen Pfeil und Home */
.side-nav-toggle:hover + .side-nav-items a:first-child,
.side-nav-toggle:focus-visible + .side-nav-items a:first-child,
.side-nav:has(.side-nav-items a:first-child:hover) .side-nav-toggle,
.side-nav:has(.side-nav-items a:first-child:focus-visible) .side-nav-toggle{--size:32px;}
@media(prefers-reduced-motion:reduce){.side-nav-toggle,.side-nav-toggle::after,.side-nav-toggle::before{transition:none;}}

/* Dock-Namensschild rechts neben dem Icon (Position per main.js) */
.side-nav-tip{
  position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;
  padding:8px 13px;border-radius:9px;
  background:#0b1823;border:1px solid #5ac4f566;box-shadow:0 10px 26px #000a;
  font:400 15px/1 "Bruno Ace SC",Arial,sans-serif;text-transform:lowercase;letter-spacing:.02em;color:#eef3f7;
  opacity:0;transition:opacity .18s ease;
}
.side-nav-tip.is-visible{opacity:1;}
.side-nav-tip::before{
  content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;background:#0b1823;
  border-left:1px solid #5ac4f566;border-bottom:1px solid #5ac4f566;transform:translateY(-50%) rotate(45deg);
}
@media(prefers-reduced-motion:reduce){.side-nav-tip{transition:none;}}

/* Pfeil nach unten am Ende des Bus-Bereichs, im Stil der Slider-Buttons, mit Hinweisschild beim Draufzeigen. */
.section-next{position:relative;display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px);}
.text-slide-button.section-next-btn{
  width:56px;height:56px;min-height:0;padding:0;gap:0;border-radius:14px;font-size:22px;
}
.section-next-btn i{transition:transform .35s ease;}
.section-next-btn:hover i,.section-next-btn:focus-visible i{transform:translateY(3px);}
.section-next-tip{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px);
  pointer-events:none;white-space:nowrap;padding:8px 13px;border-radius:9px;
  background:#0b1823;border:1px solid #5ac4f566;box-shadow:0 10px 26px #000a;
  font:400 15px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.02em;color:#eef3f7;
  opacity:0;transition:opacity .2s ease,transform .2s ease;
}
.section-next-tip::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#0b1823;
  border-right:1px solid #5ac4f566;border-bottom:1px solid #5ac4f566;transform:translateX(-50%) rotate(45deg);
}
.section-next:hover .section-next-tip,.section-next:focus-within .section-next-tip{opacity:1;transform:translate(-50%,0);}
@media(prefers-reduced-motion:reduce){.section-next-tip,.section-next-btn i{transition:none;}}

/* AUSBAU-SEKTION: Fortschrittsbalken je Schwerpunkt, jeder in eigener Farbe; füllen sich beim Erreichen der Sektion. */
.build-section{
  position:relative;scroll-margin-top:84px;
  padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px);
  background:linear-gradient(180deg,#07131d 0%,#02070c 100%);
}
.build-section.is-visible .build-head{opacity:1;transform:none;}
.build-groups{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:28px;}
.build-group{
  padding:22px clamp(16px,3vw,32px) 24px;border-radius:16px;border:1px solid #299bd733;
  background:linear-gradient(135deg,rgba(18,52,74,.45),rgba(3,10,18,.55));
  box-shadow:0 12px 28px rgba(0,0,0,.442),0 0 18px rgba(0,0,0,.272),inset 0 1px 0 #ffffff12;
}
.build-group-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px;
  font:400 clamp(16px,1.6vw,20px)/1.25 "Blinker",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.build-group-tag{
  padding:5px 10px;border-radius:6px;border:1px solid #5ac4f566;background:#102d40;
  font:400 11px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.06em;text-transform:lowercase;color:#85d9ff;
}
.build-bars{display:flex;flex-direction:column;gap:16px;}
.build-bar{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 58px;align-items:center;gap:16px;}
.build-bar-label{font:400 16px/1.3 "Blinker",Arial,sans-serif;color:#e6f0f6;}
.build-bar-track{
  position:relative;height:14px;border-radius:8px;overflow:hidden;
  background:#050a0f;border:1px solid #ffffff1a;box-shadow:inset 0 2px 6px #000;
}
.build-bar-fill{
  position:absolute;inset:0 auto 0 0;width:var(--fill,0%);border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bar-color) 55%,#000),var(--bar-color));
  box-shadow:0 0 12px var(--bar-color);
}
/* Lichtreflex, der über den gefüllten Teil läuft */
.build-bar-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%) no-repeat;
  background-size:40% 100%;animation:barSheen 3.2s ease-in-out infinite;
}
@keyframes barSheen{0%{background-position:-60% 0;}60%,100%{background-position:160% 0;}}
.build-bar-value{
  justify-self:end;font:700 15px/1 "Orbitron","Arial Black",Arial,sans-serif;color:var(--bar-color);
  text-shadow:0 0 8px color-mix(in srgb,var(--bar-color) 60%,transparent);
}
.build-more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px);}
@media(max-width:600px){
  .build-bar{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;}
  .build-bar-track{grid-column:1/-1;grid-row:2;}
}
@media(prefers-reduced-motion:reduce){.build-bar-fill::after{animation:none;display:none;}}

/* VORHER/NACHHER-VERGLEICH (vorbereitet): Schieberegler über zwei gleich großen Fotos. */
.compare{max-width:900px;margin:28px auto 0;}
.compare-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid #299bd733;box-shadow:0 12px 28px rgba(0,0,0,.45);}
.compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.compare-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-50%);background:#bcefff;box-shadow:0 0 10px #299bd7;
}
.compare-handle i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;background:#102d40;border:1px solid #67cfff88;color:#c6edff;font-size:16px;
}
.compare-tag{position:absolute;top:12px;padding:5px 10px;border-radius:6px;background:#0b1823cc;font:400 12px/1 "Bruno Ace SC",Arial,sans-serif;color:#eef3f7;text-transform:lowercase;}
.compare-tag-before{left:12px;}
.compare-tag-after{right:12px;}
.compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}

/* SEKTOR-MAGNET: Die Seite rastet weich am Anfang der Sektionen ein, sobald man in deren Nähe aufhört zu scrollen.
   "proximity" lässt freies Lesen innerhalb hoher Sektionen zu; scroll-padding berücksichtigt den festen Header. */
html{scroll-snap-type:y proximity;scroll-padding-top:85px;}
.landing-slider{scroll-snap-align:start;scroll-margin-top:-85px;}   /* Startseite liegt unter dem Header */
.stats-section,.build-section{scroll-snap-align:start;scroll-margin-top:0;}

/* AUSBAU HELL: deutlich abgesetztes, helles Farbschema */
.build-section{background:linear-gradient(180deg,#eef5fa 0%,#dde9f1 100%);color:#0b2233;}
.build-section .stats-subtitle{color:#3b5568;text-shadow:none;}
.build-group{background:#ffffff;border:1px solid #c9dbe6;box-shadow:0 14px 34px rgba(11,34,51,.12),inset 0 1px 0 #ffffff;}
.build-group-title{color:#0b2233;}
.build-group-tag{background:#e3f1fa;border-color:#9fd2ee;color:#1d6f9c;}
.build-bar-label{color:#0b2233;}
.build-bar-track{background:#e6eef3;border-color:#cfdde6;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);}
.build-bar-fill{box-shadow:0 0 10px color-mix(in srgb,var(--bar-color) 60%,transparent);}
.build-bar-value{color:color-mix(in srgb,var(--bar-color) 65%,#0b2233);text-shadow:none;}
.build-section .compare-frame{border-color:#c9dbe6;box-shadow:0 14px 34px rgba(11,34,51,.15);}

/* AUSBAU-BALKEN: dicker und länger; die Prozentzahl steht in einem Kreis, der auf dem Balken mitwandert. */
.build-groups{max-width:1100px;}
.build-bars{gap:20px;}
.build-bar{grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:22px;}
.build-bar-meter{position:relative;height:48px;display:flex;align-items:center;}
.build-bar-track{width:100%;height:24px;border-radius:12px;}
.build-bar-knob{
  position:absolute;top:50%;left:clamp(24px,var(--fill,0%),calc(100% - 24px));transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#ffffff;border:3px solid var(--bar-color);
  box-shadow:0 4px 12px rgba(11,34,51,.25),0 0 12px color-mix(in srgb,var(--bar-color) 55%,transparent);
}
.build-bar-knob .build-bar-value{justify-self:center;font:700 12px/1 "Orbitron","Arial Black",Arial,sans-serif;letter-spacing:-.02em;}
@media(max-width:600px){
  .build-bar{grid-template-columns:minmax(0,1fr);gap:6px;}
  .build-bar-track{grid-column:auto;grid-row:auto;}
  .build-bar-knob{width:42px;height:42px;left:clamp(21px,var(--fill,0%),calc(100% - 21px));}
  .build-bar-knob .build-bar-value{font-size:11px;}
}

/* AUSBAU-BALKEN MIT BESCHREIBUNG: dickere Balken, Beschreibung im Balken in einem dunklen Ton der Balkenfarbe.
   Niedrige Werte: Text beginnt rechts vom Kreis. Hohe Werte (.is-high): Text endet vor dem Kreis. */
.build-bar-meter{height:auto;min-height:48px;}
.build-bar-track{height:auto;min-height:40px;border-radius:20px;display:flex;align-items:center;}
.build-bar-desc{
  position:relative;z-index:1;width:100%;
  padding:9px 16px 9px calc(max(48px, var(--target,0%) + 24px) + 12px);
  font:400 14px/1.35 "Blinker",Arial,sans-serif;letter-spacing:.01em;
  color:color-mix(in srgb,var(--bar-color) 35%,#06131c);
}
.build-bar.is-high .build-bar-desc{padding:9px calc(100% - var(--target,0%) + 24px + 12px) 9px 18px;}
.build-bar-knob{z-index:2;}
@media(max-width:600px){
  .build-bar-desc{font-size:13px;}
}

/* Fließtext unter der Subline im Ausbau-Bereich */
.build-intro{
  max-width:760px;margin:18px auto 0;text-align:center;
  font:400 clamp(15px,1.3vw,17px)/1.65 "Blinker",Arial,sans-serif;color:#2f4658;
}

/* SHEET-TRENNUNG: Die Sektion liegt wie eine Karte mit runden oberen Ecken über der vorherigen,
   mit Leuchtkante und Etikett (Icon + Name). Wiederverwendbar: Klasse .sheet-section + <span class="sheet-tab">. */
.sheet-section{
  position:relative;z-index:1;margin-top:-56px;
  border-radius:44px 44px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.55),0 -2px 0 rgba(41,155,215,.35);
  scroll-margin-top:34px;                 /* Etikett bleibt beim Einrasten unter dem Header sichtbar */
}
/* Leuchtlinie entlang der runden Oberkante, an den Ecken weich auslaufend */
.sheet-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:44px;border-radius:inherit;pointer-events:none;
  border-top:2px solid #61caff;
  filter:drop-shadow(0 0 6px #299bd7) drop-shadow(0 0 16px #299bd780);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.sheet-tab{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;
  background:#0b1823;border:1px solid #5ac4f5aa;
  box-shadow:0 0 0 5px rgba(11,24,35,.35),0 0 18px #299bd780,0 10px 26px #000a;
  font:400 15px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.04em;text-transform:lowercase;color:#eef3f7;
}
.sheet-tab i{color:#85d9ff;font-size:14px;}
@media(max-width:600px){
  .sheet-section{margin-top:-36px;border-radius:28px 28px 0 0;}
  .sheet-section::before{height:28px;}
  .sheet-tab{font-size:13px;padding:8px 16px;}
}

/* SHEET-FEINSCHLIFF: größeres Etikett, dunklerer Hintergrund, tieferer Schatten der Balken-Karte. */
.sheet-tab{gap:14px;padding:15px 32px;font-size:20px;letter-spacing:.05em;box-shadow:0 0 0 6px rgba(11,24,35,.35),0 0 24px #299bd780,0 14px 32px #000b;}
.sheet-tab i{font-size:19px;}
@media(max-width:600px){.sheet-tab{font-size:16px;padding:11px 22px;gap:10px;}.sheet-tab i{font-size:15px;}}

/* Hintergrund: gedecktes Blaugrau. Für ein stehendes Foto mit statischem Overlay nur --build-photo setzen,
   z. B. .build-section{--build-photo:url("images/ausbau/hintergrund.jpg");} */
.build-section{
  --build-photo:none;
  background:
    linear-gradient(180deg,rgba(196,214,227,.88) 0%,rgba(172,194,210,.92) 100%),
    var(--build-photo) center/cover no-repeat,
    #b9cddb;
}
.build-head{margin-top:clamp(8px,2vw,24px);}
.build-group{
  box-shadow:0 30px 70px rgba(11,34,51,.32),0 10px 24px rgba(11,34,51,.2),inset 0 1px 0 #ffffff;
}

/* DUOTONE-FOTOS MIT PARALLAX: Foto in Fensterhöhe, bleibt beim Durchscrollen stehen (sticky) und verschiebt sich
   nur leicht (--par per main.js). Einfärbung: Graustufen-Foto (::before) + Farbschicht im Mischmodus (::after).
   Ränder und Lesbarkeit über einen Schleier auf .section-bg::after. */
.stats-section{isolation:isolate;overflow:clip;}
.section-bg{position:absolute;inset:0;z-index:-1;overflow:clip;border-radius:inherit;pointer-events:none;}
.section-bg-photo{
  position:sticky;top:0;height:100vh;height:100lvh;width:100%;isolation:isolate;
  transform:translateY(var(--par,0px)) scale(1.1);will-change:transform;
}
.section-bg-photo::before,.section-bg-photo::after{content:"";position:absolute;inset:0;}
.section-bg-photo::before{background:center/cover no-repeat;filter:grayscale(1) contrast(1.2);}
.section-bg::after{content:"";position:absolute;inset:0;}

/* Bus: Navy und Blau */
.section-bg-bus .section-bg-photo::before{background-image:url("images/bg-bus.webp");filter:grayscale(1) contrast(1.25) brightness(.95);}
.section-bg-bus .section-bg-photo::after{background:linear-gradient(160deg,#0b2a55 0%,#2a8fd0 55%,#0a1d38 100%);mix-blend-mode:multiply;}
.section-bg-bus::after{
  background:linear-gradient(180deg,#02070c 0%,rgba(2,7,12,.55) 12%,rgba(4,12,20,.5) 50%,rgba(7,19,29,.6) 88%,#07131d 100%);
}

/* Ausbau: Blaugrau, hell genug für dunkle Schrift */
.section-bg-ausbau .section-bg-photo::before{background-image:url("images/bg-ausbau.webp");filter:grayscale(1) contrast(1.1) brightness(1.05);}
.section-bg-ausbau .section-bg-photo::after{background:linear-gradient(160deg,#6f8ea5 0%,#9db6c8 60%,#5f7d93 100%);mix-blend-mode:screen;}
.section-bg-ausbau::after{
  background:linear-gradient(180deg,rgba(196,214,227,.55) 0%,rgba(185,205,219,.5) 50%,rgba(172,194,210,.7) 100%);
}

/* MILCHGLAS: Karten, Leuchten-Leiste, Daten und Balken-Block lassen das Foto weich durchscheinen. */
.stat-front,.stat-back{
  background:linear-gradient(135deg,rgba(18,52,74,.42),rgba(3,10,18,.5));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-color:#5ac4f533;
}
.telltales-panel,.techdata{
  background:linear-gradient(180deg,rgba(5,10,15,.55),rgba(8,19,28,.6));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
.build-group{
  background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
}
@media(prefers-reduced-motion:reduce){.section-bg-photo{transform:scale(1.1);}}

/* NACH OBEN: fester Pfeil unten rechts im Stil der Slider-Buttons (Glossy-Hover). */
.text-slide-button.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:95;
  width:56px;height:56px;min-height:0;padding:0;gap:0;border-radius:14px;font-size:22px;
  border-color:#7dd9ff99;box-shadow:inset 0 1px 0 #ffffff15,0 8px 24px rgba(0,0,0,.55),0 0 18px #299bd740;
}
.back-to-top i{transition:transform .35s ease;}
.back-to-top:hover i,.back-to-top:focus-visible i{transform:translateY(-3px);}
@media(max-width:600px){.text-slide-button.back-to-top{right:16px;bottom:16px;width:48px;height:48px;font-size:19px;}}
@media(prefers-reduced-motion:reduce){.back-to-top i{transition:none;}}

/* ABOUT / STORYBOARD: Farbbereich „Rubin“ (Weinrot/Rubinrot). */
.about-section{
  position:relative;padding:clamp(72px,9vw,120px) clamp(16px,4vw,48px) clamp(56px,8vw,100px);
  background:linear-gradient(180deg,#160913 0%,#2a0c1c 100%);color:#f3dde2;
  scroll-snap-align:start;
}
/* Die allgemeine p-Regel (absolut, Schreibschrift) im About-Bereich aufheben */
.about-section p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;}
:where(.about-section) p{font-family:"Blinker",Arial,sans-serif;font-size:16px;}   /* ohne Gewicht, damit Klassenregeln gewinnen */
/* Sheet-Kante und Etikett in Rubin */
.about-section.sheet-section{box-shadow:0 -24px 60px rgba(0,0,0,.6),0 -2px 0 rgba(255,93,115,.4);}
.about-section.sheet-section::before{border-top-color:#ff5d73;filter:drop-shadow(0 0 6px #ff5d73) drop-shadow(0 0 16px #ff5d7380);}
.about-section .sheet-tab{border-color:#ff5d73aa;box-shadow:0 0 0 6px rgba(22,9,19,.4),0 0 24px #ff5d7380,0 14px 32px #000b;}
.about-section .sheet-tab i{color:#ff9aa8;}

/* Duotone-Hintergrund: Schatten Weinrot, Lichter Rubin */
.section-bg-about .section-bg-photo::before{background-image:url("images/bg-about.webp");filter:grayscale(1) contrast(1.2) brightness(.95);}
.section-bg-about .section-bg-photo::after{background:linear-gradient(160deg,#1a0712 0%,#ff6f7d 58%,#2a0c1c 100%);mix-blend-mode:multiply;}
.section-bg-about::after{background:linear-gradient(180deg,rgba(22,9,19,.5) 0%,rgba(22,9,19,.55) 50%,rgba(42,12,28,.75) 90%,#2a0c1c 100%);}

/* Intro: Fotostapel links, Text rechts */
.about-intro{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;}
.about-photos{position:relative;height:clamp(380px,40vw,520px);}
.about-photo{
  --r:0deg;position:absolute;margin:0;overflow:hidden;
  border:4px solid #ffe4e8;background:#2a0c1c;
  box-shadow:0 26px 54px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.4),0 0 0 1px rgba(255,93,115,.35);
  transform:rotate(var(--r));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.about-photo:hover{transform:rotate(var(--r)) translateY(-8px) scale(1.02);box-shadow:0 34px 64px rgba(0,0,0,.65),0 10px 22px rgba(0,0,0,.45),0 0 22px rgba(255,93,115,.35);}
/* Bild 1: oval, vorne oben */
.about-photo-1{z-index:3;left:20%;top:0;width:54%;height:64%;border-radius:50% / 46%;--r:-2deg;}
.about-photo-1 img{object-position:56% 42%;}
/* Bild 2: Bogen (oben rund, unten leicht abgerundet), unten links dahinter */
.about-photo-2{z-index:2;left:0;bottom:0;width:44%;height:56%;border-radius:999px 999px 26px 26px;--r:-7deg;}
.about-photo-2 img{object-position:48% 35%;}
/* Bild 3: Tropfen, unten rechts dahinter */
.about-photo-3{z-index:1;right:0;bottom:5%;width:44%;height:52%;border-radius:50% 50% 50% 14px;--r:8deg;}
.about-photo-3 img{object-position:72% 30%;}

.about-title{margin:0 0 18px;font:400 clamp(28px,3.4vw,46px)/1.1 "Blinker",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffe4e8;text-shadow:0 3px 20px #000;}
.about-lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.65;font-weight:200;color:#f3dde2;text-shadow:0 2px 12px #000;}

/* StoryBoard-Kapitel: warme Milchglas-Karten mit Schatten, aufklappbar */
.story-grid{max-width:1100px;margin:clamp(48px,6vw,80px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;}
.story-card{
  padding:24px 26px 22px;border-radius:18px;border:1px solid rgba(255,93,115,.32);
  background:linear-gradient(135deg,rgba(110,26,52,.55),rgba(22,9,19,.6));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
}
.story-card h3{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:400 clamp(17px,1.6vw,21px)/1.2 "Blinker",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffe4e8;}
.story-card h3 i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:16px;color:#ff9aa8;background:rgba(255,93,115,.14);border:1px solid rgba(255,93,115,.35);}
.story-text{margin:0;font-size:16px;line-height:1.65;color:#f3dde2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.story-card.is-open .story-text{display:block;-webkit-line-clamp:unset;overflow:visible;}
.story-toggle{
  margin-top:14px;padding:8px 16px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,93,115,.45);background:rgba(255,93,115,.12);color:#ffe4e8;
  font:400 13px/1 "Bruno Ace SC",Arial,sans-serif;text-transform:lowercase;letter-spacing:.04em;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.story-toggle:hover,.story-toggle:focus-visible{background:rgba(255,93,115,.25);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 14px rgba(255,93,115,.3);}

@media(max-width:900px){
  .about-intro{grid-template-columns:minmax(0,1fr);}
  .about-photos{height:clamp(320px,80vw,460px);max-width:520px;width:100%;margin:0 auto;}
  .about-text{text-align:center;}
  .story-grid{grid-template-columns:minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce){.about-photo,.story-toggle{transition:none;}}

/* STORY-KARTEN GLOSSY: Glanzschimmer oben, leuchtende Innenkante, roter Innenschein, Lichtreflex beim Hover. */
.story-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,rgba(120,28,56,.5),rgba(30,9,24,.62));
  border:1px solid rgba(255,140,160,.4);
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38),
             inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 34px rgba(255,93,115,.14);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.story-card::before{
  content:"";position:absolute;inset:0 0 52% 0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 70%,rgba(255,255,255,0));
}
.story-card::after{
  content:"";position:absolute;inset:-100% -50%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-100%) rotate(12deg);transition:transform 1s ease;
}
.story-card:hover{transform:translateY(-4px);border-color:rgba(255,160,176,.65);
  box-shadow:0 34px 70px rgba(0,0,0,.6),0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 40px rgba(255,93,115,.2),0 0 26px rgba(255,93,115,.25);}
.story-card:hover::after{transform:translateX(100%) rotate(12deg);}
.story-card.is-lifted{visibility:hidden;}   /* Platzhalter, solange die große Karte offen ist */

/* EINBLENDEN: erst die drei Fotos nacheinander, dann die Karten mit unterschiedlichen Bewegungen. */
.about-section:not(.is-visible) .about-photo,.about-section:not(.is-visible) .story-card{opacity:0;}
.about-section.is-visible .about-photo{animation:photoIn .9s cubic-bezier(.2,.8,.2,1) backwards;}
.about-section.is-visible .about-photo-1{animation-delay:.15s;}
.about-section.is-visible .about-photo-2{animation-delay:.55s;}
.about-section.is-visible .about-photo-3{animation-delay:.95s;}
@keyframes photoIn{from{opacity:0;transform:rotate(var(--r)) translateY(46px) scale(.82);}}
.about-section.is-visible .story-card{animation-fill-mode:backwards;animation-timing-function:cubic-bezier(.2,.8,.2,1);}
.about-section.is-visible .story-card:nth-child(1){animation-name:storyInA;animation-duration:1s;animation-delay:1.35s;}
.about-section.is-visible .story-card:nth-child(2){animation-name:storyInB;animation-duration:1.25s;animation-delay:1.6s;}
.about-section.is-visible .story-card:nth-child(3){animation-name:storyInC;animation-duration:.9s;animation-delay:1.95s;}
.about-section.is-visible .story-card:nth-child(4){animation-name:storyInD;animation-duration:1.15s;animation-delay:1.75s;}
@keyframes storyInA{from{opacity:0;transform:translateX(-120px) rotate(-8deg);}}
@keyframes storyInB{from{opacity:0;transform:translate(90px,-70px) rotate(7deg) scale(.85);}}
@keyframes storyInC{from{opacity:0;transform:perspective(800px) translateY(90px) rotateX(55deg);}}
@keyframes storyInD{from{opacity:0;transform:translateX(130px) skewX(-10deg) scale(.9);}}

/* GROSSE KARTE: dreht sich aus der kleinen Karte nach vorn und zeigt den vollen Text. */
.story-stage{position:fixed;inset:0;z-index:2000;background:rgba(10,4,9,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease;}
.story-stage.is-on{opacity:1;}
.story-expanded{
  position:fixed;z-index:2001;top:50%;left:50%;width:min(760px,92vw);max-height:84vh;overflow:auto;
  padding:30px 32px 26px;border-radius:22px;
  background:linear-gradient(145deg,rgba(130,30,60,.92),rgba(34,10,26,.95));
  border:1px solid rgba(255,160,176,.55);color:#f3dde2;
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 40px rgba(255,93,115,.3),inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center;
}
.story-expanded h3{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:400 clamp(20px,2.2vw,26px)/1.2 "Blinker",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffe4e8;}
.story-expanded h3 i{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;font-size:18px;color:#ff9aa8;background:rgba(255,93,115,.16);border:1px solid rgba(255,93,115,.4);}
.story-expanded p{position:static;transform:none;margin:0;font:400 17px/1.75 "Blinker",Arial,sans-serif;color:#f3dde2;pointer-events:auto;}
.story-expanded .story-toggle{margin-top:18px;}

/* HEADER: Spenden-Button „Lilli Donation“ größer, Text auf allen Breiten sichtbar (kurzer Text passt jetzt). */
.support-button,.support-button:visited,.support-button:active{height:40px;padding:0 16px;gap:10px;font-size:17px;font-weight:600;}
.support-icon,.support-heart{font-size:18px;}
.headline-support .support-button span,.support-button span{display:inline;}
@media(max-width:700px){
  .support-button,.support-button:visited,.support-button:active{height:32px;padding:0 10px;gap:7px;font-size:14px;}
  .support-icon,.support-heart{font-size:14px;}
}

/* SLIDER-BUTTONS: Schrift ca. 20 % größer und kräftiger. */
.text-slider .text-slide-button{font-size:16.8px;font-weight:800;letter-spacing:.03em;}
@media(max-width:600px){.text-slider .text-slide-button{font-size:15.6px;}}

/* HEADER-UMBAU: ohne Hamburger, größerer Spenden-Button, Besucherzähler im Header vor dem Live-Status. */
.headline-support{padding-left:22px;}
.support-button,.support-button:visited,.support-button:active{height:48px;padding:0 22px;gap:12px;font-size:20px;}
.support-icon,.support-heart{font-size:21px;}
.headline-live{gap:16px;}
.headline-live .visitor-counter{position:static;top:auto;right:auto;flex-direction:row;align-items:center;gap:8px;}
.headline-live .visitor-counter-label{font-size:11px;line-height:1.25;}
.headline-live .odometer{padding:3px 4px;gap:2px;border-radius:7px;}
.headline-live .odometer-digit{width:16px;height:24px;font-size:14px;}
.headline-live .odometer-sep{width:5px;font-size:12px;padding-bottom:2px;}
.top-headline.is-scrolled .headline-live .visitor-counter-label{color:#0b2233;text-shadow:none;}
/* Platz im Header: Begrüßungstext nur auf sehr breiten Bildschirmen, Zähler bei mittlerer Breite ausblenden */
@media(max-width:1700px){.headline-live .visitor-counter-label{display:none;}}
@media(min-width:1101px) and (max-width:1450px){.headline-live .visitor-counter{display:none;}}
@media(max-width:1100px){.headline-support{padding-left:14px;}}
@media(max-width:700px){
  .support-button,.support-button:visited,.support-button:active{height:32px;padding:0 10px;gap:7px;font-size:14px;}
  .support-icon,.support-heart{font-size:14px;}
  .headline-live{flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;}
  .headline-live .visitor-counter{flex-direction:row;gap:0;}
  .headline-live .odometer{padding:2px 3px;}
  .headline-live .odometer-digit{width:12px;height:17px;font-size:10.5px;}
  .headline-live .odometer-sep{width:4px;font-size:9px;padding-bottom:1px;}
}

/* HEADER IM STARTZUSTAND: weiß mit 35 % Durchsicht; Schrift deshalb auch oben schon dunkel (wie beim Scrollen). */
.top-headline{background-color:rgba(255,255,255,.65);}
.top-headline .headline-nav a span,
.top-headline .headline-nav a i{
  background-image:linear-gradient(110deg,#0b2233 0%,#0b2233 40%,#299bd7 50%,#0b2233 60%,#0b2233 100%);
}
.top-headline .headline-nav a:hover,
.top-headline .headline-nav a:focus-visible{filter:drop-shadow(0 0 6px #299bd755);}
.top-headline .headline-live,
.top-headline .headline-live a{color:#0b2233;}
.top-headline .twitch-status.offline{color:#d32f2f;text-shadow:none;}
.top-headline .twitch-status.online{color:#12924a;text-shadow:0 0 8px rgba(18,146,74,.25);}
.top-headline .twitch-status.checking{color:#0b2233;text-shadow:none;}
.top-headline .headline-live .visitor-counter-label{color:#0b2233;text-shadow:none;}

/* HEADER: 45 % durchsichtig; Unterkante wie die Straßenkante zwischen Landing und Bus (blaue Linie mit Schein
   und Lichtstreif, der von links nach rechts läuft – gleiche Animation roadSweep). */
.top-headline{
  background-color:rgba(255,255,255,.55);
  border-bottom:1px solid #299bd7b0;overflow-x:clip;
  box-shadow:0 12px 28px rgba(0,0,0,.442),0 30px 75px rgba(0,0,0,.51),0 0 18px rgba(0,0,0,.272),0 8px 26px -12px #299bd7;
}
.top-headline::after{
  content:"";position:absolute;left:0;bottom:-1px;width:28%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#bcefff,transparent);
  filter:drop-shadow(0 0 6px #299bd7);animation:roadSweep 7s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.top-headline::after{animation:none;display:none;}}
.top-headline.is-scrolled{border-bottom-color:#299bd7b0;box-shadow:0 10px 28px rgba(0,0,0,.35),0 1px 0 #ffffff inset,0 8px 26px -12px #299bd7;}

/* BUS-SEKTOR ALS SHEET: Etikett „lilli in zahlen“ auf der Kante; oben nicht abschneiden (nur seitlich).
   Die Straße darüber bekommt unten mehr Platz, damit die Zielanzeige nicht unter der Kante verschwindet. */
.stats-section{overflow-x:clip;overflow-y:visible;}
.road-transition{padding-bottom:calc(34px + 56px);}
@media(max-width:600px){.road-transition{padding-bottom:calc(34px + 36px);}}

/* ALLE SHEET-ETIKETTEN ca. 30 % größer */
.sheet-tab{gap:18px;padding:20px 42px;font-size:26px;}
.sheet-tab i{font-size:25px;}
@media(max-width:600px){.sheet-tab{font-size:21px;padding:14px 28px;gap:12px;}.sheet-tab i{font-size:19px;}}

/* ZAHLEN-KARTEN: 8 verschiedene Aufbau-Animationen, nacheinander im Abstand von 0,65 s */
.stats-section.is-visible .stat-card{animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;}
.stats-section.is-visible .stat-slot:nth-child(1) .stat-card{animation-name:statIn1;animation-delay:0s;}
.stats-section.is-visible .stat-slot:nth-child(2) .stat-card{animation-name:statIn2;animation-delay:.65s;}
.stats-section.is-visible .stat-slot:nth-child(3) .stat-card{animation-name:statIn3;animation-delay:1.3s;}
.stats-section.is-visible .stat-slot:nth-child(4) .stat-card{animation-name:statIn4;animation-delay:1.95s;}
.stats-section.is-visible .stat-slot:nth-child(5) .stat-card{animation-name:statIn5;animation-delay:2.6s;}
.stats-section.is-visible .stat-slot:nth-child(6) .stat-card{animation-name:statIn6;animation-delay:3.25s;}
.stats-section.is-visible .stat-slot:nth-child(7) .stat-card{animation-name:statIn7;animation-delay:3.9s;}
.stats-section.is-visible .stat-slot:nth-child(8) .stat-card{animation-name:statIn8;animation-delay:4.55s;}
@keyframes statIn1{from{opacity:0;transform:translateX(-140px) rotate(-6deg);}}
@keyframes statIn2{from{opacity:0;transform:translateY(-120px) rotate(8deg);}}
@keyframes statIn3{from{opacity:0;transform:scale(.45);}}
@keyframes statIn4{from{opacity:0;transform:translateX(140px) rotate(6deg);}}
@keyframes statIn5{from{opacity:0;transform:perspective(800px) translateY(60px) rotateX(80deg);}}
@keyframes statIn6{from{opacity:0;transform:rotate(-180deg) scale(.4);}}
@keyframes statIn7{from{opacity:0;transform:translateY(120px) scale(.9);filter:blur(12px);}}
@keyframes statIn8{from{opacity:0;transform:perspective(800px) translateX(-60px) rotateY(-90deg);}}

/* AUSSTATTUNG: Block baut sich auf, Icons fliegen wie Konfetti von allen Seiten herein, dann blendet die Schrift ein. */
.telltales-head,.telltales-panel,.techdata{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.telltales:not(.is-building) .telltales-head,
.telltales:not(.is-building) .telltales-panel,
.telltales:not(.is-building) .techdata{opacity:0;transform:translateY(34px) scale(.97);}
.telltales:not(.is-flying) .tell{opacity:0;}
.telltales.is-flying .tell{animation:tellFly 1.1s cubic-bezier(.2,.9,.3,1) var(--fd,0ms) backwards;}
@keyframes tellFly{
  0%{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.5);}
  18%{opacity:1;}
  74%{transform:translate(0,-10px) rotate(0deg) scale(1.05);}
  88%{transform:translate(0,3px) scale(.98);}
  100%{transform:none;}
}
.tell-name{opacity:0;transition:opacity .7s ease,color .3s ease;}
.telltales.is-named .tell-name{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .telltales.is-flying .tell{animation:none;}
  .telltales-head,.telltales-panel,.techdata,.tell-name{transition:none;}
}

/* COMMUNITY: Farbbereich „Twitch-Violett“. */
.community-section{
  position:relative;padding:clamp(80px,9vw,124px) clamp(16px,4vw,48px) clamp(56px,8vw,100px);
  background:linear-gradient(180deg,#0d0818 0%,#170d2b 100%);color:#e9e3f7;scroll-snap-align:start;
}
.community-section p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;}
:where(.community-section) p{font-family:"Blinker",Arial,sans-serif;font-size:16px;}
.community-section.sheet-section{box-shadow:0 -24px 60px rgba(0,0,0,.6),0 -2px 0 rgba(145,70,255,.45);}
.community-section.sheet-section::before{border-top-color:#a77bff;filter:drop-shadow(0 0 6px #9146ff) drop-shadow(0 0 16px #9146ff80);}
.community-section .sheet-tab{border-color:#9146ffaa;box-shadow:0 0 0 6px rgba(13,8,24,.4),0 0 24px #9146ff80,0 14px 32px #000b;}
.community-section .sheet-tab i{color:#b99aff;}
.section-bg-community .section-bg-photo::before{background-image:url("images/bg-community-cockpit.webp");filter:grayscale(1) contrast(1.2) brightness(.95);}
.section-bg-community .section-bg-photo::after{background:linear-gradient(160deg,#120a24 0%,#9146ff 58%,#170d2b 100%);mix-blend-mode:multiply;}
.section-bg-community::after{background:linear-gradient(180deg,rgba(13,8,24,.5) 0%,rgba(13,8,24,.55) 50%,rgba(23,13,43,.78) 90%,#170d2b 100%);}

/* Gemeinsamer Glossy-Look der Community-Karten */
.live-cockpit,.channel-card,.video-card,.thanks-wall{
  position:relative;isolation:isolate;overflow:hidden;border-radius:18px;
  background:linear-gradient(145deg,rgba(80,40,150,.42),rgba(18,10,36,.62));
  border:1px solid rgba(185,154,255,.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 34px rgba(145,70,255,.12);
}
.live-cockpit::before,.channel-card::before,.thanks-wall::before{
  content:"";position:absolute;inset:0 0 55% 0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
}
.community-subhead{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:400 clamp(17px,1.6vw,21px)/1.2 "Blinker",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f1ebff;}
.community-subhead i{color:#b99aff;}

/* 1 · Live-Cockpit */
.live-cockpit{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:28px clamp(20px,3vw,36px);}
.live-lamp{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:#5b4a7a;
  background:radial-gradient(circle at 50% 35%,#2a1d44,#0d0818);border:2px solid rgba(185,154,255,.3);
  box-shadow:inset 0 3px 10px #000,0 8px 22px rgba(0,0,0,.5);transition:color .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.live-cockpit.is-live .live-lamp{color:#ff4d5e;border-color:#ff4d5e;animation:livePulse 1.6s ease-in-out infinite;}
@keyframes livePulse{0%,100%{box-shadow:inset 0 3px 10px #000,0 0 0 0 rgba(255,77,94,.55),0 0 26px rgba(255,77,94,.5);}50%{box-shadow:inset 0 3px 10px #000,0 0 0 14px rgba(255,77,94,0),0 0 40px rgba(255,77,94,.75);}}
.live-kicker{margin:0;font:400 12px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.08em;text-transform:lowercase;color:#b99aff;}
.live-state{margin:8px 0 10px;font:400 clamp(24px,2.6vw,34px)/1.1 "Blinker",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f1ebff;}
.live-cockpit.is-live .live-state{color:#ff8a96;}
.live-text{margin:0 0 18px;font-size:17px;line-height:1.6;color:#e9e3f7;max-width:640px;}
.live-actions{display:flex;flex-wrap:wrap;gap:12px;}
.live-note{margin:12px 0 0;font-size:12px;color:#ffffff70;}
.live-player{grid-column:1/-1;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(185,154,255,.35);}
.live-player iframe{display:block;width:100%;height:100%;border:0;}

/* 2 · Kanal-Karten: drei große, zwei kleine */
.channel-grid{max-width:1100px;margin:clamp(28px,4vw,44px) auto 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;}
.channel-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 24px 22px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease;}
.channel-big{grid-column:span 2;}
.channel-small{grid-column:span 3;flex-direction:row;flex-wrap:wrap;align-items:center;}
.channel-card:hover{transform:translateY(-5px);border-color:rgba(200,175,255,.6);box-shadow:0 34px 70px rgba(0,0,0,.6),0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),0 0 26px rgba(145,70,255,.35);}
.channel-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);}
.channel-twitch .channel-icon{background:linear-gradient(145deg,#a970ff,#6b2fd6);}
.channel-discord .channel-icon{background:linear-gradient(145deg,#7983f5,#4752c4);}
.channel-youtube .channel-icon{background:linear-gradient(145deg,#ff4e45,#c4120a);}
.channel-instagram .channel-icon{background:linear-gradient(145deg,#feda75,#d62976 55%,#4f5bd5);}
.channel-tiktok .channel-icon{background:linear-gradient(145deg,#25f4ee,#111 50%,#fe2c55);}
.channel-card h3{margin:4px 0 0;display:flex;flex-direction:column;gap:3px;font:400 22px/1.15 "Blinker",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f1ebff;}
.channel-handle{font:400 13px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.03em;text-transform:none;color:#b99aff;}
.channel-card p{margin:0;font-size:16px;line-height:1.55;color:#e9e3f7;}
.channel-small p{flex:1 1 200px;}
.channel-btn{margin-top:auto;}
.channel-small .channel-btn{margin-top:0;}
.channel-card .discord-count{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(88,101,242,.18);border:1px solid rgba(121,131,245,.45);font-size:14px;color:#dfe2ff;}
.channel-card .discord-count[hidden]{display:none;}
.discord-dot{width:9px;height:9px;border-radius:50%;background:#3ba55d;box-shadow:0 0 8px #3ba55d;}
/* 5 · Neueste Videos */
.video-block{max-width:1100px;margin:clamp(40px,5vw,64px) auto 0;}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.video-card{display:flex;flex-direction:column;text-decoration:none;color:#e9e3f7;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.video-card:hover{transform:translateY(-5px);box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 26px rgba(145,70,255,.35);}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(145deg,#2a1d44,#0d0818);overflow:hidden;}
.video-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.video-card:hover .video-thumb img{transform:scale(1.06);}
.video-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;}
.video-play i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(145,70,255,.85);box-shadow:0 0 22px rgba(145,70,255,.6);padding-left:3px;}
.video-more .video-play i{padding-left:0;font-size:26px;background:rgba(255,0,0,.8);box-shadow:0 0 22px rgba(255,0,0,.45);}
.video-title{padding:14px 16px 4px;font:400 15px/1.4 "Blinker",Arial,sans-serif;color:#f1ebff;}
.video-date{padding:0 16px 16px;font:400 12px/1 "Bruno Ace SC",Arial,sans-serif;color:#b99aff;}

/* 4 · Danke-Wand: durchlaufendes Namensband + Spenden-Button */
.thanks-wall{max-width:1100px;margin:clamp(40px,5vw,64px) auto 0;padding:26px clamp(20px,3vw,36px) 28px;text-align:center;}
.thanks-wall .community-subhead{justify-content:center;}
.thanks-band{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.thanks-track{display:flex;width:max-content;gap:0;animation:thanksScroll 26s linear infinite;}
.thanks-band:hover .thanks-track{animation-play-state:paused;}
@keyframes thanksScroll{to{transform:translateX(-50%);}}
.thanks-name{padding:6px 22px;font:400 clamp(20px,2.2vw,28px)/1.3 "Bruno Ace SC",Arial,sans-serif;color:#f1ebff;text-shadow:0 0 14px rgba(145,70,255,.6);white-space:nowrap;}
.thanks-sep{align-self:center;color:#b99aff;font-size:16px;}
.thanks-donate{margin-top:22px;}

/* Einblenden beim Erreichen */
.community-section:not(.is-visible) .live-cockpit,.community-section:not(.is-visible) .channel-card,
.community-section:not(.is-visible) .video-card,.community-section:not(.is-visible) .thanks-wall{opacity:0;}
.community-section.is-visible .live-cockpit{animation:commIn .9s cubic-bezier(.2,.8,.2,1) backwards;}
.community-section.is-visible .channel-card{animation:commSlide .8s cubic-bezier(.2,.8,.2,1) backwards;}
.community-section.is-visible .channel-card:nth-child(1){animation-delay:.35s;}
.community-section.is-visible .channel-card:nth-child(2){animation-delay:.55s;}
.community-section.is-visible .channel-card:nth-child(3){animation-delay:.75s;}
.community-section.is-visible .channel-card:nth-child(4){animation-delay:.95s;}
.community-section.is-visible .channel-card:nth-child(5){animation-delay:1.15s;}
.community-section.is-visible .video-card{animation:commIn .8s cubic-bezier(.2,.8,.2,1) backwards;}
.community-section.is-visible .video-card:nth-child(1){animation-delay:1.3s;}
.community-section.is-visible .video-card:nth-child(2){animation-delay:1.45s;}
.community-section.is-visible .video-card:nth-child(3){animation-delay:1.6s;}
.community-section.is-visible .video-card:nth-child(4){animation-delay:1.75s;}
.community-section.is-visible .thanks-wall{animation:commIn .9s cubic-bezier(.2,.8,.2,1) 1.9s backwards;}
@keyframes commIn{from{opacity:0;transform:translateY(40px) scale(.97);}}
@keyframes commSlide{from{opacity:0;transform:translateX(-60px) rotate(-3deg);}}

@media(max-width:1000px){
  .channel-big,.channel-small{grid-column:span 3;}
  .channel-grid .channel-big:nth-child(3){grid-column:1/-1;}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
  .live-cockpit{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
  .live-actions{justify-content:center;}
  .channel-big,.channel-small,.channel-grid .channel-big:nth-child(3){grid-column:1/-1;}
  .video-grid{grid-template-columns:minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce){
  .thanks-track{animation:none;}
  .live-cockpit.is-live .live-lamp{animation:none;}
  .community-section .live-cockpit,.community-section .channel-card,.community-section .video-card,.community-section .thanks-wall{animation:none !important;opacity:1 !important;}
}

/* BUTTONS IN SEKTORFARBEN (Bus behält das Blau). Gilt für alle Glossy-Buttons im Bereich inkl. Pfeil nach unten. */
/* Ausbau: Blaugrau */
.build-section .text-slide-button{background:linear-gradient(135deg,#4a6a82,#253d50);border-color:#a9c2d488;color:#f3f8fb;}
.build-section .text-slide-button:hover,.build-section .text-slide-button:focus-visible{background:linear-gradient(135deg,#5d809a,#2f4b61);border-color:#d3e2ec;box-shadow:inset 0 1px 0 #ffffff30,0 10px 30px #0004,0 0 22px rgba(157,182,200,.45);}
.build-section .button-arrow{background:#ffffff24;color:#dbe8f1;}
.build-section .text-slide-button:hover .button-arrow{background:#dbe8f1;color:#1f3445;}
/* About: Rubin */
.about-section .text-slide-button{background:linear-gradient(135deg,#a3243f,#4a0f22);border-color:#ff9aa877;color:#fff3f5;}
.about-section .text-slide-button:hover,.about-section .text-slide-button:focus-visible{background:linear-gradient(135deg,#c52f4f,#5c1429);border-color:#ffb3be;box-shadow:inset 0 1px 0 #ffffff30,0 10px 30px #0005,0 0 22px rgba(255,93,115,.4);}
.about-section .button-arrow{background:rgba(255,154,168,.22);color:#ffd0d7;}
.about-section .text-slide-button:hover .button-arrow{background:#ffb3be;color:#4a0f22;}
/* Community: Violett */
.community-section .text-slide-button,.community-section .support-button{background:linear-gradient(135deg,#5b2bb8,#2a1160);border-color:#b99aff77;color:#f5f0ff;}
.community-section .text-slide-button:hover,.community-section .text-slide-button:focus-visible,
.community-section .support-button:hover{background:linear-gradient(135deg,#7240dd,#36167a);border-color:#cdb6ff;box-shadow:inset 0 1px 0 #ffffff30,0 10px 30px #0005,0 0 22px rgba(145,70,255,.45);color:#fff;}
.community-section .button-arrow{background:rgba(185,154,255,.22);color:#d9c8ff;}
.community-section .text-slide-button:hover .button-arrow{background:#cdb6ff;color:#2a1160;}

/* COMMUNITY-KARTEN: Animation und Verzögerung setzt main.js zufällig; hier nur Dauer, Kurve und die sieben Stile. */
.community-section.is-visible .live-cockpit,.community-section.is-visible .channel-card,
.community-section.is-visible .video-card,.community-section.is-visible .thanks-wall{
  animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;
}
@keyframes commA{from{opacity:0;transform:translateX(-120px) rotate(-6deg);}}
@keyframes commB{from{opacity:0;transform:translateX(120px) rotate(6deg);}}
@keyframes commC{from{opacity:0;transform:translateY(-100px) rotate(4deg);}}
@keyframes commD{from{opacity:0;transform:scale(.6);}}
@keyframes commE{from{opacity:0;transform:perspective(800px) translateY(60px) rotateX(70deg);}}
@keyframes commF{from{opacity:0;transform:translateY(90px);filter:blur(10px);}}
@keyframes commG{from{opacity:0;transform:rotate(-14deg) scale(.75);}}

/* FOOTER */
.site-footer{
  position:relative;background:#02070c;color:#c8d4dd;text-align:center;
  border-top:1px solid #299bd7b0;box-shadow:0 -8px 26px -12px #299bd7;
  padding:34px clamp(16px,4vw,48px) 30px;overflow-x:clip;
}
.site-footer::before{
  content:"";position:absolute;left:0;top:-1px;width:28%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#bcefff,transparent);
  filter:drop-shadow(0 0 6px #299bd7);animation:roadSweep 7s ease-in-out infinite;
}
.site-footer p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;margin:0;}
.footer-sign{margin-bottom:28px;}
.footer-plate{margin-top:0;cursor:default;}
.footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.footer-brand{text-align:left;}
.footer-logo{font:400 18px/1.2 "Bruno Ace SC",Arial,sans-serif !important;color:#eef3f7;}
.footer-logo span{color:#85d9ff;}
.footer-copy{margin-top:6px !important;font:400 13px/1.3 "Blinker",Arial,sans-serif !important;color:#8fa3b2;}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;}
.footer-nav a,.footer-legal > a{font:400 15px/1.3 "Blinker",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#c8d4dd;text-decoration:none;transition:color .3s ease,text-shadow .3s ease;}
.footer-nav a:hover,.footer-legal > a:hover,.footer-nav a:focus-visible,.footer-legal > a:focus-visible{color:#fff;text-shadow:0 0 12px #299bd7;}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 20px;}
.footer-social{display:flex;gap:8px;}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;font-size:17px;color:#c8d4dd;text-decoration:none;border:1px solid transparent;transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease;}
.footer-social a:hover,.footer-social a:focus-visible{color:#eef3f7;background:linear-gradient(135deg,#185272,#0b263b);border-color:#7dd9ff;transform:translateY(-2px);}
@media(max-width:900px){
  .footer-inner{grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;}
  .footer-brand{text-align:center;}
  .footer-legal{justify-content:center;}
}
@media(prefers-reduced-motion:reduce){.site-footer::before{animation:none;display:none;}}

/* FAHRZIELANZEIGEN („Nächster Halt“ / „Endstation“) besser lesbar: hellere, größere Schrift, schwächeres Punktraster. */
.road-sign{font-size:14px;letter-spacing:.14em;color:#ffc46b;text-shadow:0 0 4px #ffb347,0 0 12px #ff9d2a99,0 0 22px #ff9d2a55;padding:11px 20px;}
.road-sign::after{background:radial-gradient(circle,transparent 62%,rgba(7,9,11,.5) 64%) 0 0/3px 3px;}
.road-sign:hover{color:#ffd690;}
@media(max-width:600px){.road-sign{font-size:11px;letter-spacing:.08em;padding:9px 13px;}}

/* ===== FINALE RUNDE ===== */

/* Slider-Karte ca. 15 % breiter und ca. 20 % dunkler; Subline überall gleich groß */
.text-slider{width:min(92%,1104px);background:linear-gradient(135deg,rgba(3,10,18,.65),rgba(1,4,9,.65));}
.text-slide .text-slide-subtitle{font-size:20px;}
@media(max-width:600px){.text-slide .text-slide-subtitle{font-size:16px;}}

/* Header-Navigation: kräftiger (Bruno Ace SC hat nur einen Schnitt, daher synthetisch fett) und etwas mehr Abstand */
.headline-nav a{font-weight:700;}
.headline-nav{gap:44px;}
@media(max-width:1400px){.headline-nav{gap:34px;}}
@media(max-width:1100px){.headline-nav{gap:26px;}}
@media(max-width:700px){.headline-nav{gap:16px;}}

/* Seitenleiste ca. 20 % größer: 29 / 38 / 58 px. Grundhöhe 6 × (29 + 16) + 5 × 6 = 300px → halbe Höhe 150px */
.side-nav{top:calc(50% + 42px - 150px);}
.side-nav a,.side-nav-toggle{--size:29px;}
.side-nav a:hover,.side-nav a:focus-visible,.side-nav-toggle:hover,.side-nav-toggle:focus-visible{--size:58px;}
.side-nav a:hover + a,.side-nav a:focus-visible + a,
.side-nav a:has(+ a:hover),.side-nav a:has(+ a:focus-visible),
.side-nav-toggle:hover + .side-nav-items a:first-child,.side-nav-toggle:focus-visible + .side-nav-items a:first-child,
.side-nav:has(.side-nav-items a:first-child:hover) .side-nav-toggle,
.side-nav:has(.side-nav-items a:first-child:focus-visible) .side-nav-toggle{--size:38px;}
/* Über hellen Bereichen dunkle Icons (Klasse per main.js), auf der Glossy-Fläche beim Hover wieder hell */
.side-nav i{transition:font-size .22s ease,color .35s ease,filter .35s ease;}
.side-nav.is-on-light i{color:#12344a;filter:drop-shadow(0 2px 4px rgba(255,255,255,.5));}
.side-nav.is-on-light a:hover i,.side-nav.is-on-light a:focus-visible i,
.side-nav.is-on-light .side-nav-toggle:hover i,.side-nav.is-on-light .side-nav-toggle:focus-visible i{color:#eef3f7;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));}

/* Ausstattungs-Icons: Flug etwas länger und von Anfang an sichtbar */
.telltales.is-flying .tell{animation:tellFly 1.3s cubic-bezier(.2,.9,.3,1) var(--fd,0ms) backwards;}
@keyframes tellFly{
  0%{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.55);}
  8%{opacity:1;}
  74%{transform:translate(0,-10px) rotate(0deg) scale(1.05);}
  88%{transform:translate(0,3px) scale(.98);}
  100%{transform:none;}
}

/* Ausbau: Kartenüberschrift und Balkennamen kräftiger und 2px größer */
.build-group-title{font-weight:700;font-size:clamp(18px,calc(1.6vw + 2px),22px);}
.build-bar-label{font-size:18px;font-weight:600;}

/* About: Ausschnitte der neuen Fotos */
.about-photo-2 img{object-position:56% 34%;}
.about-photo-3 img{object-position:32% 68%;}

/* Community: Kontakt-Karte (Twitch, Discord, E-Mail) im Glossy-Look */
.contact-card{
  position:relative;isolation:isolate;overflow:hidden;border-radius:18px;
  max-width:1100px;margin:20px auto 0;padding:26px clamp(20px,3vw,36px) 24px;
  background:linear-gradient(145deg,rgba(80,40,150,.42),rgba(18,10,36,.62));border:1px solid rgba(185,154,255,.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 34px rgba(145,70,255,.12);
}
.contact-card::before{content:"";position:absolute;inset:0 0 55% 0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));}
.contact-intro{margin:0 0 18px;font-size:17px;line-height:1.55;color:#e9e3f7;}
.contact-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.contact-option{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px;border-radius:14px;text-align:center;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(185,154,255,.25);color:#f1ebff;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.contact-option:hover,.contact-option:focus-visible{transform:translateY(-4px);background:rgba(145,70,255,.16);border-color:#cdb6ff;box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 22px rgba(145,70,255,.35);}
.contact-twitch .channel-icon{background:linear-gradient(145deg,#a970ff,#6b2fd6);}
.contact-discord .channel-icon{background:linear-gradient(145deg,#7983f5,#4752c4);}
.contact-mail .channel-icon{background:linear-gradient(145deg,#c8d4dd,#6b8496);}
.contact-label{font:400 19px/1.2 "Blinker",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;}
.contact-value{font:400 14px/1.3 "Blinker",Arial,sans-serif;color:#b99aff;}
.contact-more{margin:18px 0 0;font-size:15px;color:#e9e3f7;text-align:center;}
.contact-more a{color:#d9c8ff;}
.community-section:not(.is-visible) .contact-card{opacity:0;}
.community-section.is-visible .contact-card{animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;}
@media(max-width:700px){.contact-options{grid-template-columns:minmax(0,1fr);}}
@media(prefers-reduced-motion:reduce){.community-section .contact-card{animation:none !important;opacity:1 !important;}}

/* Slider-Box etwas durchsichtiger (65 % → 52 %) */
.text-slider{background:linear-gradient(135deg,rgba(3,10,18,.52),rgba(1,4,9,.52));}

/* Slider-Schriften: Headline Orbitron in Großbuchstaben (gemeinsame Größe per main.js, längste Zeile passt),
   Subline Titillium Web ExtraLight 200 in fester Größe 26px */
.text-slide h2{font-family:"Orbitron",Arial,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.text-slide .text-slide-subtitle{font-family:"Titillium Web",Arial,sans-serif;font-weight:200;font-size:26px;line-height:1.4;}
@media(max-width:600px){.text-slide .text-slide-subtitle{font-size:19px;}}

/* Seitenleiste nochmals ca. 20 % größer (35px, Nachbarn 46px), Hover bleibt 58px.
   Grundhöhe 6 × (35 + 16) + 5 × 6 = 336px → halbe Höhe 168px */
.side-nav{top:calc(50% + 42px - 168px);}
.side-nav a,.side-nav-toggle{--size:35px;}
.side-nav a:hover,.side-nav a:focus-visible,.side-nav-toggle:hover,.side-nav-toggle:focus-visible{--size:58px;}
.side-nav a:hover + a,.side-nav a:focus-visible + a,
.side-nav a:has(+ a:hover),.side-nav a:has(+ a:focus-visible),
.side-nav-toggle:hover + .side-nav-items a:first-child,.side-nav-toggle:focus-visible + .side-nav-items a:first-child,
.side-nav:has(.side-nav-items a:first-child:hover) .side-nav-toggle,
.side-nav:has(.side-nav-items a:first-child:focus-visible) .side-nav-toggle{--size:46px;}

/* Ausstattungs-Icons fliegen VOR allen Kästen: Leuchten-Block nach vorn, fliegende Icons darin ganz nach oben */
.telltales-panel{position:relative;z-index:5;}
.telltales.is-flying .tell{position:relative;z-index:20;}

/* Ausstattungs-Icons im Flug voll sichtbar (die 20 %-Abschwächung gilt erst nach der Landung, wenn die Namen erscheinen)
   und der Bus-Bereich liegt währenddessen über den folgenden Bereichen. */
.telltales.is-flying:not(.is-named) .tell .tell-lamp{opacity:1;}
.stats-section.is-icons-flying{z-index:3;}

/* Impressum-Fenster: Zwischenüberschrift für die Datenschutzerklärung */
.impressum-box .impressum-subtitle{margin:34px 0 6px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:34px;}
.impressum-content strong{color:#fff;font-weight:600;}
.impressum-content .impressum-stand{margin-top:22px;opacity:.7;font-size:13px;}

/* AUSBAU ALS GLOCKE: Die helle Fläche (.section-bg-ausbau) wird per main.js zugeschnitten: oben Etikett ± 100px,
   dann je Seite ein Ellipsen-Viertel in gleichbleibender Rundung, das den Rand senkrecht trifft (bei ca. 75 % der Höhe).
   Die ausgeschnittenen Flächen zeigen den dunklen Hintergrund des Bus-Bereichs. Leuchtlinie = .bell-line. */
.build-section{background:linear-gradient(180deg,#07131d 0%,#02070c 100%);border-radius:0;box-shadow:none;}
.build-section.sheet-section::before{display:none;}
.section-bg-ausbau{border-radius:0;background:linear-gradient(180deg,#c4d6e3 0%,#acc2d2 100%);}
.bell-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.bell-line path{fill:none;stroke:#61caff;stroke-width:2;filter:drop-shadow(0 0 6px #299bd7) drop-shadow(0 0 16px #299bd780);}

/* ÜBERGANG AUSBAU → ABOUT: „Sonnenaufgang am Horizont“.
   Der About-Bereich steigt als gewölbter Horizont in die helle Ausbau-Fläche (Zuschnitt per main.js, Höhe --horizon).
   Leuchtrand in Rubin/Rosé, dahinter geht beim Scrollen eine Sonne mit langsam drehenden Strahlen auf. */
:root{--horizon:clamp(80px,12vw,180px);}
.build-section{padding-bottom:calc(clamp(56px,8vw,110px) + var(--horizon));}
.about-section{
  margin-top:calc(-1 * var(--horizon));background:transparent;
  padding-top:calc(clamp(72px,9vw,120px) + var(--horizon) * .6);
}
.about-section.sheet-section{border-radius:0;box-shadow:none;}
.about-section.sheet-section::before{display:none;}
.section-bg-about{border-radius:0;background:linear-gradient(180deg,#160913 0%,#2a0c1c 100%);}
.horizon-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.horizon-rim{fill:none;stroke:#ff9aa8;stroke-width:2;filter:drop-shadow(0 0 6px #ff5d73) drop-shadow(0 0 18px #ff5d7399);}
.horizon-haze{fill:none;stroke:#ff6f7d;stroke-width:22;opacity:.28;filter:blur(12px);}
/* Sonne: warmer Schein mit Strahlen, sitzt hinter dem Horizont und steigt per --rise auf */
.horizon-sun{
  position:absolute;left:50%;top:0;z-index:-2;pointer-events:none;
  width:min(980px,96vw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) translateY(var(--rise,0px));opacity:var(--sun-op,1);
  background:radial-gradient(circle,rgba(255,214,190,.95) 0%,rgba(255,150,130,.7) 10%,rgba(255,93,115,.38) 26%,rgba(255,93,115,.12) 46%,transparent 68%);
}
.horizon-sun::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,180,.16) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 12%,rgba(0,0,0,.6) 34%,transparent 66%);
  mask:radial-gradient(circle,#000 12%,rgba(0,0,0,.6) 34%,transparent 66%);
  animation:sunRays 90s linear infinite;
}
@keyframes sunRays{to{transform:rotate(360deg);}}
.about-section .sheet-tab{box-shadow:0 0 0 6px rgba(22,9,19,.4),0 0 34px #ff5d73aa,0 14px 32px #000b;}
@media(prefers-reduced-motion:reduce){.horizon-sun::before{animation:none;}}
/* Sonnenkern hinter dem Horizont halten, damit darüber nur der Lichthof erscheint und nichts überstrahlt wird */
.horizon-sun{
  transform:translate(-50%,-50%) translateY(calc(var(--rise,0px) + 150px));
  background:radial-gradient(circle,rgba(255,214,190,.9) 0%,rgba(255,150,130,.55) 10%,rgba(255,93,115,.28) 26%,rgba(255,93,115,.08) 46%,transparent 68%);
}

/* ÜBERGANG ABOUT → COMMUNITY: „Nachteinbruch und Live-Signal“.
   Community steigt als Signalwelle auf (Zuschnitt per main.js, Höhe --wave), Wellenberg in der Mitte unter dem Etikett.
   Violett leuchtende Kante mit wandernden Lichtimpulsen; darüber funkeln Sterne am Ende von About. */
:root{--wave:clamp(60px,8vw,120px);}
.about-section{padding-bottom:calc(clamp(56px,8vw,100px) + var(--wave));}
.community-section{
  margin-top:calc(-1 * var(--wave));background:transparent;
  padding-top:calc(clamp(80px,9vw,124px) + var(--wave) * .6);
}
.community-section.sheet-section{border-radius:0;box-shadow:none;}
.community-section.sheet-section::before{display:none;}
.section-bg-community{border-radius:0;background:linear-gradient(180deg,#0d0818 0%,#170d2b 100%);}
.wave-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.wave-rim{fill:none;stroke:#b99aff;stroke-width:2;filter:drop-shadow(0 0 6px #9146ff) drop-shadow(0 0 16px #9146ff99);}
.wave-haze{fill:none;stroke:#9146ff;stroke-width:20;opacity:.3;filter:blur(11px);}
.wave-pulse{fill:none;stroke:#f1ebff;stroke-width:3;stroke-linecap:round;stroke-dasharray:28 972;
  filter:drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #b99aff);animation:wavePulse 6s linear infinite;}
.wave-pulse-2{animation-duration:8.5s;animation-delay:-3s;stroke-dasharray:18 982;}
@keyframes wavePulse{from{stroke-dashoffset:0;}to{stroke-dashoffset:-1000;}}
/* Sterne über der Welle (liegen hinter dem Community-Hintergrund, sichtbar nur oberhalb der Welle) */
.wave-stars{
  position:absolute;left:0;right:0;bottom:calc(100% - var(--wave));height:calc(var(--wave) * 3.2);z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 14% 34%,#ffd9de,transparent),
    radial-gradient(1.8px 1.8px at 22% 78%,#fff,transparent),radial-gradient(1.1px 1.1px at 31% 22%,#e9e3f7,transparent),
    radial-gradient(1.5px 1.5px at 39% 55%,#fff,transparent),radial-gradient(1.2px 1.2px at 47% 18%,#ffd9de,transparent),
    radial-gradient(1.7px 1.7px at 56% 70%,#fff,transparent),radial-gradient(1.1px 1.1px at 63% 30%,#e9e3f7,transparent),
    radial-gradient(1.6px 1.6px at 71% 58%,#fff,transparent),radial-gradient(1.3px 1.3px at 79% 26%,#ffd9de,transparent),
    radial-gradient(1.8px 1.8px at 87% 74%,#fff,transparent),radial-gradient(1.2px 1.2px at 94% 40%,#e9e3f7,transparent);
  -webkit-mask:linear-gradient(to top,#000 30%,transparent);mask:linear-gradient(to top,#000 30%,transparent);
  animation:starTwinkle 4.5s ease-in-out infinite alternate;
}
.wave-stars::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.3px 1.3px at 10% 46%,#fff,transparent),radial-gradient(1px 1px at 27% 64%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 43% 38%,#fff,transparent),radial-gradient(1px 1px at 59% 50%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 75% 42%,#fff,transparent),radial-gradient(1px 1px at 91% 60%,#fff,transparent);
  animation:starTwinkle 3.2s ease-in-out infinite alternate-reverse;
}
@keyframes starTwinkle{from{opacity:.35;}to{opacity:1;}}
.community-section .sheet-tab{box-shadow:0 0 0 6px rgba(13,8,24,.4),0 0 30px #9146ffaa,0 14px 32px #000b;}
@media(prefers-reduced-motion:reduce){.wave-pulse{animation:none;display:none;}.wave-stars,.wave-stars::after{animation:none;}}

/* ÜBERGANG ABOUT → COMMUNITY als Bogen nach unten (statt Welle): tiefer Bogen, Etikett unten im Scheitel,
   Inhalt der Community beginnt unterhalb des Bogens. */
:root{--wave:clamp(90px,12vw,190px);}
.community-section{padding-top:calc(clamp(80px,9vw,124px) + var(--wave));}
.community-section .sheet-tab{top:var(--wave);}

/* ===== ÜBERGANG STARTSEITE → BUS: Windschutzscheibe + Tacho-Kante ===== */



/* --- Variante 1: Blick durch die Windschutzscheibe ---
   Das Startvideo schrumpft beim Scrollen zu einer Frontscheibe (Form/Größe per main.js), mit Rahmen und Glasreflex. */
body{background:#02070c;}
.landing-slider{transform-origin:50% 40%;will-change:transform,clip-path;}
.windshield-frame{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;overflow:visible;}
.windshield-rim{fill:none;stroke:#0b1823;stroke-width:var(--rim,0px);}
.windshield-shine{fill:none;stroke:rgba(188,239,255,.45);stroke-width:1.5;opacity:var(--glass,0);filter:drop-shadow(0 0 6px #299bd7);}
.windshield-glare{
  display:block;position:absolute;inset:0;z-index:39;pointer-events:none;opacity:var(--glass,0);
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.05) 47%,transparent 58%);
}

/* --- Variante 2: Tacho-Kante ---
   Die Oberkante des Bus-Bereichs ist ein flacher Tachobogen (0–120 km/h) mit Skala; beim Scrollen läuft die Anzeige auf 100. */
:root{--gauge:clamp(70px,9vw,130px);}
.road-transition{padding-bottom:calc(34px + var(--gauge));}
.stats-section{margin-top:calc(-1 * var(--gauge));background:transparent;border-radius:0;box-shadow:none;}
.stats-section.sheet-section::before{display:none;}
.section-bg-bus{border-radius:0;background:linear-gradient(180deg,#02070c 0%,#07131d 100%);}
.gauge-edge{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.gauge-rim{fill:none;stroke:#61caff;stroke-width:2;filter:drop-shadow(0 0 6px #299bd7) drop-shadow(0 0 16px #299bd780);}
.gauge-haze{fill:none;stroke:#299bd7;stroke-width:20;opacity:.28;filter:blur(11px);}
.gauge-red{fill:none;stroke:#ff4b3a;stroke-width:4;opacity:.85;}
.gauge-ticks line{stroke:#7fd6ff;stroke-width:1.5;opacity:.7;}
.gauge-ticks line.major{stroke-width:2.2;opacity:1;}
.gauge-ticks text{fill:#7fd6ff;font:700 11px "Orbitron",Arial,sans-serif;opacity:.85;}
.gauge-needle{stroke:#ff6a3d;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff6a3d);}
.gauge-dot{fill:#ffffff;filter:drop-shadow(0 0 8px #bcefff) drop-shadow(0 0 16px #299bd7);}
.gauge-readout{
  display:block;position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:2;
  font:400 14px/1 "Bruno Ace SC",Arial,sans-serif;color:#9fdcf7;letter-spacing:.06em;white-space:nowrap;
}
.gauge-readout b{font:700 24px/1 "Orbitron",Arial,sans-serif;color:#fff;text-shadow:0 0 12px #299bd7;margin-right:6px;}


/* Startseite bleibt beim Scrollen stehen (sticky), schrumpft zur Scheibe und blendet aus; die folgenden Bereiche
   gleiten darüber. Der Tacho erscheint dadurch schon über der Startseite. Tacho als großer Bogen wie bei About. */
.landing-slider{position:sticky;top:0;z-index:0;}
.road-transition{z-index:1;}
:root{--gauge:clamp(90px,12vw,190px);}
.landing-slider.is-gone{visibility:hidden;}
/* Die stehende Startseite ist kein Einrast-Punkt mehr (sonst würde der Browser zu ihr zurückziehen) */
.landing-slider{scroll-snap-align:none;}

/* BÖGEN GETAUSCHT: About als Schale (an den Rändern hoch, Etikett unten im tiefsten Punkt, Sonne steigt in der Mulde auf),
   Community als Kuppel (Etikett oben auf dem Scheitel). */
:root{--about-dip:clamp(140px,20vw,320px);}
.build-section{padding-bottom:calc(clamp(56px,8vw,110px) + var(--about-dip) * .35);}
.about-section{margin-top:calc(-1 * var(--about-dip));padding-top:calc(clamp(72px,9vw,120px) + var(--about-dip));}
.about-section .sheet-tab{top:var(--about-dip);}
.horizon-sun{top:var(--about-dip);}
.community-section .sheet-tab{top:0;}
.community-section{padding-top:calc(clamp(80px,9vw,124px) + var(--wave) * .6);}

/* ===== PARTNER: Farbbereich „Champagner-Gold“ ===== */
:root{--gable:clamp(60px,8vw,130px);}
/* About endet über dem Giebel, der Partner-Bereich endet unter der Community-Kuppel */
.about-section{padding-bottom:calc(clamp(56px,8vw,100px) + var(--gable));}
.partner-section{
  position:relative;margin-top:calc(-1 * var(--gable));background:transparent;color:#ece4d4;scroll-snap-align:start;
  padding:calc(clamp(72px,9vw,120px) + var(--gable) * .4) clamp(16px,4vw,48px) calc(clamp(56px,8vw,100px) + var(--wave));
}
.partner-section.sheet-section{border-radius:0;box-shadow:none;}
.partner-section.sheet-section::before{display:none;}
.partner-section p{position:static;left:auto;bottom:auto;transform:none;pointer-events:auto;}
:where(.partner-section) p{font-family:"Blinker",Arial,sans-serif;font-size:16px;}

/* Hintergrund als Giebel zugeschnitten (gerade Linien von den Ecken zur Mitte), Graphit mit warmem Goldschimmer */
.section-bg-partner{
  border-radius:0;
  clip-path:polygon(0 var(--gable),50% 0,100% var(--gable),100% 100%,0 100%);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,rgba(217,178,106,.22),transparent 70%),
    radial-gradient(ellipse 40% 30% at 12% 60%,rgba(217,178,106,.08),transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 80%,rgba(217,178,106,.08),transparent 70%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#121212 0%,#1d1a14 100%);
}
.gable-line{position:absolute;left:0;top:0;width:100%;height:var(--gable);overflow:visible;pointer-events:none;z-index:0;}
.gable-line polyline{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.gable-rim{stroke:#e9c98a;stroke-width:2;filter:drop-shadow(0 0 6px #d9b26a) drop-shadow(0 0 16px #d9b26a99);}
.gable-haze{stroke:#d9b26a;stroke-width:20;opacity:.25;filter:blur(11px);}
.gable-shine{stroke:#fff8e6;stroke-width:3;stroke-linecap:round;stroke-dasharray:60 940;
  filter:drop-shadow(0 0 6px #fff4d6) drop-shadow(0 0 14px #e9c98a);animation:gableShine 5.5s ease-in-out infinite;}
.gable-shine-2{animation-duration:8s;animation-delay:-2.5s;stroke-dasharray:30 970;}
@keyframes gableShine{from{stroke-dashoffset:0;}to{stroke-dashoffset:-1000;}}
.partner-section .sheet-tab{border-color:#d9b26aaa;color:#fff8e6;box-shadow:0 0 0 6px rgba(18,18,18,.45),0 0 30px #d9b26a99,0 14px 32px #000b;}
.partner-section .sheet-tab i{color:#e9c98a;}

/* Kopf */
.partner-head{max-width:760px;margin:0 auto clamp(32px,4vw,48px);text-align:center;}
.partner-subtitle{margin:0;font:200 clamp(20px,2vw,26px)/1.4 "Titillium Web",Arial,sans-serif !important;color:#f2e2bf;}
.partner-intro{margin:14px 0 0;font-size:17px;line-height:1.65;color:#d8cfbf;}

/* Gemeinsamer Glas-Look in Gold */
.partner-tile,.partner-offer,.offer-card{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(145deg,rgba(217,178,106,.14),rgba(18,18,18,.6));
  border:1px solid rgba(217,178,106,.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 26px 56px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 30px rgba(217,178,106,.08);
}
.partner-tile::before,.partner-offer::before,.offer-card::before{
  content:"";position:absolute;inset:0 0 55% 0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
}

/* Partner-Wand: echte Logos in Graustufen, beim Darüberfahren in Farbe; Platzhalter gestrichelt */
.partner-wall{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.partner-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;padding:22px;border-radius:16px;
  text-decoration:none;color:#d8cfbf;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease;
}
.partner-tile img{max-width:80%;max-height:90px;object-fit:contain;filter:grayscale(1) brightness(1.15) opacity(.75);transition:filter .4s ease;}
.partner-tile:hover,.partner-tile:focus-visible{transform:translateY(-5px);border-color:#e9c98a;box-shadow:0 32px 64px rgba(0,0,0,.6),0 0 26px rgba(217,178,106,.35),inset 0 1px 0 rgba(255,255,255,.25);}
.partner-tile:hover img,.partner-tile:focus-visible img{filter:none;}
.partner-placeholder{border-style:dashed;border-color:rgba(217,178,106,.45);}
.partner-placeholder i{font-size:28px;color:#e9c98a;opacity:.8;}
.partner-placeholder span{font:400 14px/1 "Bruno Ace SC",Arial,sans-serif;text-transform:lowercase;letter-spacing:.04em;}

/* „Werde Partner“-Karte mit drei Angeboten */
.partner-offer{max-width:1100px;margin:clamp(28px,4vw,44px) auto 0;padding:28px clamp(20px,3vw,36px) 30px;border-radius:18px;text-align:center;}
.partner-offer-title{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px;font:700 clamp(20px,2.2vw,26px)/1.2 "Blinker",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f2e2bf;}
.partner-offer-title i{color:#e9c98a;}
.partner-offer-intro{margin:0 0 22px;font-size:17px;color:#d8cfbf;}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:26px;}
.offer-card{padding:22px 20px;border-radius:14px;text-align:left;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;}
.offer-card:hover{transform:translateY(-4px);border-color:#e9c98a;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 22px rgba(217,178,106,.3);}
.offer-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:12px;font-size:20px;color:#1d1a14;background:linear-gradient(145deg,#f2e2bf,#c9a05a);box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);}
.offer-card h4{margin:0 0 6px;font:700 18px/1.2 "Blinker",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f2e2bf;}
.offer-card p{margin:0;font-size:15px;line-height:1.55;color:#d8cfbf;}

/* Buttons in Gold */
.partner-section .text-slide-button{background:linear-gradient(135deg,#b8893f,#5a4116);border-color:#e9c98a88;color:#fff8e6;}
.partner-section .text-slide-button:hover,.partner-section .text-slide-button:focus-visible{background:linear-gradient(135deg,#d4a453,#6e5020);border-color:#f2e2bf;box-shadow:inset 0 1px 0 #ffffff40,0 10px 30px #0005,0 0 22px rgba(217,178,106,.45);}
.partner-section .button-arrow{background:rgba(242,226,191,.22);color:#fff3d6;}
.partner-section .text-slide-button:hover .button-arrow{background:#f2e2bf;color:#5a4116;}

/* Einblenden beim Erreichen */
.partner-section:not(.is-visible) .partner-head,.partner-section:not(.is-visible) .partner-tile,
.partner-section:not(.is-visible) .partner-offer,.partner-section:not(.is-visible) .offer-card{opacity:0;}
.partner-section.is-visible .partner-head{animation:partnerIn .8s cubic-bezier(.2,.8,.2,1) backwards;}
.partner-section.is-visible .partner-tile{animation:partnerPop .7s cubic-bezier(.2,.9,.3,1.2) backwards;}
.partner-section.is-visible .partner-tile:nth-child(1){animation-delay:.25s;}
.partner-section.is-visible .partner-tile:nth-child(2){animation-delay:.4s;}
.partner-section.is-visible .partner-tile:nth-child(3){animation-delay:.55s;}
.partner-section.is-visible .partner-tile:nth-child(4){animation-delay:.7s;}
.partner-section.is-visible .partner-offer{animation:partnerIn .9s cubic-bezier(.2,.8,.2,1) .85s backwards;}
.partner-section.is-visible .offer-card{animation:partnerIn .7s cubic-bezier(.2,.8,.2,1) backwards;}
.partner-section.is-visible .offer-card:nth-child(1){animation-delay:1.1s;}
.partner-section.is-visible .offer-card:nth-child(2){animation-delay:1.25s;}
.partner-section.is-visible .offer-card:nth-child(3){animation-delay:1.4s;}
@keyframes partnerIn{from{opacity:0;transform:translateY(36px);}}
@keyframes partnerPop{from{opacity:0;transform:scale(.7) rotate(-4deg);}}

@media(max-width:900px){
  .partner-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  .offer-grid{grid-template-columns:minmax(0,1fr);}
}
@media(prefers-reduced-motion:reduce){
  .gable-shine{animation:none;display:none;}
  .partner-section .partner-head,.partner-section .partner-tile,.partner-section .partner-offer,.partner-section .offer-card{animation:none !important;opacity:1 !important;}
}

/* PARTNER-KACHELN: größer, Logo oben, Button „Zum Partner“ unten */
.partner-tile{min-height:230px;padding:24px 20px 20px;justify-content:space-between;gap:16px;}
.partner-tile .partner-logo{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.partner-tile .partner-logo img{max-width:85%;max-height:110px;}
.partner-tile .partner-open{min-height:40px;padding:6px 8px 6px 16px;gap:12px;font-size:13px;}
.partner-tile .partner-open .button-arrow{width:26px;height:26px;font-size:16px;}
.partner-tile.is-lifted{visibility:hidden;}
.partner-tile .partner-logo img{filter:grayscale(1) brightness(1.15) opacity(.75);transition:filter .4s ease;}
.partner-tile:hover .partner-logo img,.partner-tile:focus-within .partner-logo img{filter:none;}

/* GROSSE PARTNER-KARTE (wie bei den Story-Karten): Logo oben mittig, Text, Button „Partner Webseite“ */
.partner-expanded{
  position:fixed;z-index:2001;top:50%;left:50%;width:min(640px,92vw);max-height:84vh;overflow:auto;
  padding:34px 32px 28px;border-radius:22px;text-align:center;color:#ece4d4;
  background:linear-gradient(145deg,rgba(70,55,28,.95),rgba(18,18,18,.97));
  border:1px solid rgba(233,201,138,.6);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 40px rgba(217,178,106,.3),inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center;
}
.partner-expanded .partner-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:120px;margin-bottom:18px;color:#d8cfbf;}
.partner-expanded .partner-logo img{max-width:70%;max-height:140px;object-fit:contain;}
.partner-expanded .partner-logo i{font-size:46px;color:#e9c98a;}
.partner-expanded .partner-logo span{font:400 16px/1 "Bruno Ace SC",Arial,sans-serif;text-transform:lowercase;}
.partner-expanded h3{margin:0 0 12px;font:700 22px/1.2 "Blinker",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#f2e2bf;}
.partner-expanded p{position:static;transform:none;pointer-events:auto;margin:0 0 12px;font:400 17px/1.7 "Blinker",Arial,sans-serif;color:#ece4d4;text-align:left;}
.partner-expanded .partner-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;}
.partner-expanded .text-slide-button{background:linear-gradient(135deg,#b8893f,#5a4116);border-color:#e9c98a88;color:#fff8e6;}
.partner-expanded .text-slide-button:hover,.partner-expanded .text-slide-button:focus-visible{background:linear-gradient(135deg,#d4a453,#6e5020);border-color:#f2e2bf;box-shadow:inset 0 1px 0 #ffffff40,0 10px 30px #0005,0 0 22px rgba(217,178,106,.45);}
.partner-expanded .button-arrow{background:rgba(242,226,191,.22);color:#fff3d6;}
.partner-expanded .text-slide-button:hover .button-arrow{background:#f2e2bf;color:#5a4116;}
.partner-expanded .partner-close{
  position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(233,201,138,.5);background:rgba(18,18,18,.6);color:#f2e2bf;font-size:22px;line-height:1;
  transition:background .3s ease,transform .3s ease;
}
.partner-expanded .partner-close:hover{background:rgba(217,178,106,.25);transform:scale(1.08);}

/* SEKTOR-NAVIGATION: About-Ziel auf das Etikett unten in der Schale legen (Einrasten, Links und Pfeil gleich) */
.about-section{scroll-margin-top:calc(34px - var(--about-dip));}

/* Übergangs-Ebenen für die Sektor-Navigation (per main.js erzeugt) */
.nav-transition{position:fixed;inset:0;z-index:2500;pointer-events:none;background:var(--nav-color,#02070c);}
.nav-fade{opacity:0;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--nav-color) 70%,#ff5d73) 0%,var(--nav-color) 70%);}
.nav-flip{
  transform-origin:0% 50%;backface-visibility:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,transparent 12%,transparent 88%,rgba(255,255,255,.06) 100%),
             radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--nav-color) 75%,#9146ff) 0%,var(--nav-color) 75%);
  box-shadow:0 0 60px rgba(0,0,0,.6);
}

/* HEADER: Logo links (dunkle Plakette, Link zur Startseite), Navigation ca. 5px kleiner,
   rechts „Twitch:“ mit Status-Link über dem Besucherzähler, senkrecht mittig im Balken. */
.header-logo{display:inline-flex;height:62px;border-radius:12px;overflow:hidden;border:1px solid rgba(41,155,215,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .3s ease,box-shadow .3s ease;}
.header-logo img{display:block;height:100%;width:auto;}
.header-logo:hover,.header-logo:focus-visible{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 16px rgba(41,155,215,.45);}

.headline-nav a{font-size:21px;}
.headline-nav a i{font-size:16px;}

.headline-live{flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;}
.twitch-line{font:600 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em;color:#0b2233;white-space:nowrap;}
.twitch-line .twitch-status-link{text-decoration:none;}
.twitch-line .twitch-status-link:hover .twitch-status,.twitch-line .twitch-status-link:focus-visible .twitch-status{text-decoration:underline;}
/* Zähler jetzt unter Twitch: braucht wenig Breite, deshalb auch bei mittleren Bildschirmen sichtbar */
@media(min-width:1101px) and (max-width:1450px){.headline-live .visitor-counter{display:flex;}}

/* Spenden-Button unter dem Slider, mittig über den Social-Icons */
.hero-donate{position:absolute;left:50%;bottom:178px;transform:translateX(-50%);z-index:30;pointer-events:auto;}
@media(max-width:1100px){.header-logo{height:30px;border-radius:8px;}}
@media(max-width:700px){
  .headline-nav a{font-size:13px;}
  .headline-nav a i{font-size:12px;}
  .twitch-line{font-size:10px;}
  .headline-live{gap:2px;}
  .hero-donate{bottom:110px;}
}

/* Sanfte Überblendung der Sektor-Navigation (Ausbau, Partner) */
.nav-soft{opacity:0;background:var(--nav-color);}

/* HEADER-NAVIGATION: wieder 2px größer, dafür enger gesetzt */
.headline-nav a{font-size:23px;letter-spacing:-2px;}
@media(max-width:700px){.headline-nav a{font-size:13px;letter-spacing:-.5px;}}

/* Neues Logo: Seitenverhältnis 358 × 240 */
.header-logo{height:66px;}
@media(max-width:1100px){.header-logo{height:32px;}}

/* HEADER-NAVIGATION: nochmals 2px größer und etwas luftiger gesetzt */
.headline-nav a{font-size:25px;letter-spacing:-.7px;}
@media(max-width:700px){.headline-nav a{font-size:13px;letter-spacing:-.3px;}}

/* BILD-IN-BILD-ÜBERGÄNGE (View Transitions): Header, Seitenleiste und „Nach oben“ bleiben während des Wechsels stehen */
.top-headline{view-transition-name:site-header;}
.side-nav{view-transition-name:side-nav;}
.back-to-top{view-transition-name:to-top;}
::view-transition-group(site-header),::view-transition-group(side-nav),::view-transition-group(to-top){animation-duration:0s;}

/* Ausbau: der neue Bereich blendet weich in den alten hinein */
html[data-vt="dissolve"]::view-transition-old(root){animation:vtDissolveOut 1.4s cubic-bezier(.4,0,.2,1) both;}
html[data-vt="dissolve"]::view-transition-new(root){animation:vtDissolveIn 1.4s cubic-bezier(.4,0,.2,1) both;}
@keyframes vtDissolveOut{from{opacity:1;}to{opacity:0;transform:scale(1.035);filter:blur(3px);}}
@keyframes vtDissolveIn{from{opacity:0;transform:scale(.985);}to{opacity:1;}}

/* Partner: fliegt aus der linken oberen Ecke herein und legt sich über den alten Bereich, der abdunkelt */
html[data-vt="flyin"]::view-transition-old(root){animation:vtDim 1.2s ease both;mix-blend-mode:normal;}
html[data-vt="flyin"]::view-transition-new(root){animation:vtFlyIn 1.2s cubic-bezier(.2,.8,.2,1) both;transform-origin:0 0;mix-blend-mode:normal;
  box-shadow:0 30px 80px rgba(0,0,0,.6);}
@keyframes vtDim{to{filter:brightness(.4) blur(2px);}}
@keyframes vtFlyIn{
  from{opacity:0;transform:translate(-8vw,-8vh) scale(.3) rotate(-9deg);border-radius:28px;}
  25%{opacity:1;}
  to{opacity:1;transform:none;border-radius:0;}
}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}}

/* LIVE-ABZEICHEN oben rechts in den Kanal-Karten */
.live-badge{
  position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  font:700 11px/1 "Orbitron",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:#8f88a0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);overflow:hidden;
  transition:color .4s ease,background .4s ease,border-color .4s ease;
}
.live-dot{width:8px;height:8px;border-radius:50%;background:#625b72;flex:none;}
.live-badge.is-live{color:#fff;background:linear-gradient(135deg,#ff4d5e,#b81a2e);border-color:#ff9aa6;animation:badgePulse 1.6s ease-in-out infinite;}
.live-badge.is-live .live-dot{background:#fff;box-shadow:0 0 8px #fff;animation:badgeBlink 1s steps(1) infinite;}
/* Schimmer, der über das rote Abzeichen läuft */
.live-badge.is-live::after{
  content:"";position:absolute;inset:-50% -40%;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  animation:badgeShine 2.6s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,.55),0 0 14px rgba(255,77,94,.45);}50%{box-shadow:0 0 0 8px rgba(255,77,94,0),0 0 26px rgba(255,77,94,.75);}}
@keyframes badgeBlink{50%{opacity:.35;}}
@keyframes badgeShine{from{transform:translateX(-120%);}60%,to{transform:translateX(120%);}}
.channel-small .live-badge{top:12px;right:12px;}
@media(prefers-reduced-motion:reduce){.live-badge.is-live,.live-badge.is-live .live-dot,.live-badge.is-live::after{animation:none;}}

/* LIVE-LEISTE auf der Startseite: rechts, ca. 30px unter der Trennlinie der Navigation */
.live-strip{position:absolute;top:calc(85px + 30px);right:24px;z-index:31;display:flex;gap:10px;pointer-events:auto;}
.live-pill{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:9px 12px 9px 14px;border-radius:14px;text-decoration:none;color:#c8d4dd;
  background:linear-gradient(135deg,rgba(18,40,58,.6),rgba(3,10,18,.7));border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.live-pill > i{font-size:19px;color:#7d8a96;transition:color .4s ease,filter .4s ease;}
.live-pill-name{font:400 14px/1 "Bruno Ace SC",Arial,sans-serif;text-transform:lowercase;letter-spacing:.01em;}
.live-pill-state{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  font:700 10px/1 "Orbitron",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8f88a0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.live-pill:hover,.live-pill:focus-visible{transform:translateY(-2px);border-color:rgba(125,217,255,.6);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 18px rgba(41,155,215,.3);}
/* Live: Icon in Markenfarbe, rotes pulsierendes „LIVE“, Schimmer über der Pille */
.live-pill.is-live{border-color:rgba(255,154,166,.65);}
.live-pill-twitch.is-live > i{color:#a970ff;filter:drop-shadow(0 0 8px #a970ff);}
.live-pill-youtube.is-live > i{color:#ff3b30;filter:drop-shadow(0 0 8px #ff3b30);}
.live-pill-tiktok.is-live > i{color:#25f4ee;filter:drop-shadow(0 0 6px #25f4ee) drop-shadow(1px 1px 0 #fe2c55);}
.live-pill.is-live .live-pill-state{color:#fff;background:linear-gradient(135deg,#ff4d5e,#b81a2e);border-color:#ff9aa6;animation:badgePulse 1.6s ease-in-out infinite;}
.live-pill.is-live .live-dot{background:#fff;box-shadow:0 0 8px #fff;animation:badgeBlink 1s steps(1) infinite;}
.live-pill.is-live::after{
  content:"";position:absolute;inset:-50% -30%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  animation:badgeShine 3s ease-in-out infinite;
}
@media(max-width:700px){
  .live-strip{top:calc(85px + 14px);right:12px;gap:6px;}
  .live-pill{padding:7px 9px;gap:6px;border-radius:12px;}
  .live-pill-name{display:none;}
  .live-pill > i{font-size:16px;}
  .live-pill-state{padding:3px 6px;font-size:9px;}
}
@media(prefers-reduced-motion:reduce){.live-pill.is-live .live-pill-state,.live-pill.is-live .live-dot,.live-pill.is-live::after{animation:none;}}

/* LIVE-LEISTE schlicht: „LiveStatus“ + drei Icons (ca. 32px), grau = offline, grün = live, mit Signalpunkt */
.live-strip{top:calc(85px + 30px);right:24px;align-items:center;gap:16px;}
.live-strip-label{font:400 14px/1 "Bruno Ace SC",Arial,sans-serif;letter-spacing:.01em;color:#eef3f7;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.live-pill{
  width:32px;height:32px;padding:0;gap:0;justify-content:center;overflow:visible;isolation:auto;
  background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.live-pill:hover,.live-pill:focus-visible{transform:translateY(-2px);box-shadow:none;border:0;}
.live-pill > i{font-size:30px;color:#8a949c;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.live-pill-name{display:none;}
.live-pill .live-pill-state{position:absolute;top:-3px;right:-5px;padding:0;gap:0;background:none;border:0;animation:none;}
.live-pill .live-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.live-pill .live-dot{width:10px;height:10px;background:#6f7881;border:2px solid rgba(3,10,18,.85);box-shadow:none;animation:none;}
.live-pill::after{content:none;}
/* Live: Icon grün leuchtend, Punkt grün pulsierend */
.live-pill.is-live{border:0;}
.live-pill.is-live > i,.live-pill-twitch.is-live > i,.live-pill-youtube.is-live > i,.live-pill-tiktok.is-live > i{
  color:#35e07a;filter:drop-shadow(0 0 8px rgba(53,224,122,.75)) drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.live-pill.is-live .live-pill-state{background:none;border:0;animation:none;}
.live-pill.is-live .live-dot{background:#35e07a;animation:liveDotPulse 1.6s ease-in-out infinite;}
@keyframes liveDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(53,224,122,.7);}50%{box-shadow:0 0 0 7px rgba(53,224,122,0);}}
@media(max-width:700px){
  .live-strip{top:calc(85px + 14px);right:12px;gap:10px;}
  .live-strip-label{font-size:11px;}
  .live-pill{width:26px;height:26px;}
  .live-pill > i{font-size:24px;}
}
@media(prefers-reduced-motion:reduce){.live-pill.is-live .live-dot{animation:none;}}

/* HEADER rechts: nur noch der Besucherzähler, zentriert */
.headline-live{align-items:center;justify-content:center;}

/* SEITENLEISTE mit Partner: 7 Elemente. Grundhöhe 7 × (35 + 16) + 6 × 6 = 393px → halbe Höhe ca. 197px */
.side-nav{top:calc(50% + 42px - 197px);}

/* LIVE-LEISTE fest im Fenster (wie Header und Seitenleiste), Icons 64px, Schrift proportional größer */
.live-strip{position:fixed;top:calc(85px + 30px);right:24px;z-index:95;gap:20px;view-transition-name:live-strip;}
::view-transition-group(live-strip){animation-duration:0s;}
.live-strip-label{font-size:28px;}
.live-pill{width:64px;height:64px;}
.live-pill > i{font-size:60px;}
.live-pill .live-pill-state{top:-2px;right:-6px;}
.live-pill .live-dot{width:18px;height:18px;border-width:3px;}
@keyframes liveDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(53,224,122,.7);}50%{box-shadow:0 0 0 11px rgba(53,224,122,0);}}
@media(max-width:700px){
  .live-strip{top:calc(85px + 14px);right:12px;gap:10px;}
  .live-strip-label{font-size:14px;}
  .live-pill{width:34px;height:34px;}
  .live-pill > i{font-size:32px;}
  .live-pill .live-dot{width:11px;height:11px;border-width:2px;}
}

/* HEADER rechts: Besucherzähler 10px vom rechten Rand, senkrecht mittig */
.headline-live{align-items:flex-end;justify-content:center;padding-right:10px;}

/* LIVE-LEISTE: Zwischengröße 50px, Schrift und Signalpunkt anteilig */
.live-strip{gap:16px;}
.live-strip-label{font-size:22px;}
.live-pill{width:50px;height:50px;}
.live-pill > i{font-size:47px;}
.live-pill .live-dot{width:14px;height:14px;border-width:2px;}
@keyframes liveDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(53,224,122,.7);}50%{box-shadow:0 0 0 9px rgba(53,224,122,0);}}
@media(max-width:700px){
  .live-strip{gap:10px;}
  .live-strip-label{font-size:14px;}
  .live-pill{width:34px;height:34px;}
  .live-pill > i{font-size:32px;}
  .live-pill .live-dot{width:11px;height:11px;}
}

/* LIVE-LEISTE: Icons so groß wie die Icons der Seitenleiste im Ruhezustand (35px), Schrift bleibt 22px */
.live-pill{width:35px;height:35px;}
.live-pill > i{font-size:35px;}
.live-pill .live-pill-state{top:-3px;right:-6px;}
.live-pill .live-dot{width:11px;height:11px;border-width:2px;}
@keyframes liveDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(53,224,122,.7);}50%{box-shadow:0 0 0 7px rgba(53,224,122,0);}}

/* HEADER-NAVIGATION: Schatten hinter der Schrift (als Filter, weil die Schrift per Verlauf eingefärbt ist) */
.headline-nav a,.top-headline .headline-nav a{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.headline-nav a:hover,.headline-nav a:focus-visible,
.top-headline .headline-nav a:hover,.top-headline .headline-nav a:focus-visible,
.top-headline.is-scrolled .headline-nav a:hover,.top-headline.is-scrolled .headline-nav a:focus-visible{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 0 6px #299bd755);
}