/* Kürsli · /brueche · das Bruch-Zuordnungsspiel (docs/BRUECHE.md §7.11)
 *
 * Diese Datei ergaenzt brand.css um die .br-* Regeln der Spielseite. Sie
 * definiert KEINE eigene Farbe: jeder Farbwert unten ist entweder ein Token
 * aus brand.css (--paper, --forest, --gold-dk, --claret, --rule …) oder ein
 * rgba()-Ton genau dieser Tokens.
 *
 * Warum brand.css und nicht ueben.css: die Kopf- und Fusszeile kommt von
 * brand-chrome.js und ist in brand.css gestylt (wie /pruefungen und
 * /lernbaum). Zwei Groessen, die ueben.css mitbringt, fehlen dadurch hier ·
 * --shadow und --radius. --radius ist in brand.css sogar auf 0 gesetzt (die
 * React-Bundle-Umlenkung), deshalb stehen die Radien unten als Zahl und die
 * Schatten als eigene --br-* Variablen.
 */

:root {
  --br-shadow: 0 1px 2px rgba(26, 42, 30, .05), 0 8px 24px -10px rgba(26, 42, 30, .16);
  --br-shadow-lift: 0 4px 10px rgba(26, 42, 30, .08), 0 22px 44px -14px rgba(26, 42, 30, .24);
  --br-forest-soft: rgba(26, 58, 46, .09);
  --br-gold-soft: rgba(168, 135, 44, .14);
  --br-claret-soft: rgba(110, 42, 42, .09);
}

body.br-body { margin: 0; }
.br-main, .br-main *, .br-main *::before, .br-main *::after { box-sizing: border-box; }

/* ---- Seitenrahmen --------------------------------------------------------- */
.br-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) 24px 96px;
}
@media (max-width: 480px) {
  /* 390px Viewport minus 2 x 16px Rand = 358px Inhalt. Zwei Karten mit 10px
     Abstand sind dann genau 174px breit (§7.11). */
  .br-main { padding: 28px 16px 88px; }
}

/* ---- Hero ----------------------------------------------------------------- */
.br-hero { max-width: 74ch; margin: 0 0 34px; }
.br-eb {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 14px;
}
.br-hero h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1;
  letter-spacing: -.035em; margin: 0 0 14px; color: var(--ink);
}
.br-hero h1 em { font-style: italic; color: var(--forest); }
.br-lede {
  font-family: 'Fraunces', Georgia, serif; font-size: 18px; line-height: 1.45;
  color: var(--ink-soft); margin: 0 0 12px; max-width: 62ch;
}
.br-note {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.6;
  color: var(--ink-mute); margin: 0; max-width: 66ch;
}

/* ---- Meldungen (leer, Fehler, kein JavaScript) ----------------------------- */
.br-alert {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.6;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule); border-left: 3px solid var(--claret);
  border-radius: 9px; padding: 18px 20px; margin: 24px 0; max-width: 66ch;
}
.br-alert h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.2rem;
  margin: 0 0 8px; color: var(--ink);
}
.br-alert p { margin: 0 0 8px; }
.br-alert p:last-child { margin-bottom: 0; }
.br-alert.quiet { border-left-color: var(--gold-dk); }
.br-loading {
  font-family: 'Source Serif 4', Georgia, serif; color: var(--ink-mute);
  font-size: 16px; margin: 32px 0;
}

/* ---- Knoepfe --------------------------------------------------------------- */
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 11px 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  background: var(--forest); color: var(--paper);
  border: 1px solid var(--forest); border-radius: 9px;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s ease, box-shadow .2s;
}
.br-btn:hover { background: var(--forest-2); border-color: var(--forest-2); transform: translateY(-1px); box-shadow: var(--br-shadow); }
.br-btn:active { transform: translateY(0); box-shadow: none; }
.br-btn.ghost { background: transparent; color: var(--forest); border-color: var(--rule-2); }
.br-btn.ghost:hover { background: var(--br-forest-soft); border-color: var(--forest); color: var(--forest); }
.br-btn.warn { background: transparent; color: var(--gold-dk); border-color: var(--gold-dk); }
.br-btn.warn:hover { background: var(--br-gold-soft); color: var(--gold-dk); border-color: var(--gold-dk); }

/* Ein einziger, ueberall gleicher Fokusring (§7.11). Der Ring liegt AUSSEN,
   damit er auch auf einer gewaehlten Karte sichtbar bleibt, deren eigener
   3px-Ring schon am Rand klebt. */
