@font-face { font-family:'Titillium Web'; src:url('/assets/fonts/titillium-400.woff2') format('woff2'); font-weight:400; }
@font-face { font-family:'Titillium Web'; src:url('/assets/fonts/titillium-600.woff2') format('woff2'); font-weight:600; }
@font-face { font-family:'Titillium Web'; src:url('/assets/fonts/titillium-700.woff2') format('woff2'); font-weight:700; }

:root {
  /* Brand */
  --kit-blue:        #274c90;
  --kit-blue-dark:   #1f3d7a;
  --kit-blue-light:  #f5f7ff;
  --kit-blue-border: #1f3d7a;
  --kit-dark:        #4c5261;
  --kit-grey:        #727a92;
  --kit-bg:          #d6dceb;
  --kit-green:       #0d6926;
  --kit-green-bg:    #e6f4ea;
  --kit-orange:      #b26a00;
  --kit-orange-bg:   #fff8e1;
  --kit-red:         #c62828;
  --kit-red-bg:      #fdecea;

  /* Halb- und Hilfsfarben */
  --kit-text-strong:        #1a2540;  /* sehr dunkles Marken-Blau-Schwarz */
  --kit-text-mid:           #2a3450;  /* mittleres Dunkel */
  --kit-blue-rand-zart:     #e3e8f5;  /* sehr helle Karten-Border */
  --kit-blue-rand-mittel:   #c5cfe6;  /* Checkbox-Border */
  --kit-blue-hover-rand:    #7a9fd4;  /* Border auf pkg-card hover */
  --kit-blue-bg-fast-weiss: #fcfdff;  /* nahezu weisser Blau-Touch */
  --kit-blue-bg-ueberlauf:  #fafbff;  /* Modal-Footer-Hintergrund */
  --kit-grey-disabled:      #adb5bd;  /* Bootstrap-Standard-Disabled */
  --kit-green-rand:         #b7dfbe;  /* Alert-Success-Rand */
  --kit-red-rand:           #f5c6c6;  /* Alert-Danger-Rand */

  /* Bootstrap-Override — Brand zieht durch Bootstrap-Komponenten */
  --bs-primary: var(--kit-blue);
  --bs-primary-rgb: 39, 76, 144;
  /* Links: Bootstrap-Standardblau #0d6efd raus, KIT-Blau rein */
  --bs-link-color: var(--kit-blue);
  --bs-link-color-rgb: 39, 76, 144;
  --bs-link-hover-color: var(--kit-blue-dark);
  --bs-link-hover-color-rgb: 31, 61, 122;
  --bs-pagination-active-bg: var(--kit-blue);
  --bs-pagination-active-border-color: var(--kit-blue);
  --bs-secondary-color: #212529;
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-rgb: 33, 37, 41;
  --bs-secondary: #212529;
}

body {
  font-family: 'Titillium Web', sans-serif !important;
  background-color: var(--kit-bg) !important;
  color: var(--kit-dark);
}

/* Navbar */
.navbar {
  background: #fff !important;
  border-bottom: 3px solid var(--kit-blue);
  box-shadow: 0 2px 8px rgba(39,76,144,.08);
}
.navbar-brand img { height: 32px; }
.navbar-brand span {
  color: var(--kit-blue);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .5px;
}
.nav-link { color: var(--kit-dark) !important; font-weight: 600; }
.nav-link:hover, .nav-link.active { color: var(--kit-blue) !important; }
.navbar-toggler { border-color: var(--kit-blue-border); }

/* Unter-Navigation (nav-pills) in Markenfarbe statt in Bootstrap-Blau.
 *
 * Vorher stand hier der Bootstrap-Standard. Der Kommentar sagte "wieder
 * aktivieren" - offenbar war die KIT-Regel darueber (.nav-link { color: ... })
 * so stark, dass die aktive Pille unlesbar wurde, und der schnellste Ausweg war,
 * Bootstrap zurueckzuholen. Damit trug die Seite an dieser Stelle ein fremdes
 * Blau (Jakob, 02.09.2026).
 *
 * Jetzt die Markenfarbe: aktive Pille in KIT-Blau mit weisser Schrift, die
 * uebrigen unauffaellig und beim Ueberfahren hell hinterlegt. */
