/* Zweites Design: "Bühne"
 *
 * Dasselbe Programm, andere Haltung. Das Standard-Design ordnet alles in
 * gleich grosse Karten — ruhig, aber ohne Rangfolge: Die dringendste Sache
 * sieht aus wie die unwichtigste. "Bühne" dreht das um:
 *
 *   - keine Kästen, sondern Weissraum und feine Linien
 *   - Schriftgrösse macht die Hierarchie, nicht Rahmen und Schatten
 *   - Zahlen gross, Beschriftungen klein und gesperrt
 *   - das Erste auf der Seite bekommt eine Bühne, der Rest ordnet sich unter
 *
 * Alles hier haengt an :root[data-design="buehne"] — ohne das Attribut
 * aendert diese Datei nichts.
 */

:root[data-design="buehne"] {
  --radius-lg: 22px;
}

/* ---- Grundflaeche: Papier statt Karten ------------------------- */
:root[data-design="buehne"] .card {
  background: transparent;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: 26px 0 8px;
  margin-bottom: 4px;
}
:root[data-design="buehne"] .card:first-of-type { border-top: none; }

:root[data-design="buehne"] .card h2 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
}
:root[data-design="buehne"] .card-sub {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 54ch;
}

/* ---- Kennzahlen: die Zahl ist das Bild ------------------------- */
:root[data-design="buehne"] .kpis {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 22px 18px;
}
:root[data-design="buehne"] .kpi {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
:root[data-design="buehne"] .kpi .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-design="buehne"] .kpi .value {
  font-size: clamp(34px, 11vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-top: 4px;
}
:root[data-design="buehne"] .kpi-sub { font-size: 12px; margin-top: 3px; }

/* ---- Heute: die erste Sache bekommt die Buehne ------------------ */
:root[data-design="buehne"] .today-cards { gap: 0; }
:root[data-design="buehne"] .todo-card {
  background: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 22px 2px 20px;
}
:root[data-design="buehne"] .todo-card h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-top: 6px;
}
:root[data-design="buehne"] .todo-card:first-child {
  /* Was zuerst drankommt, sieht man an der Groesse, nicht an einem Rahmen */
  padding: 26px 18px 24px;
  margin: 0 -18px 4px;
  border-bottom: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 70%
  );
}
:root[data-design="buehne"] .todo-card:first-child h3 {
  font-size: clamp(25px, 7.5vw, 32px);
}
:root[data-design="buehne"] .todo-kind {
  letter-spacing: 0.14em;
  font-size: 10px;
}
:root[data-design="buehne"] .todo-sub { font-size: 14px; }

/* ---- Listen: Luft statt Linien --------------------------------- */
:root[data-design="buehne"] .manager-row,
:root[data-design="buehne"] .cap-row,
:root[data-design="buehne"] .cast-player,
:root[data-design="buehne"] .bench-row {
  padding-top: 15px;
  padding-bottom: 15px;
}
:root[data-design="buehne"] .m-name-text { font-size: 17px; letter-spacing: -0.015em; }
:root[data-design="buehne"] .m-tv { font-size: 21px; letter-spacing: -0.03em; }
:root[data-design="buehne"] .oracle-headline {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

/* ---- Kopf und Fuss: zurueckhaltender ---------------------------- */
:root[data-design="buehne"] .topbar {
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: none;
}
:root[data-design="buehne"] .bottomnav {
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--hairline);
}
:root[data-design="buehne"] .bn-item { font-size: 10.5px; letter-spacing: 0.02em; }

/* ---- Platzgrafik: ruhiger Grund -------------------------------- */
:root[data-design="buehne"] .pitch {
  background: linear-gradient(170deg, color-mix(in srgb, var(--up) 11%, transparent), transparent 75%);
  border-radius: var(--radius-lg);
}

/* ---- Knoepfe: flach, mit klarer Flaeche ------------------------ */
:root[data-design="buehne"] .pill-btn {
  border-radius: 999px;
  font-weight: 600;
}
:root[data-design="buehne"] .chip {
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
:root[data-design="buehne"] .chip.active {
  background: var(--ink);
  color: var(--ground);
  box-shadow: none;
}