.br-card:focus-visible,
.br-btn:focus-visible,
.br-lvl:focus-visible,
.br-tempo input:focus-visible,
.br-main a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(168, 135, 44, .22);
}

/* ---- Stufenleiter ---------------------------------------------------------- */
.br-ladder-note {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 14.5px; line-height: 1.6;
  color: var(--ink-mute); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 9px;
  padding: 14px 16px; margin: 0 0 22px; max-width: 72ch;
}
.br-ladder-note p { margin: 0 0 7px; }
.br-ladder-note p:last-child { margin-bottom: 0; }

.br-totals {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 0 18px; margin: 0 0 22px; border-bottom: 1px solid var(--rule);
}
.br-totals b { font-weight: 500; color: var(--forest); font-size: 13px; letter-spacing: .06em; }

.br-sec-hd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 12px;
}

.br-levels { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
/* Das <li> ist das Rasterfeld, die Karte steckt darin · ohne dieses display
   waere die Karte so hoch wie ihr Text und zwei Karten nebeneinander haetten
   versetzte Fusszeilen. */
.br-levels > li { display: grid; min-width: 0; }
@media (min-width: 720px) { .br-levels { grid-template-columns: 1fr 1fr; gap: 14px; } }

.br-lvl {
  position: relative; display: grid;
  grid-template-columns: 46px 1fr;
  /* Die Fusszeile sitzt unten, egal wie lang der Beschreibungstext ist ·
     sonst stehen in einer Reihe zwei Karten mit versetzten Sternenzeilen. */
  grid-template-rows: 1fr auto;
  gap: 4px 14px; align-items: start;
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 3px solid var(--forest);
  border-radius: 14px; padding: 16px 18px 14px;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--br-shadow);
  transition: transform .15s ease, box-shadow .2s, border-color .15s;
}
.br-lvl:hover { transform: translateY(-2px); box-shadow: var(--br-shadow-lift); }
.br-lvl.t-aufbau { border-top-color: var(--gold-dk); }
.br-lvl.t-pruefung { border-top-color: var(--terracotta); }
.br-lvl.t-darueber { border-top-color: var(--claret); }

.br-lvl-nr {
  grid-row: 1 / span 2; align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--br-forest-soft); color: var(--forest);
  font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 500;
}
.br-lvl.t-aufbau .br-lvl-nr { background: var(--br-gold-soft); color: var(--gold-dk); }
.br-lvl.t-pruefung .br-lvl-nr { background: rgba(176, 97, 58, .14); color: var(--terracotta); }
.br-lvl.t-darueber .br-lvl-nr { background: var(--br-claret-soft); color: var(--claret); }

.br-lvl-main { min-width: 0; }
.br-lvl-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 3px;
}
.br-lvl h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.2rem;
  line-height: 1.15; margin: 0 0 6px; color: var(--ink);
}
.br-lvl-desc {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; line-height: 1.5;
  color: var(--ink-soft); margin: 0 0 10px;
}
.br-lvl-foot {
  grid-column: 2; grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-top: 10px; border-top: 1px dotted var(--rule);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  min-height: 30px;
}
.br-lvl-foot b { font-weight: 500; color: var(--forest); }
.br-lvl::after {
  content: 'Spielen \2009\2192';
  position: absolute; right: 18px; bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--forest);
}
.br-lvl-foot { padding-right: 92px; }

/* Sterne: Glyphe UND Text, nie die Glyphe allein (§5.2). */
.br-stars { display: inline-flex; align-items: center; gap: 7px; }
.br-stars .g { font-size: 14px; letter-spacing: .08em; color: var(--gold-dk); line-height: 1; }
.br-stars .t { letter-spacing: .1em; }
.br-stars.none .g { color: var(--rule-2); }

.br-ladder:focus, .br-round h2:focus { outline: none; }
.br-ladder:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.br-round h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Runde: Kopfleiste ----------------------------------------------------- */
.br-round { margin: 0; }
.br-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--br-shadow);
  padding: 14px 16px; margin: 0 0 16px;
}
.br-bar-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.br-bar-id .lv {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
}
.br-bar-id h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.15rem;
  line-height: 1.15; margin: 0; color: var(--ink);
}
.br-counters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
}
.br-counters b { font-weight: 500; color: var(--forest); font-size: 12px; letter-spacing: .04em; }
.br-counters .miss b { color: var(--claret); }
.br-serie {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: var(--br-gold-soft);
  color: var(--gold-dk); letter-spacing: .1em;
}
.br-serie b { color: var(--gold-dk); }
.br-serie[hidden] { display: none; }
.br-clock[hidden] { display: none; }
.br-clock b { font-variant-numeric: tabular-nums; }

