/* Gebührenhelfer 2.0 — Gestaltung.
 *
 * 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 darauf zu. Eine neue Farbe braucht deshalb nur eine Zeile.
 *
 * Alle Farben stehen in Variablen. Die dunkle Fassung tauscht nur diese
 * Variablen aus — es gibt keine zweite Gestaltung, die auseinanderlaufen
 * könnte. Welche Fassung gilt, sagt `data-thema` an der Wurzel; die Anwendung
 * setzt es beim Start und löst dabei „automatisch“ anhand der Einstellung des
 * Betriebssystems auf. Deshalb steht die dunkle Tafel hier nur einmal und
 * nicht ein zweites Mal in einer Medienabfrage.
 *
 * Die Vorschau bleibt Papier: Sie zeigt, wie der Beschluss ausgefertigt
 * aussieht, und ein dunkler Beschluss zeigte das nicht. Deshalb trägt sie die
 * helle Farbtafel ein zweites Mal — direkt an ihrem Rahmen und damit stärker
 * als das, was sie von der Wurzel erbt.
 */

/* ------------------------------------------------------------- Grundlagen */

:root,
.vorschau {
  --schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-text: Arial, Helvetica, sans-serif;

  --grund: #f4f6f8;
  --flaeche: #ffffff;
  --eingabe-grund: #ffffff;
  --linie: #d6dce2;
  --linie-stark: #b3bcc6;
  --text: #1c2530;
  --text-leise: #5a6672;
  /* Was auf einer gefüllten Fläche steht — Schrift auf der Abschnittsfarbe. */
  --auf-farbe: #ffffff;

  --fehler: #b3261e;
  --warnung: #8a5a00;
  --merke: #1f5c8b;

  /* Die Farben der Abschnitte. */
  --empfaenger: #2563a8;
  --beschluss: #0f7b7b;
  --begruendung: #6b4bab;
  --vorschau: #566270;

  --rundung: 8px;
  --schatten: 0 1px 2px rgb(16 24 32 / 8%), 0 2px 8px rgb(16 24 32 / 4%);
  --schatten-schwebend: 0 4px 16px rgb(16 24 32 / 16%);
  --schatten-schirm: 0 12px 48px rgb(16 24 32 / 24%);
  --schleier: rgb(16 24 32 / 45%);

  /* Tippflächen: nie kleiner, auch nicht auf dem Bildschirm. */
  --tippflaeche: 40px;
}

/* Rollbalken, Auswahllisten und der Grund des Fensters folgen mit. Solange
   die Anwendung noch nicht gewählt hat, gilt die Einstellung des Systems. */
:root { color-scheme: light dark; }
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }
/* Die Schriftfarbe wird geerbt, nicht aus der Variablen gelesen — sie muss
   deshalb eigens auf die helle Tafel zurückgeholt werden. */
.vorschau { color-scheme: light; color: var(--text); }

/* Bis das Attribut steht, ist nichts zu zeigen: Der Rumpf ist ohnehin leer,
   und ein gemalter heller Grund blitzte auf einem dunklen System kurz auf.
   Ohne den Rumpf färbt der Browser den Fensterhintergrund nach
   `color-scheme` — also von vornherein richtig. */
:root:not([data-thema]) body { visibility: hidden; }

:root[data-thema="dunkel"] {
  --grund: #14181e;
  --flaeche: #1d222a;
  /* Eingabefelder liegen tiefer als die Karte, Knöpfe auf ihr. */
  --eingabe-grund: #161a21;
  --linie: #313945;
  --linie-stark: #5f6b78;
  --text: #e7ebf0;
  --text-leise: #a6b0bc;
  /* Auf hellen Flächen steht dunkle Schrift — auch im Dunkeln. */
  --auf-farbe: #10141a;

  /* Aufgehellt: Die hellen Töne tragen auf dunklem Grund nicht. */
  --fehler: #f2857d;
  --warnung: #e3a339;
  --merke: #7cb8e6;

  --empfaenger: #7bb0ea;
  --beschluss: #46bdbd;
  --begruendung: #b39bea;
  --vorschau: #a5b1bd;

  /* Ein Schatten aus hellem Grau ist auf dunklem Grund keiner. */
  --schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 24%);
  --schatten-schwebend: 0 4px 16px rgb(0 0 0 / 55%);
  --schatten-schirm: 0 12px 48px rgb(0 0 0 / 70%);
  --schleier: rgb(0 0 0 / 62%);
}

* { box-sizing: border-box; }

/* `hidden` muss jede eigene Anzeigeart schlagen. Ohne diese Zeile bliebe ein
   verborgener Bereich sichtbar, sobald er `display: grid` oder `flex` trägt —
   die Regel des Browsers ist weniger gewichtig als eine Klassenregel. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.5 var(--schrift);
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* Sichtbarer Fokus, überall und deutlich. Er wird nie entfernt: Wer mit der
   Tastatur arbeitet, muss jederzeit sehen, wo er steht. */
:focus-visible {
  outline: 3px solid var(--empfaenger);
  outline-offset: 2px;
  border-radius: 3px;
}

.nur-fuer-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Kopfleiste */

.kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf__marke { display: flex; align-items: center; gap: 10px; }
.kopf__zeichen { display: flex; color: var(--empfaenger); }
.kopf__titel { font-size: 18px; letter-spacing: -0.01em; }

.kopf__meldung {
  margin: 0;
  flex: 1;
  color: var(--merke);
  font-size: 13px;
}

.kopf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 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;
}

/* ------------------------------------------------------------------ Felder */

.feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feld--voll   { grid-column: 1 / -1; }
.feld--halb   { grid-column: span 1; }
.feld--schmal { grid-column: span 1; max-width: 200px; }
/* Ein Schalter neben einem Eingabefeld sitzt auf dessen Grundlinie. */
.feld--mit-schalter { justify-content: flex-end; }

/* Zwei zusammengehörige Auswahlreihen nebeneinander. Wird es zu eng, rücken
   sie von selbst untereinander. */
.feld--nebeneinander {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: flex-end;
}
.feld--nebeneinander > .feld { flex: 0 1 auto; }

.feld__beschriftung {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

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

.feld__zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feld__zeile > *:first-child { flex: 1; min-width: 0; }

.eingabe {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 8px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--eingabe-grund);
  color: inherit;
  font: inherit;
}

.eingabe:hover { border-color: var(--farbe, var(--linie-stark)); }
.eingabe:focus { border-color: var(--farbe, var(--empfaenger)); }

.eingabe--zahl { text-align: right; font-variant-numeric: tabular-nums; }
.eingabe--knapp { min-height: 34px; padding: 5px 8px; }
.eingabe--mehrzeilig { min-height: 0; resize: vertical; line-height: 1.5; }

/* ------------------------------------------------- Auswahl als Schaltflächen */

.wahl { display: flex; flex-wrap: wrap; gap: 6px; }

.wahl__knopf {
  min-height: var(--tippflaeche);
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

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

/* Die gewählte Möglichkeit ist gefüllt — in der Farbe ihres Abschnitts. */
.wahl__knopf--gewaehlt {
  background: var(--farbe);
  border-color: var(--farbe);
  color: var(--auf-farbe);
  font-weight: 600;
}
.wahl__knopf--gewaehlt:hover { color: var(--auf-farbe); filter: brightness(1.08); }

.wahl--knapp .wahl__knopf { min-height: 34px; padding: 4px 10px; font-size: 13px; }

/* ---------------------------------------------------------- Schalter, Haken */

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tippflaeche);
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  cursor: pointer;
  align-self: start;
}

.schalter__lampe {
  width: 34px; height: 20px;
  border-radius: 10px;
  background: var(--linie-stark);
  position: relative;
  transition: background 120ms;
  flex: none;
}

