/* =========================================
   Root / Farben / Layout
========================================= */
:root{
  --bg:#0b0b0c;
  --fg:#f5f5f7;
  --muted:#b0b0b0;
  --accent:#7c3aed;        /* Lila */
  --highlight:#00ff00;     /* Neon-Grün */
  --card:#141416;
  --radius:16px;
  --maxw:1200px;
  --pad:18px;

  --sun:#f59e0b;           /* Gelb */
  --moon:#3b82f6;          /* Blau */
}
@media (prefers-color-scheme:light){
  :root{ --bg:#fff; --fg:#111; --muted:#6b6b6b; --card:#f5f5f7; }
}

/* =========================================
   Reset / Base
========================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.45;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
h1,h2,h3{ letter-spacing:-.02em; }

/* Screenreader only */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================================
   Topbar / Navigation
========================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(20px);
  background: color-mix(in oklab,var(--bg) 84%, transparent);
  border-bottom:1px solid color-mix(in oklab,var(--fg) 10%, transparent);
}
.nav{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:56px;
}
.brand{ display:inline-flex; gap:10px; align-items:center; font-weight:700; }
.brand__logo{
  height:28px; width:auto; border-radius:6px; object-fit:contain;
  box-shadow:0 4px 12px color-mix(in oklab,var(--accent) 20%, transparent);
}
.brand__name{ letter-spacing:.2px; }

/* Nav zentriert */
.navlinks{
  justify-self:center;
  display:none; gap:18px; align-items:center; color:var(--muted); font-size:14px;
}
@media (min-width:880px){ .navlinks{ display:flex; } }
.navlinks .navlink{ position:relative; padding:6px 2px; }
.navlinks .navlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:linear-gradient(90deg,var(--highlight),var(--accent));
  border-radius:2px; transition:right .25s ease;
}
.navlinks .navlink:hover::after{ right:0; }
.navlinks .navlink.is-active{ color:var(--fg); }
.navlinks .navlink.is-active::after{ right:0; }
.navlinks__cta{ padding:10px 14px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; }

/* ---------- Service-Dropdown (Desktop) ---------- */
.nav .nav-dropdown{ position:relative; }
.nav .navlink--dropdown{
  appearance:none; -webkit-appearance:none; background:transparent; border:0;
  font:inherit; color:var(--muted); cursor:pointer;
  padding:6px 2px; margin:0; display:inline-flex; align-items:center; gap:8px;
  position:relative; border-radius:6px;
}
.nav .navlink--dropdown i{ font-size:12px; transition:transform .20s ease; }
.nav .navlink--dropdown::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:linear-gradient(90deg,var(--highlight),var(--accent));
  border-radius:2px; transition:right .25s ease;
}
.nav .navlink--dropdown:hover{ color:var(--fg); }
.nav .navlink--dropdown:hover::after{ right:0; }
.nav .navlink--dropdown:focus{ outline:none; }
.nav .navlink--dropdown:focus-visible{
  box-shadow:0 0 0 2px color-mix(in oklab,var(--fg) 16%, transparent);
}
.nav .dropdown-open .navlink--dropdown{ color:var(--fg); }
.nav .dropdown-open .navlink--dropdown::after{ right:0; }
.nav .dropdown-open .navlink--dropdown i{ transform:rotate(180deg); }

.nav .dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,-6px);
  min-width:240px; padding:8px;
  border-radius:14px;
  background:var(--c-card, var(--card));
  border:1px solid color-mix(in oklab,var(--c-fg, var(--fg)) 12%, transparent);
  box-shadow:
    0 20px 50px color-mix(in oklab,var(--c-fg, var(--fg)) 16%, transparent),
    0 0 0 1px color-mix(in oklab,var(--c-fg, var(--fg)) 6%, transparent) inset;
  opacity:0; pointer-events:none; z-index:70;
  transition: opacity .18s ease, transform .22s ease;
}
.nav .dropdown-open .dropdown-panel{
  opacity:1; pointer-events:auto; transform:translate(-50%,0);
}
.nav .dropdown-panel a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  color:var(--c-fg, var(--fg));
  border:1px solid transparent; transition: border-color .2s, background .2s, transform .2s, color .2s;
}
.nav .dropdown-panel a i{
  width:18px; text-align:center; font-size:14px; color:var(--c-muted,var(--muted));
  transition: color .2s;
}
.nav .dropdown-panel a:hover{
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 92%, var(--c-card, var(--card)));
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}
.nav .dropdown-panel a:hover i{ color:var(--accent); }
.content[data-theme="light"] .nav .dropdown-panel{
  border-color: color-mix(in oklab, #000 10%, transparent);
  box-shadow:0 16px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Controls rechts */
.header-controls{ justify-self:end; display:inline-flex; align-items:center; gap:12px; }
.menu-btn{ appearance:none; border:0; background:transparent; color:var(--fg); font-size:20px; display:inline-flex; align-items:center; }
@media (min-width:880px){ .menu-btn{ display:none; } }

/* =========================================
   Theme Switch (Icon im Punkt)
========================================= */
.switch{
  display:inline-block; vertical-align:middle;
  --w:56px; --h:30px;
  position:relative; width:var(--w); height:var(--h);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  cursor:pointer; overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.dot{
  position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent) 60%, #111));
  box-shadow:0 2px 8px color-mix(in oklab,var(--accent) 35%, transparent);
  color:#fff; font-size:14px; line-height:1;
  transition: transform .30s cubic-bezier(.22,.61,.36,1), background .25s, color .25s;
  will-change:transform;
}
.dot::before{ content:"🌙"; }
input#themeToggle, input#themeToggleMobile{ display:none; }
input#themeToggle:not(:checked) + .switch .dot,
input#themeToggleMobile:not(:checked) + .switch .dot{
  transform:translateX(26px);
  background:linear-gradient(180deg,var(--sun),color-mix(in oklab,var(--sun) 55%, #222));
  color:#111;
}
input#themeToggle:not(:checked) + .switch .dot::before,
input#themeToggleMobile:not(:checked) + .switch .dot::before{ content:"☀️"; }

/* =========================================
   Language Button
========================================= */
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--fg) 18%, transparent);
  background: color-mix(in oklab, var(--bg) 92%, var(--card));
  cursor:pointer; font-size:14px; transition:transform .2s, box-shadow .25s, background .25s, border-color .25s;
}
.lang-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px color-mix(in oklab,var(--fg) 14%, transparent); }
.lang-btn .lang-code{ color:#fff; font-weight:600; letter-spacing:.2px; }
.flag-svg svg{
  width:20px; height:14px; border-radius:2px; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.08);
}
.lang-btn--inline{ margin:12px var(--pad); width:max-content; }

