/* ERZENGAMΞS – Stylesheet v2
   Gestaltungsidee: Das Logo gibt den Ton an. Electric Blue auf tiefem Nachtblau,
   Kanten mit Fase wie am Wappen, Licht statt Flächen. Die Autobahn-Schrift bleibt
   als Erbe der VTC und taucht im Abfahrtsboard wieder auf.
   Alle Klassen der alten Version bleiben erhalten, damit Unterseiten und Scripts
   ohne Änderungen weiterlaufen. */

@font-face{font-family:"EG Signage";src:url("/assets/fonts/eg-signage-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"EG Signage";src:url("/assets/fonts/eg-signage-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Grundfarben */
  --bg:#05070d;
  --bg-2:#0a0f1b;
  --bg-3:#111a2c;
  --surface:linear-gradient(180deg,rgba(22,34,60,.62),rgba(10,15,27,.72));
  --line:rgba(130,165,255,.13);
  --line-2:rgba(130,165,255,.26);
  --text:#eaf1ff;
  --soft:#c2cce0;
  --muted:#8b97b1;
  --blue:#2f7bff;
  --blue-2:#4f92ff;
  --blue-deep:#123a8c;
  --cyan:#66d3ff;
  --link:#8fbcff;
  --mark:#ffc531;
  --live:#ff3d5e;
  --ok:#3ddc97;
  --bad:#ff7a7a;
  --glow:0 0 0 1px rgba(79,146,255,.35),0 10px 40px -8px rgba(47,123,255,.55);

  /* Alte Namen, damit bigtimefm.css und ältere Seiten weiter passen */
  --asphalt:var(--bg);
  --asphalt-2:var(--bg-2);
  --asphalt-3:var(--bg-3);
  --sign:var(--blue);
  --sign-hover:var(--blue-2);

  --f-sign:"EG Signage","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --max:1200px;
  --gutter:clamp(16px,4vw,32px);
  --cut:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --head-h:76px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--f-body);overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 85% -10%,rgba(47,123,255,.20),transparent 60%),
    radial-gradient(800px 520px at -10% 30%,rgba(18,58,140,.28),transparent 65%),
    radial-gradient(900px 600px at 50% 120%,rgba(102,211,255,.08),transparent 60%),
    var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(130,165,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(130,165,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%)}