.nav-pills .nav-link {
    border-radius: 4px;
    padding: .4rem .85rem;
}
.nav-pills .nav-link:hover:not(.active):not(.disabled) {
    background-color: var(--kit-blue-light);
    color: var(--kit-blue) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--kit-blue);
}
.nav-pills .nav-link.disabled {
    color: #727a92 !important;
    background: transparent;
}

/* Sidebar */
.kit-sidebar {
  background: #fff;
  border-right: 2px solid var(--kit-blue-border);
  min-height: calc(100vh - 61px);
  padding: 1rem 0;
}
.kit-sidebar .nav-link {
  color: var(--kit-dark) !important;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: 6px;
  margin: 2px 8px;
}
.kit-sidebar .nav-link:hover { background: var(--kit-blue-light); color: var(--kit-blue) !important; }
.kit-sidebar .nav-link.active { background: var(--kit-blue); color: #fff !important; }
.kit-sidebar .nav-link i { margin-right: 8px; font-size: 1rem; }
.kit-sidebar-heading {
  font-size: .7rem;
  font-weight: 700;
  color: var(--kit-grey);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: .8rem 1.2rem .3rem;
}

/* Off-Canvas-Variante (Mobile) */
.kit-sidebar-offcanvas .kit-sidebar {
  border-right: 0;
  min-height: 0;
  padding: .5rem 0;
}
.kit-sidebar-offcanvas .kit-sidebar-heading:first-child {
  padding-top: .3rem;
}

/* Main content */
.kit-main { padding: 2rem; }

/* Page header */
.kit-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.kit-page-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--kit-blue);
  margin: 0;
}

/* Cards */
.card {
  border: 0;
  box-shadow: 0 2px 12px rgba(39,76,144,.08);
  border-radius: 5px;
}
.card-body {
  padding: 20px;
}
.card-body.p-0 {
  padding: 0 !important;
}
.card-header {
  background: #fff;
  border-bottom: 2px solid var(--kit-blue);
  font-weight: 700;
  color: var(--kit-dark);
  border-radius: 5px 5px 0 0 !important;
  padding: 20px;
}

/* Buttons */
.btn-primary { background: var(--kit-blue); border-color: var(--kit-blue); font-weight: 600; }
.btn-primary:hover { background: var(--kit-blue-dark); border-color: var(--kit-blue-dark); }
.btn-outline-primary { color: var(--kit-blue); border-color: var(--kit-blue); font-weight: 600; }
.btn-outline-primary:hover { background: var(--kit-blue); color: #fff; }

/* btn-outline-secondary auf KIT-Blau ziehen (Bootstrap-Default ist hartkodiert auf #6c757d) */
.btn-outline-secondary {
  --bs-btn-color: var(--kit-blue);
  --bs-btn-border-color: var(--kit-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--kit-blue);
  --bs-btn-hover-border-color: var(--kit-blue);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--kit-blue);
  --bs-btn-active-border-color: var(--kit-blue);
  --bs-btn-disabled-color: var(--kit-blue);
  --bs-btn-disabled-border-color: var(--kit-blue);
}

/* DataTables Wrapper */
.dt-container { padding: 0 20px 20px; }
.dt-container .row.mt-2:first-child { padding-top: 20px; }

/* Tables */
table.dataTable thead th {
  background: var(--kit-blue-light);
  color: var(--kit-dark);
  font-weight: 700;
  border-bottom: 2px solid var(--kit-blue) !important;
}
table.dataTable tbody tr:hover { background: var(--kit-blue-light); }

/* Badges */
.badge-ok   { background: var(--kit-green-bg); color: var(--kit-green); font-weight: 700; padding: 4px 10px; border-radius: 20px; font-size: .8rem; }
.badge-warn { background: var(--kit-orange-bg); color: var(--kit-orange); font-weight: 700; padding: 4px 10px; border-radius: 20px; font-size: .8rem; }
.badge-err  { background: var(--kit-red-bg); color: var(--kit-red); font-weight: 700; padding: 4px 10px; border-radius: 20px; font-size: .8rem; }

/* Alerts */
.alert-success { background: var(--kit-green-bg); color: var(--kit-green); border: 1px solid var(--kit-green-rand); }
.alert-danger  { background: var(--kit-red-bg); color: var(--kit-red); border: 1px solid var(--kit-red-rand); }

/* Forms */
.form-label { font-weight: 600; color: var(--kit-dark); }
.form-control:focus, .form-select:focus {
  border-color: var(--kit-blue);
  box-shadow: 0 0 0 .2rem rgba(39,76,144,.15);
}

/* Login */
.kit-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kit-bg);
}
.kit-login-box {
  width: 100%;
  max-width: 400px;
  padding: 1rem;
}

/* === Audit Paket-Karten === */
.pkg-card {
  border: 2px solid var(--kit-blue-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.pkg-card.selected {
  border-color: var(--kit-blue);
  background: var(--kit-blue-light);
}
.pkg-card:hover {
  border-color: var(--kit-blue-hover-rand);
}
.pkg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.pkg-name {
  font-weight: 700;
  font-size: .9rem;
  flex-grow: 1;
}
.pkg-desc {
  font-size: .75rem;
  color: var(--kit-dark);
  font-weight: 400;
}
.pkg-modules {
  padding: 4px 14px 10px 38px;
  display: none;
  border-top: 1px solid var(--kit-blue-border);
}
.pkg-modules.show {
  display: block;
}
.pkg-module-item {
  font-size: .8rem;
  color: var(--kit-dark);
  padding: 2px 0;
}

/* === Audit-Modal verfeinert === */
.audit-modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(39, 76, 144, .15);
}
.audit-modal .modal-header {
  border-bottom: 1px solid var(--kit-blue-border);
  padding: 1.25rem 1.5rem;
}
.audit-modal .modal-body { padding: 1.5rem; }
.audit-modal .modal-footer {
  background: var(--kit-blue-bg-ueberlauf);
  border-top: 1px solid var(--kit-blue-border);
  padding: 1rem 1.5rem;
  border-radius: 0 0 12px 12px;
}

.audit-modal-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--kit-blue), var(--kit-blue-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(39, 76, 144, .3);
}

.audit-url-block {
  background: var(--kit-blue-light);
  border: 1px solid var(--kit-blue-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.audit-url-block .input-group-text {
  border-color: var(--kit-blue-border);
}
.audit-url-block .form-control:focus {
  border-color: var(--kit-blue);
  box-shadow: 0 0 0 .2rem rgba(39, 76, 144, .15);
}

/* Paket-Karten "pretty" */
.pkg-card-pretty {
  border: 2px solid var(--kit-blue-rand-zart);
  border-radius: 12px;
  background: #fff;
  transition: all .2s ease;
  height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pkg-card-pretty::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--pkg-color, var(--kit-blue));
  opacity: 0;
  transition: opacity .2s;
}
.pkg-card-pretty:hover {
  border-color: var(--pkg-color, var(--kit-blue));
  box-shadow: 0 4px 16px rgba(39, 76, 144, .08);
  transform: translateY(-1px);
}
.pkg-card-pretty.selected {
  border-color: var(--pkg-color, var(--kit-blue));
  background: var(--kit-blue-bg-fast-weiss);
  box-shadow: 0 2px 10px rgba(39, 76, 144, .06);
}
.pkg-card-pretty.selected::before { opacity: 1; }

.pkg-header-pretty {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.pkg-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform .15s;
}
.pkg-card-pretty:hover .pkg-icon-wrap { transform: scale(1.05); }

.pkg-card-pretty .pkg-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--kit-text-strong);
  line-height: 1.2;
  margin-bottom: 3px;
}
.pkg-card-pretty .pkg-desc {
  font-size: .78rem;
  color: var(--kit-grey);
  line-height: 1.35;
  font-weight: 400;
}
.pkg-mod-count { font-size: .72rem; }
.pkg-mod-count .text-success,
.pkg-mod-count .text-primary,
.pkg-mod-count .text-muted { font-weight: 500; }

.pkg-checkbox-pretty {
  width: 22px !important; height: 22px !important;
  margin: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  border-color: var(--kit-blue-rand-mittel);
}
.pkg-checkbox-pretty:checked {
  background-color: var(--pkg-color, var(--kit-blue));
  border-color: var(--pkg-color, var(--kit-blue));
}

.pkg-arrow {
  align-self: center;
  transition: transform .2s;
  flex-shrink: 0;
}

.pkg-modules-pretty {
  padding: 0 16px 14px 70px;
  display: none;
  border-top: 1px dashed var(--kit-blue-border);
  margin-top: 6px;
  padding-top: 10px;
}
.pkg-modules-pretty.show { display: block; }
.pkg-modules-pretty .pkg-module-item {
  font-size: .82rem;
  padding: 3px 0;
  color: var(--kit-text-mid);
}
.pkg-modules-pretty .form-check-input { cursor: pointer; }
.pkg-modules-pretty .form-check-label { cursor: pointer; }

