/*
 * Aussehen der Anwendung: ruhig und hell, eine Akzentfarbe, Karten, Betraege
 * gross in Serifenschrift, eine feste Fussleiste mit vier Bereichen und
 * Tippflaechen von mindestens 44 Bildpunkten (Gestaltungsanhang, OP-54).
 *
 * Die Namen und Werte unten stehen nicht zur Wahl: sie sind Zeichen fuer
 * Zeichen die des Anhangs (auftrag/gestaltung-werte.css, "Namen duerfen
 * uebernommen werden, Werte nicht geraten"). Bisher standen hier geschaetzte
 * Farben, die dem Anhang nur aehnlich sahen - darum blieb OP-54 offen.
 * tests/AppAccessTest.php liest den Anhang und vergleicht ihn mit dieser
 * Datei; weicht ein Wert ab, faellt der Gesamtlauf um.
 *
 * Nichts wird nachgeladen: keine Schrift, kein Bild, keine Bibliothek. Die
 * Schriftnamen unten liegen auf dem Geraet selbst; eine Adresse mit
 * Rechnernamen steht in dieser Datei nirgends, und die Selbstpruefung haelt
 * das fest (OfflineBoundaryTest, PwaWebTest).
 */

:root {
  /*
   * Feste helle Farbwerte. Ausdruecklich kein "color-scheme: light dark":
   * sonst faerbte der Browser Felder und Knoepfe nachts selbst um, und die
   * hier gesetzten Werte stuenden gegen Vorgaben, die niemand sieht.
   */
  color-scheme: light;

  --grund: #FAF9F5;
  --flaeche: #FFFFFF;
  --flaeche-ruhig: #F3F1EA;
  --linie: #E5E1D8;
  --linie-kraeftig: #C9C3B5;
  --text: #1C1B19;
  --text-ruhig: #6B675F;

  /* Die eine Akzentfarbe. Alles Antippbare traegt sie, sonst nichts. */
  --akzent: #2F6B57;
  --akzent-dunkel: #255544;
  --akzent-zart: #EAF2EE;
  --akzent-zart-text: #285045;

  /* Achtung: offen, gekuerzt, verwerfen. Nie allein - daneben steht das Wort. */
  --achtung: #B24E2A;
  --achtung-zart: #F7EAE4;
  --achtung-zart-text: #8F3D20;
  --wartet: #B58A2B;

  /*
   * Schriften des Geraets, keine aus dem Netz (Entscheidung Joerg vom 20.09.:
   * eigene Schriftdateien kommen spaeter nach, geladen wird nie von einem
   * fremden Server). Die Serifenschrift traegt Ueberschriften und Betraege:
   * der Betrag ist die Zahl, auf die es ankommt, und hebt sich damit vom
   * uebrigen Text ab, ohne dass etwas blinkt oder farbig wird. "Noto Serif"
   * steht auf Android bereit, Georgia auf Mac und Windows.
   */
  --serif: Georgia, 'Noto Serif', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --betrag-gross: 38px;
  --titel: 20px;
  --abschnitt: 17px;
  --text-gross: 15px;
  --text-klein: 13px;
  --chip: 12px;

  --rand-seite: 20px;
  --luft-karten: 14px;
  --luft-innen: 12px;
  --ecke-karte: 14px;
  --ecke-feld: 12px;
  --tippflaeche: 44px;

  /* Der runde Zurueck-Knopf der Kopfzeile. Der Anhang nennt die 40 Bildpunkte
     im Text und nicht unter seinen Werten; der Name steht deshalb hier. */
  --zurueck: 40px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Unten Platz fuer die feste Fussleiste, sonst deckt sie das Seitenende zu. */
  padding: var(--rand-seite) var(--rand-seite) 6rem;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-gross);
  line-height: 1.4;
  /* 360 Pixel Breite ohne seitliches Schieben: was nicht passt, bricht um.
     Eine lange Rechnungsnummer ohne Leerzeichen bricht notfalls mitten drin.
     "break-word" und nicht "anywhere": beide brechen dasselbe lange Wort um,
     aber "anywhere" setzt zusaetzlich die kleinstmoegliche Breite eines
     Kastens auf ein einziges Zeichen herab. Ueberall, wo eine Spalte ihre
     Breite selbst sucht - ein Flex-Element, ein Gitterfeld, ein "inline-flex"
     mitten im Satz -, nimmt sie dann genau diese Breite an: daraus wurde
     "zuor/dne/n" am Knopf der Bankumsaetze und der Buchstabenturm bei
     "Steht in diesem Bescheid" (Funde Joerg vom 20.09.). "break-word" laesst
     die kleinstmoegliche Breite beim laengsten Wort. */
  overflow-wrap: break-word;
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