::selection{background:rgba(47,123,255,.55);color:#fff}
time,.meta,.row time,.status-list,.track-row time,.show-time,.num{font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .2s}
a:hover{color:#cfe1ff}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-sign);font-weight:700;line-height:1.02;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,6.4vw,4.8rem);text-transform:uppercase;letter-spacing:.015em}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);text-transform:uppercase;letter-spacing:.02em}
h3{font-size:1.4rem;line-height:1.15}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--cyan);color:#04121f;padding:8px 12px;z-index:200;font-weight:700;border-radius:6px}
.skip:focus{left:8px}
[hidden]{display:none!important}
/* Das Ξ im Namen wird gezeichnet, damit es in jeder Schrift gleich aussieht */
.xi{--xc:var(--blue-2);display:inline-block;width:.5em;height:.715em;margin:0 .035em;color:transparent;overflow:hidden;vertical-align:baseline;text-indent:200%;white-space:nowrap;
  background:linear-gradient(var(--xc),var(--xc)) 0 0/100% .125em no-repeat,linear-gradient(var(--xc),var(--xc)) 50% 50%/78% .125em no-repeat,linear-gradient(var(--xc),var(--xc)) 0 100%/100% .125em no-repeat}

/* Schmale Scrollleiste im Markenblau */
@supports (scrollbar-color:auto){html{scrollbar-color:#24406f var(--bg);scrollbar-width:thin}}

/* Scroll-Fortschritt (wird per JS eingefügt) */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:90;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(102,211,255,.7);pointer-events:none}

/* ---------- Kopfzeile ---------- */
.site-head{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
.site-head.scrolled{background:rgba(5,7,13,.72);border-bottom-color:var(--line);box-shadow:0 10px 40px -20px rgba(0,0,0,.9)}
@supports (backdrop-filter:blur(8px)){.site-head.scrolled{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}}
@supports not (backdrop-filter:blur(8px)){.site-head.scrolled{background:rgba(5,7,13,.96)}}
.nav{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:var(--head-h);display:flex;align-items:center;gap:24px;transition:height .35s var(--ease)}
.site-head.scrolled .nav{height:64px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-family:var(--f-sign);font-weight:700;font-size:1.4rem;letter-spacing:.05em;white-space:nowrap}
.brand img{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(47,123,255,.55));transition:transform .5s var(--ease),filter .3s}
.brand:hover{color:#fff}
.brand:hover img{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 16px rgba(47,123,255,.9))}
.menu-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600}
.navlinks{display:flex;align-items:center;gap:2px;margin-left:auto}
.navlinks a,.drop>button{position:relative;display:block;color:#cdd6e8;text-decoration:none;background:none;border:0;padding:10px 13px;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:color .2s,background .2s}
.navlinks>a::after,.drop>button::before{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transition:transform .3s var(--ease)}
.navlinks>a:hover::after,.drop:hover>button::before,.drop.open>button::before,.navlinks>a[aria-current="page"]::after{transform:scaleX(1)}
.navlinks a:hover,.drop>button:hover,.drop.open>button{color:#fff}
.navlinks a[aria-current="page"]{color:#fff}
.drop{position:relative}
.drop>button::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.drop.open>button::after{transform:translateY(0) rotate(225deg)}
.dropmenu{position:absolute;top:calc(100% + 8px);left:-6px;min-width:230px;padding:8px;border-radius:14px;
  background:rgba(10,15,27,.94);border:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:20% 0;transition:opacity .22s,transform .25s var(--ease),visibility 0s .25s}
@supports (backdrop-filter:blur(8px)){.dropmenu{background:rgba(10,15,27,.82);backdrop-filter:blur(16px)}}
.drop.open .dropmenu{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .25s var(--ease),visibility 0s}
@media (hover:hover) and (min-width:921px){
  .drop:hover .dropmenu{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .25s var(--ease),visibility 0s}
  .drop:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
}
.dropmenu a{padding:9px 12px;border-radius:8px;display:flex;align-items:center;gap:10px}
.dropmenu a::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--line-2);transform:rotate(45deg);transition:background .2s,box-shadow .2s}
.dropmenu a:hover{background:rgba(47,123,255,.12)}
.dropmenu a:hover::before,.dropmenu a[aria-current="page"]::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.navlinks .nav-discord{margin-left:10px;color:#fff;font-weight:700;padding:10px 18px;background:linear-gradient(135deg,var(--blue),#1b5be0);border-radius:9px;box-shadow:var(--glow);transition:transform .2s,box-shadow .3s,filter .2s}
.navlinks .nav-discord::after{display:none}
.navlinks .nav-discord:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 0 0 1px rgba(102,211,255,.5),0 12px 40px -6px rgba(47,123,255,.8)}

/* ---------- Brotkrümel (früher Schild) ---------- */
.plate{display:inline-flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  padding:7px 12px;border:1px solid rgba(102,211,255,.28);border-radius:999px;background:rgba(102,211,255,.06);margin-bottom:24px}
.plate::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.plate a{color:var(--soft);text-decoration:none}
.plate a:hover{color:#fff}
.plate .sep{opacity:.5}

/* Alter Wegweiser bleibt nutzbar, falls er irgendwo noch steht */
.sign{background:var(--surface);border:1px solid var(--line-2);color:#fff;border-radius:16px;padding:8px}
.sign-inner{border-radius:10px;overflow:hidden}
.sign-row{display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:center;padding:16px 18px;color:#fff;text-decoration:none;border-top:1px solid var(--line)}
.sign-row:first-child{border-top:0}
.sign-row:hover{background:rgba(47,123,255,.1);color:#fff}
.sign-arrow{font-family:var(--f-sign);font-weight:700;font-size:2.2rem;line-height:1;text-align:center;color:var(--cyan)}
.sign-dest{font-family:var(--f-sign);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;text-transform:uppercase}
.sign-sub{grid-column:2;font-size:.92rem;color:var(--muted)}

/* ---------- Seitenkopf der Unterseiten ---------- */
.pagehead{position:relative;padding:clamp(56px,9vw,110px) 0 clamp(36px,5vw,56px);overflow:hidden;isolation:isolate}
.pagehead::before{content:"";position:absolute;right:max(-120px,calc((100vw - var(--max))/2 - 120px));top:50%;width:min(520px,70vw);aspect-ratio:1;transform:translateY(-50%) rotate(-8deg);z-index:-1;
  background:url("/assets/logo/v2/logo-512.webp") center/contain no-repeat;opacity:.1;
  -webkit-mask-image:radial-gradient(circle,#000 35%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,transparent 70%);animation:floaty 9s ease-in-out infinite}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue) 30%,var(--cyan) 50%,var(--blue) 70%,transparent);opacity:.6}
.pagehead h1{max-width:18ch;animation:rise .9s var(--ease) both}
.pagehead .lead{animation:rise .9s .12s var(--ease) both}
.pagehead .plate{animation:rise .8s var(--ease) both}
.pagehead .actions{animation:rise .9s .2s var(--ease) both}

/* ---------- Bereiche ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,72px);align-items:center}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--soft);max-width:60ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.section{position:relative;padding:clamp(56px,8vw,96px) 0}
.section+.section::before{content:"";position:absolute;top:0;left:50%;width:min(var(--max),calc(100% - 2*var(--gutter)));transform:translateX(-50%);height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.section-title h2{margin:0;display:flex;align-items:center;gap:14px}
.section-title h2::before{content:"";flex:none;width:12px;height:12px;background:linear-gradient(135deg,var(--cyan),var(--blue));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 14px var(--blue)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;box-shadow:0 0 8px currentColor}
.livebar{position:relative;padding:14px 0;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(47,123,255,.10),rgba(10,15,27,.5) 40%,rgba(10,15,27,.5) 60%,rgba(47,123,255,.10))}
.livebar p{margin:0;color:var(--soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.livebar p::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:ping 2s infinite}
.livebar strong{color:#fff;font-size:1.15em;font-family:var(--f-sign);letter-spacing:.03em}

/* Spalten: jetzt als Glas-Karten mit Lichtkante */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.col,.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),border-color .3s,box-shadow .4s}
.col::before,.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(47,123,255,.20),transparent 45%)}
.col::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan),transparent);border-radius:0 0 2px 2px}
.col:hover,.tile:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -30px rgba(47,123,255,.55)}
.col:hover::before,.tile:hover::before{opacity:1}
.col h3{text-transform:uppercase;letter-spacing:.04em}
.col p{color:var(--soft)}
.col p:last-child{margin-bottom:0}