.audit-info-box {
  background: var(--kit-blue-light);
  color: var(--kit-dark);
}
.audit-info-box i { color: var(--kit-blue); }

/* Loading-Overlay */
.audit-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 0 0 12px 12px;
}
.audit-loading-overlay.show { display: flex; }

/* Counter im Header rot wenn nichts ausgewählt */
#auditCounterText .text-danger { font-weight: 600; }

/* Audit-Score-Tabelle (Spalten-Layout aus audit.kandlen-it.dev) */
.score-cell { text-align: center; width: 60px; }
.badge-kit-green { background: var(--kit-green-bg); color: var(--kit-green); font-weight: 700; }
.badge-kit-warn  { background: var(--kit-orange-bg); color: var(--kit-orange); font-weight: 700; }
.badge-kit-red   { background: var(--kit-red-bg); color: var(--kit-red); font-weight: 700; }
.dsgvo-ok   { color: var(--kit-green); }
.dsgvo-fail { color: var(--kit-red); }
.dsgvo-na   { color: var(--kit-grey-disabled); }

/* Paket-Ampel in der Audit-Übersicht (1 Zeichen pro Paket, Klick-Popover) */
.audit-ampel { cursor: pointer; line-height: 1; }
.audit-ampel:focus { outline: 2px solid var(--kit-blue); outline-offset: 2px; border-radius: 50%; }
.audit-extlink { font-size: .8rem; }

/* Page-Speed-Spalte: 8 Google-Werte als Badges, oben Mobile, unten Desktop */
.audit-perf-cell { text-align: center; white-space: nowrap; }
.ps-scores { display: inline-flex; flex-direction: column; gap: 3px; }
.ps-scores-zeile { display: flex; align-items: center; gap: 3px; }
.ps-scores-label { font-size: .6rem; font-weight: 700; color: var(--kit-grey-disabled); width: 11px; text-align: right; }
.ps-scores .badge { min-width: 26px; }

/* PSI-Spalten in der Vertriebs-Audit-Liste (wie /entwicklung/audits) */
.audit-psi-cell { width: 180px; }
.audit-psi-badge { min-width: 32px; }
.audit-psi-label { font-size: .6rem; }
/* Desktop und Mobil untereinander in einer Spalte (Jakob, 03.09.2026).
   Das Geraete-Symbol steht am Zeilenanfang und haelt eine feste Breite,
   sonst rutschen die vier Werte der beiden Zeilen gegeneinander. */
.audit-psi-zeile { gap: .15rem; }
.audit-psi-zeile + .audit-psi-zeile { margin-top: .2rem; }
.audit-psi-geraet { flex: 0 0 .9rem; width: .9rem; font-size: .75rem; text-align: center; }

/* Pool-Liste auf /website-analyse (#1467): feste Breiten fuer die Spalten, die
   sonst mit dem laengsten Inhalt wachsen und der Seiten-Spalte den Platz nehmen. */
.audit-symbol-spalte { width: 30px; }
.audit-datum-spalte  { width: 120px; }
.audit-pool-spalte   { width: 200px; }