/* Ueberschriften in der Serife, ruhig und ohne Sprung in der Groesse. */
h1,
h2 {
  font-family: var(--serif);
  line-height: 1.2;
}

h1 {
  font-size: var(--titel);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--abschnitt);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

ul {
  padding-left: 1.2rem;
  margin: 0;
}

li {
  margin: 0.35rem 0;
}

/*
 * Hinweis (Anhang, Bausteine): ruhige Flaeche, 13 Bildpunkte, ohne Symbol.
 *
 * Bisher war ein Hinweis blosser Fliesstext und ging zwischen den Karten
 * unter. Jetzt hat er eine eigene, ruhige Flaeche - erkennbar als Nebensatz,
 * ohne dass er wie eine Warnung aussieht. Ein Ausrufezeichen oder ein Bildchen
 * gehoert ausdruecklich nicht hinein.
 */
.hinweis {
  padding: var(--luft-innen);
  margin: 0 0 var(--luft-karten);
  background: var(--flaeche-ruhig);
  border-radius: var(--ecke-feld);
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

/*
 * Chip (Anhang, Bausteine): zarte Flaeche, 12 Bildpunkte, rund, mit Wort.
 *
 * "Mit Wort" ist keine Zierde, sondern die Regel des Anhangs: Farbe sagt hier
 * nie etwas allein. Der Chip traegt immer den Text, den er meint - wer Farben
 * nicht unterscheidet, liest "Bankeingang fehlt" genauso.
 */
.chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  background: var(--flaeche-ruhig);
  border-radius: 1rem;
  color: var(--text-ruhig);
  font-size: var(--chip);
  font-weight: 600;
}

.chip.erledigt {
  background: var(--akzent-zart);
  color: var(--akzent-zart-text);
}

.chip.offen {
  background: var(--achtung-zart);
  color: var(--achtung-zart-text);
}

/*
 * Statuspunkt einer Listenzeile (Anhang: "Statuspunkt 10 px links").
 *
 * Er steht unmittelbar vor dem Satz, der den Stand nennt, und nie an dessen
 * Stelle: der Punkt sagt auf einen Blick "das wartet auf dich" oder "da kam
 * noch nichts zurueck", der Satz daneben sagt genau, woran es haengt.
 */
.punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.4rem;
  border-radius: 1rem;
  background: var(--text-ruhig);
  /* Der Punkt ist ein Bild und kein Wort: die Vorlesefunktion ueberspringt
     ihn, weil unmittelbar dahinter steht, was er meint. */
  vertical-align: baseline;
}

/* Du bist dran. */
.punkt.wartet {
  background: var(--wartet);
}

/* Eingereicht, und von dort kam noch nichts. */
.punkt.offen {
  background: var(--achtung);
}

.punkt.erledigt {
  background: var(--akzent);
}

.fussnote {
  margin-top: 2rem;
  font-size: var(--text-klein);
  color: var(--text-ruhig);
}

code {
  font-family: ui-monospace, monospace;
}

a {
  color: var(--akzent-dunkel);
  /* Ein Verweis mitten im Satz bleibt Text. Als "inline-flex" mit fester Hoehe
     waere er ein unnoetig hoher Kasten in der Zeile, der sich seine Breite
     selbst sucht - dieselbe Ursache wie beim Buchstabenturm oben. Etwas Luft
     nach oben und unten laesst ihn trotzdem bequem treffen. */
  display: inline;
  min-height: 0;
  padding: 0.3rem 0;
}

a:hover,
a:focus {
  color: var(--akzent-dunkel);
}

/* Bedienflaechen gross genug fuer den Daumen: was fuer sich steht, bleibt
   daumengross. Die Listeneintraege setzen ihre Hoehe selbst (display: grid). */
button,
.knopf,
.fussleiste a,
.belegoeffnen {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  /* Die 2,75 rem sind die ganze Flaeche: die Luft aus der Regel fuer "a"
     darueber kaeme hier oben drauf. */
  padding: 0;
}

/*
 * Betraege: gross und in Serifenschrift. Das gilt ueberall, wo eine Zahl als
 * Betrag ausgezeichnet ist - in den Arbeitslisten, auf der Rechnung, im
 * Bescheid und im Bankabgleich.
 */
.betrag {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/*
 * Der eine grosse Betrag einer Seite: auf der Rechnung, im Bescheid, am
 * Bankumsatz steht er in den Angaben und ist die Zahl, um die es geht
 * (Anhang: "Betrag gross 38 px"). In den Listen bleibt der Betrag klein -
 * dort stehen viele nebeneinander.
 */
.angaben dd.betrag {
  font-size: var(--betrag-gross);
  line-height: 1.2;
}

/*
 * Kopfzeile (Anhang, Bausteine): "Zurueck-Knopf rund (40 px), daneben der
 * Seitentitel in Serif."
 *
 * Oben die Titelzeile, auf jeder Seite gleich gebaut; darunter, klein und
 * ruhig, wer angemeldet ist, dazu Einstellungen und Abmelden. Der Seitentitel
 * ist die einzige h1 der Seite - eine Seite, die ihn als erste Ueberschrift
 * noch einmal mitbringt, verliert sie in App::seite().
 */
.kopf {
  max-width: 40rem;
  margin: 0 auto 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-karte);
}

.kopf .titelzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tippflaeche);
}

/* Der Seitentitel steht neben dem Knopf und nicht darunter: kein Abstand nach
   unten, und ein langer Titel bricht in der Zeile um statt daneben. */
.kopf h1 {
  margin: 0;
  min-width: 0;
}

/*
 * Der runde Zurueck-Knopf: 40 Bildpunkte, wie der Anhang ihn beschreibt.
 *
 * Die Tippflaeche ist groesser als der sichtbare Kreis: das unsichtbare Feld
 * darum herum (::after) reicht bis auf die 44 Bildpunkte, die am Handy fuer
 * den Daumen gelten. So stehen beide Zahlen des Anhangs nebeneinander, ohne
 * dass der Kreis plump wird.
 */
.zurueck {
  flex: none;
  width: var(--zurueck);
  height: var(--zurueck);
  min-height: var(--zurueck);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 50%;
  color: var(--akzent-dunkel);
  text-decoration: none;
}

.zurueck::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 50%;
}

/* Der Pfeil: ein Linienzug in der Farbe des Textes, nicht geladen. Fuer die
   Vorlesefunktion zaehlt allein "Zurück" am Knopf selbst. */
.zurueck svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Name der angemeldeten Person - nie ihr Rollenbuchstabe. */
.kopf .person {
  margin: 0;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

/* Die zweite Zeile der Kopfzeile: wer angemeldet ist, Einstellungen,
   Abmelden. Sie steht unter der Titelzeile und nicht neben ihr - auf 390
   Bildpunkten waere daneben kein Platz, und der Titel soll oben allein
   stehen. */
.kopf .wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  margin-top: 0.2rem;
}

.kopf form {
  margin: 0;
}

/* Auch der Verweis in der Kopfzeile bleibt daumengross. */
.kopf .wege a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  text-decoration: none;
  font-weight: 600;
}

/* Abmelden ist der zweitrangige Knopf: weisse Flaeche, kraeftige Linie.
   "width: auto" nimmt die volle Breite des Hauptknopfs zurueck - hier steht er
   neben dem Namen und nicht allein auf der Seite. */
.kopf button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--ecke-feld);
  color: var(--akzent-dunkel);
  font-size: var(--text-gross);
}

/*
 * Feste Fussleiste mit vier Bereichen.
 *
 * Am Handy liegt sie dort, wo der Daumen ohnehin ist, und bleibt beim Scrollen
 * stehen. Vier gleich breite Felder, jedes daumengross; die Beschriftungen
 * sind kurz, damit auf 360 Pixeln keines senkrecht umbricht - den ganzen Namen
 * traegt "aria-label" fuer alle, die vorlesen lassen.
 */
.fussleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  /* minmax(0, 1fr): ohne die Null waechst ein Feld mit seinem laengsten Wort
     und schiebt die Leiste seitlich aus dem Bild. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fussleiste a {
  min-height: 3.5rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.3rem 0.2rem;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
  text-align: center;
  text-decoration: none;
}

/* Das Zeichen ueber dem Wort: ein Linienzug in der Farbe des Textes, nicht
   ausgefuellt und nicht geladen. Es steht neben dem Wort, nie an seiner
   Stelle - wer Zeichen nicht deutet, liest weiterhin "Bescheide". */
.fussleiste svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wo man gerade steht, traegt die Akzentfarbe und einen Streifen darueber. */
.fussleiste a[aria-current="page"] {
  color: var(--akzent);
  font-weight: 600;
  box-shadow: inset 0 0.2rem 0 -0.05rem var(--akzent);
}

/*
 * Karten: was zusammengehoert, steht auf einer hellen Flaeche mit Rand.
 * Die Abschnitte der Uebersicht, die Angaben einer Rechnung und jede Meldung
 * sind je eine.
 */
.arbeitsliste,
.angaben,
.vorschlag,
.ergebnis,
.belegansicht,
.geteilt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-karte);
  padding: var(--luft-karten);
  margin: 0 0 var(--luft-karten);
}

/* Formulare: ein Feld je Zeile, alles daumengross. */
.feld {
  display: block;
  margin: 0 0 1rem;
  border: 0;
  padding: 0;
}

.feld > span,
.feld legend {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

/*
 * Eingabefelder nehmen die ganze Zeile ein - Ankreuz- und Auswahlfelder
 * nicht.
 *
 * Die beiden Ausnahmen sind wichtig: ein Ankreuzfeld auf voller Breite
 * drueckt seine Beschriftung daneben auf wenige Bildpunkte zusammen, und die
 * bricht dann Buchstabe fuer Buchstabe senkrecht um - am Handy auf der Seite
 * "Beihilfebescheid erfassen" bei "Steht in diesem Bescheid" (OP-46). Beide
 * bekommen ihre feste Groesse aus der Regel fuer .wahl darunter.
 *
 * Die Schrift im Feld bleibt bei 17 Pixeln: darunter zoomt Android beim
 * Antippen in die Seite hinein (Anhang, Masse).
 */
.feld input:not([type="radio"]):not([type="checkbox"]),
.feld select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--ecke-feld);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
}

.feld input:focus-visible,
.feld select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 0.15rem solid var(--akzent);
  outline-offset: 0.1rem;
}

/* Auswahl A oder E und Ankreuzfelder: grosse Flaeche fuer den Daumen. */
.wahl {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-bottom: 0.25rem;
}

/*
 * Das Kaestchen bleibt klein, die Beschriftung bekommt den Rest der Zeile.
 * "flex: none" haelt das Kaestchen davon ab mitzuwachsen, der Text daneben
 * darf umbrechen - aber als Wort und nicht als Buchstabenturm.
 */
.wahl input {
  width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  padding: 0;
  flex: none;
  accent-color: var(--akzent);
}

.wahl span {
  flex: 1 1 auto;
}

/*
 * Hauptknopf (Anhang, Bausteine): Akzentflaeche, weisse Schrift, volle Breite,
 * 16 Bildpunkte Innenabstand.
 *
 * Volle Breite heisst am Handy: der Daumen trifft ihn, ohne hinzusehen, und
 * zwei Knoepfe untereinander koennen nicht mehr in eine enge Spalte geraten -
 * genau daraus wurde das senkrechte "zuor/dne/n". Der Abstand darunter haelt
 * gestapelte Knoepfe auseinander, damit man nicht den falschen erwischt.
 */