.br-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.br-tempo {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
/* Das Kaestchen selbst ist 22px gross; angetippt wird das ganze <label> ·
   das ist 44px hoch und traegt den Text daneben mit. */
/* 24 px, nicht 22: WCAG 2.5.8 setzt 24x24 als Untergrenze für ein Ziel. Das
   Etikett daneben ist mit 44 px Höhe ohnehin das grössere Ziel und schaltet
   mit, aber das Kästchen selbst soll die Grenze nicht knapp verfehlen. */
.br-tempo input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--forest); cursor: pointer; }

.br-intro {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.6;
  color: var(--ink-soft); background: var(--br-forest-soft);
  border-left: 3px solid var(--forest); border-radius: 0 9px 9px 0;
  padding: 12px 16px; margin: 0 0 18px; max-width: 70ch;
}

/* ---- Stapel und Karten ------------------------------------------------------ */
.br-decks { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) {
  .br-decks { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}
.br-deck { min-width: 0; }
.br-deck-hd {
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--rule);
}
.br-deck-hd .n { color: var(--forest); }

.br-deck-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) {
  /* 172px ist die Untergrenze, weil eine Karte auf dem Telefon (390px, zwei
     Spalten) 174px breit ist · ein groesserer Bildschirm darf die Karten nicht
     kleiner machen als das kleinste Geraet. Knapp ueber 560px passt deshalb
     nur eine Spalte je Stapel (dann sind die Karten sogar 250px breit), ab
     etwa 900px werden es zwei zu je gut 200px. */
  .br-deck-cards { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
}
/* Breite Bilder (Zahlenstrahl, einzeiliger Streifen) bekommen die volle
   Stapelbreite · sonst schrumpft ein 300er-viewBox auf 174px und die
   Teilstriche sind nicht mehr zaehlbar. Gesetzt wird data-wide aus dem
   Seitenverhaeltnis des viewBox, nicht aus der Kartenart. */
.br-card[data-wide="1"] { grid-column: 1 / -1; }

.br-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 96px; min-width: 44px;
  padding: 14px 10px 28px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--br-shadow);
  color: var(--ink); font: inherit; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .15s, box-shadow .2s, background .15s;
}
.br-card[data-kind="frac"], .br-card[data-kind="mixed"], .br-card[data-kind="text"] { min-height: 72px; }
.br-card:hover { border-color: var(--rule-2); transform: translateY(-1px); box-shadow: var(--br-shadow-lift); }

/* Gewaehlt · drei Signale: aria-pressed (nicht visuell), 3px Forest-Ring,
   Chip „gewählt". Nie die Farbe allein (§1.4). */
.br-card[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--br-forest-soft);
  box-shadow: 0 0 0 3px var(--forest), var(--br-shadow);
  transform: translateY(-1px);
}
.br-card[aria-pressed="true"]:hover { box-shadow: 0 0 0 3px var(--forest), var(--br-shadow-lift); }

/* Falsch · Rand, Glyphe ✕, kurzes Ruetteln. Die Meldung im Live-Bereich sagt,
   WAS nicht zusammenpasst · die Farbe traegt nichts allein. */
.br-card.is-wrong {
  border-color: var(--claret);
  background: var(--br-claret-soft);
  box-shadow: 0 0 0 3px var(--claret), var(--br-shadow);
  animation: br-shake .3s ease-in-out;
}
@keyframes br-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(3px); }
}

/* Geloest · die Karten bleiben stehen, wo sie sind. Gedimmt wird nur der
   Bildkoerper (62 %); Chip und Wert bleiben voll deckend, sonst waere genau
   die Zeile schlecht lesbar, wegen der die Karte den Wert ueberhaupt zeigt. */
.br-card.is-resolved {
  cursor: default;
  border-color: var(--forest-2);
  background: rgba(26, 58, 46, .06);
  box-shadow: none;
}
.br-card.is-resolved:hover { transform: none; box-shadow: none; }
.br-card.is-resolved .br-card-body { opacity: .62; }

