:root {
  --bg: #eef1f5;
  --surface: #ffffff;
  --border: #cdd4dd;
  --text: #121922;
  --muted: #46515f;
  --label: #28313c;
  --primary: #1559c4;
  --primary-dark: #11489f;
  --danger: #c62f2f;
  --danger-dark: #a82626;
  --success: #1f8a4c;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --sidebar-bg: #1e2e5d;
  --radius: 8px;
}

body { -webkit-font-smoothing: auto; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------- Login (moderne Optik mit schräger Teilung) ---------- */
.login-screen { min-height: 100vh; }
.login-wrap { display: flex; min-height: 100vh; width: 100%; }

/* Marken-Seite (links) */
.login-brand {
  flex: 1.1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 22% 18%, rgba(99,140,235,0.26) 0%, transparent 55%),
    linear-gradient(135deg, #243a73 0%, #1b2a55 55%, #111c3c 100%);
}
.login-brand-inner { position: relative; z-index: 1; max-width: 420px; }
.login-brand-roof {
  position: absolute;
  right: -120px;
  bottom: -10px;
  width: 1300px;
  height: auto;
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1100px) { .login-brand-roof { width: 900px; right: -80px; } }
.login-brand-logo { width: 205px; max-width: 72%; margin-bottom: 32px; }
.login-brand h1 { font-size: 33px; line-height: 1.2; margin: 0 0 16px; font-weight: 700; letter-spacing: 0.2px; }
.login-brand p { font-size: 15px; color: #c8d2ea; margin: 0 0 28px; line-height: 1.65; }
.login-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.login-features li {
  position: relative; padding-left: 32px; color: #e6ebf7; font-size: 15px; line-height: 1.45;
}
.login-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #ffffff;
  background: rgba(127,168,255,0.30);
}

/* Formular-Seite (rechts) */
.login-form-panel {
  flex: 0.9;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* Formular etwas weiter nach links statt mittig */
  padding: 40px 32px 40px 9%;
}
.login-form { width: 100%; max-width: 360px; }
.login-form-logo { display: none; }
.login-form h2 { margin: 0 0 6px; font-size: 27px; color: var(--text); }
.login-sub { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.login-field { display: block; margin-bottom: 18px; }
.login-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--label); margin-bottom: 6px; }
.login-field input { padding: 12px 14px; font-size: 15px; }
.login-submit { padding: 13px; font-size: 15px; margin-top: 4px; }
#login-error { margin-top: 12px; text-align: center; }

/* Schmaler Bildschirm: nur Formular auf heller Fläche, Logo darüber */
@media (max-width: 820px) {
  .login-wrap { display: block; background: var(--surface); }
  .login-brand { display: none; }
  .login-form-panel { min-height: 100vh; justify-content: center; padding: 40px 24px; }
  .login-form-logo { display: block; width: 160px; max-width: 60%; margin: 0 auto 26px; }
}

/* ---------- Layout ---------- */
.app-screen { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: #e3e9f2;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  flex-shrink: 0;
  /* bleibt beim Scrollen stehen – Navigation und Abmelden-Button immer sichtbar */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  padding: 4px 6px 22px;
}
.brand img {
  display: block;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
}
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav a {
  color: #e3e9f2;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 500;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar nav a.active { background: var(--primary); color: #fff; }

/* ---------- Fuß der Seitenleiste: Hilfe, angemeldeter Benutzer ---------- */
.sidebar-hilfe {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #e3e9f2;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-hilfe:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar-hilfe.active { background: var(--primary); color: #fff; }
.hilfe-symbol {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.sidebar-benutzer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.sidebar-benutzer:hover, .sidebar-benutzer:focus-visible, .sidebar-benutzer.is-offen {
  background: rgba(255,255,255,0.07);
  outline: none;
}
.benutzer-kreis {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.benutzer-text { min-width: 0; line-height: 1.25; }
.benutzer-text strong {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benutzer-rolle { font-size: 11px; color: rgba(255,255,255,0.6); }

/* ---------- Kontextmenü ---------- */
.kontextmenue {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.kontextmenue-eintrag {
  display: block;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.kontextmenue-eintrag:hover, .kontextmenue-eintrag:focus-visible {
  background: var(--bg);
  outline: none;
}
.kontextmenue-eintrag.gefaehrlich { color: var(--danger); }
.kontextmenue-trenner { height: 1px; margin: 5px 4px; background: var(--border); }

.content { flex: 1; padding: 28px 32px; overflow-x: auto; }

/* ---------- Typo / Header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header h2 { margin: 0; font-size: 22px; }
.page-header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  margin: 0 0 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
h3 { margin: 0 0 12px; font-size: 17px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #f0f2f5; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-dark); }
.btn-ghost { background: transparent; border: 1px solid var(--border); }
.btn-block { width: 100%; margin-top: 8px; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Aktionsspalte einer Belegliste: Die Knöpfe bleiben in einer Zeile. Bricht die
   Reihe um, rutscht ein Knopf unter die anderen, die Zeile wird doppelt so hoch,
   und die Liste steht nicht mehr in einer Flucht. Lieber bekommt die Spalte ihre
   Breite und eine andere gibt sie ab. */
.btn-row-fest { flex-wrap: nowrap; white-space: nowrap; }

/* ---------- Inputs ---------- */
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
/* Haken, Auswahlknöpfe, Farb- und Dateifelder sind keine Textfelder – die
   Breitenregel oben darf sie nicht aufblähen. */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--primary);
  vertical-align: middle;
}
input[type="color"] {
  width: 46px;
  height: 34px;
  min-width: 46px;
  flex: 0 0 auto;
  padding: 2px;
  cursor: pointer;
}
input[type="file"] {
  width: auto;
  max-width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--bg);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,111,235,0.12);
}
textarea { resize: vertical; min-height: 70px; }
/* Ein Feld ist so breit, wie sein Inhalt es verlangt – nicht so breit, wie der
   Platz es zulässt. Das Raster füllt die Karte mit gleich breiten Spalten:
   ein Feld belegt eine Spalte, „breit" zwei, „full" die ganze Zeile. */
.field { display: block; margin-bottom: 12px; min-width: 0; }
.field > span { display: block; font-size: 13px; color: var(--label); font-weight: 600; margin-bottom: 4px; }
.field > span.muted, .field > .feld-hinweis {
  color: var(--muted); font-weight: 400; font-size: 12px; margin: 4px 0 0; line-height: 1.35;
}
.field.kurz   > input, .field.kurz   > select { max-width: 110px; }
.field.mittel > input, .field.mittel > select { max-width: 180px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 16px;
  align-items: start;
}
.form-grid > .breit { grid-column: span 2; }
.form-grid > .full  { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .breit { grid-column: 1 / -1; }
}
.form-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 18px; }
.login-version { margin-top: 14px; text-align: center; font-size: 12px; color: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- Einstellungen: aufklappbare Oberpunkte (Akkordeon) ---------- */
.acc-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 16px 20px;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.acc-head:hover { background: rgba(21, 89, 196, 0.05); }
.acc-sub { font-weight: 400; font-size: 13px; color: var(--muted); }
.acc-chevron { margin-left: auto; color: var(--muted); transition: transform 0.2s ease; }
.acc-chevron::before { content: '\25B8'; font-size: 15px; }
.acc-item.open .acc-chevron { transform: rotate(90deg); }
.acc-body { display: none; padding: 2px 20px 20px; }
.acc-item.open .acc-body { display: block; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 13px; color: var(--label); font-weight: 700; }
tbody tr:hover { background: #f7f9fb; cursor: default; }
tr.clickable { cursor: pointer; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* ---------- Suche ---------- */
.search-bar { display: flex; gap: 10px; margin-bottom: 18px; }
.search-bar input { max-width: 360px; }

/* ---------- Positionen / Rechnung ---------- */
.position-row {
  display: grid;
  grid-template-columns: 26px 1fr 160px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.position-row:last-child { border-bottom: none; }
.position-row input[type="checkbox"] { width: 18px; height: 18px; }
.position-row .pos-label { font-weight: 500; }
.position-row .amount-input { text-align: right; }
.position-row.disabled { opacity: 0.5; }
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 0;
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: #fafbfc;
  transition: all 0.15s;
  cursor: pointer;
}
.dropzone.dragover { border-color: var(--primary); background: rgba(31,111,235,0.06); color: var(--primary); }
.doc-list { list-style: none; padding: 0; margin: 14px 0 0; }
.doc-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px;
  background: #fff;
}
.doc-list li .doc-name { font-weight: 500; }
.doc-list li .doc-meta { font-size: 12px; color: var(--muted); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-bar { background: #e8f3ec; color: var(--success); }
.badge-ueberweisung { background: #e8eefb; color: var(--primary); }
.badge-aktiv { background: #e8f3ec; color: var(--success); }
.badge-storniert { background: #fdeaea; color: var(--danger); }
.badge-storno { background: #fbf0e0; color: #b9770e; }
tr.row-storniert td:not(:last-child) { color: var(--muted); text-decoration: line-through; }

/* ---------- Hinweis-Banner ---------- */
.notice { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; }
.notice-storno { background: #fbf0e0; border: 1px solid #f0d9b0; color: #8a5a0b; }

/* ---------- Toast ---------- */
.toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast {
  background: #14202e; color: #fff; padding: 12px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2); font-size: 14px; max-width: 360px;
  animation: slideIn 0.2s ease;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,40,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 20px;
}
/* Die Belegvorschau bekommt schmalere Ränder als die kleinen Rückfragefenster */
.modal-backdrop:has(.modal-vorschau) { padding: 12px; }
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  width: 100%; max-width: 440px; padding: 24px;
}
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Statistik-Kacheln ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 800px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.stat-value { font-size: 20px; font-weight: 700; color: var(--text); }
.stat-value.stat-big { font-size: 26px; color: var(--primary); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 2px; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.back-link { color: var(--primary); text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 12px; }
.back-link:hover { text-decoration: underline; }

/* ---------- Positionsliste: Kopfzeile und Betragsspalte ---------- */
.position-row.position-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--border);
}
.position-row.position-head:hover { background: none; }
.position-row .pos-amount { text-align: right; font-weight: 600; }
.position-row select { padding: 6px 8px; }

/* ---------- Rechnungsvorschau ---------- */
.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.preview-frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f4f6f8;
}

/* ---------- „Was ist neu" ---------- */
.modal.modal-wide { max-width: 620px; }
.whatsnew-list {
  margin: 4px 0 18px;
  padding-left: 20px;
  max-height: 55vh;
  overflow-y: auto;
}
.whatsnew-list li { margin-bottom: 10px; line-height: 1.45; }
.modal-actions.modal-actions-split { justify-content: space-between; align-items: center; }
.whatsnew-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.whatsnew-check input { width: 16px; height: 16px; }

/* ---------- Benutzerverwaltung / Protokoll ---------- */
.badge-rolle {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #e8eef7;
  color: #24405f;
}
.badge-inaktiv { background: #f0e3e3; color: #8a3535; }
.protokoll-tabelle td { font-size: 13px; vertical-align: top; }
.protokoll-zeit { white-space: nowrap; color: var(--muted); }
.protokoll-ip { white-space: nowrap; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.app-version { font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; padding: 6px 0 0; }

/* ---------- Offene Posten ---------- */
.kpi-row { display: flex; gap: 28px; flex-wrap: wrap; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-value { font-size: 22px; }
.kpi-warn .kpi-value { color: var(--danger); }
.row-ueberfaellig td { background: #fdf3f3; }
.badge-offen { background: #e9eef5; color: #33475f; }
.badge-ueberfaellig { background: #f7dede; color: #8a2b2b; }
.linklike {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}
.linklike:hover { color: var(--primary-dark); }

/* ---------- Ordner-Reiter (wie in der Domainverwaltung) ---------- */
.tab-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tab-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-bottom: 0;
  background: none;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 9px 9px 0 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }
.tab-btn.is-active {
  color: var(--primary);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
}
.tab-panel { display: flex; flex-direction: column; gap: 18px; }
.tab-panel.hidden { display: none !important; }
@media (max-width: 560px) {
  .tab-bar { gap: 2px; }
  .tab-btn { padding: 8px 11px; font-size: 12.5px; }
}

/* Abschnittskopf innerhalb eines Reiters */
.card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-head h3 { margin: 0; }
.card-sub { font-size: 13px; color: var(--muted); }

/* ---------- Logo und Briefkopf ---------- */
.branding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.branding-slot {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  flex-wrap: wrap;
}
.branding-bild {
  width: 128px;
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, #f0f2f4 25%, transparent 25%, transparent 75%, #f0f2f4 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, #f0f2f4 25%, #fff 25%, #fff 75%, #f0f2f4 75%) 8px 8px / 16px 16px;
  padding: 8px;
  flex-shrink: 0;
}
.branding-vorschau { max-width: 100%; max-height: 68px; display: block; }
.branding-leer { font-size: 12px; color: var(--muted); text-align: center; }
.branding-text { flex: 1; min-width: 260px; }

/* ---------- Unveränderbarer Zugang ---------- */
.row-gesperrt td { background: #f6f7f9; color: var(--muted); }
.row-gesperrt input, .row-gesperrt select { opacity: 0.6; }

/* ---------- Hinweis auf veraltete Programmdateien ---------- */
.version-hinweis {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
  padding: 12px 16px;
  background: #fff6e0;
  border: 1px solid #e3c680;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14px;
}

/* ---------- Farbwahl ---------- */
.farbwahl { display: flex; align-items: center; gap: 8px; }
.farbwahl input[type="color"] { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.farbwahl .farb-hex {
  width: 96px;
  min-width: 96px;
  flex: 0 0 auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  text-transform: lowercase;
}

/* ---------- Hilfeseite ---------- */
/* Zwei Spalten: links die Kapitel, rechts genau eines davon */
.hilfe-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
.hilfe-nav {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin-bottom: 16px;
}
.hilfe-suche { margin-bottom: 10px; }
.hilfe-liste-nav { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hilfe-eintrag {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--text);
}
.hilfe-eintrag:hover { background: var(--bg); }
.hilfe-eintrag.is-aktiv {
  background: var(--bg);
  border-left-color: var(--primary);
}
.hilfe-eintrag strong { display: block; font-size: 14px; font-weight: 600; color: var(--primary); }
.hilfe-eintrag.is-aktiv strong { color: var(--primary-dark, var(--primary)); }
.hilfe-eintrag span { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); }

.hilfe-inhalt { min-width: 0; }
.hilfe-untertitel { margin: -4px 0 16px; font-size: 14px; }
.hilfe-blaettern {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .hilfe-layout { grid-template-columns: 1fr; }
  .hilfe-nav { position: static; max-height: none; }
  .hilfe-liste-nav { max-height: 320px; }
}

.hilfe-kapitel { scroll-margin-top: 16px; }
.hilfe-inhalt p, .hilfe-kapitel p { margin: 0 0 10px; max-width: 78ch; line-height: 1.55; }
.hilfe-zwischentitel {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--label);
}
.hilfe-kapitel > h3 + .hilfe-zwischentitel { margin-top: 6px; }
.hilfe-liste, .hilfe-schritte { margin: 0 0 12px; padding-left: 20px; max-width: 78ch; }
.hilfe-liste li, .hilfe-schritte li { margin-bottom: 5px; line-height: 1.5; }
.hilfe-kasten {
  margin: 0 0 12px;
  padding: 10px 13px;
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  max-width: 78ch;
}
.hilfe-kasten.hilfe-achtung { border-left-color: var(--danger); }
.hilfe-tabelle { font-size: 14px; }
.hilfe-tabelle td { vertical-align: top; }
.hilfe-hervor { box-shadow: 0 0 0 2px var(--primary); transition: box-shadow .3s; }

/* ---------- Briefpapier ---------- */
.branding-pdf {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 62px;
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
}
.branding-pdf-marke {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.haken-zeile {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
}
.haken-zeile input[type="checkbox"] { margin-top: 2px; }
.haken-zeile strong { display: block; font-weight: 600; font-size: 14px; }

/* ---------- Belegliste ---------- */
.beleg-tabelle td { vertical-align: top; }
.beleg-nummer { font-variant-numeric: tabular-nums; }
.empfaenger-name { color: var(--primary); text-decoration: none; font-weight: 500; }
.empfaenger-name:hover { text-decoration: underline; }
.empfaenger-zusatz { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Aufklapper vor der Gutschrift: darunter erscheint die stornierte Rechnung */
.aufklapper {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
}
.aufklapper:hover { background: var(--bg); color: var(--text); }

/* Die aufgeklappte, stornierte Rechnung gehört sichtbar zur Gutschrift darüber:
   deutlich eingerückt, abgesetzter Grund und eine Marke an der linken Kante. */
.zeile-untergeordnet > td { background: var(--bg); }
.zeile-untergeordnet > td:first-child {
  /* Die Nummer der Gutschrift steht bereits hinter dem Aufklapper (24 + 12 px).
     Der Einzug muss darueber hinausgehen, sonst sieht man ihn kaum. */
  padding-left: 84px;
  position: relative;
}
.zeile-untergeordnet > td:first-child::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 0;
  bottom: 50%;
  width: 10px;
  border-left: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* Etwas mehr Luft in der Belegliste – die Zeilen tragen zwei bis drei Angaben */
.beleg-tabelle td { padding-top: 11px; padding-bottom: 11px; }

.versendet-marke {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.btn-icon {
  padding: 4px 10px;
  font-size: 22px;
  line-height: 1.15;
  min-width: 44px;
}
.btn-icon:hover { background: var(--bg); }

/* Ein Knopf, der in dieser Zeile nicht gilt, aber seinen Platz behält – damit
   die Symbole daneben in jeder Zeile an derselben Kante stehen. */
.knopf-platzhalter { visibility: hidden; }

/* Rahmen für den Direktdruck. Er bekommt eine echte Größe und wird nur aus dem
   Bild geschoben: Ein Rahmen ohne Ausmaße stellt das PDF in manchen Browsern
   gar nicht erst dar, und dann gibt es auch nichts zu drucken. */
.druck-rahmen {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 800px;
  height: 1100px;
  border: 0;
}

/* ---------- Belegvorschau ---------- */
.modal-vorschau {
  /* So groß wie das Fenster es hergibt – ein Beleg will gelesen werden, nicht
     erraten. Die Ränder bleiben schmal, den Rest bekommt das Dokument. */
  max-width: min(1320px, 96vw);
  width: 96vw;
  height: min(94vh, 1500px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vorschau-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vorschau-kopf h3 { margin: 0; }
.vorschau-rahmen {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.vorschau-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.vorschau-versendet {
  font-size: 13px;
  color: #8a5300;
  font-weight: 500;
}
@media (max-width: 700px) {
  .modal-vorschau { height: 96vh; width: 98vw; padding: 10px; }
  .vorschau-fuss { justify-content: flex-end; }
}

.erinnert-marke { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------- E-Mail-Vorschau in den Einstellungen ---------- */
.mail-betreff { margin-bottom: 8px; font-size: 14px; }
.mail-vorschau {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #eef1f5;
}
@media (max-width: 760px) { .mail-vorschau { height: 420px; } }

.empfaenger-zeile { padding: 7px 0; }
.empfaenger-zeile + .empfaenger-zeile { border-top: 1px solid var(--border); }
.empfaenger-zeile strong { font-size: 14px; font-weight: 600; word-break: break-all; }

/* Zähler im Reiter der Kundenakte */
.tab-zahl {
  display: inline-block;
  min-width: 18px;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.tab-btn.is-active .tab-zahl { background: rgba(255,255,255,0.25); color: inherit; }

/* ---------- Hilfe: Themen zum Aufklappen ---------- */
.hilfe-gruppe { border-bottom: 1px solid var(--border); }
.hilfe-gruppe:last-of-type { border-bottom: 0; }
.hilfe-gruppe > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.hilfe-gruppe > summary::-webkit-details-marker { display: none; }
.hilfe-gruppe > summary::before {
  content: "▸";
  margin-right: 2px;
  font-size: 11px;
  color: var(--muted);
  transition: transform .15s;
}
.hilfe-gruppe[open] > summary::before { content: "▾"; }
.hilfe-gruppe > summary:hover { background: var(--bg); }
.hilfe-gruppe-zahl {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.hilfe-gruppe-inhalt { padding: 0 0 6px 14px; }
.hilfe-gruppe-inhalt .hilfe-eintrag { padding: 6px 10px; }
.hilfe-gruppe-inhalt .hilfe-eintrag strong { font-weight: 500; }

/* Tür-Symbol rechts in der Benutzeranzeige */
.sidebar-benutzer { position: relative; }
.abmelde-tuer {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgba(227,233,242,0.65);
  cursor: pointer;
}
.abmelde-tuer:hover, .abmelde-tuer:focus-visible {
  background: rgba(255,255,255,0.12);
  color: #fff;
  outline: none;
}