:root{
  --bg:#06121f;
  --bg-2:#081a2e;
  --text:#e6f2ff;
  --muted:#a6c3db;
  --accent:#14b8ff;
  --accent-2:#66e0ff;
  --glass:rgba(255,255,255,0.06);
  --ok:#2ecc71;
  --bad:#e74c3c;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:1.25rem;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1000px 600px at 80% -10%, #0a3d5c44 0%, transparent 60%) , linear-gradient(180deg,var(--bg) 0%, #041019 100%);
}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(180deg,rgba(6,18,31,.85),rgba(6,18,31,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:32px;width:auto;display:block}
.brand strong{letter-spacing:.3px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);opacity:.9}
.menu a:hover{border-color:rgba(255,255,255,.18);opacity:1;box-shadow:0 0 0 999px inset rgba(255,255,255,.02)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:linear-gradient(180deg,#19b9ff,#0797e0);
  color:#00131e;font-weight:700;letter-spacing:.2px;border:none;box-shadow:var(--shadow);cursor:pointer}
.btn.alt{background:transparent;box-shadow:none;border:1px solid rgba(255,255,255,.12);color:var(--text)}
.btn:hover{transform:translateY(-1px);}
/* HERO */
.hero{
  position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;
  background: radial-gradient(1200px 600px at 20% -10%, #0a7dbb22 0%, transparent 60%);
}
.hero .bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden
}
.hero .bg::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,20,.55),rgba(4,12,20,.85));
}
.hero .content{padding:100px 0 60px; text-align:center;}
.h1{font-size:clamp(2.4rem,6vw,5.6rem);line-height:1.05;margin:0 0 14px;font-weight:800;letter-spacing:-.5px}
.sub{max-width:780px;margin:0 auto 26px;color:var(--muted);font-size:clamp(1rem,2.2vw,1.25rem)}
.kpis{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:26px 0}
.kpi{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.08)}
.badge{padding:4px 10px;border-radius:999px;font-weight:700}
.badge.ok{background:linear-gradient(180deg,#2ecc71,#1fb665);color:#01210f}
.badge.bad{background:linear-gradient(180deg,#e74c3c,#c0392b);color:#2b0502}
.ipbox{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;padding:12px 16px;background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1);border-radius:12px;opacity:0;pointer-events:none;transition:opacity .3s, transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
/* WAVES */
.wave{display:block}
.section{padding:80px 0;position:relative}
.section .hd{font-size:clamp(1.6rem,3.5vw,2.6rem);margin:0 0 14px;font-weight:800}
.section .subhd{color:var(--muted);margin:0 0 26px;max-width:820px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-4px)}
.icon{width:28px;height:28px;opacity:.9}
/* TEAM */
.team .role{opacity:.8;font-size:.95rem}
.team .grid .card{display:flex;gap:14px;align-items:center}
.avatar{width:44px;height:44px;border-radius:999px;background:#0b2236;border:1px solid rgba(255,255,255,.12);flex:0 0 auto;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* SOCIALS */
.socials{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.socials a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.08)}
.socials a:hover{box-shadow:0 0 22px rgba(20,184,255,.35), inset 0 0 0 999px rgba(255,255,255,.02)}
/* FOOTER */
footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.08)}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
small.muted{color:var(--muted);opacity:.9}
/* REVEALS */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
/* STATUS PAGE */
.status-wrap{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.status-tile{padding:18px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.refresh{margin-top:10px}
/* ACCESSIBILITY */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
img{max-width:100%;height:auto}
picture, img{border-radius:12px}
/* UTIL */
.center{text-align:center}
.stack{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}.mt-6{margin-top:36px}


/* Zentrierung für Follow Platox + Socials */
.section .hd, 
.section .socials {
    text-align: center;
}

/* Zentrierung für den Fairplay-Text */
.section .subhd {
    text-align: center;
}


/* Fix: Social Icons zentrieren mit Flexbox */
.section .socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Fix: Fair play Text wirklich zentrieren */
.section .subhd {
    text-align: center !important;
    width: 100%;
}


/* Final fix: center the 'Fair play...' paragraph as a block */
.section .subhd {
    margin: 0 auto 26px !important; /* center block with existing bottom margin */
    text-align: center !important;
}


/* --- Social icons hardening --- */
.socials{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.socials a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.socials a:hover{box-shadow:0 0 22px rgba(20,184,255,.35), inset 0 0 0 999px rgba(255,255,255,.02); transform:translateY(-1px)}
.socials svg{width:22px;height:22px;display:block;flex:0 0 auto}
@media (prefers-reduced-motion: reduce){
  .socials a{transition:none}
}
/* --- end social icons hardening --- */


/* --- Social icons (Simple Icons via CSS mask) --- */
.socials{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.socials .si{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  position:relative;
}
.socials .si:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.socials .si:hover{box-shadow:0 0 22px rgba(20,184,255,.35), inset 0 0 0 999px rgba(255,255,255,.02); transform:translateY(-1px)}
.socials .si .icon{
  width:22px;height:22px;display:block;flex:0 0 auto;
  background-color: currentColor;
  mask-image: var(--si); -webkit-mask-image: var(--si);
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
}
/* Fallback image visible only if mask unsupported */
.socials .si img{position:absolute; inset:0; width:22px; height:22px; margin:auto; display:none}
@supports not (mask-image: url("")){
  .socials .si .icon{display:none}
  .socials .si img{display:block}
}
@media (prefers-reduced-motion: reduce){
  .socials .si{transition:none}
}
/* --- end Social icons mask block --- */

/* --- svg icon helper (no mask) --- */
.socials .si .icon-svg{width:22px;height:22px;display:block;flex:0 0 auto}