/* Source Sans 3 via Google Fonts entfernt – Fredoka wird vollständig lokal gehostet (assets/fonts/) */
:root{
  --primary:#003A5C;
  --primary-2:#0b4f78;
  --navy:#003A5C;          /* Alias: Markenfarbe als Text auf hellen Flaechen */
  --sidebar-bg:#003A5C;

  /* augenschonender Hintergrund – Farbton aus apeiros.de (u.a. Button-Hover) */
  --bg:#F7F1E9;
  --surface:#ffffff;
  --card:#ffffff;            /* Alias zu --surface (für Karten/Modals) */
  --surface-2:#fbfcfd;
  --text:#0b0f14;
  --muted:#5b6670;
  --border:#e7eaee;
  --accent:#F7F1E9;
  /* Status-Farben: KANONISCH – Seiten nutzen var(--ok/--danger/--warn/--info)
     statt eigener Hex-Töne (vorher 12 konkurrierende Grün/Rot/Blau-Varianten) */
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#d97706;
  --info:#2563eb;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:16px;

  --topbar-bg:rgba(255,255,255,.92);
  --input-bg:#fff;
  --table-bg:#fff;
  --table-head-bg:#fbfcfd;
  --row-hover:#fcf8f2;

  /* ── Kopfleisten (Leistungserfassung: Wochenleiste + Tagesabschnitt) ───────
     Eigene Tokens, damit der Dark-Mode-Kopfbereich ruhig gestaltet werden kann,
     OHNE die globale Markenfarbe (--primary) für Links/Buttons mitzuverändern.
     Light-Mode = exakt das bisherige Aussehen (Markenfarbe + Weiß). */
  --bar-bg: var(--primary);
  --bar-text:#fff;
  --bar-border:transparent;
  --bar-edge:var(--primary);
  --bar-soft-bg:rgba(255,255,255,.10);
  --bar-soft-hover:rgba(255,255,255,.20);
  --bar-soft-text:#fff;
  --bar-nav-bg:rgba(255,255,255,.10);
  --bar-nav-hover:rgba(255,255,255,.20);
  --bar-nav-text:#fff;
  --bar-today-bg:rgba(255,255,255,.18);
  --bar-today-border:rgba(255,255,255,.5);
  --bar-sel-bg:#fff;
  --bar-sel-text:var(--primary);
  --bar-sel-border:#fff;
  --bar-dot:rgba(255,255,255,.7);

  /* ── Alias-Tokens für ältere Seiten (Standortauswahl, Login, Onboarding, …) ─
     Diese Seiten verwendeten ein verwaistes Token-Vokabular (--card-bg, --text-
     muted, …), das NIRGENDS definiert war → die Fallback-Hexes (weißes Card,
     dunkler Text) griffen immer und adaptierten NICHT an den Dark-Mode (helle
     Schrift auf weißem Card). Hier auf die echten, mode-aware Tokens umgebogen –
     Light-Mode bleibt identisch, Dark-Mode adaptiert automatisch (Befund analog
     zur Kopfleisten-Anpassung). */
  --card-bg: var(--card);
  --text-muted: var(--muted);
  --primary-dark: var(--primary-2);
  --bg-secondary: var(--surface-2);
  --border-color: var(--border);
  --code-bg: var(--surface-2);
  --success-color: var(--ok);
  --primary-rgb: 0, 58, 92;

  /* ── Responsive Layout ───────────────────────────────────────────────────
     --page-max:  Maximale Inhaltsbreite – skaliert fluid mit dem Viewport.
                  clamp(Minimum, flüssiger Wert, Maximum)
                  · <1040px Viewport → nutzt fast den ganzen Platz
                  · 1440px Viewport  → 1360px Inhalt (topnav) / ~1200px (sidebar)
                  · ≥1920px Viewport → capped bei 1500px, danach Randabstand
     --page-pad:  Horizontaler Innenabstand, skaliert zwischen 18 px und 40 px
     --sb-width:  Sidebar-Breite (auch für JS und abgeleitete calc()-Werte)
  ──────────────────────────────────────────────────────────────────────── */
  --page-max: clamp(900px, calc(100vw - 80px), 1500px);
  --page-pad: clamp(18px, 2.4vw, 40px);
  --sb-width: 220px;
  --sb-width-collapsed: 52px;
}

/* Darkmode — Navy Pro, tiefdunkles Navy mit klarer Schichtentrennung */
html[data-theme="dark"]{
  --primary:#5cb8e8;
  --primary-2:#4aa8dc;
  --navy:#5cb8e8;          /* dark: helles Blau, lesbar auf dunklen Flaechen */
  --sidebar-bg:#04101a;

  --bg:#07111c;
  --surface:#0e1f2e;
  --card:#0e1f2e;            /* Alias zu --surface (für Karten/Modals) */
  --surface-2:#162a3c;
  --text:#ddeaf6;
  --muted:#7aaac8;
  --border:#1f3a52;
  --accent:#162a3c;
  --danger:#f4697a;
  --ok:#3bcf80;
  --warn:#f0b35e;
  --info:#6ea8fe;
  --shadow:0 10px 30px rgba(0,0,0,.6);

  --topbar-bg:rgba(7,17,28,.95);
  --input-bg:#0b1928;
  --table-bg:#0e1f2e;
  --table-head-bg:#162a3c;
  --row-hover:#1a3248;

  /* Kopfleisten – Vorschlag A "Flächenruhe": dunkle Karte, Blau nur als Akzent
     (ausgewählter Tag + "Heute"), statt großer heller Fläche. */
  --bar-bg:#122a3e;
  --bar-text:#e8f1fb;
  --bar-border:#213a52;
  --bar-edge:#2f5e80;
  --bar-soft-bg:#16293b;
  --bar-soft-hover:#1d3850;
  --bar-soft-text:#cfe2f2;
  --bar-nav-bg:rgba(92,184,232,.12);
  --bar-nav-hover:rgba(92,184,232,.22);
  --bar-nav-text:#6cc0ec;
  --bar-today-bg:#1a3047;
  --bar-today-border:#2f5e80;
  --bar-sel-bg:#2f7fb8;
  --bar-sel-text:#ffffff;
  --bar-sel-border:#5cb8e8;
  --bar-dot:#7aaac8;

  /* Alias-Tokens (s. :root): nur --primary-rgb braucht im Dark-Mode den hellen
     Akzent-Blau-Wert; die übrigen Aliase folgen automatisch ihren Referenz-Tokens. */
  --primary-rgb: 92, 184, 232;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* ── WCAG 2.1 AA: Skip-Link ──────────────────────────────────────────────── */
.skip-link{
  position:absolute; top:-999px; left:0;
  padding:10px 20px;
  background:var(--primary); color:#fff;
  font-weight:700; font-size:14px; border-radius:0 0 10px 0;
  text-decoration:none; z-index:99999;
  transition:top .1s;
}
.skip-link:focus{top:0}

/* ── WCAG 2.1 AA: Focus Visible – globaler Fokus-Ring ───────────────────── */
/* Alle interaktiven Elemente erhalten einen sichtbaren Fokus-Indikator
   (WCAG 2.4.7). :focus-visible greift nur bei Tastatur-Navigation,
   nicht bei Mausklick – kein visueller Unterschied für Mausnutzer. */
:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Inputs haben bereits border+shadow als Fokus-Indikator → kein doppelter Ring */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
}
/* Sidebar-Nav-Links: Ring leicht enger für kompaktes Layout */
.sb-item:focus-visible,
.sb-section.sb-collapsible:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: -2px;
  border-radius: 8px;
}
/* Dark Mode: hellerer Fokus-Ring auf dunklem Hintergrund */
html[data-theme="dark"] :focus-visible{
  outline-color: var(--primary);
}

