:root{
      --bg0:#05070b;
      --bg1:#070b14;
      --panel: rgba(10,14,22,.72);
      --panel2: rgba(7,9,14,.7);
      --txt:#e9eefc;
      --muted:#a9b4d6;
      --line: rgba(255,255,255,.10);
      --blue:#0b47ff;
      --blue2:#2e8bff;
      --cyan:#00d4ff;
      --white:#ffffff;
      --shadow: 0 18px 60px rgba(0,0,0,.65);
      --radius: 18px;
      --radius2: 26px;
      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      color:var(--txt);
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(11,71,255,.35), transparent 60%),
        radial-gradient(900px 500px at 10% 20%, rgba(0,212,255,.12), transparent 55%),
        radial-gradient(900px 500px at 90% 25%, rgba(46,139,255,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    /* subtle noise */
    body:before{
      content:"";
      position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      opacity:.08;
      pointer-events:none;
      mix-blend-mode:overlay;
    }

    a{color:inherit; text-decoration:none}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
    .grid{display:grid; gap:18px}

    /* NAV */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(5,7,11,.75), rgba(5,7,11,.35));
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      height:72px;
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width:220px;
    }
    .brand-badge{
      width:42px; height:42px;
      border-radius:14px;
      background:
        radial-gradient(20px 20px at 30% 25%, rgba(255,255,255,.25), transparent 60%),
        linear-gradient(135deg, rgba(11,71,255,.9), rgba(46,139,255,.25));
      box-shadow: 0 10px 30px rgba(11,71,255,.28);
      border:1px solid rgba(255,255,255,.12);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .brand-badge svg{opacity:.95}
    .brand h1{
      margin:0;
      font-weight:900;
      letter-spacing:.6px;
      font-size:15px;
      text-transform:uppercase;
      line-height:1.05;
    }
    .brand span{
      display:block;
      font-size:12px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.2px;
      margin-top:2px;
      text-transform:none;
    }
    .nav-links{
      display:flex; align-items:center; gap:10px;
    }
    .pill{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color:var(--txt);
      font-weight:700;
      font-size:13px;
      letter-spacing:.2px;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      user-select:none;
    }
    .pill:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.16);
    }
    .pill.cta{
      background:
        radial-gradient(120px 60px at 20% 20%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(135deg, rgba(11,71,255,.95), rgba(0,212,255,.25));
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 12px 35px rgba(11,71,255,.25);
    }
    .burger{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color:var(--txt);
      font-weight:900;
      cursor:pointer;
    }

    /* HERO */
    .hero{
      padding:44px 0 18px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .card{
      background: linear-gradient(180deg, var(--panel), rgba(8,10,16,.55));
      border:1px solid rgba(255,255,255,.12);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .card:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(500px 240px at 10% 10%, rgba(11,71,255,.22), transparent 55%),
        radial-gradient(500px 240px at 90% 20%, rgba(0,212,255,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
      pointer-events:none;
      opacity:.85;
    }
    .card > *{position:relative}

    .hero-left{
      padding:26px;
      display:flex; flex-direction:column; gap:14px;
    }
    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      width:max-content;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color:var(--muted);
      font-weight:800;
      letter-spacing:.3px;
      text-transform:uppercase;
      font-size:12px;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(0,212,255,.65);
    }
    .title{
      margin:0;
      font-size:42px;
      line-height:1.05;
      font-weight:1000;
      letter-spacing:.2px;
      text-transform:uppercase;
    }
    .title em{
      font-style:normal;
      background: linear-gradient(90deg, var(--white), rgba(255,255,255,.65));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .subtitle{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.6;
      max-width:60ch;
    }
    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .btn{
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      font-weight:900;
      letter-spacing:.2px;
      font-size:13px;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
    .btn.primary{
      background:
        radial-gradient(150px 70px at 10% 20%, rgba(255,255,255,.20), transparent 60%),
        linear-gradient(135deg, rgba(11,71,255,.95), rgba(46,139,255,.35));
      box-shadow: 0 16px 40px rgba(11,71,255,.22);
      border-color: rgba(255,255,255,.18);
    }
    .btn svg{opacity:.92}

    .stats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:10px;
    }
    .stat{
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }
    .stat b{
      display:block;
      font-size:18px;
      font-weight:1000;
      letter-spacing:.2px;
    }
    .stat span{
      display:block;
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.35px;
    }

    /* Logo card */
    .hero-right{
      padding:18px;
      display:flex; flex-direction:column; gap:14px;
      align-items:stretch;
    }
    .logo-frame{
      flex:1;
      display:grid;
      place-items:center;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(360px 240px at 50% 20%, rgba(11,71,255,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
      overflow:hidden;
      position:relative;
    }
    .logo-frame:after{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(500px 200px at 50% 0%, rgba(0,212,255,.12), transparent 60%);
      pointer-events:none;
    }
    .logo{
      width:min(340px, 75%);
      height:auto;
      filter: drop-shadow(0 24px 60px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(11,71,255,.25));
      transform: translateZ(0);
    }
    .tagline{
      padding:14px 16px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      color:var(--muted);
      font-weight:800;
      letter-spacing:.2px;
      line-height:1.4;
    }
    .tagline b{color:var(--txt); font-weight:1000}

    /* Sections */
    section{padding:18px 0}
    .section-title{
      margin:0 0 10px;
      font-weight:1000;
      letter-spacing:.4px;
      text-transform:uppercase;
      font-size:14px;
      color: rgba(233,238,252,.92);
      display:flex; align-items:center; gap:10px;
    }
    .section-title:before{
      content:"";
      width:10px; height:10px; border-radius:3px;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      box-shadow: 0 0 18px rgba(11,71,255,.35);
    }

    .cards3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
    }
    .mini{
      padding:18px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, var(--panel2), rgba(0,0,0,.18));
      box-shadow: 0 16px 40px rgba(0,0,0,.45);
    }
    .mini h3{
      margin:0 0 8px;
      font-size:16px;
      font-weight:1000;
      letter-spacing:.2px;
    }
    .mini p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.6;
    }
    .mini .meta{
      margin-top:12px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .chip{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(233,238,252,.88);
      font-weight:800;
      letter-spacing:.25px;
      text-transform:uppercase;
    }

    .split{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }

    /* Footer */
    footer{
      padding:26px 0 40px;
      border-top:1px solid var(--line);
      margin-top:16px;
    }
    .footer-grid{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      color:var(--muted);
      font-weight:700;
      font-size:13px;
    }
    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .social a{
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      font-weight:900;
      letter-spacing:.2px;
      color: rgba(233,238,252,.92);
    }
    .social a:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.18);
    }

    /* Mobile */
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr}
      .title{font-size:36px}
      .split{grid-template-columns:1fr}
      .cards3{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
      .nav-links{display:none}
      .burger{display:inline-grid; place-items:center}
      .nav-links.open{
        display:flex;
        position:absolute;
        top:72px; left:0; right:0;
        padding:12px 18px 16px;
        background: rgba(5,7,11,.92);
        border-bottom:1px solid var(--line);
        backdrop-filter: blur(14px);
        flex-wrap:wrap;
        justify-content:flex-start;
      }
    }

/* ===== HERO: LIVE / OFFLINE Status ===== */
#liveBox{
  /* überschreibt kicker-Optik gezielt */
  width: 100%;
  max-width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

#liveText{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(233,238,252,.92);
  white-space: normal;     /* wichtig: umbrechen statt quetschen */
  word-break: break-word;
}

#liveBox.live{
  border-color: rgba(0,255,110,.38);
  background: rgba(0,255,110,.10);
  color: rgba(233,238,252,.95);
}

#liveBox.live .dot{
  background: #00ff6e;
  box-shadow: 0 0 18px rgba(0,255,110,.75);
}

#liveBox.offline{
  border-color: rgba(255,59,59,.38);
  background: rgba(255,59,59,.10);
  color: rgba(233,238,252,.95);
}

#liveBox.offline .dot{
  background: #ff3b3b;
  box-shadow: 0 0 18px rgba(255,59,59,.75);
}

.footer-counter{
  margin-top:10px;
  font-size:12px;
  color: var(--muted);
  opacity:.9;
  text-align:center;
}