/* =========================================
   Mobile Drawer
========================================= */
.drawer{
  position:fixed; inset:56px 0 auto 0; background:var(--bg);
  border-bottom:1px solid color-mix(in oklab,var(--fg) 8%, transparent);
  transform:translateY(-100%); transition:transform .28s ease; z-index:60;
}
.drawer.open{ transform:translateY(0); }
.drawer a{ display:block; padding:16px var(--pad); color:var(--muted); border-top:1px solid color-mix(in oklab,var(--fg) 6%, transparent); }
.drawer a:hover{ color:var(--fg); }
.drawer__sep{ height:1px; background:color-mix(in oklab,var(--fg) 10%, transparent); margin:6px 0; }
.toggle-inline{ display:flex; align-items:center; gap:10px; padding:12px var(--pad); }
.toggle-inline .lbl{ font-size:14px; color:var(--muted); }

/* Mobile: Service-Untermenü + Icons */
.drawer .has-sub{
  width:100%; text-align:left; background:transparent; border:0; color:var(--muted);
  padding:16px var(--pad); display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font:inherit;
}
.drawer .has-sub:focus{ outline:none; }
.drawer .has-sub:focus-visible{
  box-shadow:0 0 0 2px color-mix(in oklab,var(--fg) 16%, transparent) inset;
  border-radius:8px;
}
.drawer .has-sub i{ transition:transform .2s ease; }
.drawer .sub-open i{ transform:rotate(180deg); }
.drawer .drawer-sub{ padding:6px 0 10px; border-top:1px solid color-mix(in oklab,var(--fg) 6%, transparent); }
.drawer .drawer-sub a{
  padding:12px calc(var(--pad) + 8px);
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  border-radius:10px; transition: background .2s, color .2s, transform .2s;
}
.drawer .drawer-sub a i{
  width:18px; text-align:center; font-size:14px; color:var(--c-muted,var(--muted));
  transition: color .2s;
}
.drawer .drawer-sub a:hover{
  color:var(--fg);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  transform: translateY(-1px);
}
.drawer .drawer-sub a:hover i{ color:var(--accent); }

/* =========================================
   Content Theme (nur <main>)
========================================= */
.content{ background:var(--c-bg); color:var(--c-fg); transition:background .25s, color .25s; }
.content[data-theme="dark"]{ --c-bg:#0a0a0a; --c-fg:#f5f5f5; --c-muted:#b0b0b0; --c-card:#141416; }
.content[data-theme="light"]{ --c-bg:#fff; --c-fg:#111; --c-muted:#6b6b6b; --c-card:#f5f5f7; }

/* =========================================
   Hero
========================================= */
.hero{
  display:grid; place-items:center; text-align:center;
  padding:64px var(--pad) 48px;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in oklab,var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab,var(--fg) 4%, transparent), transparent 40%);
}
.content .hero .sub{ margin:0 auto; max-width:740px; color:var(--c-muted); font-size:clamp(16px,2.2vw,20px); }
.hero h1{ font-size:clamp(36px,6vw,64px); margin:12px 0 12px; font-weight:800; }
.hero .eyebrow{ color:var(--c-muted); margin:0; font-size:13px; }
.hero .actions{ margin-top:22px; display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.note{ font-size:13px; color:var(--c-muted); margin-top:10px; }

/* Hero – Logo anstelle der Eyebrow-Textzeile */
.hero .eyebrow { margin:0; line-height:1; }
.hero .eyebrow .hero-logo{
  display:block;
  margin:0 auto;
  height: clamp(121px, 32vw, 256px);
  width:auto;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  image-rendering:auto;
  filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--c-fg, var(--fg)) 18%, transparent));
}
.content[data-theme="light"] .hero .eyebrow .hero-logo{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.20));
}
.content[data-theme="dark"] .hero .eyebrow .hero-logo{
  filter: drop-shadow(0 10px 28px color-mix(in oklab, var(--accent) 24%, transparent));
}

/* =========================================
   Buttons
========================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid color-mix(in oklab,var(--c-fg, var(--fg)) 16%, transparent);
  padding:12px 16px; border-radius:12px; font-weight:600;
  background: linear-gradient(180deg, color-mix(in oklab, var(--c-bg, var(--bg)) 90%, transparent), color-mix(in oklab, var(--c-fg, var(--fg)) 6%, transparent));
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; cursor:pointer;
}
.btn--primary{
  background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 60%, #4c1d95));
  color:#fff; border-color:transparent; box-shadow:
    0 6px 18px color-mix(in oklab,var(--accent) 28%, transparent),
    0 0 0 6px color-mix(in oklab,var(--accent) 12%, transparent);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px color-mix(in oklab,var(--accent) 34%, transparent),
    0 0 0 8px color-mix(in oklab,var(--accent) 14%, transparent);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px color-mix(in oklab,var(--c-fg) 12%, transparent); }
.btn--ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
.btn--ghost:hover,.btn--ghost:focus{ border-color:#fff; background:rgba(255,255,255,.08); }
button[disabled]{ opacity:.85; filter:saturate(.85); }
.content[data-theme="light"] .btn--ghost{
  color:#111; border-color: rgba(0,0,0,.25); background: rgba(0,0,0,.03);
}
.content[data-theme="light"] .btn--ghost:hover,
.content[data-theme="light"] .btn--ghost:focus{
  border-color: rgba(0,0,0,.45); background: rgba(0,0,0,.06);
}
.content[data-theme="light"] button[disabled]{
  color: rgba(0,0,0,.45);
  border-color: rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.04) !important;
}
.content[data-theme="dark"] button[disabled]{
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
}

/* =========================================
   Cards / Promo / Grid
========================================= */
.promo{ display:grid; gap:16px; grid-template-columns:1fr; margin:20px auto; }
.card{
  position:relative; overflow:clip; border-radius:var(--radius);
  background:var(--c-card);
  border:1px solid color-mix(in oklab,var(--c-fg) 10%, transparent);
  transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in oklab,var(--c-fg) 12%, transparent); }
.card__body{ padding:clamp(20px,4vw,28px); display:grid; gap:14px; }
.card__media{ padding:16px; }
.card__media--block{ margin-top:8px; }
.card__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.card--split .card__body{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:16px; }
@media (max-width:879.98px){ .promo{ padding:0 var(--pad);} .card--split .card__body{ grid-template-columns:1fr; } }

/* Platzhalter */
.ph{ width:100%; aspect-ratio:16/9; border-radius:12px; background:linear-gradient(135deg,#999,#333); }

/* ---------- About Media ---------- */
.about .card__media{
  padding:0; background:transparent; border:0; position:relative; border-radius:14px; overflow:hidden;
}
.about .card__media::before{
  content:""; position:absolute; inset:-18px; border-radius:22px; pointer-events:none;
  background:
    radial-gradient(60% 60% at 20% 20%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(70% 70% at 80% 80%, color-mix(in oklab, var(--highlight) 18%, transparent), transparent 70%);
  opacity:.45; filter: blur(18px);
}
.about .card__media img{
  width:100%; height:100%; object-fit:contain; background:transparent; border-radius:14px;
  box-shadow:0 10px 26px color-mix(in oklab, var(--c-fg, var(--fg)) 12%, transparent),
             0 0 0 1px color-mix(in oklab, var(--c-fg, var(--fg)) 6%, transparent);
}

/* =========================================
   Feature Grid
========================================= */
.features{ margin:40px 0; }
.features h2{ text-align:center; margin-bottom:16px; }
.grid3{ display:grid; gap:16px; grid-template-columns:1fr; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.feat{ background:var(--c-card); border-radius:var(--radius); border:1px solid color-mix(in oklab,var(--c-fg) 10%, transparent); padding:22px; }
.feat h3{ margin:0 0 6px; font-size:18px; }
.feat p{ margin:0; color:var(--c-muted); }
@media (min-width:880px){ .grid3{ grid-template-columns:repeat(3,1fr); } }

/* =========================================
   View Root
========================================= */
.view{ padding:24px 0 8px; }

/* =========================================
   PARTNER – immer dunkel
========================================= */
.partners{
  padding:18px 0 6px;
  border-top:1px solid rgba(255,255,255,.1);
  background:#0b0b0c; color:#f5f5f7;
  background-image: radial-gradient(60% 30% at 50% 100%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%);
}
.partners__head{ text-align:center; margin-bottom:6px; }
.partners__head h2{ margin:8px 0 0; font-size:clamp(18px,3vw,22px); color:#fff; }
.partners__sub{ margin:0; color:#b0b0b0; font-size:13px; }
.partners__note{ margin:6px 0 0; text-align:center; color:#b0b0b0; font-size:13px; }

/* Marquee */
.marquee{
  position:relative; overflow:hidden; padding:8px 0;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display:inline-flex; align-items:center; gap:28px;
  will-change:transform;
  animation: marqueeLoop var(--marquee-duration, 40s) linear infinite;
  animation-delay: var(--marquee-delay, 0s);
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marqueeLoop{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Logo-Karten */
.logo-card{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:10px 16px; border-radius:12px;
  background: color-mix(in oklab, var(--bg) 95%, var(--card));
  border:1px solid rgba(255,255,255,.12);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s, filter .25s;
}
.logo-card img{
  max-height:28px; max-width:140px; object-fit:contain;
  filter:grayscale(100%) contrast(1.05) opacity(.9);
  transition:filter .25s, transform .25s;
}
.logo-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab,var(--accent) 35%, transparent);
  box-shadow:0 10px 26px color-mix(in oklab,var(--accent) 20%, transparent);
}
.logo-card:hover img{ filter:grayscale(0%) opacity(1); transform:scale(1.03); }
@media (max-width:640px){
  .marquee__track{ gap:22px; }
  .logo-card{ height:50px; padding:8px 14px; }
  .logo-card img{ max-height:24px; max-width:120px; }
}

/* =========================================
   Footer
========================================= */
.footer{
  margin-top:24px;
  border-top:1px solid color-mix(in oklab,var(--fg) 10%, transparent);
  color:var(--muted);
}
.foot{ display:grid; gap:18px; grid-template-columns:1fr; padding:24px var(--pad); }
.foot__brand small{ display:block; }
.foot__col{ display:grid; gap:10px; }
.foot__col a{ color:var(--muted); }
.foot__col a:hover{ color:var(--fg); }
@media (min-width:880px){ .foot{ grid-template-columns:2fr 1fr 1fr; max-width:var(--maxw); margin:0 auto; } }

/* Footer Socials */
.foot .social{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  color:var(--muted);
  transition: color .2s, background .2s, transform .2s;
  width:max-content;
}
.foot .social i{ font-size:18px; width:18px; text-align:center; }
.foot .social:hover{
  color:var(--fg);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  transform: translateY(-1px);
}
.foot .social[href*="twitch.tv"]:hover i{ color:#9146FF; }
.foot .social[href*="instagram.com"]:hover i{ color:#E1306C; }
.foot .social[href*="youtube.com"]:hover i{ color:#FF0000; }
.foot .social[href*="discord.gg"]:hover i{ color:#5865F2; }

/* Discord Card im Footer */
.foot__discord .discord-card{
  border:1px solid color-mix(in oklab,var(--fg) 12%, transparent);
  background: color-mix(in oklab, var(--bg) 92%, var(--card));
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 24px color-mix(in oklab,var(--fg) 10%, transparent);
}
.foot__discord iframe{ display:block; width:100%; }

/* Grid fix (3 Spalten ab 880px) */
@media (min-width:880px){
  .foot{ grid-template-columns:2fr 1fr 1fr; }
}
@media (max-width:480px){
  .foot .social span{ display:none; }
  .foot .social{ padding:8px; gap:6px; }
}

/* =========================================
   Cookie Modal
========================================= */
.cookie-modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  overflow:auto;
  padding:12px;
}
.cookie-modal[hidden]{ display:none; }
.cookie-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(6px) saturate(120%); }
.cookie-card{
  position:relative; width:min(680px, calc(100% - 2*var(--pad)));
  border-radius:calc(var(--radius) + 6px);
  border:1px solid color-mix(in oklab,var(--fg) 18%, transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  padding:18px 18px 16px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-bg, var(--bg)) 92%, var(--card)),
    color-mix(in oklab, var(--c-bg, var(--bg)) 82%, var(--card))
  );
  color:var(--c-fg, var(--fg)); animation: modalIn .22s ease-out both;
  max-height: calc(100vh - 24px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@supports (height: 100dvh){
  .cookie-card{ max-height: calc(100dvh - 24px); }
}
@keyframes modalIn{ from{ transform:translateY(8px); opacity:.85; } to{ transform:translateY(0); opacity:1; } }
.cookie-head h2{ margin:8px 0 4px; font-size:clamp(18px,3vw,22px); }
.cookie-head p{ margin:0; color:var(--c-muted,var(--muted)); }
.cookie-list{ margin:10px 0 0; padding-left:18px; color:var(--c-muted,var(--muted)); }
.cookie-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }
.cookie-more{ display:block; margin-top:6px; color:var(--c-muted,var(--muted)); }
.cookie-close{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:8px;
  border:1px solid color-mix(in oklab,var(--c-fg,var(--fg)) 16%, transparent);
  background:transparent; color:var(--c-fg,var(--fg)); font-size:18px; line-height:1; cursor:pointer; transition:transform .2s;
}
.cookie-close:hover{ transform:translateY(-1px); }

/* Sprach-Buttons im Modal */
.cookie-lang{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin-top:10px;
}
.cookie-lang .lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 92%, var(--card));
  border:1px solid color-mix(in oklab, var(--c-fg, var(--fg)) 16%, transparent);
  transition: transform .15s, background .15s, border-color .15s;
  cursor: pointer;
}
.cookie-lang .lang-btn:hover{
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 88%, var(--card));
  border-color: color-mix(in oklab, var(--c-fg, var(--fg)) 28%, transparent);
  transform: translateY(-1px);
}
.cookie-lang .flag-svg,.cookie-lang .flag-svg svg{
  width:22px; height:16px; display:inline-block; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.08);
}
.cookie-lang .lang-code{ font-weight:700; letter-spacing:.02em; color:#fff; line-height:1; }

@media (max-width:560px){
  .cookie-card{ width:min(680px, calc(100% - 2*12px)); }
  .cookie-actions{ flex-direction: column-reverse; align-items:stretch; gap:10px; }
  .cookie-lang{ justify-content: center; flex-wrap: wrap; }
}

/* Hinweis-Chip */
.chip{
  display:inline-block; font-size:12px; line-height:1; padding:6px 8px; border-radius:999px; color:#000;
  background:linear-gradient(90deg,var(--highlight),color-mix(in oklab,var(--accent) 60%, var(--highlight)));
  border:1px solid color-mix(in oklab,var(--fg) 8%, transparent);
  box-shadow:0 6px 18px color-mix(in oklab,var(--accent) 28%, transparent);
}

/* --- Cookie-Details Overlay --- */
.cookie-details{
  position:absolute; inset:12px; z-index:2;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--fg) 18%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-bg, var(--bg)) 96%, var(--card)),
    color-mix(in oklab, var(--c-bg, var(--bg)) 88%, var(--card))
  );
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
  animation: modalIn .18s ease-out both;
}
.cookie-details[hidden]{ display:none; }
.cookie-details__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px;
  border-bottom:1px solid color-mix(in oklab,var(--fg) 14%, transparent);
}
.cookie-details__head h3{ margin:0; font-size:clamp(16px,2.2vw,18px); }
.cookie-details__body{
  padding:12px; overflow:auto;
  max-height:min(60vh, 540px);
}
.cookie-details__body :where(p,li,small){ color:var(--c-fg,var(--fg)); }
.cookie-details__body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){
  .cookie-details{ inset:8px; }
  .cookie-details__body{ max-height:min(64vh, 520px); }
}

/* =========================================
   Kontakt, Gewinnspiel & Einsendungen (gemeinsame Styles)
========================================= */
.kontakt .form,
.gewinnspiel .form,
.einsendungen .form{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:880px){
  .kontakt .form,
  .gewinnspiel .form,
  .einsendungen .form{ grid-template-columns:repeat(12,1fr); }

  /* Kontakt + Gewinnspiel: Vor-/Nachname nebeneinander */
  .kontakt .form .form-group:has(#firstname),
  .gewinnspiel .form .form-group:has(#firstname){ grid-column:1 / span 6; }
  .kontakt .form .form-group:has(#lastname),
  .gewinnspiel .form .form-group:has(#lastname){ grid-column:7 / span 6; }

  /* Einsendungen: Twitch / Discord nebeneinander */
  .einsendungen .form .form-group:has(#twitch){  grid-column:1 / span 6; }
  .einsendungen .form .form-group:has(#discord){ grid-column:7 / span 6; }

  /* Volle Breite Felder */
  .kontakt .form .form-group:has(#email),
  .gewinnspiel .form .form-group:has(#email),
  .kontakt .form .form-group:has(#subject),
  .gewinnspiel .form .form-group:has(#subject),
  .kontakt .form .form-group:has(#message),
  .gewinnspiel .form .form-group:has(#message),
  .kontakt .form .form-group:has(#code),
  .gewinnspiel .form .form-group:has(#code),
  .einsendungen .form .form-group:has(#videoUrl),
  .einsendungen .form .form-group:has(#note),
  .kontakt .form .form-group.checkbox,
  .gewinnspiel .form .form-group.checkbox,
  .einsendungen .form .form-group.checkbox,
  .kontakt .form .form-status,
  .gewinnspiel .form .form-status,
  .einsendungen .form .form-status,
  .kontakt .form .card__actions,
  .gewinnspiel .form .card__actions,
  .einsendungen .form .card__actions{ grid-column:1 / -1; }
}

.form-group{ display:grid; gap:6px; }
.form-group label{
  font-size:14px; color:var(--c-muted,var(--muted));
  font-weight:600; margin-bottom:2px;
}

/* ---- Felder (Inputs, Select, Textarea) ---- */
.kontakt .form input[type="text"],
.gewinnspiel .form input[type="text"],
.einsendungen .form input[type="text"],
.kontakt .form input[type="email"],
.gewinnspiel .form input[type="email"],
.einsendungen .form input[type="email"],
.kontakt .form input[type="tel"],
.gewinnspiel .form input[type="tel"],
.einsendungen .form input[type="tel"],
.kontakt .form input[type="url"],
.gewinnspiel .form input[type="url"],
.einsendungen .form input[type="url"],
.kontakt .form select,
.gewinnspiel .form select,
.einsendungen .form select,
.kontakt .form textarea,
.gewinnspiel .form textarea,
.einsendungen .form textarea{
  width:100%;
  padding:12px 14px;
  font:inherit; color:var(--c-fg,var(--fg));
  background: color-mix(in oklab, var(--c-bg,var(--bg)) 90%, var(--c-card,var(--card)));
  border:1px solid color-mix(in oklab, var(--c-fg,var(--fg)) 12%, transparent);
  border-radius:12px; outline:0;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.kontakt .form input[type="text"],
.gewinnspiel .form input[type="text"],
.einsendungen .form input[type="text"],
.kontakt .form input[type="email"],
.gewinnspiel .form input[type="email"],
.einsendungen .form input[type="email"],
.kontakt .form input[type="tel"],
.gewinnspiel .form input[type="tel"],
.einsendungen .form input[type="tel"],
.kontakt .form input[type="url"],
.gewinnspiel .form input[type="url"],
.einsendungen .form input[type="url"],
.kontakt .form select,
.gewinnspiel .form select,
.einsendungen .form select{ height:44px; }

.kontakt .form textarea,
.gewinnspiel .form textarea,
.einsendungen .form textarea{ min-height:160px; resize:vertical; }

/* ---- Select: Custom Arrow + Reset native Look ---- */
.kontakt .form select,
.gewinnspiel .form select,
.einsendungen .form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:40px;
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
  cursor:pointer;
}

/* Pfeil (Dark Default) */
.kontakt .form select,
.gewinnspiel .form select,
.einsendungen .form select{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Pfeil (Light Theme) */
.content[data-theme="light"] .kontakt .form select,
.content[data-theme="light"] .gewinnspiel .form select,
.content[data-theme="light"] .einsendungen .form select{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Disabled/Placeholder Option optisch dezenter */
.kontakt .form select:has(option[disabled]:checked),
.gewinnspiel .form select:has(option[disabled]:checked),
.einsendungen .form select:has(option[disabled]:checked){
  color: color-mix(in oklab, var(--c-muted,var(--muted)) 90%, transparent);
}

/* ---- Neutrale Defaults & Validierung ---- */
.kontakt .form input,
.gewinnspiel .form input,
.einsendungen .form input,
.kontakt .form select,
.gewinnspiel .form select,
.einsendungen .form select,
.kontakt .form textarea,
.gewinnspiel .form textarea,
.einsendungen .form textarea{
  border-color: color-mix(in oklab, var(--c-fg,var(--fg)) 12%, transparent);
}

/* Standard: ungültig (Kontakt & Gewinnspiel erst nach Eingabe) */
.kontakt .form input:required:not(:placeholder-shown):invalid,
.gewinnspiel .form input:required:not(:placeholder-shown):invalid,
.kontakt .form textarea:required:not(:placeholder-shown):invalid,
.gewinnspiel .form textarea:required:not(:placeholder-shown):invalid,
.kontakt .form select:required:invalid,
.gewinnspiel .form select:required:invalid{
  border-color: color-mix(in oklab, #ff3b30 55%, transparent);
}

/* SPEZIAL: Gewinnspiel-Code (#code) sofort rot */
.kontakt .form #code:placeholder-shown,
.gewinnspiel .form #code:placeholder-shown,
.kontakt .form #code:required:invalid,
.gewinnspiel .form #code:required:invalid{
  border-color: color-mix(in oklab, #ff3b30 55%, transparent);
}

/* Einsendungen: Pflichtfelder IMMER rot, solange ungültig (auch leer) */
.einsendungen .form :where(input,select,textarea)[required]:invalid{
  border-color: color-mix(in oklab, #ff3b30 55%, transparent);
}

/* Gültig (grün) */
.kontakt .form input:required:not(:placeholder-shown):valid,
.gewinnspiel .form input:required:not(:placeholder-shown):valid,
.kontakt .form select:required:valid,
.gewinnspiel .form select:required:valid{
  border-color: color-mix(in oklab, #34c759 45%, transparent);
}

/* Einsendungen: gültig = grün (inkl. type="url") */
.einsendungen .form :where(input,select,textarea)[required]:valid{
  border-color: color-mix(in oklab, #34c759 45%, transparent);
}

.kontakt .form ::placeholder,
.gewinnspiel .form ::placeholder,
.einsendungen .form ::placeholder{
  color: color-mix(in oklab, var(--c-muted,var(--muted)) 70%, transparent);
}

/* Darker BG im Dark-Theme */
.content[data-theme="dark"] .kontakt .form input,
.content[data-theme="dark"] .gewinnspiel .form input,
.content[data-theme="dark"] .einsendungen .form input,
.content[data-theme="dark"] .kontakt .form select,
.content[data-theme="dark"] .gewinnspiel .form select,
.content[data-theme="dark"] .einsendungen .form select,
.content[data-theme="dark"] .kontakt .form textarea,
.content[data-theme="dark"] .gewinnspiel .form textarea,
.content[data-theme="dark"] .einsendungen .form textarea{
  background: color-mix(in oklab, var(--c-card,var(--card)) 92%, #000);
}

/* ---- Fokus ---- */
.kontakt .form input:focus,
.gewinnspiel .form input:focus,
.einsendungen .form input:focus,
.kontakt .form select:focus,
.gewinnspiel .form select:focus,
.einsendungen .form select:focus,
.kontakt .form textarea:focus,
.gewinnspiel .form textarea:focus,
.einsendungen .form textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent),
    0 0 0 1px color-mix(in oklab, var(--highlight) 18%, transparent) inset;
}

/* Betreff (Select) – konsistentes Padding */
#subject{ padding-left:14px !important; }

/* ---- Checkbox ---- */
.kontakt .form .form-group.checkbox,
.gewinnspiel .form .form-group.checkbox,
.einsendungen .form .form-group.checkbox{
  display:flex; align-items:flex-start; gap:10px; padding-top:6px;
}
.kontakt .form .form-group.checkbox input[type="checkbox"],
.gewinnspiel .form .form-group.checkbox input[type="checkbox"],
.einsendungen .form .form-group.checkbox input[type="checkbox"]{
  appearance:none; width:18px; height:18px; margin-top:3px; border-radius:5px;
  border:1px solid color-mix(in oklab, var(--c-fg,var(--fg)) 20%, transparent);
  background: color-mix(in oklab, var(--c-bg,var(--bg)) 92%, var(--c-card,var(--card)));
  display:inline-grid; place-items:center;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.kontakt .form .form-group.checkbox input[type="checkbox"]::after,
.gewinnspiel .form .form-group.checkbox input[type="checkbox"]::after,
.einsendungen .form .form-group.checkbox input[type="checkbox"]::after{
  content:""; width:10px; height:10px; border-radius:3px; transform:scale(0);
  transition:transform .18s ease-out;
  background:linear-gradient(90deg, var(--highlight), var(--accent));
  box-shadow:0 0 12px color-mix(in oklab, var(--highlight) 35%, transparent);
}
.kontakt .form .form-group.checkbox input[type="checkbox"]:checked,
.gewinnspiel .form .form-group.checkbox input[type="checkbox"]:checked,
.einsendungen .form .form-group.checkbox input[type="checkbox"]:checked{
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.kontakt .form .form-group.checkbox input[type="checkbox"]:checked::after,
.gewinnspiel .form .form-group.checkbox input[type="checkbox"]:checked::after,
.einsendungen .form .form-group.checkbox input[type="checkbox"]:checked::after{ transform:scale(1); }
.kontakt .form .form-group.checkbox label,
.gewinnspiel .form .form-group.checkbox label,
.einsendungen .form .form-group.checkbox label{ color:var(--c-muted,var(--muted)); font-size:14px; }
.kontakt .form .form-group.checkbox a,
.gewinnspiel .form .form-group.checkbox a,
.einsendungen .form .form-group.checkbox a{
  color:var(--c-fg,var(--fg));
  text-decoration:underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent);
  text-underline-offset:3px;
}
.kontakt .form .form-group.checkbox a:hover,
.gewinnspiel .form .form-group.checkbox a:hover,
.einsendungen .form .form-group.checkbox a:hover{ text-decoration-color:var(--highlight); }

/* ---- Actions & Status ---- */
.kontakt .form .card__actions,
.gewinnspiel .form .card__actions,
.einsendungen .form .card__actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin-top:4px;
}
.form-status{ margin-top:6px; font-size:14px; color:var(--c-muted,var(--muted)); min-height:1em; }
.form-status.is-error{ color:#ff6b6b; }
.form-status.is-ok{ color:#34c759; }

/* ---- Erfolg-Ansicht ---- */
.kontakt .thankyou[hidden],
.gewinnspiel .thankyou[hidden],
.einsendungen .thankyou[hidden]{ display:none; }
.kontakt .thankyou,
.gewinnspiel .thankyou,
.einsendungen .thankyou{
  padding:24px; border-radius:var(--radius);
  background: color-mix(in oklab, var(--c-card) 95%, transparent);
  border:1px solid color-mix(in oklab, var(--c-fg) 14%, transparent);
  animation:kfFadeIn .28s ease-out both; text-align:center;
}
.kontakt .thankyou .sub,
.gewinnspiel .thankyou .sub,
.einsendungen .thankyou .sub{ color:var(--c-muted); }

@keyframes kfFadeIn{ from{ opacity:.01; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* Slide-Out beim Erfolg */
.kontakt .slide-out,
.gewinnspiel .slide-out,
.einsendungen .slide-out{
  animation:kfSlideOut .35s cubic-bezier(.22,.61,.36,1) forwards; transform-origin:top center;
}
@keyframes kfSlideOut{
  0%{ opacity:1; transform:scale(1) translateY(0); }
  100%{ opacity:0; transform:scale(.98) translateY(-6px); }
}

/* =========================================
   FAQ Links
========================================= */
.view.faq a {
  color: var(--c-fg, var(--fg));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.view.faq a:hover {
  color: var(--highlight);
  text-decoration-color: var(--highlight);
}
.view.faq a:visited {
  color: color-mix(in oklab, var(--c-muted, var(--muted)) 80%, transparent);
}

/* =========================================
   FAQ Details/Accordion
========================================= */
.view.faq details {
  border-bottom: 1px solid color-mix(in oklab, var(--c-fg, var(--fg)) 10%, transparent);
  padding: 6px 0;
}
.view.faq details:last-of-type { border-bottom: none; }

.view.faq summary {
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
  color: var(--c-fg, var(--fg));
  padding: 8px 10px;
  border-radius: 10px;
  list-style: none;
  transition: background-color .2s, color .2s;
}
.view.faq summary::-webkit-details-marker { display: none; }

/* dezenter Hover */
.view.faq summary:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* größerer Pfeil */
.view.faq summary::before {
  content: "▸";
  font-size: 18px;
  line-height: 1;
  color: var(--c-muted, var(--muted));
  transform-origin: center;
  transition: transform .25s ease, color .25s ease;
}

/* größerer Punkt (Indicator) */
.view.faq summary::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 25%, transparent);
  opacity: .55;
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
  transform: scale(.85);
}

/* geöffnet: Pfeil dreht, Punkt kräftiger */
.view.faq details[open] summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}
.view.faq details[open] summary::after {
  opacity: 1;
  transform: scale(1);
  background: color-mix(in oklab, var(--highlight) 65%, transparent);
}

/* Antworttext */
.view.faq p {
  margin: 10px 0 8px 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted, var(--muted));
  animation: faqFade .22s ease-out;
}
@keyframes faqFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Media Kit
========================================= */
.mediakit .mk-total{
  margin:12px 0 18px;
  background: var(--c-card);
  border:1px solid color-mix(in oklab,var(--c-fg) 10%, transparent);
  border-radius:16px; overflow:hidden;
}
.mediakit .mk-total__inner{
  padding:18px; display:grid; gap:6px; text-align:center;
}
.mediakit .mk-total__label{ font-weight:700; letter-spacing:.02em; color:var(--c-fg, var(--fg)); }
.mediakit .mk-total__value{ font-size:32px; font-weight:900; letter-spacing:.2px; }
.mediakit .mk-total__meta{ font-size:12px; color:var(--c-muted, var(--muted)); }

.mediakit .mk-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2, minmax(260px,1fr));
  max-width:900px; margin:8px auto 0; padding:0 var(--pad);
}
@media (max-width:720px){ .mediakit .mk-grid{ grid-template-columns:1fr; } }

.mediakit .mk-card{
  background:var(--c-card);
  border:1px solid color-mix(in oklab,var(--c-fg) 10%, transparent);
  border-radius:16px; padding:18px;
  display:grid; grid-template-areas:"brand" "avatar" "name" "followers" "actions";
  justify-items:center; gap:10px; text-align:center;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.mediakit .mk-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px color-mix(in oklab,var(--c-fg) 14%, transparent);
  border-color:color-mix(in oklab,var(--accent) 28%, transparent);
}
.mediakit .mk-card__brand{
  grid-area:brand; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; color:#fff; font-weight:700;
  box-shadow:0 8px 22px color-mix(in oklab,var(--accent) 28%, transparent);
}
.mediakit .mk-card__brand i{ font-size:16px; }
.mediakit .mk-card[data-platform="twitch"]    .mk-card__brand{ background:linear-gradient(180deg,#9146FF,#5b2aba); }
.mediakit .mk-card[data-platform="instagram"] .mk-card__brand{ background:linear-gradient(180deg,#F56040,#C13584); }
.mediakit .mk-card[data-platform="youtube"]   .mk-card__brand{ background:linear-gradient(180deg,#FF0000,#b30000); }
.mediakit .mk-card[data-platform="tiktok"]    .mk-card__brand{ background:linear-gradient(180deg,#69C9D0,#010101); }
.mediakit .mk-card__avatar{
  grid-area:avatar; width:84px; height:84px; border-radius:50%;
  object-fit:cover; border:1px solid color-mix(in oklab,var(--c-fg) 12%, transparent);
  background: color-mix(in oklab, var(--c-bg) 92%, var(--c-card)); box-shadow:0 8px 18px rgba(0,0,0,.30);
}
.mediakit .mk-card__name{ grid-area:name; margin:0; font-weight:700; color:var(--c-fg); font-size:15px; }
.mediakit .mk-card__followers{ grid-area:followers; display:grid; gap:2px; justify-items:center; }
.mediakit .mk-card__followers .lbl{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted, var(--muted));
}
.mediakit .mk-card__followers .num{
  font-size:28px; font-weight:900; letter-spacing:.2px; font-variant-numeric: tabular-nums;
}
.mediakit .mk-card .card__actions{ grid-area:actions; display:flex; gap:10px; justify-content:center; margin-top:2px; }
.mediakit .mk-card .card__actions .btn{ padding:8px 12px; border-radius:10px; }

/* =========================================
   Utils
========================================= */
.hidden{ display:none !important; }

/* =========================================
   Media: Video/Embeds
========================================= */
.media-vid{
  position:relative;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
.media-vid video,
.media-vid iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; border:0;
  object-fit:cover;
}

/* Twitch Clips Grid */
.clips-grid{
  display:grid; gap:8px;
  grid-template-columns:1fr;
}
.clips-grid .clip{
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000;
}
.clips-grid iframe{ width:100%; height:100%; border:0; display:block; }
@media (min-width:980px){
  .clips-grid{ grid-template-columns:repeat(3,1fr); }
}

/* =========================================
   Stream-Plan (Home)
========================================= */
.schedule{
  display:grid; gap:8px;
  margin-top:6px;
}
.schedule__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:12px;
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 90%, var(--c-card, var(--card)));
  border:1px solid color-mix(in oklab, var(--c-fg, var(--fg)) 10%, transparent);
}
.schedule__day{ font-weight:800; letter-spacing:.02em; }
.schedule__time{ font-variant-numeric: tabular-nums; color:var(--c-muted, var(--muted)); }
.schedule__note{ margin-top:6px; font-size:13px; color:var(--c-muted, var(--muted)); }

/* kleine Pill-Badges */
.pill{
  display:inline-block; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:999px;
  color:#000; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(90deg,var(--highlight),color-mix(in oklab,var(--accent) 60%, var(--highlight)));
  box-shadow:0 6px 18px color-mix(in oklab,var(--accent) 26%, transparent);
}

/* =========================================
   Events (Home)
========================================= */
.events-card .card__body{ display:grid; gap:12px; }
.events-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.events-head .meta{ font-size:12px; color:var(--c-muted, var(--muted)); }

.events-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.event-item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:12px 14px; border-radius:12px;
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 92%, var(--c-card, var(--card)));
  border:1px solid color-mix(in oklab, var(--c-fg, var(--fg)) 12%, transparent);
  position:relative;
}
.event-date{
  min-width:86px;
  display:grid; gap:2px;
  font-variant-numeric: tabular-nums;
}
.event-date .day{ font-weight:900; letter-spacing:.02em; }
.event-date .time{ font-size:13px; color:var(--c-muted, var(--muted)); }

.event-body{ display:grid; gap:2px; }
.event-title{ margin:0; font-weight:700; }
.event-loc{ font-size:13px; color:var(--c-muted, var(--muted)); }
.event-empty{
  text-align:center; font-size:14px; color:var(--c-muted, var(--muted));
  padding:8px 0;
}

/* Akzentkante links */
.event-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px;
  background:linear-gradient(180deg, var(--highlight), color-mix(in oklab, var(--accent) 60%, var(--highlight)));
  opacity:.8;
}

/* =========================================
   Stream-Plan & Events – Timeline Look
========================================= */
.features .feat h3{
  display:flex; align-items:center; gap:8px;
  letter-spacing:.01em; font-weight:900;
}
#stream-list,#events-list{
  position:relative; margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
}
#stream-list::before,#events-list::before{
  content:""; position:absolute; left:14px; top:2px; bottom:2px; width:2px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--highlight) 35%, var(--accent)),
    color-mix(in oklab, var(--accent) 30%, var(--highlight))
  );
  opacity:.22; border-radius:2px; pointer-events:none;
}
#stream-list>li,#events-list>li{
  position:relative; padding:12px 14px 12px 34px; border-radius:12px;
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 94%, var(--c-card, var(--card)));
  border:1px solid color-mix(in oklab, var(--c-fg, var(--fg)) 12%, transparent);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  color:var(--c-fg, var(--fg));
}
#stream-list>li+li,#events-list>li+li{ box-shadow: 0 -1px 0 0 color-mix(in oklab, var(--c-fg, var(--fg)) 8%, transparent) inset; }
#stream-list>li::before,#events-list>li::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--highlight), color-mix(in oklab, var(--accent) 60%, var(--highlight)) 70%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--c-bg, var(--bg)) 92%, var(--c-card, var(--card))),
             0 4px 12px color-mix(in oklab, var(--accent) 35%, transparent);
}
#stream-list>li:hover,#events-list>li:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  box-shadow: 0 10px 22px color-mix(in oklab, var(--accent) 22%, transparent);
}
#stream-list>li strong,#events-list>li strong{ font-weight:900; letter-spacing:.02em; }
#streams-updated,#events-updated{ margin-top:6px; font-size:12px; color:var(--c-muted, var(--muted)); display:inline-flex; align-items:center; gap:6px; opacity:.9; }
#streams-updated::before,#events-updated::before{ content:"⏱"; font-size:13px; filter:saturate(1.2); }
.content[data-theme="light"] #stream-list>li,.content[data-theme="light"] #events-list>li{
  background: color-mix(in oklab, var(--c-bg, var(--bg)) 96%, var(--c-card, var(--card)));
  border-color: color-mix(in oklab, var(--c-fg, var(--fg)) 14%, transparent);
}
#stream-list .note,#events-list .note{ color:var(--c-muted, var(--muted)); font-size:14px; }
#events-list .is-past{ opacity:.55; filter:saturate(.75); }
#events-list .is-past strong{
  text-decoration:line-through;
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, var(--highlight));
  text-decoration-thickness:2px;
}

/* =========================================
   Footer Discord (Feinschliff)
========================================= */
.foot__discord .discord-card{ border-radius:14px; }
.foot__discord .discord-card .discord-title{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; font-weight:800;
  border-bottom:1px solid color-mix(in oklab, var(--fg) 10%, transparent);
}
.foot__discord .discord-card .discord-title .pill{ transform:translateY(1px); }
.foot__discord iframe{ aspect-ratio: 16/9; }

/* =========================================
   Kleine Helfer
========================================= */
.meta{ font-size:12px; color:var(--c-muted, var(--muted)); }
.nowrap{ white-space:nowrap; }

/* =========================================
   SETUP – Produktkarten: Button fix unten rechts + edler Hover
========================================= */

/* Karten in der Setup-Ansicht immer gleich hoch strecken */
.view.setup .grid3{ align-items:stretch; }

/* Kartenkörper vorbereiten: Platz für festen Button lassen */
.view.setup .grid3 .card .card__body{
  position:relative;
  display:block;                  /* überschreibt evtl. Flex aus generischen Styles */
  padding-bottom:96px;            /* Platz für Button (Höhe + Luft) */
  min-height: 100%;
}

/* Action-Bar absolut unten rechts verankern */
.view.setup .grid3 .card .card__actions{
  position:absolute;
  right:clamp(12px,2vw,18px);
  bottom:clamp(12px,2vw,18px);
  margin:0;
  gap:10px;
  justify-content:flex-end;
  width:auto;
}

/* Einheitliche Button-Breite */
.view.setup .grid3 .card .card__actions .btn{ min-width:10.5rem; }

/* Premium Hover nur in Setup-Ansicht */
.view.setup .grid3 .card .card__actions .btn--primary{
  border:1px solid color-mix(in oklab,var(--accent) 45%, transparent);
  box-shadow:
    0 6px 18px color-mix(in oklab,var(--accent) 32%, transparent),
    0 0 0 6px color-mix(in oklab,var(--accent) 12%, transparent);
}
.view.setup .grid3 .card .card__actions .btn--primary:hover{
  transform: translateY(-2px) scale(1.01);
  filter:saturate(1.08);
  box-shadow:
    0 14px 30px color-mix(in oklab,var(--accent) 40%, transparent),
    0 0 0 8px color-mix(in oklab,var(--accent) 16%, transparent);
}
.view.setup .grid3 .card .card__actions .btn--primary:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px color-mix(in oklab, #fff 85%, transparent),
    0 0 0 8px color-mix(in oklab,var(--accent) 28%, transparent);
}

/* dezente Premium-Kante beim Hover der Karte */
.view.setup .grid3 .card:hover{
  border-color: color-mix(in oklab,var(--accent) 28%, transparent);
  box-shadow:
    0 12px 28px color-mix(in oklab,var(--c-fg) 14%, transparent),
    0 0 0 1px color-mix(in oklab,var(--accent) 20%, transparent) inset;
}