/* Pfeil-Links */
.textlink{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--link)}
.textlink::after{content:"→";transition:transform .3s var(--ease)}
.textlink:hover::after{transform:translateX(5px)}

/* Listen (News, Changelog, Downloads) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows>li{border-bottom:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:18px 14px;color:var(--text);text-decoration:none;transition:background .25s,padding .3s var(--ease)}
.row::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--cyan),var(--blue));transform:scaleY(0);transition:transform .3s var(--ease)}
a.row:hover{background:linear-gradient(90deg,rgba(47,123,255,.12),transparent);color:#fff;padding-left:22px}
a.row:hover::before{transform:scaleY(1)}
.row time,.row .meta{color:var(--muted);font-size:.9rem;font-family:var(--f-mono)}
.row strong{font-weight:650}
.row .go{color:var(--link);font-size:.92rem;white-space:nowrap}

/* Artikel (News-Seite) */
.article{padding:36px 0;border-bottom:1px solid var(--line);max-width:780px}
.article:first-child{padding-top:0}
.article h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.article .meta{color:var(--cyan);font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em;margin-bottom:16px}
.article img{border-radius:14px;margin:6px 0 22px;border:1px solid var(--line)}
.article p,.article li{color:var(--soft)}

/* Kacheln für Personen und Partner */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{padding:22px 22px 20px}
.tile h3{margin-bottom:4px}
.tile .role{color:var(--cyan);font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.tile p{color:var(--soft);font-size:.98rem;margin:0}
figure.tile{margin:0}
.tile img{border-radius:10px;margin-bottom:12px;width:100%;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile .links{display:flex;gap:14px;margin-top:14px;font-size:.95rem}

/* Status-Tags mit Fase */
.tag{display:inline-block;font-family:var(--f-sign);font-weight:700;font-size:.85rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px 5px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:rgba(139,151,177,.16);color:var(--soft);white-space:nowrap}
.tag.build{background:var(--mark);color:#1a1405}
.tag.done{background:var(--blue);color:#fff}
.tag.ok{background:rgba(61,220,151,.16);color:var(--ok)}
.tag.bad{background:rgba(255,122,122,.16);color:var(--bad)}

/* Roadmap */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.lane{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.lane h3{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
.lane h3 small{font-family:var(--f-mono);font-weight:400;font-size:.8rem;color:var(--muted)}
.lane ul{list-style:none;margin:0;padding:0}
.lane li{padding:14px 0;border-bottom:1px solid var(--line)}
.lane li:last-child{border-bottom:0}
.lane li strong{display:block;margin-bottom:4px}
.lane li p{margin:0;color:var(--soft);font-size:.97rem}
.lane .none{color:var(--muted);font-size:.95rem;padding-top:12px}

/* FAQ */
.faq{max-width:820px;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--line-2);box-shadow:0 20px 50px -30px rgba(47,123,255,.6)}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:650;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding:0 20px 20px;margin:0;color:var(--soft)}

/* Text-Seiten */
.prose{max-width:72ch}
.prose h2{font-size:1.7rem;margin-top:1.7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin-top:1.4em}
.prose p,.prose li{color:var(--soft)}
.prose ul{padding-left:1.2em}
.prose li::marker{color:var(--cyan)}
.note{border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(102,211,255,.08),transparent);padding:12px 0 12px 18px;color:var(--soft);margin:24px 0;border-radius:0 10px 10px 0}

/* ---------- Knöpfe mit Fase wie am Wappen ---------- */
.btn{--c:var(--cut);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border:0;background:none;color:var(--text);
  text-decoration:none;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:transform .25s var(--ease),filter .25s,color .2s}
.btn::before,.btn::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.btn::before{inset:0;background:var(--line-2);transition:background .3s}
.btn::after{inset:1.5px;background:var(--bg-2);transition:background .3s}
.btn:hover{color:#fff;transform:translateY(-2px)}
.btn:hover::before{background:linear-gradient(135deg,var(--cyan),var(--blue))}
.btn:hover::after{background:#0d1526}
.btn.primary{color:#fff;filter:drop-shadow(0 8px 24px rgba(47,123,255,.45))}
.btn.primary::before{background:linear-gradient(135deg,#6aa6ff,var(--blue) 45%,#1a4fd0)}
.btn.primary::after{inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%) -150% 0/250% 100% no-repeat;transition:background-position .8s var(--ease)}
.btn.primary:hover{filter:drop-shadow(0 12px 32px rgba(47,123,255,.75)) brightness(1.08)}
.btn.primary:hover::after{background-position:150% 0}
.btn.big{min-height:58px;padding:14px 32px;font-size:1.08rem;--c:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn svg{width:20px;height:20px;flex:none}

/* Formulare */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px}
.field{display:grid;gap:6px;min-width:0}
.field.full,.form .full{grid-column:1/-1}
.field label,.field>span{font-size:.95rem;font-weight:650;color:#dfe6f3}
.field small{color:var(--muted);font-size:.88rem}
input,select,textarea{width:100%;background:rgba(5,8,15,.7);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;min-height:48px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(47,123,255,.2),0 0 24px -4px rgba(47,123,255,.5)}
input[type=range]{padding:0;min-height:0;background:none;border:0;box-shadow:none;accent-color:var(--blue)}
textarea{min-height:150px;resize:vertical}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-foot p{margin:0;color:var(--muted);font-size:.93rem;max-width:44ch}
.form-status{min-height:1.5em;margin:0;font-weight:650}
.form-status.ok{color:var(--ok)}
.form-status.err{color:var(--bad)}

/* Tickets */
.ticket-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,30px)}
.panel h2{font-size:1.8rem}
.panel .form{grid-template-columns:1fr 1fr}
.stack{display:grid;gap:14px}
.saved{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.saved h3{font-size:1.1rem;margin-bottom:4px}
.saved>p{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.saved-list{display:grid;gap:6px}
.saved-item{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:rgba(5,8,15,.7);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .2s}
.saved-item:hover{border-color:var(--blue-2)}
.saved-item small{display:block;color:var(--muted)}
.secret{background:var(--mark);color:#16130a;border-radius:14px;padding:18px;margin-bottom:22px;display:grid;gap:10px}
.secret strong{font-family:var(--f-sign);font-size:1.3rem}
.secret p{margin:0}
.secret code{display:block;background:#16130a;color:var(--mark);padding:10px 12px;border-radius:8px;word-break:break-all;font-size:1rem}
.secret .btn{justify-self:start;color:#16130a}
.secret .btn::before{background:#16130a}.secret .btn::after{background:var(--mark)}
.secret .btn:hover{color:var(--mark)}.secret .btn:hover::after{background:#16130a}
.thread-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:18px 0 20px}
.thread-head h2{margin:0 0 4px}
.thread-head p{margin:0;color:var(--muted)}
.messages{display:grid;gap:12px;max-height:60vh;overflow:auto;padding-right:4px;margin-bottom:20px}
.msg{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(5,8,15,.7);max-width:88%}
.msg.team{justify-self:end;background:rgba(18,58,140,.45);border-color:rgba(79,146,255,.4)}
.msg.system{justify-self:center;max-width:100%;background:transparent;border-style:dashed;color:var(--muted);font-size:.95rem}
.msg header{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--muted);margin-bottom:6px}
.msg header strong{color:var(--text)}
.msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.reply-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.back{background:none;border:0;color:var(--link);padding:0;cursor:pointer;font-weight:650}

/* Status */
.status-list{list-style:none;margin:0;padding:0;max-width:660px;display:grid;gap:8px}
.status-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}

/* Werbung */
.ad{border:1px dashed var(--line-2);border-radius:14px;padding:clamp(18px,3vw,26px);max-width:780px}
.ad small{display:block;color:var(--muted);margin-bottom:6px}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;background:#eaf1ff;color:#07101f;padding:12px 18px;border-radius:10px;font-weight:650;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.2);max-width:calc(100% - 32px);animation:rise .4s var(--ease)}
.toast.err{background:#ffd5d0}

.empty{color:var(--muted);padding:12px 0}
.loading{color:var(--muted)}
.loading::after{content:"";display:inline-block;width:1em;height:1em;margin-left:10px;vertical-align:-3px;border:2px solid var(--line-2);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}

/* Nach-oben-Knopf (per JS) */
.to-top{position:fixed;right:20px;bottom:20px;z-index:70;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;background:rgba(10,15,27,.85);color:#fff;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),border-color .2s,box-shadow .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--cyan);box-shadow:0 0 24px rgba(47,123,255,.6)}
.to-top svg{width:18px;height:18px}
.radio-dock~.to-top,body:has(.radio-dock) .to-top{bottom:96px}

/* ---------- Fußzeile ---------- */
.footer{position:relative;margin-top:clamp(24px,4vw,48px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,15,27,.6),#03050a);padding:64px 0 28px;font-size:.95rem;overflow:hidden;isolation:isolate}
.footer::before{content:"";position:absolute;left:50%;top:-1px;width:min(900px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 30px 4px rgba(47,123,255,.45)}
.footgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px}
.footer h2{font-family:var(--f-mono);font-size:.75rem;font-weight:600;color:var(--cyan);margin:0 0 14px;letter-spacing:.14em;text-transform:uppercase}
.footer h2::before{display:none}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:8px 0}
.footer a{color:#aab5cb;text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer .about p{color:var(--muted);max-width:34ch;margin-top:14px}
.footer .socials{display:flex;gap:8px;margin-top:18px}
.footer .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);color:var(--soft);transition:border-color .2s,color .2s,box-shadow .3s,transform .25s var(--ease)}
.footer .socials a:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 22px rgba(47,123,255,.55);transform:translateY(-2px)}
.footer .socials svg{width:18px;height:18px}
.footmark{margin:56px 0 0;font-family:var(--f-sign);font-weight:700;font-size:min(13.2vw,11.2rem);overflow:hidden;line-height:.8;letter-spacing:.01em;text-align:center;white-space:nowrap;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(130,165,255,.22);background:linear-gradient(180deg,rgba(47,123,255,.22),transparent 85%);-webkit-background-clip:text;background-clip:text}
.footmark .xi{--xc:rgba(79,146,255,.28);-webkit-text-stroke:0}
.footbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:#76819a;font-size:.88rem}
.footbottom .sys{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none}
.footbottom .sys::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.footbottom .sys.ok::before{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.footbottom .sys.bad::before{background:var(--bad);box-shadow:0 0 10px var(--bad)}

/* ---------- Scroll-Animationen ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(-50%) rotate(-8deg)}50%{transform:translateY(calc(-50% - 14px)) rotate(-6deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}80%,100%{box-shadow:0 0 0 10px rgba(61,220,151,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Mobil ---------- */
@media (max-width:920px){
  :root{--head-h:66px}
  .menu-toggle{display:inline-flex}
  .site-head{background:rgba(5,7,13,.8)}
  @supports (backdrop-filter:blur(8px)){.site-head{backdrop-filter:blur(14px)}}
  .navlinks{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#060911;box-shadow:0 30px 60px -10px rgba(0,0,0,.9);border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;max-height:calc(100vh - 66px);overflow:auto;
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s .4s}
  .navlinks.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease),visibility 0s}
  .navlinks a,.drop>button{padding:13px 4px;width:100%;text-align:left;border-radius:0;font-size:1.02rem}
  .navlinks>a::after,.drop>button::before{display:none}
  .drop>button{display:flex;justify-content:space-between;align-items:center}
  .dropmenu{position:static;box-shadow:none;border:0;border-left:1px solid var(--line-2);border-radius:0;background:transparent;padding:0 0 6px 12px;margin-left:4px;opacity:1;visibility:visible;transform:none;display:none}
  .drop.open .dropmenu{display:block}
  .navlinks .nav-discord{margin:12px 0 0;text-align:center;border-radius:10px}
  .navlinks a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--cyan);padding-left:12px}
  .hero-grid,.ticket-grid{grid-template-columns:1fr}
  .cols,.cols.two{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .footer .about{grid-column:1/-1}
  .pagehead::before{opacity:.08;right:-30%}
}
@media (max-width:600px){
  body{font-size:1rem}
  .form,.panel .form{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:2px;padding:14px 4px}
  a.row:hover{padding-left:12px}
  .row .go{display:none}
  .sign-row{grid-template-columns:36px 1fr;padding:13px 12px;gap:4px 10px}
  .sign-arrow{font-size:1.9rem}
  .brand{font-size:1.2rem}
  .brand img{width:34px;height:34px}
  .msg{max-width:100%}
  .btn{width:100%}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none}
}
.status-time{margin-top:12px}
.brand-logo{margin-bottom:24px;filter:drop-shadow(0 0 30px rgba(47,123,255,.5))}

/* Markenseite */
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.brand-tile{margin:0;border-radius:16px;border:1px solid var(--line);min-height:220px;display:grid;grid-template-rows:1fr auto;place-items:center;padding:28px 24px 16px;gap:16px}
.brand-tile.wide{grid-column:span 3;min-height:200px}
.brand-tile.wide img{width:min(480px,90%);height:auto}
.brand-tile img{width:140px;height:140px}
.brand-tile.wide img{height:auto}
.brand-tile.dark{background:#05070D}
.brand-tile.light{background:#F3F5FA;border-color:transparent}
.brand-tile.blue{background:#2F7BFF;border-color:transparent}
.brand-tile figcaption{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brand-tile.light figcaption{color:#4a5568}.brand-tile.blue figcaption{color:#e6efff}
.swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.swatches li{border-radius:14px;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:110px auto auto;background:var(--bg-2)}
.swatches li::before{content:"";background:var(--c)}
.swatches strong{padding:12px 14px 2px}
.swatches code{padding:0 14px 14px;color:var(--muted);font-family:var(--f-mono);font-size:.85rem}
@media (max-width:920px){.brand-grid{grid-template-columns:1fr 1fr}.brand-tile.wide{grid-column:1/-1}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Downloads */
.dl-pack{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:24px;border:1px solid var(--line-2);background:var(--surface);position:relative;overflow:hidden}
.dl-pack::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan),transparent)}
.dl-pack-prev{aspect-ratio:1;border-radius:18px;background:#0A1530;display:grid;place-items:center}
.dl-pack-prev img{width:62%;height:auto;filter:drop-shadow(0 0 30px rgba(47,123,255,.55))}
.dl-pack h2{margin-bottom:12px}
.dl-pack-copy>p{color:var(--soft);max-width:60ch}
.dl-facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dl-facts li{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:.9rem;color:var(--soft)}
.dl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dl-card{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .45s var(--ease),border-color .3s,box-shadow .4s}
.dl-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -30px rgba(47,123,255,.55)}
.dl-card.wide{grid-column:span 2}
.dl-prev{height:180px;display:grid;place-items:center;padding:24px}
.dl-prev img{max-width:100%;max-height:120px;width:auto;height:auto}
.dl-card:not(.wide) .dl-prev img{height:120px}
.dl-card.wide .dl-prev img{max-height:110px}
.dl-prev.dark{background:#05070D}
.dl-prev.light{background:#F3F5FA}
.dl-prev.blue{background:#2F7BFF}
.dl-body{padding:18px 18px 18px;display:flex;flex-direction:column;gap:6px;flex-grow:1}
.dl-body h3{font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;margin:0}
.dl-body p{margin:0;color:var(--muted);font-size:.92rem}
.dl-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.dl-btn{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:9px 14px;border-radius:10px;border:1px solid var(--line-2);background:rgba(5,8,15,.6);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;transition:border-color .2s,background .2s,box-shadow .3s}
.dl-btn::before{content:"↓";color:var(--cyan)}
.dl-btn small{font-weight:400;color:var(--muted);font-size:.78rem}
.dl-btn:hover{border-color:var(--cyan);background:rgba(47,123,255,.15);color:#fff;box-shadow:0 0 20px -6px rgba(47,123,255,.8)}
.dl-card.full{grid-column:1/-1}
.dl-card.full .dl-prev{height:260px}
.dl-prev.fill{padding:0;overflow:hidden}
.dl-prev.fill img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover}
.dl-card:not(.wide) .dl-prev.fill.round img,.dl-prev.round img{width:128px;height:128px;border-radius:50%;object-fit:cover}
.dl-prev.round{padding:24px}
.dl-card:not(.wide):not(.full) .dl-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.dl-card:not(.wide):not(.full) .dl-btn{flex-direction:column;align-items:center;gap:2px;padding:8px 6px;text-align:center}
.dl-card:not(.wide):not(.full) .dl-btn::before{display:none}
@media (max-width:1020px){.dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.dl-pack{grid-template-columns:1fr}.dl-pack-prev{max-width:220px}.dl-grid{grid-template-columns:1fr}.dl-card.wide,.dl-card.full{grid-column:auto}.dl-card.full .dl-prev{height:160px}}

/* Personen */
.person{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.person .av{width:56px;height:56px;display:grid;place-items:center;font-family:var(--f-sign);font-weight:700;font-size:1.3rem;letter-spacing:.04em;color:#fff;background:#0F1F44;border:1px solid var(--line-2);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.person h3{margin:2px 0 4px;font-size:1.3rem}
.person .role{margin-bottom:8px}
.person.g-lead .av{background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent}
.person.g-mgmt .av{background:var(--blue);border-color:transparent}
.person.g-drivers .av{background:#0A1530;color:var(--cyan)}
.person.g-partner .av{background:transparent;color:var(--muted)}
.people.leaders{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.people.leaders .person{padding:26px 24px;border-color:var(--line-2)}
.people.leaders .person .av{width:72px;height:72px;font-size:1.6rem}
.people.leaders .person{grid-template-columns:72px minmax(0,1fr)}
.pgroup+.pgroup{margin-top:44px}
.pgroup-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pgroup-head h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.pgroup-head .count{min-width:30px;height:30px;padding:0 8px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line-2);font-family:var(--f-mono);font-size:.85rem;color:var(--cyan)}
.psummary{margin:0 0 28px;color:var(--soft);font-size:1.05rem}
.psummary strong{font-family:var(--f-sign);font-size:1.5rem;color:#fff;letter-spacing:.02em}
.pnote{margin:36px 0 0;color:var(--muted)}

/* Mitglieder aus Discord */
.dlive{margin:18px 0 0;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,15,27,.6);color:var(--soft);font-size:.95rem;animation:rise .9s .25s var(--ease) both}
.dlive::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);animation:ping 2s infinite}
.dlive strong{color:#fff;font-family:var(--f-sign);font-size:1.15rem;letter-spacing:.02em}
.dmembers{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
/* Mitglieder nach Kategorien */
.mgroup+.mgroup{margin-top:44px}
.mgroup-head{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.mgroup-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.mgroup-head h2 i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 12px currentColor}
.mgroup-head .mcount{margin-left:2px;padding:2px 10px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--f-body);font-size:.9rem;font-weight:600;color:var(--soft);letter-spacing:0}
.mgroup-head p{margin:6px 0 0;color:var(--muted)}
.dmember{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:16px}
.dav{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#0F1F44;box-shadow:0 0 0 2px var(--bg-2),0 0 0 3px var(--line-2)}
.dav.av{display:grid;place-items:center;font-family:var(--f-sign);font-weight:700;font-size:1.35rem;color:#fff;clip-path:none}
.dmember h3{margin:0 0 4px;font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drole{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;color:var(--soft)}
.drole i{width:10px;height:10px;border-radius:50%;flex:none}
.since{margin:4px 0 0;font-size:.82rem;color:var(--muted)}
.optin{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:24px;border:1px solid var(--line-2);background:var(--surface)}
.steps{margin:16px 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:center;color:var(--soft)}
.steps li::before{content:counter(s);flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(47,123,255,.18);border:1px solid rgba(102,211,255,.35);color:#fff;font-family:var(--f-sign);font-weight:700}
.optin-links{display:grid;gap:12px}
.card-link{display:grid;gap:2px;padding:18px 20px;border-radius:14px;border:1px solid var(--line-2);background:rgba(5,8,15,.5);color:var(--text);text-decoration:none;transition:border-color .2s,transform .3s var(--ease)}
.card-link strong{font-family:var(--f-sign);font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em}
.card-link strong::after{content:" →";color:var(--cyan)}
.card-link span{color:var(--muted);font-size:.92rem}
.card-link:hover{border-color:var(--cyan);transform:translateX(4px);color:#fff}
@media (max-width:820px){.optin{grid-template-columns:1fr}}