/* Muspelsoft Web-Interface — Design-System
   Echte Muspelhaus-Marke: monochrom (Tusche auf Naturpapier), kondensierte
   Blockschrift für Wortmarke/Titel, lockere Handschrift als Akzent,
   Sidebar-Navigation nach Vorbild der Referenz-Dashboards. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Schoolbell&display=swap');

:root {
  --ink: #0B0B0C;
  --ink-soft: #5C5C5C;
  --paper: #FFFDF7;
  --paper-alt: #F2F0E9;
  --paper-line: #DEDBD0;
  --sidebar: #161615;
  --sidebar-text: #D9D6CC;
  --sidebar-text-dim: #7C7A72;
  --white: #FFFFFF;
  --accent-line: #0B0B0C;

  --font-display: 'Anton', sans-serif;
  --font-script: 'Caveat', cursive;
  --font-hand: 'Schoolbell', cursive;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.4rem;

  --sidebar-width: 220px;

  /* CI-Angleichung an Muspelkassa (21.08.2026): Chrome-Elemente (Buttons,
     generische Cards/Kacheln, Login-Karte) bekommen einen deutlich
     grosszuegigeren Radius als bisher (vorher 3-4px) - bewusst NUR auf
     Chrome, nicht auf Tabellen/Formularfelder (die bleiben bei ihrem
     kleineren, unveraenderten Radius), damit "Dateneingabe/Ledger" optisch
     weiterhin von "Chrome" unterschieden bleibt. */
  --radius-chrome: 10px;
  --radius-chrome-lg: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- App-Rahmen: Sidebar + Inhalt ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
}

.sidebar .wordmark-block {
  padding: 0 var(--space-3) var(--space-4);
}

.sidebar .wordmark-block img {
  width: 100%;
  height: auto;
  filter: invert(1) brightness(1.6);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-nav a {
  position: relative;
  text-decoration: none;
  color: var(--sidebar-text-dim);
  /* CI-Angleichung (21.08.2026): Schoolbell statt IBM Plex Sans 600 fuer die
     Nav-Labels (Abschnitt 6/12 CI-Angleichung-Buchhaltung v2) - laeuft
     optisch kleiner/leichter als die vorherige 600er-Systemschrift, daher
     Groesse angehoben und kein zusaetzliches font-weight/letter-spacing
     (Schoolbell hat nur einen Schnitt, extra Spacing wirkt bei
     Handschrift-Fonts schnell unruhig). */
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: normal;
  padding: 0.7em var(--space-3);
  border-left: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sidebar-nav a:hover {
  color: var(--sidebar-text);
  background: rgba(255,255,255,0.04);
}

.sidebar-nav a.active {
  color: var(--white);
  border-left-color: var(--white);
  /* Dezenter Kreidetextur-Tint (CI-Angleichung 21.08.2026, Abschnitt 6,
     "optional... Deckkraft gering halten"): drei Ebenen von oben nach unten
     - der bisherige helle Aktiv-Wash, ein kraeftiges dunkles Overlay
     (~55% Deckkraft) DARUEBER auf die Textur, damit der weisse Fliesstext
     lesbar bleibt, ganz unten die Textur selbst gekachelt (nicht gestreckt -
     anders als die Dashboard-Kacheln, hier ist es reines Hintergrundrauschen,
     keine Bildkomposition mit eigenem Rahmen). */
  background-image:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/app/assets/textures/kreidetafel.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 240px 240px;
}

/* Tinten-Schwung-Unterstrich (CI-Angleichung 21.08.2026, Abschnitt 5/6):
   ergaenzt den bestehenden border-left, ersetzt ihn nicht - Aktiv-Erkennung
   bleibt dadurch auch ohne den Akzent robust. SVG-Pfad exakt wie im
   Kassa-Vorbild (M0,3 Q14,0 40,2 Q22,6 0,3 Z), Fuellfarbe fix auf den
   aktuellen --ink-/--white-Wert gesetzt (data-URIs koennen keine CSS-Var
   referenzieren) - bei einer Grundfarben-Aenderung hier mitziehen. */
.sidebar-nav a.active::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  bottom: 0.4em;
  width: 34px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0,3 Q14,0 40,2 Q22,6 0,3 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
  pointer-events: none;
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sidebar-text-dim);
  /* CI-Angleichung Nachtrag (21.08.2026, Ruecksprache Heinz): die
     Gruppen-Label ("Erfassen"/"Berichte"/"Stammdaten") sind kein <a> und
     wurden vom .sidebar-nav-a-Selektor oben nicht erfasst - liefen daher
     noch in der alten IBM-Plex-600-Schrift, waehrend alle anderen
     Top-Level-Eintraege schon auf Schoolbell umgestellt waren. Jetzt
     bewusst identisch zu .sidebar-nav a (gleiche Ebene in der Navigation). */
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: normal;
  padding: 0.7em var(--space-3);
  border-left: 3px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.sidebar-nav-group-label:hover {
  color: var(--sidebar-text);
}

.sidebar-nav-group-label::after {
  content: "▸";
  font-size: 1.1em;
  transition: transform 0.15s ease;
}

.sidebar-nav-group.expanded .sidebar-nav-group-label::after {
  transform: rotate(90deg);
}

.sidebar-nav-group:not(.expanded) .sidebar-nav-sub {
  display: none;
}

.sidebar-nav a.sidebar-nav-sub {
  padding-left: calc(var(--space-3) + var(--space-3));
  /* Ruecksprache Heinz (21.08.2026, korrigiert): erst auf 1.75rem gesetzt,
     das war deutlich zu gross - jetzt exakt gleich gross wie die
     Top-Level-Eintraege (.sidebar-nav a, 1.4rem). */
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.85;
}

.sidebar-footer {
  padding: var(--space-3);
}

.logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #3A3A38;
  color: var(--sidebar-text-dim);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.55em 0.9em;
  border-radius: var(--radius-chrome);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.logout-btn:hover {
  border-color: var(--sidebar-text);
  color: var(--white);
}

.content-area {
  flex: 1;
  min-width: 0;
}

main {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* belege.html: Zwei-Spalten-Ansicht (Liste + Dokumentvorschau) braucht mehr
   Breite als die sonst site-weite 1360px-Beschränkung - sonst unschöner
   Zeilenumbruch in der Tabelle bzw. verschenkter Platz. */
main.main--wide {
  max-width: 1800px;
}

.page-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.3rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
  padding-bottom: 0.25em;
}

/* Tinten-Schwung-Akzent unter dem Seitentitel (CI-Angleichung 21.08.2026,
   Abschnitt 5/6) - gleicher SVG-Pfad wie beim aktiven Sidebar-Nav-Punkt,
   nur groesser und in --ink statt --white, da der Titel auf hellem
   Papiergrund steht. */
.page-title::after {
  content: "";
  position: absolute;
  left: 0.1em;
  bottom: 0;
  width: 58px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0,3 Q14,0 40,2 Q22,6 0,3 Z' fill='%230B0B0C'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.9;
}

.page-subtitle {
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
  font-size: 0.98rem;
}

.page-subtitle.script {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--ink);
  margin-top: -0.3em;
}

