/* ==========================================================================
   TraumPause Buchhalter — zentrales Stylesheet
   --------------------------------------------------------------------------
   Gestaltung angelehnt an die TraumPause-Website (Farbwelt, Serifen-Wortmarke,
   ruhige Papierflaeche) und an die Adminzentrale des Gaeste-Agenten (schlichte
   Karten, klare Knoepfe). Mikes Werkzeuge sollen wie eine Familie wirken.

   Grundsaetze dieser Datei:
   - Keine externen Aufrufe: keine Webfonts von fremden Servern, kein CDN,
     kein JavaScript. Die Anwendung laeuft offline auf Mikes Rechner.
   - Schriften sind Systemschriften. 'Playfair Display' und 'Lato' stehen im
     Stapel vorn, weil sie die Marken-Schriften sind — sind sie lokal nicht
     installiert, greift sauber Georgia bzw. Segoe UI. Nichts wird geladen.
   - Nur Optik. Klassennamen, Routen und Formularfelder bleiben, wie sie sind.
   ========================================================================== */

:root {
  /* --- Farbwelt (uebernommen aus traumpause-website/css/style.css) -------- */
  --papier:        #F9F7F4;   /* Seitengrund, warmes Creme                    */
  --karte:         #FFFFFF;   /* Kacheln, Tabellen, Formulare                 */
  --tinte:         #2D2D2D;   /* Fliesstext                                   */
  --leise:         #6B6B6B;   /* Nebentext, Beschriftungen                    */
  --linie:         #E8E2D9;   /* Rahmen und Trennlinien                       */
  --linie-kraeftig:#D8CFC0;   /* Betonte Trennung (Summenzeilen)              */
  --dunkel:        #1C1C1C;   /* Kopfleiste, wie die Navigation der Website   */
  --gold:          #7E5F26;   /* Akzent auf HELLEM Grund (Kontrast >= 4.5:1)  */
  --gold-hell:     #C2A05A;   /* Akzent auf DUNKLEM Grund (Marken-Gold)       */
  --gold-blass:    #D4B57A;   /* Linien und Rahmen mit Goldbezug              */
  --gold-hauch:    #F4EEE1;   /* Goldflaeche, sehr zurueckhaltend             */
  --gruen:         #2F6B4F;   /* Bestaetigung, Vorschlag                      */
  --gruen-hauch:   #EDF3EF;
  --rot:           #A12A20;   /* Fehler und negative Betraege                 */
  --rot-hauch:     #FBEDEB;
  --zebra:         #FCFAF7;   /* jede zweite Tabellenzeile                    */

  /* Altnamen, damit aeltere Inline-Angaben in den Vorlagen weiter greifen. */
  --akzent: var(--gold);

  /* --- Schrift ----------------------------------------------------------- */
  --schrift-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --schrift:       'Lato', 'Segoe UI', system-ui, -apple-system,
                   'Helvetica Neue', Arial, sans-serif;

  /* --- Masse ------------------------------------------------------------- */
  --radius:        8px;
  --radius-gross:  14px;
  --schatten:      0 2px 10px rgba(28, 28, 28, 0.05);
  --schatten-kopf: 0 2px 14px rgba(28, 28, 28, 0.18);
  --breite:        74rem;
}

/* ==========================================================================
   Grundgeruest
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace;
  font-size: 0.88em;
  background: var(--gold-hauch);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.05rem 0.32rem;
  overflow-wrap: anywhere;
}

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

header {
  background: var(--dunkel);
  color: #FFFFFF;
  box-shadow: var(--schatten-kopf);
}

.kopfzeile,
header nav {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.4rem;
}

.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.9rem;
  padding-bottom: 0.55rem;
}

/* Die Wortmarke: Serifenschrift wie auf der Website, darunter der Werkzeugname
   in gesperrten Versalien. (Die Klasse .marke ist anderweitig belegt — kleine
   Kennzeichnungen in Tabellen — deshalb heisst sie hier .wortmarke.) */
.wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  color: #FFFFFF;
  text-decoration: none;
}
.wortmarke:hover { text-decoration: none; }
.wortmarke .haus {
  font-family: var(--schrift-serif);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.wortmarke .werkzeug {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-hell);
  font-weight: 400;
  white-space: nowrap;
}
.kopfzeile .ortsangabe {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Stufe 5d: Wer angemeldet ist, samt Abmelde-Knopf. Steht nur da, wenn der
   Login eingeschaltet ist — lokal bleibt die Kopfzeile unverändert. Der Knopf
   sieht aus wie ein Link: Abmelden ist keine Hauptaktion. */
.kopfzeile .angemeldet {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}
.kopfzeile .angemeldet form { display: inline; }
.kopfzeile .angemeldet .abmelden {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold-hell);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Navigation ----------------------------------------------------------- */

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  padding-bottom: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 0.5rem;
}

header nav a,
header nav span.platzhalter {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

header nav a { color: rgba(255, 255, 255, 0.78); }
header nav a:hover { color: var(--gold-hell); text-decoration: none; }

/* Der aktive Punkt traegt den Goldstrich — auf einen Blick erkennbar. */
header nav a.aktiv { color: var(--gold-hell); }
header nav a.aktiv::after,
header nav a:hover::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold-hell);
}
header nav a:hover:not(.aktiv)::after { background: rgba(194, 160, 90, 0.45); }

/* Platzhalter: eine Stufe, die es noch nicht gibt. Kein Link, kein Goldstrich. */
header nav span.platzhalter {
  color: rgba(255, 255, 255, 0.32);
  cursor: not-allowed;
}

/* --- Inhalt und Fuss ------------------------------------------------------ */

main {
  max-width: var(--breite);
  margin: 1.6rem auto 0;
  padding: 0 1.4rem 2.5rem;
}

h2 {
  font-family: var(--schrift-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 1.9rem 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linie);
}
main > h2:first-child { margin-top: 0.2rem; }

h3 {
  font-family: var(--schrift-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.1rem 0 0.4rem;
}

footer {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.9rem 1.4rem 2rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
}
footer .stand { letter-spacing: 0.06em; text-transform: uppercase; }
footer .nurlokal { color: var(--gold); font-weight: 600; }

/* ==========================================================================
   Kacheln (Kennzahlen)
   ========================================================================== */

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0.5rem 0 1rem;
}

.kachel {
  flex: 1 1 11rem;
  min-width: 11rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 0.85rem 1.05rem;
}

.kachel .wert {
  font-family: var(--schrift-serif);
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.kachel .beschriftung {
  color: var(--leise);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.kachel .beschriftung a { font-weight: 600; }

/* Die Handlungs-Kachel: das, was noch zu tun ist, fuehrt farblich.
   Ausserhalb der Arbeitszeile der Startseite traegt hoechstens EINE Kachel je
   Seite diese Klasse — sonst fuehrt keine mehr. In der Arbeitszeile selbst ist
   jede Kachel eine offene Aufgabe; dort tragen sie alle dieselbe Farbe, und die
   erledigten wechseln nach .erledigt. */
.kachel.handlung {
  background: var(--gold-hauch);
  border-color: var(--gold-blass);
  border-left: 4px solid var(--gold);
}
.kachel.handlung .wert { color: var(--gold); }
.kachel.handlung .beschriftung { color: #5C4718; }
.kachel.handlung .beschriftung a { color: var(--gold); }
.kachel.handlung .beschriftung .leise { color: #7A6438; }

/* Die Gegenkachel: null offene Vorgaenge. Sie wird nicht weggelassen, sondern
   dezent gruen abgehakt — „nichts zu tun" ist auch eine Nachricht. */
.kachel.erledigt {
  background: var(--gruen-hauch);
  border-color: #BFD6C8;
  border-left: 4px solid var(--gruen);
}
.kachel.erledigt .wert { color: var(--gruen); }
.kachel.erledigt .beschriftung { color: #1F4D38; }
.kachel.erledigt .beschriftung a { color: var(--gruen); }
.kachel.erledigt .beschriftung .leise { color: #3F6B57; }

/* ==========================================================================
   Einstiegs-Dashboard (Startseite)
   Zwei Spalten, solange Platz ist. Die Bloecke stehen in der Reihenfolge ihrer
   Wichtigkeit im Quelltext — das Raster fuellt zeilenweise, damit die
   Lesereihenfolge auch einspaltig und im Ausdruck erhalten bleibt.
   ========================================================================== */

.tafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 0 1.8rem;
  align-items: start;
}
.tafel-feld { min-width: 0; }        /* verhindert, dass Tabellen das Raster sprengen */
.tafel-feld > h2:first-child { margin-top: 1.6rem; }
.tafel-feld table { margin-bottom: 0.4rem; }

/* Das Verlaufsdiagramm: server-seitig erzeugtes Inline-SVG (app/diagramm.py).
   Die Linienfarben stehen im SVG als var(--gold) und Geschwister — weil es
   inline in der Seite steht, greifen die Variablen dieser Datei. */
.diagramm {
  display: block;
  width: 100%;
  height: auto;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--leise);
}
.legende li { display: inline-flex; align-items: center; gap: 0.38rem; }
.legende .strich {
  display: inline-block;
  width: 1.1rem;
  height: 3px;
  border-radius: 2px;
}
/* Die drei Farben der BWA-Legende stehen hier und nicht als style="…" in der
   Vorlage: Auf dem Server verbietet die Inhaltsrichtlinie des nginx
   (`style-src 'self'`) Stile in der Seite. Die Namen kommen aus
   diagramm.REIHEN_BWA — dieselben Farben zeichnen dort die Linien im SVG. */
.legende .strich-erloese  { background: var(--gold); }
.legende .strich-aufwand  { background: var(--rot); }
.legende .strich-ergebnis { background: var(--dunkel); }

@media (max-width: 62rem) {
  .tafel { display: block; }
}

/* ==========================================================================
   Tabellen
   ========================================================================== */

table {
  width: 100%;
  margin: 0 0 1.1rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  border-collapse: separate;   /* damit die Ecken wirklich rund bleiben */
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--schatten);
  font-size: 0.88rem;
}

th, td {
  padding: 0.48rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

thead th {
  background: #F3EFE9;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A5145;
  white-space: nowrap;
  border-bottom: 1px solid var(--linie-kraeftig);
}

/* Zeilentitel-Tabellen (Belegdetail): die th-Spalte wird zur Beschriftung. */
tbody th {
  background: #FBF9F6;
  font-weight: 600;
  color: var(--leise);
  white-space: nowrap;
}

tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: #F6F1E9; }
tbody tr:last-child > * { border-bottom: 0; }

/* Zahlen: rechtsbuendig und mit gleich breiten Ziffern, damit Spalten
   untereinander lesbar bleiben. */
td.zahl, th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

/* Summen- und Ergebniszeilen sind abgesetzt.
   (Die tbody-Vorsilbe ist Absicht: nur so gewinnen diese Regeln gegen die
   Zebrastreifen weiter oben, die dieselbe Spezifitaet haetten.) */
tbody tr.summe td, tbody tr.summe th {
  font-weight: 700;
  background: #F1ECE3;
  border-top: 2px solid var(--linie-kraeftig);
}
tbody tr.summe:hover td { background: #EDE7DC; }

tbody tr.ergebnis td, tbody tr.ergebnis th {
  font-weight: 700;
  background: var(--gold-hauch);
  border-top: 2px solid var(--gold-blass);
}
tbody tr.ergebnis th { color: var(--tinte); }
tbody tr.ergebnis:hover td { background: #F0E8D8; }

/* Negative Betraege: rot UND mit Minuszeichen — die Farbe ist nur Zugabe. */
td.minus, tbody tr.summe td.minus, tbody tr.ergebnis td.minus { color: var(--rot); }

/* Startseite, Forderungen & Verbindlichkeiten: unter der Summenzeile stehen
   die einzelnen Debitoren bzw. Kreditoren. Sie sollen die Summe erlaeutern,
   nicht mit ihr konkurrieren — also kleiner, eingerueckt und ohne Zebra. */
tbody tr.posten-konto td {
  font-size: 0.82rem;
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
  background: transparent;
}
tbody tr.posten-konto td:first-child { padding-left: 1.6rem; }
tbody tr.posten-konto:hover td { background: #F6F1E9; }

/* Anlagen: voll abgeschriebene Gueter bleiben sichtbar, treten aber zurueck. */
tbody tr.stillgelegt td { color: var(--leise); background: #F5F3EF; }
tbody tr.stillgelegt:hover td { background: #F1EEE8; }

/* Breite Tabellen (BWA mit Kostenstellenspalten, Splitzeilen) rollen fuer
   sich, statt die ganze Seite in die Breite zu ziehen. Eine Mindestbreite
   bekommen sie bewusst nicht — sie sollen nur rollen, wenn es noetig ist. */
.breit { overflow-x: auto; padding-bottom: 0.2rem; }

/* --- Buchungsaufriss der BWA ----------------------------------------------
   Jede Zahl der BWA ist ein Verweis, der die Buchungen dahinter aufklappt
   (Parameter `auf`, kein JavaScript). Die Verweise duerfen die Tabelle NICHT
   in ein Feld aus blauen Links verwandeln: Sie erben die Textfarbe und tragen
   nur eine gepunktete Linie — sichtbar, wenn man sie sucht, unauffaellig,
   wenn man Zahlen liest. Offen heisst fett. */
a.zahllink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-blass);
}
a.zahllink:hover { color: var(--gold); border-bottom-color: var(--gold); text-decoration: none; }
a.zahllink.offen { font-weight: 700; border-bottom-color: var(--gold); }

/* Das Dreieck sitzt LINKS der Zahl (die Spalte ist rechtsbuendig) und bleibt
   blass — es zeigt den Zustand, es soll nicht mitgelesen werden. */
a.zahllink .pfeil {
  color: var(--gold-blass);
  font-size: 0.7em;
  margin-right: 0.25rem;
}
a.zahllink.offen .pfeil { color: var(--gold); }

/* Die aufgeklappte Unterzeile liegt auf Goldhauch und ist eingerueckt — sie
   erlaeutert die Zeile darueber, statt mit ihr zu konkurrieren (dieselbe
   Ueberlegung wie bei tr.posten-konto). Der Zebrastreifen darf hier nicht
   dazwischenfunken, deshalb die tbody-Vorsilbe. */
tbody tr.aufriss td,
tbody tr.aufriss:hover td {
  background: var(--gold-hauch);
  border-left: 3px solid var(--gold-blass);
  padding: 0.5rem 0.75rem 0.6rem 1.4rem;
}
tbody tr.aufriss .kopf {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: #5C4718;
}
tbody tr.aufriss .kopf .zuklappen { margin-left: 0.5rem; font-size: 0.95em; }

/* Die kleine Tabelle im Aufriss: schmaler, ohne Schatten, ohne eigene
   Rundung — sie ist Teil der Zeile, nicht eine zweite Karte.
   `width: auto` ist wichtig: Die Zelle darueber geht ueber ALLE Spalten der
   BWA: bei vier Wohnungen waere die Liste sonst so breit wie die Tabelle, und
   der Betrag stuende einen halben Meter neben seinem Buchungstext. */
table.aufrissliste {
  width: auto;
  min-width: 34rem;
  max-width: 60rem;
  margin: 0;
  font-size: 0.82rem;
  box-shadow: none;
  background: var(--karte);
}
table.aufrissliste th, table.aufrissliste td {
  padding: 0.3rem 0.6rem;
}
table.aufrissliste thead th { font-size: 0.68rem; }

/* --- Positionstabelle der Rechnungsmaske ---------------------------------
   Die BEZEICHNUNG ist der wichtigste Text der Zeile — dort steht so etwas wie
   „Meissen Altstadt FamilyOase Juli 29 - Aug 02", und das soll man beim Tippen
   ganz lesen koennen. Sie bekommt deshalb den ganzen Rest der Breite, waehrend
   Menge und Einzelpreis nur so breit sind, wie ihre Ziffern brauchen.
   `table-layout: fixed` ist der Schalter, der die Prozentangaben ueberhaupt
   erst wirken laesst: Ohne ihn verteilt der Browser nach Inhalt, und eine
   leere Maske haette fuenf gleich breite Spalten. */
table.positionen { table-layout: fixed; }
table.positionen .spalte-bezeichnung { width: auto; }      /* der ganze Rest */
table.positionen .spalte-menge       { width: 5rem; }
table.positionen .spalte-preis       { width: 8.5rem; }
table.positionen .spalte-konto       { width: 13rem; }
table.positionen .spalte-zahlung     { width: 10rem; }
/* Die Felder fuellen ihre Spalte aus — sonst bliebe die breite Spalte breit
   und das Eingabefeld darin schmal. */
table.positionen td input[type=text],
table.positionen td select { width: 100%; }
/* Menge und Einzelpreis werden von rechts gelesen — wie in jeder anderen
   Zahlenspalte des Buchhalters auch. */
table.positionen td.zahl input[type=text] { text-align: right; }

/* Zweite Zeile je Position: das Beschreibungsfeld (16.08.2026). Es gehoert zur
   Zeile darueber und darf deshalb nicht wie eine eigene Position aussehen —
   also keine Trennlinie dazwischen, kein Zebra, ein kleiner Einzug und eine
   kleine Beschriftung. Auf dem Papier steht der Text spaeter genauso: klein
   und grau unter der Bezeichnung. */
table.positionen tr.beschreibung td,
table.positionen tr.beschreibung:hover td {
  background: transparent;
  border-top: 0;
  padding-top: 0;
  padding-left: 1.1rem;
}
table.positionen tr.beschreibung label {
  display: block;
  font-size: 0.78rem;
  color: var(--leise);
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Karten, Meldungen, Kennzeichnungen
   ========================================================================== */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 0.9rem 1.05rem;
  margin-bottom: 1rem;
}
.karte > *:first-child { margin-top: 0; }
.karte > *:last-child { margin-bottom: 0; }
.karte h3 { margin-top: 0; }

/* Gegliederte Karte: Kopf, Koerper und Fuss mit eigenen Flaechen. */
.karte.gegliedert { padding: 0; overflow: hidden; }

/* Kopf einer Bewegungs-Karte: Datum, Konto, Betrag — deutlich getrennt vom
   Vorschlag darunter, damit man Tatsache und Vorschlag nie verwechselt. */
.karte-kopf {
  background: #FBF9F6;
  border-bottom: 1px solid var(--linie);
  padding: 0.7rem 1.05rem;
}
.karte-kopf h3 { margin: 0; font-size: 1.02rem; }
.karte-kopf .betrag {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
}
.karte-kopf .verwendung { font-size: 0.85rem; margin-top: 0.15rem; }

.karte-koerper { padding: 0.8rem 1.05rem; }
.karte-koerper > *:first-child { margin-top: 0; }
.karte-koerper > *:last-child { margin-bottom: 0; }

.karte-fuss {
  border-top: 1px solid var(--linie);
  background: #FBF9F6;
  padding: 0.6rem 1.05rem;
}
.karte-fuss.knoepfe { margin-top: 0; }

/* Die Zeile, die den Vorschlag benennt: Kennzeichnung plus Regelname. */
.vorschlagszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}

/* Kleine Nachbemerkungen unter einem Block (Regelgrundlage, Ablageort). */
.nachsatz { margin: 0.4rem 0 0; font-size: 0.85rem; }
.vorsatz  { margin: 0 0 0.5rem;  font-size: 0.85rem; }

/* --- Meldungen ------------------------------------------------------------ */

.hinweis, .meldung, .fehler {
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  margin: 0 0 0.9rem;
}
.hinweis {
  background: var(--gold-hauch);
  border: 1px solid var(--gold-blass);
  border-left: 3px solid var(--gold);
  color: #4A3B1C;
}
.hinweis a { text-decoration: underline; }
.meldung {
  background: var(--gruen-hauch);
  border: 1px solid #BFD6C8;
  border-left: 3px solid var(--gruen);
  color: #1F4D38;
}
.fehler {
  background: var(--rot-hauch);
  border: 1px solid #E5BEB8;
  border-left: 3px solid var(--rot);
  color: #7A1F17;
}
.fehler ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
.fehler li { margin: 0.15rem 0; }

.leise { color: var(--leise); }

/* --- Kennzeichnungen (Badges) --------------------------------------------- */

.schild, .marke {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--linie);
  background: #F3EFE9;
  color: var(--leise);
  vertical-align: 0.08em;
  white-space: nowrap;
}
.schild.vorschlag { background: var(--gruen-hauch); border-color: #BFD6C8; color: #245C42; }
.schild.warnung   { background: var(--rot-hauch);   border-color: #E5BEB8; color: #8C2419; }
.schild.ruhe      { background: #F1EFEC;            border-color: var(--linie); color: #5F5A52; }
/* Verdacht ist weder Vorschlag noch Warnung: gold = „hier bitte hinschauen". */
.schild.verdacht  { background: var(--gold-hauch);  border-color: var(--gold-blass); color: #5C4718; }
.marke            { background: var(--gold-hauch);  border-color: var(--gold-blass); color: #5C4718; }

/* ==========================================================================
   Knoepfe und Formulare
   ========================================================================== */

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.7rem;
}
.knoepfe form { display: inline; margin: 0; }

button, .knopf {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.38rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie-kraeftig);
  background: var(--karte);
  color: var(--tinte);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover, .knopf:hover {
  background: var(--gold-hauch);
  border-color: var(--gold-blass);
  color: var(--gold);
  text-decoration: none;
}

/* Der Primaerknopf — pro Kasten hoechstens einer. */
button.haupt, .knopf.haupt {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
}
button.haupt:hover, .knopf.haupt:hover {
  background: #6B5020;
  border-color: #6B5020;
  color: #FFFFFF;
}

/* Der Knopf, der etwas endgueltig wegnimmt — rot und darum selten. Er steht
   ausschliesslich auf einer Bestaetigungsseite, nie in einer Liste: Rot ist
   die Warnung, die Extraseite ist die eigentliche Sicherung. */
button.gefahr, .knopf.gefahr {
  background: var(--rot);
  border-color: var(--rot);
  color: #FFFFFF;
}
button.gefahr:hover, .knopf.gefahr:hover {
  background: #7E1F17;
  border-color: #7E1F17;
  color: #FFFFFF;
}

button:focus-visible, .knopf:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Eingabefelder -------------------------------------------------------- */

/* `password` ist seit dem 16.08.2026 dabei: Anmeldung und Bankabruf
   (/konten-abruf) haben eines — ein unformatiertes Feld mitten in einer
   gestalteten Maske sieht aus wie ein Fehler. */
input[type=text], input[type=password], input[type=date], input[type=file],
select, textarea {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--linie-kraeftig);
  border-radius: 6px;
  background: var(--karte);
  color: var(--tinte);
  max-width: 100%;
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus,
select:focus {
  border-color: var(--gold-blass);
}
input::placeholder { color: #A49C90; }

/* Die Buchungsmaske: eine eigene, warme Arbeitsfläche. Die weiße Zeilen-
   tabelle darin hebt sich dadurch ab, ohne dass ein Rahmen im Rahmen steht. */
.maske {
  background: #FBF9F6;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 1rem 1.05rem;
}
.maske > *:first-child { margin-top: 0; }
.maske > *:last-child { margin-bottom: 0; }
.maske h3 { margin-top: 1.2rem; }

/* Zwei Felder nebeneinander, solange Platz ist. */
.feldpaar { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.feldpaar .feld.weit { flex: 1 1 22rem; }
.feld.weit input[type=text] { width: 100%; }

.feld { margin-bottom: 0.75rem; }
.feld label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.2rem;
}

/* Passwort setzen in der Nutzertabelle (Stufe 7). Die beiden Felder sitzen in
   einer Tabellenzelle und muessen deshalb schmal bleiben — in voller Breite
   schoebe die Spalte „Anmeldung" den Rest der Tabelle aus dem Bild. Sie
   stehen UNTER der Auskunft „Passwort gesetzt/kein Passwort", nicht daneben:
   erst der Zustand, dann der Griff, der ihn aendert. */
form.passwortsetzen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
form.passwortsetzen input[type=password] { width: 8.5rem; }

/* Werkzeugleisten: Filter, Blaetterlinks, Rueckwege. */
.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0.2rem 0 1rem;
  font-size: 0.88rem;
}
.werkzeuge label { color: var(--leise); font-size: 0.8rem; }
/* Als Formular wird die Leiste zur eigenen Flaeche. */
form.werkzeuge {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 0.6rem 0.85rem;
}

/* --- Filterpanel ueber Beleg- und Buchungsliste (BHB-Vorbild) --------------
   Aufgeklappt wird mit <details>/<summary> — reines HTML, kein Skript. Die
   Schnell-Haekchen darueber sind Verweise, die denselben Filter setzen oder
   wieder wegnehmen; die Chips darunter zeigen, was gerade greift. */

.filterpanel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin: 0.2rem 0 0.9rem;
}
.filterpanel > summary {
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  list-style-position: inside;
}
.filterpanel > summary:hover { background: var(--gold-hauch); border-radius: var(--radius); }
.filterpanel[open] > summary { border-bottom: 1px solid var(--linie); border-radius: 0; }
.filterpanel > form { padding: 0.8rem 0.85rem 0.6rem; }
.filterpanel .knoepfe { margin-top: 0.4rem; }
.filterpanel .nachsatz { margin-bottom: 0; }

/* Die Felder als Raster: so viele nebeneinander, wie Platz haben. */
.filterfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1.1rem;
}
.filterfelder .feld.weit { grid-column: span 2; }
.filterfelder input[type=text],
.filterfelder input[type=password],
.filterfelder input[type=date],
.filterfelder select { width: 100%; }

/* Schnell-Haekchen: ein Klick setzt oder loescht den Filter. */
.schnellfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.2rem 0 0.5rem;
}
.schnellfilter .beschriftung,
.chips .beschriftung {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}
.haekchen {
  display: inline-block;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  padding: 0.1rem 0.7rem;
  font-size: 0.82rem;
  color: var(--tinte);
}
.haekchen:hover { border-color: var(--gold-blass); text-decoration: none; }
.haekchen.an {
  background: var(--gold-hauch);
  border-color: var(--gold-blass);
  color: var(--gold);
  font-weight: 700;
}

/* Chips: die aktiven Filter, jeder mit einem Kreuz zum Wegnehmen. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0.9rem;
}
.chip {
  display: inline-block;
  border: 1px solid var(--gold-blass);
  background: var(--gold-hauch);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  font-size: 0.8rem;
  color: var(--gold);
}
.chip:hover { background: var(--karte); text-decoration: none; }
.chip.zuruecksetzen {
  background: var(--karte);
  border-color: var(--linie);
  color: var(--leise);
}

/* Blaettern zwischen Monaten/Jahren mittig auseinandergezogen. */
.blaettern { justify-content: space-between; }
.blaettern .mitte { color: var(--leise); letter-spacing: 0.06em; text-transform: uppercase;
                    font-size: 0.78rem; }

/* --- Buchungsliste -------------------------------------------------------- */

.buchung { margin-bottom: 1.4rem; }
.buchung .breit table { margin-bottom: 0; }
.buchung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.35rem;
  font-family: var(--schrift-serif);
  font-size: 1.02rem;
  font-weight: 600;
}
.buchung-kopf .datum {
  font-family: var(--schrift);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: var(--gold-hauch);
  border: 1px solid var(--gold-blass);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-variant-numeric: tabular-nums;
}
.buchung-kopf .herkunft {
  font-family: var(--schrift);
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--leise);
}
.buchung-kopf .klammer { text-decoration: none; font-size: 0.95rem; }

/* --- Belegvorschau -------------------------------------------------------- */

.belegvorschau {
  width: 100%;
  height: 38rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
}

/* Ein Bildbeleg (JPG/PNG) bekommt dasselbe Fenster wie ein PDF, darf sich
   darin aber nicht verzerren — deshalb einpassen statt strecken. */
img.belegvorschau { object-fit: contain; }

/* ==========================================================================
   Kleine Bildschirme
   ========================================================================== */

@media (max-width: 40rem) {
  body { font-size: 14.5px; }
  main { padding: 0 0.9rem 2rem; }
  .kopfzeile, header nav, footer { padding-left: 0.9rem; padding-right: 0.9rem; }
  header nav { gap: 0.1rem 1rem; }
  .kachel { flex-basis: 100%; }
  table { font-size: 0.84rem; }
  th, td { padding: 0.4rem 0.55rem; }
}

/* ==========================================================================
   Druck — Papier bleibt sauber
   Navigation, Knoepfe und Bedienelemente verschwinden; es bleibt die
   Wortmarke als Briefkopf und die Zahlen in Schwarz auf Weiss.
   ========================================================================== */

@media print {
  body { background: #FFFFFF; color: #000000; font-size: 10.5pt; }

  /* Alles Bedienbare raus. */
  header nav,
  .werkzeuge,
  .knoepfe,
  .filterpanel,
  .schnellfilter,
  .chips,
  .nurbildschirm,
  button,
  .knopf,
  form,
  footer,
  .belegvorschau { display: none !important; }

  /* Der Kopf wird zum schlichten Briefkopf. */
  header { background: none; color: #000000; box-shadow: none;
           border-bottom: 1pt solid #999999; }
  .kopfzeile { padding: 0 0 0.2cm; max-width: none; }
  .wortmarke { color: #000000; }
  .wortmarke .werkzeug, .kopfzeile .ortsangabe { color: #444444; }

  main { max-width: none; margin: 0; padding: 0.3cm 0 0; }

  h2 { font-size: 12pt; page-break-after: avoid; border-bottom: 0.5pt solid #999999; }
  h3 { page-break-after: avoid; }

  table {
    box-shadow: none;
    border: 0.5pt solid #999999;
    page-break-inside: avoid;
    font-size: 9.5pt;
  }
  thead { display: table-header-group; }     /* Kopfzeile auf jeder Seite */
  thead th { background: #EEEEEE; color: #000000; }
  th, td { border-bottom: 0.5pt solid #BBBBBB; }
  tbody tr:nth-child(even) td, tbody tr:hover td { background: none; }
  tbody tr.summe td { background: #EEEEEE; border-top: 1pt solid #666666; }
  tbody tr.ergebnis td { background: #E4E4E4; border-top: 1pt solid #333333; }
  tbody tr.stillgelegt td { color: #666666; background: none; }
  td.minus, tbody tr.summe td.minus, tbody tr.ergebnis td.minus {
    color: #000000; font-weight: 700;
  }

  .kachel, .karte, .hinweis, .meldung, .fehler {
    box-shadow: none;
    border: 0.5pt solid #999999;
    background: none;
    page-break-inside: avoid;
  }
  .kachel.handlung, .kachel.erledigt { border-left: 2pt solid #666666; }
  .kachel .wert, .kachel.handlung .wert, .kachel.handlung .beschriftung,
  .kachel.erledigt .wert, .kachel.erledigt .beschriftung { color: #000000; }
  .karte-kopf, .karte-fuss { background: none; }

  /* Dashboard: auf Papier untereinander, damit kein Block zerschnitten wird. */
  .tafel { display: block; }
  .tafel-feld { page-break-inside: avoid; }
  .diagramm {
    box-shadow: none;
    border: 0.5pt solid #999999;
    background: none;
    page-break-inside: avoid;
    max-width: 16cm;
  }
  .legende { color: #000000; }

  .schild, .marke { border: 0.5pt solid #999999; background: none; color: #000000; }
  .breit { overflow: visible; }
  a { color: #000000; text-decoration: none; }
}