.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--topbar-bg);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:14px var(--page-pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.topbar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.2px;
}
.brand-badge{
  width:34px; height:34px; border-radius:999px;
  border:3px solid var(--primary);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--primary);
  font-weight:800;
}
.brand-logo{
  width:22px; height:22px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
  border-radius:999px;
}
.brand-wordmark{
  font-weight:600;
  font-size:18px;
  letter-spacing:.3px;
  color:inherit;
  line-height:1;
}
/* Wordmark-Bild: weiß auf dunklem Sidebar-Hintergrund */
.brand-wordmark-img{
  height:48px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
/* Sidebar: weißes Bild passt direkt auf dunklen Hintergrund */
.sb-wordmark{
  filter:none;
  width:160px;
  height:auto;
  max-width:calc(100% - 16px);
}
/* Topbar: Bild auf hellem Hintergrund → mit Primärfarbe einfärben */
.tb-wordmark{
  filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(800%) hue-rotate(185deg) brightness(90%);
}
/* Dark Mode Topbar: wieder weiß */
html[data-theme="dark"] .tb-wordmark{
  filter: brightness(0) invert(1);
}
.nav{
  display:flex; flex-wrap:wrap; gap:10px;
}
.nav a{
  padding:8px 12px;
  border-radius:999px;
  border:2px solid transparent;
  color:var(--text);
}
.nav a.active{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--accent);
}

.container{
  max-width:var(--page-max);
  margin:0 auto;
  padding:22px var(--page-pad) 60px;
  box-sizing:border-box;
}

.h1{font-size:34px; margin:0 0 8px}
.sub{color:var(--muted); margin:0 0 18px}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:14px 0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.col-1 {grid-column:span 1}
.col-2 {grid-column:span 2}
.col-3 {grid-column:span 3}
.col-4 {grid-column:span 4}
.col-5 {grid-column:span 5}
.col-6 {grid-column:span 6}
.col-7 {grid-column:span 7}
.col-8 {grid-column:span 8}
.col-9 {grid-column:span 9}
.col-10{grid-column:span 10}
.col-11{grid-column:span 11}
.col-12{grid-column:span 12}
@media (max-width:900px){
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11{grid-column:span 12}
}

label{display:block; font-weight:600; margin:0 0 6px}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  font:inherit;
  background:var(--input-bg);
  color:var(--text);
}
textarea{min-height:90px; resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,58,92,.5);
  box-shadow:0 0 0 3px rgba(0,58,92,.12);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:10px;
  border:2px solid var(--primary);
  background:var(--surface);
  color:var(--primary);
  font-weight:700;
  cursor:pointer;
}
.btn:hover{background:var(--accent)}
.btn.primary{
  background:var(--primary);
  color:#fff;
}
.btn.primary:hover{background:var(--primary-2)}
.btn.danger{
  border-color:var(--danger);
  color:var(--danger);
}
.btn.danger:hover{background:rgba(176,0,32,.07)}
.btn.success{
  border-color:#16a34a;
  color:#005a28;
  background:rgba(0,120,60,.08);
}
.btn.success:hover{background:rgba(0,120,60,.16)}
.btn.warning{
  border-color:rgba(200,100,0,.45);
  color:#7a4000;
  background:rgba(230,130,0,.1);
}
.btn.warning:hover{background:rgba(230,130,0,.18)}

.row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

.flash{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--accent);
  margin:12px 0;
}
.flash.ok{border-color:rgba(10,122,47,.25); background:rgba(10,122,47,.08)}
.flash.err{border-color:rgba(176,0,32,.25); background:rgba(176,0,32,.07)}

.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:900px;
}
th,td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  text-align:center;
  vertical-align:middle;
  background:var(--table-bg);
}
th{
  position:sticky; top:0;
  z-index:1;
  background:var(--table-head-bg);
  font-weight:700;
}
td.left, th.left{text-align:left}
.right{text-align:right}
tr:hover td:not(.hl-cell){background:var(--row-hover)}

/* --- Excel-like tables (Klienten/Mitarbeitende Übersicht) --- */
table.excel{min-width:0}
table.excel th, table.excel td{ text-align:left }
table.excel th.num, table.excel td.num{ text-align:right; font-variant-numeric: tabular-nums }
table.excel th.center, table.excel td.center{ text-align:center }
table.excel tbody tr:nth-child(odd) td{ background: rgba(0,0,0,0.02) }
[data-theme="dark"] table.excel tbody tr:nth-child(odd) td{ background: rgba(255,255,255,0.03) }