.schalter__lampe::after {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 16px;
  border-radius: 50%;
  background: var(--auf-farbe);
  transition: transform 120ms;
}

.schalter--an { border-color: var(--farbe); font-weight: 600; color: var(--farbe); }
.schalter--an .schalter__lampe { background: var(--farbe); }
.schalter--an .schalter__lampe::after { transform: translateX(14px); }

/* ----------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tippflaeche);
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

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

.knopf--haupt {
  background: var(--empfaenger);
  border-color: var(--empfaenger);
  color: var(--auf-farbe);
  font-weight: 600;
}
.knopf--haupt:hover { color: var(--auf-farbe); filter: brightness(1.08); }

.knopf--klein { min-height: 32px; padding: 5px 10px; font-size: 12px; }

.knopf--weg {
  min-height: 34px;
  width: 34px;
  padding: 0;
  justify-content: center;
  color: var(--text-leise);
  font-size: 18px;
  line-height: 1;
}
.knopf--weg:hover { color: var(--fehler); border-color: var(--fehler); }

/* ------------------------------------------------------------ Vorschläge */

.vorschlaege__huelle { position: relative; }

.vorschlaege {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0; right: 0;
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  box-shadow: var(--schatten-schwebend);
}

.vorschlaege__eintrag {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  min-height: var(--tippflaeche);
  justify-content: center;
}

.vorschlaege__eintrag:hover,
.vorschlaege__eintrag--markiert { background: color-mix(in srgb, var(--farbe) 12%, transparent); }

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

.verweis { color: var(--empfaenger); font-size: 12px; white-space: nowrap; }

/* Ein Verweis, der nirgendwohin führt, sondern einen Schirm öffnet. Er sieht
   aus wie die daneben, ist aber eine Schaltfläche — ein <a> ohne Ziel wäre für
   die Tastatur keines. Die Unterstreichung kommt sonst vom Browser. */
.verweis--knopf {
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------ 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; }

/* ------------------------------------------------------------------- Fuß */

.fuss {
  padding: 16px 20px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-leise);
}

.fuss__nachweis { margin: 0; }
.fuss__leise { opacity: 0.8; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@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; }
}

/* ----------------------------------------------------------------- Schirme */

.schirm {
  border: 0;
  border-radius: var(--rundung);
  padding: 0;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten-schirm);
  max-height: 88vh;
  width: min(96vw, 1100px);
}

.schirm--schmal { width: min(96vw, 720px); }
/* Ältere Browser vererben nichts an `::backdrop`; dann gilt der Ersatzwert. */
.schirm::backdrop { background: var(--schleier, rgb(16 24 32 / 45%)); }

.schirm__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linie);
}

.schirm__titel { font-size: 16px; }

.schirm__inhalt {
  padding: 16px;
  overflow: auto;
  max-height: calc(88vh - 130px);
}

.schirm__fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--linie);
}

/* Innerhalb eines Schirms gilt die Farbe des Empfängerabschnitts. */
.schirm { --farbe: var(--empfaenger); }

/* -------------------------------------------------------------- Masken */

.maske__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.maske__schalter { display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* Die Maske zerfällt in Gruppen; die zweite setzt sich mit einer Linie ab. */
.maske__gruppen { display: flex; flex-direction: column; gap: 20px; }

.maske__gruppe + .maske__gruppe {
  border-top: 1px solid var(--linie);
  padding-top: 20px;
}

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

/* -------------------------------------------------------------- Infoseite */

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

.info__tabelle { border-collapse: collapse; }
.info__tabelle td { padding: 4px 14px 4px 0; vertical-align: baseline; }
.info__taste { white-space: nowrap; }

.info__taste kbd {
  font: 12px var(--schrift);
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--grund);
}

/* ------------------------------------------------------ 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 {
  width: 1px;
  align-self: stretch;
  background: var(--linie);
  margin: 0 4px;
}