/* Gebührenhelfer 2.0 — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben und Maße, hier
 * die Bühne, die Abschnitte, die Vorschau und die Stammdaten. Wer eine Farbe
 * oder einen Knopf braucht, holt ihn von dort und baut ihn nicht ein zweites
 * Mal.
 *
 * Zwei Spalten: links das Formular, rechts die Vorschau, die mitläuft und
 * stehen bleibt. Auf schmalen Geräten klappt beides untereinander.
 *
 * Jeder Abschnitt trägt seine Farbe als eigene Variable; Auswahlknöpfe und
 * Häkchen greifen über `--farbe` darauf zu. Eine neue Farbe braucht deshalb
 * nur eine Zeile.
 *
 * Die Vorschau bleibt Papier: Sie zeigt, wie der Beschluss ausgefertigt
 * aussieht, und ein dunkler Beschluss zeigte das nicht. Deshalb trägt sie im
 * Markup `tafel--hell` und damit die helle Tafel ein zweites Mal — stärker
 * als das, was sie von der Wurzel erbt.
 */

/* --------------------------------------------- Die Farben dieser Anwendung */

/* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
   Übersicht — derselbe Ton, den `public/icon.svg` bereits trägt. Nur die
   Kopfleiste greift ihn ab; alles übrige bleibt bei `--primaer`. Er steht
   allein an der Wurzel und nicht auch an `.tafel--hell`: Die Vorschau hat
   keine Kopfleiste. */
:root {
  --ton-app: var(--ton-violett);
}

:root,
.tafel--hell {
  /* Die Abschnitte. Die Töne kommen aus `gemeinsam/tafel.css` und werden hier
     nur benannt — so folgen sie der dunklen Fassung von selbst. */
  --empfaenger: var(--ton-blau);
  --beschluss: var(--ton-petrol);
  --begruendung: var(--ton-violett);
  /* Die Vorschau wirbt nicht um Aufmerksamkeit; sie zeigt nur das Ergebnis. */
  --vorschau: var(--ton-grau);
}

/* ------------------------------------------------------------------ Bühne */

.buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: 16px;
  align-items: start;
  padding: 16px;
  max-width: 1800px;
  margin: 0 auto;
}

.buehne__formular { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Die Vorschau bleibt beim Blättern stehen — kein Scrollen zur Kontrolle. */
.buehne__vorschau {
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 84px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Unter 1100 px reicht die Breite für zwei Spalten nicht mehr. */
@media (max-width: 1100px) {
  .buehne { grid-template-columns: minmax(0, 1fr); }
  .buehne__vorschau { position: static; max-height: none; }
}

/* -------------------------------------------------------------- Abschnitte */

.abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  border-top: 3px solid var(--farbe);
  box-shadow: var(--schatten);
  padding: 12px 16px 16px;
}

.abschnitt--empfaenger  { --farbe: var(--empfaenger); }
.abschnitt--beschluss   { --farbe: var(--beschluss); }
.abschnitt--begruendung { --farbe: var(--begruendung); }
.abschnitt--vorschau    { --farbe: var(--vorschau); }

.abschnitt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.abschnitt__titel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe);
}

.abschnitt__werkzeuge { display: flex; gap: 8px; }

/* Das Raster: zwei Spalten, damit weniger vertikal gescrollt werden muss. */
.abschnitt__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: end;
}

/* Ein halbes Feld im zweispaltigen Raster der Abschnitte. */
.feld--halb { grid-column: span 1; }

/* ------------------------------------------------------------ Vorschüsse */

.vorschuesse { width: 100%; border-collapse: collapse; }

.vorschuesse th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-leise);
  padding: 0 6px 4px;
}

.vorschuesse td { padding: 2px 6px 2px 0; vertical-align: middle; }
.vorschuesse__znr { width: 28%; }
.vorschuesse__erleger { width: 24%; }
.vorschuesse__betrag { width: 32%; }

.vorschuesse__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Was eine eingefügte Tabelle ergeben hat. Leer nimmt die Zeile keinen Platz. */
.vorschuesse__meldung {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--merke);
}

.vorschuesse__meldung:empty { margin: 0; }

/* ---------------------------------------------------------- Teilbereiche */

.teilbereich {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: 6px;
  background: color-mix(in srgb, var(--farbe) 4%, transparent);
}

.teilbereich--warnung {
  border-color: color-mix(in srgb, var(--warnung) 50%, var(--linie-stark));
  background: color-mix(in srgb, var(--warnung) 6%, transparent);
}

.teilbereich__grund {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--warnung);
}

.teilbereich__spalten {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.rueckzahlung {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--flaeche);
}

.rueckzahlung__titel { font-size: 12px; color: var(--farbe); margin-bottom: 8px; }
.rueckzahlung__art { margin: 0 0 8px; font-size: 11px; color: var(--text-leise); }
.rueckzahlung__felder { display: grid; gap: 8px; }
.rueckzahlung__fuss { margin-top: 10px; }

/* -------------------------------------------------------------- Vorschau */

.vorschau { font-size: 14px; }

/* Der Abstand zwischen den Teilen liegt auf den Teilen, nicht auf den
   Überschriften: Sonst verlöre die erste Überschrift eines Teils ihren
   Abstand zum vorangehenden Teil. */
.vorschau__hinweise, .vorschau__text { margin-top: 16px; }

.vorschau__titel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  margin: 14px 0 6px;
}
.vorschau__titel:first-child { margin-top: 0; }

.vorschau__tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.vorschau__tabelle td { padding: 3px 0; }
.vorschau__betrag { text-align: right; font-variant-numeric: tabular-nums; }
.vorschau__partei { color: var(--text-leise); font-size: 12px; text-align: center; }

