/* Schriften liegen im Paket. Kein Nachladen von fonts.googleapis.com —
   das übertraegt die IP jedes Besuchers an Google und ist genau der Punkt,
   an dem das LG Muenchen I (3 O 17493/20) einen Unterlassungsanspruch und
   Schadensersatz zugesprochen hat. Selbst ausliefern kostet nichts und
   ist schneller. */
@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')}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/syne-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/syne-latin-800-normal.woff2') format('woff2')}

:root {
  --bg: #070708;
  --bg2: #101014;
  --card: #16161c;
  --line: #2a2a33;
  --text: #f4f1ea;
  --mute: #9a958c;
  --amber: #f5a623;
  --amber2: #ffc15a;
  --amber-d: #c47d10;
  --ok: #3ddc84;
  --bad: #ff5c5c;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --r: 16px;
  --font: "Sora", "Segoe UI", system-ui, sans-serif;
  --display: "Syne", "Sora", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100%;
}
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; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: rgba(7,7,8,.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  max-width: 100%;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 800; letter-spacing: .04em;
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(145deg, #1a1a20, #0c0c10);
  border: 1px solid var(--amber);
  display: grid; place-items: center;
  color: var(--amber); font-size: 11px; font-weight: 800;
}
.nav-main { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav-main button, .nav-main a {
  background: transparent; border: 0; color: var(--mute);
  padding: 11px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.nav-main button.on, .nav-main a.on, .nav-main button:hover {
  color: var(--text); background: #1d1d24;
}
.nav-right { display: flex; align-items: center; gap: 8px; }
/* 44 Pixel ist die Zahl, auf die sich Apple und Google unabhaengig
   voneinander festgelegt haben - darunter trifft ein Daumen zu oft daneben.
   Vorher waren die Knoepfe rund 34 Pixel hoch. */
.btn {
  border: 0; border-radius: 999px; padding: 12px 18px;
  font-weight: 700; font-size: 13.5px;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  /* Kein graues Aufblitzen beim Antippen auf iOS, und kein versehentliches
     Textmarkieren beim Halten. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn-amber {
  background: var(--amber); color: #1a1204;
}
.btn-amber:hover { background: var(--amber2); }
.btn-ghost {
  background: #1b1b22; color: var(--text); border: 1px solid var(--line);
}
.btn-bad { background: #3a1515; color: #ffb4b4; }
.dot-online {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,132,.18);
  display: inline-block;
}
.artist-chip {
  display: flex; align-items: center; gap: 8px;
  background: #1b1b22; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 10px 6px 8px;
  color: var(--amber); font-weight: 700; font-size: 13px;
  position: relative;
}
.drop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; min-width: 220px; padding: 8px;
  box-shadow: var(--shadow); 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: 10px; font-size: 13.5px;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.drop button:hover { background: #22222b; }

.page { display: none; max-width: 1120px; margin: 0 auto; padding: 28px 18px 80px; }
.page.on { display: block; }
.hero {
  padding: 64px 18px 40px;
  text-align: center;
  background:
    radial-gradient(800px 280px at 50% -40px, rgba(245,166,35,.18), transparent 60%),
    linear-gradient(#0c0c10, var(--bg));
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 72px);
  line-height: .95; margin: 0 0 16px;
  letter-spacing: -.03em;
}
.hero p.lead { color: var(--mute); max-width: 560px; margin: 0 auto 28px; font-size: 17px; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kicker { color: var(--amber); font-size: 12px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.5; }

.form { display: grid; gap: 10px; max-width: 380px; margin: 0 auto; }
input, textarea, select {
  width: 100%; background: #0e0e12; border: 1px solid var(--line);
  color: var(--text); border-radius: 12px; padding: 13px 14px; font: inherit;
  min-height: 48px;
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. Unter 16 zoomt
     Safari zwangsweise und man landet in einer verrutschten Seite. */
  font-size: 16px;
}
input[type=range], input[type=checkbox] { min-height: 0; }
textarea { min-height: 96px; }
.hint { color: var(--mute); font-size: 13px; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }

.feed-list, .liga-list { display: grid; gap: 10px; }
.track {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px;
}
.cover {
  width: 56px; height: 56px; border-radius: 10px;
  background: linear-gradient(145deg, #2a2418, #121214);
  display: grid; place-items: center; color: var(--amber); font-weight: 800;
}

/* Studio */
.studio {
  display: grid; gap: 14px;
  max-width: 100%;
}
.studio-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: end;
}
.steps { display: flex; gap: 6px; flex-wrap: wrap; }
.steps button {
  background: #141418; border: 1px solid var(--line); color: var(--mute);
  border-radius: 999px; padding: 10px 16px; font-size: 12.5px; font-weight: 700;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.steps button.on { background: var(--amber); color: #1a1204; border-color: var(--amber); }
.lane {
  background: #101014; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; overflow: hidden; max-width: 100%;
}
.wave {
  height: 78px; width: 100%; border-radius: 12px; display: block;
  background: #0a0a0d; border: 1px solid rgba(255,255,255,.05);
}
.beat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.beat {
  background: #141418; border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  display: grid; gap: 8px;
}
.beat.on { border-color: var(--amber); }
.beat .meta { font-size: 12px; color: var(--mute); }
.beat-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 12px;
  background: #1c1c24; border: 1px solid var(--line); color: var(--text);
  display: grid; place-items: center; font-size: 16px;
}
.icon-btn.plus { background: var(--amber); color: #1a1204; border: 0; font-weight: 800; }

.lyric {
  min-height: 180px; font-size: 20px; line-height: 1.45; resize: vertical;
}
.prompter {
  font-family: var(--display); font-size: clamp(22px, 4vw, 34px);
  line-height: 1.25; min-height: 140px; padding: 16px;
  background: #0c0c10; border-radius: 14px; border: 1px solid var(--line);
  white-space: pre-wrap;
}
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meter-label { font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.meter {
  height: 8px; background: #0a0a0d; border-radius: 99px; overflow: hidden;
}
.meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ddc84, var(--amber)); }

.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.knob label { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.takes { display: grid; gap: 8px; }
.take {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #141418; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px;
}

.admin-bar { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bar-wrap { height: 12px; background: #0a0a0d; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar-wrap > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), #ff6a3d); width: 0; }

.foot {
  border-top: 1px solid var(--line); padding: 28px 18px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--mute); font-size: 13px; max-width: 1120px; margin: 0 auto;
}
.socials { display: flex; gap: 10px; align-items: center; }
.socials a {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  display: grid; place-items: center; text-decoration: none;
}
.lockbox {
  background: #121218; border: 1px dashed var(--line); border-radius: 14px;
  padding: 28px; text-align: center; color: var(--mute);
}
.mob-toggle { display: none; background: #1b1b22; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 10px; }
@media (max-width: 820px) {
  .grid3 { grid-template-columns: 1fr; }
  .nav-main {
    display: none; position: absolute; left: 10px; right: 10px; top: 58px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    flex-direction: column; padding: 8px; z-index: 70;
  }
  .nav-main.open { display: flex; }
  .mob-toggle { display: inline-flex; }
  .hero { padding-top: 36px; }
  .track { grid-template-columns: 48px 1fr; }
  .track audio, .track .extra { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Blatt (modaler Dialog) ---------- */
.blatt-hinter {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,4,6,.72); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; padding: 18px;
}
.blatt-hinter.on { display: flex; }
.blatt {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  width: min(560px, 100%); max-height: min(86vh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
}
.blatt-kopf {
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line);
  display: flex; gap: 14px; align-items: flex-start;
}
.blatt-kopf h3 { margin: 0 0 4px; font-family: var(--display); font-size: 20px; letter-spacing: -.02em; }
.blatt-kopf p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
.blatt-leib { padding: 18px 22px; overflow-y: auto; display: grid; gap: 14px; }
.blatt-fuss {
  padding: 14px 22px 18px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.ampel {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 22px;
}
.ampel.gruen { background: rgba(61,220,132,.14); border: 1px solid rgba(61,220,132,.4); }
.ampel.gelb  { background: rgba(245,166,35,.14); border: 1px solid rgba(245,166,35,.45); }
.ampel.rot   { background: rgba(255,92,92,.14);  border: 1px solid rgba(255,92,92,.45); }

.befund {
  border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line);
  background: #101015;
}
.befund.rot  { border-color: rgba(255,92,92,.35);  background: rgba(255,92,92,.06); }
.befund.gelb { border-color: rgba(245,166,35,.32); background: rgba(245,166,35,.05); }
.befund strong { display: block; font-size: 13.5px; margin-bottom: 4px; }
.befund span { color: var(--mute); font-size: 12.5px; line-height: 1.5; }

.erklaerung {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px;
  background: #101015; cursor: pointer; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.erklaerung:active { background: #16161d; }
.erklaerung.an { border-color: var(--amber); background: rgba(245,166,35,.06); }
.haken {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 13px; color: transparent;
  background: #0b0b0f; margin-top: 1px;
}
.erklaerung.an .haken { background: var(--amber); border-color: var(--amber); color: #1a1204; }
.erklaerung b { font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 3px; }
.erklaerung span { color: var(--mute); font-size: 12.5px; line-height: 1.5; }

.blatt-technik {
  font-size: 11.5px; color: var(--mute); line-height: 1.6;
  border-top: 1px dashed var(--line); padding-top: 12px;
}
.blatt-technik b { color: var(--text); font-weight: 600; }
.blatt-lauf { display: grid; gap: 10px; place-items: center; padding: 30px 0; text-align: center; }
.blatt-lauf .kringel {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--amber);
  animation: dreh .9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .blatt-lauf .kringel { animation: none; } }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Studio: Takes ---------- */
.take-welle {
  width: 100%; height: 40px; display: block; margin: 4px 0 2px;
  background: #0a0a0d; border-radius: 8px;
}
.aufnahme-optionen {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 12px;
}
.aufnahme-optionen label {
  display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px;
}
.aufnahme-optionen input { width: auto; }

/* ---------- Mix: Regler mit Erklärung ---------- */
.knob { display: grid; gap: 5px; }
.knob label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.knob label span { color: var(--amber); font-variant-numeric: tabular-nums; font-weight: 700; }
.knob small { color: var(--mute); font-size: 11.5px; line-height: 1.45; }
.knob input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; padding: 0; border: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--amber-d), var(--line));
}
.knob input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber); border: 3px solid #16161c; cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.knob input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--amber); border: 3px solid #16161c; cursor: grab;
}

/* ---------- Abschluss: Titel, Cover, Wohin ---------- */
.blatt-breit { width: min(760px, 100%); }
.abs-zwei { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.abs-leinwand {
  width: 100%; aspect-ratio: 1; border-radius: 14px; display: block;
  background: #0a0a0d; border: 1px solid var(--line);
}
.abs-rechts { display: grid; gap: 14px; }
.pillrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pill {
  background: #141418; border: 1px solid var(--line); color: var(--mute);
  border-radius: 999px; padding: 10px 15px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.pill.an { background: var(--amber); color: #1a1204; border-color: var(--amber); }
.wohin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wahl {
  text-align: left; background: #101015; border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; cursor: pointer; font-family: inherit;
  color: var(--text); display: grid; gap: 5px;
}
.wahl b { font-size: 14px; }
.wahl span { color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.wahl.an { border-color: var(--amber); background: rgba(245,166,35,.07); }
@media (max-width: 700px) {
  .abs-zwei { grid-template-columns: 1fr; }
  .abs-leinwand { max-width: 240px; margin: 0 auto; }
  .wohin { grid-template-columns: 1fr; }
}

/* ---------- Feed mit Cover ---------- */
.feed-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; align-content: start;
}
.songkachel {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: grid; align-content: start;
}
.songkachel .bild {
  position: relative; aspect-ratio: 1; background: #101015;
  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: 34px; font-weight: 800; color: var(--amber); opacity: .5;
}
.songkachel .abspielen {
  position: absolute; right: 10px; top: 10px;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  -webkit-tap-highlight-color: transparent;
  background: rgba(10,10,13,.72); backdrop-filter: blur(6px);
  color: var(--text); font-size: 14px; display: grid; place-items: center; cursor: pointer;
}
.songkachel .unten { padding: 12px 14px 14px; display: grid; gap: 4px; }
.songkachel .unten strong { font-size: 14px; line-height: 1.25; }
.songkachel .zeile { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.rangchip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 999px; border: 1px solid;
}
.rangchip.neuling    { color: #9a958c; border-color: rgba(154,149,140,.4); }
.rangchip.aufsteiger { color: #7fafc0; border-color: rgba(127,175,192,.45); }
.rangchip.stammgast  { color: var(--amber); border-color: rgba(245,166,35,.5); }
.rangchip.profi      { color: #3ddc84; border-color: rgba(61,220,132,.5); }
.nurdu {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); border: 1px dashed var(--line); border-radius: 999px; padding: 2.5px 7px;
}
.leerkasten {
  border: 1px dashed var(--line); border-radius: 18px; padding: 34px 22px;
  text-align: center; color: var(--mute); grid-column: 1 / -1;
}
.leerkasten b { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }

/* ---------- Rechtsseiten ---------- */
.recht-zwei { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; }
.recht-menue { display: grid; gap: 3px; position: sticky; top: 74px; }
.recht-menue button {
  text-align: left; background: transparent; border: 0; color: var(--mute);
  padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.recht-menue button:hover { background: #1a1a21; color: var(--text); }
.recht-menue button.an { background: #1d1d24; color: var(--amber); }
.recht-text {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 26px; line-height: 1.62; font-size: 14px;
}
.recht-text h3 {
  font-family: var(--display); font-size: 22px; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.recht-text h4 { font-size: 14.5px; margin: 20px 0 8px; }
.recht-text p { margin: 0 0 12px; color: var(--mute); }
.recht-text p b, .recht-text li b { color: var(--text); }
.recht-text ul { margin: 0 0 14px; padding-left: 20px; color: var(--mute); }
.recht-text li { margin-bottom: 7px; }
.recht-text .eyebrow2 {
  color: var(--amber); font-size: 11px; letter-spacing: .12em; font-weight: 700;
  text-transform: uppercase; margin: 20px 0 8px;
}
.recht-text .legal { font-size: 12.5px; color: var(--mute); opacity: .85; }
.recht-text a { color: var(--amber); }
.legal-lock {
  border: 1px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center;
}
.legal-lock-ico { font-size: 26px; margin-bottom: 8px; }
.impfeld {
  display: flex; justify-content: space-between; gap: 12px; text-align: left;
  border-top: 1px solid var(--line); padding: 10px 0; font-size: 13px;
}
.impfeld span { color: var(--mute); }
.linkbtn {
  background: none; border: 0; color: var(--amber); text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0;
}
.melden-knopf {
  background: none; border: 0; color: var(--mute); font-size: 12px;
  cursor: pointer; padding: 10px 0 4px; text-decoration: underline;
  font-family: inherit; min-height: 34px; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.melden-knopf:hover { color: var(--bad); }
@media (max-width: 760px) {
  .recht-zwei { grid-template-columns: 1fr; }
  .recht-menue { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .recht-menue button { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  .recht-text { padding: 18px; }
}

/* ==================================================================
   MOBIL

   Der Daumen erreicht auf einem Handy die unteren zwei Drittel bequem
   und die obere Ecke gar nicht. Ein Menü-Knopf oben rechts ist deshalb
   die schlechteste Stelle für die Hauptnavigation - man muss das Gerät
   umgreifen, um die Seite zu wechseln.

   Also: unten eine feste Leiste mit den fünf wichtigsten Zielen, oben
   nur noch Logo und Konto. Blätter fahren von unten ein und lassen sich
   nach unten wegwischen, wie man es von Apps kennt.
   ================================================================== */
.unterleiste { display: none; }

@media (max-width: 820px) {
  /* Hauptnavigation raus aus der Kopfzeile - sie steht jetzt unten. */
  .nav-main, .mob-toggle { display: none !important; }
  .topbar { padding: 8px 14px; gap: 8px; }
  .brand span:last-child { font-size: 14px; }
  .page { padding: 20px 14px calc(96px + env(safe-area-inset-bottom)); }
  .hero { padding: 30px 14px 28px; }

  .unterleiste {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(10,10,13,.94);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    /* Die Kerbe unten am iPhone frisst sonst die Beschriftung. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .unterleiste button {
    background: none; border: 0; color: var(--mute);
    display: grid; justify-items: center; gap: 3px;
    padding: 9px 2px 8px; min-height: 56px;
    font-family: inherit; font-size: 10px; font-weight: 700;
    letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent;
  }
  .unterleiste button svg { width: 22px; height: 22px; display: block; }
  .unterleiste button.on { color: var(--amber); }
  .unterleiste button.on svg { filter: drop-shadow(0 0 7px rgba(245,166,35,.45)); }
  .unterleiste button:active { background: rgba(255,255,255,.05); }

  /* Blätter kommen von unten, nicht aus der Mitte. */
  .blatt-hinter { align-items: flex-end; padding: 0; }
  .blatt, .blatt-breit {
    width: 100%; max-width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: hochfahren .26s cubic-bezier(.22,1,.36,1);
  }
  @keyframes hochfahren { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .blatt, .blatt-breit { animation: none; }
  }
  /* Griff zum Wegwischen */
  .blatt::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 99px;
    background: var(--line); margin: 9px auto 0; flex: 0 0 auto;
  }
  .blatt-kopf { padding: 12px 18px 12px; }
  .blatt-leib { padding: 14px 18px; }
  .blatt-fuss {
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
    /* Auf dem Handy sind die Knöpfe voll breit - da trifft man immer. */
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .blatt-fuss .btn { width: 100%; }
  .blatt-fuss .btn:only-child { grid-column: 1 / -1; }

  /* Kacheln: auf dem Handy zwei nebeneinander, das liest sich besser
     als eine riesige pro Zeile. */
  .feed-gitter { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .songkachel .unten { padding: 10px 11px 12px; }
  .songkachel .unten strong { font-size: 13px; }
  .songkachel .abspielen { width: 44px; height: 44px; right: 7px; top: 7px; }

  /* Die Liste in „Meine Tracks" bricht auf dem Handy um. */
  .track { grid-template-columns: 52px 1fr; }
  .track .extra { grid-column: 1 / -1; display: grid; gap: 7px; }
  .track .extra .btn { width: 100%; }
}

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

/* ==================================================================
   Charts, Liga, Profil, Beats, Chat
   ================================================================== */

/* ---------- Reiter ---------- */
.reiter {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: #101015; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%;
}
.reiter button {
  background: none; border: 0; color: var(--mute);
  border-radius: 999px; padding: 10px 18px; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.reiter button.on { background: var(--amber); color: #1a1204; }

/* ---------- Chart- und Ligazeile ---------- */
.chartzeile {
  display: grid;
  grid-template-columns: 34px 52px 1fr auto auto;
  gap: 11px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 12px;
}
.chartzeile.ich { border-color: rgba(245,166,35,.45); background: rgba(245,166,35,.05); }
.platz {
  font-family: var(--display); font-size: 19px; font-weight: 800;
  color: var(--mute); text-align: center; font-variant-numeric: tabular-nums;
}
.platz.gold   { color: var(--amber); }
.platz.silber { color: #c9c6c0; }
.platz.bronze { color: #c98a5a; }
.chartbild {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: #101015; display: grid; place-items: center;
  color: var(--amber); font-weight: 800; font-size: 18px;
}
.chartmitte { min-width: 0; }
.chartmitte strong { display: block; font-size: 14px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartmitte .zeile { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--mute); }
.punktesumme {
  font-family: var(--display); font-size: 17px; font-weight: 800;
  color: var(--amber); font-variant-numeric: tabular-nums; padding-right: 4px;
}

/* Stimmknopf: hoch genug zum Treffen, mit sichtbarem Zustand. */
.stimme {
  display: grid; justify-items: center; gap: 1px;
  background: #141418; border: 1px solid var(--line); color: var(--mute);
  border-radius: 14px; padding: 7px 11px; min-width: 52px; min-height: 52px;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.stimme .pfeil { font-size: 11px; line-height: 1; }
.stimme .zahl { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stimme.an { background: rgba(245,166,35,.14); border-color: var(--amber); color: var(--amber); }
.stimme:disabled { opacity: .35; cursor: not-allowed; }
.stimme:active:not(:disabled) { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .stimme:active { transform: none; } }

/* ---------- Turnierbaum ---------- */
.ligaflaeche { overflow-x: auto; padding-bottom: 8px; }
.baum { display: flex; gap: 14px; min-width: min-content; align-items: flex-start; }
.baumspalte { display: grid; gap: 10px; min-width: 190px; align-content: start; }
.baumkopf {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--amber); padding-left: 2px;
}
.paarung {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px; display: grid; gap: 4px;
}
.paarung.offen { border-color: rgba(245,166,35,.4); }
.paarung .seite {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 9px; border-radius: 10px; background: #101015; min-height: 44px;
}
.paarung .seite.sieger { background: rgba(61,220,132,.1); }
.paarung .seite.sieger .wer { color: var(--ok); font-weight: 700; }
.paarung .seite.raus .wer { color: var(--mute); text-decoration: line-through; }
.paarung .seite.ich { outline: 1px solid rgba(245,166,35,.5); }
.paarung .wer { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paarung .punkte { font-size: 13px; font-weight: 800; color: var(--mute);
  font-variant-numeric: tabular-nums; }
.gegen {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); text-align: center; opacity: .6;
}
.minibtn {
  background: #1c1c24; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 11.5px;
  font-weight: 700; cursor: pointer; min-height: 36px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.minibtn.hell { background: var(--amber); color: #1a1204; border-color: var(--amber); }
.minibtn:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { .minibtn:active { transform: none; } }

/* ---------- Profil ---------- */
.profilkopf { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.profilbild {
  width: 72px; height: 72px; border-radius: 22px;
  background: linear-gradient(145deg, var(--amber), var(--amber-d));
  color: #1a1204; display: grid; place-items: center;
  font-family: var(--display); font-size: 30px; font-weight: 800;
}
.profilkopf .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--mute); }
.stufen { display: grid; gap: 10px; }
.stufe {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; display: grid; gap: 8px; opacity: .55;
}
.stufe.erreicht { opacity: 1; }
.stufe.jetzt { border-color: var(--amber); background: rgba(245,166,35,.05); }
.stufe p { margin: 0; color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.stufenbedingung { display: flex; gap: 8px; flex-wrap: wrap; }
.stufenbedingung span {
  font-size: 11.5px; color: var(--mute);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.stufenbedingung span.hab { color: var(--ok); border-color: rgba(61,220,132,.4); }
.kontozeile { display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.kontozeile:last-child { border-bottom: 0; padding-bottom: 0; }
.kontozeile span { color: var(--mute); }
.offen {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); border: 1px solid rgba(61,220,132,.4); border-radius: 999px; padding: 2.5px 7px;
}

/* ---------- Beat-Börse ---------- */
.beatkachel {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 16px; display: grid; gap: 8px; align-content: start;
}
.beatkopf { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.beatkopf strong { font-size: 15px; }
.lizenz {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
  border: 1px solid;
}
.lizenz.frei    { color: var(--ok);    border-color: rgba(61,220,132,.45); }
.lizenz.nennung { color: var(--amber); border-color: rgba(245,166,35,.45); }
.lizenz.anfrage { color: var(--mute);  border-color: var(--line); }
.beatmeta { font-size: 12px; color: var(--mute); }
.beatlizenz { margin: 0; font-size: 12px; color: var(--mute); line-height: 1.5; }
.beatknoepfe { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.beatknoepfe .btn { flex: 1; }

/* ---------- Chat ---------- */
.chat-zwei { display: grid; grid-template-columns: 260px 1fr; gap: 14px;
  height: min(620px, 68vh); }
.chat-liste {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  overflow-y: auto; padding: 7px;
}
.chatperson {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; color: var(--text); text-align: left;
  padding: 10px; border-radius: 12px; cursor: pointer; min-height: 56px;
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.chatperson.an { background: #1d1d24; }
.chatbild {
  width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto;
  background: #22222b; display: grid; place-items: center;
  color: var(--amber); font-weight: 800; font-size: 14px;
}
.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(--amber); color: #1a1204; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 2px 7px; flex: 0 0 auto;
}
.chat-raum {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
}
.chat-verlauf { overflow-y: auto; padding: 16px; display: grid; gap: 9px; align-content: start; }
.blase { max-width: 76%; border-radius: 16px; padding: 9px 13px; display: grid; gap: 3px; }
.blase p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.blase time { font-size: 10.5px; opacity: .6; }
.blase.meine { justify-self: end; background: var(--amber); color: #1a1204; border-bottom-right-radius: 5px; }
.blase.andere { justify-self: start; background: #22222b; border-bottom-left-radius: 5px; }
.chat-eingabe { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-eingabe input { flex: 1; }

@media (max-width: 820px) {
  .reiter { width: 100%; overflow-x: auto; }
  .chartzeile { grid-template-columns: 28px 46px 1fr auto; gap: 9px; padding: 9px 10px; }
  .chartzeile .icon-btn { display: none; }
  .chartbild { width: 46px; height: 46px; }
  .baumspalte { min-width: 168px; }
  .chat-zwei { grid-template-columns: 1fr; height: auto; }
  .chat-liste { max-height: 220px; }
  .chat-raum { height: min(440px, 56vh); }
  .beatknoepfe .btn { flex: 1; }
}

/* Die kleinen Kürzel (Rang, „nur für dich", Lizenz) stehen bei 9,5 Pixeln.
   Auf einem Bildschirm mit Maus geht das; auf einem Handy in der U-Bahn
   nicht. Dort etwas größer und mit mehr Luft. */
@media (max-width: 820px) {
  .rangchip, .nurdu, .offen, .lizenz { font-size: 10.5px; padding: 3px 8px; }
  /* Auch die Beschriftung am Aufnahmeknopf und die Pegelbeschriftung -
     auf dem Handy ist alles unter 10,5 Pixeln nicht mehr lesbar. */
  .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; }
}

/* ==================================================================
   DIE BOOTH

   Ein Bildschirm, auf dem nur steht, was man beim Rappen braucht. Alles
   andere ist blass oder weg. Die Größenangaben stehen in clamp(), damit
   dieselbe Maske auf einem Handy und auf einem 27-Zöller funktioniert,
   ohne dass es zwei Bauarten gibt.
   ================================================================== */
.booth {
  background: linear-gradient(180deg, #0d0d12, #08080b);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 16px 18px;
  display: grid; gap: 14px;
}
.booth-oben { display: flex; justify-content: space-between; align-items: center; }

.booth-buehne {
  background: #08080b;
  border: 1px solid var(--line);
  border-radius: 16px;
  min-height: clamp(190px, 32vh, 300px);
  display: grid;
  padding: 14px 16px 12px;
  position: relative; overflow: hidden;
  /* Antippen holt die nächste Zeile. Deshalb darf hier nichts markiert
     werden - sonst hat man beim Rappen plötzlich blauen Text im Bild. */
  user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* Taktpunkte oben, Text in der Mitte, Fußzeile unten. Der Text bleibt so
   auf derselben Höhe, egal wie lang die Zeilen sind - sonst springt er
   beim Weiterlaufen, und man verliert die Stelle. */
.booth-text {
  width: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 10px; justify-items: center; align-items: center;
}

/* Vier Punkte, die im Takt pulsen. Man sieht die Eins, ohne mitzuzählen. */
.booth-zaehler { display: flex; gap: 9px; justify-content: center; }
.booth-zaehler .schlag {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  transition: transform .07s ease, background .07s ease;
}
.booth-zaehler .schlag.an { background: var(--amber); transform: scale(1.55); }
@media (prefers-reduced-motion: reduce) {
  .booth-zaehler .schlag { transition: none; }
  .booth-zaehler .schlag.an { transform: none; }
}

.booth-zeilen { display: grid; gap: 6px; 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(--mute); opacity: .5; min-height: 1.2em; }
.booth-zeilen .jetzt {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 6.4vw, 46px);
  letter-spacing: -.02em; color: var(--text);
  min-height: 1.2em;
  text-wrap: balance;
}
.booth-zeilen .next1 { font-size: clamp(14px, 3.2vw, 19px); color: var(--mute); min-height: 1.2em; }
.booth-zeilen .next2 { font-size: clamp(12px, 2.6vw, 15px); color: var(--mute); opacity: .45; min-height: 1.2em; }

.booth-fuss {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  font-size: 11.5px; color: var(--mute);
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05);
}
.booth-tipp { opacity: .8; }
.booth-leer { text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 420px; }
.booth-leer b { font-size: 16px; }
.booth-leer p { margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.55; }
.booth-leer em { color: var(--amber); 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(64px, 18vw, 130px); color: var(--amber); line-height: 1;
}
.booth-countdown span.puls { animation: zaehlPuls .28s ease-out; }
@keyframes zaehlPuls { from { transform: scale(1.45); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .booth-countdown span.puls { animation: none; } }

/* Knopf in der Mitte, Pegel links und rechts daneben. Auf einem breiten
   Bildschirm sah der Knopf allein in der Mitte verloren aus, und die
   Pegelbalken darueber wirkten wie ein Fremdkoerper. */
.booth-unten {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: center; justify-items: center;
  padding-top: 6px;
}
.booth-pegel { display: grid; gap: 8px; width: 100%; max-width: 220px; }
/* Die Balken standen dunkel auf dunkel und waren praktisch unsichtbar.
   Eine sichtbare Rinne zeigt auch dann etwas, wenn gerade nichts ankommt -
   und genau das will man wissen, wenn das Mikro stumm ist. */
.booth-pegel .meter {
  height: 10px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
}
.booth-pegel .meter-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.booth-rechts { display: grid; gap: 9px; width: 100%; max-width: 220px; justify-items: start; }
.booth-status { text-align: left; margin: 0; font-size: 12px; line-height: 1.45; }

/* Der Aufnahmeknopf. Groß genug, dass man ihn ohne Hinsehen trifft. */
.booth-knopf {
  position: relative; width: 80px; height: 80px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.booth-knopf svg { position: absolute; inset: 0; width: 80px; height: 80px; }
.booth-knopf .booth-punkt {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bad);
  transition: border-radius .18s ease, width .18s ease, height .18s ease;
}
.booth-knopf[data-busy="1"] .booth-punkt { border-radius: 6px; width: 24px; height: 24px; }
.booth-knopf { margin-bottom: 18px; }
.booth-knopf .booth-beschriftung {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; 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 .booth-punkt { transition: none; }
}

/* ---------- Zeilenliste ---------- */
.booth-listekopf {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; color: var(--mute); margin-bottom: 10px; flex-wrap: wrap;
}
.booth-zeilenliste { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
.booth-zeile {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 10px;
  padding: 11px 10px; min-height: 44px; text-align: left;
  color: var(--mute); font: inherit; font-size: 13.5px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.booth-zeile .nr {
  font-size: 11px; font-variant-numeric: tabular-nums; opacity: .5; text-align: right;
}
.booth-zeile .tx { line-height: 1.4; }
.booth-zeile.drin { color: var(--text); background: #101015; border-color: var(--line); }
.booth-zeile.jetzt { border-color: var(--amber); background: rgba(245,166,35,.08); }
.booth-zeile.jetzt .nr { color: var(--amber); opacity: 1; }
.booth-zeile:active { background: #16161d; }
.booth-hinweis { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }

/* ---------- Handy: die Booth nimmt alles ---------- */
@media (max-width: 820px) {
  /* In der Booth verschwindet die Kopfzeile des Studios. Sie schob den
     Aufnahmeknopf unter die Daumenleiste - und der ist das Einzige, was
     man beim Rappen wirklich braucht. Die Schrittleiste bleibt, damit man
     wieder herauskommt. */
  .studio.in-booth .studio-head > div:first-child { display: none; }
  .studio.in-booth .studio-head { justify-content: center; margin-bottom: 2px; }
  .studio.in-booth .steps { justify-content: center; }
  .studio.in-booth .steps button { padding: 9px 13px; font-size: 12px; min-height: 40px; }

  .booth {
    border-radius: 0; border-left: 0; border-right: 0;
    margin: 0 -14px;
    padding: 10px 14px 14px;
    /* So hoch wie der Bildschirm minus Kopfzeile, Schrittleiste und
       Daumenleiste. dvh statt vh: sonst rutscht auf iOS die Adressleiste
       ins Bild und der Knopf liegt darunter. */
    min-height: calc(100dvh - 54px - 52px - 68px - env(safe-area-inset-bottom));
    grid-template-rows: auto 1fr auto auto auto;
  }
  .booth-oben { display: none; }
  .booth-buehne { min-height: 0; }
  .booth .wave { height: 48px; }
  .booth-knopf { width: 92px; height: 92px; }
  .booth-knopf svg { width: 92px; height: 92px; }
  .booth-knopf .booth-punkt { width: 34px; height: 34px; }
  .aufnahme-optionen { justify-content: center; gap: 10px 14px; margin: 4px 0 0; }
  /* Auf dem Handy untereinander: nebeneinander bliebe fuer die Balken
     kaum Platz, und der Knopf soll gross bleiben. */
  .booth-unten { grid-template-columns: 1fr; gap: 10px; padding-top: 0; }
  .booth-pegel { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .booth-rechts { justify-items: center; max-width: 100%; }
  .booth-status { text-align: center; }
  .booth-zeilenliste { max-height: none; }
  /* Auf sehr kurzen Geräten lieber die Wellenform opfern als den Knopf. */
  @media (max-height: 700px) {
    .booth .wave { display: none; }
    .booth-zeilen .next2 { display: none; }
  }
}

/* ---------- Takes: Rolle, Position, Lautstärke ---------- */
.take {
  display: grid; gap: 10px; align-items: stretch;
  background: #141418; border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 13px;
}
.take.raus { opacity: .5; }
.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-size: 13.5px; }
.take-titel span { font-size: 11.5px; color: var(--mute); }

.rollen { display: flex; gap: 4px; background: #0e0e12; 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: 8px 12px; min-height: 36px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.rolle.an { background: var(--amber); color: #1a1204; }

.take-regler {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; 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(--amber); }
.take-laut { display: grid; gap: 5px; min-width: 130px; }
.take-laut .marke { font-size: 11px; color: var(--mute); }
.take-laut .marke b { color: var(--amber); font-variant-numeric: tabular-nums; }
.take-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.take-knoepfe .btn { flex: 0 0 auto; }

@media (max-width: 620px) {
  .take-regler { grid-template-columns: 1fr; gap: 10px; }
  .take-schieben { justify-content: space-between; }
  .take-knoepfe .btn { flex: 1; }
  .rollen { width: 100%; justify-content: space-between; }
  .rolle { flex: 1; }
}

/* ---------- Stimm-Vorlagen ---------- */
.vorlagen { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.vorlage {
  background: #141418; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 11px 17px; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vorlage.an { background: var(--amber); color: #1a1204; border-color: var(--amber); }
.vorlage:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .vorlage:active { transform: none; } }
#vorlageErklaerung { min-height: 34px; line-height: 1.5; }
@media (max-width: 620px) { .vorlage { flex: 1 1 30%; } }

/* ---------- Text: Silben, Reimschema, Reimhilfe ----------
   Die Zahlen stehen neben dem Text, nie darin. Eine Silbenschaetzung, die
   sich zwischen die Woerter draengt, stoert beim Schreiben mehr, als sie
   nuetzt. */
.text-zahlen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.text-zahlen span {
  background: #141418; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; color: var(--mute); white-space: nowrap;
}
.text-zahlen .muster {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 1.5px; color: var(--amber2); border-color: var(--amber-d);
}

.zeilenliste { display: flex; flex-direction: column; gap: 4px; }
.zeilenpause { height: 10px; }
.zeilenrow {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  align-items: center; gap: 10px; width: 100%; min-height: 44px;
  background: #121216; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; color: var(--text); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.zeilenrow:hover { border-color: var(--amber-d); }
.zeilenrow .nr {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mute);
  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: 24px; height: 24px; border-radius: 8px; font-size: 12px; font-weight: 800;
  background: #1c1c22; color: var(--mute); border: 1px solid var(--line);
}
/* Sechs Farben reichen: mehr als sechs Reimgruppen in einer Strophe kann
   ohnehin niemand mehr auseinanderhalten. Danach faengt es wieder vorn an. */
.reimchip.r0 { background: rgba(245,166,35,.18); color: var(--amber2); border-color: var(--amber-d); }
.reimchip.r1 { background: rgba(61,220,132,.16); color: #7ff0ae; border-color: #2f7a4f; }
.reimchip.r2 { background: rgba(120,160,255,.16); color: #a9c2ff; border-color: #3f5798; }
.reimchip.r3 { background: rgba(255,120,190,.16); color: #ffa9d4; border-color: #96436f; }
.reimchip.r4 { background: rgba(180,140,255,.16); color: #cbb2ff; border-color: #6a4f9e; }
.reimchip.r5 { background: rgba(255,200,90,.14); color: #ffdd9a; border-color: #997421; }
.reimchip.doppel { box-shadow: inset 0 0 0 2px currentColor; }
.reimchip.leer { color: #55525c; }

.reim-suche { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.reim-suche input {
  flex: 1 1 220px; min-height: 44px; font-size: 16px;   /* 16px: sonst zoomt iOS beim Antippen */
  background: #121216; border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 10px 14px; font-family: inherit;
}
.reim-suche .btn { min-height: 44px; }
.reim-topf { margin: 12px 0; }
.reim-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.reim-kopf .hint { margin: 0; }
.reim-woerter { display: flex; flex-wrap: wrap; gap: 6px; }
.reimwort {
  background: #16161c; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 10px 14px; min-height: 44px;
  font: inherit; font-size: 13.5px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reimwort:hover { border-color: var(--amber-d); color: var(--amber2); }
.reimwort:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .reimwort:active { transform: none; } }

@media (max-width: 620px) {
  .zeilenrow { grid-template-columns: 26px 1fr auto auto; gap: 8px; padding: 8px 10px; }
  .zeilenrow .tx { font-size: 13.5px; }
  .reim-suche .btn { flex: 1 1 100%; }
}

/* Der A/B-Schalter stand im Kopf der Stimm-Spur auf drei Zeilen, weil die
   Ueberschrift daneben ihm den Platz nahm. Er darf umbrechen, wenn wirklich
   kein Platz ist - aber nicht mitten im Wort. */
.studio-head label.hint { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 520px) { .studio-head label.hint { white-space: normal; } }