/* ============================================================
   KIT-Theme über AdminLTE v4  (#967)
   Struktur = AdminLTE, Farben/Schrift = KIT. Alles lokal (DSGVO).
   ============================================================ */

/* ===== Titillium Web (lokal) ===== */
@font-face{ font-family:'Titillium Web'; src:url('/assets/fonts/titillium-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Titillium Web'; src:url('/assets/fonts/titillium-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Titillium Web'; src:url('/assets/fonts/titillium-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root{ --bs-body-font-family:'Titillium Web', sans-serif; }
body, .app-sidebar, .btn, .nav-link, .card, .breadcrumb, .table{ font-family:'Titillium Web', sans-serif; }

/* ===== KIT-Farben ===== */
:root{
    --bs-primary:#274c90; --bs-primary-rgb:39,76,144;
    --kit-blue:#274c90; --kit-orange:#FF720D; --kit-grau:#4C5261;
    --bs-secondary:#4C5261; --bs-secondary-rgb:76,82,97;
    --bs-warning:#FF720D; --bs-warning-rgb:255,114,13;
    --bs-dropdown-link-active-bg:#274c90;
    /* Links: Bootstrap-Standardblau #0d6efd raus, KIT-Blau rein */
    --bs-link-color:#274c90; --bs-link-color-rgb:39,76,144;
    --bs-link-hover-color:#1d3a6f; --bs-link-hover-color-rgb:29,58,111;
    --bs-info:#17a2b8; --bs-info-rgb:23,162,184;
    /* Bereichs-Farben */
    --b-start:#274c90; --b-vertrieb:#68CF29; --b-bestand:#3A82EF;
    --b-projekte:#AC4CBC; --b-abrechnung:#FFAB2D; --b-katalog:#17b8a6;
    --b-pruefstand:#FF720D; --b-team:#4C5261; --b-system:#5a6270;
    --b-support:#C0392B; --b-wissen:#17607d;
}
.btn-primary{ --bs-btn-bg:var(--kit-blue); --bs-btn-border-color:var(--kit-blue); --bs-btn-hover-bg:#1d3a6f; --bs-btn-hover-border-color:#1d3a6f; }
.btn-outline-primary{ --bs-btn-color:var(--kit-blue); --bs-btn-border-color:var(--kit-blue); --bs-btn-hover-bg:var(--kit-blue); --bs-btn-hover-border-color:var(--kit-blue); --bs-btn-active-bg:var(--kit-blue); }
.btn-outline-secondary{ --bs-btn-color:var(--kit-grau); --bs-btn-border-color:var(--kit-grau); --bs-btn-hover-bg:var(--kit-grau); --bs-btn-hover-border-color:var(--kit-grau); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--kit-grau); --bs-btn-active-border-color:var(--kit-grau); --bs-btn-disabled-color:var(--kit-grau); --bs-btn-disabled-border-color:var(--kit-grau); }
.btn-secondary{ --bs-btn-bg:var(--kit-grau); --bs-btn-border-color:var(--kit-grau); --bs-btn-hover-bg:#3b404b; --bs-btn-hover-border-color:#3b404b; }
.btn-warning{ --bs-btn-color:#fff; --bs-btn-bg:var(--kit-orange); --bs-btn-border-color:var(--kit-orange); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#e5620a; --bs-btn-hover-border-color:#e5620a; --bs-btn-active-color:#fff; --bs-btn-active-bg:#e5620a; --bs-btn-active-border-color:#e5620a; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--kit-orange); --bs-btn-disabled-border-color:var(--kit-orange); }
.text-bg-warning{ color:#fff !important; background-color:var(--kit-orange) !important; }
/* Info = ruhiges Teal #17a2b8 statt grellem Bootstrap-Cyan */
.btn-info{ --bs-btn-color:#fff; --bs-btn-bg:#17a2b8; --bs-btn-border-color:#17a2b8; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#138496; --bs-btn-hover-border-color:#138496; --bs-btn-active-bg:#138496; --bs-btn-active-border-color:#138496; }
.btn-outline-info{ --bs-btn-color:#17a2b8; --bs-btn-border-color:#17a2b8; --bs-btn-hover-bg:#17a2b8; --bs-btn-hover-border-color:#17a2b8; --bs-btn-hover-color:#fff; --bs-btn-active-bg:#17a2b8; --bs-btn-active-border-color:#17a2b8; }
.text-bg-info{ color:#fff !important; background-color:#17a2b8 !important; }
.badge.bg-info{ background-color:#17a2b8 !important; color:#fff !important; }
a{ color:var(--kit-blue); }
/* Dunkel: KIT-Blau erreicht auf #1a1d29 nur 2,0:1 und faellt damit durch.
   Aufgehellte Marken-Variante, gemessen 7,6:1 bzw. 10,0:1 im Hover. */
[data-bs-theme="dark"]{
    --bs-link-color:#8fb0e8; --bs-link-color-rgb:143,176,232;
    --bs-link-hover-color:#b3c9f0; --bs-link-hover-color-rgb:179,201,240;
}
[data-bs-theme="dark"] a{ color:var(--bs-link-color); }
.kit-text-grau{ color:var(--kit-grau); }

/* ===== Sidebar-Brand: Logo auf Weiss ===== */
.app-sidebar .sidebar-brand{ background:#fff; border-bottom:1px solid rgba(0,0,0,.1); }
.sidebar-brand .brand-link{ display:flex; align-items:center; justify-content:center; padding:.5rem; }
.sidebar-brand .brand-image{ max-height:2.2rem; width:auto; margin:0; opacity:1; }

/* ===== Helle Sidebar: Text #4c5261, Hover/Aktiv KIT-Blau ===== */
.app-sidebar{ --lte-sidebar-submenu-color:#4c5261; --lte-sidebar-submenu-hover-color:var(--kit-blue); }
.sidebar-menu .nav-link{ color:#4c5261; }
.nav-treeview .nav-link{ color:#4c5261; }
.sidebar-menu .nav-link:hover{ color:var(--kit-blue); background-color:rgba(39,76,144,.07); }
.sidebar-menu .nav-link.active{ color:var(--kit-blue); background-color:rgba(39,76,144,.10); font-weight:600; }
.sidebar-menu .nav-header{ font-weight:700; letter-spacing:.04em; font-size:.72rem; text-transform:uppercase; opacity:.9; }

/* ===== Bereichsfarbe: Balken nur bei Hover/Aktiv; Icons als dezente Dauer-Kennung ===== */
.kit-sec > .nav-link:hover,
.kit-sec > .nav-link.active{ box-shadow:inset 4px 0 0 var(--sec); }
.kit-sec.menu-open > .nav-treeview{ box-shadow:inset 4px 0 0 var(--sec); }
.kit-sec .nav-icon{ color:var(--sec); }
.sec-start{ --sec:var(--b-start); }   .sec-vertrieb{ --sec:var(--b-vertrieb); }
.sec-bestand{ --sec:var(--b-bestand); } .sec-projekte{ --sec:var(--b-projekte); }
.sec-abrechnung{ --sec:var(--b-abrechnung); } .sec-katalog{ --sec:var(--b-katalog); }
.sec-pruefstand{ --sec:var(--b-pruefstand); } .sec-team{ --sec:var(--b-team); } .sec-system{ --sec:var(--b-system); }
.sec-support{ --sec:var(--b-support); } .sec-wissen{ --sec:var(--b-wissen); }

/* ===== Small-Box: KIT-Blau + weisse Schrift ===== */
.small-box.text-bg-primary{ background:var(--kit-blue) !important; }
.small-box, .small-box .inner h3, .small-box .inner p, .small-box .small-box-icon, .small-box .small-box-footer{ color:#fff !important; }
.small-box .small-box-footer{ border-top:1px solid rgba(255,255,255,.2); }

/* ===== Content-Rahmen ===== */
.app-content{ padding-top:1rem; padding-bottom:1rem; }

/* ===== Dashboard-KPI-Icons: Mazer .stats-icon vereinheitlicht auf KIT-Blau ===== */
.stats-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:.6rem; background:var(--kit-blue); color:#fff; font-size:1.3rem; }
.stats-icon.blue, .stats-icon.purple, .stats-icon.teal{ background:var(--kit-blue); color:#fff; }
.stats-icon.green{ background:#16a34a; color:#fff; }
.stats-icon.red{ background:#dc3545; color:#fff; }
.stats-icon.orange{ background:var(--kit-orange); color:#fff; }

/* ===== Team-Karten (Dashboard): dezenter Hover ===== */
.kit-team-card{ transition:box-shadow .15s ease, transform .15s ease; }
.kit-team-card:hover{ box-shadow:0 .25rem .75rem rgba(39,76,144,.15); transform:translateY(-2px); }

/* ===== KIT-Utilities aus kit.css (die im AdminLTE-Layout sonst fehlen) ===== */
.badge-kit{ background:var(--kit-blue); color:#fff; font-weight:600; }
.badge-kit-green{ background:#e6f4ea; color:#0d6926; font-weight:700; }
.badge-kit-warn{ background:#fff8e1; color:#b26a00; font-weight:700; }
.badge-kit-red{ background:#fdecea; color:#c62828; font-weight:700; }
.badge-kit-dev{ background:var(--kit-blue); color:#fff; }
.text-kit{ color:var(--kit-blue) !important; }
.border-kit{ border-color:var(--kit-blue) !important; }
.btn-kit{ background:var(--kit-blue); color:#fff; border-color:var(--kit-blue); }
.btn-kit:hover, .btn-kit:focus{ background:#1f3d7a; color:#fff; border-color:#1f3d7a; }
.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; }

/* =====================================================================
   KIT-Utilities & Komponenten aus kit.css (layout-unabhaengig, #967 Phase 2)
   Farben als Light-Mode-Hex; nur var(--kit-blue)=#274c90 bleibt Variable.
   ===================================================================== */
/* --- Ampel-Badges (Status) --- */
.badge-ok   { background:#e6f4ea; color:#0d6926; font-weight:700; padding:4px 10px; border-radius:20px; font-size:.8rem; }
.badge-warn { background:#fff8e1; color:#b26a00; font-weight:700; padding:4px 10px; border-radius:20px; font-size:.8rem; }
.badge-err  { background:#fdecea; color:#c62828; font-weight:700; padding:4px 10px; border-radius:20px; font-size:.8rem; }
/* --- Audit-Score-/DSGVO-Zellen --- */
.score-cell { text-align:center; width:60px; }
.dsgvo-ok   { color:#0d6926; }
.dsgvo-fail { color:#c62828; }
.dsgvo-na   { color:#adb5bd; }
.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; }
.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:#adb5bd; width:11px; text-align:right; }
.ps-scores .badge { min-width:26px; }
.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; }
/* Pool-Auswahlfeld: stand als style="" im Blade, das ist hier verboten (Jakob, 03.09.2026). */
.kit-poolwahl    { min-width:12rem; }
/* --- Audit-Report --- */
.section-title      { color:var(--kit-blue); font-weight:700; font-size:.95rem; margin-top:1rem; border-bottom:1px solid #1f3d7a; 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:#4c5261; }
.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:#0d6926; border-color:#0d6926; background:#e6f4ea; }
.score-circle.orange{ color:#b26a00; border-color:#b26a00; background:#fff8e1; }
.score-circle.red   { color:#c62828; border-color:#c62828; background:#fdecea; }
.score-circle.grey  { color:#666; border-color:#ccc; background:#f5f5f5; }
.score-label        { font-size:.75rem; color:#4c5261; text-align:center; font-weight:600; }
.mod-status-ok      { color:#0d6926; }
.mod-status-warn    { color:#b26a00; }
.mod-status-fail    { color:#c62828; }
.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:#4c5261; background:#f5f7ff; border-radius:4px; padding:3px 7px; }
/* --- Audit Paket-Karten (einfach) --- */
.pkg-card          { border:2px solid #1f3d7a; border-radius:8px; cursor:pointer; transition:border-color .15s, background .15s; background:#fff; }
.pkg-card.selected { border-color:var(--kit-blue); background:#f5f7ff; }
.pkg-card:hover    { border-color:#7a9fd4; }
.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:#4c5261; font-weight:400; }
.pkg-modules       { padding:4px 14px 10px 38px; display:none; border-top:1px solid #1f3d7a; }
.pkg-modules.show  { display:block; }
.pkg-module-item   { font-size:.8rem; color:#4c5261; padding:2px 0; }
/* --- Audit-Modal (scoped) --- */
.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 #1f3d7a; padding:1.25rem 1.5rem; }
.audit-modal .modal-body    { padding:1.5rem; }
.audit-modal .modal-footer  { background:#fafbff; border-top:1px solid #1f3d7a; 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), #1f3d7a); 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:#f5f7ff; border:1px solid #1f3d7a; border-radius:10px; padding:1rem 1.25rem; }
.audit-url-block .input-group-text { border-color:#1f3d7a; }
.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 #e3e8f5; 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:#fcfdff; 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:#1a2540; line-height:1.2; margin-bottom:3px; }
.pkg-card-pretty .pkg-desc { font-size:.78rem; color:#727a92; 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:#c5cfe6; }
.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 #1f3d7a; 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:#2a3450; }
.pkg-modules-pretty .form-check-input, .pkg-modules-pretty .form-check-label { cursor:pointer; }
/* --- Audit-Info-Box + Loading-Overlay --- */
.audit-info-box            { background:#f5f7ff; color:#4c5261; }
.audit-info-box i          { color:var(--kit-blue); }
.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; }
#auditCounterText .text-danger { font-weight:600; }
/* --- Karten-Header-Hilfsklassen --- */
.kit-card-header-soft      { background:#f5f7ff; color:var(--kit-blue); font-weight:600; }
.kit-card-header-soft-dark { background:#f5f7ff; color:#4c5261; font-weight:600; }
.kit-card-header-dark      { background:#4c5261; color:#fff; font-weight:600; }
/* --- Webseiten-Pool: Suchfeld (#1431) --- */
.kit-suchfeld { max-width:420px; }
/* --- Konzeptseiten: Beschriftungsspalte und zweispaltige Aufzaehlung (#1427) --- */
.kit-spalte-frage  { width:60%; }
.kit-spalten-zwei  { column-count:2; column-gap:1.5rem; }
@media (max-width: 575.98px) { .kit-spalten-zwei { column-count:1; } }
/* --- Klickbare Platzhalter-Tokens --- */
.kit-token-tag      { cursor:pointer; background:#f5f7ff; color:var(--kit-blue); padding:1px 5px; border-radius:3px; border:1px solid #1f3d7a; display:inline-block; margin:1px; }
.kit-token-tag-dark { cursor:pointer; background:#f5f7ff; color:#4c5261; padding:1px 5px; border-radius:3px; border:1px solid #1f3d7a; display:inline-block; margin:1px; }
/* --- Status-Indikator --- */
.kit-status-indikator-ok    { background:#e6f4ea; color:#0d6926; font-weight:600; }
.kit-status-indikator-fehlt { background:#f5f7ff; color:var(--kit-blue); font-weight:600; }
/* --- Drag&Drop-Wrapper --- */
.kit-dnd                 { position:relative; border:2px dashed #7a9fd4; border-radius:6px; padding:16px; background:#fcfdff; 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:#4c5261; 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:#f5f7ff; }
.kit-dnd.is-dragover .kit-dnd-hint { color:var(--kit-blue); font-weight:600; }
/* --- Ticket-Aktivitaeten Markdown --- */
.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; }
/* --- /projekte Kachel-Abschnitte --- */
.projekt-abschnitt    { border-bottom:1px dashed var(--bs-border-color, #dee2e6); }
.abschnitt-dev        { --ab:var(--kit-blue); }
.abschnitt-live       { --ab:#0d6926; }
.abschnitt-next       { --ab:#b26a00; }
.abschnitt-todo       { --ab:#727a92; }
.abschnitt-wartet     { --ab:#997404; }
.abschnitt-unbekannt  { --ab:#adb5bd; }
.abschnitt-deprecated { --ab:#4c5261; }
.abschnitt-kopf       { background:var(--ab, #727a92); color:#fff; }
.abschnitt-kopf .abschnitt-zaehler { background:#fff; color:var(--ab, #727a92); }
.projekt-abschnitt .projekt-kachel > .card { border-left:4px solid var(--ab, #727a92); }
/* --- Hoster-Logos --- */
.hoster-logo       { max-height:26px; width:auto; vertical-align:middle; }
.hoster-logo-gross { max-height:56px; width:auto; }
.kit-nowrap        { white-space:nowrap; }
/* --- Projekt-Typ-Kacheln --- */
.kit-sec-label  { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#727a92; 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:#727a92; }
.kit-typ-note   { font-size:.8rem; color:#727a92; }
.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-Sortierung --- */
.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); }
.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; }

/* ===================================================================
   #1082 KPI-Kachel (.kit-stat)
   Optik aus dem AdminLTE-Entwurf (/intern/uebersicht/dashboard-test),
   aber ohne AdminLTE als Abhaengigkeit - nur KIT-Farben und Bootstrap.
   =================================================================== */
.kit-stat {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 1rem 1.15rem .85rem;
    border-radius: .5rem;
    color: #fff;
    text-decoration: none;
    background: var(--kit-blue, #274c90);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .12s ease;
    height: 100%;
}

a.kit-stat:hover,
a.kit-stat:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 .35rem .9rem rgba(0,0,0,.18);
    text-decoration: none;
}

.kit-stat__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.kit-stat__wert {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.kit-stat__icon {
    font-size: 2.25rem;
    line-height: 1;
    opacity: .28;
    flex-shrink: 0;
}

.kit-stat__label {
    margin-top: .15rem;
    font-size: .875rem;
    font-weight: 600;
    opacity: .92;
}

.kit-stat__fuss {
    margin-top: .7rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: .78rem;
    opacity: .9;
}

/* Farbvarianten - Werte aus dem KIT-Farbsystem oben in dieser Datei */
.kit-stat--blau   { background: var(--kit-blue,   #274c90); }
.kit-stat--gruen  { background: var(--kit-green,  #0d6926); }
.kit-stat--orange { background: var(--kit-orange-dunkel, #b26a00); }
.kit-stat--rot    { background: var(--kit-red,    #c62828); }
.kit-stat--grau   { background: var(--kit-grau,   #4c5261); }

@media (max-width: 575.98px) {
    .kit-stat        { padding: .8rem .9rem .7rem; }
    .kit-stat__wert  { font-size: 1.6rem; }
    .kit-stat__icon  { font-size: 1.8rem; }
}

/* Konzepte-Abschnitt: Platzhalter in noch leeren Gruppen (KIT-Web, Wuerfel).
   Kein Link, nur ein Hinweis - deshalb gedaempft und ohne Zeigehand. */
.kz-leer {
    font-style: italic;
    opacity: .6;
    cursor: default;
}

/* ===== Schwebende Schaltflaechen unten rechts =====
   Textwerkstatt, Chat und Lesezeichen bilden zusammen eine Leiste. Position und
   Optik stehen hier, damit die drei Abstaende an einer Stelle gepflegt werden -
   frueher lagen sie als style-Attribut in drei verschiedenen JavaScript-Dateien. */
.kit-fab {
    position: fixed;
    bottom: 24px;
    z-index: 1040;
}

.kit-fab--platz1 { right: 24px; }
.kit-fab--platz2 { right: 88px; }
.kit-fab--platz3 { right: 152px; }

.kit-fab__knopf {
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: 1.4rem;
}

.kit-fab__menue { min-width: 240px; }

/* ===== Textwerkstatt ===== */
/* Uebernehmen-Knopf am Textfeld: dezent, bis man ihn anfasst */
.ktw-feldknopf {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    font-size: .7rem;
    padding: .1rem .35rem;
    opacity: .55;
}

.ktw-feldknopf:hover,
.ktw-feldknopf:focus-visible { opacity: 1; }

/* Huelle um ein dekoriertes Feld - traegt den Knopf oben rechts */
.ktw-feld-huelle {
    position: relative;
    display: block;
}

/* Unsichtbares Hilfsfeld fuer das Kopieren in die Zwischenablage */
.ktw-kopierhelfer {
    position: fixed;
    opacity: 0;
}

.ktw-frei-schalter { cursor: pointer; }
.ktw-status { min-height: 1em; }

/* ===== Spracheingabe ===== */
/* Knopf dezent, bis er angefasst wird oder aufnimmt */
.kit-sprache-btn:hover:not(.aufnahme),
.kit-sprache-btn:focus-visible:not(.aufnahme) { opacity: 1; }

/* ===== Klaus-Chat =====
   Werte unveraendert aus dem bisherigen JavaScript uebernommen. */
.kit-chat-panel { width: 420px; }
.kit-chat-verlauf { background: #f7f9fc; }
.kit-chat-leer-icon { font-size: 2rem; }
.kit-chat-fuss { font-size: .7rem; }

.kit-chat-blase {
    max-width: 80%;
    font-size: .875rem;
    white-space: pre-wrap;
}

.kit-chat-blase--ich    { background: var(--kit-blue); color: #fff; }
.kit-chat-blase--klaus  { background: #fff; color: #222; border: 1px solid #dee2e6; }

.kit-chat-zeit {
    font-size: .65rem;
    opacity: .7;
}

.kit-chat-tippt {
    background: #fff;
    color: #888;
    border: 1px solid #dee2e6;
    font-size: .875rem;
}

/* ===== Lesezeichen =====
   Die Farbe steht am einzelnen Lesezeichen in der Datenbank, deshalb kommt sie als
   Wert herein. Die Gestaltung selbst bleibt hier. */
.kit-lz-icon {
    font-size: 1.1rem;
    color: var(--lz-farbe, #0d6efd);
}

/* ===== Kennzahl-Kacheln auf dem Dashboard (AdminLTE small-box) =====
   Uebernommen aus dem Prototyp /konzept/dashboard-test - Jakob wollte diese
   Anordnung auf dem echten Dashboard. Alle Kacheln sind farbig, deshalb
   durchgehend weisse Schrift. */
.small-box.text-bg-primary { background: var(--kit-blue, #274C90) !important; }

.small-box,
.small-box .inner h3,
.small-box .inner p,
.small-box .small-box-icon,
.small-box .small-box-footer { color: #fff !important; }

.small-box .small-box-footer { border-top: 1px solid rgba(255, 255, 255, .2); }

/* ===== Dashboard: Spaltenbreiten in den Listen =====
   Damit Kennzeichen und Datumsangaben untereinander stehen und die Zeilen nicht
   flattern. Frueher als style-Attribut in der Blade-Datei. */
.kit-sp-datum   { min-width: 96px; }
.kit-sp-rest    { min-width: 90px; }
.kit-sp-prio    { min-width: 62px; }
.kit-sp-status  { min-width: 74px; }
.kit-sp-tag     { min-width: 78px; }

/* Vertrieb unterwegs (#1644, 06.09.2026).
   Die zwei Ansichten sind vom eigenstaendigen Mazer-Layout auf AdminLTE gezogen.
   Diese Klassen kamen bisher aus einem <style>-Block in vertrieb/layout.blade.php
   und haetten den Umzug sonst nicht ueberlebt.

   .vu-wrap begrenzt bewusst auf 680px: Die Ansichten sind fuer die Hand gebaut, und
   eine Kartenliste, die auf 28 Zoll ueber die volle Breite laeuft, ist unlesbar.
   Die Touch-Mindesthoehe von 44px bleibt ebenfalls - sie schadet am Schreibtisch
   nicht und ist am Handy der Unterschied zwischen treffen und danebentippen. */
.vu-wrap        { max-width:680px; margin:0 auto; }
.vu-head        { position:sticky; top:0; z-index:5; background:var(--bs-body-bg, #f4f5f7);
                  padding-top:.5rem; padding-bottom:.5rem; }
.vu-card        { border:1px solid #e5e7eb; border-radius:.75rem; background:#fff; }
.vu-firma       { font-weight:600; font-size:1.05rem; line-height:1.25; }
.vu-actions .btn { min-height:44px; }
.vu-filter      { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
.vu-filter .btn { white-space:nowrap; }

/* Mitteilungen in der Kopfzeile und auf der eigenen Seite (#1985, 16.09.2026).

   Hier steht, was sonst als style-Attribut in der Blade-Datei stuende — das ist
   in diesem Haus untersagt (#1155), und zwar aus einem praktischen Grund: Ein
   Inline-Style ueberlebt keinen Umzug des Markups.

   Die Zeile im Aufklappmenue besteht aus zwei Teilen, die nebeneinander liegen
   muessen: dem Link auf den Vorgang und dem Knopf zum Wegklicken. Ohne flex
   wuerde das Formular unter dem Link landen und jede Zeile doppelt so hoch. */
.kit-mt-menue        { max-height: 70vh; overflow-y: auto; }
.kit-mt-kopf         { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kit-mt-alle         { margin: 0; }
.kit-mt-zeile        { display: flex; align-items: flex-start; }
.kit-mt-zeile .kit-mt-link { flex: 1 1 auto; min-width: 0; }
.kit-mt-weg          { margin: 0; flex: 0 0 auto; }
.kit-mt-weg .btn     { padding: .35rem .5rem; }
.kit-mt-kennung      { font-family: "Courier Prime", ui-monospace, monospace; font-weight: 600; margin-right: .25rem; }
.kit-mt-marke        { margin-left: .35rem; font-size: .7rem; }
.kit-mt-leer         { display: block; padding-top: .5rem; padding-bottom: .5rem; }
.kit-mt-spalte-zeit  { min-width: 120px; }
.kit-mt-spalte-weg   { min-width: 74px; }
.kit-mt-warum        { color: var(--bs-secondary-color); }