/* ===================================================================
   Bootstrap-5-Brücke: das Projekt-Theme für Bootstrap-Komponenten.
   Ladereihenfolge: bootstrap.min.css → DIESE Datei → style.css/Seiten-CSS.
   Seit dem Bootstrap-Umbau (v2.67) ist das Markup echtes Bootstrap
   (card, btn, badge, dropdown, table …) – diese Datei stellt die Optik
   („Apple-Richtung“: Haarlinien, weiche Schatten, Projektfarben) über
   Bootstraps eigene CSS-Variablen ein. Keine Inline-Styles, keine
   Eigenbau-Klassen: Theming läuft ausschließlich über --bs-*-Variablen.
   =================================================================== */
:root {
  --bs-body-bg: var(--kalk, #F5F7FA);
  --bs-body-color: var(--tinte, #1F2937);
  --bs-body-font-family: var(--body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", sans-serif);
  --bs-body-font-size: 14px;
  --bs-border-color: var(--linie, #E5E7EB);
  --bs-secondary-color: var(--grau, #6B7280);
  --bs-secondary-bg: var(--papier, #F8FAFC);
  --bs-tertiary-bg: var(--kalk, #F5F7FA);
  --bs-link-color: var(--blatt, #2563EB);
  --bs-link-hover-color: var(--blatt-tief, #1D4ED8);
  --bs-primary: var(--blatt, #2563EB);
  --bs-danger: var(--ziegel, #D9382C);
  --bs-warning: var(--amber, #C77D0A);
  --bs-success: var(--blatt, #33A05C);
  --bs-border-radius: 10px;
  --bs-font-monospace: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  /* Subtle-Palette für Badges (badge bg-*-subtle text-*-emphasis) */
  --bs-success-bg-subtle: var(--blatt-hell, #E9F6EE);
  --bs-success-text-emphasis: var(--blatt-tief, #23824A);
  --bs-warning-bg-subtle: var(--amber-hell, #FDF3E2);
  --bs-warning-text-emphasis: var(--amber-text, #8F5A00);
  --bs-danger-bg-subtle: var(--ziegel-hell, #FBEAE8);
  --bs-danger-text-emphasis: var(--ziegel, #D9382C);
  --bs-secondary-bg-subtle: var(--kalk, #F5F5F7);
  --bs-secondary-text-emphasis: var(--tinte, #1F2937);
}

/* ---------- Buttons: Projektmaße (13 px, Pill-Radius, fette Schrift) ---------- */
.btn {
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 14px;
  --bs-btn-border-radius: 10px;
  line-height: normal;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-font-size: 12px;
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 10px;
  --bs-btn-border-radius: 8px;
}
.btn-primary {
  --bs-btn-bg: var(--blatt, #2563EB);
  --bs-btn-border-color: var(--blatt, #2563EB);
  --bs-btn-hover-bg: var(--blatt-tief, #1D4ED8);
  --bs-btn-hover-border-color: var(--blatt-tief, #1D4ED8);
  --bs-btn-active-bg: var(--blatt-tief, #1D4ED8);
  --bs-btn-active-border-color: var(--blatt-tief, #1D4ED8);
}
.btn-outline-primary {
  --bs-btn-color: var(--blatt, #2563EB);
  --bs-btn-border-color: var(--blatt, #2563EB);
  --bs-btn-hover-bg: var(--blatt, #2563EB);
  --bs-btn-hover-border-color: var(--blatt, #2563EB);
}
/* btn-light = der frühere „rahmen“-Knopf: dezente graue Fläche, ohne Rand */
.btn-light {
  --bs-btn-bg: rgba(0, 0, 0, .05);
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--tinte, #1F2937);
  --bs-btn-hover-bg: rgba(0, 0, 0, .09);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--tinte, #1F2937);
  --bs-btn-active-bg: rgba(0, 0, 0, .12);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--tinte, #1F2937);
}
/* btn-dark = der frühere „dunkel“-Knopf (Tanne/Tinte) */
.btn-dark {
  --bs-btn-bg: var(--tanne, #1D1D1F);
  --bs-btn-border-color: var(--tanne, #1D1D1F);
  --bs-btn-hover-bg: var(--tanne-70, #3A3A3C);
  --bs-btn-hover-border-color: var(--tanne-70, #3A3A3C);
  --bs-btn-active-bg: var(--tanne-70, #3A3A3C);
  --bs-btn-active-border-color: var(--tanne-70, #3A3A3C);
}
.btn:disabled, .btn.disabled {
  background: var(--linie, #E5E7EB);
  border-color: var(--linie, #E5E7EB);
  color: var(--grau, #6B7280);
  opacity: 1;
}

/* ---------- Karten: weiße Fläche, Haarlinie, weicher Schatten ---------- */
.card {
  --bs-card-bg: var(--kreide, #fff);
  --bs-card-border-color: var(--linie-zart, var(--linie, #E8E8ED));
  --bs-card-border-radius: 14px;
  --bs-card-inner-border-radius: 13px;
  --bs-card-spacer-y: 18px;
  --bs-card-spacer-x: 18px;
  --bs-card-cap-bg: transparent;
  box-shadow: var(--schatten-s, 0 1px 2px rgba(16, 24, 40, .06));
}
.card-title {
  font-family: var(--disp, inherit);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

/* ---------- Badges: Mono-Schrift, kompakte Chips (mit bg-*-subtle) ---------- */
.badge {
  --bs-badge-font-size: 10.5px;
  --bs-badge-font-weight: 500;
  --bs-badge-padding-y: 2.5px;
  --bs-badge-padding-x: 8px;
  --bs-badge-border-radius: 5px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: .01em;
  line-height: normal;
}

/* ---------- Dropdowns (Kopfmenüs, ☰-Menü der Verwaltung) ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--kreide, #fff);
  --bs-dropdown-color: var(--tinte, #1F2937);
  --bs-dropdown-border-color: var(--linie, #E5E7EB);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-inner-border-radius: 11px;
  --bs-dropdown-padding-x: 6px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-border-radius: 8px;
  --bs-dropdown-link-color: var(--tinte, #1F2937);
  --bs-dropdown-link-hover-color: var(--tinte, #1F2937);
  --bs-dropdown-link-hover-bg: var(--papier, #F8FAFC);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--blatt, #2563EB);
  --bs-dropdown-font-size: 13px;
  --bs-dropdown-min-width: 15rem;
  box-shadow: var(--schatten-l, 0 16px 40px rgba(16, 24, 40, .14));
}
.dropdown-item { display: flex; align-items: center; gap: 9px; }

/* ---------- Tabellen ---------- */
.table {
  --bs-table-color: var(--tinte, #1F2937);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--linie-zart, var(--linie, #E8E8ED));
  font-size: 13px;
  margin-bottom: 0;
}
.table > thead th {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grau, #6B7280);
}

/* ---------- Formulare ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--blatt, #2563EB);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}
.modal-content { background: var(--kreide, #fff); color: var(--tinte, #1F2937); }

/* Reboot-Korrekturen: bisheriges Erscheinungsbild beibehalten */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.lead { font-weight: 400; }

/* Checkboxen/Radios (.form-check-input): Projektfarbe statt Bootstrap-Blau.
   min-width:0 + flex:none schützen vor der globalen input{flex:1;min-width:170px}-
   Regel aus style.css; margin-top/vertical-align neutralisieren Bootstraps
   .form-check-Layout, das hier nirgends verwendet wird. */
.form-check-input { min-width: 0; flex: 0 0 auto; margin-top: 0; vertical-align: middle; }
.form-check-input:checked { background-color: var(--blatt, #2563EB); border-color: var(--blatt, #2563EB); }
.form-check-input:focus { border-color: var(--blatt, #2563EB); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }

/* Dark Mode des Projekts (html.dunkel – theme.js setzt zusätzlich
   data-bs-theme="dark", damit Bootstrap-Komponenten nativ mitschalten) */
html.dunkel {
  color-scheme: dark;
  --bs-body-bg: var(--kalk, #000);
  --bs-body-color: var(--tinte, #F5F5F7);
  --bs-border-color: var(--linie, #38383A);
  --bs-secondary-color: var(--grau, #98989D);
  --bs-secondary-bg: var(--papier, #161617);
  --bs-tertiary-bg: var(--kreide, #1C1C1E);
  --bs-link-color: var(--blatt, #30D158);
  --bs-link-hover-color: var(--blatt-tief, #28B14C);
  /* Subtle-Palette dunkel – Seiten ohne style.css (Verwaltung, Firmen …)
     definieren --blatt-hell & Co. nicht, darum hier mit festen Werten */
  --bs-success-bg-subtle: var(--blatt-hell, rgba(48, 209, 88, .16));
  --bs-success-text-emphasis: #4ADE80;
  --bs-warning-bg-subtle: var(--amber-hell, rgba(255, 159, 10, .14));
  --bs-warning-text-emphasis: var(--amber-text, #FFB340);
  --bs-danger-bg-subtle: var(--ziegel-hell, rgba(255, 69, 58, .14));
  --bs-danger-text-emphasis: var(--ziegel, #FF6961);
  --bs-secondary-bg-subtle: #2C2C2E;
  --bs-secondary-text-emphasis: #C7C7CC;
}
html.dunkel .modal-content { background: var(--kreide, #1C1C1E); color: var(--tinte, #F5F5F7); }
html.dunkel .card { --bs-card-bg: var(--kreide, #1C1C1E); --bs-card-border-color: var(--linie-zart, #2C2C2E); }
html.dunkel .btn-light {
  --bs-btn-bg: rgba(255, 255, 255, .08);
  --bs-btn-color: var(--tinte, #F5F5F7);
  --bs-btn-hover-bg: rgba(255, 255, 255, .14);
  --bs-btn-hover-color: var(--tinte, #F5F5F7);
  --bs-btn-active-bg: rgba(255, 255, 255, .18);
  --bs-btn-active-color: var(--tinte, #F5F5F7);
}
html.dunkel .btn-dark {
  --bs-btn-bg: #F5F5F7;
  --bs-btn-border-color: #F5F5F7;
  --bs-btn-color: #1D1D1F;
  --bs-btn-hover-bg: #C7C7CC;
  --bs-btn-hover-border-color: #C7C7CC;
  --bs-btn-hover-color: #1D1D1F;
  --bs-btn-active-bg: #C7C7CC;
  --bs-btn-active-color: #1D1D1F;
}
html.dunkel .btn:disabled, html.dunkel .btn.disabled {
  background: var(--linie, #38383A);
  border-color: var(--linie, #38383A);
  color: var(--grau, #98989D);
}
html.dunkel .dropdown-menu {
  --bs-dropdown-bg: var(--kreide, #1C1C1E);
  --bs-dropdown-color: var(--tinte, #F5F5F7);
  --bs-dropdown-border-color: var(--linie, #38383A);
  --bs-dropdown-link-color: var(--tinte, #F5F5F7);
  --bs-dropdown-link-hover-color: var(--tinte, #F5F5F7);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
}