/* === styles-03.css — Teil 3/4 (urspr. Zeilen 1851-2780) — in Reihenfolge laden === */
html[data-theme="dark"] .page-hero select option {
  background: #1E293B !important;
  color: #F8FAFC !important;
}
/* Screen-Reader-only Helper-Klasse */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Admin hat automatisch alle Berechtigungen (siehe updateHeaderUser) */
/* Schichten anlegen */
body:not(.has-perm-shifts_create) button.primary[onclick*="openShiftDialog"],
body:not(.has-perm-shifts_create) button.primary[onclick*="openSchichtblattDialog"] { display: none !important; }
/* ===== Self-Only-Modus: Admin-UI komplett ausblenden ===== */
/* Nav-Buttons: NUR Schichten + (optional) Leistungsnachweis erlaubt */

/* v311zzj: Projektor-Modus für TV / 2. Monitor. Wird per ?projector=1 in URL aktiviert.
   Ziel: nur Cockpit-Schichten + Datumsnavi, keine Bedien-UI. Live-Updates bleiben aktiv. */
body.is-projector .schichten-side,
body.is-projector .ck-tabs,
body.is-projector .ck-day-strip,
body.is-projector #ck-projector-btn,
body.is-projector .ck-hero-btn-wa,
body.is-projector .cockpit-kpi,
body.is-projector .page-kpi-bar,
body.is-projector #cockpit-filter-auftrag,
body.is-projector .ck-block-tools,
body.is-projector .ck-block-add-btn,
body.is-projector .ck-billing-bar { display: none !important; }
body.is-projector .app-main-area { margin-left: 0 !important; padding: 0 !important; }
body.is-projector main { padding: 0 !important; }
body.is-projector .panel { padding: 8px 14px !important; margin: 0 !important; border-radius: 0 !important; }
body.is-projector #page-cockpit { background: #F8FAFC; min-height: 100vh; }
body.is-projector .cockpit-hero { border-radius: 0 !important; }
body.is-projector .cockpit-main { width: 100% !important; }
body.is-projector .cockpit-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; gap: 14px !important; }
body.is-projector .ck-block { font-size: 15px !important; }
body.is-projector .ck-block .ck-baustelle { font-size: 19px !important; }
body.is-projector .ck-row-name { font-size: 16px !important; }
/* Edit-Mode komplett verhindern */
body.is-projector .ck-block { pointer-events: none !important; }
body.is-projector .cockpit-hero-actions { pointer-events: auto !important; }
body.is-projector .cockpit-hero-actions * { pointer-events: auto !important; }
/* Kleines „Projektor"-Label oben rechts zur Orientierung */
body.is-projector .cockpit-hero::after {
  content: "📺 Projektor-Modus · Live";
  position: absolute; top: 8px; right: 18px;
  font-size: 12px; opacity: 0.7;
  color: #fff; letter-spacing: 0.5px;
}
body.is-projector .cockpit-hero { position: relative; }