/* Aufgeloest · gestrichelter Goldrand, Wert steht drauf, Karte bleibt spielbar. */
.br-card.is-revealed { border-style: dashed; border-color: var(--gold-dk); }

.br-card-body { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.br-card-foot {
  position: absolute; left: 6px; right: 6px; bottom: 7px;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.br-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--br-forest-soft); color: var(--forest);
}
.br-chip.sel { background: var(--forest); color: var(--paper); }
.br-chip.rev { background: var(--br-gold-soft); color: var(--gold-dk); }
.br-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; font-weight: 600;
  color: var(--forest); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px;
}
/* Der Wert im Chip steht gestapelt (html.frac) · klein, im Chip-Stil. */
.br-val .br-frac { font-family: inherit; font-weight: inherit; color: inherit; font-size: 10px; line-height: 1; letter-spacing: 0; }
.br-val .br-frac .br-num { padding: 0 .15em .06em; }
.br-val .br-frac .br-den { padding: .08em .15em 0; border-top-width: 1px; }
/* Gestapelt ist der Chip hoeher: naeher an den Kartenrand, damit er im
   reservierten Fuss (padding-bottom 28px) bleibt und die Karte nicht waechst. */
.br-val:has(.br-frac) { border-radius: 8px; padding: 1px 6px; }
.br-card-foot:has(.br-val .br-frac) { bottom: 4px; }
.br-mark {
  position: absolute; top: 6px; right: 8px;
  font-size: 15px; line-height: 1; font-weight: 700;
}
.br-mark[hidden] { display: none; }
.br-mark.ok { color: var(--forest); }
.br-mark.no { color: var(--claret); }

/* ---- Die Darstellungen aus brueche-core.js (feste Klassen, §7.4) ----------- */
.br-fig { margin: 0; width: 100%; display: block; }
/* Die SVGs aus CORE tragen width="100%" und ein eigenes max-width in Pixeln.
   Beides bleibt stehen: in einer schmalen Karte schrumpft das Bild mit, in
   einer breiten waechst es hoechstens auf seine natuerliche Groesse und steht
   dann mittig. Ein Bild aufzublasen macht es nicht lesbarer, nur groesser. */
.br-card .br-fig svg { height: auto; display: block; margin: 0 auto; }
/* --br-fig-max setzt brueche-game.js aus dem viewBox der Grafik (§ Kommentar
   dort). Ohne die Variable bleibt es beim max-width, das CORE selbst mitgibt. */
.br-card[data-wide="1"] .br-fig svg { max-width: var(--br-fig-max, 100%) !important; width: 100%; }

.br-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; line-height: 1.02;
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(1.5rem, 6.4vw, 2rem); color: var(--ink);
}
.br-frac .br-num { padding: 0 .3em .05em; }
.br-frac .br-den { padding: .06em .3em 0; border-top: 2px solid currentColor; }
.br-mixed {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--ink);
}
.br-mixed .br-whole { font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1; }
.br-mixed .br-frac { font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
.br-text {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.35;
  color: var(--ink); display: block; padding: 0 2px;
  /* Keine automatische Silbentrennung: sie zerlegt „SchuelerInnen" zu
     „Schuele-rInnen" und macht das Binnen-I unleserlich. Nur ein Wort, das
     sonst wirklich ueberliefe, wird umgebrochen. */
  hyphens: manual; overflow-wrap: break-word;
}

/* ---- Live-Bereich und Hinweis ---------------------------------------------- */
.br-say {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.5;
  padding: 13px 16px; margin: 18px 0 0;
  border-left: 3px solid var(--rule); border-radius: 0 9px 9px 0;
  background: var(--bg-2); color: var(--ink-soft);
  max-width: 68ch; min-height: 50px;
}
.br-say b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--ink); }
/* Werte in der Rückmeldung: derselbe gestapelte Bruch wie auf den Karten
   (html.frac), aber in Textgrösse · Zähler und Nenner .85em wie ein \tfrac,
   Farbe und Gewicht vom <b> drumherum. */