button,
.knopf {
  width: 100%;
  min-width: 0;
  justify-content: center;
  /* 16 Bildpunkte rundum, wie der Anhang es fuer den Hauptknopf nennt. */
  padding: 1rem;
  margin: 0 0 0.5rem;
  background: var(--akzent);
  border: 0;
  border-radius: var(--ecke-feld);
  color: var(--flaeche);
  font-family: inherit;
  font-size: var(--abschnitt);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/*
 * Zweitknopf (Anhang): weisse Flaeche, kraeftige Linie, dunkler Text.
 *
 * Der Anhang laesst je Seite hoechstens einen Hauptknopf zu. Alles Weitere -
 * ein Weg woandershin, ein zweiter Weg durch dasselbe Formular - traegt diese
 * Form: gleich gross und gleich gut zu treffen, aber ohne die Akzentfarbe, die
 * sonst nichts mehr hervorhebt.
 */
.zweitknopf {
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  color: var(--akzent-dunkel);
}

/*
 * Gefaehrlich (verwerfen, loeschen): derselbe Zweitknopf, aber sein Text steht
 * in der Achtung-Farbe. Nicht als Flaeche - eine grosse rote Flaeche zieht das
 * Auge genau auf das, was man am seltensten will.
 */
.zweitknopf.gefahr {
  border-color: var(--achtung);
  color: var(--achtung);
}

.meldung {
  padding: var(--luft-innen);
  margin: 0 0 var(--luft-karten);
  background: var(--akzent-zart);
  border: 1px solid var(--akzent);
  border-radius: var(--ecke-karte);
  color: var(--akzent-zart-text);
}

/* Warnung vor einer Rechnung, die es so schon einmal gibt: die Achtungfarbe,
   und daneben steht immer das Wort - Farbe sagt hier nie etwas allein. */
.warnung {
  background: var(--achtung-zart);
  border-color: var(--achtung);
  border-width: 0.2rem;
  color: var(--achtung-zart-text);
}

.warnung p {
  margin: 0 0 0.5rem;
}

.warnung p:last-child {
  margin-bottom: 0;
}

/* Meldung zu einem einzelnen Feld, direkt darunter. */
.feldfehler {
  margin: -0.75rem 0 1rem;
  padding: 0.4rem 0.6rem;
  border-left: 0.25rem solid var(--achtung);
  color: var(--achtung-zart-text);
  font-weight: 600;
}

.gespeichert {
  margin: 0 0 1rem;
  font-weight: 600;
}

/* Mindestbetrag der Beihilfe (K14). Ist er erreicht, faellt der Hinweis auf:
   er traegt dann die Farbe "wartet auf dich" - und daneben steht das Wort
   ("Einreichen lohnt sich"), denn Farbe sagt hier nie etwas allein. */
.mindestbetrag.erreicht {
  border-width: 0.2rem;
  border-color: var(--wartet);
  font-weight: 600;
}

/* Die drei Arbeitslisten. */
.arbeitsliste {
  margin: 0 0 var(--luft-karten);
}

.erklaerung {
  margin: 0 0 0.25rem;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

/* Im Abschnitt "Personen" steht der Name voran, die Rolle A oder E klein
   darunter - sie erklaert nur, was der Beihilfeantrag braucht. */
.rollenzusatz {
  display: block;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

.summe {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.nichts {
  margin: 0 0 0.5rem;
  color: var(--text-ruhig);
}

/* Liste der erfassten Rechnungen. */
.rechnungsliste {
  list-style: none;
  padding: 0;
}

.rechnungsliste li {
  margin: 0 0 0.5rem;
}

/*
 * "li > a": die Karte selbst, nicht jeder Verweis darin. Vorher traf diese
 * Regel auch ein Wort mitten im Text - das "zuordnen" an einem Kontoumsatz
 * bekam dadurch Gitter, Rahmen, Polsterung und 3,2 rem Mindesthoehe und
 * stand als eigener Kasten in der Zeile; sein Text fiel in die erste Spalte
 * von 2 rem und wurde zu "zuor/dnen" (Fund Joerg, 21.09.2026). Von allen
 * Rechnungslisten der Anwendung hat genau eine einen Verweis im Text, und
 * jede Karte ist ein unmittelbares Kind ihres "li" - die Verschaerfung
 * trifft also nur den einen Fall.
 */
.rechnungsliste li > a {
  display: grid;
  /* minmax(0, 1fr): ohne die Null waechst die Spalte mit ihrem laengsten Wort
     und schiebt die Seite seitlich aus dem Bild. */
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.2rem 0.6rem;
  width: 100%;
  min-height: 3.2rem;
  padding: 0.7rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-karte);
  color: inherit;
  text-decoration: none;
  align-items: start;
}

.rechnungsliste .wer {
  font-weight: 600;
}

.rechnungsliste .wann,
.rechnungsliste .stand {
  grid-column: 2 / -1;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

.rechnungsliste .betrag {
  text-align: right;
  white-space: nowrap;
}

/* Wo der Name der Person steht, braucht es die schmale erste Spalte nicht
   mehr: in 2 rem passte ein "A", aber kein Name. */
.rechnungsliste.namensliste li > a {
  grid-template-columns: minmax(0, 1fr) auto;
}

.namensliste .wann,
.namensliste .stand {
  grid-column: 1 / -1;
}

/* Der Name traegt die Zeile "wem gehoert das": etwas fester als das Datum. */
.namensliste .person {
  color: var(--text);
  font-weight: 600;
}

/*
 * Ausnahme: in der Kontenliste steht in derselben Spalte kein Betrag, sondern
 * die Kontoart ("Girokonto"). In der grossen Serifenschrift saehe das aus wie
 * eine Summe. Richtig waere, dort gar nicht erst "betrag" auszuzeichnen - das
 * steht in templates/bank_transactions.php und templates/bank_import.php und
 * ist je ein Wort; beide Vorlagen sind fuer diesen Schritt nicht freigegeben.
 * Bis dahin nimmt diese Regel die Auszeichnung zurueck, und zwar genau dort,
 * wo eine Zeile zu einem Konto fuehrt.
 */
.rechnungsliste a[href^="/bank/konten/"] .betrag {
  font-family: var(--sans);
  font-size: var(--text-klein);
  font-weight: 400;
  color: var(--text-ruhig);
}

/* Die Bescheidliste hat keine Kennung A/E: eine Spalte weniger. */
.bescheidliste li > a {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bescheidliste .wann,
.bescheidliste .stand {
  grid-column: 1 / -1;
}

/* Bankumsaetze: wie die Rechnungsliste, aber ohne Verweis - ein Umsatz fuehrt
   noch nirgendwohin, solange niemand ihn zugeordnet hat. */
.umsatzliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.6rem;
  width: 100%;
  padding: 0.7rem;
  margin: 0 0 0.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-karte);
  align-items: start;
}

/*
 * Ein Umsatz im Abgleich fuehrt doch irgendwohin - zu seinem Vorschlag -, und
 * steht deshalb in einem Verweis. Der erbt sonst das dreispaltige Gitter der
 * Rechnungsliste, dessen erste Spalte 2 rem misst: dort steht in der
 * Rechnungsliste das "A" oder das "E". Am Umsatz steht dort der Name der
 * Gegenseite, und der fiel in diese 2 rem - aus "REWE" wurde ein
 * Buchstabenturm "RE/WE" (Fund Joerg, 21.09.). Dieselbe Spalte nehmen
 * "bescheidliste" und "namensliste" schon heraus; "umsatzliste" war die
 * einzige Liste mit Verweis, die es nicht tat.
 *
 * "li > a" und nicht "a": gemeint ist die Karte selbst. In der Umsatzliste
 * eines Kontos steht ausserdem ein "zuordnen" mitten in einer Zeile, und das
 * ist ein anderer Fall - der bleibt, wie er war.
 */
.umsatzliste li > a {
  grid-template-columns: minmax(0, 1fr) auto;
}

.umsatzliste .wann,
.umsatzliste .zweck,
.umsatzliste .stand {
  grid-column: 1 / -1;
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

.umsatzliste .stand {
  color: var(--text);
  font-weight: 600;
}

/* Zusammenfassung eines Importlaufs: neue, vorhandene, abgewiesene Zeilen. */
.ergebnis p {
  margin: 0 0 0.5rem;
}

.ergebnis .zahlen {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Zusammenfassung eines Belegs: Trefferquote, Hinweis, Beleg selbst. */
.vorschlag p {
  margin: 0 0 0.5rem;
}

.vorschlag p:last-child {
  margin-bottom: 0;
}

.vorschlag .belegzeile {
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

/* Was der Beleg zu einem einzelnen Feld hergibt, direkt unter dem Feld. */
.vorschlagfeld {
  margin: -0.75rem 0 0.5rem;
  padding: 0.3rem 0.6rem;
  border-left: 0.25rem solid var(--akzent);
  font-size: var(--text-klein);
}

.vorschlagfeld .zustand {
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--chip);
}

.vorschlagfeld.erkannt {
  color: var(--text-ruhig);
}

/* Antippbare Werte, wenn mehrere in Frage kamen: umbrechend und daumengross,
   damit auch drei Vorschlaege auf 360 Pixeln nebeneinander Platz finden. */
.kandidaten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.kandidat {
  /* Ohne diese Zeilen bekaeme jeder Vorschlag die volle Breite des Hauptknopfs
     und stuende allein in seiner Zeile - hier sollen zwei oder drei Werte
     nebeneinander passen, und ein langer Wert darf die Seite nicht seitlich
     hinausschieben. */
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  /* Der Innenabstand des Hauptknopfs machte aus jedem Vorschlag einen Klotz. */
  padding: 0 0.7rem;
  background: var(--flaeche);
  border: 0.15rem solid var(--akzent);
  border-radius: var(--ecke-feld);
  color: var(--akzent-dunkel);
  font-weight: 600;
}

/* Warum kein Vorschlag zustande kam: zu lange gedauert, kein Text im Beleg,
   kein Leseprogramm. Faellt auf, weil danach alle vier Felder leer sind. */
.vorschlag .grund {
  font-weight: 600;
}

/* Der zweite Versuch am selben Beleg: gelesen wird bei jedem Aufruf der
   Pruefseite neu, ein Tippen genuegt also - der Beleg muss nicht noch einmal
   ausgewaehlt werden. Der Knopf steht auf 360 Pixeln in einer eigenen Zeile
   ueber dem Satz, damit der Daumen ihn sicher trifft. */
.nochmal {
  margin: 0 0 0.5rem;
}

.nochmal .knopf {
  min-height: 2.75rem;
  /* Kein Abstand rechts: der Knopf nimmt die volle Breite ein, und ein Rand
     daneben schoebe ihn genau um diesen Betrag aus der Seite hinaus. */
  margin: 0 0 0.5rem;
}

/* Der Beleg selbst auf der Pruefseite (OP-41): das Foto zum Danebenhalten,
   beim PDF der Verweis zum Oeffnen. Das Bild bleibt in der Breite der Seite
   (auch auf 360 Pixeln) und nimmt hoechstens die halbe Hoehe ein - sonst
   muesste man an ihm vorbeiscrollen, um an die Felder zu kommen. */
.belegansicht {
  margin: 0 0 1.5rem;
}

.belegansicht img {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
  margin: 0 auto 0.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--ecke-feld);
  /* Das ganze Blatt bleibt sichtbar, statt an den Raendern abgeschnitten zu
     werden - abgeschnitten koennte genau die Rechnungsnummer fehlen. */
  object-fit: contain;
}

.belegansicht figcaption {
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

.belegoeffnen {
  font-weight: 600;
}

/* Ein ueber "Teilen" angekommener Beleg. Die Zeile steht erst da, wenn das
   Skript die Datei wirklich in das Feld gehaengt hat. */
.geteilt {
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  background: var(--flaeche-ruhig);
  font-weight: 600;
}

/* Angaben auf der Detailseite. */
.angaben {
  margin: 0 0 1.5rem;
}

.angaben dt {
  color: var(--text-ruhig);
  font-size: var(--text-klein);
}

.angaben dd {
  margin: 0 0 0.75rem;
  font-size: var(--abschnitt);
}

.angaben dd:last-child {
  margin-bottom: 0;
}