.back-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: var(--space-2);
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Stempel / Status-Badge (Signatur-Element) ---------- */
/* Angelehnt an den echten Muspelhaus-Papierstempel: monochrom, Tusche-Look. */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border: 1.5px solid var(--ink);
  border-radius: 3px 9px 4px 8px;
  transform: rotate(-2deg);
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
}

.stamp::before {
  font-family: var(--font-body);
  font-size: 0.95em;
}

.stamp--erfasst_klar::before { content: "✓"; }
.stamp--erfasst_unsicher::before { content: "?"; }
.stamp--pending::before { content: "⚠"; }
.stamp--verworfen::before { content: "✕"; }
.stamp--ersetzt::before { content: "→"; }
/* T-60: Kassenbericht-Status - eigene, aber optisch analoge Stempel. */
.stamp--offen::before { content: "?"; }
.stamp--bestaetigt::before { content: "✓"; }
/* T-19: Zahlungsstatus/Abgleichstatus - ebenfalls eigene, optisch analoge Stempel. */
.stamp--bezahlt::before { content: "✓"; }
.stamp--zugeordnet::before { content: "✓"; }
.stamp--ignoriert::before { content: "–"; }

.stamp--erfasst_klar,
.stamp--bestaetigt,
.stamp--bezahlt,
.stamp--zugeordnet {
  background: var(--ink);
  color: var(--paper);
}

.stamp--ignoriert {
  color: var(--ink-soft);
  opacity: 0.7;
}

.stamp--erfasst_unsicher,
.stamp--offen {
  border-style: dashed;
}

.stamp--pending {
  border-style: double;
  border-width: 3px;
}

.stamp--verworfen {
  color: var(--ink-soft);
  text-decoration: line-through;
  opacity: 0.7;
}

/* T-34 (22.07.2026): bewusst OHNE line-through (anders als verworfen) - ein
   ersetzter Beleg war/ist inhaltlich gültig, nur durch eine Korrekturrechnung
   abgelöst, kein Fehler/Ungültigkeit wie bei "verworfen". */
.stamp--ersetzt {
  color: var(--ink-soft);
  font-style: italic;
}

/* T-58: Warn-Badge fuer Kontobewegungen mit bekanntem Lieferanten, aber
   (noch) keinem passenden Beleg - eigener Stempel statt Wiederverwendung von
   stamp--pending/erfasst_unsicher, die bereits eine andere Bedeutung tragen. */
.stamp--moeglicherweise_fehlender_beleg::before { content: "⚠"; }
.stamp--moeglicherweise_fehlender_beleg {
  border-style: double;
  border-width: 3px;
  color: var(--ink);
}

/* T-117 Stufe 2 (12.08.2026): Warn-Badge in der Lieferanten-Liste, wenn die
   letzte VIES-Pruefung eine Warnung ergeben hat (ungueltig ODER technischer
   Fehlschlag - welcher Fall vorliegt, steht im Titel-Tooltip). */
.stamp--vies_warnung::before { content: "⚠"; }
.stamp--vies_warnung {
  border-style: dashed;
  margin-left: var(--space-2);
}

.stamp--hinweis_ausgeschlossen::before { content: "⚠"; }
.stamp--hinweis_ausgeschlossen {
  border-style: dashed;
  margin-left: var(--space-2);
}

/* ---------- Review: Zwei-Spalten-Einzelfall-Ansicht ---------- */

.review-progress {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  /* CI-Angleichung (Ruecksprache Heinz, 22.08.2026, Mockup-Auswahl
     "Variante A"): Maskottchen rechts in dieser Zeile statt im dichteren
     .review-case/.doc-preview-Bereich - Kernfunktion bleibt so unberuehrt. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.review-progress img {
  width: 48px;
  height: auto;
  opacity: 0.9;
  flex-shrink: 0;
}

.review-split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.review-split .doc-preview {
  flex: 1 1 40%;
  min-width: 0;
}

.review-case {
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-chrome);
  padding: var(--space-3);
  max-width: 620px;
}

@media (max-width: 900px) {
  .review-split { flex-direction: column; }
  .review-case { max-width: none; }
}

.review-case .grund {
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.review-case .vorschlag {
  background: var(--paper-alt);
  border-radius: 3px;
  padding: var(--space-2);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.review-case .vorschlag strong { color: var(--ink); }

.rate-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.rate-btn {
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--white);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 0.5em 1.1em;
  border-radius: var(--radius-chrome);
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: center;
}

.rate-btn:hover { background: var(--paper-alt); }

.rate-btn.selected {
  background: var(--ink);
  color: var(--paper);
}

.rate-btn .empfehlung {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2em;
}

/* T-165(b) (16.08.2026, Restumfang): kennzeichnet nicht-blockierende
   Review-Hinweise (ReviewEintrag.blockierend == false, z. B.
   MOEGLICHER_DUPLIKAT_HINWEIS) - bewusst zurueckhaltend/monochrom statt einer
   Warnfarbe, da es sich NICHT um ein Problem handelt, sondern nur klarstellt,
   dass dieser Punkt Monatsabschluss/Beleg-Korrektur nicht blockiert. */
.badge-unverbindlich {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 0.15em 0.5em;
  vertical-align: middle;
}

.choice-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.belege-top-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.belege-list-col {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 400px;
}

.belege-tabelle-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--paper-line);
}

.belege-tabelle-wrap table {
  margin-bottom: 0;
}

.belege-tabelle-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.belege-preview-col {
  flex: 1 1 40%;
  min-width: 0;
  position: sticky;
  top: var(--space-3);
}

@media (max-width: 900px) {
  .belege-top-row {
    flex-direction: column;
  }
  .belege-list-col {
    height: auto;
  }
  .belege-tabelle-wrap {
    overflow-y: visible;
  }
  .belege-preview-col {
    position: static;
    width: 100%;
  }
}

.doc-preview {
  background: var(--paper-alt);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  overflow: auto;
  height: min(70vh, calc(100vh - 180px));
  min-height: 400px;
  margin: 0;
}

@media (max-width: 900px) {
  .doc-preview {
    height: auto;
    min-height: 400px;
    border-radius: 4px;
  }
}

.doc-preview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.doc-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.doc-preview .doc-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-soft);
}

.doc-preview .doc-fallback a {
  color: var(--ink);
  text-decoration: underline;
}

.lieferant-status {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-left: var(--space-2);
}

/* ---------- Karten / Kacheln ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-chrome);
  padding: var(--space-3);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-chrome);
  padding: var(--space-3);
}

.stat-card.stat-card--hero {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
  display: block;
  margin-bottom: 0.3em;
  overflow-wrap: anywhere;
}

/* Dashboard-Umbau (14.08.2026, Ruecksprache Heinz): textige Kachelwerte
   (Datums-/Statuszeilen wie "Letzter Mail-Abruf") brachen vorher in der
   grossen Ziffernschrift mitten im Datum um. Kleinere Schrift, normale
   Umbruchlogik (kein overflow-wrap:anywhere, das auch INNERHALB von
   Woertern/Daten bricht) - zusammengehoerige Stuecke (Datum, "3 Beleg(e)")
   stecken zusaetzlich in .nowrap-Spans, damit nur an sinnvollen Stellen
   umbrochen wird. */
.stat-value--text {
  font-size: 0.98rem;
  line-height: 1.45;
  overflow-wrap: normal;
}

.nowrap {
  white-space: nowrap;
}

/* Mehrzeilige Info-Kacheln (z.B. Offsite-Abgleich getrennt nach
   Sicherungen/Abschluessen): jede Zeile als eigener Block mit dezentem
   Zeilentitel. */
.stat-zeile {
  display: block;
}
.stat-zeile-titel {
  color: var(--ink-soft);
}

.stat-card--hero .stat-value {
  color: var(--white);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.stat-card--hero .stat-label {
  color: #B8B5A8;
}

/* T-119/B-4 (13.08.2026): bewusste Ausnahme vom monochromen Grundprinzip -
   fuer die Eskalationsstufen 2/3 des Monatsabschluss-Warnsystems (echte
   gesetzliche Finanzamt-Frist mit Sanktionsrisiko) echte Ampelfarben statt
   reiner Kontraststufen (Ruecksprache Heinz 13.08.2026, bewusste
   Entscheidung: kritische Warnungen bekommen Farben). Stufe 1 bleibt
   bewusst im normalen, monochromen .stat-card-Stil (dezent). */
.stat-card--stufe2 {
  background: #FBF1DC;
  border-color: #C9971C;
  border-width: 1.5px;
}
.stat-card--stufe2 .stat-label {
  color: #7A5A0C;
}

.stat-card--stufe3 {
  background: #B23A2E;
  border-color: #B23A2E;
}
.stat-card--stufe3 .stat-value,
.stat-card--stufe3 .stat-label {
  color: var(--white);
}

/* T-167 (14.08.2026): klickbare Kennzahl-Zeilen + Aufschluesselungs-Panel. */
.kz-zeile {
  cursor: pointer;
}
.kz-zeile:hover td {
  background: var(--white);
}
.kz-zeile--offen td {
  background: var(--white);
}
.kz-pfeil {
  color: var(--ink-soft);
  font-size: 0.75rem;
}
.kz-detail-tabelle {
  margin-bottom: var(--space-2);
}
.kz-detail-summe td {
  font-weight: 600;
  border-top: 1.5px solid var(--ink);
}

.eskalations-banner {
  border-radius: 4px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.92rem;
}
.eskalations-banner a {
  color: inherit;
  text-decoration: underline;
}

.eskalations-banner--warnung {
  background: #FBF1DC;
  border: 1.5px solid #C9971C;
  color: #5C4508;
}

.eskalations-banner--dringend {
  background: #B23A2E;
  border: 1.5px solid #B23A2E;
  color: var(--white);
}

/* T-141(a) (14.08.2026): Banner fuer fehlgeschlagene Kernladevorgaenge
   (app.js, ladeFehlerAnzeigen()) - bewusst dieselbe Warnfarbe wie
   .eskalations-banner--warnung (wiedererkennbar als "hier stimmt etwas
   nicht", aber ohne die volle Alarmfarbe der gesetzlichen Frist-Stufe 3). */
.lade-fehler-banner {
  border-radius: 4px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.92rem;
  background: #FBF1DC;
  border: 1.5px solid #C9971C;
  color: #5C4508;
}

/* CI-Angleichung (Ruecksprache Heinz, 22.08.2026): Erfolgs-Toast, aktuell
   nur nach einem abgeschlossenen Monatsabschluss (monatsabschluss.js).
   Bewusst monochrom/Papier-Look statt einer neuen Erfolgsfarbe (Abschnitt
   3: "keine neuen Farben") - Abgrenzung zum Fehler-Banner kommt ueber
   Form/Schatten/Maskottchen, nicht ueber Farbe. Maskottchen bewusst groß
   (170px statt der sonst ueblichen 28-140px) - Ruecksprache Heinz: die
   Strichzeichnungen sind fein und bei kleiner Skalierung kaum erkennbar,
   hier darf/soll das Maskottchen dominant sein (einmaliger Erfolgsmoment,
   kein Dauerelement). Verschwindet per Klick oder nach 8s von selbst
   (siehe erfolgsToastAnzeigenFallsVorhanden()). */
.erfolgs-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-chrome-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.erfolgs-toast img {
  width: 170px;
  height: auto;
  flex-shrink: 0;
}

.erfolgs-toast-text {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.2;
}

.erfolgs-toast-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.2em;
}

/* CI-Angleichung (v1, Abschnitt 7): kleines, wiederverwendbares
   Maskottchen-Icon fuer Stellen, an denen der volle .empty-state-Stil
   (140px, zentriert) zu dominant waere - z.B. neben einer einzelnen
   Statuszeile wie dem Lade-Fehler-Banner oder dem Mail-Abrufen-Status. */
.status-icon-klein {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: var(--space-1);
  opacity: 0.85;
}

/* CI-Angleichung (Ruecksprache Heinz, 22.08.2026, Mockup-Auswahl "Variante
   3c"): Maskottchen als "Begleiter" rechts neben einem einzelnen Feld,
   bodenbuendig, in der ueblichen .empty-state-Groesse (140px) - hier 130px,
   da es neben dem Feld weniger Platz hat. Aktuell nur fuer das Notizfeld
   in erfassen.html verwendet, aber bewusst generisch benannt fuer
   Wiederverwendung bei anderen Einzel-Feldern. */
.field--mit-maskottchen {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.field--mit-maskottchen .feld-inhalt {
  flex: 1;
  min-width: 0;
}

.field--mit-maskottchen .feld-maskottchen {
  width: 130px;
  height: auto;
  opacity: 0.9;
  flex-shrink: 0;
}

/* CI-Angleichung (Ruecksprache Heinz, 22.08.2026): Default-Platz fuer ein
   Seiten-Maskottchen, wenn sich sonst keine bessere (kontextuellere) Stelle
   anbietet (z.B. reine Formular-Seiten ohne Empty-State/Listen-Konzept wie
   erfassen.html) - oben rechts im Content-Bereich, aehnlich einem Logo.
   main braucht dafuer position:relative (siehe oben). */
.page-mascot {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  width: 110px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Dashboard Hub-Tafel (CI-Angleichung 21.08.2026, Abschnitt 3) ---------- */
/* Vorbild: Artikelstamm-Hub der Kassa (gui/hub_tafel.py). Tafel-Hintergrund
   UND Kacheln kommen als echte Bild-Assets rein, nichts wird per CSS
   nachgebaut (Ruecksprache Heinz 21.08.2026) - die Tafelgrafik behaelt dabei
   ihr eigenes Seitenverhaeltnis (aspect-ratio exakt wie hub_tafel.png,
   1277x688px), nur die einzelnen Kacheln werden bewusst verzerrt gestreckt
   (background-size: 100% 100%, wie im Dokument Abschnitt 1 vorgegeben).
   Kein Kipp-Effekt (Ruecksprache Heinz: in der Kassa minimal/nicht noetig,
   hier lieber die Tafel gross machen und den Platz ausnutzen) - Tafel bleibt
   deshalb ueber die volle main-Breite (siehe main.main--wide-Prinzip),
   Hoehe ergibt sich automatisch aus aspect-ratio. Anzahl/Position der
   Kacheln ist dynamisch (siehe dashboard.js, positioniereKacheln()) -
   organisch im Kreis um das Maskottchen verteilt, waechst/schrumpft mit der
   Anzahl aktiver Zustaende (Ruecksprache Heinz 21.08.2026, "Kacheln
   dynamisch hinzufuegen/entfernen" statt fixer 5 Positionen). Feinjustierung
   der Positionen (z.B. Eskalationskachel gezielt unten rechts) erst nach
   Sichtkontrolle mit Heinz, siehe Screenshot-Checkpoint. */

.hub-tafel {
  position: relative;
  width: 100%;
  aspect-ratio: 1277 / 688;
  background-image: url("/app/assets/hub_tafel.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: var(--space-4);
}

.hub-tafel-maskottchen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-2deg);
  opacity: 0.87;
  pointer-events: none;
  user-select: none;
}

/* Nachtrag (21.08.2026, 3. Ruecksprache): Seitentitel/Datum und der
   "Mail jetzt abrufen"-Button wandern von oberhalb der Tafel AUF die Tafel
   (oben links als Kreide-Ueberschrift, unten links als Maskottchen-Button)
   - dadurch faellt der Platz darueber komplett weg und die Tafel ruecht
   ganz nach oben (main--wide hat dafuer keinen expliziten Abstand mehr
   vorzuhalten). */
.hub-tafel-titel {
  position: absolute;
  /* Ruecksprache Heinz (21.08.2026, Nachtrag): erster Versuch (4%/5%) sass
     zu dicht am weissen Rahmen - hier bewusst etwas mehr Abstand, damit
     zwischen Rahmen und Schriftzug sichtbar schwarze Tafelflaeche bleibt. */
  left: 6.5%;
  top: 9%;
  text-align: left;
  pointer-events: none;
}

.hub-tafel-titel-haupt {
  /* Ruecksprache Heinz (21.08.2026, Font-Auswahl anhand der 9
     Handschrift-Optionen): Caveat (fett) statt Schoolbell, NUR fuer diesen
     einen Titel-Schriftzug - --font-hand (Schoolbell) bleibt ueberall
     sonst unveraendert (Sidebar-Nav, Kachel-Labels, "Belege abrufen"). */
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--paper);
  margin: 0 0 0.15em;
}

.hub-tafel-titel-datum {
  font-family: var(--font-hand);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  color: var(--paper);
  opacity: 0.82;
  margin: 0;
}

/* Maskottchen-Button (81_drachentoeter.png) ersetzt den bisherigen
   .btn-Button - gleicher Klick-Handler (id="mailAbrufenBtn" unveraendert,
   siehe dashboard.js), nur die Optik ist jetzt "Kreidefigur auf der
   Tafel" statt Formular-Button. */
.hub-tafel-mailbtn {
  position: absolute;
  /* Ruecksprache Heinz (21.08.2026, Nachtrag): naeher an den Rahmen heran,
     sowohl seitlich als auch nach unten (vorher 13%/80% - wirkte zu weit
     von der Ecke entfernt). */
  left: 11%;
  top: 83%;
  transform: translate(-50%, -50%);
  width: 13%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.hub-tafel-mailbtn img {
  width: 68%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: 0.2em;
  transition: transform 0.15s ease;
}

.hub-tafel-mailbtn span {
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  color: var(--paper);
}

.hub-tafel-mailbtn:hover img {
  transform: scale(1.07);
}

.hub-tafel-mailbtn:disabled {
  cursor: default;
  opacity: 0.55;
}

.hub-kacheln-layer {
  position: absolute;
  inset: 0;
  /* Fix (21.08.2026, Ruecksprache Heinz): dieser Layer liegt im HTML NACH
     dem Mail-Abrufen-Button und deckt (obwohl selbst unsichtbar) die
     gesamte Tafelflaeche ab (inset:0) - dadurch fing er, ohne dies hier,
     saemtliche Klicks auf dem darunterliegenden Button ab (der Button war
     dadurch komplett funktionslos, nur noch optisch da). Da keine Kachel
     selbst klickbar/hoverbar sein muss, ist pointer-events:none hier
     unbedenklich - einzelne Kacheln koennten es bei Bedarf spaeter wieder
     gezielt auf sich selbst setzen. */
  pointer-events: none;
}

.hub-kachel {
  position: absolute;
  width: var(--kachel-breite, 15%);
  /* Feste 4:3-Proportion nur als UNTERGRENZE (min-height statt
     aspect-ratio): mehrzeilige Info-Kacheln (z.B. "Letzter
     Offsite-Abgleich" mit zwei Datumszeilen) brauchen bei vielen
     gleichzeitigen Kacheln oft mehr Platz als 4:3 hergibt - mit starrem
     aspect-ratio lief der Text bei jedem Test ueber den Kachelrand hinaus
     in die Nachbarkachel hinein (Screenshot-Test 21.08.2026). Mit
     min-height + height:auto wächst nur die betroffene Kachel, alle
     anderen bleiben bei ihrer 4:3-Groesse. */
  min-height: var(--kachel-hoehe, 120px);
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--kachel-rot, 2deg));
  background-image: var(--kachel-bild);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.45em 0.7em;
  color: var(--paper);
}

/* Mehrzeilige Kacheln (z.B. "Letzter Offsite-Abgleich" mit zwei
   Datumszeilen) bekommen etwas kompakteren Text, damit sie bei vielen
   gleichzeitig aktiven Kacheln nicht unnoetig hoch werden und in die
   naechste Kachel hineinwachsen. */
.hub-kachel .stat-value--text {
  font-size: 0.8rem;
  line-height: 1.25;
}

/* Alle vier verwendeten Kachelfarben (kraeftiges_petrol/ocker/rot,
   warmes_taupe) brauchen laut _KACHELFARBEN_HELL-Regel der Kassa helle
   Schrift - siehe design.py-Kommentar, dort dokumentiert. */
.hub-kachel .stat-value,
.hub-kachel .stat-label {
  color: var(--paper);
}

.hub-kachel .stat-value {
  font-size: clamp(0.95rem, 1.3vw, 1.5rem);
  margin-bottom: 0.15em;
}

.hub-kachel .stat-label {
  font-family: var(--font-hand);
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  line-height: 1.2;
  color: var(--paper);
  letter-spacing: normal;
}

/* Ruecksprache Heinz (21.08.2026): Icon-Versuche (erst in der Kachel,
   dann als eigenes Element neben/rund um die Kacheln) beide verworfen -
   bei 12 dicht belegten Kachelplaetzen gab es keine echte Freiflaeche
   dafuer, ohne Nachbarkacheln zu ueberdecken. Kacheln zeigen jetzt
   bewusst nur noch Wert+Label, kein Icon (siehe dashboard.js,
   erzeugeKachelElement()). */

/* Eskalationskachel Stufe 2/3 (Abschnitt 5): bewusste Ausnahmen vom
   sonstigen Kachel-Stil, damit die Dringlichkeit nicht verwaessert wird -
   kein Schoolbell (bleibt IBM Plex Sans 600, wie der Rest der
   Kernfunktionen), kein Maskottchen/Icon (wird in dashboard.js schlicht
   nicht gesetzt). */
.hub-kachel--eskalation .stat-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  /* Ruecksprache Heinz (21.08.2026): Nutzung ist 100% PC-fokussiert, daher
     bewusst KEIN eigenes Mobile-Fallback-Layout - die Tafel skaliert mit
     dem Fenster einfach mit (aspect-ratio haelt die Proportion), Kacheln
     werden bei sehr schmalen Fenstern zwangslaeufig eng/klein. */
  .hub-kachel .stat-value { font-size: 0.8rem; }
  .hub-kachel .stat-label { font-size: 0.68rem; }
}

.menu-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.menu-kachel {
  display: block;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-chrome);
  padding: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.menu-kachel:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.menu-kachel h3 {
  margin: 0 0 0.3em 0;
  font-size: 1.05rem;
}

.menu-kachel p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Tabellen ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  overflow: hidden;
}

thead th {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding: var(--space-2);
  border-bottom: 2px solid var(--paper-line);
}

tbody td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--paper-line);
  font-size: 0.94rem;
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: var(--paper-alt);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: block;
}

.zahl-spalte {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Filter-Leiste ---------- */

.filter-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--white);
  border: 1px solid var(--paper-line);
  color: var(--ink-soft);
  padding: 0.45em 1em;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- Formulare ---------- */

label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.3em;
  letter-spacing: 0.01em;
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 0.55em 0.7em;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
}

input[readonly] {
  background: var(--paper-alt);
  color: var(--ink-soft);
}

.field { margin-bottom: var(--space-2); }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

textarea { resize: vertical; min-height: 5em; }

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6em 1.3em;
  border-radius: var(--radius-chrome);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--rust {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost {
  background: transparent;
  border-color: var(--paper-line);
  color: var(--ink-soft);
}

.btn-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- Beleg-Detail ---------- */

.detail-panel {
  margin-top: var(--space-3);
  border-top: 3px double var(--paper-line);
  padding-top: var(--space-3);
}

.detail-panel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  margin: var(--space-3) 0 var(--space-2);
}

/* ---------- Kontoauszug: Mehrfachzuordnung (Bugreport Heinz 02.09.2026, 2c) ---------- */

/* Bugreport Heinz 02.09.2026 (2a, Folgefeedback): eigene Ueberschrift pro
   Liste (Belege / Dauerbelege), damit die Trennung auch optisch sofort
   auffaellt statt nur im Text jeder Zeile zu stecken. */
.kb-zuordnen-listen-titel {
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.kb-zuordnen-checkbox-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 14rem;
  overflow-y: auto;
  margin: var(--space-2) 0;
  border: 1px solid var(--paper-line);
  padding: var(--space-2);
}

.kb-zuordnen-checkbox-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Heinz' Feedback 02.09.2026 (Screenshot: Zeilen "durcheinandergewuerfelt"):
   die globale Regel "input, select, textarea { width: 100% }" (siehe
   Abschnitt "Formulare" oben) hat auch auf die Checkbox selbst gewirkt -
   eine auf volle Breite gezerrte Checkbox hat die Zeile auseinandergerissen.
   Hier gezielt zurueckgesetzt, nur fuer die Checkboxen dieser Liste.
   Radiobutton-Variante ergaenzt (Forsetis Funktionswunsch, 03.09.2026,
   web/belege.js::kbZuordnenBereichHtml) - dieselbe Klasse, derselbe
   Breiten-Fehler waere sonst dort erneut aufgetreten. */
.kb-zuordnen-checkbox-zeile input[type="checkbox"],
.kb-zuordnen-checkbox-zeile input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}

.positions-table { margin-bottom: var(--space-2); }

/* ---------- Review-Karten ---------- */

.review-card {
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-chrome);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.review-card .grund { margin: 0 0 var(--space-2); line-height: 1.5; }

.review-card .vorschlag {
  background: var(--paper-alt);
  border-radius: 3px;
  padding: var(--space-2);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.review-card .vorschlag strong { color: var(--ink); }

.review-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.review-meta a {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Leerzustand ---------- */

.empty-state {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  color: var(--ink-soft);
}

.empty-state img {
  width: 140px;
  height: auto;
  margin-bottom: var(--space-2);
  opacity: 0.85;
}

.empty-state .script-line {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--ink);
  display: block;
  margin-top: var(--space-1);
}

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar);
  padding: var(--space-3);
}

.login-card {
  background: var(--paper);
  border-radius: var(--radius-chrome-lg);
  padding: var(--space-4);
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  text-align: center;
}

.login-card .mascot {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto var(--space-3);
  display: block;
}

.login-tagline {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin: -0.5em 0 var(--space-4);
}

.login-error {
  background: var(--paper-alt);
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: 3px;
  padding: var(--space-2);
  font-size: 0.88rem;
  margin-bottom: var(--space-3);
  display: none;
  text-align: left;
}

.login-error.visible { display: block; }

.btn--full { width: 100%; }

.login-card .field { text-align: left; }

/* ---------- Wahl-Weiche (Buchhaltung / Artikelverwaltung) ---------- */
/* T-PV (23.08.2026, Ruecksprache Heinz - "hässlich", zwei grosse Kacheln
   gewuenscht): ersetzt die vorherigen zwei schmalen Buttons im login-card-
   Stil durch zwei gleich grosse, eigenstaendige Kacheln mit je einem
   handverlesenen Maskottchen (CI-Angleichung-Buchhaltung.md, Abschnitt 7 -
   "ein Maskottchen pro Bildschirm" gilt hier pro KACHEL, da jede Kachel
   funktional ihr eigener Einstiegspunkt ist). Bewusst KEIN zusaetzliches
   generisches Kopf-Maskottchen mehr auf dieser Seite (waere ein drittes
   Motiv gleichzeitig) - die Wortmarke traegt stattdessen nur noch Text. */
.wahl-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sidebar);
  padding: var(--space-4) var(--space-3);
}

.wahl-intro {
  text-align: center;
  margin-bottom: var(--space-5);
}

.wahl-wortmarke {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.2em;
}

.wahl-tagline {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--sidebar-text);
  margin: 0;
}

.wahl-kacheln {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.wahl-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-chrome-lg);
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wahl-kachel:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.wahl-kachel-mascot {
  width: 200px;
  height: auto;
  margin-bottom: var(--space-3);
}

.wahl-kachel-titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.35em;
}

.wahl-kachel-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Sidebar-Wechsel-Link (Buchhaltung ⇄ Artikelverwaltung) ---------- */
/* Heinz-Vorgabe (23.08.2026): in beiden Programmteilen ein Link zum
   jeweils anderen Teil - bewusst als eigener Bereich im sidebar-footer
   (oberhalb "Abmelden", per Trennlinie abgesetzt) statt als gewoehnlicher
   Menuepunkt in .sidebar-nav, damit er als Kontextwechsel erkennbar bleibt
   und nicht mit den normalen Seiten des jeweiligen Programmteils verwechselt
   wird. */
.sidebar-wechsel-link {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--sidebar-text-dim);
  text-decoration: none;
  border-top: 1px solid #3A3A38;
  padding-top: var(--space-2);
  margin-bottom: var(--space-2);
  transition: color 0.15s ease;
}

.sidebar-wechsel-link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: var(--space-2);
  }
  .sidebar .wordmark-block { padding: 0 var(--space-2); flex-shrink: 0; }
  .sidebar .wordmark-block img { width: 120px; }
  .sidebar-nav { flex-direction: row; }
  .sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; padding: 0.6em 0.8em; }
  .sidebar-nav a.active { border-left-color: transparent; border-bottom-color: var(--white); }
  .sidebar-footer { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
  .logout-btn { width: auto; }
  .sidebar-wechsel-link { border-top: none; padding-top: 0; margin-bottom: 0; }
  main { padding: var(--space-3) var(--space-2); }
  .wahl-kacheln { flex-direction: column; align-items: center; }
  .wahl-kachel { width: 100%; max-width: 320px; }
  .field-grid { grid-template-columns: 1fr; }
  table, thead, tbody, tr { display: block; }
  thead { display: none; }
  tbody tr { border-bottom: 2px solid var(--paper-line); padding: var(--space-2); }
  tbody td { display: flex; justify-content: space-between; border-bottom: none; padding: 0.3em 0; }
  tbody td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin-right: var(--space-2);
  }
  .amount { text-align: right; }
}