.br-say .br-frac { font-family: inherit; font-weight: inherit; color: inherit; font-size: .85em; line-height: 1.05; margin: 0 .02em; }
.br-say .br-frac .br-num { padding: 0 .1em .04em; }
.br-say .br-frac .br-den { padding: .06em .1em 0; border-top-width: 1.5px; }
.br-say .br-mixed { font-family: inherit; font-weight: inherit; color: inherit; gap: .1em; vertical-align: middle; }
.br-say .br-mixed .br-whole { font-size: 1em; }
.br-say .br-mixed .br-frac { font-size: .8em; }
.br-say .gl { font-weight: 700; margin-right: 6px; }
.br-say.good { border-left-color: var(--forest); background: var(--br-forest-soft); color: var(--forest-dk); }
.br-say.good .gl, .br-say.good b { color: var(--forest); }
.br-say.bad { border-left-color: var(--claret); background: var(--br-claret-soft); color: var(--claret); }
.br-say.bad b { color: var(--claret); }
.br-say.warn { border-left-color: var(--gold-dk); background: var(--br-gold-soft); color: var(--gold-dk); }
.br-say.warn b { color: var(--gold-dk); }

.br-hint {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-mute); margin: 10px 0 0; max-width: 68ch;
}

/* ---- Auswahlleiste am unteren Rand (nur Telefon, nur waehrend einer Wahl) --- */
.br-selbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 20px -12px rgba(26, 42, 30, .4);
}
.br-selbar[hidden] { display: none; }
.br-selbar .txt {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; line-height: 1.35;
  color: var(--ink-soft); min-width: 0; overflow: hidden;
  /* Die Beschreibung eines Bildes kann lang sein · zwei Zeilen, dann Schluss,
     damit die Leiste nie den halben Bildschirm frisst. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.br-selbar .txt b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--forest); }
.br-selbar .br-btn { flex: 0 0 auto; padding: 10px 14px; font-size: 10px; }
@media (min-width: 560px) { .br-selbar { display: none !important; } }
/* Platz unter dem Raster, solange die Leiste steht (§1.4). */
.br-round.sel-open .br-decks { padding-bottom: 64px; }
@media (min-width: 560px) { .br-round.sel-open .br-decks { padding-bottom: 0; } }

/* ---- Rundenende ------------------------------------------------------------ */
.br-panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 3px solid var(--forest); border-radius: 14px;
  box-shadow: var(--br-shadow-lift);
  padding: 22px 22px 20px; margin: 22px 0 0; max-width: 62ch;
}
.br-panel[hidden] { display: none; }
.br-panel:focus { outline: none; }
.br-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.br-panel .hd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 10px;
}
.br-panel h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.5rem;
  line-height: 1.1; margin: 0 0 14px; color: var(--ink);
}
.br-panel dl { margin: 0 0 14px; display: grid; grid-template-columns: 1fr; gap: 7px; }
.br-panel .row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.br-panel .row .k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); flex: 0 0 118px;
}
.br-panel .calc {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px;
  letter-spacing: .02em; color: var(--ink);
}
.br-panel .star-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  padding: 12px 14px; margin: 0 0 16px;
  background: var(--br-gold-soft); border-radius: 9px;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.5;
  color: var(--ink-soft);
}
.br-panel .star-line .g { font-size: 19px; color: var(--gold-dk); line-height: 1; letter-spacing: .06em; }
.br-panel .best {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 14.5px; line-height: 1.55;
  color: var(--forest); margin: 0 0 14px;
}
.br-panel .aside {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-mute); margin: 0 0 16px;
}
.br-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Bewegung aus ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .br-card, .br-btn, .br-lvl { transition: none !important; }
  .br-card:hover, .br-btn:hover, .br-lvl:hover, .br-card[aria-pressed="true"] { transform: none !important; }
  .br-card.is-wrong { animation: none !important; }
}

/* --- Seitenfuss: der Kartenhinweis gehört nicht auf diese Seite ------------
   brand-chrome.js schreibt in JEDEN Fuss „Die Karte lädt erst auf Klick · dabei
   gehen Daten an Google Maps." Den „Karte laden"-Knopf hängt aber erst
   /foot-map.js an, und genau die Datei lädt /brueche bewusst nicht (siehe
   index.html): so bleibt diese Seite bei null Anfragen an fremde Server. Ohne
   den Knopf beschreibt der Satz einen Klick, den es hier nicht gibt. Es lädt
   nichts nach und es gehen keine Daten weg · der Satz ist also nicht unwahr,
   sondern gegenstandslos, und ein gegenstandsloser Satz über Datenabfluss ist
   an einer Seite für Kinder schlechter als gar keiner. Der Link nach draussen
   bleibt stehen und ist selbsterklärend.
   Bewusst hier und nicht in brand.css: das ist eine Aussage über DIESE Seite. */
.br-body .site-foot-map-hint { display: none; }