/* Kostenhelfer — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort Farben, Maße, Kopfleiste,
 * Felder, Knöpfe, Vorschlagslisten, Reiter, Schirme und Fuß. Hier steht der
 * Grundriss der Maske; wer eine Farbe oder einen Knopf braucht, holt ihn von
 * dort und baut ihn nicht ein zweites Mal.
 */

:root {
  /* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
     Übersicht — derselbe Ton, den `public/icon.svg` trägt. Die Kopfleiste
     greift ihn ab, dazu Abschnittsziffern und geänderte Werte. */
  --ton-app: var(--ton-violett);

  /* Die beiden Seiten, benannt statt erfunden. */
  --klaeger: var(--ton-blau);
  --beklagter: var(--ton-petrol);

  /* Die Breite einer Betragsspalte. */
  --betragsspalte: 96px;
  /* Der Rand links außen: Nummer und Seite einer Leistung, Ziffer eines Abschnitts. */
  --randspalte: 62px;
}

/* ------------------------------------------------------------ Der Grundriss */

/* Kopf, Hauptteil, Fuß — und der Fuß am unteren Rand, auch solange der
   Hauptteil kurz ist. Die Kopfleiste steht (`position: sticky` in den
   Bausteinen) und braucht dafür nichts von hier. */
#anwendung {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Der Fuß rückt mit `margin-top: auto` ohnehin nach unten; der Abstand der
   Bausteine darüber bleibt damit wirkungslos und stört nicht. */
#anwendung > .fuss { margin-top: 0; }

.werkstatt {
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.werkstatt__abschnitte { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------ Das Raster */

/* Sechs Spalten: Felder, Honorar, Barauslagen — links wie verzeichnet,
   rechts wie bestimmt. Die Plätze sind benannt, nicht gezählt. */
.raster {
  display: grid;
  grid-template-columns:
    [v-felder] minmax(0, 1.2fr) [v-honorar] var(--betragsspalte) [v-bar] var(--betragsspalte)
    [b-felder] minmax(0, 0.8fr) [b-honorar] var(--betragsspalte) [b-bar] var(--betragsspalte);
  column-gap: 10px;
}

.zelle { min-width: 0; }
.zelle[hidden] { display: none; }
.zelle--v-felder { grid-column: v-felder; }
.zelle--v-honorar { grid-column: v-honorar; }
.zelle--v-bar { grid-column: v-bar; }
.zelle--b-honorar { grid-column: b-honorar; }
.zelle--b-bar { grid-column: b-bar; }

/* Die rechte Hälfte setzt sich mit einer Linie ab — in jeder Zeile. */
.zelle--b-felder {
  grid-column: b-felder;
  border-left: 1px solid var(--linie);
  padding-left: 12px;
}

.zelle--v-honorar, .zelle--v-bar, .zelle--b-honorar, .zelle--b-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Der Rand steht außerhalb des Rasters, damit er über alle Zeilen eines Blocks
   reicht. Kopf, Leistungen und Fuß tragen ihn gleich breit und mit demselben
   linken Polster — sonst stünden ihre Betragsspalten nicht mehr übereinander. */
.mit-rand { display: flex; align-items: stretch; }
.mit-rand > .raster { flex: 1; min-width: 0; }

.rand {
  flex: none;
  width: var(--randspalte);
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* ------------------------------------------------------------ Kopf der Werkstatt */

/* Reiter und Spaltenköpfe bleiben unter der Kopfleiste stehen. */
.werkstatt__leiste {
  position: sticky;
  top: var(--hoehe-kopfleiste, 61px);
  z-index: 20;
  background: var(--grund);
  padding-top: 12px;
}

/* Die Reiter braucht nur ein schmaler Bildschirm. Die Leiste steht schon in
   `.werkstatt__leiste` und muss nicht ein zweites Mal kleben. */
.werkstatt__reiter { display: none; position: static; padding-top: 0; }

.spaltenkopf {
  padding: 0 14px 6px;
  border-bottom: 1px solid var(--linie-stark);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}
.spaltenkopf .zelle { display: flex; align-items: flex-end; justify-content: flex-end; }
.spaltenkopf .zelle--v-felder, .spaltenkopf .zelle--b-felder { justify-content: flex-start; }
.spaltenkopf__titel { font-size: 13px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }

/* ------------------------------------------------------------ Abschnitt */

.abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}

.abschnitt__kopf {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--linie-stark);
}
.abschnitt--zu .abschnitt__kopf { border-bottom: 0; }
/* Beide Hälften beginnen oben, auch wenn rechts die Quote umbricht. */
.abschnitt__kopf .zelle { align-self: start; }
/* Im Kopf stehen keine Beträge: Beide Hälften nehmen ihre ganze Breite, und
   die Quote hat neben den Feldern Platz für beide Seiten in einer Zeile. */
.abschnitt__kopf .zelle--v-felder { grid-column: v-felder / b-felder; }
.abschnitt__kopf .zelle--b-felder { grid-column: b-felder / -1; }
.abschnitt__kopf .zelle--v-honorar,
.abschnitt__kopf .zelle--v-bar,
.abschnitt__kopf .zelle--b-honorar,
.abschnitt__kopf .zelle--b-bar { display: none; }
/* Rechts stehen Felder und Quote nebeneinander und beginnen oben; links sitzen
   Warnung und Kreuz weiter auf der Unterkante der Felder. */
.abschnitt__kopf .zelle--b-felder .felder { align-items: flex-start; }
/* Im Kopf steht die Ziffer neben ihrem Knopf, nicht darunter — und auf der
   Höhe der Felder, also um die Beschriftung darüber versetzt. */
.abschnitt__kopf .rand { flex-direction: row; align-items: flex-start; gap: 4px; padding-top: 18px; }
/* Zugeklappt steht keine Beschriftung mehr über den Feldern, also auch kein Versatz. */
.abschnitt--zu .abschnitt__kopf .rand { padding-top: 0; }

.abschnitt__titel {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 15px;
}
.abschnitt__ziffer { color: var(--ton-app); font-weight: 700; }
.abschnitt__zeitraum { font-weight: 400; font-size: 12px; color: var(--text-leise); }

/* Der Knopf zum Zuklappen trägt einen Pfeil und keine Maske; kleiner als ein
   Zeichenknopf der Kopfleiste, weil er sich der Überschrift unterordnet. */
.zuklappen { font-size: 13px; }

.felder { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }

/* „fiktiver StW“ steht am rechten Rand der verzeichneten Hälfte, sein Hinweis
   darunter auf eigener Zeile und rechts wie der Schalter, zu dem er gehört. */
/* „fiktiver StW“ steht am äußeren Rand der Bestimmung, auf der Höhe der Felder
   (deren Hälfte oben ausgerichtet ist), sein Hinweis darunter auf eigener
   Zeile. `--farbe` ist nirgends vorbelegt; ohne sie bliebe die Lampe auch
   eingeschaltet grau — wie beim Schalter „Saldiert“ ist es `--primaer`. */
.abschnitt__fiktiv {
  --farbe: var(--primaer);
  margin-left: auto;
  align-self: flex-end;
  min-height: 32px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  /* Fett auch ausgeschaltet: Sonst wüchse der Schalter beim Einschalten um ein
     paar Pixel und spränge auf einem breiten Fenster in die nächste Zeile. */
  font-weight: 600;
}
.abschnitt__fiktiv-hinweis { flex-basis: 100%; justify-content: flex-end; }

.abschnitt__fuss {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--linie-stark);
}
.abschnitt__fuss > .raster { row-gap: 2px; }
.abschnitt__leistungen:empty + .abschnitt__fuss { border-top: 0; }

.summe-titel { font-size: 12px; color: var(--text-leise); margin-left: auto; }
.abschnitt__fuss .zelle--b-felder { display: flex; align-items: center; justify-content: flex-end; }

/* Die Quote steht neben den Feldern, nicht unter ihnen: Der Zuschlag nach oben
   setzt „64 %“ auf die Höhe der Eingabefelder, unter denen der Beschriftung. */
.quote {
  flex: 1 1 240px;
  min-width: 0;
  align-self: flex-start;
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  font-size: 13px;
}
/* Zugeklappt gibt es keine Beschriftung, neben der sie sich ausrichten müsste. */
.abschnitt--zu .quote { padding-top: 0; }
.quote__oq { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Die Quoten beider Seiten stehen unter der Obsiegensquote, nicht neben ihr. */
.quote__seiten { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.quote__seiten[hidden] { display: none; }
.quote__grundlage { color: var(--text-leise); }
.quote__seite { font-variant-numeric: tabular-nums; }
.quote__seite b { margin-right: 4px; }
.quote__seite--klaeger b { color: var(--klaeger); }
.quote__seite--beklagter b { color: var(--beklagter); }

/* ------------------------------------------------------------ Leistung */

.leistung {
  padding: 6px 14px;
  border-top: 1px solid var(--linie);
  /* Die Seite als Balken am Rand, nicht als Fläche. */
  box-shadow: inset 4px 0 0 var(--farbe, var(--linie));
}
.leistung:first-child { border-top: 0; }
/* Jede zweite Leistung leicht getönt, damit das Auge in der Zeile bleibt —
   je Leistung, nicht je Bildschirmzeile: Die Verbindungsgebühr trägt den Ton
   ihrer Klage. Getönt wird die erste, weil sie sonst ungetönt auf den
   ungetönten Kopf des Abschnitts folgte. Beigemischt wird die Textfarbe, also
   hell ein Grau und dunkel eine Aufhellung, ohne eigene Regel für die dunkle
   Fassung. */
.leistung:nth-child(odd) { background: color-mix(in srgb, var(--text) 4%, transparent); }
.leistung--klaeger { --farbe: var(--klaeger); }
.leistung--beklagter { --farbe: var(--beklagter); }
.leistung > .raster { row-gap: 2px; }

.zeile-felder { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 28px; }
.zeile-felder[hidden] { display: none; }

/* Der Trennstrich zwischen Rand und Feldern gehört der Leistung; im Kopf und
   im Fuß steht keiner. */
.leistung .rand { border-right: 1px solid var(--linie); }

.nr {
  font-size: 12px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Ein Knopf für die Seite, der bei jedem Druck umschaltet. Er trägt die Farbe
   seiner Seite als Fläche — schmal genug, dass sie nicht leuchtet. */
.seitenknopf {
  min-width: 46px;
  min-height: 30px;
  padding: 2px 8px;
  border: 1px solid var(--farbe);
  border-radius: 6px;
  background: var(--farbe);
  color: var(--auf-farbe);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.seitenknopf:hover { filter: brightness(1.08); }

/* Enger als die Bausteine: In einer Leistungszeile stehen bis zu fünf Felder
   untereinander, und jede gesparte Zeilenhöhe zählt. Überschrieben wird die
   einzelne Deklaration — `.eingabe--knapp` steht in `gemeinsam/bausteine.css`
   und gilt dort auch für `gh` und `pseudo`. */
.eingabe--knapp { min-height: 28px; padding: 3px 5px; }
/* Ebenso der Punkteknopf am Ende der ersten Zeile einer Leistung. */
.leistung__mehr { min-height: 28px; width: 28px; flex: none; }

/* ------------------------------------------------- Das Menü an einer Leistung */

/* Drei Punkte als Maske, wie jedes Zeichen des Hauses — die Fläche ist
   `currentColor`, die Zeichnung stanzt sie aus. Sie steht hier und nicht in
   `gemeinsam/bausteine.css`, weil bisher allein diese Anwendung und `kveditor`
   sie führen. */
.ikon[data-ikon="mehr"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='5.5' r='1.9' fill='black'/><circle cx='12' cy='12' r='1.9' fill='black'/><circle cx='12' cy='18.5' r='1.9' fill='black'/></svg>"); }

/* Das Menü steht fest im Fenster: Es hängt nicht in der Zeile, sondern wird an
   ihrem Knopf aufgestellt (`ui/leistungsmenue.ts`). */
.menue {
  position: fixed;
  z-index: 30;
  min-width: 176px;
  padding: 4px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  box-shadow: var(--schatten-schwebend);
}
.menue[hidden] { display: none; }

.menue__eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Gemischt mit der eigenen Textfarbe, damit die Fläche in beiden Fassungen
   ruhig bleibt — ein eigener Ton wäre hier erfunden. */
.menue__eintrag:hover,
.menue__eintrag:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); }

/* Entfernen ist rot wie im ganzen Haus — der Text, nicht die Fläche. */
.menue__eintrag--gefahr { color: var(--fehler); }

/* Das Häkchen eines Eintrags, der etwas umschaltet — die Verbindungsgebühr.
   Es steht als Spalte davor, damit die Wörter fluchten, ob gesetzt oder nicht. */
.menue__haken { flex: none; width: 1.1em; }

/* Die Überschrift über den Zielen, sobald es mehr als zwei Abschnitte gibt. */
.menue__gruppe { margin: 6px 10px 2px; font-size: 11px; font-weight: 600; color: var(--text-leise); }

.breite--datum { width: 132px; flex: none; }
.breite--on { width: 56px; flex: none; }
/* Die Bezeichnung nimmt, was die erste Zeile übrig lässt — so bricht sie nicht um. */
.zeile-felder--erste { flex-wrap: nowrap; }
.zeile-felder--erste > .vorschlaege__huelle { flex: 1 1 140px; min-width: 120px; max-width: 280px; }
.breite--bezeichnung { width: 100%; }
.breite--tp { width: 96px; }
.breite--es { width: 96px; }
.breite--dauer { width: 56px; }
.breite--erv { width: 112px; }
.breite--verbindung { width: 96px; }
.breite--vertreter { width: 116px; }
.breite--betrag { width: 128px; }
.breite--parteien { width: 70px; }
.breite--auslagenart { width: 190px; }
.breite--grund { width: 210px; }
.breite--ust { width: 64px; }

/* Ein Eintrag, eine Zeile: so breit wie der längste Name, mindestens wie das
   Feld. Die Bausteine rechnen mit einem Zusatz unter dem Namen und ziehen jeden
   Eintrag auf Tippflächenhöhe — hier genügt eine Zeile. */
.vorschlaege--bezeichnung { right: auto; width: max-content; min-width: 100%; max-width: min(360px, 90vw); }
.vorschlaege--bezeichnung .vorschlaege__eintrag { min-height: 0; padding: 5px 10px; }
.vorschlaege--bezeichnung .vorschlaege__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mit-marke { display: inline-flex; align-items: center; gap: 4px; }
.mit-marke[hidden] { display: none; }
.marke { font-size: 11px; color: var(--text-leise); }
/* Das Kürzel vor dem ersten Feld einer Zeile ist so breit wie das längste und
   steht rechtsbündig; sonst begänne jede Zeile an einer anderen Stelle. Das
   Maß der Dauer („h“) steht mitten in der Zeile und bleibt davon unberührt. */
.zeile-felder > .mit-marke:first-child > .marke { flex: none; width: 38px; text-align: right; }
.marke--andere-tp { font-size: 12px; font-weight: 600; color: var(--ton-app); }

/* Datum und Bezeichnung in der Bestimmungszeile: nebeneinander unnötig, weil
   sie links auf gleicher Höhe stehen — im Reiter „Bestimmt“ unentbehrlich.
   Sichtbar wird sie erst in der Medienabfrage; hier steht allein ihr Aussehen. */
.leistung__kennung {
  display: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--text-leise);
}

/* Ein Wert, den die Bestimmung abweichend von der Kostennote setzt: Rahmen im
   Ton der Anwendung, dazu der Grund stark aufgehellt — ein Rahmen allein ging
   zwischen den übrigen Feldern unter. Gemischt wird mit dem Grund der Felder,
   damit es in der dunklen Fassung gedämpft bleibt. */
.eingabe--geaendert {
  border-color: var(--ton-app);
  box-shadow: inset 0 0 0 1px var(--ton-app);
  background-color: color-mix(in srgb, var(--ton-app) 14%, var(--eingabe-grund));
}
/* Was nicht erfasst ist, sondern gilt — Vorgabe oder Wert der Kostennote. */
.eingabe--vorgabe { color: var(--text-leise); }
.eingabe[aria-invalid] { border-color: var(--fehler); }

.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 16px; }
.betrag--haupt { font-weight: 600; }
.betrag--gestrichen { text-decoration: line-through; color: var(--text-leise); }

/* Was aus einem Feld folgt, steht am rechten Rand seiner Spalte — auf der Höhe
   des Feldes, das es bestimmt. */
.posten { margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--text-leise); text-align: right; }
.posten:empty { display: none; }

