:root {
  --color-canvas: #faf9f6;
  --color-surface: #ffffff;
  --color-border: #e9e4d9;
  --color-text: #21201c;
  --color-text-muted: #83795f;
  --color-accent: #2f5d4f;
  --color-accent-2: #457c69;
  --color-accent-soft: #e8efe9;
  --color-negative: #a13d2e;
  --color-negative-2: #c0523f;
  --color-negative-soft: #f7ece7;
  --color-warn: #8a6d1f;
  --color-warn-soft: #f6efdc;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(33, 32, 28, 0.05);
  --shadow-md: 0 6px 18px rgba(33, 32, 28, 0.07), 0 1px 2px rgba(33, 32, 28, 0.05);
  --shadow-lg: 0 18px 40px rgba(33, 32, 28, 0.12), 0 2px 6px rgba(33, 32, 28, 0.06);
}

body {
  background:
    radial-gradient(1100px 480px at 18% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(47, 93, 79, 0.06) 0%, rgba(47, 93, 79, 0) 55%),
    var(--color-canvas);
  color: var(--color-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--color-accent); transition: color .15s ease; }
a:hover { color: var(--color-text); }

/* ------------------------------------------------------------ Sidebar -- */
/* position:fixed statt sticky: vermeidet einen Browser-Bug, bei dem der
   Fokus auf einem Element in einer sticky Sidebar die ganze Seite verscrollt. */
.app-shell { min-height: 100vh; }

.app-sidebar {
  width: 252px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 1.15rem .9rem;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 50;
  transition: transform .2s ease;
}

.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .5rem; margin-bottom: .6rem; }
.sidebar-brand {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0;
}
.sidebar-collapse-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: .85rem;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar-collapse-btn:hover { background: var(--color-canvas); color: var(--color-text); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-right: .55rem;
  background: linear-gradient(150deg, var(--color-accent-2), var(--color-accent) 65%, #1f3f34);
  color: #fdfdfb;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 4px 10px rgba(47, 93, 79, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex: none;
}
.brand-word { font-size: 1.08rem; }

.sidebar-suche {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  margin: 0 .3rem .8rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: .85rem;
}
.sidebar-suche input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: .85rem;
  color: var(--color-text);
  min-width: 0;
}
.sidebar-suche input::placeholder { color: var(--color-text-muted); }

.sidebar-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar-link i:not(.sidebar-chevron) { font-size: 1rem; width: 1.15rem; text-align: center; flex: none; color: inherit; }
.sidebar-link:hover { background: var(--color-canvas); color: var(--color-text); }
.sidebar-link.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }

.sidebar-group-toggle .sidebar-chevron { margin-left: auto; font-size: .72rem; transition: transform .15s ease; }
.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }

.sidebar-submenu { display: flex; flex-direction: column; gap: .1rem; padding: .1rem 0 .3rem 2rem; }
.sidebar-sublink {
  display: block;
  padding: .42rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: .87rem;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar-sublink:hover { background: var(--color-canvas); color: var(--color-text); }
.sidebar-sublink.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }

.sidebar-bottom-group { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; padding-top: 1rem; }
.sidebar-mandant { position: relative; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--color-border); }
.sidebar-mandant .dropdown-menu {
  position: absolute;
  bottom: calc(100% + .4rem);
  top: auto;
  left: 0;
  right: 0;
  margin: 0;
}
.sidebar-mandant-toggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  font-size: .86rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .12s ease;
}
.sidebar-mandant-toggle:hover { background: var(--color-canvas); }
.sidebar-mandant-toggle i:first-child { color: var(--color-text-muted); flex: none; }
.sidebar-mandant-toggle i.bi-chevron-expand { margin-left: auto; font-size: .75rem; color: var(--color-text-muted); flex: none; }
.sidebar-mandant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; flex: 1 1 auto; min-width: 0; }
.sidebar-mandant .dropdown-menu { width: 100%; min-width: 100%; }

.app-main { margin-left: 252px; min-width: 0; transition: margin-left .2s ease; }

.sidebar-mobile-toggle {
  display: none;
  position: fixed;
  top: .7rem;
  left: .7rem;
  z-index: 200;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 1.1rem;
  color: var(--color-text);
}

/* --------------------------------------------------- Bottom-Tabbar (Handy) --
   Ersetzt unter 768px das Hamburger-Menue durch eine feste Tab-Leiste unten
   (wie WhatsApp/Instagram) -- deutlich intuitiver auf dem Handy als ein
   verstecktes Seitenmenue. "Uploads" und "Mehr" oeffnen je ein Bottom-Sheet
   (siehe .bottom-sheet unten) statt zu navigieren. Ab 768px (Tablet/
   halbierter Desktop-Bildschirm) bleibt es beim bisherigen Hamburger+
   Sidebar-Verhalten, das dort schon gut funktioniert. */
.bottom-tabbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 190;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px rgba(33, 32, 28, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .85rem .25rem .7rem;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
}
.bottom-tab i { font-size: 1.45rem; }
.bottom-tab.active { color: var(--color-accent); }
.bottom-tab:active { background: var(--color-canvas); }

/* ----------------------------------------------- Bottom-Sheet (Handy) --
   Von unten hochfahrendes Panel, ueber volle Breite -- fuer "Uploads" (kurz,
   nur 5 Links, hoehe passt sich dem Inhalt an) und "Mehr" (laenger, deshalb
   zusaetzlich .bottom-sheet-gross mit Hoehen-Deckel + Scroll-Bereich). */
.bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 32, 28, 0.4);
  z-index: 195;
}
.bottom-sheet-backdrop.is-open { display: block; }
.bottom-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 196;
  background: var(--color-surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(33, 32, 28, 0.18);
  padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
  transition: transform .2s ease;
  touch-action: none;
}
.bottom-sheet.is-open { display: block; }
.bottom-sheet.is-dragging { transition: none; }
/* Griff zum Zuziehen -- per Wischen nach unten (Pointer Events, siehe
   app.js) oder als einfacher Tap, falls Wischen umstaendlich ist (Nutzer-
   Wunsch: "zur Not oben einfach ein Pfeil nach unten"). Bewusst grosszuegige
   Hoehe (min. 44px) als Tap-/Wisch-Ziel, nicht nur der schmale graue Strich. */
.bottom-sheet-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  min-height: 2.5rem;
  border: none;
  background: none;
  padding: .2rem 0 .3rem;
  margin: -.3rem 0 .2rem;
  cursor: grab;
}
.bottom-sheet-handle-strich {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}
.bottom-sheet-handle i { color: var(--color-text-muted); font-size: .95rem; }
.bottom-sheet-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .2rem;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}
.bottom-sheet-item:last-child { border-bottom: none; }
.bottom-sheet-item i { color: var(--color-accent); font-size: 1.1rem; width: 1.3rem; text-align: center; }
.bottom-sheet-item:active { background: var(--color-canvas); }

.bottom-sheet-gross {
  max-height: 50vh;
  display: none;
  flex-direction: column;
}
.bottom-sheet-gross.is-open { display: flex; }
.bottom-sheet-scroll { overflow-y: auto; }
.bottom-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}
.bottom-sheet-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .85rem .25rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
}
.bottom-sheet-grid-item i { font-size: 1.4rem; color: var(--color-accent); }
.bottom-sheet-grid-item:active { background: var(--color-canvas); }
.bottom-sheet-footer {
  border-top: 1px solid var(--color-border);
  margin-top: .5rem;
  padding-top: .5rem;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    z-index: 150;
    width: 270px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-mobile-toggle { display: flex; }
  body.sidebar-open .sidebar-mobile-toggle { display: none; }
  .app-main { margin-left: 0; }
  .app-main .container-fluid { padding-top: .7rem !important; padding-left: 3.75rem !important; }
  .app-main .container-fluid > h4:first-child,
  .app-main .container-fluid > .d-flex:first-child { min-height: 40px; margin-top: 0; display: flex; align-items: center; }
}

/* WICHTIG: zusaetzlich zur Breite auch (hover:none) und (pointer:coarse)
   pruefen -- das trifft NUR auf echte Touch-Geraete (Handy/Tablet) zu, nicht
   auf ein schmal gezogenes Desktop-/Notebook-Browserfenster (Maus/Trackpad
   melden "pointer:fine"). Sonst wuerde die Bottom-Tab-Leiste faelschlich
   auch bei "halbem Bildschirm" am Notebook erscheinen -- genau das soll sie
   NICHT, dort bleibt es beim Hamburger-Menue wie am Desktop. Muss NACH dem
   @media (max-width: 991.98px)-Block oben stehen: beide setzen mit
   !important padding-left auf .app-main .container-fluid, bei gleicher
   Selektor-Spezifitaet gewinnt die spaeter im Stylesheet stehende Regel --
   auf einem echten Handy (das auch <991.98px matched) muss das hier also
   das letzte Wort haben, sonst kommt faelschlich wieder der 3.75rem-Platz
   fuer den (auf Touch ausgeblendeten) Hamburger-Button zurueck. */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .bottom-tabbar { display: flex; }
  /* Der alte schwebende Hamburger-Button (oben links) weicht der neuen
     Tab-Leiste unten -- auf einem echten Touch-Geraet unter 768px. Am
     Notebook (Maus/Trackpad, auch bei schmalem Fenster) bleibt er sichtbar. */
  .sidebar-toggle-schwebend { display: none !important; }
  /* Muss zur tatsaechlichen Bar-Hoehe inkl. Sicherheitsabstand passen (siehe
     .bottom-tabbar/.bottom-tab) -- sonst verschwindet der letzte Seiteninhalt
     dahinter. env(safe-area-inset-bottom) ist besonders als "zum Homescreen
     hinzugefuegte Web-App" relevant (Safari-eigene Leiste faellt weg, dafuer
     reserviert iOS unten Platz fuer die Wischgeste). */
  .app-main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0)); }
  /* Ohne den schwebenden Hamburger-Button (siehe oben) wird der Platz, der
     ihm bisher links reserviert war, nicht mehr gebraucht. */
  .app-main .container-fluid { padding-left: 1.5rem !important; }
}

/* Ab Desktop-Breite kann die Sidebar ebenfalls eingeklappt werden (mehr
   Platz fuer den Inhalt) -- ueber den Chevron-Button im Sidebar-Kopf; zum
   Wiederherstellen erscheint dann derselbe Menü-Button wie auf Mobilgeraeten. */
@media (min-width: 992px) {
  body.sidebar-collapsed .app-shell .app-sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .app-shell .app-main { margin-left: 0; }
  body.sidebar-collapsed .app-shell .app-main .container-fluid { padding-top: .7rem !important; padding-left: 3.75rem !important; }
  body.sidebar-collapsed .app-shell .app-main .container-fluid > h4:first-child,
  body.sidebar-collapsed .app-shell .app-main .container-fluid > .d-flex:first-child { min-height: 40px; margin-top: 0; display: flex; align-items: center; }
  body.sidebar-collapsed .sidebar-mobile-toggle { display: flex; }
}

/* Beschriftungs-Listen (dt/dd als Bootstrap-Grid-Zeile, z.B. Kontakt- oder
   Buchungsdetails) stehen ab Desktop (col-md-3/col-md-9) nebeneinander,
   stapeln auf Mobil aber voll (col-12/col-12) -- bei nebeneinander waeren
   lange deutsche Woerter wie "Verwendungszweck" auf den engen 33% sonst
   mitten im Wort umgebrochen. Ohne eigenen Zeilenabstand wuerden gestapelte
   dt/dd-Paare sonst direkt aneinanderkleben (dl.row hat keinen Y-Gutter). */
@media (max-width: 767.98px) {
  dl.row dt { margin-top: .6rem; font-weight: 600; }
  dl.row dt:first-of-type { margin-top: 0; }
  dl.row dd { margin-bottom: 0; }
}

/* Logo-Groessen-Regler (Einstellungen -- Allgemein): kleine "Papier"-Karte
   zeigt die Logo-Proportionen oben rechts, wie auf den echten Dokumenten --
   bewusst keine pixelgenaue Nachbildung der tatsaechlichen A4-Papiergroesse
   (waere bei 56pt Basishoehe auf einer 297mm-Seite nur ein paar Pixel hoch
   und kaum zu sehen), sondern grosszuegiger skaliert fuer eine gut bedienbare
   Live-Vorschau beim Ziehen des Reglers. */
.logo-groesse-vorschau { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.logo-groesse-seite {
  flex: none;
  width: 140px;
  height: 198px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  padding: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.logo-groesse-seite img { max-width: 116px; object-fit: contain; display: block; }
.logo-groesse-regler { flex: 1 1 200px; min-width: 200px; padding-top: .1rem; }
.logo-groesse-regler .form-range { width: 100%; margin: .35rem 0; }
.logo-groesse-wert { font-weight: 650; font-size: .9rem; color: var(--color-accent); }

.dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
}

/* -------------------------------------------------------------- Cards -- */
.card {
  background: linear-gradient(180deg, #ffffff, #fdfcfa);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: .92rem;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: .95rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ------------------------------------------------------------ Buttons -- */
.btn { border-radius: var(--radius-sm); font-weight: 500; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(165deg, var(--color-accent-2), var(--color-accent) 70%);
  border-color: var(--color-accent);
  box-shadow: 0 6px 16px rgba(47, 93, 79, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(165deg, var(--color-accent-2), #26493d 70%);
  border-color: #24463b;
  box-shadow: 0 8px 20px rgba(47, 93, 79, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.btn-outline-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 93, 79, 0.28);
  transform: translateY(-1px);
}

.btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-border); background: #fff; }
.btn-outline-secondary:hover {
  background: var(--color-canvas);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-outline-danger { color: var(--color-negative); border-color: #e6cec6; background: #fff; }
.btn-outline-danger:hover {
  background: linear-gradient(165deg, var(--color-negative-2), var(--color-negative));
  border-color: var(--color-negative);
  color: #fff;
  box-shadow: 0 6px 16px rgba(161, 61, 46, 0.28);
  transform: translateY(-1px);
}

.btn-outline-success { color: var(--color-accent); border-color: #cfe0d7; background: #fff; }
.btn-check:checked + .btn-outline-success {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.btn-check:checked + .btn-outline-danger {
  background: var(--color-negative-soft);
  border-color: var(--color-negative);
  color: var(--color-negative);
  box-shadow: inset 0 0 0 1px var(--color-negative);
}

.btn-link { color: var(--color-accent); }
.btn-link:hover { color: var(--color-text); }

/* -------------------------------------------------------------- Forms -- */
.form-control, .form-select {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(33, 32, 28, 0.03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.form-label { font-weight: 500; font-size: .86rem; color: var(--color-text-muted); }
.form-text { color: var(--color-text-muted); font-size: .82rem; }

/* ------------------------------------------------------- Custom-Select -- */
select.custom-select-native { display: none; }
.custom-select-wrap { position: relative; }
.custom-select-toggle {
  width: 100%; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.custom-select-toggle:disabled { opacity: .6; cursor: not-allowed; }
.custom-select-menu {
  position: fixed; z-index: 3000; display: none;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; padding: 4px;
}
.custom-select-menu.is-open { display: block; }
.custom-select-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .4rem .6rem; border-radius: var(--radius-sm); font-size: .9rem; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
}
.custom-select-item:hover { background: var(--color-accent-soft); }
.custom-select-item.is-selected { background: var(--color-accent-soft); font-weight: 600; color: var(--color-accent); }
.custom-select-group-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-text-muted); padding: .4rem .6rem .1rem;
}
.custom-select-item.is-hidden { display: none; }
.custom-select-suche {
  position: sticky; top: 0; z-index: 1;
  width: 100%; margin-bottom: 4px; padding: .35rem .55rem;
  font-size: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff;
}
.custom-select-suche:focus { outline: none; border-color: var(--color-accent); }

/* ------------------------------------------------------ Zeitraum-Picker -- */
.zeitraum-picker-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); font-size: .86rem; font-weight: 500;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.zeitraum-picker-toggle:hover { border-color: var(--color-accent-2); }
.zeitraum-picker-toggle:focus, .zeitraum-picker-toggle[aria-expanded="true"] {
  border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); outline: none;
}
.zeitraum-picker-toggle i.bi-calendar3 { color: var(--color-accent); }
.zeitraum-picker-toggle i.bi-chevron-down { font-size: .7rem; color: var(--color-text-muted); }
.zeitraum-picker-panel {
  min-width: 300px; padding: 1rem; border-radius: var(--radius-sm); border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}
.zeitraum-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .9rem; }
.zeitraum-preset {
  padding: .45rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-canvas); color: var(--color-text); font-size: .84rem; text-align: left;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.zeitraum-preset:hover { background: var(--color-accent-soft); border-color: var(--color-accent-2); }
.zeitraum-custom { border-top: 1px solid var(--color-border); padding-top: .8rem; }
.zeitraum-custom-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); font-weight: 600; margin-bottom: .5rem;
}

/* ------------------------------------------------------------ Dashboard-Chart -- */
.chart-summary { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .88rem; color: var(--color-text-muted); }
.chart-summary-item strong { color: var(--color-text); margin-left: .3rem; }
.chart-summary-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; }
.chart-canvas-wrap { position: relative; height: 340px; }

/* --------------------------------------------------- Monat-Filter-Breite -- */
.select-monat { min-width: 9.5rem; }
.select-status { min-width: 8.5rem; }

/* --------------------------------------------------------- KPI-Karten -- */
.kpi-card {
  background: linear-gradient(180deg, #ffffff, #fdfcfa);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-card .kpi-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
.kpi-card { overflow: hidden; }
.kpi-card .kpi-value {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-top: .15rem;
  color: var(--color-text);
}
.kpi-green {
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(47, 93, 79, 0.07), #ffffff 55%);
}
.kpi-green .kpi-value { color: var(--color-accent); }
.kpi-red {
  border-left: 3px solid var(--color-negative);
  background: linear-gradient(135deg, rgba(161, 61, 46, 0.07), #ffffff 55%);
}
.kpi-red .kpi-value { color: var(--color-negative); }
.kpi-blue { border-left: 3px solid var(--color-text-muted); }
.kpi-dark { border-left: 3px solid var(--color-text); }

/* Sechs Kacheln nebeneinander (Dashboard-Kopfzeile) sind bei vollem
   Breitbildschirm zu schmal fuer die Standard-KPI-Schriftgroesse -- groessere
   Betraege wie "34.589,46 €" brechen sonst knapp in eine zweite Zeile um und
   die Kachelreihe wirkt uneinheitlich hoch. Etwas kleinere, garantiert
   einzeilige Schrift nur fuer diese Reihe, der Rest der App behaelt die
   normale .kpi-value-Groesse. */
.kpi-row-kompakt .kpi-value { font-size: 1.4rem; white-space: nowrap; }
.kpi-row-kompakt .kpi-label { font-size: .68rem; letter-spacing: .02em; }

/* -------------------------------------------------------------- Badges -- */
.text-bg-success { background-color: var(--color-accent-soft) !important; color: var(--color-accent) !important; }
.text-bg-danger { background-color: var(--color-negative-soft) !important; color: var(--color-negative) !important; }
.text-bg-primary { background-color: var(--color-accent-soft) !important; color: var(--color-accent) !important; }
.text-bg-secondary { background-color: #f1efe6 !important; color: var(--color-text-muted) !important; }
.text-bg-warning { background-color: var(--color-warn-soft) !important; color: var(--color-warn) !important; }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; }

/* ------------------------------------------------------------- Tabellen -- */
.table thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.table td, .table th { border-color: var(--color-border); vertical-align: middle; }
.table > :not(caption) > * > * { background: transparent; }
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background-color: rgba(47, 93, 79, 0.035); }
.zeile-klickbar { cursor: pointer; }
.zeile-klickbar:hover { background-color: rgba(47, 93, 79, 0.07); }

/* Auf schmalen Bildschirmen (Tablet-Breite, halbierter Desktop-Bildschirm)
   sollen die vielspaltigen Listen-Tabellen (Belege, Rechnungen, Kontakte,
   Baustellen, ...) horizontal scrollen (siehe .table-responsive-Wrapper in
   den Templates), statt dass Bootstrap jede Spalte auf 100% Container-
   breite zusammenquetscht -- das liess z.B. Firmennamen/Betraege in
   winzigen Spalten mehrzeilig umbrechen und Zeilen unleserlich hoch werden.
   .kette-tabelle hat mit ihrer eigenen Karten-Ansicht unter 768px (siehe
   unten) bereits eine bessere Loesung und wird hier bewusst ausgenommen.
   .form-text/.text-wrap sind die bewussten Ausnahmen fuer Freitext (z.B.
   Adressen, Hinweise), der weiterhin normal umbrechen soll. */
.table-responsive > .table:not(.kette-tabelle) th,
.table-responsive > .table:not(.kette-tabelle) td {
  white-space: nowrap;
}
.table-responsive > .table:not(.kette-tabelle) .form-text,
.table-responsive > .table:not(.kette-tabelle) .text-wrap {
  white-space: normal;
}

/* Fuer einzelne Spalten mit langem Freitext (Verwendungszweck, Notizen,
   Bezeichnungen ...), die sonst die ganze Tabelle unnoetig breit ziehen wuerden
   und die Aktions-Icons/Buttons rechts weit aus dem Blickfeld schieben. Zeigt
   den vollen Text als Tooltip (title-Attribut am Element setzen). */
.zelle-abschneiden {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------- Positionen-Kettentabelle -- */
.kette-tabelle th i { color: var(--color-text-muted); }
.kette-tabelle th:first-child, .kette-tabelle td:first-child { min-width: 260px; max-width: 420px; }
.kette-tabelle td.kette-zelle {
  border-left: 1px solid var(--color-border);
  padding: .7rem .85rem;
  min-width: 190px;
}
.kette-patch { font-size: .7rem; padding: .3rem .55rem; }
.kette-patch i { font-size: .7rem; margin-right: .15rem; }
.kette-werte { margin-top: .35rem; font-size: .92rem; }
.kette-quellen { margin-top: .3rem; display: flex; flex-direction: column; gap: .2rem; align-items: flex-end; }
.kette-quelle { display: flex; align-items: center; gap: .4rem; }
.kette-doklink {
  font-size: .78rem;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.kette-doklink i { font-size: .68rem; }
.kette-editlink { max-width: none; flex-shrink: 0; }
.epz-geloescht { display: none !important; }

/* Unter 768px wird die Kettentabelle (Bezeichnung + variable Anzahl Stufen-
   Spalten) statt horizontal scrollbar auf gestapelte Karten je Position
   umgestellt -- reines CSS, keine Aenderung an der Tabellenstruktur selbst
   noetig. data-label auf jeder .kette-zelle liefert die Stufen-Ueberschrift,
   die sonst im (hier ausgeblendeten) thead stehen wuerde. */
@media (max-width: 767.98px) {
  .kette-tabelle, .kette-tabelle tbody, .kette-tabelle tr, .kette-tabelle td {
    display: block;
    width: 100%;
  }
  .kette-tabelle thead { display: none; }
  .kette-tabelle tr.epz-zeile {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    margin-bottom: .75rem;
  }
  .kette-tabelle td.kette-bezeichnung {
    font-weight: 600;
    padding: 0 0 .5rem;
  }
  .kette-tabelle td.kette-zelle {
    text-align: left !important;
    border-left: none;
    border-top: 1px dashed var(--color-border);
    padding: .6rem 0 0;
    min-width: 0;
  }
  .kette-tabelle td.kette-zelle::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--color-text-muted);
    margin-bottom: .3rem;
  }
  .kette-tabelle .kette-quellen { align-items: flex-start; }
  .kette-tabelle .kette-doklink { max-width: none; }
}

/* Generische Karten-Ansicht fuer Listen-Tabellen (Belege, Rechnungen,
   Kontakte, Baustellen, Produkte, Bank, Anlagevermoegen, ...) unter 768px --
   statt der horizontal scrollbaren Tabelle (die auf dem Handy nur mit viel
   Wischen nutzbar ist) eine Karte pro Zeile mit Feld-Beschriftung. Tabelle
   dafuer nur mit der Klasse "tabelle-karten" versehen; die data-label-
   Attribute je Zelle setzt app.js automatisch aus der thead-Kopfzeile, keine
   Aenderung an jeder einzelnen <td> noetig. Die .zelle-abschneiden-Kuerzung
   (fuer die Desktop-Tabellenansicht gedacht) wird hier bewusst wieder
   aufgehoben -- in der Karte ist Platz fuer den vollen Text. */
@media (max-width: 767.98px) {
  .tabelle-karten, .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td {
    display: block;
    width: 100%;
  }
  .tabelle-karten thead { display: none; }
  .tabelle-karten tbody tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    margin-bottom: .75rem;
    background: var(--color-surface);
  }
  .tabelle-karten tbody tr:last-child { margin-bottom: 0; }
  .tabelle-karten td {
    text-align: left !important;
    border: none !important;
    padding: .35rem 0 !important;
    white-space: normal !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }
  .tabelle-karten td:empty { display: none; }
  .tabelle-karten td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--color-text-muted);
    margin-bottom: .15rem;
  }
  /* Aktions-Buttons (Bearbeiten/Loeschen/Oeffnen, ohne eigene Spalten-
     Ueberschrift) rechtsbuendig unter den Feldern statt als eigene Zeile
     mit Label. */
  .tabelle-karten td:not([data-label]) {
    text-align: right !important;
    margin-top: .4rem;
    padding-top: .5rem !important;
    border-top: 1px dashed var(--color-border) !important;
  }
  .tabelle-karten td:not([data-label]):first-child { border-top: none !important; margin-top: 0; }
  /* "Noch keine ... zugeordnet"-Platzhalterzeile (eine einzelne Zelle mit
     colspan statt einer echten Datenzeile) soll weder das Feld-Label der
     ersten Spalte erben (data-label wird ihr per Index trotzdem gesetzt)
     noch linksbuendig werden -- beides ueberschreibt hier die bewusste
     text-center-Klasse aus dem Template. */
  .tabelle-karten td[colspan] {
    text-align: center !important;
  }
  .tabelle-karten td[colspan]::before { content: none; }
}

/* Positionen per Drag&Drop umsortieren (Rechnung/Angebot/Auftrags-
   bestaetigung/Gutschrift) -- Griff-Symbol vorne in der Zeile, siehe app.js.
   Auf Touch-Geraeten ohne echte Maus ist Drag&Drop unzuverlaessig/schlecht
   bedienbar, deswegen blendet die Karten-Ansicht die Griff-Spalte dort
   bewusst aus, statt eine nicht richtig funktionierende Geste anzubieten. */
.pos-griff { cursor: grab; font-size: 1.1rem; }
.position-zeile.wird-verschoben { opacity: .4; }
@media (max-width: 767.98px) {
  .tabelle-karten td.pos-griff { display: none; }
}

/* Konten-Liste (Einstellungen): jede Zeile ist Umbenennen-Formular +
   Loeschen-Button ohne Kopfzeile -- passt nicht ins generische
   .tabelle-karten-Schema (kein thead fuer die Feld-Labels). Auf Mobil
   sollen Eingabefeld/Speichern und der Loeschen-Button trotzdem nicht in
   einer engen Zeile zusammengequetscht werden, sondern als kleine Karte
   mit dem Loeschen-Button rechtsbuendig darunter. */
@media (max-width: 767.98px) {
  .konten-tabelle, .konten-tabelle tbody, .konten-tabelle tr, .konten-tabelle td {
    display: block;
    width: 100%;
  }
  .konten-tabelle tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .65rem .75rem;
    margin-bottom: .6rem;
  }
  .konten-tabelle tr:last-child { margin-bottom: 0; }
  .konten-tabelle td {
    padding: 0 !important;
    white-space: normal !important;
  }
  .konten-tabelle td:last-child {
    margin-top: .5rem;
    text-align: right !important;
  }
}

/* Inline-Bearbeitung der eigenen Positionen direkt in der Kettentabelle --
   Ansicht/Eingabe teilen sich dieselbe Zelle, umgeschaltet per Klasse auf
   der Karte statt einer zweiten, separaten Tabelle darunter. */
.kette-eigene-bearbeiten { display: none; }
#positionen-karte.bearbeiten-aktiv .kette-eigene-bearbeiten { display: block; }
#positionen-karte.bearbeiten-aktiv .kette-eigene-ansicht { display: none; }
.kette-eigene-bearbeiten input, .kette-eigene-bearbeiten select { text-align: right; }
.kette-zelle .kette-eigene-bearbeiten { text-align: left; }

/* ------------------------------------------- Dokumentenketten-Karte -- */
.kette-spalte-titel {
  font-weight: 600;
  margin-bottom: .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--color-border);
}
.kette-spalte-titel i { color: var(--color-text-muted); margin-right: .3rem; }
@media (min-width: 768px) {
  .kette-spalte { border-left: 1px solid var(--color-border); padding-left: 1.25rem; }
  .kette-spalte:first-child { border-left: none; padding-left: 0; }
}

.datev-table tbody tr.row-offen { background-color: var(--color-warn-soft); }
.datev-table tbody tr.row-offen:hover { background-color: #f3e7c4; }

.text-success { color: var(--color-accent) !important; }
.text-danger { color: var(--color-negative) !important; }

/* --------------------------------------------------------------- Alerts -- */
.alert { border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.alert-success { border-color: #cfe0d7; background: var(--color-accent-soft); color: #204238; }
.alert-danger { border-color: #e6cec6; background: var(--color-negative-soft); color: #7a2e21; }
.alert-warning { border-color: #e8dcb4; background: var(--color-warn-soft); color: var(--color-warn); }

/* ---------------------------------------------------------- Toast-Meldung -- */
.toast-notice {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(90vw, 560px);
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  font-size: .92rem;
  animation: toast-notice-in .18s ease;
}
.toast-notice.is-success { border-color: #cfe0d7; background: var(--color-accent-soft); color: #204238; }
.toast-notice.is-error { border-color: #e6cec6; background: var(--color-negative-soft); color: #7a2e21; }
.toast-notice.is-hiding { animation: toast-notice-out .18s ease forwards; }
.toast-notice-text { flex: 1 1 auto; }
.toast-notice-close {
  flex: none;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: .8rem;
}
.toast-notice-close:hover { opacity: 1; }
@keyframes toast-notice-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-notice-out { from { opacity: 1; } to { opacity: 0; } }

/* ------------------------------------------------- Beleg-Zuordnung Pill -- */
.beleg-picker-toggle {
  width: 100%;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .4rem .65rem;
  font-size: .84rem;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.beleg-picker-toggle:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.beleg-picker-toggle .bi { color: var(--color-text-muted); font-size: .7rem; flex: none; }
.beleg-picker-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.beleg-picker-label.is-placeholder { color: var(--color-text-muted); }
.beleg-picker-amount { font-weight: 650; font-size: .82rem; white-space: nowrap; color: var(--color-text-muted); flex: none; }
.beleg-picker-amount.is-match { color: var(--color-accent); }
.beleg-picker-amount.is-mismatch { color: var(--color-negative); }

/* ---------------------------------------------------- Buchungsdatum-Box -- */
.buchung-datum {
  display: inline-block;
  padding: .2rem .55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* --------------------------------------------------- Beleg-Status-Icon -- */
.beleg-status-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.beleg-status-icon:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.beleg-status-icon.is-assigned {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
}
.beleg-status-check {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-text-muted);
  color: #fff;
  font-size: .62rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.beleg-status-icon.is-assigned .beleg-status-check { display: flex; background: var(--color-accent); }

/* ------------------------------------------------------- Filter-Bereich -- */
.filter-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.filter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: transparent;
  border: none;
  padding: .85rem 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.filter-toggle .bi-funnel { margin-right: .35rem; }
.filter-toggle .bi-chevron-down { transition: transform .15s ease; }

.card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: transparent;
  border: none;
  padding: .95rem 1.25rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-text);
  cursor: pointer;
}
.card-toggle .bi-chevron-down { color: var(--color-text-muted); transition: transform .15s ease; }
.card-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* -------------------------------------------------------- Settings-Tabs -- */
.settings-tabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: 1px solid var(--color-border); padding-bottom: .75rem;
}
.settings-tab {
  padding: .5rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500;
  color: var(--color-text-muted); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.settings-tab:hover { background: var(--color-accent-soft); color: var(--color-text); }
.settings-tab.active { background: var(--color-accent); color: #fff; }

/* Auf Mobil wuerden die 9 Reiter in mehreren Zeilen umbrechen (viel
   verschenkte Hoehe, bevor ueberhaupt Inhalt zu sehen ist) -- stattdessen
   eine einzeilige, horizontal scrollbare Streifen-Leiste, wie man es von
   Tab-Leisten auf dem Handy kennt. Scrollbar bewusst ausgeblendet (bleibt
   trotzdem per Wisch-Geste bedienbar), damit es nicht wie eine normale
   Webseiten-Scrollleiste aussieht. */
@media (max-width: 767.98px) {
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab { flex: none; white-space: nowrap; }
}

/* ---------------------------------------------------------- Art-Toggle -- */
.typ-toggle { display: flex; gap: .5rem; }
.typ-toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .375rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.typ-toggle-option:hover { border-color: var(--color-text-muted); }
.produkt-speichern-zeile { display: block; margin-top: .25rem; }
.btn-check:checked + .typ-toggle-option {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-2);
  color: var(--color-accent);
}
.btn-check:checked + .typ-toggle-option.is-eingang {
  background: var(--color-negative-soft);
  border-color: var(--color-negative-2);
  color: var(--color-negative);
}
.btn-check:checked + .typ-toggle-option.is-ausgang {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-2);
  color: var(--color-accent);
}

/* ----------------------------------------------------------- Info-Icon -- */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-size: .7rem;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.info-icon:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* ----------------------------------------------- Transaktions-Detail-Modal -- */
.modal-content { border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--color-border); }
.modal dt { color: var(--color-text-muted); font-weight: 500; }

.tx-beleg-liste {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-height: 280px;
  overflow-y: auto;
}
.tx-beleg-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  margin: 0;
  font-size: .87rem;
}
.tx-beleg-row:last-child { border-bottom: none; }
.tx-beleg-row:hover { background: var(--color-canvas); }
.tx-beleg-row.is-assigned { background: var(--color-accent-soft); }
.tx-beleg-row .option-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tx-beleg-row .option-amount { font-weight: 650; white-space: nowrap; flex: none; color: var(--color-text-muted); }
.tx-summe.is-match { color: var(--color-accent); }
.tx-summe.is-mismatch { color: var(--color-negative); }

.card-danger { border-color: #e6cec6; }
.card-danger .card-header { color: var(--color-negative); border-bottom-color: #e6cec6; }
.card-danger .card-toggle { color: var(--color-negative); }

/* ------------------------------------------------------ Beleg-Vorschau -- */
.beleg-vorschau {
  position: relative;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-canvas);
}
.beleg-vorschau-frame {
  width: 100%; height: 420px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--color-canvas); color: var(--color-text-muted); font-size: .82rem;
}
.beleg-vorschau-frame canvas { max-width: 100%; max-height: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.beleg-vorschau-bild { width: 100%; max-height: 420px; object-fit: contain; display: block; background: var(--color-canvas); }
.beleg-vorschau-hinweis {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  background: rgba(33, 32, 28, 0.72);
  color: #fff;
  font-size: .74rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  pointer-events: none;
}
.beleg-vorschau-frame-gross {
  width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 1rem; color: var(--color-text-muted); font-size: .85rem;
}
.beleg-vorschau-frame-gross canvas { max-width: 100%; box-shadow: 0 1px 6px rgba(0,0,0,.18); display: block; }

.vorschau-zoom-toolbar { display: flex; align-items: center; gap: .35rem; margin-right: .75rem; }
.vorschau-zoom-toolbar .btn { padding: .15rem .55rem; line-height: 1.4; }
.vorschau-zoom-wert { font-size: .82rem; color: var(--color-text-muted); min-width: 3.2rem; text-align: center; }

/* Wrapper je PDF-Seite: haelt Canvas + Text-Layer exakt uebereinander, damit
   markierter Text pixelgenau ueber dem sichtbaren Text liegt. */
.pdf-seite { position: relative; }
.textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-align: initial;
  opacity: 1;
}
.textLayer span, .textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer ::selection { background: rgba(47, 93, 79, 0.35); }

/* ---------------------------------------------------- Design-Auswahl -- */
.design-liste { display: flex; flex-direction: column; gap: .6rem; }
.design-karte {
  position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.design-karte:hover { border-color: var(--color-accent-2); }
.design-karte.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.design-karte .design-radio { position: absolute; opacity: 0; pointer-events: none; }
.design-karte-titel { font-weight: 600; font-size: .92rem; }
.design-karte-text { font-size: .82rem; color: var(--color-text-muted); }
.design-vorschau-frame { width: 100%; height: 78vh; border: none; display: block; }
.beleg-vorschau-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 240px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: .85rem;
  text-align: center;
  padding: 1.5rem;
}
.beleg-vorschau-leer i { font-size: 1.8rem; opacity: .6; }

/* ---------------------------------------------------------------- Sonst -- */
.rohtext {
  white-space: pre-wrap;
  font-size: 0.78rem;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
}

/* Positionstabelle (Rechnung/Angebot/AB/Gutschrift): feste Spaltenbreiten, damit
   v.a. der Preis auf dem Laptop NIE abgeschnitten wird (frueher quetschte das
   automatische Tabellenlayout die Felder unter ihre lesbare Breite). Reicht der
   Platz nicht, scrollt die Tabelle horizontal (.table-responsive) statt
   Inhalte zu verdecken. Zahlen rechtsbuendig mit gleich breiten Ziffern. */
@media (min-width: 768px) {
  .rechnung-positionen { table-layout: fixed; min-width: 820px; }
  .rechnung-positionen td { overflow: visible; }
}
.rechnung-positionen input.pos-menge,
.rechnung-positionen input.pos-preis,
.rechnung-positionen input.pos-steuersatz,
.rechnung-positionen input.pos-rabatt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: .4rem;
  padding-right: .4rem;
}

/* Aktionsleiste der Dokument-Detailseiten: bleibt beim Scrollen sichtbar, damit
   Speichern/Abschliessen auch bei langen Positionslisten immer erreichbar sind. */
@media (min-width: 768px) {
  /* Sticky muss an der GANZEN Kopfzeile haengen (Titel + Leiste), nicht an der
     Leiste allein -- sonst scrollt sie mit ihrem Eltern-Container weg. */
  .dokument-kopf { position: sticky; top: 0; z-index: 1020; background: var(--color-canvas);
                   padding: .5rem 0; margin-top: -.5rem; border-bottom: 1px solid transparent; }
}
.aktionsleiste .btn.ungespeichert { box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .55); }
.aktionsleiste .btn.ungespeichert::after { content: " •"; font-weight: 700; }

/* Dokument-Detailseiten: Formular (Kopfdaten + Positionen) bekommt auf Laptops die
   volle Breite, damit KEIN Feld verdeckt oder abgeschnitten wird; Verknuepfungen/
   Dokumentenkette stehen dann darunter. Erst auf sehr breiten Bildschirmen
   (>= 1680 px) steht die Seitenspalte wieder daneben. */
@media (min-width: 1680px) {
  .doc-haupt { flex: 0 0 auto; width: 66.66667%; }
  .doc-seite { flex: 0 0 auto; width: 33.33333%; }
}

/* ------------------------------------------- Listen: Schnellfilter + Detailfilter -- */
.filter-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: .875rem; font-weight: 500; text-decoration: none;
}
.filter-chip:hover { border-color: var(--color-accent-2); color: var(--color-accent); }
.filter-chip.aktiv { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.filter-chip-anzahl {
  font-size: .75rem; font-weight: 600; padding: 0 .4rem; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.filter-chip.aktiv .filter-chip-anzahl { background: rgba(255, 255, 255, .22); color: #fff; }
.tabelle-karten .zeilen-meta { font-size: .75rem; color: var(--color-text-muted); }
.tag-badge {
  display: inline-block; font-size: .7rem; padding: .05rem .45rem; margin: .1rem .15rem 0 0;
  border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent);
}

/* ======================================================================== */
/* Politur: klickbare Zeilen, weiche Uebergaenge, Details                    */
/* ======================================================================== */

/* Ganze Zeile klickbar: Akzentbalken links, sanfte Tonung, Pfeil rutscht ein */
.table tbody tr.zeile-klickbar {
  cursor: pointer;
  position: relative;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.table tbody tr.zeile-klickbar:hover,
.table tbody tr.zeile-klickbar:focus-visible {
  background-color: rgba(47, 93, 79, 0.06);
  box-shadow: inset 3px 0 0 var(--color-accent);
  outline: none;
}
.table tbody tr.zeile-klickbar:active { background-color: rgba(47, 93, 79, 0.11); }
.zeilen-pfeil {
  display: inline-block;
  color: var(--color-border);
  font-size: .95rem;
  margin-left: .25rem;
  transition: transform .2s ease, color .2s ease;
}
tr.zeile-klickbar:hover .zeilen-pfeil,
tr.zeile-klickbar:focus-visible .zeilen-pfeil { transform: translateX(3px); color: var(--color-accent); }
/* Aktionsknoepfe in der Zeile: ruhig, bis man die Zeile beruehrt */
tr.zeile-klickbar .btn-outline-secondary { opacity: .72; transition: opacity .18s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
tr.zeile-klickbar:hover .btn-outline-secondary,
tr.zeile-klickbar:focus-within .btn-outline-secondary,
tr.zeile-klickbar .dropdown-menu.show ~ .btn-outline-secondary, tr.zeile-klickbar .schnellmenue-toggle.show { opacity: 1; }

/* Betraege und Nummern in Tabellen: gleich breite Ziffern, saubere Spalten */
.table td, .table th { font-variant-numeric: tabular-nums; }

/* Seiteninhalt blendet sanft ein, Tabellenzeilen kommen leicht gestaffelt */
@keyframes seite-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zeile-ein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.app-main > * { animation: seite-ein .32s ease backwards; }
.app-main > *:nth-child(2) { animation-delay: .04s; }
.app-main > *:nth-child(3) { animation-delay: .08s; }
.app-main > *:nth-child(n+4) { animation-delay: .12s; }
.table tbody tr { animation: zeile-ein .28s ease backwards; }
.table tbody tr:nth-child(2) { animation-delay: .03s; }
.table tbody tr:nth-child(3) { animation-delay: .06s; }
.table tbody tr:nth-child(4) { animation-delay: .09s; }
.table tbody tr:nth-child(5) { animation-delay: .12s; }
.table tbody tr:nth-child(6) { animation-delay: .15s; }
.table tbody tr:nth-child(7) { animation-delay: .18s; }
.table tbody tr:nth-child(8) { animation-delay: .21s; }
.table tbody tr:nth-child(n+9) { animation-delay: .24s; }

/* Menues und Dialoge: weiches Einblenden */
/* nur Deckkraft animieren: Popper positioniert Menues ueber transform */
@keyframes menue-ein { from { opacity: 0; } to { opacity: 1; } }
.dropdown-menu.show { animation: menue-ein .14s ease; }
.dropdown-item { transition: background-color .12s ease, color .12s ease, padding-left .12s ease; }
.dropdown-item:hover:not(.disabled):not(:disabled) { background-color: var(--color-accent-soft); color: var(--color-text); }
.dropdown-item.text-danger:hover { background-color: var(--color-negative-soft); }
.modal.fade .modal-dialog { transition: transform .22s ease, opacity .22s ease; transform: translateY(12px) scale(.985); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { backdrop-filter: blur(2px); }

/* Schnellfilter-Chips und Karten: kleine Rueckmeldung beim Anfassen */
.filter-chip { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease; }
.filter-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(47, 93, 79, .12); }
.filter-chip.aktiv { box-shadow: 0 4px 12px rgba(47, 93, 79, .28); }
.card { transition: box-shadow .2s ease, border-color .2s ease; }

/* Tastaturfokus gut sichtbar, zum Rest passend */
:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent-2);
  box-shadow: 0 0 0 .2rem rgba(47, 93, 79, .14);
}

/* Seitenleiste: aktiver Eintrag mit Akzentbalken, weicher Hover */
.sidebar-link { position: relative; transition: background-color .15s ease, color .15s ease, padding-left .15s ease; }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -.55rem; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: var(--color-accent);
}
.sidebar-sublink { transition: background-color .15s ease, color .15s ease; }

/* Ueberschriften etwas markanter */
.app-main h4 { font-weight: 650; letter-spacing: -.01em; }

/* Wer Bewegung reduziert haben will, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  .app-main > *, .table tbody tr, .dropdown-menu.show { animation: none !important; }
  .modal.fade .modal-dialog, .zeilen-pfeil, .filter-chip, tr.zeile-klickbar { transition: none !important; }
}

/* Sortierbare Spaltenueberschriften */
.table th[data-sortierbar] { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s ease; }
.table th[data-sortierbar]:hover { color: var(--color-accent); }
.table th[data-sortierbar]::after {
  content: "\2195"; margin-left: .35rem; font-size: .8em; opacity: 0; transition: opacity .15s ease;
}
.table th[data-sortierbar]:hover::after { opacity: .45; }
.table th[aria-sort] { color: var(--color-accent); }
.table th[aria-sort]::after { opacity: 1 !important; }
.table th[aria-sort="ascending"]::after { content: "\25B2"; font-size: .65em; }
.table th[aria-sort="descending"]::after { content: "\25BC"; font-size: .65em; }
.table th[data-sortierbar]:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: -2px; border-radius: 4px; }

/* ======================================================================== */
/* Rechnungsformular im Stil moderner Rechnungsprogramme                     */
/* ======================================================================== */
.doc-karte .card-body { padding: 1.75rem 2rem; }
.doc-sektion { margin-bottom: 2.1rem; }
.doc-titel { font-size: 1.05rem; font-weight: 650; letter-spacing: -.005em; color: var(--color-text); margin-bottom: .9rem; }
.doc-sektion .form-label { font-size: .82rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: .3rem; }
.doc-sektion .form-control, .doc-sektion .form-select { padding: .55rem .8rem; }
.doc-sektion textarea.form-control { padding: .8rem 1rem; line-height: 1.55; }
.doc-titel-knopf {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: .2rem 0 .6rem; color: var(--color-text); cursor: pointer;
}
.doc-titel-knopf .bi { transition: transform .2s ease; color: var(--color-text-muted); }
.doc-titel-knopf[aria-expanded="false"] .bi { transform: rotate(180deg); }
.doc-link-knopf { color: var(--color-accent); font-weight: 500; text-decoration: none; }
.doc-link-knopf:hover { color: var(--color-accent-2); text-decoration: underline; }
.doc-karte .typ-toggle { max-width: none !important; }
.doc-karte .rechnung-positionen thead th {
  font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-text-muted);
  border-bottom: 0; padding-bottom: .3rem;
}
.doc-karte .rechnung-positionen tbody tr { border-bottom: 1px solid var(--color-border); }
.doc-karte .rechnung-positionen .form-control, .doc-karte .rechnung-positionen .form-select { padding: .4rem .6rem; }
.doc-karte .rechnung-summen td { border: 0; padding: .35rem .5rem; color: var(--color-text-muted); }
.doc-karte .rechnung-summen tr.fw-semibold td { color: var(--color-text); font-size: 1.05rem; border-top: 1px solid var(--color-border); padding-top: .6rem; }
@media (max-width: 575.98px) { .doc-karte .card-body { padding: 1.1rem; } }

/* Menues muessen ueber allem liegen: Zeilen/Bereiche mit offenem Menue nach vorne holen.
   (Animationen mit fill-mode "both" liessen jede Zeile einen eigenen Stapel bilden -> Menue lag hinter der naechsten Zeile.) */
.table tbody tr:has(.dropdown-menu.show), .aktionsleiste:has(.dropdown-menu.show) { position: relative; z-index: 20; }
.dropdown-menu { z-index: 1060; }

/* Auto-wachsende Textfelder (Kopf-/Fusstext): kein inneres Scrollen, kein manuelles Ziehen noetig */
textarea[data-autogrow] { overflow: hidden; resize: none; min-height: 3.2rem; }
#weitere-optionen .form-label { display: flex; align-items: center; gap: .5rem; min-height: 1.5rem; }

/* ======================================================================== */
/* Einstellungen: Navigationsleiste links, Inhalt in der vollen Breite       */
/* ======================================================================== */
.settings-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 2rem; align-items: start; }
.settings-rail {
  position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.settings-gruppe {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: .85rem .75rem .3rem;
}
.settings-gruppe:first-child { padding-top: .25rem; }
.settings-link {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500;
  color: var(--color-text-muted); text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.settings-link .bi { font-size: 1rem; width: 1.15rem; text-align: center; transition: transform .2s ease; }
.settings-link:hover { background: var(--color-accent-soft); color: var(--color-text); transform: translateX(2px); }
.settings-link:hover .bi { transform: scale(1.12); }
.settings-link.active { background: var(--color-accent); color: #fff; box-shadow: 0 4px 12px rgba(47, 93, 79, .25); }
.settings-link.gefahr:not(.active) { color: var(--color-negative); }
.settings-link.gefahr:not(.active):hover { background: var(--color-negative-soft); color: var(--color-negative); }
.settings-link.gefahr.active { background: var(--color-negative); box-shadow: 0 4px 12px rgba(161, 61, 46, .25); }

.settings-kopf { margin-bottom: 1.25rem; }
.settings-kopf h5 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .25rem; }
.settings-kopf p { margin: 0; color: var(--color-text-muted); max-width: 70ch; }

/* Karten nutzen die ganze Breite: so viele Spalten, wie sinnvoll hineinpassen */
.settings-inhalt {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
}
.settings-inhalt > .card { margin-bottom: 0 !important; margin-top: 0 !important; transition: box-shadow .2s ease, transform .2s ease; }
.settings-inhalt > .card:hover { box-shadow: var(--shadow-lg); }
.settings-inhalt > :not(.card), .settings-inhalt > .card.settings-breit { grid-column: 1 / -1; }
.settings-inhalt .card-header { display: flex; align-items: center; gap: .5rem; }
/* Formularfelder in breiten Karten nicht endlos strecken */
.settings-inhalt .form-select[style*="max-width"], .settings-inhalt .form-control[style*="max-width"] { width: 100%; }
.settings-inhalt .card-body > form > .mb-3:last-child, .settings-inhalt .card-body > form > .row:last-child { margin-bottom: 0 !important; }

/* Einblenden: Navigation, Kopf und Karten nacheinander */
@keyframes einstellung-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.settings-rail, .settings-kopf { animation: einstellung-ein .35s ease backwards; }
.settings-kopf { animation-delay: .05s; }
.settings-inhalt > * { animation: einstellung-ein .4s ease backwards; }
.settings-inhalt > *:nth-child(1) { animation-delay: .08s; }
.settings-inhalt > *:nth-child(2) { animation-delay: .14s; }
.settings-inhalt > *:nth-child(3) { animation-delay: .2s; }
.settings-inhalt > *:nth-child(n+4) { animation-delay: .26s; }
.settings-layout .app-main > *, .settings-layout > * { animation-fill-mode: backwards; }
@media (prefers-reduced-motion: reduce) {
  .settings-rail, .settings-kopf, .settings-inhalt > * { animation: none !important; }
  .settings-link, .settings-link .bi, .settings-inhalt > .card { transition: none !important; }
}

/* Schmale Bildschirme: Navigation wird zur waagerechten Reiterleiste */
@media (max-width: 991.98px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .settings-rail {
    position: static; flex-direction: row; overflow-x: auto; padding: .4rem; gap: .25rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .settings-rail::-webkit-scrollbar { display: none; }
  .settings-gruppe { display: none; }
  .settings-link { flex: none; white-space: nowrap; }
  .settings-link:hover { transform: none; }
}

/* Abschnitts-Ueberschriften innerhalb langer Einstellungs-Formulare */
.settings-abschnitt {
  margin-top: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--color-border);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent);
}
.settings-abschnitt:first-child { margin-top: 0; }

/* ======================================================================== */
/* Detailseiten in der Designsprache der Einstellungen                        */
/* ======================================================================== */
.seiten-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.seiten-zurueck {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 500;
  color: var(--color-text-muted); text-decoration: none; margin-bottom: .35rem; transition: color .15s ease, transform .15s ease;
}
.seiten-zurueck:hover { color: var(--color-accent); transform: translateX(-2px); }
.seiten-titel { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.seiten-untertitel { margin: .25rem 0 0; color: var(--color-text-muted); max-width: 75ch; }
.seiten-aktionen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.seiten-kopf, .seiten-kopf > * { animation: einstellung-ein .35s ease backwards; }

/* Zwei Spalten (breit + schmal), Karten mit gleichmaessigem Abstand */
.detail-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.detail-raster.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-haupt, .detail-seite { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.detail-haupt > .card, .detail-seite > .card, .detail-raster > .card { margin: 0 !important; }
.detail-voll { margin-bottom: 1.25rem; }
.detail-raster > *, .detail-voll { animation: einstellung-ein .4s ease backwards; }
.detail-raster > *:nth-child(1) { animation-delay: .06s; }
.detail-raster > *:nth-child(2) { animation-delay: .12s; }
.detail-raster .card-header { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 991.98px) { .detail-raster, .detail-raster.gleich { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .seiten-kopf, .seiten-kopf > *, .detail-raster > *, .detail-voll { animation: none !important; } }

/* Kennzahlen-Streifen (Baustelle, Kundenauftrag, ...) */
.kpi-streifen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.25rem; }
.kpi-streifen > .kpi-card { margin: 0 !important; animation: einstellung-ein .4s ease backwards; }
.kpi-streifen > *:nth-child(2) { animation-delay: .05s; }
.kpi-streifen > *:nth-child(3) { animation-delay: .1s; }
.kpi-streifen > *:nth-child(4) { animation-delay: .15s; }
.kpi-streifen > *:nth-child(n+5) { animation-delay: .2s; }

/* ======================================================================== */
/* Dashboard: Kennzahlen mit Symbol, Rang-Balken, ruhigere Hinweise          */
/* ======================================================================== */
.kpi-card .card-body { position: relative; }
.kpi-card .kpi-label { padding-right: 2.5rem; min-height: 1.5rem; }
.kpi-icon {
  position: absolute; top: .85rem; right: .85rem; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--color-accent-soft); color: var(--color-accent);
  transition: transform .25s ease, background-color .25s ease;
}
.kpi-card:hover .kpi-icon { transform: scale(1.12) rotate(-6deg); }
.kpi-red .kpi-icon { background: var(--color-negative-soft); color: var(--color-negative); }
.kpi-blue .kpi-icon, .kpi-dark .kpi-icon { background: #f1efe6; color: var(--color-text-muted); }
.kpi-dark .kpi-icon { background: #ecebe6; color: var(--color-text); }
.kpi-card .kpi-value { font-variant-numeric: tabular-nums; }
/* Kennzahlen-Reihe: nacheinander einblenden */
.kpi-row-kompakt > .col { animation: einstellung-ein .4s ease backwards; }
.kpi-row-kompakt > .col:nth-child(2) { animation-delay: .05s; }
.kpi-row-kompakt > .col:nth-child(3) { animation-delay: .1s; }
.kpi-row-kompakt > .col:nth-child(4) { animation-delay: .15s; }
.kpi-row-kompakt > .col:nth-child(5) { animation-delay: .2s; }
.kpi-row-kompakt > .col:nth-child(6) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .kpi-row-kompakt > .col { animation: none !important; } .kpi-icon { transition: none; } }

.rang-balken { height: 4px; margin-top: .35rem; border-radius: 4px; background: var(--color-accent-soft); overflow: hidden; }
.rang-balken span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent)); animation: balken-ein .6s ease backwards; }
@keyframes balken-ein { from { width: 0 !important; } }

.alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); animation: einstellung-ein .35s ease backwards; }
.alert-danger { background: var(--color-negative-soft); border-color: #ebd2c9; border-left-color: var(--color-negative); color: #6b2a1f; }
.alert-warning { background: var(--color-warn-soft); border-color: #eadfbf; border-left-color: #c9a227; color: #5e4a12; }
.alert-info { background: #eaf1f4; border-color: #d3e2e8; border-left-color: #4f8ea3; color: #25505e; }
.alert-danger .alert-link { color: var(--color-negative); }

/* Karten-Ueberschriften: etwas mehr Gewicht und ein dezenter Akzent */
.app-main .card > .card-header { letter-spacing: -.003em; background: linear-gradient(180deg, rgba(47, 93, 79, .035), transparent); }

/* Symbol unten rechts neben dem Wert -- so bleibt die Beschriftung oben ungestoert */
.kpi-card .kpi-label { padding-right: 0; overflow-wrap: break-word; }
.kpi-icon { top: auto; bottom: .9rem; right: .9rem; width: 2rem; height: 2rem; font-size: .95rem; }

/* ======================================================================== */
/* Handy-Oberflaeche (Aufbau angelehnt an moderne Finanz-Apps, Kontor-Design) */
/* ======================================================================== */
.d-contents { display: contents; }
.mobil-kopf, .mobil-liste, .mobil-nur, .mobil-fab { display: none; }

/* --- Bausteine, die auch auf der /mehr-Seite gelten (jede Breite) --- */
.mobil-avatar {
  flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-soft); color: var(--color-accent); font-weight: 650; font-size: 1rem; letter-spacing: .02em;
}
.mobil-avatar.gross { width: 5rem; height: 5rem; font-size: 1.9rem; margin: 0 auto .75rem; }
.mobil-gruppe { margin-bottom: 1.4rem; }
.mobil-gruppe-titel { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); margin: 0 0 .5rem .25rem; }
.mobil-gruppe-karte {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.mobil-zeile {
  display: flex; align-items: center; gap: .85rem; width: 100%; padding: .95rem 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0;
  color: var(--color-text); text-decoration: none; text-align: left; font-size: .95rem; font-weight: 500;
  transition: background-color .15s ease;
}
.mobil-zeile:last-child, form:last-child > .mobil-zeile { border-bottom: 0; }
.mobil-zeile > .bi:first-child { width: 1.4rem; text-align: center; font-size: 1.15rem; color: var(--color-accent); }
.mobil-zeile-pfeil { margin-left: auto; color: var(--color-text-muted); font-size: .9rem; }
.mobil-zeile:active { background: var(--color-canvas); }
.mobil-anzahl { min-width: 1.4rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mobil-pille {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .18rem .6rem;
  border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: #f1efe6; color: var(--color-text-muted);
}
.mobil-pille.primary, .mobil-pille.success { background: var(--color-accent-soft); color: var(--color-accent); }
.mobil-pille.danger { background: var(--color-negative-soft); color: var(--color-negative); }
.mobil-pille.warning { background: var(--color-warn-soft); color: var(--color-warn); }
.mobil-eintrag-ende .mobil-pille { margin-left: 0; }
.mobil-pille::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .75; }
.mobil-pille.mobil-betrag::before { display: none; }
.mobil-pille.mobil-betrag { font-size: .85rem; padding: .25rem .7rem; }
.mehr-seite { max-width: 640px; margin: 0 auto; }
.mehr-profil { text-align: center; padding: .5rem 0 1.5rem; }
.mehr-profil h4 { margin: 0; font-size: 1.15rem; font-weight: 650; }
.mehr-profil p { margin: .15rem 0 0; color: var(--color-text-muted); }
.mehr-unten { margin-top: 1.5rem; }
.bottom-sheet-titel { font-weight: 650; padding: 0 .2rem .4rem; }

/* Betraege ausblenden (Auge-Symbol): unscharf statt Zahlen */
html.betraege-aus .kpi-value, html.betraege-aus .mobil-betrag, html.betraege-aus td.text-end,
html.betraege-aus .chart-summary strong, html.betraege-aus .chart-canvas-wrap, html.betraege-aus .rechnung-summen td.text-end {
  filter: blur(7px); user-select: none; transition: filter .2s ease;
}

/* --- Nur auf echten Touch-Handys (wie die bisherige Tab-Leiste) --- */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .nur-desktop { display: none !important; }
  .mobil-liste, .mobil-nur { display: block; }
  .mobil-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: calc(.7rem + env(safe-area-inset-top, 0)) 1rem .2rem;
  }
  .app-main .container-fluid { padding: .6rem 1rem 0 !important; }
  .mobil-profil { display: flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
  .mobil-profil-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .mobil-profil-text strong { font-size: 1.05rem; font-weight: 650; }
  .mobil-profil-text small { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-kopf-aktionen { display: flex; gap: .5rem; }
  .mobil-icon-knopf {
    width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 12px; font-size: 1.1rem;
    background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
  }
  .mobil-icon-knopf:active { transform: scale(.94); background: var(--color-canvas); }

  /* Tab-Leiste: runde Hervorhebung des aktiven Reiters */
  .bottom-tabbar { border-radius: 18px 18px 0 0; box-shadow: 0 -6px 20px rgba(33, 32, 28, .08); }
  .bottom-tab { padding: .55rem .1rem .45rem; font-size: .66rem; gap: .2rem; }
  .bottom-tab i { font-size: 1.3rem; padding: .15rem 1.05rem; border-radius: 999px; transition: background-color .2s ease, transform .2s ease; }
  .bottom-tab.active i { background: var(--color-accent-soft); }
  .bottom-tab:active i { transform: scale(.92); }

  /* Schwebende Knoepfe: Kamera (Beleg) und Plus (Neu) */
  .mobil-fab { display: flex; position: fixed; right: 1rem; bottom: calc(4.7rem + env(safe-area-inset-bottom, 0)); z-index: 185; gap: .6rem; }
  .mobil-fab-knopf {
    width: 3.3rem; height: 3.3rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: linear-gradient(165deg, var(--color-accent-2), var(--color-accent)); color: #fff; border: 0; font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(47, 93, 79, .35); transition: transform .15s ease, box-shadow .15s ease;
  }
  .mobil-fab-knopf.sekundaer { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
  .mobil-fab-knopf:active { transform: scale(.92); }

  /* Listen: Monats-Ueberschrift, Zeilen mit Rundsymbol */
  .mobil-monat { font-size: .88rem; font-weight: 650; margin: 1.2rem 0 .35rem .1rem; }
  .mobil-monat:first-child { margin-top: .4rem; }
  .mobil-eintrag {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
    padding: .7rem .15rem; color: inherit; text-decoration: none; border-radius: 12px;
    transition: background-color .15s ease;
  }
  .mobil-eintrag:active { background: var(--color-accent-soft); }
  .mobil-eintrag-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .mobil-eintrag-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-eintrag-text small { color: var(--color-text-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-eintrag-ende { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
  .mobil-betrag { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mobil-leer { text-align: center; color: var(--color-text-muted); padding: 2.5rem 1rem; }
  .mobil-liste > * { animation: einstellung-ein .3s ease backwards; }

  /* Dashboard: Ausstehende Rechnungen */
  .mobil-ausstehend { margin-bottom: 1.5rem; }
  .mobil-summe-karte {
    display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; margin-bottom: .75rem; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); box-shadow: 0 8px 20px rgba(47, 93, 79, .25);
  }
  .mobil-summe-karte small { opacity: .85; }
  .mobil-summe-karte strong { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }

  /* Seitenkopf und Filter kompakter, Chips in einer waagerechten Leiste */
  .listen-kpi { display: none; }
  .app-main h4 { font-size: 1.5rem; }
  .filter-chips { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -1rem; padding: .1rem 1rem .4rem; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }
  .listenfilter .filter-text { display: none; }
  .listenfilter > .d-flex { flex-wrap: nowrap !important; }
  .listenfilter > .d-flex > .btn { flex: none; margin-left: .25rem; }
  .settings-rail { margin: 0 -.25rem; }
}
@media (prefers-reduced-motion: reduce) { .mobil-liste > * { animation: none !important; } }

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  /* Listenkopf: Titel links, runder Plus-Knopf rechts (ohne Beschriftung) */
  .knopf-text { display: none; }
  .app-main .btn:has(> .knopf-text) { width: 2.7rem; height: 2.7rem; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.2rem; }
  .listenfilter .filter-chips { flex: 1 1 auto; min-width: 0; }
  .mobil-liste { padding-bottom: 4.5rem; }
}

/* Handy-Dashboard: kompakt wie eine App -- Kennzahlen zweispaltig, Kopf nur mit Jahreswahl */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .dashboard-kopf { margin-bottom: .75rem; justify-content: flex-end; }
  .dashboard-kopf .seiten-kopf-text { display: none; }
  .kpi-row-kompakt { display: grid !important; grid-template-columns: 1fr 1fr; gap: .7rem; --bs-gutter-x: 0; --bs-gutter-y: 0; margin-bottom: 1rem !important; }
  .kpi-row-kompakt > .col { width: auto; max-width: none; padding: 0; margin: 0; }
  .kpi-row-kompakt .kpi-card .card-body { padding: .8rem .85rem; }
  .kpi-row-kompakt .kpi-value { font-size: 1.15rem; }
  .kpi-row-kompakt .kpi-label { font-size: .62rem; }
  .kpi-row-kompakt .kpi-icon { display: none; }
  .row.g-3.mb-4 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
  .row.g-3.mb-4 > [class*="col-"] { width: 50%; }
  .alert { font-size: .84rem; padding: .6rem .8rem; }
  .mobil-nur + .row, .mobil-nur ~ .row { margin-top: 0; }
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .kpi-row-kompakt, .row.g-3.mb-4 {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
    margin-left: 0 !important; margin-right: 0 !important; width: 100%; --bs-gutter-x: 0; --bs-gutter-y: 0;
  }
  .kpi-row-kompakt > .col, .row.g-3.mb-4 > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; min-width: 0; }
  .row.g-3.mb-4 .card-body { padding: .8rem .85rem; }
  .row.g-3.mb-4 .fs-4 { font-size: 1.15rem !important; }
  .kpi-card .kpi-label { overflow-wrap: break-word; hyphens: auto; }
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  /* Top-Listen im Dashboard: mittlere Spalte (Anzahl/Menge) entfaellt, damit nichts ueber den Rand laeuft */
  .card:has(#kunden-tabelle-body) th:nth-child(2), #kunden-tabelle-body td:nth-child(2),
  .card:has(#produkte-tabelle-body) th:nth-child(2), #produkte-tabelle-body td:nth-child(2) { display: none; }
}
.mehr-zurueck { display: grid; margin-bottom: .25rem; }
@media (min-width: 768px) { .mehr-zurueck { display: none; } }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) { .mehr-seite { padding-top: calc(.4rem + env(safe-area-inset-top, 0)); } }

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .belege-upload-karte { display: none; }
  body.upload-offen .belege-upload-karte { display: block; }
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .listenfilter .filter-chips { margin: 0; padding: .1rem .1rem .4rem; }
}

/* Info-Raster: Beschriftung klein, Wert darunter -- ersetzt dt/dd-Listen in Detailkarten */
.info-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem 2rem; margin: 0; }
.info-feld { min-width: 0; }
.info-feld dt { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 .2rem; }
.info-feld dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.info-feld dd.breit { grid-column: 1 / -1; }
.info-raster .info-feld.breit { grid-column: 1 / -1; }
.card-body > .settings-abschnitt { margin-bottom: .9rem; }
.card-body .settings-abschnitt:not(:first-child) { margin-top: 1.5rem; }
.betrag-plus { color: var(--color-accent); } .betrag-minus { color: var(--color-negative); }

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .upload-karte > .card-header { cursor: pointer; }
  .upload-karte > .card-header::after { content: "\F229"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--color-text-muted); transition: transform .2s ease; }
  .upload-karte.offen > .card-header::after { transform: rotate(180deg); }
  .upload-karte > .card-body { display: none; }
  .upload-karte.offen > .card-body { display: block; }
}

/* ======================================================================== */
/* Login: Markenflaeche links, Anmeldekarte rechts                            */
/* ======================================================================== */
.login-body { background: var(--color-canvas); }
.login-seite { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-marke {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem 3.5rem; color: #fff;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%),
    radial-gradient(700px 480px at 100% 110%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, var(--color-accent-2), var(--color-accent) 55%, #234a3e);
  animation: login-marke-ein .6s ease backwards;
}
.login-logo { display: flex; align-items: center; gap: .65rem; font-weight: 650; font-size: 1.35rem; }
.login-logo .brand-mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.2rem; }
.login-logo.klein { display: none; color: var(--color-text); margin-bottom: 1.75rem; }
.login-logo.klein .brand-mark { background: var(--color-accent); }
.login-marke h1 { font-size: 2.1rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; max-width: 18ch; margin: 0 0 1.75rem; }
.login-marke ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; max-width: 42ch; }
.login-marke li { display: flex; gap: .75rem; align-items: flex-start; opacity: .92; animation: einstellung-ein .5s ease backwards; }
.login-marke li:nth-child(1) { animation-delay: .25s; } .login-marke li:nth-child(2) { animation-delay: .35s; } .login-marke li:nth-child(3) { animation-delay: .45s; }
.login-marke li i { font-size: 1.15rem; margin-top: .1rem; }
.login-marke small { opacity: .7; }
.login-panel { display: grid; place-items: center; padding: 2rem 1.25rem; }
.login-karte {
  width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 2.25rem 2rem; animation: einstellung-ein .5s ease .1s backwards;
}
.login-karte h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .35rem; }
.login-sub { color: var(--color-text-muted); margin: 0 0 1.5rem; }
.login-feld { position: relative; }
.login-feld > .bi-person, .login-feld > .bi-lock { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.login-feld .form-control { padding: .7rem .9rem .7rem 2.6rem; border-radius: 12px; }
.login-auge { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--color-text-muted); padding: .4rem .6rem; border-radius: 8px; }
.login-auge:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.login-feld:has(.login-auge) .form-control { padding-right: 2.8rem; }
.login-knopf { padding: .75rem 1rem; border-radius: 12px; font-weight: 600; }
.login-code { text-align: center; font-size: 1.6rem; letter-spacing: .5em; padding: .7rem 1rem; border-radius: 12px; font-variant-numeric: tabular-nums; }
.login-recovery summary { cursor: pointer; color: var(--color-text-muted); font-size: .85rem; }
.login-recovery[open] summary { margin-bottom: .25rem; }
@keyframes login-marke-ein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .login-seite { grid-template-columns: minmax(0, 1fr); }
  .login-marke { display: none; }
  .login-logo.klein { display: flex; }
  .login-panel { padding: 1.25rem; align-items: center; min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) { .login-marke, .login-karte, .login-marke li { animation: none !important; } }

/* Mandanten-Verwaltung */
.mandant-liste { list-style: none; margin: 0; padding: 0; }
.mandant-zeile { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.25rem; border-bottom: 1px solid var(--color-border); transition: background-color .15s ease; }
.mandant-zeile:last-child { border-bottom: 0; }
.mandant-zeile:hover { background: rgba(47, 93, 79, .04); }
.mandant-zeile.aktuell { background: var(--color-accent-soft); }
.mandant-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mandant-text small { color: var(--color-text-muted); }
.mandant-aktionen { display: flex; gap: .4rem; align-items: center; }
@media (max-width: 575.98px) { .mandant-zeile { flex-wrap: wrap; } .mandant-aktionen { width: 100%; justify-content: flex-end; } }

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  /* Listenkopf: Titel links, runder Knopf rechts in einer Zeile */
  .d-flex:has(> .listenkopf-text) { flex-wrap: nowrap !important; align-items: flex-start !important; }
  .listenkopf-text { min-width: 0; flex: 1; }
  .listenkopf-text .seiten-untertitel { font-size: .85rem; }
}

/* ======================================================================== */
/* Politur-Durchgang: Kennzahlen-Symbole sauber zentriert                     */
/* ======================================================================== */
.kpi-card .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start; position: static; }
.kpi-card .card-body > * { grid-column: 1; min-width: 0; }
.kpi-card .card-body > .kpi-icon {
  position: static; grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: end;
  width: 2.4rem; height: 2.4rem; font-size: 1.05rem; margin: 0; top: auto; bottom: auto; right: auto;
}
.kpi-card .card-body > .kpi-icon > i { display: block; line-height: 1; }
.kpi-card .kpi-label { padding-right: 0; }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .kpi-row-kompakt .kpi-card .card-body > .kpi-icon { display: none; }
}

/* Dashboard-Kennzahlen: erst auf sehr breiten Bildschirmen sechs in einer Reihe, sonst 3 x 2 -- so passen Werte und Symbole */
@media (min-width: 1750px) { .kpi-row-kompakt > .col { flex: 0 0 auto; width: 16.66667%; } }
.kpi-row-kompakt .kpi-value { font-size: 1.5rem; }
.kpi-row-kompakt .kpi-label { font-size: .7rem; letter-spacing: .04em; }

/* Handy: Aktionsleiste der Dokumente aufgeraeumt */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .dokument-kopf { gap: .5rem !important; margin-bottom: 1rem !important; }
  .aktionsleiste { justify-content: flex-start; gap: .4rem; }
  .aktionsleiste .btn { padding: .4rem .65rem; }
  .doc-karte .card-body { padding: 1rem; }
  .doc-sektion { margin-bottom: 1.6rem; }
  .doc-titel { font-size: 1.1rem; }
}

/* Handy: Kennzahlen-Kacheln kompakt (muss nach den Desktop-Regeln stehen) */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .kpi-card .card-body { display: block; padding: .8rem .85rem; }
  .kpi-card .kpi-icon { display: none; }
  .kpi-card .kpi-value, .kpi-row-kompakt .kpi-value { font-size: 1.15rem; white-space: nowrap; }
  .kpi-card .kpi-label, .kpi-row-kompakt .kpi-label { font-size: .62rem; letter-spacing: .02em; hyphens: none; overflow-wrap: break-word; min-height: 0; }
  .kpi-streifen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
}
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) { .kpi-card .info-icon { display: none; } }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) { .kpi-streifen:has(> .kpi-card:only-child) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  .seiten-kopf:has(.seiten-aktionen > :only-child) { flex-wrap: nowrap; align-items: flex-start; }
  .seiten-kopf:has(.seiten-aktionen > :only-child) .seiten-aktionen { margin-top: .2rem; }
}
.kontakte-suche { min-width: min(100%, 320px); }
.kontakte-suche .form-control { min-width: 0; }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) { .kontakte-suche { width: 100%; margin-left: 0 !important; } }

/* ===== Liquiditaet, Schnellsuche, kleine Ueberraschungen ===== */
.kpi-sub { font-size: .76rem; color: var(--color-text-muted); margin-top: .15rem; }
.sidebar-badge {
  margin-left: auto; min-width: 1.35rem; padding: .05rem .4rem; border-radius: 999px;
  background: var(--color-negative); color: #fff; font-size: .7rem; font-weight: 650; line-height: 1.35; text-align: center;
}
.sidebar-suche-taste {
  flex: none; padding: .05rem .35rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface);
  font: inherit; font-size: .68rem; color: var(--color-text-muted); box-shadow: none;
}
.sidebar-collapsed .sidebar-suche-taste, .sidebar-collapsed .sidebar-badge { display: none; }

.liq-zeitraum { display: inline-flex; gap: .25rem; padding: .2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.liq-chip { padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; color: var(--color-text-muted); text-decoration: none; font-weight: 550; }
.liq-chip:hover { color: var(--color-text); }
.liq-chip.aktiv { background: var(--color-accent); color: #fff; }
.liq-hinweis { border-radius: var(--radius-sm); }
.liq-chart { position: relative; height: 280px; }
.liq-tabs { display: flex; gap: .4rem; margin: 1.1rem 0 .9rem; overflow-x: auto; scrollbar-width: none; }
.liq-tabs::-webkit-scrollbar { display: none; }
.liq-tab {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; white-space: nowrap;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  color: var(--color-text-muted); font-weight: 550; font-size: .88rem; transition: background .15s, color .15s, border-color .15s;
}
.liq-tab:hover { color: var(--color-text); border-color: #d6cfbe; }
.liq-tab.aktiv { background: var(--color-accent-soft); border-color: #cfe0d7; color: var(--color-accent); }
.liq-bereich { animation: liq-ein .22s ease backwards; }
@keyframes liq-ein { from { opacity: 0; transform: translateY(6px); } }

.liq-liste { list-style: none; margin: 0; padding: 0; }
.liq-gruppe { padding: .55rem 1.1rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--color-text-muted); background: var(--color-canvas); border-top: 1px solid var(--color-border); }
.liq-gruppe:first-child { border-top: 0; }
.liq-zeile { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.1rem; color: inherit; text-decoration: none; border-top: 1px solid var(--color-border); transition: background .12s; }
li:first-child > .liq-zeile { border-top: 0; }
.liq-zeile:hover { background: var(--color-canvas); }
.liq-icon { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; font-size: 1rem; }
.liq-icon.liq-ein { background: var(--color-accent-soft); color: var(--color-accent); }
.liq-icon.liq-aus { background: var(--color-negative-soft); color: var(--color-negative); }
.liq-skonto-icon { background: var(--color-warn-soft); color: var(--color-warn); }
.liq-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liq-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liq-text small { color: var(--color-text-muted); font-size: .78rem; }
.liq-skonto, small.liq-skonto { color: var(--color-warn) !important; }
.liq-betrag { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.liq-betrag.positiv { color: var(--color-accent); }
.liq-betrag.negativ { color: var(--color-negative); }

.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.kal-kopf { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding-bottom: .2rem; }
.kal-tag {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 4.2rem; padding: .35rem .45rem; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; transition: border-color .12s, transform .12s;
}
.kal-tag:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.kal-tag.belegt { background: var(--color-canvas); }
.kal-tag.heute .kal-nr { background: var(--color-accent); color: #fff; }
.kal-tag.gewaehlt { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.kal-nr { align-self: flex-start; min-width: 1.5rem; padding: 0 .3rem; border-radius: 999px; font-size: .8rem; font-weight: 600; text-align: center; }
.kal-summe { font-size: .76rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kal-summe.positiv { color: var(--color-accent); } .kal-summe.negativ { color: var(--color-negative); }
.kal-leer { min-height: 4.2rem; }
.kal-tag-liste { margin-top: 1rem; }
.zahl-tabelle td, .zahl-tabelle th { white-space: nowrap; }
.zahl-tabelle td:nth-child(2) { white-space: normal; min-width: 11rem; }
@media (max-width: 767.98px) {
  .kal-tag, .kal-leer { min-height: 3rem; padding: .25rem; }
  .kal-summe { font-size: .62rem; }
  .liq-chart { height: 220px; }
  .liq-zeile { padding: .65rem .8rem; }
  .liq-zeitraum { align-self: flex-start; }
}

/* Schnellsuche */
.palette-dialog { max-width: 620px; align-items: flex-start; margin-top: 12vh; }
.palette { border: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.palette-eingabe { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
.palette-eingabe input { flex: 1; border: 0; outline: 0; background: none; font-size: 1.05rem; color: var(--color-text); }
.palette kbd, .kuerzel-raster kbd {
  display: inline-block; padding: .05rem .4rem; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--color-canvas); color: var(--color-text-muted); font: inherit; font-size: .72rem; box-shadow: none;
}
.palette-liste { max-height: 52vh; overflow-y: auto; padding: .4rem; }
.palette-gruppe { padding: .5rem .7rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--color-text-muted); }
.palette-eintrag { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .7rem; border: 0; background: none; border-radius: 10px; text-align: left; color: var(--color-text); }
.palette-eintrag.aktiv { background: var(--color-accent-soft); }
.palette-eintrag > i { flex: none; width: 1.4rem; text-align: center; color: var(--color-accent); }
.palette-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette-text strong { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-text small { color: var(--color-text-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-kuerzel { display: inline-flex; gap: .2rem; flex: none; }
.palette-leer { padding: 1.5rem; text-align: center; color: var(--color-text-muted); }
.palette-fuss { display: flex; align-items: center; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--color-border); font-size: .74rem; color: var(--color-text-muted); background: var(--color-canvas); }
.palette-fuss kbd { margin-right: .15rem; }
.kuerzel-raster { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.4rem; align-items: center; font-size: .92rem; }
@media (max-width: 767.98px) { .palette-dialog { margin-top: 4vh; } .palette-fuss { display: none; } }

/* Kleine Ueberraschungen */
.gruss-extra { color: var(--color-text-muted); font-style: italic; }
.sidebar-brand .brand-mark { cursor: pointer; }
@keyframes k-tanz {
  0% { transform: none; } 15% { transform: translateY(-7px) rotate(-14deg); } 30% { transform: translateY(0) rotate(10deg) scale(1.1); }
  45% { transform: translateY(-5px) rotate(-10deg); } 60% { transform: rotate(360deg) scale(1.15); } 80% { transform: rotate(360deg) scale(.95); } 100% { transform: rotate(360deg); }
}
.brand-mark.tanzt { animation: k-tanz .9s ease-in-out; }
.konfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2000; }
.konfetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: konfetti-fall 2.4s ease-in forwards; }
@keyframes konfetti-fall { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 40px 105vh; rotate: 540deg; } }
@media (prefers-reduced-motion: reduce) { .brand-mark.tanzt, .konfetti i, .liq-bereich { animation: none; } }

.liq-kpis .kpi-card .card-body { column-gap: .5rem; }
.liq-kpis .kpi-value { font-size: 1.2rem; white-space: nowrap; }
.liq-kpis .kpi-icon { width: 2rem; height: 2rem; font-size: .9rem; }
@media (min-width: 1750px) { .liq-kpis .kpi-value { font-size: 1.45rem; } }

.liq-zuordnen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: -.25rem 1.1rem .7rem 4.15rem; padding: .45rem .7rem; background: var(--color-accent-soft); border-radius: var(--radius-sm); }
.liq-zuordnen-text { flex: 1 1 14rem; min-width: 0; font-size: .78rem; color: var(--color-accent); }
@media (max-width: 767.98px) { .liq-zuordnen { margin: -.15rem .8rem .65rem .8rem; } }
@media (max-width: 767.98px) {
  .seiten-kopf:has(.liq-zeitraum) { flex-wrap: wrap; }
  .seiten-kopf:has(.liq-zeitraum) .seiten-untertitel { display: none; }
  .seiten-kopf:has(.liq-zeitraum) .seiten-aktionen { width: 100%; }
  .seiten-kopf:has(.liq-zeitraum) .liq-zeitraum { width: 100%; justify-content: space-between; }
  .seiten-kopf:has(.liq-zeitraum) .liq-chip { flex: 1; text-align: center; white-space: nowrap; }
  .liq-kpis > .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.toast-undo { margin: 0 0 0 .6rem; }
.toast-undo-knopf { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: .1rem .7rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.toast-undo-knopf:hover { background: rgba(0,0,0,.06); }
.zuo-grund { display: inline-block; margin: .1rem .25rem 0 0; padding: .05rem .5rem; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-size: .72rem; }
.zuo-paar { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); gap: .8rem 1rem; align-items: center; padding: .8rem 1.1rem; border-top: 1px solid var(--color-border); }
.zuo-paar:first-child { border-top: 0; }
.zuo-pfeil { color: var(--color-text-muted); }
.zuo-seite { min-width: 0; display: flex; flex-direction: column; }
.zuo-seite strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zuo-seite small { color: var(--color-text-muted); }
.zuo-gruende { grid-column: 2 / -1; }
.zuo-leiste { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding: .8rem 1.1rem; background: var(--color-surface); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 767.98px) { .zuo-paar { grid-template-columns: auto minmax(0,1fr); } .zuo-pfeil { display: none; } .zuo-gruende { grid-column: 2; } }

.bulk-spalte { width: 2.2rem; }
.bulk-leiste { position: sticky; bottom: 1rem; z-index: 30; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; padding: .7rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.bulk-leiste[hidden] { display: none; }
.bulk-zaehler { margin-right: auto; }
@media (max-width: 767.98px) { .bulk-spalte { display: none; } .bulk-leiste { display: none !important; } }
.gemerkte-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.filter-chip.gemerkt { display: inline-flex; align-items: center; gap: .2rem; padding-right: .3rem; }
.filter-chip.gemerkt a { color: inherit; text-decoration: none; }
.filter-chip.gemerkt button { border: 0; background: none; color: inherit; opacity: .55; padding: 0 .15rem; line-height: 1; }
.filter-chip.gemerkt button:hover { opacity: 1; }
.filter-chip.merken { border-style: dashed; background: transparent; cursor: pointer; }

.nur-lesen-band { padding: .45rem 1.5rem; background: var(--color-warn-soft); color: var(--color-warn); font-size: .85rem; border-bottom: 1px solid #e8dcb4; }

/* ===== Dunkles Design ===== */
:root { --chart-grid: #eeeae0; --chart-text: #666; }
html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #151714; --color-surface: #1e211d; --color-border: #33382f;
  --color-text: #ecebe4; --color-text-muted: #a8a28d;
  --color-accent: #6bb89d; --color-accent-2: #86c9b0; --color-accent-soft: #1f3029;
  --color-negative: #e48572; --color-negative-2: #ea9585; --color-negative-soft: #3a211c;
  --color-warn: #dbb85a; --color-warn-soft: #35301a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --chart-grid: #2c3029; --chart-text: #a8a28d;
}
html[data-theme="dark"] body { background: radial-gradient(900px 500px at 100% 0%, rgba(107,184,157,.07), rgba(0,0,0,0) 55%), var(--color-canvas); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi-card { background: linear-gradient(180deg, #212520, #1c1f1b); }
html[data-theme="dark"] .kpi-green { background: linear-gradient(135deg, rgba(107,184,157,.12), #1e211d 55%); }
html[data-theme="dark"] .kpi-red { background: linear-gradient(135deg, rgba(228,133,114,.12), #1e211d 55%); }
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-outline-success,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select-menu,
html[data-theme="dark"] .custom-select-suche,
html[data-theme="dark"] .info-icon,
html[data-theme="dark"] .typ-toggle-option,
html[data-theme="dark"] .beleg-pic,
html[data-theme="dark"] .beleg-stat,
html[data-theme="dark"] .logo-groesse-seite { background-color: var(--color-surface); background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .form-control::placeholder { color: #7d7968; }
html[data-theme="dark"] .text-bg-secondary, html[data-theme="dark"] .mobil-pille,
html[data-theme="dark"] .kpi-blue .kpi-icon, html[data-theme="dark"] .kpi-dark .kpi-icon { background: #2a2e27 !important; color: var(--color-text); }
html[data-theme="dark"] .alert-info { background: #1d2a30; border-color: #2c4450; color: #bcd8e3; }
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .toast-notice.is-success { background: var(--color-accent-soft); border-color: #2c4a3f; color: #bfe3d3; }
html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .toast-notice.is-error, html[data-theme="dark"] .card-danger { background: var(--color-negative-soft); border-color: #5a3029; color: #f1c4ba; }
html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .nur-lesen-band { background: var(--color-warn-soft); border-color: #5b5127; color: #ecd790; }
html[data-theme="dark"] .alert-danger .alert-link, html[data-theme="dark"] .alert-warning .alert-link { color: inherit; }
html[data-theme="dark"] .card-danger .card-header { border-bottom-color: #5a3029; }
html[data-theme="dark"] .datev-table tbody tr.row-offen:hover { background-color: #3a341d; }
html[data-theme="dark"] .liq-tab:hover { border-color: #4a5043; }
html[data-theme="dark"] .liq-tab.aktiv { border-color: #2c4a3f; }
html[data-theme="dark"] .table { --bs-table-color: var(--color-text); --bs-table-bg: transparent; --bs-table-border-color: var(--color-border); --bs-table-hover-bg: rgba(255,255,255,.03); --bs-table-striped-bg: rgba(255,255,255,.03); }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .offcanvas { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
html[data-theme="dark"] .dropdown-item { color: var(--color-text); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: #2a2e27; color: var(--color-text); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-theme="dark"] .app-sidebar, html[data-theme="dark"] .bottom-tabbar, html[data-theme="dark"] .mobil-kopf { background: #1a1d19; border-color: var(--color-border); }
html[data-theme="dark"] .sidebar-suche { background: #151714; }
html[data-theme="dark"] .palette-fuss, html[data-theme="dark"] .liq-gruppe, html[data-theme="dark"] .kal-tag.belegt { background: #191c18; }
/* Text auf Akzentflaechen bleibt dunkel (heller Akzent) */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .filter-chip.aktiv,
html[data-theme="dark"] .liq-chip.aktiv, html[data-theme="dark"] .settings-link.active,
html[data-theme="dark"] .kal-tag.heute .kal-nr, html[data-theme="dark"] .mobil-fab-knopf:not(.sekundaer) { color: #0f1f1a; }
html[data-theme="dark"] .brand-mark { color: #fdfdfb; }
html[data-theme="dark"] .sidebar-badge { color: #1b0f0c; }
html[data-theme="dark"] img.logo, html[data-theme="dark"] .beleg-vorschau-bild { background: #fff; }
html[data-theme="dark"] .zeitraum-picker-toggle, html[data-theme="dark"] .zeitraum-picker-panel,
html[data-theme="dark"] .zeitraum-preset { background: var(--color-surface); color: var(--color-text); }

.papierkorb-zeile { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.1rem; border-top: 1px solid var(--color-border); }
.papierkorb-zeile:first-child { border-top: 0; }
.papierkorb-rest { flex: none; font-size: .78rem; color: var(--color-text-muted); }
.papierkorb-rest.knapp { color: var(--color-negative); font-weight: 600; }
.sidebar-badge-leise { background: var(--color-border); color: var(--color-text-muted); }
@media (max-width: 767.98px) { .papierkorb-zeile { flex-wrap: wrap; } .papierkorb-zeile .liq-text { flex-basis: calc(100% - 3.5rem); } }

html.nur-lesen .mobil-fab, html.nur-lesen .bottom-sheet, html.nur-lesen .bottom-sheet-backdrop { display: none !important; }
html.nur-lesen .app-main form[hidden], html.nur-lesen .app-main [hidden] { display: none !important; }

.form-control.feld-fehlt, .form-select.feld-fehlt { border-color: var(--color-negative); background-color: var(--color-negative-soft); }
.form-control.feld-pruefen, .form-select.feld-pruefen { border-color: #d9b34f; background-color: var(--color-warn-soft); }
.pruef-box ul { font-size: .9rem; }

tr.zeile-klickbar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-accent-soft); }

.ku-balken { height: .55rem; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-top: .35rem; }
.ku-fuell { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .5s ease; }
.ku-fuell.ku-achtung { background: #d9b34f; } .ku-fuell.ku-kritisch { background: #d08a3c; } .ku-fuell.ku-ueberschritten { background: var(--color-negative); }
.ku-meldung { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; }
.ku-m-rot { background: var(--color-negative-soft); color: var(--color-negative); }
.ku-m-gelb { background: var(--color-warn-soft); color: var(--color-warn); }
.ku-m-gruen { background: var(--color-accent-soft); color: var(--color-accent); }
.ja-fortschritt { height: .5rem; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.ja-fortschritt > div { height: 100%; background: var(--color-accent); border-radius: 999px; transition: width .5s ease; }
.ja-punkt { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.1rem; border-top: 1px solid var(--color-border); }
.ja-punkt:first-child { border-top: 0; }
@media (max-width: 767.98px) { .ja-punkt { flex-wrap: wrap; } .ja-punkt .liq-text { flex-basis: calc(100% - 3.5rem); } }

.skonto-karte.skonto-aktiv { border-color: #e8dcb4; background: linear-gradient(135deg, var(--color-warn-soft), var(--color-surface) 60%); }
.skonto-edit summary { list-style: none; cursor: pointer; }
.skonto-edit summary::-webkit-details-marker { display: none; }

.dash-bloecke { display: flex; flex-direction: column; }
.dash-block:not(:has(*)) { display: none; }
.dash-block.dash-aus { display: none; }
.dash-edit .dash-block.dash-aus { display: block; opacity: .4; }
.dash-edit .dash-block { outline: 1px dashed var(--color-border); outline-offset: .3rem; margin-bottom: 1.2rem; }
.dash-werkzeug { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; margin-bottom: .6rem; background: var(--color-accent-soft); border-radius: var(--radius-sm); font-size: .88rem; }
@media (max-width: 767.98px) { .dash-block[data-block="ausstehend"] { order: -1; } }

a.liq-tab, a.liq-tab:hover { text-decoration: none; }