/* v311zzc: Karten-Layout für Gruppen-Übersichts-Seiten */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.overview-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.12s;
}
.overview-card:hover {
  background: var(--card-hover, #F8FAFC);
  border-color: var(--accent, #0F766E);
  box-shadow: 0 4px 12px rgba(15,118,110,0.10);
}
.overview-card:active { transform: scale(0.985); }
.overview-card .ovw-card-ic {
  font-size: 32px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border-radius: 10px;
  flex-shrink: 0;
}
.overview-card .ovw-card-tx { flex: 1; min-width: 0; }
.overview-card .ovw-card-h { font-size: 16px; font-weight: 600; margin-bottom: 3px; color: var(--text, #0F172A); }
.overview-card .ovw-card-s { font-size: 13px; color: var(--muted, #64748B); line-height: 1.4; }
body.dark .overview-card .ovw-card-ic { background: linear-gradient(135deg, #134E4A, #0F4F44); }

/* v311c: Auftraggeber-Dialog im Dark-Mode opak halten */
html[data-theme="dark"] .ck-auftraggeber-dlg .ck-auftraggeber-card {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .ck-auftraggeber-dlg .ck-auftraggeber-card h3,
html[data-theme="dark"] .ck-auftraggeber-dlg .ck-auftraggeber-card b { color: #F1F5F9 !important; }
html[data-theme="dark"] .ck-auftraggeber-dlg .ck-auftraggeber-card input {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #475569 !important;
}
html[data-theme="dark"] .ck-auftraggeber-dlg #ck-auftraggeber-cancel {
  background: #334155 !important; color: #CBD5E1 !important; border-color: #475569 !important;
}

/* Lager-Only: Schichten-Bearbeitung blockieren (nur lesen) */
body.is-lager-only .schichten-action-sidebar,
body.is-lager-only .bulk-toolbar,
body.is-lager-only button[onclick*="openShiftDialog"],
body.is-lager-only button[onclick*="openSchichtblattDialog"],
body.is-lager-only button[onclick*="openUrlaubDialog"],
body.is-lager-only button[onclick*="editShift"],
body.is-lager-only button[onclick*="deleteShift"],
body.is-lager-only .schichten-layout { flex-direction: column !important; }

/* Abwesenheits-Seite: Mitarbeiter-View vs Admin-View */
body.is-self-only #abw-admin-section { display: none !important; }
body:not(.is-self-only) #abw-self-only-section { display: none !important; }
/* Mitarbeiter-Status-Sidebar (rechts neben Schichten) im Self-Only-Modus komplett ausblenden */
body.is-self-only .schichten-side { display: none !important; }
/* Aktions-Sidebar (links: + Neue Schicht, Verschicken, Filter) komplett verstecken */
body.is-self-only .schichten-action-sidebar { display: none !important; }
/* Mitarbeiter-Monatswechsler über der Liste einblenden (Ersatz für die ausgeblendeten
   Zeitraum-Controls in der Sidebar) — sonst sähe der MA nur den aktuellen Monat. */
body.is-self-only #schicht-ma-monthnav { display: flex !important; }
/* Schichten-Layout in self-only auf eine Spalte umstellen (Flex-Container → flex-direction) */
body.is-self-only .schichten-layout { flex-direction: column !important; }
/* KPI-Bar verstecken (Mitarbeiter braucht keine Firmen-Stats) */
body.is-self-only #kpi-schichten { display: none !important; }
/* Logo-Link/Branding-Bereich im Hero verkleinern (mehr Platz für Schichten) */
/* Schichten-Aktionen ausblenden */
body.is-self-only #verschickt-toolbar,
body.is-self-only .schichten-action-sidebar,
body.is-self-only .bulk-toolbar,
body.is-self-only button[onclick*="openShiftDialog"],
body.is-self-only button[onclick*="openSchichtblattDialog"],
body.is-self-only button[onclick*="openUrlaubDialog"],
body.is-self-only button[onclick*="editShift"],
body.is-self-only button[onclick*="deleteShift"],
body.is-self-only button[onclick*="stornoSingleShift"],
body.is-self-only button[onclick*="unstornoSingleShift"],
body.is-self-only button[onclick*="unmarkVerschickt"],
body.is-self-only button[onclick*="bulkMoveMarkierte"],
body.is-self-only button[onclick*="bulkStornoMarkierte"],
body.is-self-only button[onclick*="openBulkEditDialog"],
body.is-self-only button[onclick*="gruppiereMarkierte"],
body.is-self-only button[onclick*="deleteMarkierte"],
body.is-self-only button[onclick*="unmarkVerschicktMarkierte"],
body.is-self-only .schicht-bs-check,
body.is-self-only .shift-check-row,
body.is-self-only #schicht-check-all,
body.is-self-only .shift-row [draggable="true"],
body.is-self-only button[onclick*="openBaustelleEditDialog"],
body.is-self-only button[onclick*="stornoBaustelle"] { display: none !important; }
/* Self-Only: Drag-Pfeil + Editier-Cursors abschalten */
body.is-self-only .shift-row { cursor: default !important; }
/* Quick-Actions auf Startseite (nur Mitarbeiter-relevante zeigen) */
body.is-self-only #quick-actions button[onclick*="openShiftDialog"],
body.is-self-only #quick-actions button[onclick*="openSchichtblattDialog"],
body.is-self-only #quick-actions button[onclick*="setPage('schichten')"][onclick*="verschicken"] { display: none !important; }
/* Hint-Banner für Self-Only */
.self-only-hint { display: none; }
body.is-self-only .self-only-hint { display: flex; }
/* Schichten bearbeiten */
body:not(.has-perm-shifts_edit) button[onclick*="editShift"] { display: none !important; }
/* Markierte gruppieren — sowohl mit edit- als auch create-Recht erlaubt */
body:not(.has-perm-shifts_edit):not(.has-perm-shifts_create) button[onclick="gruppiereMarkierte()"] { display: none !important; }
/* Bulk-Edit benötigt Edit-Recht */
body:not(.has-perm-shifts_edit) button[onclick="openBulkEditDialog()"] { display: none !important; }
/* Schichten loeschen */
body:not(.has-perm-shifts_delete) button[onclick*="deleteShift"] { display: none !important; }
body:not(.has-perm-shifts_delete) button[onclick="deleteMarkierte()"] { display: none !important; }
/* Schichten verschicken (PDF/WhatsApp) — inkl. pro-Schicht "Nicht verschickt"-Button */
body:not(.has-perm-shifts_send) #btn-verschicken,
body:not(.has-perm-shifts_send) #btn-whatsapp,
body:not(.has-perm-shifts_send) button[onclick*="unmarkVerschickt"] { display: none !important; }
/* Personal anlegen/bearbeiten/loeschen — inkl. KFZ und Funktionen-Katalog */
body:not(.has-perm-personal_edit) button.primary[onclick*="openPersonDialog"],
body:not(.has-perm-personal_edit) button.primary[onclick*="openFnCatalogDialog"],
body:not(.has-perm-personal_edit) button.primary[onclick*="openKfzDialog"],
body:not(.has-perm-personal_edit) button[onclick*="editPerson"],
body:not(.has-perm-personal_edit) button[onclick*="deletePerson"],
body:not(.has-perm-personal_edit) button[onclick*="editKfz"],
body:not(.has-perm-personal_edit) button[onclick*="deleteKfz"],
body:not(.has-perm-personal_edit) button[onclick*="fnCatalogAdd"],
body:not(.has-perm-personal_edit) button[onclick*="fnCatalogDelete"],
body:not(.has-perm-personal_edit) button[onclick*="openFnPersonDialog"] { display: none !important; }
/* Zertifikate aendern */
body:not(.has-perm-certs_edit) button[onclick*="editCertDate"] { display: none !important; }
body:not(.has-perm-certs_edit) td[onclick*="editCertDate"] { pointer-events: none; cursor: default; }
/* Abwesenheiten eintragen */
body:not(.has-perm-abwesenheit_edit) button.primary[onclick*="openUrlaubDialog"],
body:not(.has-perm-abwesenheit_edit) button[onclick*="removeAbwesenheit"] { display: none !important; }
/* Klasse fuer Admin-only-Markierung im HTML */
body:not(.role-admin) .perm-admin-only { display: none !important; }
.maps-grid {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
  align-items: end; margin-top: 10px;
}
.maps-grid .field { min-width: 0; }
.maps-grid select, .maps-grid input { width: 100%; }
.baustellen-liste {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.baustellen-liste a {
  background: var(--band); color: var(--primary); text-decoration: none;
  padding: 4px 10px; border-radius: 14px; font-size: 12px; border: 1px solid var(--border);
}
.baustellen-liste a:hover { background: var(--primary); color: #fff; }
/* Sync-Badge .dot-Stile sind oben definiert */
#sync-badge.syncing .dot { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ============================================================
   CLEAN FUTURISM — Pilot: Login + Mitarbeiter-Schichten (v320)
   Additiver Layer, ueberschreibt aeltere Regeln. Bewusst scoped
   auf #auth-gate und .self-shift-card, damit der Rest unberuehrt
   bleibt.
   ============================================================ */
/* Moderne Schrift (Inter) mit System-Fallback fuer Offline */
body, input, button, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- LOGIN ---------- */
#auth-gate { background: radial-gradient(1200px 600px at 0% 0%, #ECFEFF 0%, #F8FAFC 45%, #F1F5F9 100%); }
.auth-brand { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 45%, #0E7490 100%) !important; }
.auth-brand-logo { border-radius: 16px !important; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); }
#auth-gate input {
  border-radius: 13px !important;
  background: rgba(255,255,255,.9);
  transition: border-color .15s, box-shadow .2s, background .2s;
}
#auth-gate input:focus {
  box-shadow: 0 0 0 4px rgba(20,184,166,.18), 0 4px 14px -6px rgba(15,118,110,.35) !important;
  background: #fff;
}
#auth-gate button[type="submit"] {
  border-radius: 13px !important;
  background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%) !important;
  background-size: 180% 180%;
  box-shadow: 0 10px 24px -10px rgba(15,118,110,.55);
  letter-spacing: .2px;
  transition: transform .12s, box-shadow .2s, filter .2s;
}
#auth-gate button[type="submit"]:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(15,118,110,.6) !important; }
#auth-gate button[type="submit"]:active { transform: translateY(0) scale(.99); }

/* ---------- MITARBEITER-SCHICHTKARTEN ---------- */
.self-shift-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px !important;
  padding: 13px !important;
  margin-bottom: 12px;
  display: flex; gap: 11px; align-items: stretch;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -16px rgba(15,23,42,.22);
  transition: transform .14s ease, box-shadow .2s ease;
  animation: sf-fadeup .35s ease both;
}
@media (hover:hover) {
  .self-shift-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 16px 34px -16px rgba(15,23,42,.3); }
}
.self-shift-card:active { transform: scale(.995); }
/* Datums-Badge runder + weiche Tiefe */
.self-shift-card > div:first-child { border-radius: 13px !important; box-shadow: 0 6px 14px -8px rgba(15,23,42,.4); }
/* HEUTE */
.self-shift-card.sf-today { border: 1.5px solid #14B8A6 !important; box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 12px 30px -16px rgba(15,118,110,.35); }
/* NEU — leuchtender Aurora-Rand */
.self-shift-card.sf-neu {
  border: 2px solid transparent !important;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#22D3EE,#3B82F6) border-box !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.16), 0 14px 34px -14px rgba(37,99,235,.4);
  animation: sf-fadeup .35s ease both, sf-glow 2.4s ease-in-out infinite;
}
/* STORNO */
.self-shift-card.sf-storno { border: 2px dashed #FCA5A5 !important; box-shadow: none; }
/* Bestaetigen-Button — Gradient + Tap-Feedback */
.sf-confirm-btn {
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 20px -10px rgba(22,163,74,.7);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.sf-confirm-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(22,163,74,.75) !important; }
.sf-confirm-btn:active { transform: scale(.98); }
@keyframes sf-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sf-glow {
  0%,100% { box-shadow: 0 0 0 3px rgba(56,189,248,.16), 0 14px 34px -14px rgba(37,99,235,.4); }
  50%     { box-shadow: 0 0 0 5px rgba(56,189,248,.28), 0 16px 38px -12px rgba(37,99,235,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .self-shift-card, .self-shift-card.sf-neu { animation: none; }
}

/* ============================================================
   CLEAN FUTURISM — GLOBAL (komplette App, v321)
   Ueberschreibt die gemeinsamen Komponenten-Klassen app-weit.
   ============================================================ */
/* Primaer-Buttons: Gradient + Tiefe + Tap-Feedback */
button.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px -10px rgba(15,118,110,.6);
  transition: transform .12s, box-shadow .2s, filter .2s !important;
}
button.primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(15,118,110,.65) !important; }
button.primary:active { transform: scale(.98); }
button.ghost { border-radius: 12px !important; transition: background .15s, border-color .15s, transform .12s; }
button.ghost:active { transform: scale(.98); }
button.danger {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important; color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(220,38,38,.6); transition: transform .12s, filter .2s;
}
button.danger:hover { filter: brightness(1.05); }
button.danger:active { transform: scale(.98); }
.btn-verschicken { background: linear-gradient(135deg, #1D5B33 0%, #2E7D44 100%) !important; border-radius: 12px !important; box-shadow: 0 8px 20px -12px rgba(29,91,51,.6); transition: transform .12s, filter .2s; }
.btn-verschicken:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-verschicken:active { transform: scale(.98); }

/* Panels / Karten: groessere Radien + mehrlagige Schatten */
.panel {
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 30px -18px rgba(15,23,42,.18) !important;
}
/* KPI / Stat-Karten: weicher, modern, Akzentkante */
.kpi-bar .kpi-card, .stat {
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 13px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 24px -18px rgba(15,23,42,.22);
  transition: transform .14s, box-shadow .2s;
}
@media (hover:hover) { .kpi-bar .kpi-card:hover, .stat:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 16px 30px -18px rgba(15,23,42,.28); } }
.kpi-bar .kpi-card .kpi-value, .stat .value { color: var(--primary); }

/* Eingaben: rundere Felder + weicher Fokus-Glow */
.field input, .field select {
  border-radius: 11px !important;
  transition: border-color .15s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus {
  outline: none !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.16) !important;
}

/* Dialoge: Backdrop-Blur + tiefere, rundere Karte + Einblenden */
.dialog-bg { background: rgba(15,23,42,.45) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dialog {
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,.5), 0 8px 24px -16px rgba(15,23,42,.4) !important;
  animation: sf-fadeup .22s ease both;
}

/* Tabellen-Header: Gradient statt einfarbig */
/* v391 (K3): Spezial-Tabellen mit eigenem hellen Header ausnehmen — sonst überschrieb der
   teal-Gradient-!important die in styles-02/04 definierten Header von Einweisungen/Cockpit-
   Block/Mein-LN/MA-Liste. Hauptlisten (Benutzer/Monat/Zertifikate/Schichten) behalten ihn. */
table:not(.ew-table):not(.cbd-ma-table):not(.ml-tbl):not(.ck-ma) th { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important; }


/* Chips/Pills app-weit minimal weicher */
.chip { border-radius: 999px; }

/* Urlaubskonten-Button nur fuer Admin/SuperAdmin (Schreibrecht via RLS) */
body:not(.role-admin) #btn-urlaubskonten { display: none !important; }

/* ===== Block 2/5 (urspr. inline) ===== */
.toast {
    pointer-events: auto;
    background: var(--slate-800);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--r-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    animation: toast-in var(--duration-normal) var(--easing-out);
    font-size: var(--fs-body);
  }
  .toast.toast-leaving { animation: toast-out var(--duration-fast) var(--easing-out) forwards; }
  @keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  @keyframes toast-out {
    to { transform: translateX(100%); opacity: 0; }
  }
  .toast-msg { flex: 1; line-height: 1.3; }
  .toast-undo {
    background: var(--primary-light);
    color: var(--slate-900);
    border: none;
    padding: 6px 14px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-small);
    cursor: pointer;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .toast-undo:hover { background: var(--primary-bg-strong); }
  .toast-close {
    background: transparent;
    color: var(--slate-300);
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
  }
  .toast-close:hover { color: #fff; }
  @media (prefers-reduced-motion: reduce) {
    .toast, .toast.toast-leaving { animation: none; }
  }

  /* ===================== COCKPIT (NEU) ===================== */
  /* Hero (Design 1) */
  .cockpit-hero {
    background: linear-gradient(135deg, #0F766E 0%, #134E4A 100%);
    color: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(15,118,110,0.18);
  }
  .cockpit-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .cockpit-hero-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
  }
  .cockpit-hero-logo {
    height: 42px;
    background: #fff;
    padding: 2px;
    border-radius: 6px;
  }
  .cockpit-hero h2 {
    font-size: 22px;
    margin: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.3px;
  }
  .cockpit-hero-sub {
    font-size: 13px;
    color: #ECFDF5;
    margin-top: 2px;
  }
  .cockpit-hero-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .ck-hero-btn {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.12s;
  }
  .ck-hero-btn:hover { background: rgba(255,255,255,0.28); }
  .ck-hero-btn-wa {
    background: #25D366;
    border-color: #1E9F4E;
    font-weight: 700;
  }
  .ck-hero-btn-wa:hover { background: #1E9F4E; }
  .ck-hero-date-input {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color-scheme: dark;
  }
  .ck-hero-date-input option { color: #0F172A; background: #fff; }
  /* Day-Pillen Wochenleiste */
  .cockpit-hero-days {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .ck-day-pill {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 7px 14px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.12s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.1;
    min-width: 64px;
  }
  .ck-day-pill .pill-wd { font-size: 10px; opacity: 0.85; }
  .ck-day-pill .pill-d { font-size: 14px; font-weight: 700; }
  .ck-day-pill:hover { background: rgba(255,255,255,0.22); }
  .ck-day-pill.active {
    background: #FFD75A;
    color: #7C2D12;
    border-color: #FFD75A;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .ck-day-pill.has-shifts { box-shadow: 0 0 0 2px rgba(255,215,90,0.5) inset; }
  /* KPI-Karten */
  /* Tages-Übersicht Strip (MA + Stunden) */
  .ck-day-strip {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
    color: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .ck-day-strip-label { display: flex; flex-direction: column; min-width: 160px; }
  .ck-day-strip-hint { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.6px; }
  .ck-day-strip-label b { font-size: 18px; font-weight: 700; margin-top: 2px; }
  .ck-day-strip-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid rgba(255,255,255,0.22);
  }
  .ck-day-strip-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .ck-day-strip-num { font-size: 22px; font-weight: 700; line-height: 1; }
  .ck-day-strip-lbl { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }
  /* Tages-Übersicht: 3 Zähler untereinander (Eigene / Externe / Abwesenheiten) */
  .ck-strip-counts { flex-direction: column; align-items: flex-start; gap: 4px; }
  #ck-strip-3counts { display: flex; flex-direction: column; gap: 4px; }
  .ck-strip-cnt { display: flex; align-items: center; gap: 8px; color: #fff; line-height: 1.1; }
  .ck-strip-cnt-ico { font-size: 15px; width: 20px; text-align: center; }
  .ck-strip-cnt b { font-size: 19px; font-weight: 800; min-width: 22px; text-align: right; }
  .ck-strip-cnt-lbl { font-size: 11px; opacity: 0.88; text-transform: uppercase; letter-spacing: 0.4px; }
  /* KFZ aus Autoverleih optisch hervorheben — Block-Ansicht + Editor */
  .ck-fnk-m.ck-fnk-leih { background: #FEF3C7; border-radius: 5px; padding: 0 5px; }
  .ck-fnk-m.ck-fnk-leih .ck-fnk-kfz { color: #92400E; font-weight: 700; }
  .ceb-kfz.ceb-kfz-leih, .cbd-ma-kfz.ceb-kfz-leih { background: #FEF3C7 !important; box-shadow: inset 3px 0 0 #F59E0B; }
  @media (max-width: 600px) {
    .ck-day-strip { gap: 14px; padding: 12px 14px; }
    .ck-day-strip-stat { padding-left: 14px; }
    .ck-day-strip-num { font-size: 18px; }
  }
  /* Schnellsuche im Tages-Übersicht-Strip */
  .ck-strip-search { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 240px; max-width: 380px; flex: 1 1 240px; }
  .ck-strip-search-box {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.40);
    border-radius: 8px; padding: 7px 11px;
    transition: background .12s, border-color .12s;
  }
  .ck-strip-search-box:focus-within { background: rgba(255,255,255,0.96); border-color: #fff; }
  .ck-strip-search-ic { font-size: 14px; opacity: 0.9; }
  #ck-strip-search-input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 14px; font-weight: 600;
  }
  #ck-strip-search-input::placeholder { color: rgba(255,255,255,0.82); font-weight: 500; }
  .ck-strip-search-box:focus-within #ck-strip-search-input { color: #0F172A; }
  .ck-strip-search-box:focus-within #ck-strip-search-input::placeholder { color: #94A3B8; }
  .ck-strip-search-clear {
    border: 0; background: rgba(255,255,255,0.28); color: #fff;
    width: 21px; height: 21px; border-radius: 50%; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .ck-strip-search-box:focus-within .ck-strip-search-clear { background: #0F766E; }
  .ck-strip-search-result { font-size: 12px; min-height: 14px; line-height: 1.45; opacity: 0.96; }
  .ck-strip-search-result b { font-weight: 700; }
  /* Treffer-Hervorhebung im Block-Grid */
  .ck-block.ck-dim { opacity: 0.32; filter: grayscale(0.6); transition: opacity .15s, filter .15s; }
  .ck-block.ck-name-match { box-shadow: 0 0 0 2px #F59E0B, 0 2px 12px rgba(0,0,0,0.12); }
  table.ck-ma tr.ck-name-hit td { background: #FEF08A !important; }
  table.ck-ma tr.ck-name-hit .ck-fnk-nameval { font-weight: 800; color: #7C2D12; }
  html[data-theme="dark"] table.ck-ma tr.ck-name-hit td { background: #854D0E !important; color: #FEF9C3 !important; }
  html[data-theme="dark"] table.ck-ma tr.ck-name-hit .ck-fnk-nameval { color: #FEF9C3; }

  .cockpit-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  @media (max-width: 700px) { .cockpit-kpi { grid-template-columns: repeat(2, 1fr); } }
  .ckpi-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-left: 4px solid var(--primary, #0F766E);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .ckpi-card.success { border-left-color: #16A34A; }
  .ckpi-card.warn    { border-left-color: #F59E0B; }
  .ckpi-card.danger  { border-left-color: #DC2626; }
  .ckpi-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .ckpi-lbl {
    font-size: 11px;
    color: var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-top: 4px;
  }
  .cockpit-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--slate-100);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .cockpit-toolbar .cockpit-input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
  }
  .cockpit-toolbar .cockpit-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(15,118,110,0.15);
  }
  .cockpit-day-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--card);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .cockpit-day-switch .btn-icon {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    color: var(--text);
    line-height: 1;
    font-weight: 600;
  }
  .cockpit-day-switch .btn-icon:hover { background: var(--primary-bg); color: var(--primary); }
  .cockpit-day-switch .ck-date { font-weight: 600; padding: 4px 10px; min-width: 170px; text-align: center; font-size: 14px; color: var(--text); }
  .cockpit-actions-right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
  .cockpit-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
  }
  @media (max-width: 900px) {
    .cockpit-layout { grid-template-columns: 1fr; }
  }
  .cockpit-main { min-width: 0; }
  .cockpit-grid {
    display: grid;
    /* Min-Breite 420px pro Block → automatisch passt Spalten-Anzahl zur Bildschirmbreite */
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
  }
  @media (max-width: 700px)  { .cockpit-grid { grid-template-columns: 1fr; } }
  .ck-block {
    background: var(--card, #fff);
    /* v349: kraeftige Umrandung, damit Bloecke sehr deutlich voneinander abgegrenzt sind */
    border: 2.5px solid #64748B;
    border-left: 6px solid #1976D2;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    font-size: 11px;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(15,23,42,0.16);
  }
  .ck-block:hover { box-shadow: 0 4px 18px rgba(15,23,42,0.22); border-color: #334155; }
  /* Hervorhebung beim Sprung aus der Zeitkorrektur-Benachrichtigung */
  .ck-block.ck-highlight {
    border-color: #F59E0B !important;
    border-left-color: #F59E0B !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.55), 0 4px 18px rgba(245,158,11,0.35);
    animation: ckHighlightPulse 1s ease-in-out 0s 3;
  }
  @keyframes ckHighlightPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,0.55), 0 4px 18px rgba(245,158,11,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,0.85), 0 6px 24px rgba(245,158,11,0.55); }
  }
  @media (prefers-reduced-motion: reduce) { .ck-block.ck-highlight { animation: none; } }
  .ck-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    z-index: 2;
  }
  .ck-action {
    background: var(--card, #fff);
    border: 1px solid var(--border, #CBD5E1);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: var(--muted, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
  }
  .ck-action:hover { background: var(--slate-100, #F1F5F9); }
  .ck-action.danger:hover { background: #FEE2E2; color: #B91C1C; }
  .ck-action.copy:hover { background: #DBEAFE; color: #1E40AF; }
  .ck-action.paste:hover { background: #DCFCE7; color: #15803D; }
  .ck-action.storno:hover { background: #FEF3C7; color: #B45309; }
  .ck-action.wa:hover { background: #DCFCE7; }
  /* Stornierte Schicht im Cockpit-Block: grau + durchgestrichen, Badge/Buttons bleiben lesbar */
  tr.ck-row-storniert td { background: #F8FAFC !important; opacity: 0.72; }
  tr.ck-row-storniert td * { text-decoration: line-through; text-decoration-color: #94A3B8; }
  tr.ck-row-storniert .ck-storno-badge,
  tr.ck-row-storniert .ck-row-storno-btn,
  tr.ck-row-storniert .ck-row-del-btn { text-decoration: none !important; opacity: 1; }
  html[data-theme="dark"] tr.ck-row-storniert td { background: #1E293B !important; }
  /* Gelesen-Badge oben links */
  .ck-seen-badge {
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    font-family: inherit;
  }
  .ck-seen-badge.seen    { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
  .ck-seen-badge.partial { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
  .ck-seen-badge.unseen  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
  .ck-seen-badge:hover   { filter: brightness(0.95); }
  /* Header braucht oben Platz für WhatsApp links + Actions rechts */
  .ck-block .ck-header { padding-top: 32px !important; }
  /* WhatsApp-Icon oben links */
  .ck-block .ck-wa-icon {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 2;
    background: #25D366;
    color: #fff;
    border: 0;
    border-radius: 4px;
    width: 26px;
    height: 22px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }