/* Startseite (01.11.): Rauch → Die besten Momente → Dein Ausweis → Unterstützen. Farben, Schriften, Kopf, Knöpfe und Dialoge kommen aus style.css.
   Kein Leuchten auf Bedienelementen, keine Pillen, keine Großbuchstaben-Labels – es leuchten nur das Neonschild und der aktive Reiter oben (Melih 01.11.). */
.startseite{--seite:6vw}
.startseite .innen{max-width:none;padding:0 var(--seite)}
.startseite .ueber{display:block;margin-bottom:14px;font:500 15px/1.4 var(--text-schrift);color:var(--leise)}
.startseite h1,.startseite h2{font:800 clamp(38px,4.6vw,72px)/1.02 var(--anzeige);letter-spacing:-.03em}
.startseite main > section{scroll-margin-top:68px}

/* 1 · Rauch */
.held{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--nacht)}
.held-buehne{position:absolute;inset:0;background:var(--nacht)}
.held .neon{display:block;position:absolute;left:50%;top:11%;width:min(760px,92vw);translate:-50% 0;transform-origin:50% 40%;transform:scale(calc(1 + var(--s, 0) * 1.3));opacity:calc(1 - var(--s, 0) * .9)}
.held canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(1.5px)}
/* Das Neonschild färbt den Rauch in seiner Nähe eisblau */
.held .licht{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(62% 58% at 50% 22%,var(--akzent) 0%,#a8ffff 38%,#fff 78%)}
.held.ohne-rauch canvas,.held.ohne-rauch .licht{display:none}
.held.ohne-rauch .held-buehne{background:var(--nacht) url(bilder/rauch-standbild.jpg) 50% 50%/cover}
.held-text{position:absolute;inset:auto 0 56px;z-index:2;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px}
.held-text > *{pointer-events:auto}
.held-satz{max-width:540px;margin:18px 0 26px;color:#c3c8ce}
.hinweis{position:absolute;right:var(--seite);bottom:60px;z-index:2;font:500 14px var(--text-schrift);color:var(--leise)}
/* Turnier angekündigt: Countdown-Karte rechts unten im Eingang – der Hinweis zum Rauch macht Platz */
.held:has(.held-turnier:not([hidden])) .hinweis{display:none}
.held-turnier-unten{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;font-size:14px;color:var(--leise)}
.hinweis .finger{display:none}
@media (hover:none){.hinweis .maus{display:none}.hinweis .finger{display:inline}}

/* Live: nur, wenn Melih streamt – Player erst nach Klick */
.live-teil{padding:110px 0 30px}
.live-teil .ueber{display:flex;align-items:center;gap:10px}
.live-teil .ueber i{width:9px;height:9px;border-radius:50%;background:var(--live)}
.live-teil h2{margin-bottom:28px;font-size:clamp(28px,3.2vw,48px);overflow-wrap:anywhere}
.startseite .vorhang{background:linear-gradient(#060708b3,#060708eb),url(bilder/rauch-standbild.jpg) 50% 50%/cover}
.startseite .vorhang::before{display:none}   /* kein „LIVE“ in Großbuchstaben – live steht schon darüber */
/* Stream und Chat in einem Rahmen: am PC nebeneinander (Chat so hoch wie das Bild), am Handy der Chat darunter */
.stream-rahmen{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 90px #000c}
.stream-rahmen.mit-chat{grid-template-columns:minmax(0,1fr) 340px}
.stream-rahmen .bildschirm{border:0;border-radius:0;box-shadow:none}
.stream-rahmen .chat-platz{width:auto;margin:0;border:0;border-left:1px solid var(--linie);border-radius:0}
.stream-rahmen .chat-platz iframe{height:100%;min-height:360px}
.startseite .player-leiste{display:block;margin-top:12px;font-size:14px;color:var(--leise)}
.startseite .player-leiste[hidden]{display:none}

/* 2 · Die besten Momente */
.momente{padding:110px 0 100px}
.momente-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.momente-seite{display:grid;gap:14px;max-width:420px}
.momente-seite p{color:#c3c8ce}
.momente-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.momente-pfeile{display:none;gap:8px}
@media (pointer:fine){.momente-pfeile:not([hidden]){display:flex}}
.clip-woche{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--linie);border-radius:10px;color:var(--text);text-decoration:none;transition:border-color .2s}
.clip-woche:hover{border-color:var(--akzent)}
.clip-woche[hidden]{display:none}
.clip-woche img{flex:none;width:128px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.clip-woche small{display:block;font:600 13px var(--text-schrift);color:var(--akzent)}
.clip-woche strong{display:block;font:600 15px/1.3 var(--text-schrift)}
.clip-woche em{font:500 13px var(--mono);font-style:normal;color:var(--leise)}
/* Reihe zum Wischen: der Clip in der Mitte läuft stumm, die anderen zeigen ihr Poster */
.momente-reihe{display:flex;align-items:center;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--seite);padding:10px var(--seite) 20px;scrollbar-width:none}
.momente-reihe::-webkit-scrollbar{display:none}
.moment{position:relative;flex:none;width:290px;aspect-ratio:7/8;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--holz);color:var(--text);text-align:left;cursor:pointer;scroll-snap-align:center;transition:width .35s cubic-bezier(.16,1,.3,1)}
.moment video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5);transition:filter .35s}
.moment span{position:absolute;inset:auto 0 0;padding:16px 18px 18px;background:linear-gradient(transparent,#000c)}
.moment strong{display:block;font:600 17px/1.25 var(--text-schrift)}
.moment small{font:500 13px var(--mono);color:#c3c8ce}
.moment.mitte{width:360px;outline:2px solid var(--akzent);outline-offset:-2px}
.moment.mitte video,.moment.vorschau video{filter:none}
.moment:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.clip-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100svh - 32px);margin:auto;padding:0;border:1px solid var(--linie);border-radius:14px;background:#000;color:var(--text);overflow:hidden}
.clip-dialog::backdrop{background:#000d}
.clip-dialog video{display:block;width:100%;max-height:calc(100svh - 90px);aspect-ratio:9/16;background:#000}
.clip-dialog p{padding:12px 16px 14px;font:600 15px var(--text-schrift)}
.clip-dialog .zu{position:absolute;right:10px;top:10px;z-index:1;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:#000a;color:#fff;font-size:26px;line-height:1}

/* 3 · Dein Ausweis */
.ausweis-teil{padding:0 0 110px}
.ausweis-leiste{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:36px;padding:26px 30px;border-radius:16px;background:var(--holz);border:1px solid var(--linie)}
.ausweis-leiste[hidden]{display:none}
.ausweis-leiste.aus{grid-template-columns:1fr auto}
.ausweis-leiste.aus strong{display:block;font:700 22px var(--anzeige);letter-spacing:-.02em}
.ausweis-leiste.aus small{display:block;max-width:620px;margin-top:6px;font-size:15px;color:var(--leise)}
.wer{display:flex;align-items:center;gap:14px}
.wer i{display:grid;flex:none;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--akzent);color:var(--nacht);font:800 20px var(--anzeige);font-style:normal}
.wer strong{display:block;font:700 20px var(--anzeige);letter-spacing:-.02em;overflow-wrap:anywhere}
.wer small{font:500 14px var(--text-schrift);color:var(--leise)}
.werte{display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px}
.werte b{display:block;font:800 26px/1.1 var(--anzeige);letter-spacing:-.02em}
.werte small{font:500 13px var(--text-schrift);color:var(--leise)}
.werte ul{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;list-style:none;font:500 14px var(--text-schrift);color:#c3c8ce}
.werte li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--akzent);vertical-align:1px}

/* 4 · Unterstützen und Melih woanders */
.schluss{padding:100px 0 80px;border-top:1px solid var(--linie)}
.schluss-raster{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.schluss-raster > div > p{max-width:480px;margin:16px 0 26px;color:#c3c8ce}
.geld{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.netz{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:0 30px}
.netz a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 0;border-bottom:1px solid var(--linie);font:600 18px var(--text-schrift);color:var(--text);text-decoration:none}
.netz a:hover{color:var(--akzent)}
.netz a small{font:500 14px var(--mono);color:var(--leise)}
.netz a[aria-disabled]{color:var(--leise);pointer-events:none}
.mehr-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 28px;font:500 15px var(--text-schrift);color:var(--leise)}
.mehr-links a{color:var(--text);text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:5px}
.startseite footer{margin-top:0}

@media (max-width:900px){
  .stream-rahmen.mit-chat{grid-template-columns:minmax(0,1fr)}
  .stream-rahmen .chat-platz{border-left:0;border-top:1px solid var(--linie)}
  .stream-rahmen .chat-platz iframe{height:420px}
}
@media (max-width:700px){
  .startseite{--seite:16px}
  .startseite h1,.startseite h2{font-size:36px}
  .held{min-height:560px}
  .held .neon{top:15%}
  .held-text{bottom:30px;grid-template-columns:minmax(0,1fr);gap:18px}
  .held-text .knopf{display:flex}
  /* Mit Countdown wird es im Eingang eng: Satz und Folgen-Knopf weichen, die Karte zählt */
  .held-text:has(.held-turnier:not([hidden])) :is(.held-satz,#held-knopf){display:none}
  .held-turnier .ziffern-maske{font-size:clamp(40px,13vw,60px)}
  .hinweis{top:44%;right:auto;bottom:auto;left:var(--seite)}
  .momente{padding:70px 0 60px}
  .momente-kopf{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
  .moment,.moment.mitte{width:78vw}
  .ausweis-teil{padding-bottom:70px}
  .ausweis-leiste,.ausweis-leiste.aus{grid-template-columns:1fr;gap:20px;padding:22px}
  .schluss{padding:70px 0 50px}
  .schluss-raster{grid-template-columns:1fr;gap:40px}
  .geld{flex-direction:column;align-items:stretch}
  .geld .textlink{text-align:center}
  .netz{grid-template-columns:1fr}
  .mehr-links{flex-direction:column}
}