/*
 * Der Umrechnungs-Assistent für die Flächenpreise (04.09.2026).
 *
 * ⚠ **Eine eigene Datei, und das ist der Punkt.** `oberflaeche.html` ist eine einzige Datei mit
 * über 11.000 Zeilen; jeder weitere Block Stil dort macht sie schwerer zu lesen und den nächsten
 * Umbau teurer. Diese Datei kommt über `staticResources("/stil", "stil")` — denselben Weg wie die
 * mitgelieferten Schriften.
 *
 * ⚠ **Alle Farben aus den bestehenden Merkmalen** (`--tinte`, `--akzent`, `--ok`, `--warten`).
 * Eigene Farbwerte hier wären ein zweites Farbsystem, das beim nächsten Anstrich stehen bleibt.
 *
 * ⚠ **Die Klassen tragen alle das Präfix `ku-`.** Ein Elementselektor wie `table th` träfe jede
 * Tabelle der Oberfläche — genau daran ist im AIO Hub schon eine Runde draufgegangen („`nav
 * button` trifft JEDES neue nav“).
 */

/* ⚠ Breiter als der Zuordnungsdialog (640 px): Sieben Spalten mit Geldbeträgen passen sonst nicht
   nebeneinander.

   ⚠⚠ **DREI Klassen, und das ist kein Zierrat — hier stand `.ku-blatt .karte` und wirkte NICHT.**
   `oberflaeche.html` setzt `.zu-blatt .karte { max-width: 640px }`. Beide Regeln haben dieselbe
   Spezifität (zwei Klassen), also entscheidet die Reihenfolge — und der `<style>`-Block im
   Dokument kommt **nach** dem `<link>` auf diese Datei. Die Karte blieb 640 px breit, und beim
   Durchklicken am 04.09.2026 war ausgerechnet die letzte Spalte („1.000 Ausspielungen") nicht
   sichtbar: genau die, auf die der Text darüber verweist. Gemessen: Halter 623 px, Tabelle 790 px.
   Mit `.zu-blatt.ku-blatt` gewinnt die Regel unabhängig von der Reihenfolge. */
.zu-blatt.ku-blatt .karte { max-width: 1020px; }

/* Der Satz, der sagt, WAS die Umrechnung bedeutet — vor der Tabelle, nicht darunter. */
.ku-satz {
  margin: 0;
  padding: 12px 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinte2);
  background: var(--akzent-weich);
  border-bottom: 1px solid var(--linie);
}
.ku-satz.ist-fertig { background: var(--ok-weich); }

/* ⚠ **Beide Richtungen, und der Halter ist auch der Scroller für den klebenden Tabellenkopf.**
   Nur `overflow-x` hiesse: zwanzig Flächen schieben den Fussbereich mit den Knöpfen aus dem
   Fenster — die Karte ist auf 84 vh gedeckelt, und was darüber hinausgeht, wäre unerreichbar. */
.ku-halter { overflow: auto; flex: 1 1 auto; }

.ku-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ku-tab th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte3);
  background: var(--flaeche);
  padding: 9px 10px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.ku-tab td { padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
/* ⚠ Zebrastreifen wie in den übrigen Listen — bei zwanzig Flächen verrutscht sonst die Zeile. */
.ku-tab tbody tr:nth-child(even) { background: var(--flaeche2); }
.ku-tab .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ku-tab input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--akzent); margin: 1px 0 0; }
.ku-tab .ort { display: block; font-size: 11.5px; color: var(--tinte3); }
/* ⚠ Eigene Zeile für die Marken. Standen sie hinter dem Namen, war die Namensspalte breiter als
   der Halter — die Tabelle scrollte, sobald eine Fläche markiert war. */
.ku-tab .ku-marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

.ku-pfeil { color: var(--tinte4); padding: 0 4px; }
.ku-neu { font-weight: 600; }
/* ⚠ Grün heisst „auf den Cent umsatzneutral“, gelb heisst „ein Cent Rundung“. Beides muss man
   sehen können, ohne zu rechnen — sonst glaubt es niemand. */
.ku-gleich { color: var(--ok); }
.ku-abweichung { color: var(--warten); font-weight: 600; }

/* Der Block „wird nicht umgerechnet“ — MIT Grund, und zwar in der Zeile. */
.ku-nein { padding: 14px 18px; border-top: 1px solid var(--linie); }
.ku-nein h5 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.ku-nein .ku-zeile {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px dashed var(--linie);
  font-size: 12.5px;
}
.ku-nein .ku-zeile:last-child { border-bottom: none; }
.ku-nein .ku-zeile b { flex: 0 0 190px; font-weight: 600; }
.ku-nein .ku-zeile span { flex: 1 1 260px; color: var(--tinte2); }

.ku-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
  background: var(--flaeche2);
}
.ku-fuss .zahl { flex: 1 1 200px; font-size: 12.5px; color: var(--tinte2); }

/* Die Einstiegskarte im Blatt „Bildschirme“. */
.ku-einstieg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.ku-einstieg .txt { flex: 1 1 420px; min-width: 0; }
.ku-einstieg .txt b { font-size: 13.5px; }
.ku-einstieg .txt p { margin: 4px 0 0; font-size: 12.5px; color: var(--tinte2); }

/* ⚠ Unter 900 px bricht die Zeile: Sieben Geldspalten passen auf ein Telefon nicht nebeneinander.
   Die Tabelle scrollt dann waagerecht IN ihrem Halter — nie die Seite. */
@media (max-width: 900px) {
  .ku-nein .ku-zeile b { flex: 1 1 100%; }
}