.vorschau__tabelle tfoot td { border-top: 1px solid var(--linie); padding-top: 6px; }
.vorschau__summe td { font-weight: 700; }
.vorschau__rest td { color: var(--text-leise); }
.vorschau__amtsgelder td { color: var(--warnung); }

.hinweise { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.hinweise__punkt {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid currentColor;
}

/* Der Weg zur Einstellungsmaske, wo ein Hinweis dorthin führt. Er nimmt die
 * Farbe seines Punktes an — deshalb steht hier keine eigene. */
.hinweise__verweis {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.hinweise__punkt--fehler { color: var(--fehler); background: color-mix(in srgb, var(--fehler) 8%, transparent); }
.hinweise__punkt--luecke { color: var(--warnung); background: color-mix(in srgb, var(--warnung) 8%, transparent); }
.hinweise__punkt--merke  { color: var(--merke);  background: color-mix(in srgb, var(--merke) 8%, transparent); }

/* Der Beschlusstext in der Schrift, in der er auch ausgefertigt wird. */
.vorschau__text { font-family: var(--schrift-text); line-height: 1.55; }

.spruch { margin: 0; padding-left: 1.4em; }
.spruch li { margin-bottom: 10px; }
/* Ohne Nummerierung entfällt auch der Einzug, den sie gebraucht hat. */
.spruch--einzeln { padding-left: 0; }
.spruch strong, .begruendung strong { font-weight: 700; }

.begruendung { margin: 0 0 8px; text-align: justify; }

.zv {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift);
  font-size: 13px;
}

.zv__kopf { margin: 0; font-weight: 600; }
.zv__punkte { margin: 2px 0; padding-left: 1.2em; }
.zv__kal { margin: 6px 0 0; }
/* Das Kalendierungsdatum springt ins Auge — so steht es auch im Beschluss. */
.zv__datum { color: var(--fehler); font-weight: 700; }

/* --------------------------------------------------------------- Ausgabe */

/* Die Ausgabe schließt an die Vorschau an und bleibt mit ihr stehen. */
.ausgabe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
}

.ausgabe__meldung {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text-leise);
}

.ausgabe__knoepfe { display: flex; gap: 8px; }

/* ------------------------------------------------------------- Rücksichten */

/* Auf dem Papier steht die Vorschau allein. Der Rest der Rücksichten steht in
   `gemeinsam/bausteine.css`. */
@media print {
  .kopf, .buehne__formular, .fuss { display: none; }
  .buehne { display: block; padding: 0; }
  .buehne__vorschau { position: static; max-height: none; overflow: visible; }
  .abschnitt { border: 0; box-shadow: none; padding: 0; }
}

/* ------------------------------------------------------ Versionsgeschichte */

/* Die Überschrift einer Fassung trägt die Nummer vorne und den Titel dahinter;
   anders als die Gruppentitel der Masken bleibt sie gemischt geschrieben — ein
   ganzer Satz in Versalien liest sich schwer. */
.versionen__titel {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.versionen__nummer {
  color: var(--farbe);
  font-variant-numeric: tabular-nums;
}

.versionen__marke {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-leise);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 1px 8px;
}

.versionen__text { margin: 0 0 10px; max-width: 68ch; }
.versionen__text:last-child { margin-bottom: 0; }

.versionen__liste { margin: 0 0 10px; padding-left: 20px; max-width: 68ch; }
.versionen__liste:last-child { margin-bottom: 0; }
.versionen__liste li + li { margin-top: 6px; }

.maske__fussnote {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-leise);
}

/* ---------------------------------------------------------- Stammdaten */

.bestand {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 800px) {
  .bestand { grid-template-columns: minmax(0, 1fr); }
}

.bestand__spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.bestand__anzahl { margin: 0; font-size: 11px; color: var(--text-leise); }

.bestand__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.bestand__eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  min-height: var(--tippflaeche);
  justify-content: center;
}

.bestand__eintrag:last-child { border-bottom: 0; }
.bestand__eintrag:hover { background: color-mix(in srgb, var(--farbe) 8%, transparent); }

.bestand__eintrag--gewaehlt {
  background: color-mix(in srgb, var(--farbe) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--farbe);
}

.bestand__name { font-weight: 600; font-size: 13px; }
.bestand__zusatz { font-size: 11px; color: var(--text-leise); }

.bestand__leer, .bestand__nichts {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--text-leise);
  text-align: center;
}

.bestand__werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.bestand__register {
  margin: 12px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-leise);
  background: color-mix(in srgb, var(--farbe) 5%, transparent);
  border-radius: 4px;
}

.knopf--gefahr { color: var(--fehler); }
.knopf--gefahr:hover { border-color: var(--fehler); color: var(--fehler); }

/* ----------------------------------------------------------- Konflikte */

.konflikte__vorspann { margin: 0 0 12px; font-size: 14px; }

.konflikte__sammel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}

.konflikte__liste { display: grid; gap: 14px; }

.konflikte__wer { margin: 0 0 6px; font-size: 13px; }

.konflikte__wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.konflikte__knopf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 8px 12px;
  min-height: var(--tippflaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.konflikte__knopf:hover { border-color: var(--farbe); }

.konflikte__knopf--gewaehlt {
  border-color: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--farbe);
}

.konflikte__herkunft {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-leise);
}

.konflikte__wert { font-size: 13px; word-break: break-word; }

/* `.kopf__trenner` stand hier ein zweites Mal, wortgleich mit den Bausteinen,
   und `.kopf__zeichen` holte sich den Ton des Sachgebiets über eine eigene
   Regel. Beides ist weg: Der Trenner steht in `gemeinsam/bausteine.css`, und
   den Ton führt `--ton-app` (oben in dieser Datei). */