/* Audit-Report 1:1 (audits/_report_1zu1.blade.php) — Optik aus audit.kandlen-it.dev */
.section-title { color: var(--kit-blue); font-weight: 700; font-size: .95rem; margin-top: 1rem; border-bottom: 1px solid var(--kit-blue-border); padding-bottom: 4px; }
.report-pkg-head { cursor: pointer; }
.report-pkg-chevron { font-size: .8rem; }
.report-check-badge { background: #f8f9fa; color: #212529; border: 1px solid #dee2e6; font-weight: 400; }
.report-gesamt-label { color: var(--kit-dark); }
.report-mod-table { border: 1px solid #e8edf5; border-radius: 6px; overflow: hidden; }
.report-mod-table td { padding: 7px 10px; vertical-align: top; font-size: .85rem; }
.report-mod-label { width: 190px; }
.mod-row-warn { background: #fffdf5; }
.mod-row-fail { background: #fffaf0; }
.score-circle { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin: 0 auto 4px; border: 4px solid; }
.score-circle.green  { color: var(--kit-green);  border-color: var(--kit-green);  background: var(--kit-green-bg); }
.score-circle.orange { color: var(--kit-orange); border-color: var(--kit-orange); background: var(--kit-orange-bg); }
.score-circle.red    { color: var(--kit-red);    border-color: var(--kit-red);    background: var(--kit-red-bg); }
.score-circle.grey   { color: #666; border-color: #ccc; background: #f5f5f5; }
.score-label { font-size: .75rem; color: var(--kit-dark); text-align: center; font-weight: 600; }
.mod-status-ok   { color: var(--kit-green); }
.mod-status-warn { color: var(--kit-orange); }
.mod-status-fail { color: var(--kit-red); }
.mod-status-info { color: #0d6efd; }
.mod-status-skip { color: #aaa; }
.report-detail-zeile { font-size: .78rem; line-height: 1.5; }
.report-mod-hint { font-size: .78rem; color: var(--kit-dark); background: var(--kit-blue-light); border-radius: 4px; padding: 3px 7px; }

/* Farb-Disziplin v0.8.7: KIT-Blau als Default-Status-Farbe */
.badge-kit  { background: var(--kit-blue); color: #fff; font-weight: 600; }
.text-kit   { color: var(--kit-blue) !important; }
.border-kit { border-color: var(--kit-blue) !important; }

/* Buttons in KIT-Farbe (gefüllt + outline) */
.btn-kit {
    background: var(--kit-blue);
    color: #fff;
    border-color: var(--kit-blue);
}
.btn-kit:hover, .btn-kit:focus {
    background: var(--kit-blue-dark);
    color: #fff;
    border-color: var(--kit-blue-dark);
}
.btn-outline-kit {
    color: var(--kit-blue);
    border-color: var(--kit-blue);
    background: transparent;
}
.btn-outline-kit:hover, .btn-outline-kit:focus {
    background: var(--kit-blue);
    color: #fff;
}

/* Helper-Klassen — ersetzen Inline-Style-Farb-Patterns aus Blades */
.kit-card-header-soft {
    background: var(--kit-blue-light);
    color: var(--kit-blue);
    font-weight: 600;
}
.kit-card-header-soft-dark {
    background: var(--kit-blue-light);
    color: var(--kit-dark);
    font-weight: 600;
}
.kit-card-header-dark {
    background: var(--kit-dark);
    color: #fff;
    font-weight: 600;
}

/* Klickbare Platzhalter-Tokens (Geschaeftspapier/Rechnung-Vorlagen) */
.kit-token-tag {
    cursor: pointer;
    background: var(--kit-blue-light);
    color: var(--kit-blue);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--kit-blue-border);
    display: inline-block;
    margin: 1px;
}
.kit-token-tag-dark {
    cursor: pointer;
    background: var(--kit-blue-light);
    color: var(--kit-dark);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--kit-blue-border);
    display: inline-block;
    margin: 1px;
}

/* Status-Indikator (Geschaeftspapier-Tab: PDF da / nicht da) */
.kit-status-indikator-ok {
    background: var(--kit-green-bg);
    color: var(--kit-green);
    font-weight: 600;
}
.kit-status-indikator-fehlt {
    background: var(--kit-blue-light);
    color: var(--kit-blue);
    font-weight: 600;
}

/* Drag-and-Drop-Wrapper fuer file-Inputs */
.kit-dnd {
    position: relative;
    border: 2px dashed var(--kit-blue-hover-rand);
    border-radius: 6px;
    padding: 16px;
    background: var(--kit-blue-bg-fast-weiss);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    transition: border-color .15s, background .15s;
}
.kit-dnd .kit-dnd-hint {
    text-align: center;
    color: var(--kit-dark);
    font-size: .85rem;
}
.kit-dnd .kit-dnd-hint i {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 4px;
    color: var(--kit-blue);
}
.kit-dnd.is-dragover {
    border-color: var(--kit-blue);
    background: var(--kit-blue-light);
}
.kit-dnd.is-dragover .kit-dnd-hint {
    color: var(--kit-blue);
    font-weight: 600;
}

/* Mazer-Sidebar 2-Ebenen: Trennlinie auf Top-Level-Link (KIT-Blau).
   Auf <a>, nicht auf <li>, damit die Mazer-Pille (border-radius) nicht durchgeschnitten wird.
   Submenu-Links bekommen KEINE Linie. */
.sidebar-wrapper .menu > .sidebar-item > .sidebar-link {
    border-bottom: 1px solid var(--kit-blue-border);
}
.sidebar-wrapper .menu > .sidebar-item:last-child > .sidebar-link {
    border-bottom: 0;
}
/* Submenu-Link-Farbe dezenter als Mazer-Default #25396f. Hover/Active bleiben KIT-Blau (Mazer).
   Plus border-bottom auf JEDEM Submenu-Link (auch letztem).
   Padding leicht reduziert (Mazer-Default .7rem schluckt den Border visuell). */
.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #4c5261;
    padding: 0.6rem 2rem;
    border-bottom: 1px solid var(--kit-blue-border);
}
/* Active-Submenu-Link: KIT-Blau-Underline als Aktiv-Indikator (überschreibt den dezenten Trenner). */
.sidebar-wrapper .menu .submenu .submenu-item.active > a {
    border-bottom: 1px solid #274c90;
}
/* Gruppen-Titel (Täglich/Produktion/Geschäft/Team/System): kräftigere Trennlinie als Abschnittsmarke. */
.sidebar-wrapper .menu > .sidebar-title {
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--kit-blue-border);
}


/* ================================================================
   DARK MODE — aktiv via Mazer-Toggler (sets [data-bs-theme="dark"])
   Strategie: kit-Custom-Variablen umdefinieren; harte #fff-Backgrounds
   pro Selektor explizit auf dunklen Ton ziehen.
   ================================================================ */
[data-bs-theme="dark"] {
    /* Background-Töne */
    --kit-bg:                  #1a1d29;
    --kit-blue-light:          #1f2837;
    --kit-blue-border:         #2d3a55;
    --kit-blue-bg-fast-weiss:  #1a1d29;
    --kit-blue-bg-ueberlauf:   #1a1d29;
    --kit-blue-rand-zart:      #2d3a55;
    --kit-blue-rand-mittel:    #3d4970;
    --kit-blue-hover-rand:     #5a78a9;

    /* Status-Backgrounds (Badges, Alerts) — dezent dunkel + farbiger Text */
    --kit-green-bg:            #18302a;
    --kit-green-rand:          #2d5a44;
    --kit-orange-bg:           #2e2618;
    --kit-red-bg:              #2a1a1a;
    --kit-red-rand:            #5a2828;

    /* Text-Töne — dunkler-Text-Variablen werden im Dark hell */
    --kit-text-strong:         #e8edf7;
    --kit-text-mid:            #c5cfe6;
    --kit-dark:                #c5cfe6;
    --kit-grey:                #9aa5c2;
    --kit-grey-disabled:       #6b748a;

    /* Bootstrap-Override fuer Texte */
    /* Links im Dunkeln: KIT-Blau kaeme auf 2,0:1, aufgehellt sind es 7,6:1 */
    --bs-link-color:           #8fb0e8;
    --bs-link-color-rgb:       143, 176, 232;
    --bs-link-hover-color:     #b3c9f0;
    --bs-link-hover-color-rgb: 179, 201, 240;
    --bs-secondary-color:      #c5cfe6;
    --bs-secondary-color-rgb:  197, 207, 230;
}

/* Body + Card-Backgrounds, die hartcodiert #fff hatten */
[data-bs-theme="dark"] body {
    background-color: var(--kit-bg) !important;
    color: var(--kit-text-mid);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .pkg-card,
[data-bs-theme="dark"] .pkg-card-pretty {
    background: #242938;
    color: var(--kit-text-mid);
}
[data-bs-theme="dark"] .card-header { border-bottom-color: var(--kit-blue); }

/* DataTables: Header dunkel */
[data-bs-theme="dark"] table.dataTable thead th {
    background: var(--kit-blue-light);
    color: var(--kit-text-mid);
}

/* Audit-Loading-Overlay: dunkles Glas statt weisses */
[data-bs-theme="dark"] .audit-loading-overlay {
    background: rgba(20, 22, 30, .9);
}

/* Modal-Footer (Audit-Modal nutzt eigene Hintergrundfarbe) */
[data-bs-theme="dark"] .audit-modal .modal-footer {
    background: var(--kit-blue-bg-ueberlauf);
}

/* btn-outline-secondary: weisser Hover-Text bleibt OK, aber default soll im Dark heller sein */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #7da3e8;
    --bs-btn-border-color: #7da3e8;
}

/* Form-Controls: dunkler Background, Mazer macht das meiste, hier kit-spezifisches Focus-Shadow */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(125, 163, 232, .25);
}


/* #334 Ticket-Aktivitaeten als Markdown — Abstaende in der schmalen Box zaehmen */
.ticket-aktivitaet-md > :last-child { margin-bottom: 0; }
.ticket-aktivitaet-md p { margin-bottom: .4rem; }
.ticket-aktivitaet-md ul, .ticket-aktivitaet-md ol { margin-bottom: .4rem; padding-left: 1.1rem; }
.ticket-aktivitaet-md code { font-size: .85em; }


/* Responsive-Haertung: eingebettete Inhalte (Projekt-Doku/Tagebuch/Notizen-Markdown,
   Code-Bloecke, Bilder) duerfen den Content-Bereich auf schmalen Viewports nicht
   sprengen. Scoped auf .page-content, damit Sidebar-/Header-Logos unberuehrt bleiben. */
.page-content img { max-width: 100%; height: auto; }
.page-content pre { max-width: 100%; overflow-x: auto; }
.page-content pre code { white-space: pre; }
.page-content .table-responsive > table { margin-bottom: 0; }

/* Positions-/Detail-Tabellen auf Show- und Formularseiten (Rechnung/Angebot u.a.)
   sitzen direkt in .card-body.p-0 — bei vielen Spalten horizontal scrollbar machen,
   statt die Seite zu sprengen. Kein .table-responsive-Wrapper pro View noetig. */
.page-content .card-body.p-0 { overflow-x: auto; }

/* /projekte Kachel-Ansicht: Abschnitte nach Vorgang-Zustand (#732 Phase 3).
   Farbe je Abschnitt ueber --ab am .abschnitt-<zustand>-Wrapper (keine Inline-Styles). */
.projekt-abschnitt { border-bottom: 1px dashed var(--bs-border-color, #dee2e6); }
.abschnitt-dev        { --ab: var(--kit-blue); }
.abschnitt-live       { --ab: var(--kit-green); }
.abschnitt-next       { --ab: var(--kit-orange); }
.abschnitt-todo       { --ab: var(--kit-grey); }
.abschnitt-wartet     { --ab: #997404; }
.abschnitt-unbekannt  { --ab: #adb5bd; }
.abschnitt-deprecated { --ab: var(--kit-dark); }

.abschnitt-kopf { background: var(--ab, var(--kit-grey)); color: #fff; }
.abschnitt-kopf .abschnitt-zaehler { background: #fff; color: var(--ab, var(--kit-grey)); }

/* Hoster-Logos (#743) */
.hoster-logo       { max-height: 26px; width: auto; vertical-align: middle; }
.hoster-logo-gross { max-height: 56px; width: auto; }
.kit-nowrap        { white-space: nowrap; }
.projekt-abschnitt .projekt-kachel > .card { border-left: 4px solid var(--ab, var(--kit-grey)); }

/* Zustand-Badge "In Entwicklung/dev" im Menue-Stil (KIT-Blau, weisser Text). */
.badge-kit-dev { background: var(--kit-blue); color: #fff; }

/* ==========================================================================
   Projekt-Einstiegsseite (#732 Ebene 1): Typ-Kacheln.
   Typ-Farbe kommt als CSS-Variable --kit-c aus dem Blade (keine Inline-Styles).
   ========================================================================== */
.kit-sec-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--kit-grey, #6c757d); margin-bottom: .6rem;
}
.kit-typ-kachel {
    display: block; border: 1px solid var(--bs-border-color, #dee2e6);
    color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.kit-typ-kachel:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.4rem rgba(20,35,60,.14);
    border-color: color-mix(in srgb, var(--kit-c, #6c757d) 45%, #dee2e6);
}
a.kit-typ-kachel:focus-visible { outline: 2px solid var(--kit-c, #0d6efd); outline-offset: 2px; }
.kit-typ-chip {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    color: var(--kit-c, #6c757d);
    background: color-mix(in srgb, var(--kit-c, #6c757d) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--kit-c, #6c757d) 26%, #fff);
}
.kit-typ-audit {
    font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #0f7b3f; background: #e6f6ec; border: 1px solid #c9ebd6;
}
.kit-typ-name { font-weight: 600; line-height: 1.25; margin-bottom: .5rem; }
.kit-typ-count { display: flex; align-items: baseline; gap: .4rem; }
.kit-typ-count b { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--kit-c, #6c757d); font-variant-numeric: tabular-nums; }
.kit-typ-count small { font-size: .78rem; color: var(--kit-grey, #6c757d); }
.kit-typ-note { font-size: .8rem; color: var(--kit-grey, #6c757d); }
.kit-typ-kachel--leer { background: #fafbfd; border-style: dashed; }
.kit-typ-leer-grid { opacity: .78; }
@media (prefers-reduced-motion: reduce) { .kit-typ-kachel { transition: none; } }

/* ==========================================================================
   Projekt-Typen Drag & Drop-Sortierung (#748) — native HTML5, kein Fremd-Lib.
   ========================================================================== */
.kit-drag-col { width: 34px; }
.kit-drag-row { cursor: default; }
.kit-drag-handle { cursor: grab; text-align: center; }
.kit-drag-handle:active { cursor: grabbing; }
.kit-dragging { opacity: .45; background: var(--bs-tertiary-bg, #f2f4f7); }
.kit-drag-row.kit-dragging td { border-top: 1px dashed var(--kit-blue, #0d6efd); }
.kit-sort-toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 1080;
    background: #16a34a; color: #fff; padding: .55rem .9rem; border-radius: 8px;
    font-size: .85rem; box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.22);
    opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.kit-sort-toast--an { opacity: 1; transform: translateY(0); }
.kit-sort-toast--fehler { background: #dc2626; }

/* Ticket #950: Sidebar-Untermenues auf Hauptebene — Chevron zeigt den Auf-/Zu-Zustand an.
   Geschlossen: Pfeil nach rechts (>). Offen: um 90 Grad gedreht (zeigt nach unten).
   Zustand kommt vom Mazer-Toggle (.submenu.submenu-open) via :has(), daher kein JS noetig.
   Nur Top-Level (.menu > .sidebar-item.has-sub), damit verschachtelte Punkte unberuehrt bleiben. */
.sidebar-wrapper .menu > .sidebar-item.has-sub > .sidebar-link::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .25s ease;
}
.sidebar-wrapper .menu > .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Sidebar-Sektionen (sidebar-title) auf-/zuklappen — Titel klickbar, Chevron zeigt den Zustand:
   offen = Pfeil nach unten (90deg), zu = Pfeil nach rechts (>). JS: kit-sidebar-memory.js. */
.sidebar-wrapper .menu > .sidebar-title.kit-sektion-kopf {
    cursor: pointer;
    position: relative;
    padding-right: 1.6rem;
    user-select: none;
}
.sidebar-wrapper .menu > .sidebar-title.kit-sektion-kopf::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23999' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .25s ease;
}
.sidebar-wrapper .menu > .sidebar-title.kit-sektion-kopf.kit-sektion-zu::after {
    transform: translateY(-50%) rotate(0deg);
}
.sidebar-wrapper .menu > .sidebar-item.kit-sektion-ausgeblendet {
    display: none;
}

/* Geplante Aufgaben — Eingabefelder in der Frequenz-Spalte (#1111).
   Ersetzt die frueheren style="width:..."-Angaben im Blade. */
.feld-zeit { width: 7rem; }
.feld-tag  { width: 4.5rem; }

/* Programmablaufplan auf /konzept/ablaeufe: das SVG bringt seine eigenen Farben mit
   (auch fuer den dunklen Modus), hier nur die Groesse und ein wenig Luft. */
.kz-pap {
    display: block;
    width: 100%;
    min-width: 1000px;
    height: auto;
    margin: 0 auto;
}

/* Ablaufplan-Editor: links die Schritte als Text, rechts die Zeichnung. */
.kz-plan-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}
.kz-plan-vorschau svg { width: 100%; height: auto; }

/* Webseiten-Pool: Wiedervorlage direkt in der Zeile setzen. */
.kz-wv-form { flex-wrap: nowrap; }
.kz-wv-datum { width: 8.6rem; }
.kz-wv-grund { width: 10rem; }

/* Geplante Aufgaben: Fundort und Inhalt aufklappbar (#2121-1). Der Inhalt ist
   ein Kopfkommentar aus dem Code - Zeilenumbrueche tragen dort Bedeutung. */
.kit-fundort summary { cursor: pointer; }
.kit-fundort dl { margin: .4rem 0 0; }
.kit-fundort dt { font-weight: 600; }
.kit-fundort-zeile { white-space: pre-wrap; word-break: break-all; }
.kit-fundort-inhalt { white-space: pre-wrap; font-size: .8rem; background: var(--bs-tertiary-bg); padding: .5rem .7rem; border-radius: .3rem; margin: 0; max-height: 18rem; overflow: auto; }