th.sortable{ cursor:pointer; user-select:none; white-space:nowrap }
th.sortable::after{ content:"↕"; opacity:.35; margin-left:6px; font-size:12px }
th.sortable.sort-asc::after{ content:"↑"; opacity:.9 }
th.sortable.sort-desc::after{ content:"↓"; opacity:.9 }

.table-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 10px }
.table-toolbar input{ max-width:320px }

/* --- Timeline highlighting (Buchungszeiträume) --- */
td.hl-cell{position:relative}

/* Teilweise Abdeckung (Start-/Endmonat o.ä.) */
td.hl-partial{
  background:repeating-linear-gradient(
    135deg,
    rgba(0,58,92,.08),
    rgba(0,58,92,.08) 8px,
    rgba(0,58,92,.02) 8px,
    rgba(0,58,92,.02) 16px
  );
}

/* Vollständige Monatsabdeckung (Excel-Logik zählt) */
td.hl-full{background:rgba(0,58,92,.14)}

/* Kanten der zusammenhängenden „Balken“ */
td.hl-start{border-left:3px solid var(--primary); border-top-left-radius:12px; border-bottom-left-radius:12px}
td.hl-end{border-right:3px solid var(--primary); border-top-right-radius:12px; border-bottom-right-radius:12px}

.badge{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:12px;
  color:var(--muted);
}
.badge.neg{border-color:rgba(176,0,32,.3); background:rgba(176,0,32,.06); color:var(--danger)}
.badge.pos{border-color:rgba(10,122,47,.25); background:rgba(10,122,47,.06); color:var(--ok)}