.hinweis { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: 12px; color: var(--warnung); }
.hinweis::before { content: "!"; font-weight: 700; }
.hinweis[hidden] { display: none; }

.knopf kbd {
  font: 11px var(--schrift-fest);
  padding: 1px 4px;
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  color: var(--text-leise);
}

/* ------------------------------------------------------------ Entscheidung */

.entscheidung {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 14px 16px 16px;
}
.entscheidung h2 { margin: 0; font-size: 16px; }
.entscheidung__kopf { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.entscheidung__ust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.entscheidung__ust-seite { display: inline-flex; align-items: center; gap: 6px; }
.entscheidung__ust-name { font-size: 12px; font-weight: 600; color: var(--farbe); }
.entscheidung__handgriffe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.entscheidung__text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Neben dem kleinen Knopf so hoch wie er; der Baustein ist für Masken gebaut
   und findet seinen Ton dort, hier nicht. */
.entscheidung__saldiert { --farbe: var(--primaer); min-height: 32px; padding: 4px 12px 4px 8px; font-size: 12px; align-self: center; }

/* --------------------------------------------------------- Textvorschlag */

/* Das Zeichen ist eine Maske wie alle anderen — nur seine Zeichnung steht
   hier und nicht in `gemeinsam/bausteine.css`: Bisher braucht sie allein
   diese Anwendung, und eine Zeile dort zöge die Neuveröffentlichung aller
   übrigen nach sich (so hält es `kveditor` mit „mehr“). Braucht sie eine
   zweite, wandert sie hinüber. */
.ikon[data-ikon="kopieren"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='12' height='12' rx='2'/><path d='M15.5 8.5V5.5a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3'/></svg>"); }

/* Der Vorschlag liest sich wie der spätere Beschluss: volle Breite, etwas Durchschuss. */
.textvorschlag__teil + .textvorschlag__teil { margin-top: 18px; }
.textvorschlag__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.textvorschlag__titel { margin: 0; font-size: 15px; }
.textvorschlag__text .info__text { max-width: none; line-height: 1.55; margin-bottom: 12px; }
/* Das Geschlecht der Vertreter steht über den Vorschlägen — eine Zeile, zwei
   Felder, so hoch wie die Felder der Maske. */
.textvorschlag__vertreter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linie);
}

.textvorschlag__hinweise { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--warnung); }
.textvorschlag__offen { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--linie); }
.textvorschlag__offen-titel { margin: 0 0 4px; font-size: 14px; color: var(--warnung); }
.textvorschlag__offen .marke { margin: 0 0 8px; }
.textvorschlag__offen .info__liste { max-width: none; font-size: 13px; }
/* Die Meldung steht links im Fuß, die Knöpfe bleiben rechts. */
.textvorschlag__meldung { margin: 0 auto 0 0; align-self: center; font-size: 12px; color: var(--text-leise); }
.entscheidung__seiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 18px; }
.entscheidung__seite--klaeger { --farbe: var(--klaeger); }
.entscheidung__seite--beklagter { --farbe: var(--beklagter); }
.entscheidung__titel { margin: 4px 0 6px; font-size: 14px; color: var(--farbe); }

.tabellenhuelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabelle caption { text-align: left; font-weight: 700; padding: 4px 0 6px; color: var(--farbe); }
.tabelle th, .tabelle td { padding: 5px 8px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.tabelle th { font-size: 11px; font-weight: 600; color: var(--text-leise); }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle .leise { color: var(--text-leise); }
.tabelle tfoot td { border-bottom: 0; }
.tabelle tr.summe td { border-top: 1px solid var(--linie-stark); font-weight: 600; }
.tabelle tr.gesamt td { border-top: 2px solid var(--text); font-weight: 700; font-size: 14px; }

/* ------------------------------------------------------------ Schmal */

/* Unter 1180 Pixeln stehen Erfassung und Bestimmung in zwei Reitern: Die
   Zellen der einen Hälfte werden ausgeblendet, die der anderen rücken in drei
   Spalten zusammen. */
@media (max-width: 1180px) {
  .raster {
    grid-template-columns:
      [v-felder b-felder] minmax(0, 1fr) [v-honorar b-honorar] var(--betragsspalte) [v-bar b-bar] var(--betragsspalte);
  }
  .zelle--b-felder { border-left: 0; padding-left: 0; }
  .werkstatt__reiter { display: flex; }
  .werkstatt:not(.werkstatt--bestimmt) .haelfte-b { display: none; }
  .werkstatt--bestimmt .haelfte-v { display: none; }

  /* Ohne die verzeichnete Hälfte fehlte der Bestimmung, worüber sie befindet:
     Datum und Bezeichnung stehen deshalb links in der ersten Zeile, und was
     danach kommt — der Grund, „andere TP“, das noch Fehlende — rückt nach
     rechts. */
  .leistung__kennung:not(:empty) { display: block; margin-right: auto; }
}

/* ------------------------------------------------------- Einstellungen */

/* Die Gruppe der Bausteine ist bloß ein Rahmen; die Felder darin brauchen
   Abstand, sonst stößt jede Beschriftung an die Knöpfe darüber. */
.einstellungen { display: flex; flex-direction: column; gap: 20px; }
.einstellungen .maske__gruppe { display: flex; flex-direction: column; gap: 14px; }
.einstellungen .maske__gruppentitel { margin-bottom: 0; }