/* ==================================================================
   Rap Battle Studios — Gestaltung 5.1  „Neon Beton"

   Was sich gegenüber 5.0 geändert hat und warum:

   1. KEINE RÄNDER MEHR. Vorher hatte jede Karte border:1px solid grau auf
      grauem Grund. Genau das ist der Windows-Look. Flächen trennen sich
      hier über Licht: eine leicht hellere, durchscheinende Fläche, eine
      Lichtkante oben (inset 0 1px 0) und ein Schatten darunter. Linien
      gibt es nur noch dort, wo wirklich getrennt wird — Fußzeile,
      Tabellenzeilen.

   2. TIEFE. Der Grund ist nicht mehr flach schwarz, sondern trägt zwei
      Farbschleier. Karten liegen darüber, Schubladen darüber, der Aufnahme-
      knopf ganz oben. Man sieht, was vorne ist.

   3. BEWEGUNG. Kacheln heben sich beim Überfahren, der Abspielknopf
      wächst, der Aufnahmeknopf pulst. Ohne das fühlt sich eine Oberfläche
      wie ein Bild an, nicht wie eine App. Alles respektiert
      prefers-reduced-motion.

   4. EINE AKZENTFARBE, DIE EIN VERLAUF IST. Pink nach Violett für alles,
      was man drücken soll. Zyan für Zahlen und Messwerte — die will man
      lesen, nicht drücken. Gold nur noch für Warnungen.

   Was gleich geblieben ist: 44 Pixel als kleinstes Tippziel, 16 Pixel in
   Eingabefeldern (sonst zoomt iOS), nichts unter 10,5 Pixeln auf dem
   Handy, und die Schriften liegen im Paket statt bei Google.
   ================================================================== */

/* Schriften liegen im Paket. Kein Nachladen von fonts.googleapis.com —
   das überträgt die IP jedes Besuchers an Google und ist genau der Punkt,
   an dem das LG München I (3 O 17493/20) einen Unterlassungsanspruch und
   Schadensersatz zugesprochen hat. */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/sora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/sora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/sora-latin-800-normal.woff2') format('woff2')}
/* Bricolage Grotesque löst Syne als Anzeigenschrift ab: enger, kantiger,
   mit optischer Größenachse — sie trägt große Überschriften besser und
   sieht bei 14 Pixeln immer noch nach etwas aus. SIL Open Font License. */
@font-face{font-family:'Bricolage';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}