.kpi{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.kpi .tile{
  grid-column:span 4;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 14px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* ── Theme Toggle (Icon-only) ────────────────────────────────────────────── */
.btn.theme-toggle{
  padding:0;
  width:36px; height:36px;
  flex-shrink:0;
}
.theme-icon-sun{ display:none; align-items:center; justify-content:center; }
.theme-icon-moon{ display:inline-flex; align-items:center; justify-content:center; }
html[data-theme="dark"] .theme-icon-sun{ display:inline-flex }
html[data-theme="dark"] .theme-icon-moon{ display:none }

/* ═══════════════════════════════════════════════════════════════════════════
   USER-MENU  (Avatar-Button + Dropdown)
═══════════════════════════════════════════════════════════════════════════ */
.user-menu{
  position:relative;
}
.user-btn{
  width:36px; height:36px;
  border-radius:999px;
  border:2.5px solid var(--primary);
  background:var(--surface);
  color:var(--primary);
  font-weight:800;
  font-size:12px;
  letter-spacing:.5px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.user-btn:hover{ background:var(--primary); color:#fff; }
.user-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:215px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.13);
  opacity:0;
  transform:translateY(-8px) scale(.97);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:200;
  overflow:hidden;
}
.user-menu.open .user-dropdown{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.user-dropdown-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.user-dropdown-avatar{
  width:32px; height:32px;
  border-radius:999px;
  border:2px solid var(--primary);
  background:var(--accent);
  color:var(--primary);
  font-weight:800;
  font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.user-dropdown-info strong{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}
.user-dropdown-info span{
  font-size:11px;
  color:var(--muted);
}
.user-dropdown-sep{
  height:1px;
  background:var(--border);
  margin:4px 0;
}
.user-dropdown a,
.user-dropdown button.ud-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  border:none;
  background:none;
  width:100%;
  font-family:inherit;
  transition:background .12s;
}
.user-dropdown a:hover,
.user-dropdown button.ud-btn:hover{
  background:var(--accent);
  text-decoration:none;
  color:var(--text);
}
.ud-icon{
  display:flex; align-items:center; justify-content:center;
  width:20px;
  flex-shrink:0;
  opacity:.7;
}
.ud-logout,
.ud-logout:visited{ color:var(--danger) !important; }
.ud-logout .ud-icon{ opacity:1; }
.ud-logout:hover{ background:rgba(176,0,32,.07) !important; }

/* Kleine Buttons (z.B. in Tabellen) */
.btn.sm, .btn.small{
  padding:5px 11px;
  font-size:12px;
  border-width:1.5px;
  border-radius:7px;
  gap:5px;
}

/* Icon-only Button: rund, kompakt, nur Emoji */
.btn-icon{
  width:34px;
  height:34px;
  padding:0;
  font-size:15px;
  border-width:2px;
  border-radius:999px;
  flex-shrink:0;
  line-height:1;
}

/* Aktions-Zeile in Tabellen */
.action-row{
  display:flex;
  gap:5px;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
}

/* Darkmode-Overrides für hardcodierte Farben */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:rgba(92,184,232,.5);
  box-shadow:0 0 0 3px rgba(92,184,232,.14);
}
html[data-theme="dark"] .btn.danger:hover{background:rgba(244,105,122,.12)}
html[data-theme="dark"] .btn.success{background:rgba(59,207,128,.1); border-color:rgba(59,207,128,.5); color:#3bcf80}
html[data-theme="dark"] .btn.success:hover{background:rgba(59,207,128,.18)}
html[data-theme="dark"] .btn.warning{background:rgba(230,160,0,.12); border-color:rgba(230,160,0,.45); color:#f0b040}
html[data-theme="dark"] .btn.warning:hover{background:rgba(230,160,0,.2)}
html[data-theme="dark"] .flash.ok{border-color:rgba(59,207,128,.25); background:rgba(59,207,128,.08)}
html[data-theme="dark"] .flash.err{border-color:rgba(244,105,122,.28); background:rgba(244,105,122,.08)}
html[data-theme="dark"] .badge.neg{border-color:rgba(244,105,122,.35); background:rgba(244,105,122,.1); color:var(--danger)}
html[data-theme="dark"] .badge.pos{border-color:rgba(59,207,128,.3); background:rgba(59,207,128,.1); color:var(--ok)}
/* Semantische Textfarben — im Light Mode dunkel (z.B. #065f46), im Dark aufhellen */
html[data-theme="dark"] .badge-green,
html[data-theme="dark"] .pill.green { color:#4ade80 !important; }
html[data-theme="dark"] .badge-yellow,
html[data-theme="dark"] .pill.yellow { color:#fbbf24 !important; }
html[data-theme="dark"] .badge-red,
html[data-theme="dark"] .pill.red { color:#f87171 !important; }
/* doc_badge (documentation.php) */
html[data-theme="dark"] .doc-badge.green { color:#4ade80; border-color:rgba(74,222,128,.25); background:rgba(74,222,128,.08); }
html[data-theme="dark"] .doc-badge.blue  { color:var(--primary); }
/* goal-pills (my_area.php) */
html[data-theme="dark"] .goal-pill.offen    { color:#fbbf24; background:rgba(251,191,36,.12); }
html[data-theme="dark"] .goal-pill.in_arbeit{ color:var(--primary); background:rgba(92,184,232,.1); }
html[data-theme="dark"] .goal-pill.erreicht { color:#4ade80; background:rgba(74,222,128,.1); }
/* mc-cal-absence (my_closing.php) */
html[data-theme="dark"] .mc-cal-absence { color:var(--primary); background:rgba(92,184,232,.1); }
html[data-theme="dark"] .ac-menu{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
html[data-theme="dark"] .ac-item{border-bottom-color:var(--border); color:var(--text)}
html[data-theme="dark"] .ac-item:hover,
html[data-theme="dark"] .ac-item.active{background:rgba(95,170,223,.1)}

/* Timeline highlighting im Darkmode etwas kontrastreicher */
html[data-theme="dark"] td.hl-partial{
  background:repeating-linear-gradient(
    135deg,
    rgba(123,183,255,.12),
    rgba(123,183,255,.12) 8px,
    rgba(123,183,255,.04) 8px,
    rgba(123,183,255,.04) 16px
  );
}
html[data-theme="dark"] td.hl-full{background:rgba(123,183,255,.18)}
.kpi .tile .label{color:var(--muted); font-weight:600; font-size:13px}
.kpi .tile .value{font-size:28px; font-weight:800; margin-top:4px}
@media (max-width:900px){
  .kpi .tile{grid-column:span 12}
}

.footer{
  margin-top:28px;
  color:var(--muted);
  font-size:13px;
}

/* ── Hamburger / Mobile Nav ────────────────────────────── */
.nav-toggle{
  display:none;
  padding:8px 12px;
  border-width:2px;
}
@media (max-width:860px){
  .nav-toggle{ display:inline-flex }
  .topbar-inner{ flex-wrap:wrap; gap:8px }
  .topbar-right{ width:100%; flex-wrap:wrap }
  .nav{
    display:none; flex-direction:column; width:100%;
    background:var(--topbar-bg);
    border-top:1px solid var(--border);
    padding:8px 0;
    gap:2px;
  }
  .nav.nav-open{ display:flex }
  .nav a{ padding:10px 14px; border-radius:10px; width:100%; box-sizing:border-box }
}

/* ── Topbar-Suche ───────────────────────────────────────── */
.topbar-search{
  display:inline-flex; align-items:center;
}
.topbar-search input{
  width:180px; padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  transition:width .2s;
}
.topbar-search input:focus{ width:240px }
@media (max-width:860px){
  .topbar-search{ width:100% }
  .topbar-search input{ width:100% }
  .topbar-search input:focus{ width:100% }
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted);
  margin:0 0 10px;
  flex-wrap:wrap;
}
.breadcrumb a{ color:var(--muted); text-decoration:none }
.breadcrumb a:hover{ color:var(--primary); text-decoration:underline }
.breadcrumb-sep{ opacity:.45; font-size:12px }
.breadcrumb > span:last-child{ color:var(--text); font-weight:600 }

/* ── Client-Tooltip ─────────────────────────────────────── */
.tt-wrap{
  position:relative; display:inline-block; cursor:default;
}
.tt-box{
  position:absolute; z-index:200;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  font-size:12px; line-height:1.5;
  white-space:nowrap;
  box-shadow:var(--shadow);
  bottom:calc(100% + 8px);
  left:50%; transform:translateX(-50%);
  display:none;
  pointer-events:none;
  min-width:160px;
}
.tt-wrap:hover .tt-box{ display:block }

/* ── Anklickbare KPI-Kacheln ────────────────────────────── */
a.tile{
  text-decoration:none; color:inherit;
  display:block;
  transition:box-shadow .15s, transform .15s;
}
a.tile:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transform:translateY(-2px);
  text-decoration:none;
}

/* ── Auslastungs-Balken ─────────────────────────────────── */
/* Pastell-Palette passend zum Belegungsplan                 */
.util-bar{display:block;background:var(--border);border-radius:6px;height:8px;min-width:60px;overflow:hidden;flex-shrink:0}
.util-fill{display:block;height:100%;border-radius:6px;background:#cfe6a8;transition:width .4s ease}
.util-fill.med{background:#f0d98c}
.util-fill.high{background:#f4906e}
.util-row{display:flex;align-items:center;gap:8px}
.util-pct{font-size:12px;font-weight:700;white-space:nowrap;min-width:42px;text-align:right;color:#3d6b18}
.util-pct.med{color:#7a5800}
.util-pct.high{color:#9e3b25}

/* Große Auslastungsanzeige (employee_edit Auslastung-Tab) */
.util-big{padding:16px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin:0 0 16px}
.util-big-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.util-big-label{font-weight:700;font-size:14px;color:var(--muted)}
.util-big-value{font-size:30px;font-weight:800;line-height:1;color:#3d6b18}
.util-big-value.med{color:#7a5800}
.util-big-value.high{color:#9e3b25}
.util-big-bar{height:18px;background:var(--border);border-radius:9px;overflow:hidden;margin:4px 0 8px}
.util-big-fill{height:100%;border-radius:9px;background:#cfe6a8;transition:width .5s ease}
.util-big-fill.med{background:#f0d98c}
.util-big-fill.high{background:#f4906e}
.util-big-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
/* Darkmode: etwas sattere Töne für Sichtbarkeit auf dunklem Grund */
html[data-theme="dark"] .util-fill{background:#8ab850}
html[data-theme="dark"] .util-fill.med{background:#d4a830}
html[data-theme="dark"] .util-fill.high{background:#d96848}
html[data-theme="dark"] .util-big-fill{background:#8ab850}
html[data-theme="dark"] .util-big-fill.med{background:#d4a830}
html[data-theme="dark"] .util-big-fill.high{background:#d96848}
html[data-theme="dark"] .util-pct{color:#a8cc70}
html[data-theme="dark"] .util-pct.med{color:#f0c84a}
html[data-theme="dark"] .util-pct.high{color:#f4906e}
html[data-theme="dark"] .util-big-value{color:#a8cc70}
html[data-theme="dark"] .util-big-value.med{color:#f0c84a}
html[data-theme="dark"] .util-big-value.high{color:#f4906e}

/* ── Confirm-Modal ─────────────────────────────────────── */
.modal-overlay{
  display:none;
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.modal-overlay.open{ display:flex }
.modal-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  padding:32px 28px 24px;
  max-width:420px; width:92%;
  text-align:center;
  animation:modalIn .15s ease;
}
@keyframes modalIn{
  from{ transform:scale(.93); opacity:0 }
  to  { transform:scale(1);   opacity:1 }
}
.modal-icon{
  width:52px; height:52px;
  border-radius:999px;
  background:rgba(176,0,32,.08);
  border:1px solid rgba(176,0,32,.18);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
html[data-theme="dark"] .modal-icon{
  background:rgba(244,105,122,.1);
  border-color:rgba(244,105,122,.25);
}
.modal-title{
  font-size:18px; font-weight:700;
  margin:0 0 8px;
}
.modal-msg{
  color:var(--muted); font-size:14px; line-height:1.5;
  margin:0 0 24px;
}
.modal-confirm-check{
  display:none; align-items:center; gap:8px;
  justify-content:center;
  margin-bottom:18px;
  font-size:13px; color:var(--muted);
  cursor:pointer;
}
.modal-confirm-check input[type="checkbox"]{
  width:16px; height:16px; cursor:pointer; flex-shrink:0;
}
.modal-actions{
  display:flex; gap:10px; justify-content:center;
}
.modal-actions .btn:disabled{
  opacity:.4; cursor:not-allowed; pointer-events:none;
}

/* Export buttons: ~30% smaller */
a.btn[href*="export="],
button.btn[name="export"],
input.btn[name="export"]{
  padding:7px 11px;
  border-width:2px;
  gap:6px;
  font-size:0.9em;
}

/* ── Datei-Upload Button ─────────────────────────────────────────────────── */
/* Verwendung: <label class="btn file-btn"> Icon Text <input type="file" ...> </label> */
label.file-btn { cursor:pointer; }
label.file-btn input[type="file"] { display:none; }

/* Fallback: bare input[type="file"] ohne Label – minimal ansprechend stylen */
input[type="file"]:not([style*="display:none"]) {
  padding:7px 12px;
  border-radius:999px;
  border:2px solid var(--primary);
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  font-family:inherit;
}
input[type="file"]:not([style*="display:none"])::file-selector-button {
  padding:5px 12px;
  border-radius:999px;
  border:none;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  margin-right:10px;
  font-size:13px;
  transition:background .15s;
}
input[type="file"]:not([style*="display:none"])::file-selector-button:hover {
  background:var(--primary-2);
}

/* Autocomplete (type-to-select) */
html.js select.select-hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.ac-input{
  width:100%;
}
.ac-wrap{
  position:relative;
}
.ac-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  max-height:260px;
  overflow:auto;
  z-index:50;
}
.ac-item{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.ac-item:last-child{
  border-bottom:none;
}
.ac-item.active,
.ac-item:hover{
  background:rgba(0,58,92,.06);
}
.ac-hint{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR-NAVIGATION
   Aktiviert durch html[data-nav="sidebar"] (Default).
   Klassische Navigation: html[data-nav="topnav"].
══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout-Wrapper ──────────────────────────────────────────────────────── */
.app-wrap{
  display:flex;
  min-height:100vh;
}
.layout-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar{
  width:220px;
  flex-shrink:0;
  background:var(--sidebar-bg);
  color:#fff;
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  overflow-y:auto;
  overflow-x:hidden;
  transition:width .22s ease;
  z-index:20;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}

/* ── Sidebar Brand ───────────────────────────────────────────────────────── */
.sb-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.sb-brand .brand-badge{
  border-color:rgba(255,255,255,.7);
  color:#fff;
  flex-shrink:0;
}
.sb-brand-text{
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  transition:opacity .15s, width .22s;
}

/* ── Sidebar Nav ─────────────────────────────────────────────────────────── */
.sb-nav{
  flex:1;
  padding:8px 0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* ── Sidebar Section Header ──────────────────────────────────────────────── */
.sb-section{
  padding:14px 22px 4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  white-space:nowrap;
  overflow:hidden;
  /* Nur opacity animieren – height/padding-Transition verursacht Flackern bei Klicks */
  transition:opacity .15s;
}

/* ── Sidebar Items ───────────────────────────────────────────────────────── */
.sb-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-radius:10px;
  margin:1px 8px;
  font-size:14px;
  cursor:pointer;
  border:none;
  background:none;
  width:calc(100% - 16px);
  font-family:inherit;
  font-weight:500;
  transition:background .15s, color .15s;
  white-space:nowrap;
  overflow:hidden;
  text-align:left;
  box-sizing:border-box;
}
.sb-item:hover{
  background:rgba(255,255,255,.13);
  color:#fff;
  text-decoration:none;
}
.sb-item.active{
  background:rgba(255,255,255,.2);
  color:#fff;
  font-weight:700;
}
.sb-icon{
  flex-shrink:0;
  width:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.sb-icon svg{
  display:block;
  flex-shrink:0;
}
.sb-label{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .15s;
}

/* ── Sidebar Footer ──────────────────────────────────────────────────────── */
.sb-footer{
  border-top:1px solid rgba(255,255,255,.12);
  padding:8px 0;
  flex-shrink:0;
}
.sb-layout-btn,
.sb-collapse-btn{
  font-size:13px;
  color:rgba(255,255,255,.6);
}
.sb-layout-btn:hover,
.sb-collapse-btn:hover{
  color:#fff;
}
.sb-logout{
  color:rgba(255,255,255,.55);
}
.sb-logout:hover{
  color:#fff;
}

/* ── Hamburger & compact brand (Topbar, Sidebar-Modus) ───────────────────── */
.sb-hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:10px;
  border:2px solid rgba(0,58,92,.2);
  background:transparent;
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  flex-shrink:0;
}
.sb-hamburger:hover{
  background:var(--accent);
}
.tb-brand-compact{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}

/* ── Mobile Overlay ──────────────────────────────────────────────────────── */
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:19;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(2px);
}
.sb-overlay.active{
  display:block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR-MODUS: Sichtbarkeits-Regeln
══════════════════════════════════════════════════════════════════════════════ */

/* Standardmäßig alles für Sidebar-Modus ausblenden */
.tb-sb-left{ display:none }
.tb-topnav-left{ display:flex; align-items:center; gap:14px }
.ud-topnav-item{ display:block }
.ud-to-sidebar{ display:none }
.ud-to-topnav{ display:block }

/* Sidebar im Topnav-Modus verstecken */
html[data-nav="topnav"] .sidebar{ display:none }
html[data-nav="topnav"] .sb-overlay{ display:none !important }

/* Sidebar-Modus aktivieren */
html[data-nav="sidebar"] .sidebar{ display:flex }

html[data-nav="sidebar"] .tb-sb-left{
  display:flex;
  align-items:center;
  gap:10px;
}
html[data-nav="sidebar"] .tb-topnav-left{ display:none }

/* Hilfe & 2FA sind in der Sidebar → im Dropdown ausblenden */
html[data-nav="sidebar"] .ud-topnav-item{ display:none }
/* Layout-Wechsel-Links */
html[data-nav="sidebar"] .ud-to-sidebar{ display:none }
html[data-nav="sidebar"] .ud-to-topnav{ display:block }
html[data-nav="topnav"]  .ud-to-topnav{ display:none }
html[data-nav="topnav"]  .ud-to-sidebar{ display:block }

/* ── Sidebar-Modus: Topbar und Container ─────────────────────────────────────
   Sidebar nimmt var(--sb-width) weg. Verbleibender Platz = 100vw - var(--sb-width).
   --page-max ist so gewählt, dass auf kleinen Screens der volle Platz genutzt
   wird (min(100%, --page-max)), auf sehr breiten Screens (≥1920px) aber eine
   komfortable Obergrenze greift und der Inhalt mittig ausgerichtet wird.
   Ergebnis: beide Nav-Modi fühlen sich bei gleicher Viewport-Breite ähnlich breit an.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-nav="sidebar"] .topbar-inner{
  /* Sidebar-breite-adjustierte Obergrenze */
  max-width:min(100%, calc(var(--page-max) + var(--sb-width)));
  width:100%;
  margin:0 auto;
  padding:10px var(--page-pad);
  box-sizing:border-box;
}

html[data-nav="sidebar"] .container{
  /* Gleiche Logik: auf kleinen/mittleren Screens = volle Breite;
     auf großen Screens (≥1920px) cap → Inhalt sitzt zentriert im verbleibenden Bereich */
  max-width:min(100%, calc(var(--page-max) + var(--sb-width)));
  width:100%;
  margin:0 auto;
  padding:22px var(--page-pad) 60px;
  box-sizing:border-box;
}

/* Eingeklappte Sidebar: breitere Korrekturgröße */
html[data-nav="sidebar"][data-sidebar="collapsed"] .container,
html[data-nav="sidebar"][data-sidebar="collapsed"] .topbar-inner{
  max-width:min(100%, calc(var(--page-max) + var(--sb-width-collapsed)));
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR EINGEKLAPPT (data-sidebar="collapsed")
══════════════════════════════════════════════════════════════════════════════ */
html[data-sidebar="collapsed"] .sidebar{
  width:52px;
}
html[data-sidebar="collapsed"] .sb-brand-text{
  opacity:0;
  width:0;
  overflow:hidden;
}
html[data-sidebar="collapsed"] .sb-wordmark{
  display:none;
}
html[data-sidebar="collapsed"] .sb-label{
  opacity:0;
  width:0;
  overflow:hidden;
  flex:0;
}
html[data-sidebar="collapsed"] .sb-section{
  opacity:0;
  max-height:0;
  padding:0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
html[data-sidebar="collapsed"] .sb-item{
  justify-content:center;
  padding:9px 0;
  margin:1px 4px;
  width:calc(100% - 8px);
  border-radius:8px;
}
html[data-sidebar="collapsed"] .sb-brand{
  padding:18px 0 14px;
  justify-content:center;
}
/* Einklappen-Icon dreht sich */
html[data-sidebar="collapsed"] .sb-collapse-icon{
  display:inline-block;
  transform:rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK-MODE SIDEBAR
══════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .sidebar{
  background:#04101a;
  border-right:1px solid rgba(255,255,255,.07);
}
html[data-theme="dark"] .sb-brand{
  border-bottom-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .sb-footer{
  border-top-color:rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PILLS (Status-Badges)
══════════════════════════════════════════════════════════════════════════════ */
.pill{
  display:inline-flex;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.pill.ok{background:rgba(10,122,47,.1); color:var(--ok); border:1px solid rgba(10,122,47,.2)}
.pill.warn{background:rgba(176,0,32,.07); color:var(--danger); border:1px solid rgba(176,0,32,.18)}
html[data-theme="dark"] .pill.ok{background:rgba(59,207,128,.12); border-color:rgba(59,207,128,.3)}
html[data-theme="dark"] .pill.warn{background:rgba(244,105,122,.1); border-color:rgba(244,105,122,.28)}

/* ══════════════════════════════════════════════════════════════════════════════
   DESKTOP: Hamburger im Sidebar-Modus verstecken (Sidebar immer sichtbar)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width:861px){
  html[data-nav="sidebar"] .tb-sb-left{ display:none }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE: Sidebar als Overlay
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  html[data-nav="sidebar"] .sidebar{
    position:fixed;
    left:-260px;
    top:0;
    height:100vh;
    width:240px !important;
    z-index:100;
    transition:left .25s ease, width .22s ease;
  }
  html[data-nav="sidebar"] .sidebar.sb-open{
    left:0;
  }
  html[data-nav="sidebar"] .topbar-inner{
    flex-wrap:nowrap;
    gap:8px;
  }
  html[data-nav="sidebar"] .topbar-right{
    flex-wrap:nowrap;
  }
  html[data-nav="sidebar"] .topbar-search{
    display:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOPNAV-MODUS: Navigation immer als Hamburger-Dropdown
   (13+ Menüpunkte passen nie in eine Zeile → Dropdown bei allen Breiten)
══════════════════════════════════════════════════════════════════════════════ */

/* Topbar-Zeile bricht nicht um */
html[data-nav="topnav"] .topbar-inner{
  flex-wrap:nowrap;
}
html[data-nav="topnav"] .tb-topnav-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  position:relative; /* Panel positioniert sich relativ zum Button-Bereich */
}

/* Hamburger nur auf Mobile sichtbar (Topnav-Modus) — Desktop hat horizontale Mega-Nav */
html[data-nav="topnav"] .nav-toggle{
  display:none;
  flex-shrink:0;
}
@media (max-width: 900px){
  html[data-nav="topnav"] .nav-toggle{
    display:inline-flex !important;
  }
}

/* ── Nav-Toggle Button ───────────────────────────────────────────────────── */
.nt-icon-open, .nt-icon-close{ display:inline-flex; align-items:center; }
.nt-icon-close{ display:none }
#navToggle[aria-expanded="true"] .nt-icon-open{ display:none }
#navToggle[aria-expanded="true"] .nt-icon-close{ display:inline-flex }

/* ── Navigations-Panel (Dropdown-Modul) ─────────────────────────────────── */
.nav-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:240px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:8px;
  z-index:300;
  box-shadow:0 12px 36px rgba(0,0,0,.13);
  /* Animation */
  opacity:0;
  transform:translateY(-8px) scale(.97);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.nav-panel.nav-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Abschnitts-Trennlinie */
.np-sep{
  height:1px;
  background:var(--border);
  margin:5px 4px;
}

/* Abschnitts-Beschriftung */
.np-label{
  padding:6px 10px 3px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Navigations-Link */
.np-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:9px;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background .12s;
}
.np-item:hover{
  background:var(--accent);
  text-decoration:none;
}
.np-item.active{
  background:var(--accent);
  color:var(--primary);
  font-weight:700;
}
.np-icon{
  width:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
  opacity:.85;
}
.np-icon svg{
  display:block;
  flex-shrink:0;
}
.np-logout{
  color:var(--muted);
}
.np-logout:hover{
  color:var(--text);
}

/* Darkmode */
html[data-theme="dark"] .nav-panel{
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}

/* ── NEU: Horizontale Mega-Menü-Navigation ──────────────────────────────────── */
.np-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  margin-left:14px;
}

/* Direkt-Links und Trigger-Buttons sehen identisch aus */
.np-bar-item,
.np-bar-trig{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:9px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.np-bar-item:hover,
.np-bar-trig:hover{
  background:var(--accent);
  text-decoration:none;
}
.np-bar-item.active,
.np-bar-trig.active,
.np-bar-grp.open .np-bar-trig{
  background:var(--accent);
  color:var(--primary);
  font-weight:700;
}
.np-bar-arrow{
  font-size:9px;
  opacity:.5;
  margin-left:2px;
  transition:transform .15s;
}
.np-bar-grp.open .np-bar-arrow{
  transform:rotate(180deg);
  opacity:.8;
}

/* Gruppe (Trigger + Panel) */
.np-bar-grp{
  position:relative;
}

/* Sub-Dropdown */
.np-bar-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:230px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px;
  z-index:305;
  box-shadow:0 12px 36px rgba(0,0,0,.16);
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.np-bar-grp.open .np-bar-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Mega-Panel mit Spalten (für "Mehr") */
.np-bar-mega{
  right:0;
  left:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:6px 18px;
  min-width:680px;
  padding:14px 16px;
}
.np-mega-col{
  min-width:0;
}
.np-mega-col .np-label{
  padding:4px 10px 6px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}

/* Mobile: stack vertikal */
@media (max-width: 900px){
  .np-bar{
    display:none;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    margin:0;
    padding:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:305;
    box-shadow:0 12px 36px rgba(0,0,0,.16);
  }
  .np-bar.nav-open{ display:flex; }
  .np-bar-grp{ position:static; }
  .np-bar-panel{
    position:relative;
    top:0;
    box-shadow:none;
    border:none;
    padding:4px 0 4px 24px;
    min-width:0;
    transform:none;
  }
  .np-bar-mega{
    grid-template-columns:1fr;
    min-width:0;
    padding:4px 0 4px 12px;
  }
}

/* Darkmode */
html[data-theme="dark"] .np-bar-panel{
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}

/* ── Phase 4: Utility-Klassen (ersetzen style="" Attribute) ──────────────── */
.u-m0        { margin:0 }
.u-p0        { padding:0 }
.u-tar       { text-align:right }
.u-tac       { text-align:center }
.u-tal       { text-align:left }
.u-fw6       { font-weight:600 }
.u-fw7       { font-weight:700 }
.u-fs10      { font-size:10px }
.u-fs11      { font-size:11px }
.u-fs12      { font-size:12px }
.u-fs13      { font-size:13px }
.u-fs14      { font-size:14px }
.u-fs15      { font-size:15px }
.u-fs22      { font-size:22px }
.u-fs13b     { font-size:13px; font-weight:600 }
.u-fs12-muted { font-size:12px; color:var(--muted) }
.u-fs11-muted { font-size:11px; color:var(--muted) }
.u-fs22-shrink0 { font-size:22px; flex-shrink:0 }
.u-m0-fs15   { margin:0; font-size:15px }
.u-c-muted   { color:var(--muted) }
.u-c-danger  { color:var(--danger) }
.u-c-ok      { color:var(--ok) }
.u-c-warn    { color:#d97706 }
.u-c-dc2626  { color:#dc2626 }
.u-di        { display:inline }
.u-db        { display:block }
.u-dn        { display:none }
.u-dc        { display:contents }
.u-f1        { flex:1 }
.u-f1-min0   { flex:1; min-width:0 }
.u-fshrink0  { flex-shrink:0 }
.u-w100      { width:100% }
.u-w-auto    { width:auto }
.u-ws-nw     { white-space:nowrap }
.u-mb0       { margin-bottom:0 }
.u-mb4       { margin-bottom:4px }
.u-mb8       { margin-bottom:8px }
.u-mb10      { margin-bottom:10px }
.u-mb12      { margin-bottom:12px }
.u-mb14      { margin-bottom:14px }
.u-mb16      { margin-bottom:16px }
.u-mb20      { margin-bottom:20px }
.u-mb24      { margin-bottom:24px }
.u-mt4       { margin-top:4px }
.u-mt6       { margin-top:6px }
.u-mt8       { margin-top:8px }
.u-mt10      { margin-top:10px }
.u-mt12      { margin-top:12px }
.u-mt16      { margin-top:16px }
.u-p0-ov-hid { padding:0; overflow:hidden }
.u-m0-mb16   { margin:0 0 16px }
.u-m0-mb10   { margin:0 0 10px }
.u-jc-sb-mb20 { justify-content:space-between; margin-bottom:20px }
.u-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.u-p5-10-b-tac { padding:5px 10px; border:1px solid var(--border); text-align:center }
.u-p4-c-muted { padding:4px 0; color:var(--muted) }
.u-db-fs13b-mb4 { display:block; font-size:13px; font-weight:700; margin-bottom:4px }
.u-w100-mt4-inp { width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--border,#e5e7eb); border-radius:6px; font-size:13px; box-sizing:border-box }
.u-pos-rel { position:relative }
.u-pos-abs { position:absolute }

/* ── Phase 4: Layout-Komponenten ─────────────────────────────────────────── */
.sb-rem-badge { position:absolute;top:6px;right:8px;background:#dc2626;color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;min-width:18px;text-align:center }
.lang-switcher { display:flex;gap:4px;align-items:center;margin-bottom:4px;padding:0 10px }
.lang-switcher > span { font-size:11px;opacity:.6 }
.lang-btn { font-size:11px;padding:2px 6px;border:1px solid currentColor;border-radius:3px;background:transparent;color:inherit;cursor:pointer }
.lang-btn.active { background:rgba(255,255,255,0.2) }
.locform { display:inline-flex;align-items:center;gap:8px }
.locform > label { font-size:12px;opacity:.8;white-space:nowrap }
.locform select { max-width:180px }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
.demo-banner { background:linear-gradient(90deg,rgba(0,180,216,.12),rgba(124,58,237,.12));border:1px solid rgba(0,180,216,.3);border-radius:10px;padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:#0077a8 }
.demo-banner-link { font-size:12px;color:#0077a8;font-weight:600;text-decoration:none;border:1px solid rgba(0,180,216,.4);border-radius:999px;padding:3px 12px;white-space:nowrap }
.page-tabs { display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;flex-wrap:wrap }
.page-tab { padding:10px 18px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s }
.page-tab.active { font-weight:700;color:var(--primary);border-bottom-color:var(--primary) }
#offline-banner { position:fixed;bottom:0;left:0;right:0;z-index:9999;padding:10px 20px;text-align:center;font-size:14px;font-weight:600 }
.u-va-n2 { vertical-align:-2px }
.qr-img  { border:8px solid white; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.12) }
.badge-approved { font-size:11px }
.badge-rejected { font-size:11px;background:#fee2e2;color:#b91c1c }

/* ══ RESPONSIVE TABLES — Card-Layout auf mobilen Geräten ═══════════════════
   Verwendung: <div class="table-wrap responsive"> um die Tabelle wrappen.
   Jedes <td> braucht data-label="Spaltenname" für die Mobile-Beschriftung.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .table-wrap.responsive thead { display: none; }
  .table-wrap.responsive tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
  }
  .table-wrap.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    border-top: none; border-left: none; border-right: none;
    background: none !important;
    font-size: 13px;
  }
  .table-wrap.responsive td:last-child { border-bottom: none; }
  .table-wrap.responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    min-width: 110px;
    padding-top: 1px;
  }
  .table-wrap.responsive td:not([data-label])::before { display: none; }
  .table-wrap.responsive td.td-actions {
    justify-content: flex-end;
    padding-top: 10px;
    gap: 6px;
  }
}
.badge-submitted { font-size:11px;background:#fef9c3;color:#854d0e }

/* ── data-dyn-style FOUC-Schutz ──────────────────────────────────────────────
   Overlays/Modale tragen ihr display:none in data-dyn-style (CSP nonce-only).
   Bis der Applier am Body-Ende läuft, würde das Modal-Markup sichtbar im
   Seitenfluss rendern. Dieser Attribut-Selektor versteckt sie sofort beim
   ersten Paint; nach dem Anwenden entfernt der Applier das Attribut und der
   Inline-Style übernimmt. */
[data-dyn-style*="display:none"] { display: none; }

/* ── Mobile-Fallback für ungewrappte Tabellen ────────────────────────────────
   36 Seiten rendern <table> ohne .table-wrap: mit dem globalen
   min-width:900px platzen sie auf Phones aus dem Layout. display:block macht
   die Tabelle selbst zum Scroll-Container – Inhalt bleibt vollständig
   erreichbar (horizontales Wischen) statt abgeschnitten. */
@media (max-width: 700px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Karten-Layout (.table-wrap.responsive) behält sein eigenes Verhalten */
  .table-wrap.responsive table { display: table; min-width: 0; overflow: visible; }
}

/* Zeiterfassung v2 / Arbeitszeitprofile: zweispaltige Grids mobil stapeln */
@media (max-width: 700px) {
  .ze-cols, .azp-grid { display: block !important; }
  .ze-cols > *, .azp-grid > * { margin-bottom: 14px !important; }
}

/* Öffentliche Rechtstexte + App-Info auf der Login-Seite (datenschutz, nutzungshinweise, login) */
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-doc h2 { font-size: 16px; margin: 22px 0 6px; }
.legal-doc p, .legal-doc li { line-height: 1.6; }
.legal-doc ul { padding-left: 20px; }
.legal-meta { color: var(--muted); font-size: 13px; }
.legal-links { text-align: center; font-size: 13px; margin-top: 18px; }
.app-info { font-size: 13px; line-height: 1.6; color: var(--muted); }
.app-info h2 { font-size: 15px; margin: 0 0 6px; color: var(--text); }
.app-info p { margin: 0 0 8px; }