/* Ospella — farbwahl.css: Paletten, Regler und die Messtafel.

   Die Messtafel ist der wichtigste Teil dieser Datei. Sie sieht bewusst aus wie
   eine Tabelle und nicht wie ein Siegel: Zahlen, kein Haken, kein Grün für
   „bestanden". Eine Zahl kann man nachrechnen, ein grüner Haken behauptet nur.

   Die Tupfer auf den Kacheln bekommen ihre Farbe aus dem Skript (CSSOM, nicht
   als style-Attribut — die CSP verbietet Zweiteres). */

/* --- Palettenkacheln --- */
.palettenwahl {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.palettenkachel {
  text-align: left; padding: 12px 13px;
  border: 1px solid var(--linie-feld); border-radius: var(--r-bedien);
  background: var(--flaeche-karte); min-height: 44px;
  display: flex; flex-direction: column; gap: 5px;
}
.palettenkachel[aria-checked="true"] {
  border: 1.5px solid var(--gruen-linie); background: var(--flaeche-ruhig);
}
.palettenkachel .name {
  font-family: var(--schrift-display); font-weight: 500;
  font-size: var(--gr-listentitel); line-height: 1.15; color: var(--text);
}
.palettenkachel .hinweis {
  font-size: var(--gr-marker); line-height: var(--zh-marker); color: var(--text-leise);
}

.tupferreihe { display: flex; gap: 4px; margin-bottom: 3px; }
.tupfer {
  width: 20px; height: 20px; border-radius: var(--r-rund);
  border: 1px solid var(--linie-karte);
}

/* Die Schriftprobe je Kachel (Ansage 01.09.2026, Nachmittag) — "Aa" in der
   Anzeigeschrift der Vorlage. Faellt bei Vorlagen ohne Schriftaenderung weg
   (schriftprobe() liefert dann null). */
.schriftprobe {
  display: block; font-size: 1.15rem; line-height: 1; color: var(--text-leise);
}

/* --- Die freie Wahl --- */
.farbzeile, .reglerzeile {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0; min-height: 44px;
}
.farbzeile .wort, .reglerzeile .wort {
  flex: none; min-width: 7.5rem; font-size: var(--gr-bedien); color: var(--text-leise);
}
.farbfeld {
  flex: 1; height: 44px; min-width: 0;
  border: 1px solid var(--linie-feld); border-radius: var(--r-bedien);
  padding: 3px; background: var(--flaeche-karte); cursor: pointer;
}
/* Der Browser umrandet das Farbfeld sonst zweimal. */
.farbfeld::-webkit-color-swatch-wrapper { padding: 0; }
.farbfeld::-webkit-color-swatch { border: none; border-radius: 9px; }
.farbfeld::-moz-color-swatch { border: none; border-radius: 9px; }

.reglerzeile input[type="range"] { flex: 1; min-width: 0; accent-color: var(--flaeche-tisch); }
.reglerwert {
  flex: none; min-width: 3.5rem; text-align: right;
  font-size: var(--gr-bedien); color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* --- Die Messtafel --- */
.messblock { display: block; }
.messtafel { width: 100%; border-collapse: collapse; }
.messtafel th, .messtafel td {
  text-align: left; padding: 9px 0; font-weight: 400;
  font-size: var(--gr-bedien); border-bottom: 1px solid var(--linie-trenner);
}
.messtafel tr:last-child th, .messtafel tr:last-child td { border-bottom: 0; }
.messtafel th { color: var(--text); }
.messtafel .wert {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--text);
  white-space: nowrap;
}
.messtafel .ziel {
  text-align: right; font-size: var(--gr-marker); color: var(--text-leise);
  white-space: nowrap; padding-left: 10px;
}
/* Durchgefallen wird nicht rot markiert — es bekommt die Holzkante, dieselbe
   Sprache wie jeder andere Hinweis in Ospella (§6.1: es gibt keine
   Fehlerfarbe). */
.messtafel .faellt-durch th {
  border-left: 2px solid var(--holz-linie); padding-left: 9px;
}
.messtafel .faellt-durch .wert { color: var(--holz-text); }

.warnzeile {
  font-size: var(--gr-neben); line-height: var(--zh-neben); color: var(--text);
  border-left: 2px solid var(--holz-linie); padding-left: 11px; margin-top: 12px;
}

@media (max-width: 359px) {
  .palettenwahl { grid-template-columns: 1fr; }
}