/* Belux96 – gemeinsames Aussehen aller Seiten (Schriften liegen auf dieser Seite, OFL) */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#060a14; --bg2:#101c3e; --line:rgba(255,255,255,.14); --surface:rgba(255,255,255,.06);
  --ink:#f3f6ff; --text:#c9d2ea; --muted:#93a0bf; --accent:#1f6bff; --soft:#9fc0ff;
  --gold:#f5c542; --silver:#d3dbeb; --bronze:#dd9559; --live:#ff4d5e;
  --bc:"Barlow Condensed","Arial Narrow",sans-serif;
  --w:980px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:radial-gradient(1200px 700px at 100% -10%, rgba(31,107,255,.28), transparent 60%), linear-gradient(160deg, var(--bg2), var(--bg) 55%);
  background-color:var(--bg); background-attachment:fixed; color:var(--ink);
  font:500 16px/1.55 "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;}
main{flex:1 0 auto}
a{color:var(--soft)}
a:focus-visible, button:focus-visible{outline:2px solid #fff; outline-offset:2px}
.skip{position:absolute; left:-9999px; top:8px; z-index:50; background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px}
.skip:focus{left:12px}

/* ---------- Kopfzeile mit Menü ---------- */
.top{position:sticky; top:0; z-index:20; background:rgba(6,10,20,.84); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:var(--w); margin:0 auto; padding:0 16px; height:58px; display:flex; align-items:center; gap:14px}
.logo{position:relative; display:inline-block; padding:5px 12px 4px; transform:skewX(-12deg); background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.35); border-bottom:none; color:#fff; text-decoration:none; flex:none}
.logo::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:3px; background:var(--accent)}
.logo span{display:inline-block; transform:skewX(12deg); font:800 21px/1 var(--bc); letter-spacing:.14em}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{font:700 17px/1 var(--bc); letter-spacing:.07em; text-transform:uppercase; color:#c5cde3; text-decoration:none; padding:10px 11px 9px; border-radius:9px; white-space:nowrap; transition:background .15s, color .15s}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a[aria-current="page"]{color:#fff; background:rgba(31,107,255,.2); box-shadow:inset 0 -3px 0 var(--accent)}
.tw{display:inline-flex; align-items:center; gap:7px; font:600 15px/1 "Barlow",sans-serif; color:#fff; text-decoration:none; background:var(--accent); border:1.5px solid var(--accent); padding:9px 13px; border-radius:10px; flex:none; white-space:nowrap}
.tw:hover{filter:brightness(1.1)}
.tw i{width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25)}
@media (max-width:820px){
  .top{position:relative}
  .top-in{flex-wrap:wrap; height:auto; padding:10px 12px 0; gap:10px 12px}
  .tw{margin-left:auto; padding:8px 11px; font-size:14px}
  .tw .lg{display:none}
  .nav{order:3; flex:1 0 100%; justify-content:space-between; margin:0 -6px; padding:2px 0 8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:clamp(12.5px,3.6vw,16px); letter-spacing:.035em; padding:9px 6px 8px; flex:none}
}

/* ---------- Seiteninhalt ---------- */
.page{max-width:var(--w); margin:0 auto; padding:34px 16px 44px}
.kicker{display:inline-block; position:relative; padding:5px 12px 4px; transform:skewX(-12deg); background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.35); border-bottom:none}
.kicker::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:3px; background:var(--accent)}
.kicker span{display:inline-block; transform:skewX(12deg); font:800 15px/1 var(--bc); letter-spacing:.2em; text-transform:uppercase}
h1{font:800 clamp(44px,8vw,84px)/.9 var(--bc); text-transform:uppercase; letter-spacing:.005em; margin:16px 0 12px}
.lead{font-size:clamp(17px,2.1vw,20px); line-height:1.5; color:var(--text); max-width:60ch; margin:0}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 16px/1 "Barlow",sans-serif; padding:12px 17px; border-radius:11px; border:1.5px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--surface); border-color:var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.1); filter:none}
.panel{position:relative; overflow:hidden; margin-top:22px; padding:clamp(18px,3vw,30px); border-radius:16px; border:1px solid var(--line);
  background:radial-gradient(420px 260px at 100% 0%, rgba(31,107,255,.2), rgba(31,107,255,0) 100%), linear-gradient(135deg, rgba(16,28,62,.92), rgba(4,7,14,.92));}
.panel > h2, .h2{font:800 clamp(26px,3.6vw,34px)/1 var(--bc); text-transform:uppercase; letter-spacing:.03em; margin:0 0 16px; padding-bottom:12px; border-bottom:3px solid; border-image:linear-gradient(90deg, var(--accent), rgba(31,107,255,0)) 1}
.panel p{color:var(--text); margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.small{font-size:14px; color:var(--muted)!important}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px}
.box{padding:16px 18px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1)}
.box h3{font:800 22px/1.05 var(--bc); text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px}
.box p{margin:0; color:var(--text)}
.num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--accent); font:800 20px/1 var(--bc); margin-bottom:10px}
code, .cmd{font:700 17px/1 var(--bc); letter-spacing:.04em; color:#fff; background:rgba(31,107,255,.22); border:1px solid rgba(159,192,255,.35); border-radius:7px; padding:3px 7px 2px; white-space:nowrap}
ul.list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
ul.list li{position:relative; padding-left:24px; color:var(--text)}
ul.list li::before{content:""; position:absolute; left:3px; top:.55em; width:9px; height:9px; transform:skewX(-12deg); background:var(--accent)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:14px; margin-top:22px}
.tile{display:flex; flex-direction:column; gap:6px; min-height:150px; padding:18px; border-radius:15px; border:1px solid var(--line); text-decoration:none; color:var(--ink);
  background:linear-gradient(160deg, rgba(31,107,255,.28), rgba(31,107,255,.04) 70%), rgba(6,10,20,.6); transition:transform .15s, border-color .15s}
.tile:hover{transform:translateY(-2px); border-color:rgba(159,192,255,.6)}
.tile b{font:800 28px/1 var(--bc); text-transform:uppercase; letter-spacing:.03em}
.tile span{color:var(--text); font-size:15px}
.tile em{margin-top:auto; font:700 15px/1 var(--bc); letter-spacing:.12em; text-transform:uppercase; font-style:normal; color:var(--soft)}
@media (max-width:560px){ .tiles{grid-template-columns:1fr 1fr; gap:10px} .tile{min-height:0; padding:14px 13px} .tile b{font-size:22px} .tile span{font-size:14px; line-height:1.4} .tile em{font-size:13px; padding-top:8px} }
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:#fff; text-decoration:none; font:700 18px/1 var(--bc); letter-spacing:.06em; text-transform:uppercase}
.chip small{font:600 14px/1 "Barlow",sans-serif; letter-spacing:0; text-transform:none; color:var(--muted)}
.chip:hover{background:rgba(255,255,255,.1)}
.spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:r .8s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}
.loading{display:flex; align-items:center; gap:12px; color:var(--muted); padding:8px 0}

/* ---------- Fußzeile ---------- */
.site-foot{border-top:1px solid var(--line); background:rgba(4,7,14,.6); padding:22px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.foot-in{max-width:calc(var(--w) - 32px); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px}
.foot-in nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot-in a{color:var(--muted); text-decoration:none; font-size:14px}
.foot-in a:hover{color:var(--ink); text-decoration:underline}
.foot-in .brand{font:800 18px/1 var(--bc); letter-spacing:.2em; color:#fff}
.foot-in .brand small{font-size:13px; letter-spacing:.24em; color:var(--soft); margin-left:4px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }