/* ============================================================
   EINSTELLUNGEN/STYLE.CSS - Globale Einstellungen (Layout)
   ============================================================ */

/* Seite wie das Dashboard: grauer Hintergrund, volle Breite,
   Abschnitte als weiße Panels (.dashboard-content / .dashboard-panel-section) */
.es-seite #status-area:not(:empty) {
  margin-bottom: 16px;
  padding: 0;
  background: none;
}
.es-seite #status-area .status { margin: 0; }

/* Knopf „Farbe hinzufügen“ rechts neben dem Text */
.es-seite .dashboard-panel-header {
  flex-wrap: nowrap;
}

.es-seite .dashboard-panel-header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.es-seite .dashboard-panel-desc {
  max-width: 760px;
  line-height: 1.5;
}

/* ---------- Reiter ---------- */
.es-tabs {
  margin: 0 0 20px;
}

/* ---------- Vorstand ---------- */
/* 3 Spalten: oben Vorsitz 1/2 + Kassenwart (mit Unterschrift), darunter die Beisitzer */
.es-vorstand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .es-vorstand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .es-vorstand { grid-template-columns: 1fr; }
}

.es-vorstand-hinweis {
  grid-column: 1 / -1;
}

.es-rolle-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper, #fff);
}

/* Unterschrift immer unten in der Karte – alle drei Karten gleich ausgerichtet */
.es-rolle-karte.mit-unterschrift .es-rolle-kontakt { min-height: 36px; }
.es-rolle-karte .es-unterschrift { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.es-unterschrift .us-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.es-unterschrift .us-btn { flex: 1 1 auto; justify-content: center; padding: 6px 10px; white-space: nowrap; }
.es-unterschrift .us-weg { flex: 0 0 auto; }
.es-unterschrift .us-weg { margin-left: 0; padding: 6px 8px; }
.es-unterschrift .us-bild { height: 72px; justify-content: center; }
.es-unterschrift .us-status { min-height: 36px; }

.es-rolle-titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.es-rolle-karte select {
  width: 100%;
}

.es-rolle-kontakt {
  min-height: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.es-unterschrift {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.es-unterschrift-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background:
    conic-gradient(var(--neutral-100) 25%, #fff 0 50%, var(--neutral-100) 0 75%, #fff 0) 0 0 / 14px 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

.es-unterschrift-feld img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.es-unterschrift-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn.es-btn-klein {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* Speichern-Leiste unter Verein & Vorstand */
.es-speichern {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: -8px 0 24px;
}

.es-speichern-hinweis {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark, var(--gold-mittel));
}

/* ---------- Bankkonten ---------- */
.es-konten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.es-konto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper, #fff);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.es-konto:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.es-konto.is-standard {
  border-color: var(--accent-dark, var(--gold-mittel));
}

.es-konto-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.es-konto-name {
  font-size: 16px;
  font-weight: 700;
}

.es-konto-badge {
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-dunkel);
  background: var(--pal-senf-hell);
  border-radius: 999px;
}

.es-konto-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.es-konto-zeile {
  font-size: 13px;
  color: var(--ink-soft);
}

.es-konto-notiz {
  font-size: 13px;
  color: var(--ink-faint, var(--pal-anthrazit-mittel));
}

.es-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 14px;
  cursor: pointer;
}

.es-gruppe {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Logo ---------- */
.es-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.es-logo-vorschau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 130px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background:
    conic-gradient(var(--neutral-100) 25%, #fff 0 50%, var(--neutral-100) 0 75%, #fff 0) 0 0 / 16px 16px;
}

/* zwei Logos nebeneinander */
.es-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.es-logo-block .es-gruppe {
  margin-top: 0;
}

.es-logo-info {
  margin: -4px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Rundes Logo: Vorschau als Kreis */
.es-logo-vorschau.es-logo-rund {
  width: 150px;
  height: 150px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.es-logo-vorschau.es-logo-rund img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.es-logo-vorschau.es-logo-rund .es-logo-leer {
  padding: 0 18px;
}

.es-logo-vorschau img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.es-logo-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-soft);
}

.es-logo-aktionen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.es-logo-aktionen .btn {
  cursor: pointer;
}

/* ---------- Farbkarten ---------- */
.es-farben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.es-farbe {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  font: inherit;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper, #fff);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.es-farbe:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.es-farbe-flaeche {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 92px;
  padding: 14px 16px;
  box-sizing: border-box;
}

.es-farbe-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.es-farbe-nr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  opacity: 0.8;
}

.es-farbe-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  opacity: 0.85;
}

/* drei Sekundärfarben unter der Hauptfarbe */
.es-farbe-stufen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.es-farbe-stufen span {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.es-farbe-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
  font-size: 13px;
}

.es-farbe-beschreibung {
  line-height: 1.4;
  color: var(--ink);
}

.es-farbe-nutzung {
  font-size: 12px;
  color: var(--ink-faint, var(--pal-anthrazit-mittel));
}

.es-leer {
  padding: 14px;
  font-size: 14px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* ---------- Dialog ---------- */
dialog.es-dialog {
  max-width: 640px;
}

.es-muster {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.es-muster-kopf {
  padding: 18px 20px;
  text-align: center;
}

.es-muster-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.es-muster-titel {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.es-muster-streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 8px;
}

.es-muster-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
}

.es-muster-badge {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 999px;
}

.es-muster-knopf {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
}

.es-rolle {
  margin-left: 4px;
  font-weight: 500;
  color: var(--ink-soft);
}

.es-stufen .field {
  min-width: 0;
}

.es-farbwahl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.es-farbwahl input[type="color"] {
  flex: 0 0 auto;
  width: 46px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper, #fff);
  cursor: pointer;
}

.es-farbwahl input[type="text"] {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.es-hint-oben {
  margin: -6px 0 14px;
}

.es-loeschen {
  margin-right: auto;
  color: var(--pal-rot);
}

@media (max-width: 768px) {
  .es-seite .dashboard-panel-header {
    flex-wrap: wrap;
  }

  .es-stufen {
    flex-direction: column;
  }

  .es-logo-vorschau {
    width: 100%;
  }
}

/* Vorstand: Hinweis, wenn die Person kein Vereinsmitglied ist */
.es-kein-mitglied { color: var(--danger); }

/* Konten & Kassen: Art des Kontos */
.es-konto-name { display: inline-flex; align-items: center; gap: 6px; }
.es-konto-icon { font-size: 18px; color: var(--accent-dark); }
.es-konto-art { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.es-konto.es-inaktiv { opacity: .55; }
#k-art-wahl { margin-bottom: 16px; }
#k-art-wahl .tab-button[disabled] { opacity: .35; cursor: not-allowed; }
#konto-dialog [hidden] { display: none !important; }

/* ---------- Unterschriften auf Zuwendungsbestätigungen ---------- */
.es-zuw-wahl { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 10px; }
.es-zuw-option { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 16px; color: var(--ink); font-weight: 500; cursor: pointer; }
.field label.es-zuw-option { text-transform: none; letter-spacing: normal; font-size: 16px; color: var(--ink); }
.es-zuw-option input { width: 18px; height: 18px; }
.es-zuw-vorschau { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.es-zuw-karte { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--paper, #fff); }
.es-zuw-bild { height: 56px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--pal-grau-mittel); padding-bottom: 2px; }
.es-zuw-bild img { max-height: 52px; max-width: 100%; object-fit: contain; }
.es-zuw-bild span { font-size: 12px; color: var(--pal-anthrazit-mittel); padding-bottom: 4px; }
.es-zuw-name { font-weight: 600; font-size: 14px; margin-top: 6px; }
.es-zuw-rolle { font-size: 12px; color: var(--ink-soft); }

/* ---------- Dokument (Vereinssatzung) ---------- */
.es-dok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fff); }
.es-dok-icon { font-size: 28px; color: var(--accent-dark, var(--pal-senf)); }
.es-dok-text { flex: 1 1 220px; min-width: 0; }
.es-dok-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.es-dok-sub { font-size: 12px; color: var(--ink-soft); }
/* „Fassung vom“ und Knopf gleich hoch (46 px) und auf einer Linie */
.field label.es-dok-stand, .es-dok-stand { display: flex; align-items: center; height: 46px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, var(--neutral-50)); overflow: hidden; margin: 0; cursor: text; }
.field .es-dok-stand span { padding: 0 10px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.field .es-dok-stand input[type="date"] { font-weight: 400; color: var(--ink); height: 44px; border: 0; background: transparent; padding: 0 12px 0 0; font-size: 16px; font-family: inherit; min-width: 150px; box-shadow: none; }
.field .es-dok-stand input[type="date"]:focus { outline: none; }
.es-dok-stand:focus-within { border-color: var(--accent, var(--gold)); }
.es-dok-menue { position: relative; }
.btn.es-dok-knopf { height: 46px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.es-dok-knopf [hidden] { display: none; }
.es-dok-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.es-dok-liste[hidden], .es-dok-liste [hidden] { display: none !important; }
.es-dok-liste button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.es-dok-liste button:hover { background: var(--surface, var(--neutral-100)); }
.es-dok-liste .material-icons { font-size: 18px; color: var(--ink-soft); }
.es-dok-liste .es-dok-weg, .es-dok-liste .es-dok-weg .material-icons { color: var(--danger, var(--pal-rot)); }
@media (max-width: 700px) { .es-dok-stand, .es-dok-menue, .btn.es-dok-knopf { flex: 1 1 100%; width: 100%; } }

/* ---------- Darstellung: Auswahl mit Vorschau ---------- */
.es-stil-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: 14px; margin: 6px 0 20px; }
.es-stil-karte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper, #fff); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.es-stil-karte:hover { border-color: var(--pal-grau-mittel); }
.es-stil-karte:has(input:checked) { border-color: var(--login-background, var(--gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-gold) 25%, transparent); }
.es-stil-karte input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; accent-color: var(--login-background, var(--gold)); }
.es-stil-muster { display: flex; align-items: center; justify-content: center; gap: 10px; height: 104px; margin-bottom: 8px; border-radius: 8px; background: var(--neutral-50); padding: 10px 14px; }
.es-stil-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.es-stil-info { font-size: 13px; color: var(--ink-soft); }
/* Muster-Knöpfe */
.es-m-btn { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--neutral-300); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: var(--neutral-700); }
.es-m-btn.es-m-prim { background: var(--login-background, var(--gold)); border-color: var(--login-background, var(--gold)); color: #fff; }
.es-m-rund .es-m-btn { border-radius: 999px; padding: 9px 20px; background: var(--pal-anthrazit-hell); border-color: transparent; }
.es-m-rund .es-m-btn.es-m-prim { background: var(--login-background, var(--gold)); }
/* Muster-Rahmen */
.es-m-rahmen { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 18px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.es-m-legende { position: absolute; top: -8px; left: 10px; padding: 0 6px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent-dark, var(--gold-mittel)); }
.es-m-karte { padding-top: 0; overflow: hidden; border-radius: 12px; }
.es-m-karte .es-m-legende { position: static; margin: 0 -12px 2px; padding: 7px 12px; background: var(--surface, var(--neutral-100)); border-bottom: 1px solid var(--line); color: var(--accent-dark, var(--gold-mittel)); }
.es-m-zeile { height: 10px; border-radius: 8px; background: var(--neutral-200); }
.es-m-zeile.es-m-kurz { width: 60%; }
/* Muster-Etiketten */
.es-m-status { flex-wrap: wrap; gap: 6px; }
.es-m-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 13px; color: var(--nacht-800); }
.es-m-st-m { background: var(--pal-senf-hell); } .es-m-st-s { background: var(--pal-gruen-hell); } .es-m-st-v { background: var(--pal-blau-mittel); }
.es-m-pille .es-m-st { background: #fff; border-radius: 999px; padding: 2px 11px 2px 9px; border: 1px solid var(--neutral-300); }
.es-m-pille .es-m-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.es-m-pille .es-m-st-m { border-color: var(--pal-senf-mittel); } .es-m-pille .es-m-st-m::before { background: var(--pal-senf); }
.es-m-pille .es-m-st-s { border-color: var(--pal-gruen-mittel); } .es-m-pille .es-m-st-s::before { background: var(--pal-gruen); }
.es-m-pille .es-m-st-v { border-color: var(--pal-indigo-mittel); } .es-m-pille .es-m-st-v::before { background: var(--pal-blau); }
/* Muster-Reiter */
.es-m-tabs { display: flex; width: 100%; border-bottom: 2px solid var(--neutral-200); }
.es-m-tab { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--pal-grau); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.es-m-tab.ist-aktiv { color: var(--login-background, var(--gold)); border-bottom-color: var(--login-background, var(--gold)); }
.es-m-segmente { width: auto; gap: 3px; padding: 3px; border: 0; border-radius: 8px; background: var(--pal-anthrazit-tint); }
.es-m-segmente .es-m-tab { border: 0; margin: 0; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.es-m-segmente .es-m-tab.ist-aktiv { background: #fff; color: var(--nacht-800); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* Muster-Symbolknöpfe */
.es-m-symbole { gap: 8px; }
.es-m-sym { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--neutral-300); border-radius: 8px; background: #fff; color: var(--pal-grau); }
.es-m-sym .material-icons { font-size: 18px; }
.es-m-kreis .es-m-sym { width: 38px; height: 38px; border-radius: 50%; border-color: transparent; background: var(--accent-tint, var(--gold-tint)); color: var(--accent-dark, var(--gold-mittel)); }
.es-m-kreis .es-m-sym.es-m-weg { background: var(--danger-tint, var(--pal-rot-hell)); color: var(--danger, var(--pal-rot)); }
/* Muster: runde Symbole in Listen */
.es-m-avatare { gap: 12px; }
.es-m-av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pal-rot); color: #fff; font-weight: 600; font-size: 14px; }
.es-m-av .material-icons { font-size: 20px; }
.es-m-av-mat { background: var(--pal-senf); }
.es-m-hell .es-m-av { background: var(--pal-kupfer-hell); color: var(--pal-koralle-dunkel); box-shadow: inset 0 0 0 1px var(--pal-kupfer-mittel); }
.es-m-hell .es-m-av-mat { background: var(--pal-senf-hell); color: var(--pal-senf-dunkel); box-shadow: inset 0 0 0 1px var(--pal-senf-mittel); }
.es-stil-fehler { margin: -10px 0 18px; padding: 10px 14px; border-radius: 8px; background: var(--danger-tint, var(--pal-rot-hell)); color: var(--danger, var(--pal-rot)); font-size: 14px; }
/* Muster: Kategorie-Etiketten */
.es-m-kat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1.5px solid transparent; }
.es-m-kat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m, currentColor); }
.es-m-kat-1 { --m: var(--pal-gold); background: var(--pal-senf-hell); color: var(--pal-senf-dunkel); }
.es-m-kat-2 { --m: var(--pal-orange); background: var(--pal-senf-hell); color: var(--pal-kupfer-dunkel); }
.es-m-kat-3 { --m: var(--pal-violett); background: var(--pal-anthrazit-tint); color: var(--pal-violett-nacht); }
.es-m-kontur .es-m-kat { border-radius: 999px; padding: 3px 10px; }
.es-m-kontur .es-m-kat::before { display: none; }
.es-m-kontur .es-m-kat { background: #fff; }
.es-m-kontur .es-m-kat-1 { color: var(--pal-senf-dunkel); border-color: var(--pal-gold); }
.es-m-kontur .es-m-kat-2 { color: var(--pal-orange-dunkel); border-color: var(--pal-orange); }
.es-m-kontur .es-m-kat-3 { color: var(--pal-violett-nacht); border-color: var(--pal-violett-mittel); }
/* Muster: Eingabefeld */
.es-m-feld { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.es-m-feld-l { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pal-grau); }
.es-m-eingabe { padding: 9px 12px; border: 1.5px solid var(--neutral-200); border-radius: 8px; background: var(--neutral-100); font-size: 14px; color: var(--nacht-800); }
.es-m-v-rand .es-m-eingabe { background: #fff; border: 1px solid var(--neutral-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-gold) 18%, transparent); border-color: var(--gold); }
/* Muster: Filter-Chips */
.es-m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--neutral-200); border-radius: 999px; background: var(--neutral-50); font-size: 12px; font-weight: 600; color: var(--pal-grau-dunkel); white-space: nowrap; }
.es-m-chip b { font-size: 11px; padding: 0 5px; border-radius: 999px; background: var(--neutral-200); }
.es-m-chip.ist-aktiv { background: var(--neutral-50); border-color: var(--gold-mittel); color: var(--gold-mittel); }
.es-m-v-chip .es-m-chip.ist-aktiv { background: var(--gold); border-color: var(--gold); color: #fff; }
.es-m-v-chip .es-m-chip.ist-aktiv b { background: rgba(255,255,255,.3); }
/* Muster: Menü */
.es-m-menue { display: flex; flex-direction: column; width: 70%; background: var(--neutral-50); border-radius: 8px; overflow: hidden; }
.es-m-mp { padding: 6px 12px; font-size: 13px; color: var(--pal-grau-dunkel); }
.es-m-mp.ist-aktiv { background: var(--gold); color: var(--neutral-800); font-weight: 600; }
.es-m-v-menue .es-m-mp.ist-aktiv { background: var(--pal-senf-hell); box-shadow: inset 4px 0 0 var(--gold); font-weight: 700; }
/* Muster: Hinweis */
.es-m-hinweis { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; border-radius: 8px; background: var(--pal-senf-hell); font-size: 13px; color: var(--nacht-800); }
.es-m-hinweis .material-icons { font-size: 18px; color: var(--gold-mittel); }
.es-m-v-hinweis .es-m-hinweis { background: #fff; border: 1px solid var(--neutral-200); border-left: 4px solid var(--gold); }
/* Muster: Tabelle / Dichte */
.es-m-tabelle { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--neutral-200); border-radius: 8px; overflow: hidden; }
.es-m-z { height: 20px; border-bottom: 1px solid var(--pal-anthrazit-tint); background: #fff; position: relative; }
.es-m-z::after { content: ""; position: absolute; left: 10px; top: 50%; width: 55%; height: 6px; margin-top: -3px; border-radius: 8px; background: var(--neutral-200); }
.es-m-z:last-child { border-bottom: 0; }
.es-m-v-zebra .es-m-z:nth-child(even) { background: var(--neutral-100); }
.es-m-v-kompakt .es-m-z { height: 13px; }
.es-m-v-kompakt .es-m-tabelle::after { content: ""; }
/* Muster: Karte */
.es-m-karte-box { display: flex; flex-direction: column; gap: 8px; width: 80%; padding: 14px; background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; }
.es-m-v-schatten .es-m-karte-box { border-color: transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--nacht-950) 5%, transparent), 0 4px 16px color-mix(in srgb, var(--nacht-950) 8%, transparent); }

/* ---------- Darstellung kompakt: Gruppen in Spalten, kleinere Vorschau ---------- */
.es-stil-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px 22px; margin-top: 6px; }
.es-stil-gruppe { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--neutral-50)); }
.es-stil-gruppe > .es-gruppe { margin: 0 2px; }
.es-stil-gruppen .es-stil-wahl { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.es-stil-gruppen .es-stil-karte { padding: 8px 8px 10px; gap: 2px; border-radius: 12px; }
.es-stil-gruppen .es-stil-karte input { top: 10px; right: 10px; width: 16px; height: 16px; }
.es-stil-gruppen .es-stil-muster { height: 72px; margin-bottom: 6px; padding: 6px 10px; gap: 6px; zoom: .82; overflow: hidden; }
.es-stil-gruppen .es-stil-name { font-size: 14px; padding: 0 4px; }
.es-stil-gruppen .es-stil-info { font-size: 12px; line-height: 1.35; padding: 0 4px; }
.es-stil-gruppen .es-stil-muster { height: 88px; }   /* wegen zoom: sichtbare Höhe ca. 72 px */
.es-stil-gruppen + .es-stil-fehler, .es-stil-gruppe .es-stil-fehler { margin: 0; }
@media (max-width: 560px) { .es-stil-gruppen { grid-template-columns: 1fr; } }
/* Karten dürfen schmaler werden als ihr Inhalt (Reiter, Filter-Chips) */
.es-stil-gruppen { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.es-stil-gruppe, .es-stil-gruppen .es-stil-karte { min-width: 0; }
.es-stil-gruppen .es-stil-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.es-stil-gruppen .es-stil-muster { min-width: 0; flex-wrap: nowrap; justify-content: center; }
.es-stil-gruppen .es-stil-muster > * { flex-shrink: 1; min-width: 0; }
.es-stil-gruppen .es-m-tabs, .es-stil-gruppen .es-m-status { overflow: hidden; }
.es-stil-gruppen .es-stil-muster.es-m-status { flex-wrap: wrap; align-content: center; }
.es-stil-gruppen .es-stil-info { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-stil-gruppen .es-m-btn { padding: 7px 11px; flex-shrink: 0; }
.es-stil-gruppen .es-m-chip { flex-shrink: 0; }
.es-stil-gruppen .es-m-chip:nth-child(3) { display: none; }
.es-stil-gruppen .es-m-sym { flex-shrink: 0; }
/* Auswahlpunkt nicht über der Vorschau, sondern unten rechts neben dem Namen */
.es-stil-karte input { z-index: 3; }
.es-stil-gruppen .es-stil-karte input { top: calc(88px * .82 + 13px); right: 10px; margin: 0; position: absolute; }
.es-stil-gruppen .es-stil-karte { position: relative; }
.es-stil-gruppen .es-stil-name { padding-right: 26px; }
/* Vorschau Logo dunkler Modus */
.es-logo-vorschau.es-logo-dunkel { background: var(--nacht-950); position: relative; }
.es-logo-auto { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--pal-anthrazit-mittel); }
.es-logos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Nummernkreise ---------- */
.nk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 14px; }
.nk-karte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fff); }
.nk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nk-titel { font-weight: 700; font-size: 16px; color: var(--ink); }
.nk-bereich { font-size: 12px; color: var(--ink-soft); }
.nk-beispiel { text-align: right; }
.nk-beispiel-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.nk-beispiel code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--accent-dark, var(--gold-mittel)); }
.nk-felder { display: grid; grid-template-columns: 1.1fr 1.6fr .7fr .7fr 1.8fr .7fr; gap: 8px; }
.nk-felder .field { margin: 0; min-width: 0; }
.nk-felder .field label { font-size: 11px; }
.nk-felder .field :is(input, select) { padding: .5rem .6rem; font-size: 14px; }
.nk-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nk-naechste { font-size: 13px; color: var(--ink-soft); }
.nk-naechste strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.nk-hinweis { flex: 1; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 1100px) { .nk-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nk-liste { grid-template-columns: 1fr; } .nk-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Muster Kürzel & Codes */
.es-m-codes { align-items: center; gap: 8px; }
.es-m-code { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--pal-senf-hell); color: var(--pal-senf-dunkel); box-shadow: inset 0 0 0 1px var(--pal-senf-mittel); }
.es-m-code-gross { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; font-size: 16px; font-weight: 800; }
.es-m-codes-kraeftig .es-m-code { background: var(--pal-gold-hell); color: var(--pal-anthrazit-nacht); box-shadow: none; }

/* ---------- Vorschau Elementfarbe (Dialog) ---------- */
.es-muster-element[hidden] { display: none; }
.es-muster-element {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, var(--neutral-50));
}
.es-mel-spalte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: 12px;
  font-size: 16px;
}
.es-mel-spalte b { flex: 1; font-weight: 600; }
.es-mel-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.es-mel-zahl {
  min-width: 26px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.es-mel-meldung {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
}
.es-mel-meldung .material-icons { font-size: 20px; }
.es-mel-knoepfe { display: flex; gap: 10px; }
.es-mel-knoepfe span {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
#ff-stufen-box[hidden], .es-farbe-stufen[hidden] { display: none; }
.es-farben-offen { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.es-farben-offen[hidden] { display: none; }
.es-farben-offen b { color: var(--ink); font-weight: 600; }
.es-farben-bereich { grid-column: 1 / -1; margin: 10px 0 -2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark, var(--gold-mittel)); }
.es-farben-bereich:first-child { margin-top: 0; }
.es-logo-aktionen .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ===== Reiter Nachbestellen ===== */
.nb-karte:empty { display: none; }
.nb-karte { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.nb-karte-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nb-karte-kopf strong { font-size: 16px; color: var(--ink); }
.nb-karte-kopf .link-accent { margin-left: auto; font-size: 13px; }
.nb-karte-daten { display: grid; gap: 4px; font-size: 14px; color: var(--ink); }
.nb-karte-daten div { display: flex; align-items: center; gap: 8px; }
.nb-karte-daten i { font-size: 16px; color: var(--ink-soft); }
.nb-karte-daten a { color: inherit; }
.nb-karte-an { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.nb-fehlt { color: var(--danger); }
#nb-form textarea { width: 100%; font: inherit; }
.es-aktionen { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ===== Reiter Verknüpfungen ===== */
.vk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.vk-karte { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); }
.vk-karte.is-bald { opacity: .55; border-style: dashed; }
.vk-kopf { display: flex; align-items: center; gap: 12px; }
.vk-icon { width: 40px; height: 40px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-dark) 14%, transparent); }
.vk-icon i { color: var(--accent-dark); font-size: 20px; }
.vk-titel { flex: 1; min-width: 0; }
.vk-titel strong { display: block; font-size: 16px; color: var(--ink); }
.vk-titel small { font-size: 12px; color: var(--ink-soft); }
.vk-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.vk-status i { font-size: 16px; }
.is-ok .vk-status { color: var(--el-meldung-erfolg-dunkel, var(--pal-gruen)); }
.is-fehler .vk-status { color: var(--danger); }
.vk-daten { display: grid; gap: 4px; font-size: 13px; color: var(--ink); }
.vk-daten div { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.vk-daten i { font-size: 16px; color: var(--ink-soft); }
.vk-daten a { color: var(--accent-dark); }
.vk-meldung { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--ink); }
.is-ok .vk-meldung { background: var(--el-meldung-erfolg-hell, var(--surface)); }
.is-fehler .vk-meldung { background: var(--danger-tint); color: var(--danger); }
.vk-meldung small { color: var(--ink-soft); }
.vk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vk-knoepfe .btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.vk-knoepfe .btn i { font-size: 16px; }
.vk-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vk-art { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.vk-art i { color: var(--accent-dark); }
.vk-art strong { display: block; font-size: 13px; }
.vk-art small { font-size: 11px; color: var(--ink-soft); }
.vk-art.active { border-color: var(--accent-dark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-dark) 25%, transparent); }
.vk-art:disabled { opacity: .45; cursor: not-allowed; }
.vk-hilfe { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
#vk-notiz { width: 100%; font: inherit; }
@media (max-width: 640px) { .vk-arten { grid-template-columns: 1fr; } }

/* ===== Reiter Formulare ===== */
.fo-schalter { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; }
.fo-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fo-schalter span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; pointer-events: none; }
.fo-schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.fo-schalter input:checked + span { background: var(--el-meldung-erfolg, var(--pal-gruen)); }
.fo-schalter input:checked + span::after { transform: translateX(18px); }
.vk-meldung.is-hinweis { background: var(--el-meldung-hinweis-hell, var(--pal-senf-hell)); color: var(--el-meldung-hinweis-dunkel, var(--gold-dunkel)); }
.vk-knoepfe a.btn { text-decoration: none; }
#fo-dialog textarea, #ds-dialog textarea { width: 100%; font: inherit; }
/* Muster: Dashboard-Kacheln und -Bereiche */
.es-m-dk { display: flex; flex-direction: column; gap: 5px; width: 42%; padding: 8px 10px; background: #fff; border: 1px solid var(--neutral-200); border-top: 3px solid var(--gold-mittel); border-radius: 8px; }
.es-m-dk-2 { border-top-color: var(--gold); }
.es-m-dk-icon { width: 16px; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--gold-mittel) 22%, #fff); margin-bottom: 3px; }
.es-m-v-kompakt .es-m-dk { flex-direction: row; align-items: center; gap: 8px; border-top: 1px solid var(--neutral-200); border-left: 4px solid var(--gold-mittel); }
.es-m-v-kompakt .es-m-dk-2 { border-left-color: var(--gold); }
.es-m-v-kompakt .es-m-dk-icon { margin: 0; flex: none; }
.es-m-dk-text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.es-m-df { display: flex; flex-direction: column; gap: 6px; width: 80%; padding: 10px; background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 8px; }
.es-m-df-karte { height: 18px; border: 1px solid var(--neutral-200); border-left: 4px solid var(--gold); border-radius: 8px; background: linear-gradient(90deg, var(--pal-senf-hell) 0%, #fff 60%); }
.es-m-v-weiss .es-m-df { background: #fff; }
.es-m-v-weiss .es-m-df-karte { background: #fff; }
/* Muster Dashboard: mehr Kontrast */
.es-m-dk { border-color: var(--pal-grau-mittel); border-top-width: 4px; border-top-color: var(--pal-kupfer); }
.es-m-dk-2 { border-top-color: var(--pal-senf); }
.es-m-dk-icon { background: var(--pal-senf-mittel); }
.es-m-dk .es-m-zeile { background: var(--neutral-400); }
.es-m-dk .es-m-zeile.es-m-kurz { background: var(--neutral-300); }
.es-m-v-kompakt .es-m-dk { border-top: 1px solid var(--pal-grau-mittel); border-left: 5px solid var(--pal-kupfer); }
.es-m-v-kompakt .es-m-dk-2 { border-left-color: var(--pal-senf); }
.es-m-df { background: var(--neutral-200); border-color: var(--pal-grau-mittel); }
.es-m-df-karte { border-color: var(--pal-grau-mittel); border-left: 5px solid var(--pal-senf); background: linear-gradient(90deg, var(--pal-senf-mittel) 0%, #fff 70%); }
.es-m-v-weiss .es-m-df { background: #fff; }
.es-m-v-weiss .es-m-df-karte { background: #fff; }

/* ============================================================
   REITER DESIGN-BAUSTEINE (Nachschlagewerk)
   ============================================================ */
.db-seite .va-form-box { margin-bottom: 16px; }
.db-regeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 24px; padding: 4px 0 8px; }
.db-regel h5 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }
.db-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.db-rund { width: 96px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--paper); border: 1px solid var(--line); }
.db-rund b { font-size: 14px; color: var(--ink); }
.db-rund small { font-size: 11px; color: var(--ink-soft); }
.db-pille { width: 120px; height: 40px; }
.db-schrift { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.db-abstaende { display: flex; align-items: flex-end; gap: 16px; font-size: 12px; color: var(--ink-soft); }
.db-abstaende span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.db-abstaende i { display: block; height: 24px; background: var(--accent-dark, var(--gold-mittel)); border-radius: 2px; }
.db-farben { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink); }
.db-farben span { display: inline-flex; align-items: center; gap: 6px; }
.db-farben i { width: 16px; height: 16px; border-radius: 999px; }
.db-seite .status { margin: 0 0 8px; }
.db-zaehler { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger, var(--pal-rot)); color: #fff;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.db-text { margin: 4px 0 8px; font-size: 14px; color: var(--ink-soft); }
.db-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 4px 0 8px; }
.db-karte { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.db-karte:hover { border-color: var(--accent-dark, var(--gold-mittel)); }
.db-karte-icon { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-soft); margin-bottom: 8px; }
.db-karte-label { font-size: 13px; color: var(--ink-soft); }
.db-karte-zahl { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.db-karte-text strong { font-size: 16px; color: var(--ink); }
.db-karte-text span { font-size: 13px; color: var(--ink-soft); }
.db-symbole { display: flex; flex-wrap: wrap; gap: 32px; }
.db-symbole .es-gruppe { margin: 0 0 8px; }
.db-symbole .table-entry-actions { display: flex; gap: 8px; }
.db-toolbar { margin: 0; }
.db-dialog { max-width: 600px; border: 1px solid var(--line); border-radius: var(--r-dialog, 16px); background: var(--paper);
  box-shadow: var(--schatten-dialog, 0 20px 60px rgba(0,0,0,.18)); overflow: hidden; }
.db-dialog .dialog-inner { padding: 24px; }
.db-dialog h2 { margin: 0 0 16px; font-size: 18px; }
.db-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.db-dash .thd-panel { padding: 16px 20px; height: auto; min-height: 0; }
@media (max-width: 800px) { .db-dash { grid-template-columns: 1fr; } }

/* ===== Farben: Gruppen, Zuordnung, Auswahl ===== */
.es-farbgruppe + .es-farbgruppe { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.es-farbgruppe-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.es-farbgruppe-kopf .es-gruppe { margin: 0 0 4px; }
.es-farbgruppe-info { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 720px; }
.es-farbgruppe-kopf .tw-add-btn { flex: none; }
.es-zuordnung .es-farben-bereich { margin: 16px 0 8px; }
.es-zuordnung .es-farben-bereich:first-child { margin-top: 0; }
.es-zu-liste { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.es-zu-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.es-zu-zeile + .es-zu-zeile { border-top: 1px solid var(--line); }
.es-zu-zeile:hover { background: var(--surface); }
.es-zu-punkt { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.es-zu-text { flex: 1; min-width: 0; }
.es-zu-farbe { font-size: 13px; font-weight: 600; color: var(--ink); }
.es-zu-farbe.is-standard { font-weight: 400; color: var(--ink-soft); }
.es-zu-zeile i { font-size: 18px; color: var(--ink-faint); }

.es-picker { position: fixed; z-index: 3000; width: 300px; max-width: calc(100vw - 16px); padding: 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.es-picker-kopf { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 0 0 10px; }
.es-picker-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 280px; overflow-y: auto; }
.es-picker-farbe, .es-picker-standard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent;
  border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.es-picker-farbe span { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.es-picker-farbe:hover, .es-picker-standard:hover { background: var(--surface); }
.es-picker-farbe.is-aktiv, .es-picker-standard.is-aktiv { border-color: var(--accent-dark); background: var(--accent-tint); }
.es-picker-standard { width: 100%; margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: 10px; color: var(--ink-soft); }

/* Design-Bausteine: Farben */
.db-farbreihe + .db-farbreihe { margin-top: 16px; }
.db-farbreihe h5 { margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.db-farbreihe p { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.db-farbfelder { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.db-farbfeld { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.db-farbfeld span { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.db-stift-icon { font-size: 15px !important; vertical-align: -3px; color: var(--accent-dark); }
[data-es-pane="bausteine"] [data-farbe-el] { cursor: pointer; position: relative; outline: 1px dashed transparent; outline-offset: 3px; }
[data-es-pane="bausteine"] [data-farbe-el]:hover { outline-color: var(--accent-dark); }
[data-es-pane="bausteine"] .status[data-farbe-el]::after { content: "format_color_fill"; font-family: "Material Icons"; font-size: 16px;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }
/* Design-Bausteine: Kanban kompakt (5 Spalten ohne Querscrollen) */
.db-kanban { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; overflow: visible !important; }
.db-kanban .kanban-card { cursor: default; }
[data-es-pane="bausteine"] .kanban-col-header[data-farbe-el] { border-radius: 8px; }
@media (max-width: 1100px) { .db-kanban { grid-template-columns: repeat(5, minmax(200px, 1fr)) !important; overflow-x: auto !important; } }
.db-kanban .kanban-action-group { flex-wrap: wrap; }
.db-kanban .btn-kanban-action { flex: 1 1 auto; justify-content: center; }

/* ===== Auswahlfelder: Farbe je Option ===== */
.es-wahl-suche { max-width: 480px; margin-bottom: 16px; }
.es-wahl { display: grid; gap: 8px; }
.es-wahl-gruppe { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.es-wahl-gruppe > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.es-wahl-gruppe > summary::-webkit-details-marker { display: none; }
.es-wahl-gruppe > summary::after { content: "expand_more"; font-family: "Material Icons"; font-size: 20px; color: var(--ink-faint); margin-left: 4px; }
.es-wahl-gruppe[open] > summary::after { content: "expand_less"; }
.es-wahl-gruppe > summary:hover { background: var(--surface); }
.es-wahl-titel { font-size: 14px; font-weight: 700; color: var(--ink); }
.es-wahl-wo { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-wahl-punkte { display: inline-flex; gap: 3px; }
.es-wahl-punkte i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.es-wahl-zahl { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.es-wahl-zahl.is-leer { font-weight: 400; color: var(--ink-faint); }
.es-wahl-gruppe .es-zu-liste { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.es-wahl-muster { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 13px; font-weight: 600; }

/* ===== Reiter „Farben“: Zuordnen nach Bereichen ===== */
.es-fb-liste { display: grid; gap: 8px; }
.es-fb { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.es-fb-alle { margin-top: 16px; }
.es-fb > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.es-fb > summary::-webkit-details-marker { display: none; }
.es-fb > summary::after { content: "expand_more"; font-family: "Material Icons"; font-size: 20px; color: var(--ink-faint); }
.es-fb[open] > summary::after { content: "expand_less"; }
.es-fb > summary:hover { background: var(--surface); }
.es-fb-titel { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.es-fb-info { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-fb-inhalt { padding: 0 16px 16px; display: grid; gap: 8px; }
.es-fb-feld { margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.es-fb-feld small { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.es-zu-vorschau { flex: none; width: 190px; display: inline-flex; align-items: center; min-height: 32px; }
.es-zu-farbe { display: inline-flex; align-items: center; gap: 6px; }
.es-zu-farbe i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.es-zu-vorschau .btn { pointer-events: none; }
.es-mini-knopf { padding: 6px 14px; font-size: 13px; min-height: 0; }
.es-muster-menue { display: inline-flex; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--el-menue-aktiv, var(--gold)); color: var(--el-menue-aktiv-text, var(--neutral-800)); }
.es-muster-reiter { display: inline-flex; padding: 6px 4px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  color: var(--el-reiter-aktiv, var(--gold)); border-bottom: 2px solid var(--el-reiter-aktiv, var(--gold)); }
.es-muster-akzent { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--accent-dark); }
.es-mini-symbol { width: 32px; height: 32px; margin: 0 !important; }
.es-mini-symbol i { font-size: 18px; }
.es-mini-rund { width: 32px !important; min-width: 32px !important; height: 32px !important; }
.es-mini-rund i { font-size: 17px; }
.es-mini-av { width: 32px; height: 32px; font-size: 12px; }
.es-mini-bar { width: 140px; }
.es-picker-gruppe { margin: 8px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); }
.es-picker-gruppe:first-of-type { margin-top: 0; }
.es-picker { width: 320px; max-height: 70vh; overflow-y: auto; }
/* Design-Bausteine: Menü-Beispiel, anklickbare Elemente */
.db-menue { display: grid; gap: 4px; max-width: 260px; padding: 8px; border-radius: 12px; background: var(--sidebar-background, var(--neutral-50)); border: 1px solid var(--line); }
.db-menue-eintrag { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); }
.db-menue-eintrag i { font-size: 20px; color: var(--ink-soft); }
.db-menue-eintrag.is-aktiv { background: var(--el-menue-aktiv, var(--gold)); color: var(--el-menue-aktiv-text, var(--neutral-800)); font-weight: 600; }
.db-menue-eintrag.is-aktiv i { color: inherit; }
.db-menue-eintrag .nav-neu-badge { margin-left: auto; }
[data-es-pane="bausteine"] [data-ziel] { cursor: pointer; outline: 1px dashed transparent; outline-offset: 3px; }
[data-es-pane="bausteine"] [data-ziel]:hover { outline-color: var(--accent-dark); }
@media (max-width: 760px) { .es-zu-vorschau { width: 120px; } .es-fb-info { display: none; } }

/* ---------- Schriftarten ---------- */
.sf-vorschau { margin: 12px 0; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); }
.sf-vorschau-titel { font-family: var(--app-schrift-titel, inherit); font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.sf-vorschau-text { font-size: 15px; }
/* ---------- Ninox-Übernahme ---------- */
.nx-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nx-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.nx-liste li i { font-size: 22px; }
.nx-liste li b { display: block; }
.nx-liste li small { color: var(--ink-soft); }
.nx-ok i { color: var(--pal-gruen, #2e7d32); }
.nx-wartet i { color: var(--pal-senf-dunkel, #b26a00); }
.nx-leer i { color: var(--ink-soft); }

/* ---------- Nextcloud ---------- */
.nc-ordner { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.nc-zeile { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.nc-auto small { color: var(--ink-soft); font-weight: 400; }
.nc-pfad { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.nc-pfad input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.nc-pfad span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.nc-pfad i { font-size: 18px; }
.nc-ok { color: var(--pal-gruen, #2e7d32); }
.nc-fehlt { color: var(--pal-senf-dunkel, #b26a00); }

/* WooCommerce */
.wc-ergebnis { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-secondary, #f5f5f5); font-size: .9em; }
.wc-ergebnis ul { margin: 6px 0 0 18px; max-height: 220px; overflow: auto; }
.wc-ergebnis details { margin-top: 6px; }

/* „+ Hauptfarbe“ usw.: Hinzufügen-Knopf (war ohne Stil → grauer Browser-Knopf) */
.tw-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed var(--accent-dark, #835c30); border-radius: 8px;
  background: var(--paper, #fff); color: var(--accent-dark, #835c30); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
  white-space: nowrap; transition: background-color .15s, border-color .15s; }
.tw-add-btn .material-icons { font-size: 18px; line-height: 1; }
.tw-add-btn:hover { background: var(--pal-gold-tint, #fdf8ea); border-style: solid; }
.tw-add-btn:focus-visible { outline: 2px solid var(--accent-dark, #835c30); outline-offset: 2px; }

/* ---------- Geschäftsjahre ---------- */
.gj-liste { display: flex; flex-direction: column; gap: 12px; }
.gj-karte { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px 20px; }
.gj-karte.is-aktuell { border-color: var(--accent-dark); }
.gj-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.gj-jahr { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.gj-zeit { font-size: 13px; font-weight: 300; color: var(--ink-soft); }
.gj-platz { flex: 1; }
.gj-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.gj-zahlen > div { display: flex; flex-direction: column; gap: 2px; }
.gj-zahlen b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gj-zahlen span { font-size: 12px; font-weight: 300; color: var(--ink-soft); }
.gj-minus { color: var(--danger); }
.gj-spur { display: block; height: 6px; margin-top: 4px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.gj-spur > i { display: block; height: 100%; background: var(--accent-dark); }
.gj-spur-ek > i { background: var(--ink-faint, #999); }
.gj-nc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.gj-nc > .material-icons { font-size: 20px; color: var(--accent-dark); }
.gj-nc-text { flex: 1; min-width: 200px; color: var(--ink-soft); }
.gj-meldung:not(:empty) { margin-top: 10px; }
.gj-ordner details { margin-top: 10px; font-size: 13px; }
.gj-ordner summary { cursor: pointer; font-weight: 500; }
.gj-ordner ul { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 24px; }
.gj-ordner li { display: flex; align-items: center; gap: 6px; padding: 2px 0; break-inside: avoid; font-weight: 300; }
.gj-ordner li .material-icons { font-size: 16px; color: var(--ink-faint, #999); }
.gj-ordner li.gj-da .material-icons { color: var(--pal-gruen, #2e7d32); }
.gj-ordner li.gj-fehlt { color: var(--danger); }
.gj-ordner li.gj-fehlt .material-icons { color: var(--danger); }
@media (max-width: 700px) { .gj-zahlen { grid-template-columns: 1fr; } .gj-ordner ul { columns: 1; } }

/* Nextcloud: Kalender für die Tagesübersicht */
.nc-kal-liste { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.nc-kal { display: inline-flex; align-items: center; gap: 8px; }
.nc-kal-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ===== Reiter Produkte (produktdaten.js) ===== */
.pd-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-scroll { overflow-x: auto; }
.pd-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-tabelle th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pd-tabelle td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pd-tabelle input[type=text], .pd-tabelle input[type=url], .pd-tabelle input[type=number], .pd-tabelle select { width: 100%; min-width: 0; padding: 6px 8px; font: inherit; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); }
.pd-tabelle input:hover, .pd-tabelle select:hover { border-color: var(--line); }
.pd-tabelle input:focus, .pd-tabelle select:focus { border-color: var(--accent-dark, var(--gold-mittel)); background: var(--paper, #fff); outline: none; }
.pd-tabelle input[type=number] { max-width: 90px; }
.pd-tabelle .pd-w-nr { width: 64px; }
.pd-tabelle .pd-kurz { max-width: 90px; }
.pd-mitte { text-align: center !important; }
.pd-ok, .pd-offen, .pd-fehler { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.pd-ok { color: var(--ink-soft); }
.pd-offen { color: var(--ink-soft); opacity: .7; }
.pd-fehler { color: #b3261e; }
.pd-ok .material-icons, .pd-offen .material-icons, .pd-fehler .material-icons { font-size: 16px; }
.pd-grau { color: var(--ink-soft); }
.pd-logo { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 36px; border: 1px dashed var(--line); border-radius: 6px; cursor: pointer; color: var(--ink-soft); overflow: hidden; }
.pd-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-ergebnis { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
@media (max-width: 700px) { .pd-tabelle { font-size: 13px; } .pd-tabelle th { font-size: 10px; } }
.pd-tabelle [data-f=Name] { min-width: 150px; }
.pd-tabelle [data-f=Artikeltyp], .pd-tabelle [data-f=Versand] { min-width: 130px; }
.pd-tabelle [data-f=Steuersatz] { min-width: 76px; }
.pd-tabelle [data-f=Slug], .pd-tabelle [data-f=Webseite] { min-width: 140px; }
.pd-fortschritt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pd-balken { height: 14px; border-radius: 8px; background: var(--pal-grau-tint, #ececec); border: 1px solid var(--pal-grau-hell, #d6d6d6); overflow: hidden; }
.pd-balken i { display: block; height: 100%; min-width: 4px; background: linear-gradient(90deg, var(--gold-mittel, #e0b400), var(--gold, #f2c718)); border-radius: 8px; transition: width .4s; }
.pd-balken.is-fertig i { background: var(--pal-gruen, #5e8c77); }
.pd-balken.is-fehler i { background: var(--pal-beere, #9b5367); }
.pd-zahlen { font-size: 14px; }
.pd-jetzt { font-size: 13px; color: var(--ink-soft); }
.pd-ergebnis ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.pd-ergebnis li { margin-bottom: 4px; }
.pd-tabelle th.pd-gruppe { text-align: center; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent-dark, var(--gold-mittel)); border-bottom: 2px solid var(--gold, #f2c718); }
.pd-pre { white-space: pre-wrap; font-size: 12px; background: var(--pal-grau-tint, #f4f4f4); padding: 8px; border-radius: 6px; max-height: 320px; overflow: auto; }

/* ===== Fortschrittsanzeige (Senden, Ordnen) ===== */
.pd-fs { display: flex; flex-direction: column; gap: 12px; }
.pd-fs-kopf { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pd-fs-kopf .material-icons { font-size: 22px; }
.pd-fs-status { margin-left: auto; font-weight: 600; font-size: 14px; }
.pd-fs-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .pd-fs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-fs-kachel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--paper, #fff); }
.pd-fs-kachel span { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); }
.pd-fs-kachel b { font-size: 24px; line-height: 1.2; }
.pd-fs-kachel small { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.pd-fs-jetzt { font-size: 13px; color: var(--ink-soft); }
.pd-fs-liste summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.pd-fs-anzahl { display: inline-block; min-width: 22px; text-align: center; font-size: 11px; background: var(--pal-grau-tint, #eee); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.pd-fs-liste ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.pd-fs-liste li { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.pd-fs-liste li:last-child { border-bottom: 0; }
.pd-fs-nr { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-fs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-fs-detail { font-size: 12px; color: var(--ink-soft); text-align: right; }
@keyframes pd-dreh { to { transform: rotate(360deg); } }
.pd-fs-kopf .material-icons.pd-dreht { animation: pd-dreh 1.2s linear infinite; }
.pd-fs-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 800px) { .pd-fs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-aufr { margin: 8px 0 0; padding-left: 18px; font-size: 13px; max-height: 260px; overflow: auto; }
.pd-aufr small { color: var(--ink-soft); margin-left: 6px; }

/* ===== Reiter Formulare (formulare.js) ===== */
.fo-liste { display: flex; flex-direction: column; gap: 12px; }
.fo-karte { border: 1px solid var(--line, #e3e1dc); border-radius: 14px; padding: 14px; background: #fff; }
.fo-karte.is-aus { opacity: .75; background: var(--surface, #f8f7f4); }
.fo-kopf { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; }
.fo-icon { color: var(--accent-dark, #835c30); font-size: 26px; }
.fo-titel b { display: block; font-size: 16px; }
.fo-titel small { display: block; color: var(--muted, #888); font-size: 13px; line-height: 1.4; }
.fo-schalter-box { display: flex; align-items: center; gap: 8px; }
.fo-zustand { font-size: 13px; color: var(--muted, #888); }
.fo-link { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fo-link input { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.fo-edit { margin-top: 12px; }
.fo-edit[hidden], .fo-details[hidden] { display: none !important; }
.fo-tage { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fo-check { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface, #f8f7f4); border: 1px solid var(--line, #e3e1dc); }
.fo-check ul { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fo-check li { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; }
.fo-check li .material-icons { font-size: 18px; margin-top: 1px; }
.fo-check li.ok .material-icons { color: var(--pal-gruen, #2e7d32); }
.fo-check li.fehlt .material-icons { color: var(--danger, #c62828); }
.fo-check li.info .material-icons { color: var(--accent-dark, #835c30); }
.fo-filter { width: auto; min-width: 200px; }
.fo-status { border: 0; cursor: pointer; font: inherit; }
.fo-pre { white-space: pre-wrap; font: inherit; background: var(--surface, #f8f7f4); padding: 10px; border-radius: 10px; }
.fo-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0 0 8px; }
.fo-dl dt { color: var(--muted, #888); }
.fo-dl dd { margin: 0; overflow-wrap: anywhere; }
.es-fehler { color: var(--danger, #c62828); }