:root {
  /* Grund und Flächen */
  --bg: #0c0e0d;
  --bg2: #151815;
  --flaeche: rgba(255,255,255,.055);
  --flaeche2: rgba(255,255,255,.085);
  --flaeche3: rgba(255,255,255,.12);
  --kante: inset 0 1px 0 rgba(255,255,255,.08);
  --kante2: inset 0 1px 0 rgba(255,255,255,.14);
  --line: rgba(255,255,255,.10);

  /* Schrift */
  --text: #f4f6ef;
  --mute: #a8afa5;
  /* Vorher #6f6689. Das waren 3,74:1 gegen den Grund - WCAG 1.4.3
     verlangt 4,5:1 fuer normalen Text, und die Barrierefreiheits-
     erklaerung sagt das auch zu. Jetzt 5,55:1 und immer noch klar als
     Nebentext erkennbar. */
  --mute2: #8b82a6;

  /* Akzente */
  --pink: #ff3d81;
  --lila: #8b5cf6;
  --zyan: #22d3ee;
  --verlauf: linear-gradient(118deg, #ff3d81 0%, #8b5cf6 100%);
  --verlauf-weit: linear-gradient(104deg, #ff3d81 0%, #8b5cf6 52%, #22d3ee 100%);
  --auf-verlauf: #ffffff;
  --ok: #3ddc84;
  --bad: #ff5c5c;
  --warn: #ffb020;
  --amber: #ffb020;          /* Altlast: einzelne Module greifen darauf zu */
  --amber2: #ffc86a;
  --amber-d: #8a5c00;
  --card: rgba(255,255,255,.055);

  /* Form */
  --r: 24px;
  --r-innen: 18px;
  --r-klein: 12px;
  --schatten: 0 20px 44px -28px rgba(0,0,0,.95);
  --schatten-hoch: 0 34px 70px -30px rgba(0,0,0,1);
  --glut: 0 14px 34px -12px rgba(210,255,90,.6);
  --shadow: var(--schatten);

  --font: "Sora", "Segoe UI", system-ui, sans-serif;
  --display: "Bricolage", "Sora", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: var(--font);
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  /* Zwei Farbschleier über dem Grund. Sie hängen am Rand fest, damit beim
     Scrollen nichts mitwandert und flimmert. */
  background:
    radial-gradient(94% 58% at 8% -8%, rgba(169,215,69,.34) 0%, transparent 62%),
    radial-gradient(78% 48% at 96% 2%, rgba(210,255,90,.26) 0%, transparent 64%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea, label, [role="button"] {
  pointer-events: auto !important;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--zyan); outline-offset: 2px; border-radius: 6px; }

/* ==================================================================
   Kopfzeile
   ================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  background: rgba(10,7,19,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  max-width: 100%;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; font-family: var(--display);
  font-weight: 800; font-size: 16px; letter-spacing: -.02em;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--verlauf);
  display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 8px 18px -8px rgba(210,255,90,.9), var(--kante2);
}
.nav-main { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.nav-main button, .nav-main a {
  background: transparent; border: 0; color: var(--mute);
  padding: 11px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  min-height: 44px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease;
}
.nav-main button:hover, .nav-main a:hover { color: var(--text); background: var(--flaeche); }
.nav-main button.on, .nav-main a.on {
  color: #fff; background: var(--flaeche3); box-shadow: var(--kante);
}
.nav-right { display: flex; align-items: center; gap: 8px; }

.artist-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--flaeche2); border: 0;
  border-radius: 999px; padding: 8px 14px 8px 11px;
  color: var(--text); font-weight: 700; font-size: 13px;
  position: relative; box-shadow: var(--kante);
  min-height: 44px;
}
.dot-online {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,132,.2), 0 0 10px rgba(61,220,132,.7);
  display: inline-block;
}
.drop {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: #20251f; border: 0;
  border-radius: 18px; min-width: 224px; padding: 8px;
  box-shadow: var(--schatten-hoch), var(--kante); display: none; z-index: 80;
}
.drop.open { display: block; }
.drop button {
  width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text); padding: 13px 14px; border-radius: 12px; font-size: 13.5px;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.drop button:hover { background: var(--flaeche2); }

/* ==================================================================
   Knöpfe
   ================================================================== */
.btn {
  border: 0; border-radius: 999px; padding: 13px 22px;
  font-weight: 700; font-size: 14px;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; color: var(--text); background: var(--flaeche2);
  box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .16s ease, box-shadow .18s ease, background .16s ease;
}
.btn:hover { background: var(--flaeche3); }
.btn:active { transform: scale(.97); }
.btn-amber {
  background: var(--verlauf); color: var(--auf-verlauf);
  box-shadow: var(--glut), var(--kante2);
}
.btn-amber:hover {
  background: var(--verlauf);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -12px rgba(210,255,90,.75), var(--kante2);
}
.btn-ghost { background: var(--flaeche2); color: var(--text); }
.btn-bad { background: rgba(255,92,92,.16); color: #ffc2c2; }
.btn-bad:hover { background: rgba(255,92,92,.26); }
.btn[disabled] { opacity: .38; cursor: not-allowed; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-amber:hover { transform: none; }
}

.minibtn {
  background: var(--flaeche2); border: 0; color: var(--text);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; min-height: 36px; white-space: nowrap;
  box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
}
.minibtn:hover { background: var(--flaeche3); }
.minibtn.hell { background: var(--verlauf); color: #fff; box-shadow: var(--kante2); }
.minibtn:active { transform: scale(.95); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--flaeche2); border: 0; color: var(--text);
  display: grid; place-items: center; font-size: 16px;
  box-shadow: var(--kante);
  transition: background .16s ease, transform .16s ease;
}
.icon-btn:hover { background: var(--flaeche3); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.plus { background: var(--verlauf); color: #fff; font-weight: 800; box-shadow: var(--glut); }

.linkbtn {
  background: none; border: 0; color: var(--zyan); cursor: pointer;
  font: inherit; padding: 0; text-decoration: none;
  border-bottom: 1px solid rgba(34,211,238,.4);
}
.linkbtn:hover { border-bottom-color: var(--zyan); }

/* „Melden" saß als unterstrichener Link mitten in der Karte — das ist die
   Optik von 2009. Jetzt ein zurückhaltender Chip, der erst beim Überfahren
   Farbe bekennt. */
.melden-knopf {
  background: var(--flaeche); border: 0; color: var(--mute2); font-size: 11.5px;
  font-weight: 600; cursor: pointer; padding: 7px 12px; border-radius: 999px;
  font-family: inherit; min-height: 34px; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease;
}
.melden-knopf:hover { color: #ffb4b4; background: rgba(255,92,92,.14); }

/* ==================================================================
   Seiten, Held, Karten
   ================================================================== */
.page { display: none; max-width: 1160px; margin: 0 auto; padding: 30px 20px 84px; }
.page.on { display: block; }

.hero { padding: 76px 20px 46px; text-align: center; position: relative; }
.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 8vw, 88px);
  line-height: .9; margin: 18px 0 18px;
  letter-spacing: -.04em; text-wrap: balance;
}
/* Der letzte Teil der Überschrift trägt den Verlauf. Alles einzufärben
   wäre zu viel — so bleibt ein Endpunkt, auf den das Auge fällt. */
.hero h1 em {
  font-style: normal;
  background: var(--verlauf-weit);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: var(--mute); max-width: 540px; margin: 0 auto 30px; font-size: 17px; line-height: 1.55; }
.hero-cta { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.kicker {
  display: inline-block;
  color: var(--text); font-size: 11.5px; letter-spacing: .15em;
  font-weight: 700; text-transform: uppercase;
  background: var(--flaeche2); padding: 8px 15px; border-radius: 999px;
  box-shadow: var(--kante);
}
.eyebrow2 {
  color: var(--pink); font-size: 11px; letter-spacing: .14em; font-weight: 700;
  text-transform: uppercase;
}

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.card {
  background: var(--flaeche); border: 0;
  border-radius: var(--r); padding: 22px;
  box-shadow: var(--kante), var(--schatten);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card h3 { margin: 0 0 9px; font-family: var(--display); font-size: 17px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }

.form { display: grid; gap: 11px; max-width: 380px; margin: 0 auto; }
input, textarea, select {
  width: 100%; background: rgba(0,0,0,.28); border: 0;
  color: var(--text); border-radius: var(--r-klein); padding: 14px 15px; font: inherit;
  min-height: 48px;
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  transition: box-shadow .16s ease;
}
input:focus, textarea:focus, select:focus {
  outline: 0; box-shadow: inset 0 0 0 1px rgba(169,215,69,.85), 0 0 0 4px rgba(169,215,69,.16);
}
input::placeholder, textarea::placeholder { color: var(--mute2); }
input[type=range], input[type=checkbox] { min-height: 0; box-shadow: none; }
textarea { min-height: 96px; line-height: 1.5; }
.hint { color: var(--mute); font-size: 13px; line-height: 1.55; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }

.leerkasten {
  background: var(--flaeche); border-radius: var(--r); padding: 38px 24px;
  text-align: center; color: var(--mute); grid-column: 1 / -1;
  box-shadow: var(--kante);
}
.leerkasten b { display: block; color: var(--text); font-family: var(--display);
  font-size: 17px; margin-bottom: 7px; }
.lockbox {
  background: var(--flaeche); border-radius: var(--r);
  padding: 32px; text-align: center; color: var(--mute); box-shadow: var(--kante);
}

.foot {
  padding: 30px 20px; margin: 0 auto; max-width: 1160px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--mute2); font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.socials { display: flex; gap: 9px; align-items: center; }
.socials a {
  width: 40px; height: 40px; border-radius: 13px; background: var(--flaeche);
  display: grid; place-items: center; text-decoration: none; font-size: 12px;
  box-shadow: var(--kante); transition: background .16s ease;
}
.socials a:hover { background: var(--flaeche3); }
.mob-toggle {
  display: none; background: var(--flaeche2); border: 0; color: var(--text);
  border-radius: 12px; padding: 10px 13px; min-height: 44px; box-shadow: var(--kante);
}

/* ==================================================================
   Feed
   ================================================================== */
.feed-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 16px; align-content: start;
}
/* Die Kachel ist ein Rahmen aus Glas um das Cover. Das Cover läuft nicht
   mehr eckig in eine runde Karte, sondern hat seine eigene, kleinere
   Rundung — dadurch sieht es aus wie eingelegt statt abgeschnitten. */
.songkachel {
  background: var(--flaeche); border: 0; border-radius: var(--r);
  padding: 9px; display: grid; align-content: start; gap: 2px;
  box-shadow: var(--kante), var(--schatten);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, background .22s ease;
}
.songkachel:hover {
  transform: translateY(-4px); background: var(--flaeche2);
  box-shadow: var(--kante2), var(--schatten-hoch);
}
.songkachel .bild {
  position: relative; aspect-ratio: 1; border-radius: var(--r-innen);
  overflow: hidden; background: #17102b; display: grid; place-items: center;
}
.songkachel .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.songkachel .platzhalter {
  font-family: var(--display); font-size: 36px; font-weight: 800;
  background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.songkachel .abspielen {
  position: absolute; right: 10px; top: 10px;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  -webkit-tap-highlight-color: transparent;
  background: var(--verlauf); color: #fff;
  font-size: 14px; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(210,255,90,.85), var(--kante2);
  transition: transform .18s ease;
}
.songkachel .abspielen:hover { transform: scale(1.09); }
.songkachel .abspielen:active { transform: scale(.96); }
.songkachel .unten { padding: 12px 8px 8px; display: grid; gap: 6px; }
.songkachel .unten strong {
  font-family: var(--display); font-size: 16px; line-height: 1.2; letter-spacing: -.01em;
}
.songkachel .zeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--mute);
}

/* Rangkürzel: gefüllt statt umrandet. Ein Rand um zwei Wörter ist genau
   die Sorte Linie, die alles alt aussehen lässt. */
.rangchip {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 0; white-space: nowrap;
}
.rangchip.neuling    { color: #c3bcd8; background: rgba(255,255,255,.09); }
.rangchip.aufsteiger { color: #a5e9f7; background: rgba(34,211,238,.16); }
.rangchip.stammgast  { color: #ffd6a3; background: rgba(255,176,32,.18); }
.rangchip.profi      { color: #fff;    background: var(--verlauf); box-shadow: 0 6px 14px -8px rgba(210,255,90,.9); }
.nurdu {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute2); background: rgba(255,255,255,.06); border: 0;
  border-radius: 999px; padding: 4px 9px;
}
.offen {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #9df3c2; background: rgba(61,220,132,.16); border: 0;
  border-radius: 999px; padding: 4px 9px;
}

/* Liste „Meine Tracks" */
.feed-list, .liga-list { display: grid; gap: 10px; }
.track {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 13px; align-items: center;
  background: var(--flaeche); border: 0; border-radius: var(--r-innen); padding: 11px;
  box-shadow: var(--kante);
}
.cover {
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--verlauf);
  display: grid; place-items: center; color: #fff; font-weight: 800;
  font-family: var(--display);
}

/* ==================================================================
   Studio
   ================================================================== */
.studio { display: grid; gap: 14px; max-width: 100%; }
.studio-head {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: end;
}
.studio-head h2 { font-family: var(--display); letter-spacing: -.02em; margin: 6px 0 8px; font-size: 30px; }
.studio-head h3 { font-family: var(--display); letter-spacing: -.01em; margin: 0 0 5px; font-size: 18px; }
.studio-head label.hint { white-space: nowrap; flex: 0 0 auto; }

/* Die Schrittleiste ist jetzt eine Kapsel: alle Schritte sitzen in einer
   gemeinsamen Rinne, der aktive schwimmt als Verlauf darin. Das liest sich
   als Weg, nicht als fünf einzelne Knöpfe. */
.steps {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--flaeche); box-shadow: var(--kante);
  width: max-content; max-width: 100%; overflow-x: auto;
}
.steps button {
  background: transparent; border: 0; color: var(--mute);
  border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 700;
  min-height: 44px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease;
}
.steps button:hover { color: var(--text); }
.steps button.on {
  background: var(--verlauf); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(210,255,90,.9), var(--kante2);
}

.lane {
  background: var(--flaeche); border: 0; border-radius: var(--r);
  padding: 20px; overflow: hidden; max-width: 100%;
  box-shadow: var(--kante), var(--schatten);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lane h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.01em; margin: 0 0 6px; }

.wave {
  height: 82px; width: 100%; border-radius: 14px; display: block;
  background: rgba(0,0,0,.3); box-shadow: var(--kante);
}

/* Hier standen .beat-grid, .beat, .beat:hover, .beat.on, .beat .meta und
   .beat-actions - Reste des alten Sechser-Rasters. Sie sind weg, und das
   war ueberfaellig: die Klasse ".beat" gab es naemlich noch ein zweites
   Mal, an der Beat-Spur im Mixer (<div class="spur-block beat">). Dort
   hat ".beat:hover" mit hoeherer Spezifitaet gewonnen als ".spur-block" -
   beim Ueberfahren verlor die Spur ihr Streifenmuster, wurde flach und
   sprang zwei Pixel nach oben. Ein Katalog, den es nicht mehr gibt, hat
   also den Mixer verunstaltet. */

.lyric { min-height: 190px; font-size: 19px; line-height: 1.5; resize: vertical; }
.prompter {
  font-family: var(--display); font-size: clamp(22px, 4vw, 34px);
  line-height: 1.25; min-height: 140px; padding: 18px;
  background: rgba(0,0,0,.3); border-radius: var(--r-innen); border: 0;
  white-space: pre-wrap; box-shadow: var(--kante);
}

.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.meter-label { font-size: 11px; color: var(--mute); margin-bottom: 5px; letter-spacing: .08em; text-transform: uppercase; }
.meter { height: 9px; background: rgba(0,0,0,.4); border-radius: 99px; overflow: hidden; box-shadow: var(--kante); }
.meter > i { display: block; height: 100%; width: 0; background: var(--verlauf-weit); }

.admin-bar { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bar-wrap { height: 12px; background: rgba(0,0,0,.4); border-radius: 99px; overflow: hidden; box-shadow: var(--kante); }
.bar-wrap > i { display: block; height: 100%; background: var(--verlauf); width: 0; }

/* Regler */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.knob { display: grid; gap: 6px; }
.knob label { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.knob label span { color: var(--zyan); font-variant-numeric: tabular-nums; font-weight: 700; }
.knob small { color: var(--mute); font-size: 11.5px; line-height: 1.45; }
/* Alle Schieberegler sehen gleich aus. Vorher trugen nur die im Mix eine
   eigene Gestalt - der Lautstaerkeregler an einer Spur blieb der blaue
   Systemregler und stach heraus wie ein Fremdkoerper. */
.knob input[type=range], .take-laut input[type=range], input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 0; border: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--lila), rgba(255,255,255,.12));
}
.knob input[type=range]::-webkit-slider-thumb, input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 0; cursor: grab;
  box-shadow: 0 3px 10px rgba(0,0,0,.65), 0 0 0 4px rgba(169,215,69,.28);
}
.knob input[type=range]::-moz-range-thumb, input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 0; cursor: grab;
  box-shadow: 0 3px 10px rgba(0,0,0,.65), 0 0 0 4px rgba(169,215,69,.28);
}

.aufnahme-optionen { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 14px; }
.aufnahme-optionen label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; }
.aufnahme-optionen input { width: auto; }

/* Stimm-Vorlagen */
.vorlagen { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 0; }
.vorlage {
  background: var(--flaeche2); border: 0; color: var(--text);
  border-radius: 999px; padding: 12px 18px; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, transform .16s ease;
}
.vorlage:hover { background: var(--flaeche3); }
.vorlage.an {
  background: var(--verlauf); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(210,255,90,.9), var(--kante2);
}
.vorlage:active { transform: scale(.96); }
#vorlageErklaerung { min-height: 34px; line-height: 1.55; }

/* Takes */
.takes { display: grid; gap: 10px; }
.take {
  display: grid; gap: 11px; align-items: stretch;
  background: var(--flaeche2); border: 0; border-radius: var(--r-innen);
  padding: 14px; box-shadow: var(--kante);
}
.take.raus { opacity: .48; }
.take-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.take-titel { flex: 1; min-width: 110px; display: grid; }
.take-titel strong { font-family: var(--display); font-size: 14.5px; }
.take-titel span { font-size: 11.5px; color: var(--mute); }
.take-welle { width: 100%; height: 44px; display: block; margin: 2px 0;
  background: rgba(0,0,0,.32); border-radius: 10px; }

.rollen { display: flex; gap: 3px; background: rgba(0,0,0,.3); border-radius: 999px; padding: 3px; }
.rolle {
  background: none; border: 0; color: var(--mute); font: inherit;
  font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 9px 13px; min-height: 36px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.rolle.an { background: var(--verlauf); color: #fff; }

.take-regler { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: center; }
.take-schieben { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.take-schieben .marke { font-size: 11px; color: var(--mute); margin-right: 3px; }
.versatzwert {
  font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--mute);
  min-width: 58px; text-align: center;
}
.versatzwert.geaendert { color: var(--zyan); font-weight: 700; }
.take-laut { display: grid; gap: 6px; min-width: 130px; }
.take-laut .marke { font-size: 11px; color: var(--mute); }
.take-laut .marke b { color: var(--zyan); font-variant-numeric: tabular-nums; }
.take-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.take-knoepfe .btn { flex: 0 0 auto; }

/* Text: Silben, Reimschema, Reimhilfe */
.text-zahlen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.text-zahlen span {
  background: var(--flaeche2); border: 0; border-radius: 999px;
  padding: 7px 13px; font-size: 12px; color: var(--mute); white-space: nowrap;
  box-shadow: var(--kante);
}
.text-zahlen .muster {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 1.6px; color: #fff; background: var(--verlauf); box-shadow: none;
}
.zeilenliste { display: flex; flex-direction: column; gap: 5px; }
.zeilenpause { height: 11px; }
.zeilenrow {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  align-items: center; gap: 11px; width: 100%; min-height: 46px;
  background: var(--flaeche); border: 0; border-radius: 14px;
  padding: 9px 13px; color: var(--text); font: inherit; text-align: left;
  cursor: pointer; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, transform .16s ease;
}
.zeilenrow:hover { background: var(--flaeche2); transform: translateX(2px); }
.zeilenrow .nr {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mute2);
  font-variant-numeric: tabular-nums;
}
.zeilenrow .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.zeilenrow .silb {
  font-size: 11.5px; color: var(--mute); font-variant-numeric: tabular-nums;
  min-width: 22px; text-align: right;
}
.reimchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 9px; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.07); color: var(--mute); border: 0;
}
/* Sechs Farben reichen: mehr als sechs Reimgruppen in einer Strophe kann
   ohnehin niemand auseinanderhalten. Danach fängt es wieder vorn an. */
.reimchip.r0 { background: rgba(210,255,90,.24);  color: #ffb3ce; }
.reimchip.r1 { background: rgba(169,215,69,.26);  color: #cfbcff; }
.reimchip.r2 { background: rgba(34,211,238,.2);   color: #9beaf6; }
.reimchip.r3 { background: rgba(61,220,132,.18);  color: #9df3c2; }
.reimchip.r4 { background: rgba(255,176,32,.2);   color: #ffd79a; }
.reimchip.r5 { background: rgba(255,255,255,.16); color: #e6e0f5; }
.reimchip.doppel { box-shadow: inset 0 0 0 2px currentColor; }
.reimchip.leer { color: var(--mute2); background: rgba(255,255,255,.04); }

.reim-suche { display: flex; gap: 9px; margin: 12px 0 14px; flex-wrap: wrap; }
.reim-suche input { flex: 1 1 220px; min-height: 44px; }
.reim-suche .btn { min-height: 44px; }
.reim-topf { margin: 14px 0; }
.reim-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.reim-kopf strong { font-family: var(--display); font-size: 15px; }
.reim-kopf .hint { margin: 0; }
.reim-woerter { display: flex; flex-wrap: wrap; gap: 7px; }
.reimwort {
  background: var(--flaeche2); border: 0; color: var(--text);
  border-radius: 999px; padding: 11px 16px; min-height: 44px;
  font: inherit; font-size: 13.5px; cursor: pointer; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.reimwort:hover { background: var(--verlauf); color: #fff; }
.reimwort:active { transform: scale(.96); }

/* ==================================================================
   Schubladen (Dialoge)
   ================================================================== */
.blatt-hinter {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,4,12,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.blatt-hinter.on { display: flex; }
.blatt {
  background: #170f27; border: 0;
  border-radius: 28px; box-shadow: var(--schatten-hoch), var(--kante2);
  width: min(560px, 100%); max-height: min(86vh, 780px);
  display: flex; flex-direction: column; overflow: hidden;
}
.blatt-kopf {
  padding: 24px 24px 16px; display: flex; gap: 15px; align-items: flex-start;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
.blatt-kopf h3 { margin: 0 0 5px; font-family: var(--display); font-size: 21px; letter-spacing: -.02em; }
.blatt-kopf p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.55; }
.blatt-leib { padding: 20px 24px; overflow-y: auto; display: grid; gap: 15px; }
.blatt-fuss {
  padding: 16px 24px 20px; display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.blatt-breit { width: min(780px, 100%); }

.ampel {
  width: 50px; height: 50px; border-radius: 17px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 23px; box-shadow: var(--kante);
}
.ampel.gruen { background: rgba(61,220,132,.16); }
.ampel.gelb  { background: rgba(255,176,32,.16); }
.ampel.rot   { background: rgba(255,92,92,.16); }

.befund { border-radius: var(--r-innen); padding: 14px 16px; background: var(--flaeche); box-shadow: var(--kante); }
.befund.rot  { background: rgba(255,92,92,.1); }
.befund.gelb { background: rgba(255,176,32,.09); }
.befund strong { display: block; font-size: 13.5px; margin-bottom: 5px; }
.befund span { color: var(--mute); font-size: 12.5px; line-height: 1.55; }

.erklaerung {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 15px 16px; border: 0; border-radius: var(--r-innen);
  background: var(--flaeche); cursor: pointer; min-height: 44px;
  box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease;
}
.erklaerung:hover { background: var(--flaeche2); }
.erklaerung.an { background: linear-gradient(140deg, rgba(210,255,90,.14), rgba(169,215,69,.14)); }
.haken {
  width: 23px; height: 23px; border-radius: 8px; border: 0;
  display: grid; place-items: center; font-size: 13px; color: transparent;
  background: rgba(0,0,0,.35); margin-top: 1px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18);
}
.erklaerung.an .haken { background: var(--verlauf); color: #fff; box-shadow: none; }
.erklaerung b { font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 4px; }
.erklaerung span { color: var(--mute); font-size: 12.5px; line-height: 1.55; }

.blatt-technik { font-size: 11.5px; color: var(--mute2); line-height: 1.6; padding-top: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.blatt-technik b { color: var(--text); font-weight: 600; }
.blatt-lauf { display: grid; gap: 12px; place-items: center; padding: 34px 0; text-align: center; }
.blatt-lauf .kringel {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--pink);
  animation: dreh .9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Abschluss */
.abs-zwei { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.abs-leinwand {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-innen); display: block;
  background: rgba(0,0,0,.3); box-shadow: var(--kante);
}
.abs-rechts { display: grid; gap: 15px; }
.pillrow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.pill {
  background: var(--flaeche2); border: 0; color: var(--mute);
  border-radius: 999px; padding: 11px 16px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; min-height: 44px; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { background: var(--flaeche3); color: var(--text); }
.pill.an { background: var(--verlauf); color: #fff; }
.wohin { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wahl {
  text-align: left; background: var(--flaeche); border: 0;
  border-radius: var(--r-innen); padding: 16px 18px; cursor: pointer; font-family: inherit;
  color: var(--text); display: grid; gap: 6px; box-shadow: var(--kante);
  transition: background .16s ease;
}
.wahl:hover { background: var(--flaeche2); }
.wahl b { font-family: var(--display); font-size: 15px; }
.wahl span { color: var(--mute); font-size: 12.5px; line-height: 1.55; }
.wahl.an { background: linear-gradient(140deg, rgba(210,255,90,.16), rgba(169,215,69,.16)); box-shadow: var(--kante2); }

/* ==================================================================
   Rechtsseiten
   ================================================================== */
.recht-zwei { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.recht-menue { display: grid; gap: 3px; position: sticky; top: 78px; }
.recht-menue button {
  text-align: left; background: transparent; border: 0; color: var(--mute);
  padding: 13px 15px; border-radius: 13px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.recht-menue button:hover { background: var(--flaeche); color: var(--text); }
.recht-menue button.an { background: var(--flaeche2); color: #fff; box-shadow: var(--kante); }
.recht-text {
  background: var(--flaeche); border: 0; border-radius: var(--r);
  padding: 28px 30px; line-height: 1.68; font-size: 14.5px; box-shadow: var(--kante);
}
.recht-text h3 { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; margin: 0 0 16px; }
.recht-text h4 { font-family: var(--display); font-size: 15.5px; margin: 22px 0 9px; }
.recht-text p { margin: 0 0 13px; color: var(--mute); }
.recht-text p b, .recht-text li b { color: var(--text); }
.recht-text ul { margin: 0 0 15px; padding-left: 20px; color: var(--mute); }
.recht-text li { margin-bottom: 8px; }
.recht-text .eyebrow2 { margin: 22px 0 9px; }
.recht-text .legal { font-size: 12.5px; color: var(--mute2); }
.recht-text a { color: var(--zyan); }
.legal-lock { background: var(--flaeche); border-radius: var(--r-innen); padding: 24px; text-align: center;
  box-shadow: var(--kante); }
.legal-lock-ico { font-size: 28px; margin-bottom: 9px; }
.impfeld {
  display: flex; justify-content: space-between; gap: 12px; text-align: left;
  padding: 12px 0; font-size: 13.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.impfeld span { color: var(--mute); }

/* ==================================================================
   Charts, Liga, Profil, Beats, Chat
   ================================================================== */
.reiter {
  display: flex; gap: 4px; flex-wrap: nowrap;
  background: var(--flaeche); border: 0;
  border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%;
  overflow-x: auto; box-shadow: var(--kante);
}
.reiter button {
  background: none; border: 0; color: var(--mute);
  border-radius: 999px; padding: 11px 20px; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.reiter button:hover { color: var(--text); }
.reiter button.on { background: var(--verlauf); color: #fff; box-shadow: var(--kante2); }

.chartzeile {
  display: grid; grid-template-columns: 36px 56px 1fr auto auto;
  gap: 12px; align-items: center;
  background: var(--flaeche); border: 0; border-radius: var(--r-innen); padding: 11px 13px;
  box-shadow: var(--kante); transition: background .16s ease;
}
.chartzeile:hover { background: var(--flaeche2); }
.chartzeile.ich { background: linear-gradient(120deg, rgba(210,255,90,.14), rgba(169,215,69,.14)); }
.platz {
  font-family: var(--display); font-size: 20px; font-weight: 800;
  color: var(--mute2); text-align: center; font-variant-numeric: tabular-nums;
}
.platz.gold   { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.platz.silber { color: #cfc8e4; }
.platz.bronze { color: #d69a76; }
.chartbild {
  width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
  background: var(--verlauf); display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 18px; font-family: var(--display);
}
.chartmitte { min-width: 0; }
.chartmitte strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartmitte .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--mute); }
.punktesumme {
  font-family: var(--display); font-size: 18px; font-weight: 800;
  color: var(--zyan); font-variant-numeric: tabular-nums; padding-right: 4px;
}
.stimme {
  display: grid; justify-items: center; gap: 1px;
  background: var(--flaeche2); border: 0; color: var(--mute);
  border-radius: 15px; padding: 8px 12px; min-width: 54px; min-height: 54px;
  font: inherit; cursor: pointer; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, transform .14s ease;
}
.stimme:hover { background: var(--flaeche3); color: var(--text); }
.stimme .pfeil { font-size: 11px; line-height: 1; }
.stimme .zahl { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stimme.an { background: var(--verlauf); color: #fff; box-shadow: var(--kante2), 0 8px 20px -12px rgba(210,255,90,.9); }
.stimme:disabled { opacity: .35; cursor: not-allowed; }
.stimme:active:not(:disabled) { transform: scale(.94); }

.ligaflaeche { overflow-x: auto; padding-bottom: 8px; }
.baum { display: flex; gap: 15px; min-width: min-content; align-items: flex-start; }
.baumspalte { display: grid; gap: 11px; min-width: 200px; align-content: start; }
.baumkopf {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 800; color: var(--pink); padding-left: 3px;
}
.paarung {
  background: var(--flaeche); border: 0; border-radius: var(--r-innen);
  padding: 9px; display: grid; gap: 5px; box-shadow: var(--kante);
}
.paarung.offen { background: linear-gradient(140deg, rgba(210,255,90,.13), rgba(169,215,69,.13)); }
.paarung .seite {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 9px 11px; border-radius: 12px; background: rgba(0,0,0,.26); min-height: 44px;
}
.paarung .seite.sieger { background: rgba(61,220,132,.14); }
.paarung .seite.sieger .wer { color: #9df3c2; font-weight: 700; }
.paarung .seite.raus .wer { color: var(--mute2); text-decoration: line-through; }
.paarung .seite.ich { box-shadow: inset 0 0 0 1.5px rgba(210,255,90,.6); }
.paarung .wer { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paarung .punkte { font-size: 13.5px; font-weight: 800; color: var(--mute); font-variant-numeric: tabular-nums; }
.gegen { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute2); text-align: center; }

.profilkopf { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profilbild {
  width: 78px; height: 78px; border-radius: 26px;
  background: var(--verlauf); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-size: 32px; font-weight: 800;
  box-shadow: 0 14px 30px -14px rgba(210,255,90,.85), var(--kante2);
}
.profilkopf .zeile { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--mute); }
.stufen { display: grid; gap: 11px; }
.stufe {
  background: var(--flaeche); border: 0; border-radius: var(--r-innen);
  padding: 16px 18px; display: grid; gap: 9px; opacity: .5; box-shadow: var(--kante);
}
.stufe.erreicht { opacity: 1; }
.stufe.jetzt { opacity: 1; background: linear-gradient(140deg, rgba(210,255,90,.15), rgba(169,215,69,.15)); }
.stufe b { font-family: var(--display); font-size: 15px; }
.stufe p { margin: 0; color: var(--mute); font-size: 12.5px; line-height: 1.55; }
.stufenbedingung { display: flex; gap: 8px; flex-wrap: wrap; }
.stufenbedingung span {
  font-size: 11.5px; color: var(--mute); background: rgba(255,255,255,.07);
  border: 0; border-radius: 999px; padding: 5px 11px;
}
.stufenbedingung span.hab { color: #9df3c2; background: rgba(61,220,132,.16); }
.kontozeile {
  display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px;
  padding: 12px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
.kontozeile:last-child { box-shadow: none; }
.kontozeile span { color: var(--mute); }

.beatkachel {
  background: var(--flaeche); border: 0; border-radius: var(--r);
  padding: 18px; display: grid; gap: 9px; align-content: start; box-shadow: var(--kante);
  transition: transform .18s ease, background .18s ease;
}
.beatkachel:hover { transform: translateY(-3px); background: var(--flaeche2); }
.beatkopf { display: flex; justify-content: space-between; gap: 9px; align-items: start; }
.beatkopf strong { font-family: var(--display); font-size: 16px; }
.lizenz {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px; white-space: nowrap; flex: 0 0 auto; border: 0;
}
.lizenz.frei    { color: #9df3c2; background: rgba(61,220,132,.16); }
.lizenz.nennung { color: #ffd79a; background: rgba(255,176,32,.18); }
.lizenz.anfrage { color: var(--mute); background: rgba(255,255,255,.08); }
.beatmeta { font-size: 12px; color: var(--mute); }
.beatlizenz { margin: 0; font-size: 12px; color: var(--mute); line-height: 1.55; }
.beatknoepfe { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.beatknoepfe .btn { flex: 1; }

.chat-zwei { display: grid; grid-template-columns: 270px 1fr; gap: 15px; height: min(620px, 68vh); }
.chat-liste { background: var(--flaeche); border: 0; border-radius: var(--r); overflow-y: auto; padding: 8px;
  box-shadow: var(--kante); }
.chatperson {
  width: 100%; display: flex; align-items: center; gap: 11px;
  background: none; border: 0; color: var(--text); text-align: left;
  padding: 11px; border-radius: 15px; cursor: pointer; min-height: 58px;
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.chatperson:hover { background: var(--flaeche); }
.chatperson.an { background: var(--flaeche2); box-shadow: var(--kante); }
.chatbild {
  width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto;
  background: var(--verlauf); display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; font-family: var(--display);
}
.chatname { min-width: 0; flex: 1; display: grid; }
.chatname b { font-size: 13.5px; }
.chatname small { color: var(--mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ungelesen {
  background: var(--verlauf); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 3px 8px; flex: 0 0 auto;
}
.chat-raum {
  background: var(--flaeche); border: 0; border-radius: var(--r);
  display: grid; grid-template-rows: 1fr auto; overflow: hidden; box-shadow: var(--kante);
}
.chat-verlauf { overflow-y: auto; padding: 18px; display: grid; gap: 10px; align-content: start; }
.blase { max-width: 76%; border-radius: 19px; padding: 10px 15px; display: grid; gap: 4px; }
.blase p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.blase time { font-size: 10.5px; opacity: .65; }
.blase.meine { justify-self: end; background: var(--verlauf); color: #fff; border-bottom-right-radius: 6px; }
.blase.andere { justify-self: start; background: var(--flaeche3); border-bottom-left-radius: 6px; }
.chat-eingabe { display: flex; gap: 9px; padding: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.chat-eingabe input { flex: 1; }

/* ==================================================================
   DIE BOOTH — die Maske, in der wirklich gerappt wird

   Sie sieht auf dem Rechner anders aus als auf dem Handy, und zwar nicht
   nur schmaler:

   RECHNER: eine Konsole. Links die Bühne mit dem Text, rechts eine Spalte
   mit Pegeln, Aufnahmeknopf und Zustand. Man hat Platz, also nutzt man ihn
   nebeneinander und sieht alles gleichzeitig.

   HANDY: eine Bühne. Der Text nimmt den ganzen Bildschirm, der Knopf sitzt
   unten da, wo der Daumen von allein hinfällt. Alles andere ist weg oder
   klein. Wer mit dem Handy in der Hand rappt, hat keine zweite Hand für
   Regler.
   ================================================================== */
.booth {
  background: linear-gradient(170deg, rgba(169,215,69,.14), rgba(210,255,90,.07) 46%, rgba(0,0,0,.35));
  border: 0; border-radius: var(--r);
  padding: 18px; display: grid; gap: 16px;
  box-shadow: var(--kante), var(--schatten-hoch);
}
.booth-oben { display: flex; justify-content: space-between; align-items: center; }
.booth-oben .kicker { font-size: 10.5px; padding: 6px 12px; }

.booth-buehne {
  background: rgba(0,0,0,.42);
  border: 0; border-radius: var(--r-innen);
  min-height: clamp(200px, 34vh, 320px);
  display: grid; padding: 18px 20px 14px;
  position: relative; overflow: hidden;
  box-shadow: var(--kante), inset 0 -40px 60px -50px rgba(210,255,90,.7);
  /* Antippen holt die nächste Zeile. Deshalb darf hier nichts markiert
     werden — sonst hat man beim Rappen blauen Text im Bild. */
  user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.booth-buehne:active { background: rgba(0,0,0,.5); }
.booth-text { width: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  justify-items: center; align-items: center; }

/* Vier Punkte, die im Takt pulsen. Man sieht die Eins, ohne mitzuzählen.
   Die Eins ist breiter als die anderen drei — dadurch erkennt man den
   Taktanfang auch aus dem Augenwinkel. */
.booth-zaehler { display: flex; gap: 8px; justify-content: center; align-items: center; }
.booth-zaehler .schlag {
  width: 10px; height: 10px; border-radius: 99px;
  background: rgba(255,255,255,.16);
  transition: transform .07s ease, background .07s ease, width .07s ease;
}
.booth-zaehler .schlag:first-child { width: 22px; }
.booth-zaehler .schlag.an {
  background: var(--verlauf); transform: scale(1.35);
  box-shadow: 0 0 16px rgba(210,255,90,.8);
}

.booth-zeilen { display: grid; gap: 8px; text-align: center; width: 100%; align-content: center; }
.booth-zeilen .z { line-height: 1.2; word-break: break-word; }
.booth-zeilen .vor   { font-size: clamp(12px, 2.6vw, 15px); color: var(--mute2); min-height: 1.2em; }
.booth-zeilen .jetzt {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 6.6vw, 50px);
  letter-spacing: -.03em; color: #fff;
  min-height: 1.2em; text-wrap: balance;
  text-shadow: 0 0 40px rgba(210,255,90,.35);
}
.booth-zeilen .next1 { font-size: clamp(14px, 3.2vw, 20px); color: var(--mute); min-height: 1.2em; }
.booth-zeilen .next2 { font-size: clamp(12px, 2.6vw, 15px); color: var(--mute2); opacity: .6; min-height: 1.2em; }

.booth-fuss {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  font-size: 12px; color: var(--mute); padding-top: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.booth-tipp { opacity: .85; }
.booth-leer { text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 430px; }
.booth-leer b { font-family: var(--display); font-size: 18px; }
.booth-leer p { margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.6; }
.booth-leer em { color: var(--pink); font-style: normal; font-weight: 700; }

.booth-countdown { display: grid; place-items: center; }
.booth-countdown span {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(70px, 20vw, 150px); line-height: 1;
  background: var(--verlauf-weit); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.booth-countdown span.puls { animation: zaehlPuls .28s ease-out; }
@keyframes zaehlPuls { from { transform: scale(1.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.booth-unten { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  justify-items: center; padding-top: 6px; }
/* Eine Spalte. Vorher waren es zwei, weil die beiden Zeilen direkte
   Kinder eines Rasters ohne Spaltenangabe waren - Mikro links, Summe
   rechts, beide halb so breit und dadurch beide schlecht ablesbar. */
.booth-pegel { display: grid; grid-template-columns: 1fr; gap: 9px; width: 100%; max-width: 230px; }
.booth-pegel .meter { height: 11px; background: rgba(0,0,0,.45); }
.booth-pegel .meter-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.booth-rechts { display: grid; gap: 10px; width: 100%; max-width: 230px; justify-items: start; }
.booth-status { text-align: left; margin: 0; font-size: 12.5px; line-height: 1.5; }

/* Der Aufnahmeknopf. Groß genug, dass man ihn ohne Hinsehen trifft, und
   während der Aufnahme atmet ein Ring um ihn — so sieht man auch aus zwei
   Metern Entfernung, dass wirklich mitgeschnitten wird. */
.booth-knopf {
  position: relative; width: 86px; height: 86px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; margin-bottom: 20px;
  -webkit-tap-highlight-color: transparent;
}
.booth-knopf:before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--verlauf); opacity: 0; transition: opacity .2s ease;
}
.booth-knopf[data-busy="1"]:before { opacity: .3; animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 0%,100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.12); opacity: .12; } }
.booth-knopf svg { position: absolute; inset: 0; width: 86px; height: 86px; }
.booth-knopf .booth-punkt {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--verlauf); position: relative;
  box-shadow: 0 6px 20px -6px rgba(210,255,90,.9);
  transition: border-radius .18s ease, width .18s ease, height .18s ease;
}
.booth-knopf[data-busy="1"] .booth-punkt { border-radius: 8px; width: 26px; height: 26px; background: var(--bad); }
.booth-knopf .booth-beschriftung {
  position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); white-space: nowrap;
}
.booth-knopf:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .booth-knopf:active { transform: none; }
  .booth-knopf[data-busy="1"]:before { animation: none; }
  .booth-knopf .booth-punkt { transition: none; }
}

/* Zeilenliste */
.booth-listekopf {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--mute); margin-bottom: 11px; flex-wrap: wrap;
}
.booth-zeilenliste { display: grid; gap: 5px; max-height: 340px; overflow-y: auto; }
.booth-zeile {
  display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center;
  background: none; border: 0; border-radius: 12px;
  padding: 11px 12px; min-height: 44px; text-align: left;
  color: var(--mute); font: inherit; font-size: 13.5px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .14s ease;
}
.booth-zeile .nr { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .55; text-align: right; }
.booth-zeile .tx { line-height: 1.4; }
.booth-zeile.drin { color: var(--text); background: var(--flaeche); box-shadow: var(--kante); }
.booth-zeile.jetzt { background: linear-gradient(120deg, rgba(210,255,90,.2), rgba(169,215,69,.2)); color: #fff; }
.booth-zeile.jetzt .nr { color: #ffb3ce; opacity: 1; }
.booth-zeile:hover { background: var(--flaeche2); }
.booth-hinweis { margin: 13px 0 0; font-size: 12.5px; line-height: 1.55; }

/* ---------- Rechner: die Booth als Konsole ----------
   Ab 900 Pixeln steht die Bühne links und die Steuerung rechts daneben.
   Vorher lagen Pegel und Knopf unter der Bühne, und auf einem 27-Zöller
   war zwischen Text und Knopf ein halber Meter Nichts. */
@media (min-width: 900px) {
  .booth { grid-template-columns: 1fr 260px; grid-template-areas:
      "oben oben" "buehne rechts" "welle rechts" "opt rechts"; align-items: start; }
  .booth-oben { grid-area: oben; }
  .booth-buehne { grid-area: buehne; }
  .booth .wave { grid-area: welle; }
  .aufnahme-optionen { grid-area: opt; margin: 0; }
  .booth-unten {
    grid-area: rechts; grid-template-columns: 1fr; gap: 20px; justify-items: center;
    background: rgba(0,0,0,.3); border-radius: var(--r-innen); padding: 20px 18px 26px;
    box-shadow: var(--kante); align-self: stretch; align-content: center;
  }
  .booth-pegel, .booth-rechts { max-width: 100%; }
  .booth-rechts { justify-items: center; }
  .booth-status { text-align: center; }
}

/* ==================================================================
   Handy
   ================================================================== */
.unterleiste { display: none; }

@media (max-width: 820px) {
  .nav-main, .mob-toggle { display: none !important; }
  .topbar { padding: 9px 14px; gap: 8px; }
  .brand span:last-child { font-size: 14px; }
  .page { padding: 20px 14px calc(98px + env(safe-area-inset-bottom)); }
  .hero { padding: 34px 14px 30px; }
  .grid3 { grid-template-columns: 1fr; }
  .track { grid-template-columns: 52px 1fr; }
  .track .extra { grid-column: 1 / -1; display: grid; gap: 8px; }
  .track .extra .btn { width: 100%; }

  .unterleiste {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(12,8,22,.86);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -12px 30px -18px rgba(0,0,0,1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .unterleiste button {
    background: none; border: 0; color: var(--mute2);
    display: grid; justify-items: center; gap: 4px;
    padding: 10px 2px 9px; min-height: 58px;
    font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease;
  }
  .unterleiste button svg { width: 22px; height: 22px; display: block; }
  .unterleiste button.on { color: #fff; }
  .unterleiste button.on svg { filter: drop-shadow(0 0 9px rgba(210,255,90,.85)); }
  .unterleiste button.on:after {
    content: ""; position: absolute; }
  .unterleiste button:active { background: rgba(255,255,255,.06); }

  .blatt-hinter { align-items: flex-end; padding: 0; }
  .blatt, .blatt-breit {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 28px 28px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: hochfahren .28s cubic-bezier(.22,1,.36,1);
  }
  @keyframes hochfahren { from { transform: translateY(100%); } to { transform: none; } }
  .blatt::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 99px;
    background: rgba(255,255,255,.22); margin: 10px auto 0; flex: 0 0 auto;
  }
  .blatt-kopf { padding: 14px 18px 12px; }
  .blatt-leib { padding: 15px 18px; }
  .blatt-fuss {
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  }
  .blatt-fuss .btn { width: 100%; }
  .blatt-fuss .btn:only-child { grid-column: 1 / -1; }

  .feed-gitter { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .songkachel { padding: 7px; border-radius: 20px; }
  .songkachel .unten { padding: 10px 6px 6px; }
  .songkachel .unten strong { font-size: 14px; }
  .songkachel .abspielen { width: 42px; height: 42px; right: 7px; top: 7px; }

  .reiter { width: 100%; }
  .chartzeile { grid-template-columns: 30px 48px 1fr auto; gap: 10px; padding: 10px; }
  .chartzeile .icon-btn { display: none; }
  .chartbild { width: 48px; height: 48px; border-radius: 12px; }
  .baumspalte { min-width: 172px; }
  .chat-zwei { grid-template-columns: 1fr; height: auto; }
  .chat-liste { max-height: 230px; }
  .chat-raum { height: min(440px, 56vh); }
  .recht-zwei { grid-template-columns: 1fr; }
  .recht-menue { position: static; display: flex; gap: 7px; overflow-x: auto; padding-bottom: 7px; }
  .recht-menue button { white-space: nowrap; border-radius: 999px; background: var(--flaeche); }
  .recht-text { padding: 20px; }
  .abs-zwei { grid-template-columns: 1fr; }
  .abs-leinwand { max-width: 250px; margin: 0 auto; }
  .wohin { grid-template-columns: 1fr; }
  .take-regler { grid-template-columns: 1fr; gap: 11px; }
  .take-schieben { justify-content: space-between; }
  .take-knoepfe .btn { flex: 1; }
  .rollen { width: 100%; justify-content: space-between; }
  .rolle { flex: 1; }
  .vorlage { flex: 1 1 30%; }
  .zeilenrow { grid-template-columns: 26px 1fr auto auto; gap: 9px; padding: 9px 11px; }
  .zeilenrow .tx { font-size: 13.5px; }
  .reim-suche .btn { flex: 1 1 100%; }
  .studio-head label.hint { white-space: normal; }

  /* Kleine Kürzel bleiben lesbar. */
  .rangchip, .nurdu, .offen, .lizenz { font-size: 10.5px; padding: 4px 9px; }
  .booth-knopf .booth-beschriftung { font-size: 11px; }
  .booth-pegel .meter-label { font-size: 11px; }
  .booth-fuss { font-size: 12px; }
  .booth-zeile .nr { font-size: 11.5px; }
  .baumkopf { font-size: 11px; }
  .gegen { font-size: 10.5px; }
  .blase time { font-size: 11px; }
  .beatmeta, .beatlizenz { font-size: 12.5px; }
  .text-zahlen span { font-size: 12px; }

  /* ---------- Die Booth nimmt auf dem Handy alles ---------- */
  /* Nur die Kopfzeile des Studios selbst duennt sich aus - nicht jede
     Ueberschrift, die zufaellig auch eine .studio-head ist. Ohne das ">"
     verschwanden die Titel in den Schubladen und in der Spurenkarte. */
  .studio.in-booth > .studio-kopf > .sk-titel { display: none; }
  .studio.in-booth > .studio-kopf { justify-content: center; margin-bottom: 2px; }

  .booth {
    border-radius: 0; margin: 0 -14px; padding: 12px 14px 16px;
    min-height: calc(100dvh - 56px - 54px - 70px - env(safe-area-inset-bottom));
    grid-template-rows: auto 1fr auto auto auto;
  }
  /* Der Kopf war hier ausgeblendet, weil darin nur das Wort "Booth"
     stand - Platzverschwendung. Jetzt steht dort, worauf man rappt,
     wie schnell, und der wievielte Take das ist. Das gehoert genau auf
     diesen Bildschirm, also bleibt er stehen - nur schmaler. */
  .booth-oben { display: flex; padding-bottom: 2px; }
  .booth-beat { font-size: 13px; }
  .booth-take { font-size: 10px; padding: 4px 9px; }
  .booth-buehne { min-height: 0; }
  .booth .wave { height: 50px; }
  .booth-knopf { width: 96px; height: 96px; }
  .booth-knopf svg { width: 96px; height: 96px; }
  .booth-knopf .booth-punkt { width: 36px; height: 36px; }
  .aufnahme-optionen { justify-content: center; gap: 10px 14px; margin: 4px 0 0; }
  .booth-unten { grid-template-columns: 1fr; gap: 12px; padding-top: 0; }
  /* Nebeneinander waren beide Pegel halb so breit - und ein
     halbbreiter Balken auf einem Telefon sagt fast nichts mehr. Der
     Mikrofonpegel ist der wichtigere; er bekommt die volle Breite. */
  .booth-pegel { grid-template-columns: 1fr; max-width: 100%; }
  .booth-rechts { justify-items: center; max-width: 100%; }
  .booth-status { text-align: center; }
  .booth-zeilenliste { max-height: none; }
  @media (max-height: 700px) {
    .booth .wave { display: none; }
    .booth-zeilen .next2 { display: none; }
  }
}

@media (max-width: 400px) {
  .brand span:last-child { display: none; }
  .feed-gitter { grid-template-columns: 1fr; }
  .unterleiste button { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==================================================================
   LANDINGPAGE

   Die Seite, die jemand sieht, bevor er ein Konto hat. Sie muss in zehn
   Sekunden drei Dinge zeigen: was das ist, dass es wirklich laeuft, und
   dass es nicht nach Bastelei aussieht.

   Deshalb steht rechts im Hero kein Foto, sondern ein Handy, auf dem die
   Booth tatsaechlich mitlaeuft — Taktpunkte pulsen, der Text wandert
   weiter, der Pegel bewegt sich. Ein Standbild ueberzeugt niemanden.
   ================================================================== */
.page.landing { max-width: 100%; padding: 0 0 0; }
.landing .lp-sec, .landing .lp-hero, .landing .lp-schluss { max-width: 1180px; margin: 0 auto; padding-inline: 22px; }

.lp-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  padding-block: clamp(38px, 7vw, 86px) clamp(30px, 5vw, 60px);
}
.lp-hero-text h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(38px, 5.6vw, 74px); line-height: .92; letter-spacing: -.045em;
  margin: 20px 0 20px; text-wrap: balance;
}
.lp-hero-text h1 em {
  font-style: normal;
  background: var(--verlauf-weit);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero-text .lead { color: var(--mute); font-size: 17.5px; line-height: 1.6; max-width: 46ch; margin: 0 0 28px; }
.lp-hero .hero-cta { justify-content: flex-start; }
.lp-beleg {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0;
}
.lp-beleg li {
  font-size: 12px; font-weight: 600; color: var(--mute);
  background: var(--flaeche); padding: 8px 14px; border-radius: 999px; box-shadow: var(--kante);
}

/* ---------- Das Handy im Hero ---------- */
.lp-hero-bild { position: relative; display: grid; place-items: center; }
.lp-glanz {
  position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(210,255,90,.42), transparent 66%);
  filter: blur(38px);
}
.lp-geraet {
  position: relative; width: min(298px, 78vw); aspect-ratio: 9/19;
  border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 42%, rgba(0,0,0,.5));
  box-shadow: 0 46px 90px -34px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.35);
  transform: rotate(-2.4deg);
}
.lp-schirm {
  position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: linear-gradient(180deg, #1b1030, #0c0e0d 62%);
  display: grid; grid-template-rows: auto auto 1fr auto auto auto;
  gap: 12px; padding: 30px 18px 16px;
}
.lp-insel {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 20px; border-radius: 999px; background: #000;
}
.lp-live { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; }
.lp-live b { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11px; }
.lp-live b i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
  animation: lpBlink 1.4s ease-in-out infinite;
}
@keyframes lpBlink { 50% { opacity: .25; } }
.lp-live span { color: var(--mute); font-variant-numeric: tabular-nums; }

.lp-schlaege { display: flex; gap: 6px; justify-content: center; }
.lp-schlaege i {
  width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.16);
  animation: lpSchlag 2.4s steps(1, end) infinite;
}
.lp-schlaege i:first-child { width: 18px; }
.lp-schlaege i:nth-child(1) { animation-delay: 0s; }
.lp-schlaege i:nth-child(2) { animation-delay: .6s; }
.lp-schlaege i:nth-child(3) { animation-delay: 1.2s; }
.lp-schlaege i:nth-child(4) { animation-delay: 1.8s; }
@keyframes lpSchlag {
  0%, 25% { background: #ff3d81; box-shadow: 0 0 14px rgba(210,255,90,.85); transform: scale(1.3); }
  26%, 100% { background: rgba(255,255,255,.16); box-shadow: none; transform: scale(1); }
}

.lp-zeilen { display: grid; align-content: center; gap: 9px; text-align: center; }
.lp-vor { margin: 0; font-size: 11px; color: var(--mute2); min-height: 1.2em; }
.lp-jetzt {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 21px;
  line-height: 1.15; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 0 26px rgba(210,255,90,.45);
}
.lp-next { margin: 0; font-size: 12.5px; color: var(--mute); min-height: 1.2em; }

.lp-pegel { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.lp-pegel i {
  display: block; height: 100%; width: 40%; border-radius: 99px;
  background: var(--verlauf-weit);
  animation: lpPegel 1.9s cubic-bezier(.4,0,.6,1) infinite alternate;
}
@keyframes lpPegel { from { width: 22%; } to { width: 84%; } }
.lp-knopf {
  width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 0;
  background: var(--verlauf); box-shadow: 0 10px 26px -8px rgba(210,255,90,.95);
  position: relative;
}
.lp-knopf:after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(210,255,90,.5); animation: lpRing 1.8s ease-out infinite;
}
@keyframes lpRing { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.28); opacity: 0; } }
.lp-home { width: 96px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.35); margin: 4px auto 0; }

/* ---------- Das Laufband ----------
   Zwei identische Haelften, die zweite laeuft nach; bei -50 Prozent
   springt es zurueck, und weil dort dasselbe steht, sieht man den Sprung
   nicht. */
.lp-band {
  overflow: hidden; margin: 12px 0 0;
  background: linear-gradient(90deg, rgba(210,255,90,.14), rgba(169,215,69,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.09);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lp-band-lauf {
  display: flex; align-items: center; gap: 22px; width: max-content;
  padding: 14px 0; animation: lpBand 42s linear infinite;
}
.lp-band-lauf span {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; color: var(--text); white-space: nowrap;
}
.lp-band-lauf i { color: var(--pink); font-style: normal; font-size: 9px; opacity: .8; }
@keyframes lpBand { to { transform: translateX(-50%); } }
.lp-band:hover .lp-band-lauf { animation-play-state: paused; }

/* ---------- Abschnitte ---------- */
.lp-sec { padding-block: clamp(46px, 7vw, 86px); }
.lp-kopf { max-width: 620px; margin-bottom: 34px; }
.lp-kopf h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(27px, 3.6vw, 42px);
  letter-spacing: -.03em; margin: 12px 0 12px; text-wrap: balance;
}
.lp-kopf p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.6; }

/* Der Weg: fuenf nummerierte Schritte. */
.lp-weg {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px;
  counter-reset: schritt;
}
.lp-weg li {
  background: var(--flaeche); border-radius: var(--r); padding: 22px 20px;
  box-shadow: var(--kante), var(--schatten); position: relative; overflow: hidden;
  transition: transform .2s ease, background .2s ease;
}
.lp-weg li:hover { transform: translateY(-4px); background: var(--flaeche2); }
.lp-weg li:before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--verlauf-weit); opacity: .8;
}
.lp-weg b {
  font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .1em;
  background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-weg h3 { font-family: var(--display); font-size: 19px; margin: 8px 0 8px; letter-spacing: -.01em; }
.lp-weg p { margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.6; }

/* Kacheln */
.lp-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.lp-kachel {
  grid-column: span 2;
  background: var(--flaeche); border-radius: var(--r); padding: 22px;
  box-shadow: var(--kante), var(--schatten);
  display: grid; align-content: start; gap: 12px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), background .22s ease;
}
.lp-kachel:hover { transform: translateY(-5px); background: var(--flaeche2); }
.lp-kachel.gross { grid-column: span 4; }
.lp-kachel.dunkel { background: linear-gradient(150deg, rgba(210,255,90,.14), rgba(169,215,69,.12)); }
.lp-kachel h3 { font-family: var(--display); font-size: 20px; margin: 0; letter-spacing: -.015em; }
.lp-kachel p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.62; }
.lp-bild {
  border-radius: var(--r-innen); background: rgba(0,0,0,.3); box-shadow: var(--kante);
  min-height: 116px; display: grid; place-items: center; padding: 16px; overflow: hidden;
}
.lp-welle svg { width: 100%; height: 84px; display: block; }
.lp-reim { grid-template-columns: repeat(4, auto); gap: 9px; align-content: center; }
.lp-chip {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.lp-chip.r0 { background: rgba(210,255,90,.26); color: #ffb3ce; }
.lp-chip.r1 { background: rgba(169,215,69,.3); color: #cfbcff; }
.lp-silb { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; text-align: center; }
.lp-cover { grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: center; width: 100%; }
.lp-cover i { display: block; aspect-ratio: 1; border-radius: 11px;
  background: linear-gradient(150deg, var(--c1), var(--c2)); }
.lp-liga { grid-template-columns: repeat(4, 1fr); gap: 7px; align-content: center; width: 100%; }
.lp-liga span { display: block; height: 26px; border-radius: 8px; background: rgba(255,255,255,.09); }
.lp-liga span.sieg { background: linear-gradient(120deg, rgba(61,220,132,.5), rgba(34,211,238,.4)); }
.lp-schild { font-size: 40px; }

/* Schluss */
.lp-schluss {
  text-align: center; padding-block: clamp(50px, 8vw, 96px);
}
.lp-schluss h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(32px, 6vw, 62px);
  letter-spacing: -.04em; margin: 0 0 14px;
  background: var(--verlauf-weit); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-schluss p { color: var(--mute); max-width: 46ch; margin: 0 auto 26px; font-size: 16px; line-height: 1.6; }
.lp-schluss .hero-cta { justify-content: center; }

/* Einblenden beim Scrollen — sparsam, nur einmal je Element. */
.lp-auf { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.lp-auf.da { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .lp-hero { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .lp-hero .hero-cta, .lp-beleg { justify-content: center; }
  .lp-hero-text .lead { margin-inline: auto; }
  .lp-kopf { margin-inline: auto; text-align: center; }
  .lp-gitter { grid-template-columns: repeat(2, 1fr); }
  .lp-kachel, .lp-kachel.gross { grid-column: span 2; }
}
@media (max-width: 620px) {
  .landing .lp-sec, .landing .lp-hero, .landing .lp-schluss { padding-inline: 16px; }
  .lp-gitter { grid-template-columns: 1fr; }
  .lp-kachel, .lp-kachel.gross { grid-column: span 1; }
  .lp-band-lauf span { font-size: 13.5px; }
  .lp-geraet { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-band-lauf, .lp-schlaege i, .lp-pegel i, .lp-knopf:after, .lp-live b i { animation: none !important; }
  .lp-auf { opacity: 1; transform: none; }
}

/* Ankreuzfelder erbten die Systemfarbe - ein blaues Windows-Kästchen in
   einer Oberfläche, in der sonst nichts blau ist. accent-color färbt sie
   ohne Nachbau mit eigenen Elementen. */
input[type=checkbox], input[type=radio] { accent-color: #ff3d81; width: 18px; height: 18px; }
.aufnahme-optionen label { color: var(--text); }

/* ---------- Echte Bildschirmfotos auf der Landingpage ---------- */
.lp-screens { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; align-items: start; }
.lp-schuss {
  border-radius: var(--r); overflow: hidden; background: rgba(0,0,0,.35);
  box-shadow: var(--kante), var(--schatten-hoch);
  display: grid; gap: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.lp-schuss:hover { transform: translateY(-4px); }
.lp-schuss img { width: 100%; display: block; }
.lp-schuss figcaption {
  padding: 14px 18px 16px; font-size: 13.5px; color: var(--mute); line-height: 1.55;
  background: var(--flaeche);
}
.lp-schuss figcaption b { display: block; color: var(--text); font-family: var(--display);
  font-size: 15px; margin-bottom: 4px; }
.lp-schuss-reihe { display: grid; gap: 16px; }
.lp-handy-rahmen {
  border-radius: 34px; padding: 8px; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(0,0,0,.5));
  box-shadow: var(--schatten-hoch);
}
.lp-handy-rahmen img { border-radius: 27px; }
@media (max-width: 940px) {
  .lp-screens { grid-template-columns: 1fr; }
  .lp-handy-rahmen { max-width: 300px; margin: 0 auto; }
}

/* ==================================================================
   ZWEI MODI UND EINE TRANSPORTLEISTE

   Abgeschaut bei Rap Fame, weil es dort funktioniert: das Studio hat
   genau zwei Zustaende — Mikro oder Stift. Wer schreibt, ist einen Tipp
   vom Aufnehmen entfernt; wer aufnimmt, einen Tipp vom Text. Es gibt
   keinen dritten Ort, an dem man sich verlieren kann.

   Die uebrigen drei Schritte (Beat, Mix, Release) sind Werkzeuge, keine
   Orte — sie stehen darunter in einer schmalen Zeile.
   ================================================================== */
.modus {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--flaeche); box-shadow: var(--kante);
}
.modus-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 0; color: var(--mute);
  border-radius: 999px; padding: 12px 22px; min-height: 48px;
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease;
}
.modus-knopf:hover { color: var(--text); }
.modus-knopf.an {
  color: #fff; background: var(--verlauf);
  box-shadow: 0 10px 24px -12px rgba(210,255,90,.95), var(--kante2);
}
.modus-knopf svg { flex: 0 0 auto; }

/* Die fuenf Schritte bleiben, treten aber einen Schritt zurueck: kleiner,
   ruhiger, unter der Ueberschrift. Wer den direkten Weg kennt, nimmt ihn
   weiter; wer nicht, sieht oben nur zwei Knoepfe. */

/* ---------- Transportleiste ---------- */
.transport {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; justify-items: center;
  background: rgba(16,10,28,.9);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: var(--r); padding: 12px 18px;
  box-shadow: var(--kante), var(--schatten-hoch);
}
.transport[hidden] { display: none; }
.transport-rec {
  width: 66px; height: 66px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  cursor: pointer; box-shadow: inset 0 0 0 3px rgba(255,255,255,.22);
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .2s ease;
}
.transport-rec i {
  width: 44px; height: 44px; border-radius: 50%; background: var(--verlauf);
  display: block; box-shadow: 0 8px 22px -8px rgba(210,255,90,.95);
  transition: border-radius .2s ease, width .2s ease, height .2s ease, background .2s ease;
}
.transport-rec[data-busy="1"] i { border-radius: 10px; width: 30px; height: 30px; background: var(--bad); }
.transport-rec[data-busy="1"] { box-shadow: inset 0 0 0 3px rgba(255,92,92,.7); animation: atmen 1.6s ease-in-out infinite; }
.transport-rec:active { transform: scale(.94); }
.transport-neben {
  display: grid; justify-items: center; gap: 3px;
  background: none; border: 0; color: var(--mute); cursor: pointer;
  min-height: 48px; min-width: 64px; padding: 6px 10px; border-radius: 14px;
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.transport-neben span { font-size: 19px; line-height: 1; }
.transport-neben small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transport-neben:hover { color: var(--text); background: var(--flaeche); }
.transport-neben[aria-pressed="true"] { color: #fff; background: var(--flaeche3); }

/* Auf dem Handy klebt sie ueber der Daumenleiste - dieselbe Stelle in
   beiden Modi, damit der Daumen sie blind findet. */
@media (max-width: 820px) {
  .transport {
    position: fixed; left: 10px; right: 10px; z-index: 58;
    bottom: calc(72px + env(safe-area-inset-bottom));
    border-radius: 22px; padding: 10px 16px;
  }
  .studio-pane[data-pane="text"], .studio-pane[data-pane="take"] { padding-bottom: 104px; }
  .modus { width: 100%; }
  .modus-knopf { flex: 1; justify-content: center; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .transport-rec[data-busy="1"] { animation: none; }
}

/* Die zurueckgetretenen Schritte waren auf dem Handy 40 Pixel hoch - unter
   der Grenze, ab der ein Daumen zuverlaessig trifft. Am Rechner mit Maus
   duerfen sie kompakt bleiben. */
@media (max-width: 820px) {
}

/* ------------------------------------------------------------------
   Ein Aufnahmeknopf, nicht zwei.

   Nach dem Einbau der Transportleiste standen auf dem Handy zwei rote
   Knoepfe auf demselben Bildschirm: der grosse in der Booth und der in
   der Leiste. Zwei Knoepfe fuer dieselbe Sache sind schlimmer als ein
   schlecht platzierter - man ueberlegt, ob sie dasselbe tun.

   Auf dem Handy gewinnt die Leiste: sie steht in beiden Modi an derselben
   Stelle und ist mit dem Daumen erreichbar. Die Pegel bleiben in der
   Booth, denn die will man beim Rappen sehen. Am Rechner bleibt der grosse
   Knopf in der Konsole - dort ist Platz, und die Maus trifft ihn ohnehin.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* Nur der grosse Knopf faellt weg. Die rechte Spalte NICHT - dort
     steht die laufende Aufnahmezeit, und die ist beim Rappen das, was
     man am haeufigsten ansieht. Sie war hier mit ausgeblendet, damit
     hatte man auf dem Handy ueberhaupt keine Zeitangabe. */
  .studio-pane[data-pane="take"] .booth-knopf { display: none; }
  /* Aus drei Spalten wird eine Reihe: Pegel breit, Zeit und Hinweis
     darunter. Die mittlere Spalte ist ohne Knopf leer, und zwei
     halbbreite Spalten neben einem Loch sehen kaputt aus. */
  .booth-unten {
    grid-template-columns: 1fr;
    gap: 12px; padding-bottom: 0;
  }
  .booth-pegel, .booth-rechts { max-width: 100%; }
  .booth-rechts {
    display: flex; align-items: center; gap: 12px; justify-items: stretch;
  }
  .booth-rechts .booth-status { flex: 1; }
}

/* Die Meldung darf nicht hinter der Transportleiste verschwinden. */
@media (max-width: 820px) {
  body.mit-transport #toast { bottom: calc(178px + env(safe-area-inset-bottom)); }
}

/* Nachdem der grosse Knopf auf dem Handy weggefallen ist, blieb unten
   Luft und die Pegel lagen hinter der Transportleiste. Die Flaeche
   braucht Platz fuer die Leiste, und die Booth darf entsprechend
   kuerzer werden. */
@media (max-width: 820px) {
  /* Genug Luft, damit die Schalter nicht hinter der Transportleiste
     liegen - auch dann nicht, wenn die Uebersteuerungswarnung dazu
     kommt und alles ein Stueck nach unten schiebt. */
  .studio-pane[data-pane="text"], .studio-pane[data-pane="take"] { padding-bottom: 240px; }
  .booth { min-height: calc(100dvh - 56px - 54px - 70px - 108px - env(safe-area-inset-bottom)); }
}

/* ==================================================================
   BEAT-BROWSER

   Vorher ein Raster aus sechs gleich aussehenden Kaertchen: hoeren und
   uebernehmen ging, alles andere nicht. Man konnte nicht suchen, nichts
   merken, nicht nach Stil sortieren — und man sah nie, was ein Beat
   eigentlich ist, bevor man ihn nahm.

   Jetzt Zeilen, die sich an Ort und Stelle aufklappen. Kein Wechsel auf
   eine Detailseite: der Beat laeuft weiter, waehrend man liest, und der
   Weg zurueck ist derselbe Tipp.
   ================================================================== */
.beat-kopf { display: grid; gap: 12px; margin-bottom: 16px; }
.beat-suchzeile { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
/* Die Lupe haengt am Feld, nicht an der Zeile. Sonst rutscht sie auf dem
   Handy, wo der Hochladen-Knopf umbricht, in die Mitte der ganzen Zeile
   und steht unter dem Feld statt darin. */
.beat-feld { position: relative; flex: 1 1 240px; display: block; min-width: 0; }
.beat-feld input { width: 100%; min-height: 48px; padding-left: 44px; }
.beat-lupe {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--mute2); display: grid; place-items: center; pointer-events: none; z-index: 1;
}
.beat-hoch { flex: 0 0 auto; cursor: pointer; }

/* Genres als Reihe zum Wischen. Jedes traegt seine eigene Farbe — das ist
   dieselbe Farbe, die der Beat spaeter in der Liste hat, und dadurch
   findet man ihn wieder, ohne zu lesen. */
.beat-genres {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.beat-genres::-webkit-scrollbar { display: none; }
.beat-genre {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--flaeche2); color: var(--mute);
  border-radius: 999px; padding: 11px 18px; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease;
}
.beat-genre:hover { color: var(--text); background: var(--flaeche3); }
.beat-genre.an {
  color: #fff;
  background: linear-gradient(125deg, var(--c1, #ff3d81), var(--c2, #8b5cf6));
  box-shadow: var(--kante2), 0 10px 22px -14px rgba(0,0,0,1);
}

.beat-ueber { font-family: var(--display); font-size: 17px; margin: 18px 0 10px; letter-spacing: -.01em; }
.beat-liste { display: grid; gap: 9px; }

.beatzeile {
  background: var(--flaeche); border-radius: var(--r-innen);
  box-shadow: var(--kante); overflow: hidden;
  transition: background .18s ease;
}
.beatzeile:hover { background: var(--flaeche2); }
.beatzeile.auf { background: var(--flaeche2); box-shadow: var(--kante2), var(--schatten); }
.beatzeile.gewaehlt { background: linear-gradient(120deg, rgba(210,255,90,.15), rgba(169,215,69,.15)); }
.beatzeile-kopf {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 13px; align-items: center;
  width: 100%; background: none; border: 0; color: var(--text);
  padding: 11px 13px; min-height: 78px; text-align: left; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.beatbild {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--c1, #8b5cf6), var(--c2, #2c1065));
  font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff;
  box-shadow: var(--kante2);
}
.beatbild.gross { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
.beatzeile-mitte { min-width: 0; display: grid; gap: 3px; }
.beatzeile-mitte strong { font-family: var(--display); font-size: 16px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beatzeile-mitte small { font-size: 12.5px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beat-spielen {
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--flaeche3); color: var(--text); font-size: 14px; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--kante); cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.beat-spielen:hover { transform: scale(1.07); }
.beat-spielen.an { background: var(--verlauf); color: #fff; box-shadow: 0 8px 20px -8px rgba(210,255,90,.9); }

.beatzeile-auf { padding: 0 13px 14px; display: grid; gap: 12px; }
.beat-marken { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.beat-marke {
  font-size: 11.5px; font-weight: 600; color: var(--mute);
  background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px 11px;
}
.beat-herz {
  margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.07); color: var(--mute); font-size: 17px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .16s ease, background .16s ease;
}
.beat-herz:hover { color: #ffb3ce; }
.beat-herz.an { color: #fff; background: var(--verlauf); }
.beat-bahn { height: 6px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
.beat-bahn i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--verlauf-weit); }
.beat-waehlen { width: 100%; min-height: 50px; font-size: 15px; }

.beat-tag {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  background: linear-gradient(125deg, rgba(210,255,90,.16), rgba(169,215,69,.14));
  border-radius: var(--r-innen); padding: 13px; box-shadow: var(--kante2);
}

@media (max-width: 620px) {
  .beat-hoch { width: 100%; }
  .beat-suchzeile input { flex: 1 1 100%; }
  .beat-tag { grid-template-columns: 56px 1fr; }
  .beat-tag .btn { grid-column: 1 / -1; width: 100%; }
  .beatzeile-kopf { grid-template-columns: 50px 1fr auto; gap: 11px; padding: 10px 11px; min-height: 72px; }
  .beatbild { width: 50px; height: 50px; border-radius: 14px; font-size: 19px; }
}

/* ------------------------------------------------------------------
   Warum etwas breiter wurde als das Fenster

   Ein Element in einem Grid oder Flex bekommt von sich aus min-width:auto
   und schrumpft deshalb nie unter die Breite seines Inhalts. Die
   Genre-Reihe hat overflow-x:auto und darf innen beliebig breit sein -
   ihre AUSSENbreite blieb aber die Summe aller Knoepfe, und die schob die
   ganze Studio-Spalte auf 557 Pixel bei 390 Pixel Bildschirm.

   min-width:0 auf der Kette vom Raster bis zur Reihe loest das. Ohne diese
   Zeile scrollt die gesamte Seite seitlich statt nur die Reihe.
   ------------------------------------------------------------------ */
.studio, .studio-pane, .lane, .beat-kopf, .beat-suchzeile,
.beat-genres, .steps, .reiter, .booth, .chartmitte, .takes, .take { min-width: 0; }
.beat-genres, .steps, .reiter { max-width: 100%; }

/* ==================================================================
   SPURANSICHT

   Jede Aufnahme eine Zeile, ein Taktlineal darueber. Kein Beiwerk: Name,
   Wellenform, Lautstaerke. Die Regler gehoeren zur ausgewaehlten Spur und
   stehen darunter — nicht in jeder Zeile, sonst hat man bei drei Takes
   eine Wand aus Knoepfen.
   ================================================================== */
.spurfeld { background: rgba(0,0,0,.28); border-radius: var(--r-innen); padding: 10px; box-shadow: var(--kante); }
.spur-lineal {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 0 0 8px 108px; padding-bottom: 6px;
  font-size: 10.5px; color: var(--mute2); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.spur-lineal span { position: relative; }
.spur-lineal span:before {
  content: ""; position: absolute; left: 0; bottom: -7px; width: 1px; height: 6px;
  background: rgba(255,255,255,.16);
}
.spuren { display: grid; gap: 5px; }
.spur {
  display: grid; grid-template-columns: 104px 1fr; gap: 4px; align-items: stretch;
  border-radius: 12px; overflow: hidden; background: var(--flaeche);
  cursor: pointer; transition: background .16s ease;
}
.spur:hover { background: var(--flaeche2); }
.spur.an { background: linear-gradient(120deg, rgba(210,255,90,.22), rgba(169,215,69,.18)); box-shadow: var(--kante2); }
.spur.raus { opacity: .45; }
.spur-kopf {
  display: flex; align-items: center; gap: 7px; padding: 10px 11px; min-height: 56px;
  background: rgba(0,0,0,.22); min-width: 0;
}
.spur-sym { font-size: 13px; flex: 0 0 auto; }
.spur-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spur-laut {
  margin-left: auto; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px 8px; flex: 0 0 auto;
}
.spur-bahn { position: relative; display: grid; align-items: center; padding: 6px 8px; min-width: 0; }
.spur-welle { width: 100%; height: 42px; display: block; }
.spur-block {
  height: 34px; border-radius: 8px;
  background: repeating-linear-gradient(90deg,
    rgba(255,176,32,.55) 0 3px, rgba(255,176,32,.16) 3px 7px);
}
.spur-plus {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(34,211,238,.12); color: #9beaf6; font: inherit; font-size: 13.5px; font-weight: 700;
  -webkit-tap-highlight-color: transparent; transition: background .16s ease;
}
.spur-plus:hover { background: rgba(34,211,238,.2); }
.spur-plus span { font-size: 17px; line-height: 1; }

.spur-regler {
  margin-top: 12px; background: var(--flaeche); border-radius: var(--r-innen);
  padding: 15px; display: grid; gap: 12px; box-shadow: var(--kante);
}
.spur-regler-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spur-regler-kopf strong { font-family: var(--display); font-size: 15.5px; }
.spur-regler-kopf .hint { margin: 0; flex: 1; min-width: 0; }
.spur-regler-kopf .icon-btn { margin-left: auto; }

@media (max-width: 620px) {
  .spur { grid-template-columns: 88px 1fr; }
  .spur-lineal { margin-left: 92px; }
  .spur-kopf { padding: 9px; min-height: 52px; }
  .spur-name { font-size: 12.5px; }
}

/* Unter der Spuransicht klaffte eine Luecke: die Flaeche hat Platz fuer
   die Transportleiste, und die Seite legt ihren eigenen Rand darunter.
   Einmal reicht. */
@media (max-width: 820px) {
  .page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .studio-pane[data-pane="text"], .studio-pane[data-pane="take"] { padding-bottom: 128px; }
}

/* Der Name wurde auf "T" zusammengestaucht: bei 88 Pixeln Kopfbreite nahm
   ihm die Lautstaerke-Zahl den Platz. Auf dem Handy faellt die Zahl weg -
   sie steht ohnehin gross in den Reglern darunter. */
@media (max-width: 620px) {
  .spur { grid-template-columns: 104px 1fr; }
  .spur-lineal { margin-left: 108px; }
  .spur-laut { display: none; }
}

/* ==================================================================
   MINI-PLAYER

   Klebt unten, solange etwas laeuft — ueber der Daumenleiste, nicht
   darauf. Die Daumenleiste ist die Navigation und darf nicht verdeckt
   werden.
   ================================================================== */
.spieler {
  position: fixed; left: 12px; right: 12px; z-index: 59;
  bottom: calc(74px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 12px; align-items: center;
  background: rgba(20,13,34,.92);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 18px; padding: 9px 12px;
  box-shadow: var(--kante2), var(--schatten-hoch);
  overflow: hidden;
}
.spieler[hidden] { display: none; }
.spieler-bild {
  width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  background: var(--verlauf); display: grid; place-items: center;
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px;
}
.spieler-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spieler-text { min-width: 0; display: grid; gap: 2px; }
.spieler-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler-text small { font-size: 12px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler-knopf {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--verlauf); color: #fff; font-size: 14px;
  display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(210,255,90,.9);
  -webkit-tap-highlight-color: transparent; transition: transform .16s ease;
}
.spieler-knopf:active { transform: scale(.94); }
.spieler-zu {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--mute); font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
.spieler-zu:hover { color: var(--text); background: rgba(255,255,255,.14); }
/* Die Bahn ist jetzt bedienbar, nicht nur Anzeige: antippen springt,
   ziehen sucht. Sichtbar bleibt sie schmal, die Trefferflaeche daruber
   ist ueber ::before auf 14 px aufgeweitet - Daumen treffen keine
   3-Pixel-Linie. */
.spieler-bahn {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,.12); grid-column: 1 / -1;
  cursor: pointer; touch-action: none;
}
.spieler-bahn::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 14px;
}
.spieler-bahn i {
  display: block; height: 100%; width: 0; background: var(--verlauf-weit);
  transition: width .08s linear;
}
.spieler-bahn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Bild und Text sind Knoepfe geworden (sie ziehen die grosse Ansicht
   auf) - die duerfen nicht wie Knoepfe aussehen. */
.spieler-bild, .spieler-text {
  border: 0; padding: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Der Text ist ein Knopf geworden (er zieht die grosse Ansicht auf) -
   und Knoepfe bringen einen weissen Grund mit, wenn man ihn nicht
   ausdruecklich wegnimmt. Genau das stand hier: ein weisser Kasten
   mitten in der Leiste. Das Bild behaelt seinen Verlauf. */
.spieler-text { background: none; }

/* ==================================================================
   DIE GROSSE ANSICHT

   Aus der Leiste aufgezogen: Cover gross, Bahn mit Griff, Zeit in beide
   Richtungen, Sprungknoepfe, Schleife, Lautstaerke. Auf dem Telefon
   fuellt sie den Bildschirm, auf dem Rechner steht sie als Karte rechts
   unten - dort ist der Bildschirm nicht das knappe Gut.
   ================================================================== */
.buehne {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(34px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 0%, rgba(169,215,69,.28), transparent 60%),
              rgba(12,8,20,.98);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  animation: buehne-auf .22s cubic-bezier(.2,.8,.3,1);
}
.buehne[hidden] { display: none; }
@keyframes buehne-auf { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .buehne { animation: none; } }

.buehne-kopf {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
}
.buehne-quelle {
  text-align: center; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}
.buehne-runter, .buehne-zu {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--text); font-size: 17px;
  -webkit-tap-highlight-color: transparent;
}
.buehne-runter:hover, .buehne-zu:hover { background: rgba(255,255,255,.14); }

/* Das Cover ist quadratisch - und bleibt es. flex durfte es vorher in
   die Hoehe ziehen, dann stand ein Rechteck da, wo ein Plattencover
   hingehoert. Jetzt darf es schrumpfen (flex-shrink), aber nicht
   wachsen, und die Hoehe kommt aus der Breite. */
.buehne-mitte {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
}
.buehne-bild {
  display: grid; place-items: center;
  width: min(72vw, 340px); max-width: 100%;
  aspect-ratio: 1; max-height: 100%;
  border-radius: 24px; overflow: hidden;
  background: var(--verlauf);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 76px;
}
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.buehne-text { display: grid; gap: 4px; text-align: center; }
.buehne-text strong { font-family: var(--display); font-size: 22px; }
.buehne-text small { color: var(--mute); font-size: 14px; }

.buehne-bahn {
  position: relative; height: 6px; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.14); touch-action: none;
}
.buehne-bahn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 30px;
}
.buehne-bahn i {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 99px; background: var(--verlauf-weit);
}
.buehne-bahn b {
  position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: #fff; transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.buehne-bahn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

.buehne-zeit {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums;
  margin-top: -6px;
}

.buehne-knoepfe {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.buehne-gross {
  width: 72px; height: 72px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--verlauf); color: #fff; font-size: 22px;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -12px rgba(210,255,90,.95);
  transition: transform .16s ease; -webkit-tap-highlight-color: transparent;
}
.buehne-gross:active { transform: scale(.95); }
.buehne-neben {
  min-width: 52px; height: 52px; padding: 0 12px; border: 0; border-radius: 16px;
  cursor: pointer; background: rgba(255,255,255,.07); color: var(--text);
  font-size: 14px; font-weight: 600; -webkit-tap-highlight-color: transparent;
}
.buehne-neben:hover:not([disabled]) { background: rgba(255,255,255,.14); }
.buehne-neben[disabled] { opacity: .3; cursor: default; }
.buehne-neben.an { background: var(--verlauf); color: #fff; }

.buehne-laut {
  display: flex; align-items: center; gap: 12px; padding: 0 4px;
  color: var(--mute); font-size: 12px;
}
.buehne-laut input { flex: 1; min-width: 0; }
.buehne-laut svg { flex: none; opacity: .7; }

body.buehne-auf { overflow: hidden; }
/* Meldungen und Daumenleiste liegen unter der Buehne und schimmern
   sonst durch den halbdurchsichtigen Grund. */
body.buehne-auf #toast,
body.buehne-auf .unterleiste,
body.buehne-auf .spieler { visibility: hidden; }

@media (min-width: 821px) {
  .buehne {
    inset: auto 18px 18px auto;
    width: 380px; max-height: min(78vh, 720px);
    border-radius: 26px; padding: 16px 20px 22px;
    box-shadow: var(--kante2), 0 40px 80px -30px rgba(0,0,0,.95);
  }
  .buehne-bild { width: 100%; max-width: 260px; }
  body.buehne-auf { overflow: auto; }
}

/* Laeuft etwas, brauchen Meldungen und die Transportleiste mehr Abstand. */
@media (max-width: 820px) {
  body.mit-spieler #toast { bottom: calc(148px + env(safe-area-inset-bottom)); }
  body.mit-spieler.mit-transport #toast { bottom: calc(250px + env(safe-area-inset-bottom)); }
  body.mit-spieler .transport { bottom: calc(146px + env(safe-area-inset-bottom)); }
  body.mit-spieler .page { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (min-width: 821px) {
  .spieler { left: auto; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 40px)); }
}

/* ---------- Feed als Beitragsfolge ---------- */
.beitrag-kopf {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; min-width: 0;
}
.beitrag-bild {
  width: 38px; height: 38px; border-radius: 13px; flex: 0 0 auto;
  background: var(--verlauf); display: grid; place-items: center;
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px;
  box-shadow: var(--kante2);
}
.beitrag-wer { min-width: 0; display: grid; gap: 1px; flex: 1; }
.beitrag-wer strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beitrag-wer small { font-size: 11.5px; color: var(--mute2); }
.beitrag-kopf .rangchip { flex: 0 0 auto; }
.songkachel .unten .zeile { min-height: 0; }
.songkachel .unten .zeile:empty { display: none; }

/* Auf dem Handy eine Spalte: ein Beitrag, ganze Breite. Zwei nebeneinander
   waren Ware im Regal, nicht Leute mit Musik. */
@media (max-width: 820px) {
  .feed-gitter { grid-template-columns: 1fr; gap: 14px; }
  .songkachel .unten strong { font-size: 16px; }
}
@media (max-width: 400px) { .feed-gitter { grid-template-columns: 1fr; } }

/* ---------- Adminbereich: Konten verwalten ---------- */
.kontoliste { display: grid; gap: 10px; margin-top: 12px; }
.kontokarte {
  background: var(--flaeche); border-radius: var(--r-innen); padding: 14px;
  display: grid; gap: 11px; box-shadow: var(--kante);
}
.kontokarte.gesperrt { background: rgba(255,92,92,.1); }
.kontokopf { display: flex; align-items: center; gap: 11px; min-width: 0; }
.kontobild {
  width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto;
  background: var(--flaeche3); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--text);
}
.kontobild.chef { background: var(--verlauf); color: #fff; }
.kontower { min-width: 0; display: grid; gap: 2px; flex: 1; }
.kontower strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontower small { font-size: 12px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontostatus { display: flex; gap: 7px; flex-wrap: wrap; }
.statuschip {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 10px;
  background: rgba(255,255,255,.07); color: var(--mute);
}
.statuschip.ja { color: #9df3c2; background: rgba(61,220,132,.16); }
.statuschip.offen { color: #ffd79a; background: rgba(255,176,32,.16); }
.statuschip.nein { color: #ffc2c2; background: rgba(255,92,92,.18); }
.kontoknoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.kontoknoepfe .minibtn { min-height: 40px; }
.minibtn.weg { background: rgba(255,92,92,.16); color: #ffc2c2; }
.minibtn.weg:hover { background: rgba(255,92,92,.28); }
@media (max-width: 620px) {
  .kontoknoepfe .minibtn { flex: 1 1 46%; min-height: 44px; }
}

/* ==================================================================
   EFFEKTKETTE

   Eine Liste, keine Regalwand. Jeder Effekt eine Karte: Nummer (die
   Reihenfolge zaehlt), Zeichen, Name, ein Satz was er tut, ein Schalter,
   ein Regler. Mehr Knoepfe pro Effekt waeren mehr Entscheidungen, und
   davon gibt es hier schon genug.
   ================================================================== */
.feiner { margin-top: 4px; }
.feiner > summary {
  cursor: pointer; list-style: none; padding: 12px 15px; border-radius: 14px;
  background: var(--flaeche); box-shadow: var(--kante);
  font-size: 13px; font-weight: 600; color: var(--mute); min-height: 44px;
  display: flex; align-items: center; gap: 9px;
  -webkit-tap-highlight-color: transparent;
}
.feiner > summary::-webkit-details-marker { display: none; }
.feiner > summary:before { content: "▸"; color: var(--pink); font-size: 11px; transition: transform .16s ease; }
.feiner[open] > summary:before { transform: rotate(90deg); }
.feiner > summary:hover { color: var(--text); background: var(--flaeche2); }
.feiner .fx-grid { margin-top: 14px; }

.effekt {
  background: var(--flaeche); border-radius: var(--r-innen); padding: 14px;
  display: grid; gap: 12px; box-shadow: var(--kante); margin-bottom: 9px;
}
.effekt.aus { opacity: .5; }
.effekt-kopf { display: flex; align-items: center; gap: 11px; min-width: 0; }
.effekt-nr {
  width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto;
  background: var(--verlauf); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 12px;
}
.effekt-zeichen { font-size: 19px; flex: 0 0 auto; }
.effekt-titel { min-width: 0; display: grid; gap: 2px; flex: 1; }
.effekt-titel strong { font-family: var(--display); font-size: 15px; }
.effekt-titel small { font-size: 12px; color: var(--mute); line-height: 1.5; }

/* Der Schalter. Ein Kippschalter sagt "an oder aus" schneller als jedes
   Wort - und man trifft ihn mit dem Daumen. */
.effekt-schalter {
  width: 52px; height: 30px; border-radius: 999px; border: 0; flex: 0 0 auto;
  background: rgba(255,255,255,.12); cursor: pointer; padding: 3px;
  display: flex; align-items: center; transition: background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.effekt-schalter i {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; display: block;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.effekt-schalter.an { background: var(--verlauf); }
.effekt-schalter.an i { transform: translateX(22px); }

.effekt-regler { display: grid; gap: 7px; }
.effekt-regler .marke { font-size: 12.5px; color: var(--mute); }
.effekt-regler .marke b { color: var(--zyan); font-variant-numeric: tabular-nums; }
.effekt-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.effekt-knoepfe .minibtn { min-height: 40px; }
.effekt-knoepfe .minibtn[disabled] { opacity: .35; cursor: not-allowed; }

.katalog { display: grid; gap: 8px; margin-bottom: 14px; }
.katalogzeile {
  display: grid; grid-template-columns: 30px 1fr 32px; gap: 12px; align-items: center;
  width: 100%; background: var(--flaeche2); border: 0; border-radius: 14px;
  padding: 13px; min-height: 60px; text-align: left; color: var(--text);
  font: inherit; cursor: pointer; box-shadow: var(--kante);
  -webkit-tap-highlight-color: transparent; transition: background .16s ease;
}
.katalogzeile:hover { background: var(--flaeche3); }
.katalogzeile.drin { opacity: .6; }
.katalogtext { min-width: 0; display: grid; gap: 2px; }
.katalogtext strong { font-family: var(--display); font-size: 14.5px; }
.katalogtext small { font-size: 12px; color: var(--mute); line-height: 1.5; }
.katalogplus {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verlauf); color: #fff; font-size: 17px; font-weight: 700;
}
@media (max-width: 620px) {
  .effekt-knoepfe .minibtn { flex: 1 1 30%; min-height: 44px; }
}

/* ---------- Feed: Reiter und Reaktionen ---------- */
.feedkopf { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.feedkopf h2 { font-family: var(--display); font-size: 28px; letter-spacing: -.02em; }

/* Reaktionen tragen ihren Namen, nicht nur ein Bild. Ein Daumen sagt
   "gefällt mir" — das weiß man auch ohne Knopf. "Sitzt im Takt" sagt
   etwas über den Song, und genau dafür ist das hier da. */
.reaktionen { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 8px 4px; }
.reaktion {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border: 0; color: var(--mute2);
  border-radius: 999px; padding: 9px 13px; min-height: 40px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .14s ease;
}
.reaktion span { font-size: 14px; line-height: 1; }
.reaktion b { font-variant-numeric: tabular-nums; font-size: 11.5px; opacity: .85; }
.reaktion.hat { color: var(--mute); background: rgba(255,255,255,.09); }
.reaktion:hover { color: var(--text); background: rgba(255,255,255,.14); }
.reaktion.an { color: #fff; background: var(--verlauf);
  box-shadow: 0 8px 18px -10px rgba(210,255,90,.9); }
.reaktion:active { transform: scale(.95); }
@media (max-width: 620px) {
  .feedkopf { align-items: stretch; }
  .feedkopf .reiter { width: 100%; }
  .reaktion { font-size: 11.5px; padding: 9px 11px; min-height: 44px; }
}

/* ---------------------------------------------------------------
   Beatpakete einspielen (Admin)

   Eine Zeile je Datei. Die Felder sind bearbeitbar, weil das Lesen aus
   dem Dateinamen gut ist, aber nicht unfehlbar - und lieber einmal
   nachtippen als dreissig Beats mit falscher BPM in der Bibliothek.
   --------------------------------------------------------------- */
.pk-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.pk-zeile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 64px 74px 52px 34px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--flaeche-2, rgba(255, 255, 255, .04));
  box-shadow: var(--kante);
}

.pk-zeile input {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  font-size: 15px;
  border: 0;
  border-radius: 9px;
  color: inherit;
  background: rgba(0, 0, 0, .25);
}
.pk-zeile input:focus-visible { outline: 2px solid var(--akzent, #ff3d81); outline-offset: 1px; }

.pk-stand {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .08);
}
.pk-fertig { background: rgba(61, 220, 132, .22); color: #3ddc84; }
.pk-laeuft { background: rgba(255, 176, 32, .22); color: #ffb020; }
.pk-fehler { background: rgba(220, 61, 61, .22); color: #ff6b6b; }

.pk-dauer {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: .7;
  text-align: right;
}

.pk-weg {
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  font-size: 15px; line-height: 1;
  color: inherit;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}
.pk-weg:hover { background: rgba(255, 61, 61, .22); }

/* Auf dem Telefon ist fuer sechs Spalten kein Platz. Titel oben ueber
   die ganze Breite, die Kennzahlen darunter. */
@media (max-width: 560px) {
  .pk-zeile {
    grid-template-columns: 26px minmax(0, 1fr) 34px;
    grid-template-areas:
      "stand titel weg"
      "bpm   ton   dauer";
  }
  .pk-stand { grid-area: stand; }
  .pk-titel { grid-area: titel; }
  .pk-bpm   { grid-area: bpm; }
  .pk-ton   { grid-area: ton; }
  .pk-dauer { grid-area: dauer; align-self: center; }
  .pk-weg   { grid-area: weg; }
}

/* Ankreuzfeld in der Feineinstellung. Sieht aus wie ein Regler-Kaestchen,
   damit die Zeile nicht aus der Reihe faellt. */
.knob .schalter {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; font-size: 14px;
}
.knob .schalter input { width: 20px; height: 20px; accent-color: var(--akzent, #ff3d81); }

/* Der Streifen, der den Master zum Sichern anbietet. Erscheint nach dem
   Veroeffentlichen, geht nach 30 Sekunden von selbst wieder. */
.masterbox {
  position: fixed; z-index: 68;
  left: 12px; right: 12px; bottom: calc(140px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 18px;
  background: rgba(20, 13, 34, .96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--kante2), var(--schatten-hoch);
  animation: master-auf .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes master-auf { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .masterbox { animation: none; } }
.masterbox strong { display: block; font-size: 14px; }
.masterbox small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.masterzu {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--mute); font-size: 13px;
}
.masterzu:hover { color: var(--text); background: rgba(255,255,255,.14); }
@media (min-width: 821px) {
  .masterbox { left: auto; right: 18px; width: 420px; bottom: 96px; }
}

/* Der Abspielknopf sitzt jetzt NEBEN dem grossen Knopf, nicht darin -
   ein Knopf im Knopf ist ungueltig und mit der Tastatur nicht
   erreichbar. Die Reihe haelt beide auf einer Linie. */
.beatzeile-reihe { display: flex; align-items: center; gap: 8px; }
.beatzeile-reihe .beatzeile-kopf { flex: 1; min-width: 0; }
.beatzeile-reihe .beat-spielen { flex: none; }

/* Zustand der Datenbank und die letzten Serverfehler im Adminbereich.
   Klartext statt "Serverfehler." - das kostet sonst Stunden. */
.dbkasten {
  padding: 12px 14px; border-radius: 14px; display: grid; gap: 4px;
  background: var(--flaeche-2, rgba(255,255,255,.04)); box-shadow: var(--kante);
}
.dbkasten.gut { box-shadow: inset 0 0 0 1px rgba(61,220,132,.35); }
.dbkasten.schlecht { box-shadow: inset 0 0 0 1px rgba(255,107,107,.45); }
.dbkasten small { color: var(--mute); font-size: 13px; }
.dbkasten code {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: 9px;
  background: rgba(0,0,0,.3); font-size: 12.5px; word-break: break-word;
}
.fehlerzeile {
  display: grid; gap: 4px; padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.fehlerzeit { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.fehlerzeile code {
  display: block; padding: 8px 10px; border-radius: 9px;
  background: rgba(0,0,0,.3); font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word;
}

/* Der Streifen, der dem Admin sagt, dass die Datenbank nicht stimmt.
   Steht oben, nicht unten: er meldet etwas, das jeden Upload killt. */
.dbwarnung {
  position: fixed; left: 0; right: 0; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: #b45309; color: #fff;
  font: 500 14px/1.4 system-ui, -apple-system, sans-serif;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.8);
}
.dbwarnung span { flex: 1; min-width: 200px; }
.dbwarnung .btn { padding: 7px 14px; font-size: 13px; }
.dbwarnung-zu {
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; font-size: 13px;
}

.dbknoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.berichtfeld {
  width: 100%; min-height: 180px; margin-bottom: 12px;
  padding: 10px; border: 0; border-radius: 10px;
  background: rgba(0,0,0,.4); color: var(--text);
  font: 12px/1.5 ui-monospace, monospace; white-space: pre;
}

/* Wählen und Löschen nebeneinander. Löschen bleibt zurückhaltend -
   es soll erreichbar sein, aber nicht einladen. */
.beat-tun { display: flex; gap: 8px; align-items: center; }
.beat-tun .beat-waehlen { flex: 1; }
.btn-weg {
  background: rgba(255, 61, 61, .14);
  color: #ff8a8a;
  box-shadow: inset 0 0 0 1px rgba(255, 61, 61, .3);
}
.btn-weg:hover { background: rgba(255, 61, 61, .26); color: #fff; }

/* ==================================================================
   DIE BOOTH — überarbeitet

   Was vorher fehlte und beim Rappen wehtut:
     - keine Zeit: man wusste nicht, ob der Take 20 Sekunden oder zwei
       Minuten lang ist
     - der Pegel war ein dünner Balken mit "EIN"/"AUS" daneben - damit
       weiss niemand, ob er zu leise ist oder übersteuert
     - die leere Textbühne nahm ein Drittel des Bildschirms, während die
       Schalter darunter zusammengequetscht wurden
   ================================================================== */

/* --- Kopfzeile: Beat, Tempo, Take-Nummer --- */
.booth-woher { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.booth-beat {
  font-weight: 700; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.booth-bpm {
  font-size: 11.5px; color: var(--mute); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.booth-oben-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.booth-take {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.06);
}

/* --- Ist kein Text da, schrumpft die Bühne. Ein leerer Kasten über ein
       Drittel des Bildschirms ist verschenkter Platz - und auf dem Handy
       schiebt er die Bedienung aus dem Bild. --- */
.booth-buehne.leer { min-height: clamp(120px, 20vh, 190px); }

/* --- Der Pegel --- */
.pegel-zeile + .pegel-zeile { margin-top: 9px; }
.booth-pegel .meter {
  position: relative; overflow: hidden;
  border-radius: 99px; background: rgba(0,0,0,.5);
}
.booth-pegel .meter.gross { height: 15px; }
.booth-pegel .meter i {
  position: relative; z-index: 2; display: block; height: 100%; width: 0;
  border-radius: 99px; transition: width .06s linear;
}
/* Die drei Bereiche liegen als schwacher Untergrund darunter: links zu
   leise, in der Mitte richtig, rechts zu laut. Man sieht das Ziel, statt
   es zu erraten. */
.booth-pegel .meter.gross span {
  position: absolute; top: 0; bottom: 0; z-index: 1;
}
.zone-leise { left: 0;   width: 25%; background: rgba(255,255,255,.05); }
.zone-gut   { left: 25%; width: 55%; background: rgba(61,220,132,.10); }
.zone-laut  { left: 80%; width: 20%; background: rgba(255,92,92,.14); }

/* Der Strich bleibt auf der höchsten Stelle stehen und fällt langsam
   zurück - so erwischt man auch die Spitze, die zu schnell vorbei war. */
.booth-pegel .meter.gross u {
  position: absolute; top: -2px; bottom: -2px; z-index: 3;
  width: 2px; margin-left: -1px; background: #fff; border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,.7);
}

.booth-pegel .meter-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.booth-pegel .meter-label b {
  font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 700;
  color: var(--mute);
}
.booth-pegel .meter-label b[data-stand="gut"]   { color: #3ddc84; }
.booth-pegel .meter-label b[data-stand="laut"]  { color: #ff6b6b; }
.booth-pegel .meter-label b[data-stand="leise"] { color: var(--mute); }

.pegel-warnung {
  margin-top: 8px; padding: 7px 11px; border-radius: 10px;
  background: rgba(255,61,61,.16); color: #ff9a9a;
  font-size: 12px; font-weight: 600; text-align: center;
}
.pegel-warnung[hidden] { display: none; }

/* --- Die laufende Zeit --- */
.booth-zeit {
  font-family: var(--display); font-size: 30px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: #fff; line-height: 1;
}
.booth-zeit[hidden] { display: none; }

/* --- Die Schalter als Chips --- */
.aufnahme-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.05); box-shadow: var(--kante);
  font-size: 13px; color: var(--mute);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease;
}
.opt-chip input {
  width: 17px; height: 17px; margin: 0; accent-color: var(--akzent, #ff3d81);
}
.opt-chip:has(input:checked) {
  background: rgba(210,255,90,.16); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(210,255,90,.35);
}
.opt-chip:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* --- Auf dem Handy füllt die Booth den Bildschirm ---
   Wer rappt, soll nichts anderes sehen und vor allem nicht scrollen
   müssen, um den Aufnahmeknopf zu erreichen. */
@media (max-width: 820px) {
  /* Die Buehne bekommt den uebrigen Platz, alles andere nur so viel,
     wie es braucht. Vorher stand zwischen Wellenform und Pegeln ein
     Loch von mehreren Zentimetern. */
  .studio-pane[data-pane="take"] .booth {
    grid-template-rows: auto 1fr auto auto auto;
    padding: 14px; gap: 12px;
  }
  .studio-pane[data-pane="take"] .booth-buehne { min-height: 0; }
  .booth-zeit { font-size: 24px; }
  /* Die leere schwarze Wellenform vor der ersten Aufnahme ist nur ein
     Kasten. Sie erscheint, sobald etwas zu sehen ist. */
  .studio-pane[data-pane="take"] .booth .wave { height: 64px; }
  .booth:not(.nimmt) .wave { display: none; }
}

/* ==================================================================
   VORSCHLÄGE BEIM SCHREIBEN

   Die Reimhilfe stand ganz unten und wartete darauf, dass jemand ein
   Wort eintippt. Beim Schreiben nützt das wenig — man hängt an einer
   Zeile, und die Hilfe ist zwei Bildschirme entfernt. Diese Leiste
   klebt am Textfeld und zeigt ungefragt, worauf sich die Zeile reimt,
   in der der Cursor steht.
   ================================================================== */
.vorschlag {
  /* Sie haengt am Koerper, nicht im Textbereich - siehe app.js. Am
     Rechner steht sie unten am Bildschirmrand, auf dem Handy ueber der
     Transportleiste. */
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; width: min(760px, calc(100vw - 32px)); z-index: 57;
  padding: 10px 12px;
  background: rgba(24, 16, 40, .97);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .3), var(--schatten-hoch);
}
.vorschlag[hidden] { display: none; }

.vorschlag-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px;
  font-size: 12.5px; color: var(--mute);
}
.vorschlag-kopf b { color: var(--text); font-weight: 700; }
.vorschlag-kopf .hint { display: inline; font-size: 12px; }
.vorschlag-silben {
  flex: none; font-variant-numeric: tabular-nums; font-size: 12px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .07);
}

/* Waagerecht wischbar statt umbrechend: die Leiste soll die Höhe nicht
   ändern, während man tippt — ein Textfeld, das unter dem Finger
   springt, ist unbenutzbar. */
.vorschlag-woerter {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vorschlag-woerter::-webkit-scrollbar { display: none; }

.vorschlagwort {
  flex: none; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: var(--text);
  font-size: 14px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}
.vorschlagwort:hover { background: rgba(255, 255, 255, .15); }
.vorschlagwort:active { transform: scale(.96); }
/* Doppelreime sind der Grund, warum man nachschlägt — die dürfen
   herausstechen. */
.vorschlagwort.doppel {
  background: linear-gradient(120deg, rgba(210,255,90,.28), rgba(169,215,69,.28));
  font-weight: 600;
}
.vorschlagwort.doppel:hover {
  background: linear-gradient(120deg, rgba(210,255,90,.42), rgba(169,215,69,.42));
}
.vorschlagwort:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Auf dem Handy klebt die Vorschlagsleiste über der Transportleiste.

   Im Fluss unter dem Textfeld lag sie genau hinter der Transportleiste
   und war unsichtbar - und mit offener Tastatur wäre sie gar nicht mehr
   erreichbar gewesen. Ein Vorschlag, den man nicht sieht, ist keiner.

   Deshalb fest über der Leiste, mit undurchsichtigem Grund: dort steht
   sie immer, egal wie weit man gescrollt hat, und der Daumen erreicht
   sie ohne Umweg. */
@media (max-width: 820px) {
  #vorschlag {
    left: 10px; right: 10px; width: auto; transform: none;
    /* 72 fuer die Daumenleiste, 86 fuer die Transportleiste, 10 Luft
       dazwischen. Bei 140 lag die Leiste noch zur Haelfte darunter. */
    bottom: calc(168px + env(safe-area-inset-bottom));
    padding: 9px 12px;
  }
  /* Läuft ein Song, rutscht die Transportleiste hoch — die Leiste hier
     muss mit. */
  body.mit-spieler #vorschlag {
    bottom: calc(242px + env(safe-area-inset-bottom));
  }
  /* Und der Text braucht unten so viel Luft, dass die letzte Zeile
     nicht dahinter verschwindet. */
  .studio-pane[data-pane="text"] { padding-bottom: 250px; }
}

/* ==================================================================
   SPUREN — Kopfzeile mit Stumm, Solo und Namen

   Karaoke war das falsche Modell: eine Aufnahme über einen Beat, fertig.
   Rap besteht aus Schichten — Hauptstimme, Doubles, Ad-libs, Hook. Also
   braucht jede Spur einen Namen, einen Schalter zum Ausblenden und einen,
   der alles andere ausblendet.
   ================================================================== */
.spur-kopf {
  display: flex; align-items: center; gap: 7px;
  min-width: 0; padding-right: 6px;
}
.spur-zeichen { flex: none; font-size: 13px; opacity: .85; }

.spur-name {
  flex: 1; min-width: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; font-size: 12.5px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 0; border-bottom: 1px dashed transparent;
}
.spur-name:hover { border-bottom-color: rgba(255,255,255,.3); }

.spur-schalter { display: flex; gap: 4px; flex: none; }
.spur-mini {
  width: 24px; height: 24px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--mute);
  font-size: 11px; font-weight: 700; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.spur-mini:hover { background: rgba(255,255,255,.15); color: var(--text); }
.spur-mini.an { background: #b45309; color: #fff; }
.spur-mini.solo.an { background: #3ddc84; color: #06210f; }

/* Eine stumme Spur sieht man, statt sie zu suchen. */
.spur.stumm .spur-bahn { opacity: .28; }
.spur.stumm .spur-name { text-decoration: line-through; opacity: .6; }

.spur-transport {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.spur-transport .hint { margin: 0; font-size: 12px; }

/* Auf dem Handy passt der Spurkopf nicht neben die Wellenform.

   104 Pixel reichen für Zeichen, Name, zwei Schalter und die Lautstärke
   nicht — vom Namen blieb "S" oder "A." übrig. Also übereinander: oben
   die Zeile mit Name und Schaltern, darunter die Wellenform über die
   ganze Breite. Die ist ohnehin das, was man sehen will. */
@media (max-width: 700px) {
  .spur {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .spur-kopf {
    min-height: 44px; padding: 8px 11px;
    background: rgba(0, 0, 0, .3);
  }
  .spur-name { font-size: 13px; }
  .spur-bahn { padding: 4px 8px 8px; }
  .spur-welle { height: 34px; }
  /* Das Lineal hat links keine Kopfspalte mehr, unter der es einrücken
     müsste. */
  .spur-lineal { padding-left: 8px; }
}

/* ==================================================================
   DIE SPURMASKE

   Aufgebaut wie ein Mehrspurgerät: links die Spurköpfe fest, rechts die
   Zeitleiste waagerecht scrollbar, ein Abspielkopf darüber. Unten ein
   Transport mit rotem Aufnahmeknopf.

   Der Aufbau ist das, was solche Geräte seit vierzig Jahren gemeinsam
   haben — die Handschrift ist unsere: dunkler Grund, Verlauf statt
   Vollton, keine Rahmen, Blöcke mit weichen Ecken. Nichts hier ist von
   einer anderen App übernommen.
   ================================================================== */
:root {
  --sm-kopfbreite: 132px;
  --sm-zeilenhoehe: 62px;
  --sm-linealhoehe: 34px;
}

.spurmaske {
  display: grid;
  grid-template-columns: var(--sm-kopfbreite) minmax(0, 1fr);
  border-radius: 16px; overflow: hidden;
  background: rgba(0, 0, 0, .32);
  box-shadow: var(--kante);
}

/* --- Linke Spalte: die Köpfe --- */
.sm-links { display: grid; align-content: start; background: rgba(0, 0, 0, .3); }

.sm-ecke {
  height: var(--sm-linealhoehe);
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 0 8px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sm-uhr {
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700;
  letter-spacing: .01em;
}

.sm-kopf-zeile {
  height: var(--sm-zeilenhoehe);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 10px; min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-left: 3px solid transparent;
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sm-kopf-zeile.an {
  border-left-color: var(--akzent, #ff3d81);
  background: linear-gradient(90deg, rgba(255, 61, 129, .16), transparent);
}
.sm-kopf-zeile.stumm { opacity: .5; }
.sm-kopf-zeile.raus { opacity: .35; }
.sm-beat { border-left-color: var(--amber, #ffb020); }

.sm-zeichen { flex: none; font-size: 11px; opacity: .8; }
.sm-name {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-schalter { display: flex; gap: 3px; flex: none; }
.sm-mini {
  min-width: 22px; height: 22px; padding: 0 4px;
  border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--mute);
  font-size: 10px; font-weight: 700; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.sm-mini:hover { background: rgba(255, 255, 255, .18); color: var(--text); }
.sm-mini.an { background: var(--amber, #ffb020); color: #241500; }
.sm-mini.solo.an { background: #3ddc84; color: #06210f; }
.sm-mini.mehr { letter-spacing: -1px; }

.sm-neu { color: var(--akzent, #ff3d81); }
.sm-neu .sm-zeichen { font-size: 15px; font-weight: 700; }
.sm-neu:hover { background: rgba(255, 61, 129, .1); }

/* --- Rechte Spalte: die Zeitleiste --- */
.sm-rechts { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.sm-rechts::-webkit-scrollbar { height: 6px; }
.sm-rechts::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }
.sm-inhalt { position: relative; }

.sm-lineal {
  position: relative; height: var(--sm-linealhoehe);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sm-takt {
  position: absolute; top: 8px;
  font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
  padding-left: 5px;
}
/* Der Taktstrich gehört zur Zahl, nicht in eine eigene Reihe. */
.sm-takt::before {
  content: ""; position: absolute; left: 0; top: -8px; bottom: -8px;
  width: 1px; background: rgba(255, 255, 255, .14);
}

.sm-bahn {
  position: relative; height: var(--sm-zeilenhoehe);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  /* Taktraster im Hintergrund — man sieht, wo die Eins liegt, ohne
     nach oben zum Lineal zu schauen. */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 88px 100%;
}
.sm-bahn.an { background-color: rgba(255, 61, 129, .07); }
.sm-bahn.stumm { opacity: .45; }
.sm-bahn-neu { height: 44px; border-bottom: 0; }

.sm-block {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: 9px; overflow: hidden;
}
.sm-block-beat {
  background: repeating-linear-gradient(90deg,
    rgba(255, 176, 32, .5) 0 3px, rgba(255, 176, 32, .14) 3px 8px);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .35);
}
.sm-block-stimme {
  background: linear-gradient(160deg, rgba(139, 92, 246, .28), rgba(255, 61, 129, .2));
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .4);
}
.sm-block-stimme.an {
  background: linear-gradient(160deg, rgba(255, 61, 129, .34), rgba(139, 92, 246, .28));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 129, .6);
}
.sm-welle { display: block; width: 100%; height: 100%; }
.sm-warten {
  width: 42px; display: grid; place-items: center;
  color: var(--mute); font-size: 14px;
  background: rgba(255, 255, 255, .05);
}

/* --- Der Abspielkopf --- */
.sm-abspielkopf {
  position: absolute; top: 0; bottom: 0; width: 2px;
  margin-left: -1px; pointer-events: none;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .55));
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}
.sm-abspielkopf::before {
  content: ""; position: absolute; top: 0; left: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

/* --- Transport --- */
.sm-transport {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: 14px; padding: 12px;
  border-radius: 16px; background: rgba(0, 0, 0, .3); box-shadow: var(--kante);
}
.sm-rec {
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  border: 3px solid rgba(255, 92, 92, .45);
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #d92d2d);
  box-shadow: 0 8px 22px -8px rgba(255, 61, 61, .9);
  transition: transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.sm-rec:active { transform: scale(.94); }
.sm-play {
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: var(--text); font-size: 17px;
}
.sm-play:hover { background: rgba(255, 255, 255, .2); }
.sm-monitor {
  display: grid; justify-items: center; gap: 2px;
  border: 0; background: none; cursor: pointer; color: var(--mute);
  font-size: 15px; padding: 4px 8px; border-radius: 10px;
}
.sm-monitor small { font-size: 10px; letter-spacing: .02em; }
.sm-monitor.an { color: #3ddc84; }
.sm-monitor:hover { background: rgba(255, 255, 255, .07); }

@media (max-width: 560px) {
  :root { --sm-kopfbreite: 112px; --sm-zeilenhoehe: 54px; }
  .sm-name { font-size: 12px; }
  .sm-mini { min-width: 20px; height: 20px; font-size: 9.5px; }
  .sm-transport { gap: 18px; }
}

/* Der Spurkopf hat zwei Zeilen: Name oben, Schalter darunter.

   Nebeneinander blieben von "Stimme 1" auf dem Handy vier Pixel — man
   sah "S". Untereinander passt beides, und die Schalter liegen dort, wo
   der Daumen sie erwartet. */
.sm-kopf-zeile {
  flex-direction: column; align-items: stretch; justify-content: center;
  gap: 4px; padding: 0 8px 0 9px;
}
.sm-oben { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sm-kopf-zeile .sm-schalter { justify-content: flex-start; }
.sm-neu { flex-direction: row; align-items: center; }
.sm-neu .sm-oben { gap: 5px; }

/* Der Transport darf nicht hinter der Daumenleiste liegen. */
@media (max-width: 820px) {
  .studio-pane[data-pane="spuren"] { padding-bottom: 120px; }
}

/* ==================================================================
   Schubladen statt Schritte

   Aus sechs Fenstern sind zwei geworden. Was übrig blieb – Beat wählen
   und Fertigmachen – liegt nicht mehr auf dem Weg, sondern darüber:
   eine Schublade fährt von unten herein, man erledigt eine Sache, es fährt
   wieder weg. Der Platz darunter bleibt, wo er war.

   Am Telefon geht es bis knapp unter den oberen Rand – dort ist der
   Bildschirm das knappe Gut. Am Rechner steht es als Karte in der
   Mitte, weil eine bildschirmfüllende Schublade auf 27 Zoll albern wirkt.
   ================================================================== */
.schub {
  position: fixed; inset: 0; z-index: 74;
  display: flex; align-items: flex-end; justify-content: center;
}
.schub[hidden] { display: none; }
.schub-schirm {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: rgba(8,5,14,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease; cursor: pointer;
}
.schub.auf .schub-schirm { opacity: 1; }

.schub-karte {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(760px, 100%);
  max-height: min(92dvh, 940px); min-height: 0;
  background: linear-gradient(180deg, rgba(28,18,46,.98), rgba(16,10,28,.99));
  border-radius: 26px 26px 0 0;
  box-shadow: var(--kante), 0 -30px 80px -30px rgba(0,0,0,.9);
  transform: translateY(18px); opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s ease;
}
.schub.auf .schub-karte { transform: none; opacity: 1; }

/* Der Griff sagt ohne Worte, dass das hier wegwischbar ist. */
.schub-griff {
  width: 44px; height: 4px; border-radius: 999px; margin: 10px auto 0;
  background: rgba(255,255,255,.22); flex: 0 0 auto;
}

.schub-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 12px 18px 12px; flex: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.schub-kopf h3 { margin: 0 0 2px; font-size: 17px; }
.schub-kopf .hint { margin: 0; }
.schub-zu {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  border: 0; background: var(--flaeche); color: var(--mute);
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease;
}
.schub-zu:hover { color: var(--text); background: var(--flaeche3); }

/* Nur der Körper scrollt. Kopf und Griff bleiben stehen – sonst
   verliert man beim Scrollen den einzigen Weg hinaus. */
.schub-koerper {
  /* min-height: 0 ist hier nicht kosmetisch: ohne das weigert sich ein
     Flex-Kind, unter seine Inhaltshoehe zu schrumpfen - die Schublade
     waechst dann ueber den Bildschirm hinaus, statt zu scrollen. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
}
/* Die Karten darin brauchen keinen eigenen Rahmen mehr – die Schublade
   ist schon einer. Erspart die Kiste-in-der-Kiste-Optik. */
/* Die erste Karte braucht keinen eigenen Rahmen - die Schublade ist
   schon einer. Das Innenmass bleibt, sonst klebt die Ueberschrift an
   der Kante. */
.schub-koerper > .lane:first-child { background: transparent; box-shadow: none; }

body.schub-offen { overflow: hidden; }
/* Die Transportleiste gehört zu dem, was darunter liegt. Solange ein
   Schublade offen ist, würde sie nur mitreden. */
body.schub-offen .transport { display: none; }

@media (min-width: 821px) {
  .schub { align-items: center; padding: 24px; }
  .schub-karte { max-height: calc(100dvh - 48px); }
  .schub-karte { border-radius: 26px; }
  .schub-griff { display: none; }
  .schub-kopf { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .schub-karte, .schub-schirm { transition: none; }
}

/* ---------- Die Kopfzeile des Studios ----------
   Links wo man ist, in der Mitte der Umschalter, rechts der Ausgang.
   Drei Dinge, eine Zeile – und keine Schrittleiste mehr darunter. */
.studio-kopf { align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-kopf .sk-titel { min-width: 0; }
.studio-kopf .modus { margin-left: auto; }
.sk-fertig {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0;
  border: 0; border-radius: 999px; padding: 11px 16px; min-height: 44px;
  background: var(--flaeche); box-shadow: var(--kante);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease;
}
.sk-pfeil { color: var(--mute); font-size: 16px; line-height: 1; margin-left: 7px; }
.sk-fertig:hover { background: var(--flaeche3); }
.sk-fertig:hover .sk-pfeil { color: var(--text); }

/* ---------- Aufnehmen und Spuren in einem Fenster ----------
   Solange nichts läuft, macht sich die Booth klein: Wellenform und
   Textbühne sind erst dann etwas wert, wenn wirklich aufgenommen wird.
   So sieht man vorher das, was man vorher wissen will – welche Spuren
   schon liegen. */
.studio-pane[data-pane="take"] > .lane { margin-top: 14px; }
body:not(.nimmt-auf) #wave { height: 54px; opacity: .5; transition: height .2s ease, opacity .2s ease; }
body.nimmt-auf #wave { transition: height .2s ease, opacity .2s ease; }
body.nimmt-auf .studio-pane[data-pane="take"] > .lane { display: none; }

@media (max-width: 820px) {
  .studio-kopf { gap: 8px; }
  .studio-kopf .sk-titel { flex: 1 1 100%; }
  .studio-kopf .modus { margin-left: 0; flex: 1 1 auto; width: auto; }
  .sk-fertig { padding: 11px 13px; font-size: 12.5px; }
  /* Der Ausgang bleibt am Telefon stehen. Ihn im Aufnahme-Fenster
     auszublenden hiesse: von dort kommt man nicht mehr zum Fertigmachen -
     und genau dorthin will man am Ende jeder Session. */
  .schub-karte { max-height: 90dvh; width: 100%; }
  .schub-koerper { padding-left: 14px; padding-right: 14px; }
  .schub-kopf { padding-left: 14px; padding-right: 14px; }
  /* Ohne Aufnahme bleibt die Booth am Handy eine Karte, kein Bildschirm –
     darunter sollen die Spuren sichtbar sein, ohne dass man scrollt. */
  body:not(.nimmt-auf) .booth { min-height: 0; }
  body:not(.nimmt-auf) .booth-buehne { max-height: 148px; }
}

/* Am Rechner klebte die Transportleiste bisher nicht – sie stand am Ende
   der Seite. Solange Aufnehmen und Spuren zwei Fenster waren, ging das:
   jedes war kurz. Seit beides in einem Fenster liegt, ist die Seite
   länger als der Bildschirm, und der rote Knopf lag darunter. Jetzt
   klebt sie hier genauso wie am Telefon – dieselbe Stelle, immer. */
@media (min-width: 821px) {
  .transport {
    position: sticky; bottom: 18px; z-index: 58;
    margin-top: 16px;
  }
}

/* Am Telefon heisst der Knopf nur „Fertig“ – sonst passt er nicht mehr
   neben den Umschalter und rutscht in eine eigene Zeile. Eine Zeile für
   ein Wort ist genau die Art Verschwendung, die den Bildschirm auffrisst. */
@media (max-width: 820px) { .sk-lang { display: none; } }

/* Am Rechner klebt die Transportleiste seit dem Zusammenlegen unten fest.
   Damit die letzte Spur nicht dahinter verschwindet, bekommt das Fenster
   unten so viel Luft, wie die Leiste hoch ist. */
@media (min-width: 821px) {
  .studio-pane[data-pane="take"], .studio-pane[data-pane="text"] { padding-bottom: 100px; }
}

/* Auch am Rechner macht sich die Booth klein, solange nichts läuft. Die
   Textbühne ist beim Rappen das Wichtigste auf dem Bildschirm — davor
   ist sie eine leere Fläche, die die Spuren nach unten drückt. */
@media (min-width: 821px) {
  body:not(.nimmt-auf) .booth-buehne { max-height: 190px; }
}

/* ==================================================================
   Effekte während der Aufnahme

   Die große Effektliste steht im Fertigmachen: dort hat man Ruhe, Regler
   und Reihenfolge. Hier in der Booth geht es um vier Handgriffe — an,
   aus, dazu, weg — mit Zielen, die man mit dem Mikro in der Hand trifft.
   Regler gibt es hier bewusst keine: wer rappt, zieht keinen Schieber.
   ================================================================== */
.fxleiste { margin: 2px 0 4px; display: grid; gap: 9px; }
.fxl-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fxl-auf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 15px; border: 0; border-radius: 999px;
  background: var(--flaeche); box-shadow: var(--kante);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.fxl-auf:hover { background: var(--flaeche3); }
.fxl-auf[aria-expanded="true"] { background: var(--flaeche3); color: #fff; }
.fxl-auf span { font-size: 15px; line-height: 1; }

.fxl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fxchip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 14px; border: 0; border-radius: 999px;
  background: var(--flaeche); box-shadow: var(--kante);
  color: var(--mute); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fxchip span { font-size: 14px; line-height: 1; }
.fxchip:hover { color: var(--text); }
/* An heißt: liegt gerade im Kopfhörer. Aus heißt: liegt in der Kette,
   aber ist stummgeschaltet — nicht dasselbe wie gar nicht da. */
.fxchip.an {
  color: #fff; background: var(--verlauf);
  box-shadow: 0 8px 20px -12px rgba(210,255,90,.9), var(--kante2);
}
.fxchip.nurmix.an { background: var(--flaeche3); box-shadow: var(--kante2); }
.fxchip-mix {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.16); color: inherit;
}

/* Flex statt Grid: ein Raster mit begrenzter Höhe drückt seine Zeilen
   zusammen, bis der Text aus der Karte läuft. Eine Spalte aus Flex-Kindern,
   die nicht schrumpfen dürfen, wächst stattdessen und scrollt. */
.fxl-katalog { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.fxl-katalog > * { flex: 0 0 auto; }
.fxl-katalog[hidden] { display: none; }
.fxwahl {
  display: grid; grid-template-columns: 26px 1fr 30px; align-items: center; gap: 11px;
  width: 100%; min-height: 52px; padding: 9px 13px; text-align: left;
  border: 0; border-radius: 14px; background: var(--flaeche); box-shadow: var(--kante);
  color: var(--text); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.fxwahl:hover { background: var(--flaeche3); }
.fxwahl-zeichen { font-size: 17px; line-height: 1; text-align: center; }
.fxwahl-text { display: grid; gap: 2px; min-width: 0; }
.fxwahl-text strong { font-size: 13px; }
/* Zwei Zeilen reichen: der Satz sagt, wofür der Effekt gut ist, und
   sieben Einträge à drei Zeilen sind eine Wand statt einer Liste. */
.fxwahl-text small {
  color: var(--mute); font-size: 11.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fxwahl-tun {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255,255,255,.08); color: var(--mute); font-size: 17px; font-weight: 700;
}
.fxwahl.drin .fxwahl-tun { background: var(--verlauf); color: #fff; }
.fxl-hinweis { margin: 0; font-size: 11.5px; }

/* Sobald es läuft, verschwinden die vier Ankreuzfelder: Einzähler, Ducking,
   Textlauf und Mithören entscheiden sich beim Start und lassen sich mitten
   im Take nicht mehr ändern. Sie standen bisher trotzdem da — und schoben
   das, was man jetzt wirklich anfasst, unter die Transportleiste. */
body.nimmt-auf .aufnahme-optionen { display: none; }
/* Der Katalog scrollt in sich. Sonst schiebt eine Liste aus sieben
   Einträgen den roten Knopf vom Bildschirm. */
.fxl-katalog { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.fxwahl { min-height: 56px; }

/* ------------------------------------------------------------------
   Pflichtangaben in der Fusszeile

   Kuendigung, Barrierefreiheit, Jugendschutz, Datenschutz und Impressum
   muessen von jeder Seite aus erreichbar sein - § 312k BGB verlangt das
   fuer die Kuendigung ausdruecklich, fuer die uebrigen ist es gute
   Praxis und kostet eine Zeile.
   ------------------------------------------------------------------ */
.fuss-recht {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
}
.fuss-recht button {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  color: var(--matt, #9aa0a6); font: inherit; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px;
}
.fuss-recht button:hover { color: var(--tinte, #fff); }


/* ------------------------------------------------------------------
   Die Ausgabewarnung im Booth

   Sie steht ueber dem roten Knopf und nicht in einer Hilfeseite, weil
   sie sonst genau die Leute nicht erreicht, die sie braeuchten.
   ------------------------------------------------------------------ */
.ausgabe-warnung {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.45; max-width: 46ch;
  background: rgba(255, 180, 60, .12);
  color: #F5D9A8;
  box-shadow: inset 0 0 0 1px rgba(255, 180, 60, .3);
}
.ausgabe-warnung[hidden] { display: none; }
.ausgabe-warnung[data-stufe="hinweis"] {
  background: rgba(255, 255, 255, .06);
  color: var(--matt, #b6b0aa);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}


/* ------------------------------------------------------------------
   Pruefliste im Admin

   Eine Zeile je offener Fall, mit den Marken, an denen man sofort
   sieht, WARUM er hier liegt: gelbe Ampel, Kennzeichnung nach § 11
   UrhDaG, KI-Angabe.
   ------------------------------------------------------------------ */
.pl-zeile {
  display: grid; gap: 8px; padding: 14px;
  background: var(--flaeche); border-radius: 16px; box-shadow: var(--kante);
}
.pl-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-kopf strong { font-size: 15px; }
.pl-marken { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-marken b {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}
.pl-gelb { background: rgba(245,180,60,.18); color: #f5c977; }
.pl-urh  { background: rgba(169,215,69,.2); color: #c9b6ff; }
.pl-ki   { background: rgba(34,211,238,.16); color: #9fe8f5; }
.pl-notiz {
  width: 100%; background: rgba(0,0,0,.25); color: var(--text);
  border: 0; border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 14px;
}
.pl-tun { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.btn-warn { background: var(--pink); color: #fff; }


/* ------------------------------------------------------------------
   Speicheranzeige im Admin

   Der Balken faerbt sich mit. Eine Zahl allein liest niemand rechtzeitig,
   eine rote Flaeche schon.
   ------------------------------------------------------------------ */
.bar-wrap[data-stufe="eng"] i { background: linear-gradient(90deg, #f5b43c, #f58c3c); }
.bar-wrap[data-stufe="voll"] i { background: linear-gradient(90deg, #ff5a5f, #ff3d81); }
.sp-befund {
  margin-top: 10px; padding: 11px 13px; border-radius: 14px;
  background: rgba(255,255,255,.05); box-shadow: var(--kante);
}
.sp-befund.gut { box-shadow: inset 0 0 0 1px rgba(111,195,166,.35); }
.sp-befund.krumm { box-shadow: inset 0 0 0 1px rgba(245,180,60,.4); }
.sp-befund p { margin: 0 0 5px; }
.sp-befund p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------------
   Kopf der Beat-Boerse

   Suche links, Trefferzahl rechts, Stile darunter. Dieselbe Anordnung
   wie in der Studio-Schublade - wer das eine kennt, kennt das andere.
   ------------------------------------------------------------------ */
.boerse-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.boerse-kopf .beat-feld { flex: 1 1 260px; }
.boerse-zahl {
  color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#boerseStile { margin-bottom: 14px; }
#boerseStile:empty { display: none; }


/* ------------------------------------------------------------------
   Mailwege: Testknopf im Adminbereich, "nochmal schicken" bei der
   Registrierung. Beides sagt hinterher, was passiert ist - "bereit: ja"
   allein ist keine Auskunft.
   ------------------------------------------------------------------ */
.alslink {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--pink); text-decoration: underline; text-underline-offset: 2px;
}
.alslink:hover { color: #fff; }
.mailsagt { margin-top: 8px; line-height: 1.5; }
.mailsagt.gut { color: #7ee0a8; }
.mailsagt.schlecht { color: #ff9b9b; }
#mailNochmalSagt:empty, #mailTestSagt:empty { display: none; }


/* Impressum mit echten Angaben - dieselbe Feldoptik wie der gesperrte
   Kasten, damit der Wechsel nicht wie eine andere Seite aussieht. */
.impressum-echt { display: grid; gap: 10px; }
#formAngaben textarea { resize: vertical; min-height: 64px; }
#formAngaben details summary { color: var(--mute); }
#formAngaben details[open] summary { margin-bottom: 4px; }

/* Turnier: Frist, Freilos, Sieger. Ohne die Restzeit weiss niemand, bis
   wann er stimmen muss - und stimmt deshalb gar nicht. */
.paarung .frist {
  font-size: 11.5px; color: var(--mute); letter-spacing: .04em;
  margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.paarung.freilos { opacity: .82; }
.paarung.freilos .frist { color: var(--mute2); }
.turniersieger {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(210,255,90,.18), rgba(169,215,69,.14));
  box-shadow: inset 0 0 0 1px rgba(210,255,90,.3);
}
.turniersieger span { color: var(--mute); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.turniersieger strong { font-size: 20px; }

/* Bloecke ziehen. Der Block muss aussehen, als koennte man ihn anfassen -
   sonst probiert es niemand. */
.sm-block-stimme { cursor: grab; touch-action: none; }
.sm-block-stimme:active, .sm-block-stimme.zieht { cursor: grabbing; }
.sm-block-stimme.zieht {
  box-shadow: 0 0 0 2px var(--pink), 0 8px 24px rgba(0,0,0,.45);
  z-index: 3;
}
.ziehanzeige {
  position: sticky; bottom: 8px; align-self: flex-start;
  margin-top: 8px; padding: 5px 12px; border-radius: 99px;
  background: var(--pink); color: #fff; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0,0,0,.4);
  width: fit-content;
}
.ziehanzeige[hidden] { display: none; }
/* Ein Freilos hat keinen Gegner - dann steht dort auch kein leeres
   Feld mit einem Strich darin. */
.paarung.freilos .gegen { display: none; }

/* Die Zeile unter dem Hauptknopf auf der Startseite. */
.hero-klein {
  color: var(--mute); font-size: 13.5px; margin: 12px 0 0; max-width: 46ch;
  line-height: 1.55;
}

/* ------------------------------------------------------------------
   Der Klick fuer Aufnahmen ohne Beat

   Sichtbar nur, solange kein Beat im Projekt liegt: mit Beat waere ein
   zweites Tempo daneben eine Falle.
   ------------------------------------------------------------------ */
.klickzeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.klickzeile label { color: var(--mute); font-size: 13px; }
.klickzeile input[type=range] { flex: 1 1 160px; min-width: 140px; accent-color: var(--pink); }
.klickzeile b { font-variant-numeric: tabular-nums; font-size: 13.5px; min-width: 68px; }
body.mit-beat .nur-ohne-beat { display: none !important; }

/* ==========================================================
   RBS V6.1 — BLACK ARENA PRODUCT LAYER
   ========================================================== */
.v61-apphome{max-width:1380px;margin:0 auto;padding:34px clamp(18px,4vw,56px) 8px}
.v61-welcome{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.v61-welcome h2{font-family:"Bricolage Grotesque",Bricolage,Sora,sans-serif;font-size:clamp(38px,5vw,68px);line-height:.9;letter-spacing:-.045em;margin:13px 0 10px}
.v61-welcome p{margin:0;color:#8b8b92;max-width:590px;line-height:1.6}
.v61-quick{display:grid;grid-template-columns:repeat(4,minmax(128px,1fr));gap:9px;min-width:min(690px,56vw)}
.v61-action{min-height:95px;text-align:left;border:1px solid #24242a;background:linear-gradient(145deg,#111114,#0b0b0d);color:#fff;border-radius:14px;padding:14px 15px;cursor:pointer;transition:.2s ease;position:relative;overflow:hidden}
.v61-action:hover{transform:translateY(-3px);border-color:#44444b;background:#151519}
.v61-action.primary{border-color:#69202a;background:linear-gradient(145deg,#2a1115,#111114)}
.v61-action.primary:after{content:"";position:absolute;right:-35px;top:-45px;width:110px;height:110px;border-radius:50%;background:rgba(255,36,56,.2);filter:blur(4px)}
.v61-action>span{display:block;color:#ff2438;font-size:18px;margin-bottom:8px}
.v61-action b{display:block;font-size:11px;letter-spacing:.08em}
.v61-action small{display:block;color:#68686f;font-size:9px;margin-top:5px}
.v61-glance{display:grid;grid-template-columns:1.35fr 1fr .72fr;gap:12px}
.v61-glance>article{min-height:260px;border:1px solid #24242a;background:#0d0d0f;border-radius:18px;padding:22px;position:relative;overflow:hidden}
.v61-cardtop{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.14em;color:#6f6f76}
.v61-cardtop>b{color:#929299;font-size:8px}
.v61-resume{background:radial-gradient(circle at 90% 5%,rgba(255,36,56,.12),transparent 35%),#0d0d0f!important}
.v61-resume-main{display:flex;align-items:center;gap:18px;margin:28px 0 24px}
.v61-disc{width:82px;height:82px;border-radius:50%;background:repeating-radial-gradient(circle,#17171a 0 5px,#27272c 6px 7px);border:1px solid #39393e;display:grid;place-items:center;box-shadow:0 20px 50px #000}
.v61-disc i{width:23px;height:23px;border-radius:50%;background:#ff2438;box-shadow:0 0 22px rgba(255,36,56,.45)}
.v61-resume-main small{color:#67676e;font-size:8px;letter-spacing:.14em}
.v61-resume-main h3{font-size:23px;margin:4px 0 5px}
.v61-resume-main p{margin:0;color:#75757c;font-size:10px}
.v61-progress{height:3px;background:#222228;border-radius:4px;margin-bottom:18px;overflow:hidden}
.v61-progress span{display:block;height:100%;width:24%;background:#ff2438;box-shadow:0 0 12px #ff2438;transition:width .35s ease}
.v61-arena{background:radial-gradient(circle at 50% 35%,rgba(255,36,56,.16),transparent 50%),#0d0d0f!important}
.v61-live-dot{color:#ff5362!important}
.v61-versus{display:flex;justify-content:center;align-items:center;gap:19px;margin:25px 0 16px;text-align:center}
.v61-versus>div{min-width:82px}
.v61-face{width:58px;height:58px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;background:linear-gradient(145deg,#26262c,#0e0e11);border:1px solid #44444a;font-size:20px;font-weight:800}
.v61-face.red{background:linear-gradient(145deg,#522029,#160e11);border-color:#7b2834}
.v61-versus b{font-size:10px}.v61-versus strong{color:#ff2438;font-family:Bricolage,Sora,sans-serif;font-size:22px}
.v61-arena>p{color:#6e6e75;text-align:center;font-size:9px;min-height:28px}
.v61-arena .btn{width:100%;margin-top:6px}
.v61-ranknum{margin:25px 0 20px}.v61-ranknum small{font-size:8px;letter-spacing:.15em;color:#68686f;display:block}.v61-ranknum strong{font-family:Bricolage,Sora,sans-serif;font-size:58px;line-height:1;color:#fff}
.v61-rankmeta{display:flex;gap:28px;margin-bottom:22px}.v61-rankmeta span{display:flex;flex-direction:column}.v61-rankmeta b{font-size:16px}.v61-rankmeta small{font-size:7px;letter-spacing:.12em;color:#626269}
.v61-rank .btn{width:100%}
.v61-feedhead{display:flex;justify-content:space-between;align-items:end;margin:46px 0 4px}
.v61-feedhead h3{font-family:Bricolage,Sora,sans-serif;font-size:34px;margin:10px 0 0}
.v61-search-open{border:1px solid #2c2c32;background:#101013;color:#85858c;padding:11px 13px;border-radius:10px;font:600 10px Sora,Arial;cursor:pointer}
.v61-search-open span{font-size:17px;vertical-align:-1px;margin-right:6px;color:#ddd}
.v61-search-open kbd,.v61-command kbd{font:700 8px Sora,Arial;background:#1b1b20;border:1px solid #34343a;border-radius:5px;padding:4px 6px;color:#777;margin-left:10px}
.v61-mobile-dock{display:none}
.v61-command[hidden]{display:none!important}.v61-command{position:fixed;inset:0;z-index:300;display:grid;place-items:start center;padding-top:min(18vh,160px)}
.v61-command-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.v61-command-box{width:min(620px,calc(100vw - 28px));position:relative;background:#0e0e11;border:1px solid #35353b;border-radius:18px;box-shadow:0 35px 110px #000;overflow:hidden}
.v61-command-input{height:66px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;padding:0 18px;border-bottom:1px solid #26262b}
.v61-command-input>span{font-size:24px;color:#777}.v61-command-input input{border:0!important;background:transparent!important;outline:0;color:#fff;font:600 14px Sora,Arial;width:100%;box-shadow:none!important}
.v61-command-list{padding:8px}
.v61-command-list button{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;gap:8px;border:0;background:transparent;color:#fff;padding:12px;border-radius:10px;cursor:pointer}
.v61-command-list button:hover,.v61-command-list button.focused{background:#18181c}
.v61-command-list button>span{font-size:20px;color:#ff2438;text-align:center}.v61-command-list button b{display:block;font-size:11px}.v61-command-list button small{display:block;color:#66666d;font-size:9px;margin-top:2px}.v61-command-list button em{color:#555;font-style:normal}
.v61-command-foot{padding:11px 18px;border-top:1px solid #222227;color:#57575e;font-size:8px}
@media(max-width:1050px){
  .v61-welcome{display:block}.v61-quick{min-width:0;width:100%;margin-top:24px}
  .v61-glance{grid-template-columns:1fr 1fr}.v61-rank{grid-column:1/-1;min-height:auto!important;display:grid;grid-template-columns:1fr 1fr 180px;align-items:end;gap:20px}.v61-ranknum{margin:12px 0}.v61-rankmeta{margin:0}.v61-rank .btn{align-self:center}
}
@media(max-width:820px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .topbar .nav-main{display:none!important}
  .v61-mobile-dock{display:grid;grid-template-columns:1fr 1fr 82px 1fr 1fr;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:64px;z-index:120;background:rgba(13,13,16,.93);border:1px solid #2a2a30;border-radius:18px;backdrop-filter:blur(18px);box-shadow:0 16px 55px #000;padding:4px 7px}
  .v61-mobile-dock button{border:0;background:transparent;color:#7e7e85;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-family:Sora,Arial;min-width:0}
  .v61-mobile-dock button>span{font-size:19px}.v61-mobile-dock button small{font-size:7px;letter-spacing:.05em}
  .v61-mobile-dock .v61-dock-record{width:58px;height:58px;margin:-15px auto 0;border-radius:50%;background:#ff2438;color:#fff;border:5px solid #0d0d10;box-shadow:0 8px 28px rgba(255,36,56,.36)}
  .v61-mobile-dock .v61-dock-record span{font-size:24px}
  .v61-glance{grid-template-columns:1fr}.v61-rank{grid-column:auto;display:block;min-height:230px!important}
  .v61-feedhead{align-items:start}.v61-search-open{width:42px;height:42px;padding:0;font-size:0}.v61-search-open kbd{display:none}.v61-search-open span{margin:0}
}
@media(max-width:620px){
  .v61-apphome{padding-left:14px;padding-right:14px}
  .v61-quick{grid-template-columns:1fr 1fr}.v61-action{min-height:86px}
  .v61-glance>article{padding:18px}.v61-resume-main{margin-top:21px}.v61-disc{width:66px;height:66px}
  .v61-welcome h2{font-size:45px}.v61-feedhead h3{font-size:28px}
  .v61-command{padding-top:8vh}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.v61-mobile-dock button.on{color:#fff}
.v61-mobile-dock button.on>span{color:#ff2438}
.v61-mobile-dock .v61-dock-record.on{color:#fff}


/* ==========================================================
   RBS V6.2 — ARENA + SOCIAL LAYER
   ========================================================== */
.v62-shell{max-width:1380px;margin:0 auto;padding:46px clamp(18px,4vw,56px) 90px}
#page-arena-v62{background:radial-gradient(circle at 50% 0%,rgba(255,36,56,.08),transparent 36%),#08080a}
.v62-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:25px}
.v62-head h2{font-family:Bricolage,Sora,sans-serif;font-size:clamp(42px,5vw,72px);line-height:.88;margin:14px 0 12px;letter-spacing:-.045em}
.v62-head p{color:#7f7f86;max-width:620px;line-height:1.7;margin:0}
.v62-arena-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:14px}
.v62-arena-grid>article,.v62-subgrid>article{border:1px solid #26262b;background:#0d0d10;border-radius:18px;padding:22px}
.v62-live-card{background:radial-gradient(circle at 50% 40%,rgba(255,36,56,.16),transparent 48%),linear-gradient(145deg,#131317,#0a0a0c)!important}
.v62-battle-stage{display:flex;align-items:center;justify-content:center;gap:45px;padding:38px 10px 26px}
.v62-contestant{text-align:center;min-width:130px}.v62-contestant b{display:block;font-size:16px;margin-top:8px}.v62-contestant small{display:block;color:#6d6d73;font-size:8px;letter-spacing:.08em;margin-top:3px}
.v62-avatar{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(145deg,#2a2a30,#101013);border:1px solid #44444b;font:800 30px Bricolage,Sora,sans-serif;box-shadow:0 20px 55px #000}
.v62-avatar.hot{background:linear-gradient(145deg,#5b2028,#170d10);border-color:#812936;box-shadow:0 20px 65px rgba(255,36,56,.12)}
.v62-avatar.small{width:42px;height:42px;font-size:15px;margin:0}
.v62-vsmark{font:800 31px Bricolage,Sora,sans-serif;color:#ff2438}
.v62-roundbar{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:13px;font-size:8px;color:#73737a;letter-spacing:.08em}
.v62-roundbar>div{height:4px;background:#25252a;border-radius:3px;overflow:hidden}.v62-roundbar i{display:block;height:100%;background:#ff2438;box-shadow:0 0 12px #ff2438}
.v62-roundbar b{color:#a1a1a8}.v62-live-actions{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;margin-top:20px}
.v62-queue-list{margin-top:15px}.v62-queue-item{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;text-align:left;border:0;border-bottom:1px solid #202025;background:transparent;color:#fff;padding:15px 0;cursor:pointer}
.v62-queue-item:last-child{border:0}.v62-queue-item:hover em{color:#fff}.v62-miniavatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1b1b20;border:1px solid #35353a;font-weight:800}.v62-queue-item b{display:block;font-size:10px}.v62-queue-item small{display:block;color:#66666d;font-size:8px;margin-top:3px}.v62-queue-item em{font-style:normal;font-size:7px;letter-spacing:.1em;color:#ff5362}
.v62-subgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}
.v62-follow-list{margin-top:13px}.v62-follow-list>div{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #202025}.v62-follow-list>div:last-child{border:0}.v62-follow-list b{font-size:10px}.v62-follow-list small{display:block;color:#66666d;font-size:8px}
.v62-follow{border:1px solid #3b3b42;background:#151519;color:#fff;border-radius:8px;padding:8px 10px;font:700 8px Sora,Arial;cursor:pointer}.v62-follow.on{border-color:#6c2630;color:#ff6370;background:#1a1012}
.v62-notify-list{margin-top:8px}.v62-notify-list>div{display:grid;grid-template-columns:28px 1fr;gap:7px;padding:10px 0;border-bottom:1px solid #202025}.v62-notify-list>div:last-child{border:0}.v62-notify-list>div>span{color:#ff2438}.v62-notify-list p{margin:0;color:#9a9aa1;font-size:9px;line-height:1.45}.v62-notify-list b{color:#fff}.v62-notify-list small{display:block;color:#55555b;margin-top:3px}
.v62-profile-top{display:flex;align-items:center;gap:13px;margin:18px 0}.v62-profile-avatar{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#4f2419,#16110f);border:1px solid #64402f;font:800 22px Bricolage,Sora,sans-serif}.v62-profile-top h3{margin:0;font-size:18px}.v62-profile-top p{margin:4px 0 0;color:#717178;font-size:9px}
.v62-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #222227;border-bottom:1px solid #222227;padding:13px 0;margin-bottom:12px}.v62-stats span{text-align:center}.v62-stats b{display:block;font-size:14px}.v62-stats small{display:block;color:#5f5f66;font-size:7px;margin-top:2px}.v62-badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 15px}.v62-badges span{font-size:7px;background:#17171b;border:1px solid #2b2b31;border-radius:30px;padding:6px 8px;color:#9b9ba2}
#v62ChallengeDialog,#v62BattleDialog{border:0;padding:0;background:transparent;color:#fff}#v62ChallengeDialog::backdrop,#v62BattleDialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}
.v62-modal{width:min(540px,calc(100vw - 24px));background:#101013;border:1px solid #34343a;border-radius:20px;padding:28px;position:relative;box-shadow:0 40px 100px #000}.v62-modal.wide{width:min(760px,calc(100vw - 24px))}
.v62-close{position:absolute;right:16px;top:10px;border:0;background:transparent;color:#888;font-size:30px;cursor:pointer}.v62-modal h2{font:800 44px/.9 Bricolage,Sora,sans-serif;margin:17px 0 24px}.v62-modal label{display:block;color:#77777e;font-size:8px;letter-spacing:.08em;margin:12px 0}.v62-modal input,.v62-modal select,.v62-modal textarea{width:100%;margin-top:6px;background:#0a0a0c;border:1px solid #2d2d33;border-radius:10px;color:#fff;padding:12px;font:500 11px Sora,Arial;outline:none}.v62-modal textarea{height:88px;resize:vertical}.v62-formrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v62-rounds{display:flex;gap:7px;margin-bottom:14px}.v62-rounds button{border:1px solid #2d2d33;background:#141418;color:#777;padding:8px 11px;border-radius:8px;font:700 8px Sora,Arial}.v62-rounds button.on{border-color:#6f2530;color:#ff5a68;background:#1b1013}
.v62-player{height:105px;border:1px solid #29292e;background:#0a0a0c;border-radius:14px;display:grid;grid-template-columns:1fr 48px 160px;align-items:center;gap:12px;padding:15px}.v62-wave{height:48px;background:repeating-linear-gradient(90deg,#ff2438 0 2px,transparent 2px 7px);opacity:.55;mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%)}.v62-player button{width:44px;height:44px;border-radius:50%;border:0;background:#ff2438;color:#fff}.v62-player b{display:block;font-size:9px}.v62-player small{display:block;color:#666;margin-top:4px;font-size:8px}
.v62-bars{display:grid;gap:10px;margin-top:18px}.v62-bars>div{display:grid;grid-template-columns:55px 1fr 40px;gap:10px;align-items:center;font-size:9px}.v62-bars>div>div{height:4px;background:#25252a;border-radius:3px;overflow:hidden}.v62-bars i{display:block;height:100%;background:#ff2438}.v62-bars b{text-align:right}.v62-disclaimer{color:#5f5f66;font-size:8px;line-height:1.5;margin:18px 0 0}
.v62-toast{position:fixed;right:18px;bottom:90px;z-index:400;background:#121216;border:1px solid #35353b;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 18px 50px #000;font:600 10px Sora,Arial}
@media(max-width:920px){.v62-arena-grid,.v62-subgrid{grid-template-columns:1fr}.v62-head{display:block}.v62-head .btn{margin-top:18px}.v62-live-card{min-height:390px}}
@media(max-width:620px){.v62-shell{padding-left:14px;padding-right:14px}.v62-battle-stage{gap:18px}.v62-avatar{width:70px;height:70px;font-size:24px}.v62-contestant{min-width:92px}.v62-live-actions{grid-template-columns:1fr 1fr}.v62-live-actions .btn:nth-child(2){grid-column:1/-1;grid-row:2}.v62-roundbar{grid-template-columns:72px 1fr}.v62-roundbar b{display:none}.v62-stats{grid-template-columns:1fr 1fr;gap:12px}.v62-player{grid-template-columns:1fr 45px}.v62-player>div:last-child{display:none}.v62-formrow{grid-template-columns:1fr}}

/* V6.3 server-backed state rows */
.v62-empty{padding:18px 4px;color:#6f6f76;font-size:9px;line-height:1.6}
.v63-notification{width:100%;display:grid;grid-template-columns:28px 1fr;gap:7px;text-align:left;padding:10px 0;border:0;border-bottom:1px solid #202025;background:transparent;color:inherit;cursor:pointer}
.v63-notification:last-child{border-bottom:0}.v63-notification>span{color:#ff2438}.v63-notification p{margin:0;color:#9a9aa1;font-size:9px;line-height:1.45}.v63-notification small{display:block;color:#55555b;margin-top:3px}.v63-notification.new p{color:#d6d6da}.v63-notification.new small{color:#ff6370}

/* V6.3.0 Arena truth-in-UI + challenge controls */
.v63-challenge-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.v63-challenge-actions button,.v63-readall{border:1px solid #6f2530;background:#1b1013;color:#ff6370;border-radius:8px;padding:7px 9px;font:700 7px Sora,Arial;letter-spacing:.04em;cursor:pointer}
.v63-challenge-actions button.ghost{border-color:#33343a;background:#131317;color:#8e8e95}
.v63-challenge-actions button:disabled,.v63-readall:disabled{opacity:.45;cursor:not-allowed}
.v63-readall{margin-top:10px;border-color:#303036;background:#141418;color:#85858c}
.v63-voted{outline:1px solid #ff6370;box-shadow:0 0 0 2px rgba(255,36,56,.12) inset}
.v62-player button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:620px){.v62-queue-item{grid-template-columns:38px 1fr}.v63-challenge-actions,.v62-queue-item>em{grid-column:2;justify-self:start}}