/* ==========================================================================
   DP+ 2.0 - Design-System-Fundament (Phase 27)
   Werte (Farben/Radien/Schriftgroessen) 1:1 aus dem Original-Redesign
   (/opt/dpplus/static/css/redesign-preview.css) uebernommen - das ist die
   eigentliche Design-Entscheidung, die nicht neu getroffen werden muss.
   Token-Namen bewusst neu (--color-*/--radius-*/--font-*) statt des
   Original-Praefixes --rd- ("redesign"), das in einer Codebasis ohne
   Alt-Design keinen Sinn ergibt. Selektoren zielen bewusst auf normale
   HTML-Elemente statt auf ein Original-spezifisches Komponentensystem, das
   es in dpplus2 nicht gibt.
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, kein CDN) ---------- */
@font-face{
  font-family:'Big Shoulders';font-weight:700;font-style:normal;font-display:swap;
  src:url('/static/fonts/bigshoulders700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexmono400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexmono600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-weight:300 600;font-style:normal;font-display:swap;
  src:url('/static/fonts/Inter-variable.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --color-stone-50:#F3F5F4; --color-stone-100:#E9ECEA; --color-stone-200:#DCE1DE; --color-stone-300:#C2C9C5;
  --color-ink-600:#445055; --color-ink-800:#1E2A2E; --color-ink-950:#10161A;
  --color-teal-500:#128A94; --color-teal-600:#0E7C86; --color-teal-700:#0A6169; --color-teal-100:#DDF0F0;
  --color-amber-500:#D99A2B; --color-amber-100:#FBEDD3;
  --color-green-600:#2E8B63; --color-green-100:#DEF0E6;
  --color-red-600:#C0463A; --color-red-100:#F8E1DE;
  --color-blue-500:#3D8FD4; --color-blue-100:#DCEBF9;
  --color-purple-500:#8F69FF; --color-purple-100:#F4EDFF;

  --color-bg:var(--color-stone-50); --color-surface:#fff; --color-surface-sunken:var(--color-stone-100);
  --color-border:var(--color-stone-200); --color-border-strong:var(--color-stone-300);
  --color-text:var(--color-ink-950); --color-text-muted:var(--color-ink-600);
  --color-accent:var(--color-teal-600); --color-accent-strong:var(--color-teal-700); --color-accent-soft:var(--color-teal-100);

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;

  --font-display:'Big Shoulders','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- Grundflaechen + Typografie ---------- */
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
}
h1{ font-size:1.5rem; font-weight:700; margin:0 0 1.2rem; }
h2{ font-size:1.2rem; font-weight:600; margin:1.5rem 0 0.8rem; }
h3{ font-size:1.02rem; font-weight:600; margin:1.2rem 0 0.6rem; }
a{ color:var(--color-accent-strong); }
.mono, .schedule-time, td.time-cell{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- App-Geruest: Topnav (Desktop, >=921px) + Sidebar-Drawer (Mobil, <921px) ----------
   Struktur wie im Original-DP+: am Desktop eine horizontale Kopfnavigation, die Sidebar ist dort
   NICHT persistent sichtbar, sondern ausschliesslich das mobile Ausklapp-Menue. */
.topnav{
  display:none; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  min-height:52px; padding:0 24px; background:var(--color-surface); border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:20;
}
.topnav-logo{ height:28px; width:auto; flex-shrink:0; }
.topnav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap; row-gap:6px; }
.topnav-links li{ flex-shrink:0; }
.topnav-link{
  display:flex; align-items:center; gap:6px; padding:8px 11px; border-radius:var(--radius-sm);
  color:var(--color-text); font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap;
}
.topnav-link svg{ width:16px; height:16px; flex-shrink:0; stroke-width:1.8; }
.topnav-link:hover{ background:var(--color-surface-sunken); }
.topnav-link.active{ background:var(--color-accent-soft); color:var(--color-accent-strong); }
.topnav-logout{ display:flex; align-items:center; gap:6px; color:var(--color-text-muted); font-weight:600; font-size:0.82rem; text-decoration:none; flex-shrink:0; }
.topnav-logout:hover{ color:var(--color-accent-strong); }
.topnav-logout svg{ width:16px; height:16px; }

.hotel-switcher-form{ margin:0 4px; }
.hotel-switcher-form select{
  margin-top:0; padding:6px 10px; font-size:0.8rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--color-border-strong); background:var(--color-surface-sunken); color:var(--color-text);
  max-width:180px;
}
.sidebar .hotel-switcher-form{ margin:0 0 12px; }
.sidebar .hotel-switcher-form select{ width:100%; max-width:none; }

/* Rollenvorschau (QA-Werkzeug, kein Original-Vorbild) - Auswahl neben dem
   Hotel-Switcher teilt sich dessen Optik, der Banner waehrend aktiver
   Vorschau nutzt dieselbe Warnfarbe wie .callout.is-warn. */
.impersonation-banner{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; background:var(--color-amber-100); border-bottom:1.5px solid var(--color-amber-500);
  font-size:0.82rem; color:var(--color-text);
}
.impersonation-banner form{ margin:0; }
.impersonation-banner button{ padding:4px 10px; font-size:0.78rem; }

/* Nav-Badges (Ungelesen-Zahlen), gemeinsam von Topnav und mobiler Sidebar genutzt */
.nav-badge{
  background:var(--color-accent); color:#fff; border-radius:999px;
  font-size:0.68rem; font-weight:700; padding:1px 6px; line-height:1.4;
}
.topnav-link.active .nav-badge{ background:var(--color-accent); }

.topbar{
  display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--color-surface);
  border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:20;
}
.topbar-logo{ height:26px; width:auto; }
/* color muss gesetzt sein: die allgemeine button-Regel faerbt Schrift und
   damit auch currentColor des Icons weiss - auf dem hellen Grund hier war
   das Menue-Symbol dadurch praktisch unsichtbar, der Knopf sah aus wie ein
   leeres graues Kaestchen. */
.hamburger-btn{
  background:var(--color-surface-sunken); border:none; border-radius:var(--radius-sm);
  color:var(--color-text);
  /* padding:0 ist noetig: die allgemeine button-Regel bringt 9px 16px mit,
     und bei 36px Knopfbreite blieben davon 4px fuer das Symbol uebrig - es
     wurde auf einen Strich zusammengedrueckt. */
  padding:0;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.hamburger-btn:hover{ background:var(--color-border); }
.hamburger-btn svg{ width:20px; height:20px; flex-shrink:0; }
.backdrop{ display:none; position:fixed; inset:0; background:rgba(16,22,26,.35); z-index:15; }

/* Sidebar: ausschliesslich mobiles Ausklapp-Menue (<921px), am Desktop nie sichtbar */
.sidebar{
  width:260px; background:var(--color-surface); border-right:1px solid var(--color-border);
  display:flex; flex-direction:column; padding:20px 14px; position:fixed; top:0; bottom:0; left:0;
  overflow-y:auto; transform:translateX(-100%); transition:transform .2s ease; z-index:25;
}
/* align-self verhindert das Verzerren: die Sidebar ist ein Flex-Container
   in Spaltenrichtung, ihre Kinder werden also auf die volle Breite
   gestreckt. Beim Logo hat das die Breite auf 232px gezogen, waehrend die
   Hoehe bei 36px blieb - das Bild war dadurch flachgedrueckt. */
.sidebar-logo{ display:block; align-self:flex-start; height:36px; width:auto; margin:4px 8px 20px; }
.nav-list{ list-style:none; margin:0; padding:0; flex:1; }
.nav-list li{ margin-bottom:2px; }
.nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--color-text); font-weight:600; font-size:0.88rem; text-decoration:none;
}
.nav-link svg{ width:18px; height:18px; flex-shrink:0; stroke-width:1.8; }
.nav-link:hover{ background:var(--color-surface-sunken); }
.nav-link.active{ background:var(--color-accent); color:#fff; }
.nav-link .nav-badge{ margin-left:auto; }
.nav-link.active .nav-badge{ background:rgba(255,255,255,.28); }
.sidebar-footer{ border-top:1px solid var(--color-border); padding-top:10px; margin-top:10px; }

/* ---------- Gruppierte Navigation (Haupt-/Untermenues wie im Original) ----------
   Desktop: Dropdown pro Gruppe im Topnav. Mobil: Akkordeon pro Gruppe in der Sidebar.
   Beide Ansichten lesen aus derselben nav.py::build_nav_groups()-Struktur. */
.topnav-group{ position:relative; }
.topnav-group-toggle{ cursor:pointer; user-select:none; }
.topnav-group.active > .topnav-group-toggle{ background:var(--color-accent-soft); color:var(--color-accent-strong); }
.topnav-caret{ font-size:0.6rem; margin-left:2px; opacity:0.7; }
.topnav-dropdown{
  display:none; position:absolute; top:100%; left:0; margin-top:4px; min-width:200px;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(16,22,26,.12); padding:6px; z-index:30;
}
.topnav-group:hover .topnav-dropdown,
.topnav-group:focus-within .topnav-dropdown,
.topnav-group.open .topnav-dropdown{ display:block; }
.topnav-dropdown a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px;
  border-radius:var(--radius-sm); color:var(--color-text); font-weight:600; font-size:0.82rem;
  text-decoration:none; white-space:nowrap;
}
.topnav-dropdown a:hover{ background:var(--color-surface-sunken); }
.topnav-dropdown a.active{ background:var(--color-accent-soft); color:var(--color-accent-strong); }

.nav-group{ margin-bottom:2px; }
.nav-group > summary{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--color-text); font-weight:600; font-size:0.88rem; cursor:pointer; list-style:none;
}
.nav-group > summary::-webkit-details-marker{ display:none; }
.nav-group > summary svg{ width:18px; height:18px; flex-shrink:0; stroke-width:1.8; }
.nav-group > summary:hover{ background:var(--color-surface-sunken); }
.nav-group[open] > summary{ background:var(--color-surface-sunken); }
.nav-submenu{ list-style:none; margin:2px 0 6px; padding:0 0 0 30px; }
.nav-sublink{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--radius-sm);
  color:var(--color-text-muted); font-weight:600; font-size:0.83rem; text-decoration:none;
}
.nav-sublink:hover{ background:var(--color-surface-sunken); color:var(--color-text); }
.nav-sublink.active{ background:var(--color-accent); color:#fff; }
/* Rechtstexte im Menü: nachrangig, aber erreichbar (Original-Verhalten). */
.muted-link{ opacity:.75; font-weight:500; }
.nav-sublink.active .nav-badge{ background:rgba(255,255,255,.28); }

/* ---------- Mobile-Bottom-Nav (<921px) - fester Schnellzugriff, 1:1 Original-Konzept ---------- */
.mobile-bottom-nav{
  display:flex; position:fixed; bottom:0; left:0; right:0; z-index:20; height:60px;
  background:var(--color-surface); border-top:1px solid var(--color-border);
}
.mobile-bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--color-text-muted); text-decoration:none; font-size:0.68rem; font-weight:600; position:relative;
}
.mobile-bottom-nav a svg{ width:20px; height:20px; stroke-width:1.8; }
.mobile-bottom-nav a.active{ color:var(--color-accent-strong); }
.mobile-bottom-nav .nav-badge{ position:absolute; top:2px; right:calc(50% - 20px); }

body.nav-open .sidebar{ transform:translateX(0); box-shadow:8px 0 24px rgba(16,22,26,.15); }
body.nav-open .backdrop{ display:block; }

/* Content: im Original fluid ueber die volle Fensterbreite, NICHT auf 1100px
   zentriert - eine zentrierte Spalte war der auffaelligste Layout-Unterschied
   ("wirkt wie eine andere App"). */
.content{ padding:24px 28px 70px; }

/* Rechtsseiten-Fusszeile (Block E, Teil 1) - fuer alle Rollen auf jeder
   eingeloggten Seite sichtbar, einmalig unterhalb von <main> statt in
   Topnav und mobiler Sidebar dupliziert. */
.app-footer{ text-align:center; padding:1.5rem 1rem 2rem; font-size:0.78rem; color:var(--color-text-muted); }
.app-footer a{ color:inherit; }

@media (min-width:921px){
  .topnav{ display:flex; }
  .topbar{ display:none; }
  .sidebar{ display:none; }
  .backdrop{ display:none !important; }
  .mobile-bottom-nav{ display:none; }
}
@media (max-width:920px){
  .content{ padding:24px 18px 76px; }
  .app-footer{ padding-bottom:76px; }
}

/* ---------- Buttons ---------- */

.btn, button, input[type="submit"]{
  border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:600; font-size:0.9rem;
  padding:9px 16px; cursor:pointer; border:1.5px solid transparent; text-decoration:none; display:inline-block;
}
button, input[type="submit"], button[type="submit"]{
  background:var(--color-accent); border-color:var(--color-accent); color:#fff;
}
button:hover, input[type="submit"]:hover{ background:var(--color-accent-strong); border-color:var(--color-accent-strong); }
/* Die Zustandsfarben sind bewusst auch mit button davor notiert: die Regel
   button[type="submit"] weiter oben ist spezifischer als eine einzelne
   Klasse und hat sonst jeden farbigen Absende-Knopf wieder auf die
   Akzentfarbe zurueckgesetzt. Genau deshalb waren Veroeffentlichen,
   Ein-/Ausstempeln und die Loeschen-Knoepfe alle gleich tuerkis, obwohl die
   Templates seit jeher btn-success/btn-danger gesetzt haben. */
.btn-secondary, button.btn-secondary{ background:transparent; border-color:var(--color-border-strong); color:var(--color-text); }
.btn-secondary:hover, button.btn-secondary:hover{ border-color:var(--color-accent); color:var(--color-accent-strong); }
.btn-danger, button.btn-danger{ background:var(--color-red-600); border-color:var(--color-red-600); color:#fff; }
.btn-danger:hover, button.btn-danger:hover{ background:#a03a30; border-color:#a03a30; }
.btn-success, button.btn-success{ background:var(--color-green-600); border-color:var(--color-green-600); color:#fff; }
.btn-success:hover, button.btn-success:hover{ background:#256e4f; border-color:#256e4f; }
.muted-btn, button.muted-btn{ background:var(--color-surface-sunken); border-color:var(--color-border-strong); color:var(--color-text); }
.muted-btn:hover{ border-color:var(--color-red-600); color:var(--color-red-600); }

/* ---------- Formulare ---------- */
label{ display:block; margin-top:1rem; font-size:0.85rem; font-weight:600; color:var(--color-text-muted); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="time"], select, textarea{
  width:100%; box-sizing:border-box; margin-top:0.3rem; padding:9px 12px;
  border:1.5px solid var(--color-border-strong); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text); font-family:var(--font-body); font-size:0.92rem;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--color-accent); outline:none; box-shadow:0 0 0 3px var(--color-accent-soft);
}

/* ---------- Tabellen ----------
   Werte aus dem Original: dort haben Tabellen KEINE eigene Klasse (.data-table
   steht zwar im Markup, hat aber gar kein CSS) - alles laeuft ueber
   Element-Selektoren. Deshalb braucht auch 2.0 keine Tabellenklassen; die
   frueher pro Seite definierte .emp-table war eine Eigenerfindung, die die
   Tabellen als Gitternetz mit Rahmen zeichnete statt randlos wie im Original. */
table{ width:100%; border-collapse:collapse; border-color:var(--color-border); font-size:0.88rem; }
table th{
  background:var(--color-surface-sunken); color:var(--color-text-muted); text-align:left;
  text-transform:uppercase; font-size:0.7rem; letter-spacing:0.04em; padding:10px 12px;
}
table td{ border-top:1px solid var(--color-border); padding:10px 12px; vertical-align:top; }
tbody tr:hover td{ background:var(--color-stone-50); }
tbody tr:last-child td{ border-bottom:none; }
/* Breite Tabellen scrollen im Panel horizontal, statt das Layout zu sprengen. */
.panel table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
td.mono{ font-family:var(--font-mono); font-size:0.78rem; word-break:break-word; }

/* ---------- Karten / Panels ---------- */
.card, .box, .panel, .flat-panel{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:20px;
}

/* ---------- Flash / Meldungen (Klassennamen wie in _base_auth.html etabliert) ---------- */
.flashes{ list-style:none; padding:0; margin:0 0 1.2rem; }
.flashes li{ padding:0.7rem 0.9rem; border-radius:var(--radius-md); margin-bottom:0.5rem; font-size:0.88rem; font-weight:500; }
.flash-error{ background:var(--color-red-100); color:var(--color-red-600); }
.flash-success{ background:var(--color-green-100); color:var(--color-green-600); }
.flash-warning{ background:var(--color-amber-100); color:var(--color-amber-500); }

/* ---------- Badges (Status/Ungelesen) ---------- */
.unread-badge, .sent-badge{
  display:inline-block; background:var(--color-accent); color:#fff; border-radius:999px;
  padding:0.05rem 0.5rem; font-size:0.72rem; font-weight:700;
}

/* ==========================================================================
   KOMPONENTENSYSTEM (Original-Parität)
   Das Original hat ein zentrales Komponenten-Vokabular, dem 30 von 36 Seiten
   folgen: Seitenkopf -> optionale Tabs -> KPI-Zeile -> Filter-Panel -> Inhalte
   in Panels. Die Klassennamen sind bewusst DIESELBEN wie im Original
   (.page-header, .panel.glass-panel, .panel-header, .btn, .status-pill, ...),
   damit Seiten 1:1 uebernommen werden koennen, statt pro Seite eigenes CSS in
   einem extra_style-Block zu erfinden.
   Werte aus /opt/dpplus/static/style.css + css/redesign-preview.css (letztere
   wird spaeter geladen und gewinnt - hier ist bereits der Endzustand notiert).
   ========================================================================== */

/* ---------- Seitenkopf: steht im Original auf JEDER Inhaltsseite ganz oben ----------
   Markup: .page-header.flat-page-header > div > h1 + p.muted   [+ rechte Aktionszone]
   Die rechte Zone nimmt die Seitenaktionen auf ("+ Neuer Mitarbeiter", "Zurueck", ...) -
   im Original stehen Aktionen nie als nackte Textlinks im Fluss. */
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; }
.page-header h1{ margin:0 0 8px; font-size:1.65rem; font-weight:700; }
.page-header p{ margin:0; color:var(--color-text-muted); font-size:0.9rem; }
.page-header-actions{ display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }

/* ---------- Panels: im Original liegt JEDER Inhaltsabschnitt in einem Panel ---------- */
.panel, .card, .box, .flat-panel{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:18px; box-shadow:0 1px 2px rgba(16,22,26,.05);
}
.panel + .panel, .panel + .card{ margin-top:1rem; }
/* Tabellen sitzen buendig im Panel (Original: style="padding:0;overflow:hidden") */
.panel.is-table{ padding:0; overflow:hidden; }
.panel-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.panel-header h3{ margin:0; font-size:1.12rem; font-weight:600; letter-spacing:-0.02em; }
.panel-header .small-text{ margin-top:2px; }

/* ---------- Buttons ----------
   Wichtig: ein <a class="btn"> ohne Modifier ist im Original NEUTRAL (heller
   Grund + Rahmen), nicht akzentfarben - nur .btn-primary/Submit ist gefuellt. */
a.btn, button.btn{
  display:inline-flex; align-items:center; gap:8px; width:auto; line-height:1.2;
  padding:9px 16px; border-radius:var(--radius-sm); font-weight:600; font-size:0.9rem;
  text-decoration:none; cursor:pointer;
  background:var(--color-surface-sunken); color:var(--color-text); border:1.5px solid var(--color-border-strong);
}
a.btn:hover, button.btn:hover{ border-color:var(--color-accent); color:var(--color-accent-strong); }
.btn-primary, a.btn.btn-primary{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.btn-primary:hover, a.btn.btn-primary:hover{ background:var(--color-accent-strong); border-color:var(--color-accent-strong); color:#fff; }
.ghost-btn, a.btn.ghost-btn{ background:transparent; color:var(--color-accent-strong); border-color:var(--color-border-strong); }
.ghost-btn:hover, a.btn.ghost-btn:hover{ background:var(--color-accent-soft); }
.danger-btn, a.btn.danger-btn{ background:var(--color-red-600); border-color:var(--color-red-600); color:#fff; }
.btn.small, .btn-sm{ padding:6px 12px; font-size:0.82rem; }

/* ---------- Tabs (Personalakte, Zeiterfassung, Einstellungen) ----------
   Original: flex-Leiste mit 2px-Unterlinie, aktiver Tab akzentfarben. */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--color-border); margin-bottom:18px; }
.tabs a, .tabs button{
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  padding:10px 14px; font-weight:600; font-size:0.9rem; color:var(--color-text-muted);
  text-decoration:none; cursor:pointer; border-radius:0; display:inline-flex; align-items:center; gap:6px;
}
.tabs a:hover, .tabs button:hover{ color:var(--color-text); background:none; }
.tabs a.active, .tabs button.active{ color:var(--color-accent-strong); border-bottom-color:var(--color-accent); }
.settings-pane{ display:none; }
.settings-pane.is-active{ display:block; }

/* ---------- KPI-/Summary-Zeile (Kennzahlen ueber dem Inhalt) ---------- */
.section-summary-bar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:20px; }
.summary-card{
  display:grid; gap:8px; padding:18px 20px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(16,22,26,.05);
}
.summary-card span{ color:var(--color-text-muted); font-size:0.8rem; font-weight:700; }
.summary-card strong{ font-family:var(--font-mono); font-size:2rem; font-variant-numeric:tabular-nums; letter-spacing:-0.03em; }

/* ---------- Statuspillen: im Original IMMER eine Pille, nie farbiger Text ---------- */
.status-pill{
  display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px;
  font-size:0.75rem; font-weight:700;
}
.status-pill.active, .status-pill.genehmigt{ background:var(--color-green-100); color:var(--color-green-600); }
.status-pill.inactive, .status-pill.neutral{ background:var(--color-surface-sunken); color:var(--color-text-muted); }
.status-pill.pending, .status-pill.offen{ background:var(--color-amber-100); color:var(--color-amber-500); }
.status-pill.abgelehnt, .status-pill.danger{ background:var(--color-red-100); color:var(--color-red-600); }
.status-pill.zurueckgezogen, .status-pill.hinweis{ background:var(--color-surface-sunken); color:var(--color-text-muted); }
.badge-soft{
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  font-weight:700; font-size:0.75rem; padding:4px 11px;
  background:var(--color-accent-soft); color:var(--color-accent-strong);
}

/* ---------- Filter-/Toolbarleiste (ist im Original selbst ein Panel) ---------- */
.toolbar{ display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-bottom:16px; }
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px 20px; }
.filter-bar label{ margin-top:0; }
.filter-bar select, .filter-bar input{ margin-top:0; width:auto; min-width:9rem; }

/* ---------- Raster + Kleinigkeiten ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.stack-gap{ display:grid; gap:12px; }
.info-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.info-list > div{ padding:14px; border-radius:var(--radius-md); background:var(--color-surface-sunken); }
.info-list span{ display:block; color:var(--color-text-muted); font-size:0.75rem; margin-bottom:6px; }
.muted{ color:var(--color-text-muted); }
.small-text{ font-size:0.75rem; }
@media (max-width:900px){
  .grid-2, .grid-3, .info-list{ grid-template-columns:1fr; }
  .page-header, .toolbar, .panel-header{ flex-direction:column; align-items:stretch; }
}

/* ---------- Leerzustand: im Original immer gestaltet, nie eine leere Tabelle ---------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:48px 24px; color:var(--color-text-muted);
}
.empty-state-icon{ font-size:2.5rem; line-height:1; }
.empty-state-title{ font-weight:600; color:var(--color-text); font-size:0.95rem; }
.empty-state-text{ font-size:0.85rem; max-width:40ch; }

/* ---------- Dashboard-Bausteine (dp-*) ----------
   Lagen bisher dupliziert im extra_style-Block von dashboard.html, teils mit
   abweichenden Werten (rem statt px). Hier zentral mit den Original-Werten. */
.dp-hero{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:22px 24px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.dp-hero h1{ font-size:1.55rem; margin:0 0 4px; }
.dp-hero p{ color:var(--color-text-muted); font-size:0.85rem; margin:0; max-width:52ch; }
.dp-hotel-strip{
  display:flex; align-items:center; gap:12px; background:var(--color-surface-sunken);
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:10px 14px; flex-shrink:0;
}
.dp-hotel-strip img{ height:36px; width:auto; max-width:72px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.dp-hotel-strip-label{ font-size:0.66rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.dp-hotel-strip-name{ font-weight:700; font-size:0.88rem; }

.dp-stat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dp-stat-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dp-stat-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){
  .dp-stat-grid, .dp-stat-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .dp-stat-grid, .dp-stat-grid.cols-2, .dp-stat-grid.cols-3{ grid-template-columns:1fr; }
}
.dp-stat-tile{
  display:flex; align-items:flex-start; gap:12px; background:var(--color-surface);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-lg); padding:16px;
  text-decoration:none; color:inherit; box-shadow:0 1px 3px rgba(16,22,26,.07);
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.dp-stat-tile:hover{ border-color:var(--color-accent); box-shadow:0 4px 16px rgba(16,22,26,.1); }
.dp-stat-icon{
  width:38px; height:38px; border-radius:var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-accent-soft); color:var(--color-accent-strong);
}
.dp-stat-icon svg{ width:19px; height:19px; }
.dp-stat-icon.tone-amber{ background:var(--color-amber-100); color:var(--color-amber-500); }
.dp-stat-icon.tone-green{ background:var(--color-green-100); color:var(--color-green-600); }
.dp-stat-icon.tone-neutral{ background:var(--color-surface-sunken); color:var(--color-text-muted); }
.dp-stat-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.dp-stat-label{ display:block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.dp-stat-value{ display:block; font-family:var(--font-mono); font-size:1.55rem; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.dp-stat-value.sm{ font-size:1.05rem; font-family:var(--font-body); font-weight:700; line-height:1.3; }
.dp-stat-sub{ display:block; font-size:0.75rem; color:var(--color-text-muted); }

.dp-section-label{ font-size:0.75rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; margin:22px 0 10px; }
.dp-quick-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .dp-quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dp-quick-action{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg);
  padding:16px 10px; text-decoration:none; color:var(--color-text); font-size:0.82rem; font-weight:600;
  box-shadow:0 1px 3px rgba(16,22,26,.07); transition:border-color .15s ease, box-shadow .15s ease;
}
.dp-quick-action:hover{ border-color:var(--color-accent); box-shadow:0 4px 16px rgba(16,22,26,.1); }
.dp-quick-icon{
  width:36px; height:36px; border-radius:50%; background:var(--color-accent-soft); color:var(--color-accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.dp-quick-icon svg{ width:18px; height:18px; }

/* ---------- Dashboard: Hero-Details + Stempeluhr ----------
   Lagen bisher ausschliesslich im extra_style-Block von dashboard.html. Werte
   aus dem Original (redesign-preview.css), wo es dort ein Pendant gibt.
   dp-hero-icon, dp-hotel-strip-logo und dp-timeclock-avatar-fallback sind
   Ergaenzungen von 2.0 ohne Original-Pendant und behalten ihre Werte. */
.dp-hero-copy{ min-width:0; }
.dp-hero-copy h2{ margin:0 0 4px; font-size:1.55rem; display:flex; align-items:center; gap:8px; }
.dp-hero-icon{ width:21px; height:21px; color:var(--color-accent-strong); flex-shrink:0; }
.dp-hero-badge{
  display:inline-block; background:var(--color-accent-soft); color:var(--color-accent-strong);
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; margin-bottom:8px;
}
.dp-hotel-strip-logo{ height:36px; width:auto; max-width:72px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.dp-hotel-strip-city{ font-size:12px; color:var(--color-text-muted); }

.dp-timeclock{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px;
}
.dp-timeclock-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; }
.dp-timeclock-avatar, .dp-timeclock-avatar-fallback{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover;
  border:2px solid var(--color-border);
}
.dp-timeclock-avatar-fallback{
  background:var(--color-accent); color:#fff; border-color:var(--color-accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem;
}
.dp-timeclock-info{ min-width:0; }
.dp-timeclock-status-dot{ width:9px; height:9px; border-radius:50%; background:var(--color-border-strong); flex-shrink:0; }
.dp-timeclock-status-dot.is-active{ background:var(--color-green-600); }
.dp-timeclock-status{
  font-weight:700; font-size:13px; color:var(--color-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dp-timeclock-sub{ font-size:11px; color:var(--color-text-muted); }
/* form{display:contents} wie im Original: die Buttons werden damit direkte
   Flex-Kinder der Aktionszeile und teilen sich die Breite gleichmaessig -
   sonst dehnt sich das Formular und der Button darin bleibt schmal. */
.dp-timeclock-actions{ display:flex; gap:8px; padding:0 16px 14px; }
.dp-timeclock-actions form{ display:contents; }
.dp-timeclock-actions .btn{ flex:1; justify-content:center; }
.dp-timeclock-actions .btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ==========================================================================
   WIEDERKEHRENDE BAUSTEINE
   Lagen bisher in den extra_style-Bloecken einzelner Seiten - teils voellig
   identisch unter verschiedenen Namen (das Listenmuster viermal als
   .chat-list/.group-list/.recent-list/.notif-list, .emp-table viermal
   wortgleich). Weil der Inline-Block spaeter geladen wird als main.css,
   gewann er und die Werte drifteten auseinander.
   ========================================================================== */

/* ---------- Schlichte Liste (Nachrichten, Gruppen, Benachrichtigungen) ---------- */
.simple-list, ul.chat-list, ul.group-list, ul.recent-list, ul.notif-list{
  list-style:none; padding:0; margin:0;
}
.simple-list li, ul.chat-list li, ul.group-list li, ul.recent-list li, ul.notif-list li{
  padding:0.6rem; border-radius:var(--radius-sm);
  background:var(--color-surface-sunken); margin-bottom:0.5rem;
}
ul.chat-list a{ display:block; text-decoration:none; }
ul.notif-list li.unread{ border-left:3px solid var(--color-accent); }
ul.notif-list form, form.inline{ display:inline; margin:0; }
.list-meta, .group-meta, .recent-meta, .notif-meta, .chat-preview{
  color:var(--color-text-muted); font-size:0.75rem; margin-bottom:0.2rem;
}
.group-meta{ display:flex; gap:0.5rem; align-items:center; }
.chat-preview{ font-size:0.85rem; margin:0.2rem 0 0; }
.notif-meta{ margin:0.2rem 0 0; }

/* ---------- Auswahlfelder in Formularen ---------- */
.checkbox-list{ display:flex; flex-direction:column; gap:0.3rem; margin-top:0.3rem; }
.checkbox-list label{
  display:flex; align-items:center; gap:0.4rem; margin-top:0;
  font-size:0.9rem; font-weight:400; color:var(--color-text);
}
.checkbox-row{ display:flex; align-items:flex-start; gap:0.5rem; margin-top:1rem; font-size:0.9rem; }
.checkbox-row input{ margin-top:0.2rem; width:auto; }
/* Beschriftung neben einem Kaestchen - ohne den Abstand, den Formular-Labels
   sonst ueber sich haben. */
.checkbox-label{ margin-top:0; }
fieldset{ border:1px solid var(--color-border); border-radius:var(--radius-md); margin:1rem 0; padding:0.8rem 1rem; }
legend{ font-weight:600; font-size:0.85rem; color:var(--color-text-muted); padding:0 0.4rem; }
.filter-form{ display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; flex-wrap:wrap; }
.filter-form input[type="text"]{ margin-top:0; width:auto; }

/* ---------- Kleinteile ---------- */
.current-photo{ display:block; width:96px; height:96px; object-fit:cover; border-radius:50%; margin:0.4rem 0 0.8rem; }
.current-logo{ display:block; height:40px; width:auto; margin:0.4rem 0; border-radius:0.3rem; }
.hotel-logo-thumb{ height:28px; width:auto; border-radius:0.2rem; }
.swatch{ display:inline-block; width:0.8rem; height:0.8rem; border-radius:0.2rem; margin-right:0.3rem; vertical-align:middle; }
.error-list{ margin:0; padding-left:1.1rem; color:var(--color-red-600); font-size:0.8rem; }
.frist-abgelaufen{ color:var(--color-red-600); font-weight:600; }
tr.row-fehler{ background:color-mix(in srgb, var(--color-red-600) 8%, transparent); }
tr.row-neu{ background:color-mix(in srgb, var(--color-green-600) 8%, transparent); }

/* ==========================================================================
   AUTH-LAYOUT (Login, Rechtstexte, Legal-Accept, Startseite)
   Lag im <style>-Block von _base_auth.html. Alles unter .auth-page gescoped,
   damit die .box hier nicht mit der Panel-.box der App-Seiten kollidiert -
   main.css stylt .box weiter oben zusammen mit .panel.
   ========================================================================== */
.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-page .box{ width:100%; max-width:24rem; padding:2rem; }
.auth-page .box-logo{ display:block; height:40px; width:auto; margin:0 auto 1.5rem; }
.auth-page h1{ text-align:center; }
/* Login-Hero bekommt als einzige Seite den Verlauf - 1:1 wie im Original,
   Rechtstexte und Legal-Accept behalten die schlichte Karte. */
.auth-page.login-hero{ background:linear-gradient(135deg, var(--color-teal-700), var(--color-teal-600), var(--color-blue-500)); }
.auth-page.login-hero .box{ box-shadow:0 24px 60px rgba(16,22,26,.28); border-radius:1.5rem; }
.auth-page.login-hero .box-logo{ height:92px; margin-bottom:0.9rem; }
.login-subcopy{ margin:0 0 1rem; }
.login-resend{ margin-top:0.6rem; text-align:center; }
.link-button-small{ margin-top:0; background:none; border:0; padding:0; color:var(--color-blue-500); font-size:0.8rem; cursor:pointer; }
.admin-login-box{ margin-top:0.9rem; padding:0.8rem 0.9rem; border:1px solid var(--color-border); border-radius:1rem; background:var(--color-surface-sunken); text-align:left; }
.admin-login-box summary{ cursor:pointer; font-weight:700; color:var(--color-text); }
.admin-login-box summary::marker{ color:var(--color-text-muted); }
.admin-login-box form{ margin-top:0.7rem; }
.login-footer-note{ margin-top:0.9rem; text-align:center; }

/* Rechtstexte: breitere, linksbuendige Karte statt der schmalen Login-Karte. */
.auth-page.legal-page .box{ max-width:44rem; text-align:left; }
.auth-page.legal-page.legal-wide .box{ max-width:48rem; }
.auth-page.legal-page h1{ text-align:left; }
.legal-intro{ color:var(--color-text-muted); margin-bottom:1.2rem; }
.legal-section h2{ font-size:1.05rem; margin:1.3rem 0 0.4rem; }
.legal-section h2:first-child{ margin-top:0; }
.legal-section p{ line-height:1.6; }
.legal-section ul{ margin:0.3rem 0 0.6rem 1.2rem; line-height:1.7; }
.legal-footnote{
  margin-top:1.5rem; padding:0.8rem 1rem; border-radius:var(--radius-md);
  background:var(--color-surface-sunken); font-size:0.78rem; color:var(--color-text-muted);
}
.legal-card{ border:1px solid var(--color-border-strong); border-radius:0.75rem; padding:1rem 1.2rem; margin-bottom:1rem; }
.legal-card h3{ font-size:0.95rem; margin:0 0 0.6rem; }
.legal-card p{ line-height:1.55; font-size:0.88rem; margin:0 0 0.6rem; }
.legal-card p:last-of-type{ margin-bottom:0.8rem; }

/* ==========================================================================
   INHALTSSEITEN
   ========================================================================== */

/* ---------- Hinweiskaesten ----------
   Waren als .faq-tip/.faq-warn (FAQ) und .info-box/.warn-box/.success-box
   (Handbuch) fuenfmal derselbe Baustein unter fuenf Namen. Eine Regel, die
   Farbe kommt aus der Variante. */
.callout, .faq-tip, .faq-warn, .info-box, .warn-box, .success-box{
  padding:0.6rem 0.9rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  border-left:3px solid var(--color-accent); background:var(--color-accent-soft);
  color:var(--color-accent-strong); font-size:0.85rem; margin:0.6rem 0;
}
.faq-tip, .info-box{ /* Standardvariante, bewusst leer - erbt von oben */ }
.callout.is-warn, .faq-warn, .warn-box{
  background:var(--color-amber-100); border-left-color:var(--color-amber-500); color:var(--color-text);
}
.callout.is-success, .success-box{
  background:var(--color-green-100); border-left-color:var(--color-green-600); color:var(--color-text);
}
.faq-tip, .faq-warn{ margin:0.5rem 0 0; padding:0.55rem 0.8rem; }

/* ---------- FAQ (aufklappbare Fragen) ---------- */
.faq-intro, .manual-intro{ color:var(--color-text-muted); margin-bottom:1.5rem; }
.faq-group{ margin-bottom:1.5rem; }
.faq-group-title{
  display:flex; align-items:center; gap:0.4rem; font-size:1rem; font-weight:600;
  color:var(--color-accent-strong); padding:0.6rem 0;
  border-bottom:2px solid var(--color-border); margin-bottom:0;
}
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  display:flex; align-items:center; gap:0.5rem; padding:0.75rem 0.2rem;
  cursor:pointer; font-weight:500; font-size:0.92rem; color:var(--color-text);
  list-style:none; user-select:none;
}
.faq-item summary::before{
  content:'\25B6'; font-size:0.6rem; color:var(--color-accent-strong);
  transition:transform .2s; flex-shrink:0;
}
.faq-item[open] summary::before{ transform:rotate(90deg); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-body{ padding:0.1rem 0.5rem 0.8rem 1.3rem; color:var(--color-text-muted); line-height:1.7; font-size:0.88rem; }
.faq-body p{ margin:0 0 0.5rem; }
.faq-body p:last-child{ margin:0; }
.faq-body ul{ margin:0.3rem 0 0.5rem 1.1rem; }
.faq-body li{ margin-bottom:0.25rem; }
.faq-body strong{ color:var(--color-text); font-weight:600; }

/* ---------- Handbuch ---------- */
.manual-nav{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.manual-nav a{
  padding:0.35rem 0.8rem; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  color:var(--color-accent-strong); text-decoration:none; font-size:0.82rem; font-weight:500;
}
.manual-nav a:hover{ background:var(--color-accent-soft); }
.manual-section{ margin-bottom:1.5rem; scroll-margin-top:1rem; }
.manual-section h2{
  display:flex; align-items:center; gap:0.5rem; font-size:1.15rem; font-weight:600;
  color:var(--color-accent-strong); border-bottom:2px solid var(--color-border);
  padding-bottom:0.5rem; margin-bottom:0.8rem;
}
.manual-section h3{ font-size:0.95rem; font-weight:600; color:var(--color-text); margin:1rem 0 0.4rem; }
.manual-section p{ color:var(--color-text-muted); line-height:1.7; margin:0 0 0.5rem; font-size:0.88rem; }
.manual-section ul, .manual-section ol{
  color:var(--color-text-muted); line-height:1.7; margin:0.3rem 0 0.6rem 1.1rem; font-size:0.88rem;
}
.manual-section li{ margin-bottom:0.25rem; }
.manual-section strong{ color:var(--color-text); }
.step-list{ list-style:none; margin-left:0 !important; counter-reset:steps; }
.step-list li{ counter-increment:steps; display:flex; gap:0.7rem; align-items:flex-start; margin-bottom:0.6rem; }
.step-list li::before{
  content:counter(steps); background:var(--color-accent); color:#fff;
  width:1.4rem; height:1.4rem; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:0.72rem; font-weight:600; flex-shrink:0; margin-top:0.1rem;
}
.role-badge{
  display:inline-block; padding:0.1rem 0.4rem; border-radius:0.25rem;
  font-size:0.7rem; font-weight:600; background:var(--color-accent-soft);
  color:var(--color-accent-strong); border:1px solid var(--color-accent);
}

/* ---------- Verarbeitungsverzeichnis ---------- */
.vvz-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; gap:0.5rem; }
.vvz-meta .muted{ font-size:0.85rem; }
.vvz-entry{ border:1px solid var(--color-border-strong); border-radius:0.75rem; padding:1rem; margin-bottom:0.8rem; }
.vvz-entry h3{ font-size:0.95rem; margin:0 0 0.6rem; }
.vvz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.vvz-grid .label{ font-size:0.72rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.03em; }
.vvz-grid .value{ font-size:0.85rem; }
@media (max-width:600px){ .vvz-grid{ grid-template-columns:1fr; } }
.legal-footnote.centered{ text-align:center; }

/* ---------- Personalbedarf je Abteilung (Hotel-Formular) ----------
   Bewusst mit Rahmen: hier ist die Tabelle ein Eingaberaster, kein Datensatz -
   die Zellgrenzen sind die Orientierung beim Ausfuellen. */
table.staffing-grid{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.staffing-grid th, table.staffing-grid td{
  border:1px solid var(--color-border-strong); padding:0.3rem; text-align:center;
}
table.staffing-grid th.dept-col, table.staffing-grid td.dept-col{ text-align:left; }
table.staffing-grid input[type="number"]{ width:3.5rem; margin-top:0; text-align:center; }
table.staffing-grid tbody tr:hover td{ background:transparent; }
.staffing-hint{ font-size:0.78rem; color:var(--color-text-muted); margin:0.3rem 0 0.6rem; }

/* ---------- Personalakte ---------- */
.akte-form{ display:flex; flex-wrap:wrap; gap:0.5rem; align-items:flex-end; margin-bottom:1.5rem; }
.akte-form .field{ display:flex; flex-direction:column; gap:0.2rem; }
.akte-form label{ margin-top:0; font-size:0.8rem; }
.akte-form input, .akte-form select{ margin-top:0; }
.carryover-hint{
  background:var(--color-surface-sunken); border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md); padding:0.6rem 0.9rem; font-size:0.85rem; margin-bottom:1rem;
}

/* ==========================================================================
   SEITENBAUSTEINE
   Je Seite eigene Bausteine, die es im Original in dieser Form nicht gibt
   (2.0 hat hier neue Ansichten). Sie lagen bisher im extra_style-Block der
   jeweiligen Seite und stehen jetzt zentral, damit sie main.css nicht mehr
   nachtraeglich ueberschreiben und bei Aenderungen an einer Stelle liegen.
   ========================================================================== */

/* ---------- Mitarbeiterliste (Karten je Abteilung) (employees.html) ---------- */
.emp-search { margin-bottom: 1.2rem; }
.emp-search input[type="text"] { max-width: 22rem; margin-top: 0; }
.emp-tab-count { background: var(--color-surface-sunken); color: var(--color-text-muted); border-radius: 999px; padding: 1px 8px; font-size: 0.78rem; margin-left: 4px; }
.tabs button.active .emp-tab-count { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.emp-group { margin-bottom: 2rem; }
.emp-group-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); }
.emp-group-header .emp-group-icon { font-size: 1.1rem; }
.emp-group-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.emp-group-count { background: var(--color-accent-soft); color: var(--color-accent-strong); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; font-weight: 600; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.8rem; }
.emp-card {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-lg);
    padding: 1.1rem 0.8rem; text-align: center; transition: transform .15s ease, box-shadow .15s ease;
}
a.emp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,22,26,.1); }
.emp-card.status-border-eingestempelt { border-color: var(--color-green-600); }
.emp-card.status-border-krank { border-color: var(--color-amber-500); }
.emp-card.status-border-urlaub { border-color: var(--color-blue-500); }
.emp-corner-badge { position: absolute; top: 8px; right: 8px; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #fff; }
.emp-corner-badge.corner-eingestempelt { background: var(--color-green-600); }
.emp-corner-badge.corner-krank { background: var(--color-amber-500); }
.emp-corner-badge.corner-urlaub { background: var(--color-blue-500); }
.emp-avatar, .emp-avatar-fallback { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; margin: 0 auto 0.6rem; display: flex; align-items: center; justify-content: center; }
.emp-avatar-fallback { color: #fff; font-weight: 700; font-size: 1.1rem; }
.emp-name { font-weight: 600; font-size: 0.88rem; line-height: 1.25; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-dept { font-size: 0.76rem; color: var(--color-text-muted); margin-bottom: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-status-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.emp-status-pill.pill-eingestempelt { background: var(--color-green-100); color: var(--color-green-600); }
.emp-status-pill.pill-krank { background: var(--color-amber-100); color: var(--color-amber-500); }
.emp-status-pill.pill-urlaub { background: var(--color-blue-100); color: var(--color-blue-500); }
.emp-status-pill.pill-none { background: var(--color-surface-sunken); color: var(--color-text-muted); }
table.inactive-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 1rem; }
table.inactive-table th, table.inactive-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border-strong); text-align: left; }

/* ---------- Urlaub & Krankmeldungen (vacation.html) ---------- */
table.vac-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; }
table.vac-table th, table.vac-table td {
    border: 1px solid var(--color-border-strong);
    padding: 0.4rem;
    vertical-align: top;
    text-align: left;
}
table.vac-table th { background: var(--color-surface-sunken); white-space: nowrap; }
.vac-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-bottom: 1.5rem; }
.vac-form .field { display: flex; flex-direction: column; gap: 0.2rem; }
.vac-form label { margin-top: 0; font-size: 0.8rem; }
.vac-form input, .vac-form select { margin-top: 0; }
.vac-inline-form { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.3rem; }
.vac-inline-form input[type="text"], .vac-inline-form input[type="date"] { margin-top: 0; font-size: 0.8rem; }
/* Status als Pille wie im Original - dort ist ein Status nie nur farbiger Text. */
.status-offen { background: var(--color-amber-100); color: var(--color-amber-500); }
.status-geprüft_ok { background: var(--color-blue-100); color: #1f5f96; }
.status-genehmigt { background: var(--color-green-100); color: var(--color-green-600); }
.status-abgelehnt { background: var(--color-red-100); color: var(--color-red-600); }
.status-zurückgezogen { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.carryover-hint { background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 1rem; }
/* Loest die frueheren style="color:..."-Attribute im Hinweiskasten ab. */
.hint-danger { color: var(--color-red-600); }
.hint-warning { color: var(--color-amber-500); }
/* Ein Knopf, der als Zelleninhalt neben Text stehen soll (Loeschen-Formulare
   in Tabellen) - ersetzt style="display:inline" am <form>. */
.inline-form { display: inline; }

/* ---------- Urlaubskalender (Jahresmatrix) (vacation_kalender.html) ---------- */
.kal-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.kal-nav a { white-space: nowrap; }
.kal-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.78rem; margin-bottom: 1rem; }
.kal-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Zwei Arten von Eintrag, deshalb zwei Formen in der Legende:
   runde Punkte fuer das, was einem Mitarbeiter zugeordnet ist, und
   Flaechen fuer die Eigenschaft des Tages selbst (Feiertag, Wochenende).
   Die Flaechen tragen exakt die Farbe der Kalenderzelle - vorher stand in
   der Legende ein dunkelgrauer Punkt fuer Feiertag, waehrend die Zelle im
   Kalender hellgelb war. */
.kal-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.kal-dot.vac { background: var(--color-green-600); }
.kal-dot.pending { background: var(--color-blue-500); }
.kal-dot.sick { background: var(--color-red-600); }
.kal-dot.special { background: var(--color-purple-500); }
.kal-dot.area { border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); }
.kal-dot.holiday { background: var(--color-amber-100); }
.kal-dot.weekend { background: var(--color-surface-sunken); }
table.kal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-bottom: 2rem; }
table.kal-table th, table.kal-table td {
    border: 1px solid var(--color-border-strong);
    padding: 0.3rem;
    text-align: center;
    vertical-align: top;
    min-width: 1.6rem;
}
table.kal-table th.emp-col, table.kal-table td.emp-col { text-align: left; white-space: nowrap; min-width: 8rem; }
/* Monatskalender der Jahresansicht: feste Spaltenbreiten, damit alle zwoelf
   Monate gleich gross sind. Ohne table-layout richtet sich jede Tabelle nach
   ihrem Inhalt - ein Monat mit Markierungspunkten wurde dadurch breiter als
   einer ohne. */
table.kal-mini { table-layout: fixed; width: 100%; font-size: 0.68rem; }
table.kal-mini th, table.kal-mini td { padding: 0.25rem 0; text-align: center; }
table.kal-table th { background: var(--color-surface-sunken); }
td.day-weekend { background: var(--color-surface-sunken); }
td.day-holiday { background: var(--color-amber-100); }
.marker { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; margin: 0 1px; }
.marker.vac { background: var(--color-green-600); }
.marker.pending { background: var(--color-blue-500); }
.marker.sick { background: var(--color-red-600); }
.marker.special { background: var(--color-purple-500); }
.year-table { width: 100%; }
.year-table td { vertical-align: top; padding: 0.5rem; }

/* ---------- Arbeitszeit-Auswertungen (working_time_reports.html) ---------- */
form.select-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
form.select-form select, form.select-form input[type="month"], form.select-form input[type="number"] {
    padding: 0.4rem; border-radius: 0.4rem; border: 1px solid var(--color-border-strong);
    background: var(--color-surface-sunken); color: var(--color-text);
}
.export-links { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
form.payout-form { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
form.payout-form input[type="month"] {
    padding: 0.4rem; border-radius: 0.4rem; border: 1px solid var(--color-border-strong);
    background: var(--color-surface-sunken); color: var(--color-text);
}
.tab-nav { display: flex; gap: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border-strong); }
.tab-nav a {
    padding: 0.5rem 0.9rem; border-radius: 0.4rem 0.4rem 0 0; text-decoration: none; color: var(--color-text-muted);
    font-size: 0.9rem;
}
.tab-nav a.active { color: var(--color-text); background: var(--color-surface-sunken); font-weight: 600; }
.info-tiles { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0; }
.info-tile {
    flex: 1 1 12rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-md); background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
}
.info-tile h4 { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--color-text-muted); }
.info-tile .value { font-size: 1.3rem; font-weight: 600; }
.warning-box {
    margin: 0.8rem 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-amber-500) 15%, transparent); border: 1px solid var(--color-amber-500); font-size: 0.85rem;
}
.balance-positive { color: var(--color-green-600); }
.balance-negative { color: var(--color-red-600); }

/* ---------- Stundenjournal (working_time_reports.html) ---------- */
.journal-nav { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.journal-nav strong { min-width: 9rem; text-align: center; }

.manual-entry-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; padding: 0.9rem; }
.manual-entry-form > div { display: flex; flex-direction: column; gap: 0.25rem; }
.manual-entry-form label { font-size: 0.8rem; color: var(--color-text-muted); }
.manual-entry-reason { flex: 1 1 16rem; }
.manual-entry-reason input { width: 100%; }

.bulk-bar {
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    margin-bottom: 0.8rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-md);
    background: var(--color-green-100); border: 1px solid var(--color-green-600);
    font-size: 0.85rem; font-weight: 600;
}
.bulk-bar form { display: inline; }

/* Zeilenfarben markieren den Tagestyp - bewusst blass, damit die
   Statuspillen in der Zeile die kraeftigeren Farben behalten. */
.journal-row-holiday td { background: var(--color-red-100); }
.journal-row-sick td { background: var(--color-amber-100); }
.journal-row-vacation td { background: var(--color-green-100); }
.journal-row-weekend td { background: var(--color-surface-sunken); }

.journal-table tfoot td { font-weight: 600; background: var(--color-surface-sunken); }
.journal-actions { white-space: nowrap; }
.journal-actions form { display: inline; }

/* ---------- Tabelle als Karten auf schmalen Schirmen ----------
   Aus dem Original uebernommen: statt seitlich zu scrollen wird jede Zeile
   eine Karte, jede Zelle zeigt ihr data-label als Beschriftung davor. Rein
   ueber CSS, das Markup bleibt eine normale Tabelle - keine zweite Fassung
   fuer Mobil, die auseinanderlaufen koennte.

   Die Selektoren sind bewusst als table.table-cards geschrieben: .panel table
   setzt weiter oben display:block und overflow-x:auto, was hier gerade nicht
   gewollt ist, und hat dieselbe Spezifitaet. */
@media (max-width:700px){
  table.table-cards{ display:block; overflow-x:visible; border:none; }
  table.table-cards thead{ display:none; }
  table.table-cards tbody, table.table-cards tfoot,
  table.table-cards tr, table.table-cards td{ display:block; width:100%; }
  table.table-cards tr{
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-md); margin-bottom:10px; padding:4px 14px;
  }
  table.table-cards td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border:none; border-bottom:1px solid var(--color-border); padding:8px 0; text-align:right;
  }
  table.table-cards tr > td:last-child{ border-bottom:none; }
  table.table-cards td[data-label]::before{
    content:attr(data-label); font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; color:var(--color-text-muted); text-align:left; flex-shrink:0;
  }
  /* Zellen ohne Beschriftung (Auswahlkaestchen, Aktionsknoepfe) fuellen die
     Zeile rechtsbuendig statt eine leere linke Spalte offen zu lassen. */
  table.table-cards td:not([data-label]){ justify-content:flex-end; }
  table.table-cards tfoot tr{ background:var(--color-surface-sunken); }

  /* Leere Zellen kosten auf dem Handy eine ganze Zeile. Betroffen sind vor
     allem Tage ohne Buchung im Journal - dort stand elfmal ein Strich
     untereinander, ein freier Samstag fuellte damit den ganzen Schirm.
     :empty allein genuegt nicht: die Zellen enthalten Zeilenumbrueche aus
     dem Template, deshalb markiert das Template sie zusaetzlich mit
     data-empty. */
  table.table-cards td:empty,
  table.table-cards td[data-empty]{ display:none; }

  /* ── Mehrspaltige Formulare auf eine Spalte ──
     Alle diese Formulare reihen ihre Felder nebeneinander. Auf dem Handy
     blieb dabei fuer die einzelnen Felder so wenig Platz, dass sie sich
     ueberlappt haben (Urlaub/Krank/Sonderurlaub: "Bis" unter dem Knopf).
     Untereinander und volle Breite ist auf schmalen Schirmen ohnehin die
     bessere Bedienung. */
  .vac-form,
  .vac-inline-form,
  .akte-form,
  .filter-form,
  form.select-form,
  form.payout-form,
  form.month-form,
  .manual-entry-form{
    flex-direction:column;
    align-items:stretch;
  }
  /* min-width:0 ist hier der eigentliche Hebel: Flex-Kinder starten mit
     min-width:auto und schrumpfen nie unter ihre Inhaltsbreite. Ein
     Datumsfeld hat auf dem Handy eine breite Mindestgroesse und hat damit
     das ganze Panel ueber den Bildschirmrand geschoben. */
  .vac-form > *,
  .vac-inline-form > *,
  .akte-form > *,
  .filter-form > *,
  form.select-form > *,
  form.payout-form > *,
  form.month-form > *,
  .manual-entry-form > *{ width:100%; min-width:0; }
  .vac-form input, .vac-form select,
  .vac-inline-form input, .vac-inline-form select,
  .akte-form input, .akte-form select,
  .filter-form input[type="text"],
  form.select-form input, form.select-form select,
  form.payout-form select,
  form.month-form input, form.month-form select,
  .manual-entry-form input{ width:100%; }
  /* Das Jahr-Feld im Arbeitszeitkonto traegt eine Inline-Breite. */
  .filter-bar .select-form input[type="number"]{ width:100% !important; }

  /* Monatsnavigation kompakt in einer Zeile: Pfeil, Monat, Pfeil. Volle
     Knopfbreite untereinander hat drei Zeilen fuer eine Blaetterfunktion
     gebraucht. */
  .journal-nav{ display:grid; grid-template-columns:auto 1fr auto; gap:0.5rem; align-items:center; }
  .journal-nav strong{ min-width:0; text-align:center; font-size:0.95rem; }
  .journal-nav .btn{ padding:9px 10px; }

  /* ── Urlaubskalender ──
     Jahresansicht: drei Monate nebeneinander passen nicht, ab hier steht
     jeder Monat fuer sich. Die inneren Monatstabellen bleiben Tabellen,
     deshalb nur die direkten Kinder umstellen. */
  table.year-table,
  table.year-table > tbody,
  table.year-table > tbody > tr,
  table.year-table > tbody > tr > td{ display:block; width:100%; }
  table.year-table > tbody > tr > td{ margin-bottom:1.5rem; }

  /* Monatsraster und Besetzungsgitter bleiben seitlich scrollbar - eine
     Karte je Zeile ergaebe bei einem Tagesraster keinen Sinn. Damit beim
     Scrollen klar bleibt, wessen Zeile man sieht, steht die erste Spalte
     fest. Das Besetzungsgitter ist ohnehin eine seltene Verwaltungsaufgabe
     mit schmalen Zahlenfeldern. */
  table.kal-table th.emp-col,
  table.kal-table td.emp-col,
  table.staffing-grid th:first-child,
  table.staffing-grid td:first-child{
    position:sticky; left:0; z-index:1;
    background:var(--color-surface);
  }


  /* ── Chat-Eingabe ──
     Die Dateiauswahl beansprucht in der rechten Spalte so viel Platz, dass
     vom Eingabefeld nur ein Streifen uebrig blieb. Auf schmalen Schirmen
     steht das Textfeld deshalb oben und Datei/Senden darunter. */
  .communication-compose{ grid-template-columns:1fr; }
  .communication-compose-side{ grid-template-columns:1fr auto; align-items:center; gap:8px; }
  .communication-compose input[type="file"]{ font-size:0.7rem; min-width:0; }
}

/* ---------- Dialog ---------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 1.2rem; background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
    width: 100%; max-width: 26rem; padding: 1.4rem; border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.8rem; }
.modal-field label { font-size: 0.8rem; color: var(--color-text-muted); }
.modal-card > button { width: 100%; }

/* ---------- Korrekturantraege (correction_requests.html) ---------- */
table.cr-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; }
table.cr-table th, table.cr-table td {
    border: 1px solid var(--color-border-strong);
    padding: 0.4rem;
    vertical-align: top;
    text-align: left;
}
table.cr-table th { background: var(--color-surface-sunken); white-space: nowrap; }
.cr-form { display: flex; flex-direction: column; gap: 0.2rem; }
.cr-form input[type="text"], .cr-form input[type="datetime-local"], .cr-form input[type="number"] {
    padding: 0.2rem; border-radius: 0.3rem; border: 1px solid var(--color-border-strong);
    background: var(--color-surface-sunken); color: var(--color-text); font-size: 0.8rem; width: 100%; box-sizing: border-box;
}
.cr-form button { width: auto; margin-top: 0; padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.cr-form.reject button { background: var(--color-red-600); }
.status-pending { color: var(--color-amber-500); }
.status-approved { color: var(--color-green-600); }
.status-rejected { color: var(--color-red-600); }
.status-zurückgezogen { color: var(--color-text-muted); }
.bulk-bar { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }

/* ---------- Mail-Vorlagen (email_template_settings.html) ---------- */
.tpl-box { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--color-border-strong); border-radius: 0.4rem; }
.tpl-box textarea {
    width:100%; box-sizing:border-box; min-height:8rem; padding:0.6rem; margin-top:0.3rem;
    border-radius:0.4rem; border:1px solid var(--color-border-strong); background:var(--color-surface-sunken); color:var(--color-text);
    font-size:0.9rem; font-family:inherit; resize:vertical;
}
.tpl-hint { font-size:0.8rem; color:var(--color-text-muted); margin:0.2rem 0 0.6rem; }
.tpl-actions { display:flex; gap:0.6rem; margin-top:0.8rem; }
.tpl-actions button { width:auto; margin-top:0; }
.tpl-badge { font-size:0.75rem; color:var(--color-green-600); margin-left:0.4rem; }
.lang-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.lang-tabs { display: flex; gap: 0.4rem; }
.lang-tabs a {
    padding: 0.4rem 0.9rem; border-radius: 0.4rem; text-decoration: none; font-size: 0.85rem;
    color: var(--color-text-muted); border: 1px solid var(--color-border-strong);
}
.lang-tabs a.active { color: var(--color-text); background: var(--color-surface-sunken); font-weight: 600; }
.lang-active-badge { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Personalkosten (cost_report.html) ---------- */
table.cost-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.cost-table th, table.cost-table td {
    border: 1px solid var(--color-border-strong);
    padding: 0.4rem;
    text-align: right;
}
table.cost-table th:first-child, table.cost-table td:first-child { text-align: left; }
table.cost-table th { background: var(--color-surface-sunken); }
table.cost-table tr.totals { font-weight: bold; background: var(--color-surface-sunken); }
form.month-form { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
form.month-form input[type="month"] {
    padding: 0.4rem; border-radius: 0.4rem; border: 1px solid var(--color-border-strong);
    background: var(--color-surface-sunken); color: var(--color-text);
}
.view-switch { display: flex; gap: 0.6rem; margin-left: auto; }
.view-switch a {
    padding: 0.4rem 0.8rem; border-radius: 0.4rem; text-decoration: none; font-size: 0.85rem;
    color: var(--color-text-muted); border: 1px solid var(--color-border-strong);
}
.view-switch a.active { color: var(--color-text); background: var(--color-surface-sunken); font-weight: 600; }

/* ---------- Wunschangaben (schedule_wishes.html) ---------- */
/* Wunschraster: am Schirm die Wochenmatrix, auf schmalen Geraeten die
   Tagesansicht darunter. Umschaltpunkt wie beim Dienstplan bei 920px - die
   Zellen tragen ganze Formulare und brauchen frueher Platz als eine reine
   Textspalte. */
.wish-mobile{ display:none; }
.wish-mobile-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:.8rem .9rem; margin-bottom:.75rem;
}
.wish-mobile-card h3{ margin:0 0 .6rem; font-size:.95rem; }
.wish-mobile-line{ padding:.6rem 0; border-top:1px solid var(--color-border); }
.wish-mobile-line:first-of-type{ border-top:none; }
.wish-mobile-line strong{ display:block; margin-bottom:.35rem; font-size:.85rem; }
.wish-mobile-line .wish-form{ flex-direction:row; flex-wrap:wrap; gap:.4rem; }
.wish-mobile-line .wish-form select{ flex:1 1 8rem; min-width:0; }
.wish-mobile-line .wish-form input[type="text"]{ flex:1 1 8rem; min-width:0; }
@media (max-width:920px){
  .wish-desktop{ display:none; }
  .wish-mobile{ display:block; }
}

table.wish-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; }
/* Wie beim Dienstplan-Wochenraster: .panel table setzt weiter oben
   display:block/max-width, das laesst die breite Wunsch-Matrix ihre
   Content-Breite behalten statt das Panel zu fuellen - grosse Leerflaeche
   rechts. Nur der Desktop-Matrix-Fall (wish-desktop), nicht die schmale
   Uebersichtstabelle (table-cards) oder die zweispaltige Self-Service-Liste. */
.wish-desktop table.wish-table{ display: table; table-layout: fixed; }
.wish-desktop table.wish-table th:first-child, .wish-desktop table.wish-table td:first-child{ width: 13rem; }
table.wish-table th, table.wish-table td {
    border: 1px solid var(--color-border-strong);
    padding: 0.4rem;
    vertical-align: top;
    text-align: left;
}
table.wish-table th { background: var(--color-surface-sunken); white-space: nowrap; }
.wish-form { display: flex; flex-direction: column; gap: 0.2rem; }
.wish-form select, .wish-form input[type="text"] {
    padding: 0.2rem; border-radius: 0.3rem; border: 1px solid var(--color-border-strong);
    background: var(--color-surface-sunken); color: var(--color-text); font-size: 0.8rem; width: 100%; box-sizing: border-box;
}
.wish-form button { width: auto; margin-top: 0; padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.wish-form.delete button { background: var(--color-red-600); }
.week-nav { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.week-nav a { text-decoration: none; }
.wish-blocked { padding: 0.6rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem; font-size: 0.9rem; background: var(--color-amber-100); color: var(--color-amber-500); }

/* ---------- Dienstplan (Wochenraster, Kacheln, Mobilansicht) ----------
   Groesster Einzelblock: lag komplett im extra_style-Block von schedule.html.
   Die Schichtart-Farben stehen weiter unten als Custom Properties - die
   Kachelklassen hier lesen nur --shift-bg/--shift-border/--shift-fg. */
.dp-sched-weeknav{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:1rem; }
.dp-sched-weeknav-arrow{ display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:999px; background:var(--color-surface-sunken); text-decoration:none; color:var(--color-text); font-size:1.1rem; flex-shrink:0; }
.dp-sched-weeknav-arrow:hover{ background:var(--color-accent-soft); }
.dp-sched-weeknav-select{ padding:.5rem .75rem; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-text); font-weight:600; font-size:.9rem; max-width:100%; }
.publish-banner{ padding:.6rem .9rem; border-radius:var(--radius-md); margin-bottom:1rem; font-size:.9rem; }
.publish-banner.draft{ background:var(--color-amber-100); color:#7a5713; }
.publish-banner.published{ background:var(--color-green-100); color:var(--color-green-600); }
.dp-sched-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.25rem; padding:.6rem .8rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.dp-sched-toolbar-group{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.dp-sched-toolbar-right{ margin-left:auto; }
.dp-sched-inline-form{ display:flex; gap:.4rem; align-items:center; margin:0; }
.dp-sched-toolbar select{ padding:.35rem .5rem; border-radius:var(--radius-sm); border:1px solid var(--color-border-strong); font-size:.82rem; }
/* Beschriftungen in der Werkzeugleiste nicht umbrechen - der Knopf stand
   sonst als dreizeiliger Kloetzchen zwischen einzeiligen Schaltflaechen. */
.dp-sched-toolbar button, .dp-sched-toolbar .btn-sm{ white-space:nowrap; }
.dp-sched-smart-btn{ min-width:11rem; }
.btn-sm{ padding:.35rem .7rem; font-size:.82rem; width:auto; }
.dp-sched-mobile{ display:none; }
.dp-sched-mobile-tabs{ display:flex; gap:.5rem; margin-bottom:1rem; }
/* color muss hier stehen: die allgemeine button-Regel setzt weisse Schrift
   fuer den gefuellten Knopf, der inaktive Reiter hat aber weissen Grund -
   ohne diese Zeile stand weisse Schrift auf Weiss und der Reiter sah aus
   wie ein leeres Kaestchen. */
.dp-sched-mobile-tabs button{ flex:1; padding:.55rem; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-text); font-weight:600; font-size:.85rem; cursor:pointer; }
.dp-sched-mobile-tabs button.is-active{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.dp-sched-mobile-pane{ display:none; }
.dp-sched-mobile-pane.is-active{ display:block; }
.dp-sched-mobile-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.8rem .9rem; margin-bottom:.75rem; }
.dp-sched-mobile-card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; gap:.5rem; }
.dp-sched-mobile-card-head h3{ margin:0; font-size:.95rem; }
.dp-sched-mobile-line{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; border-top:1px solid var(--color-border); gap:.5rem; }
.dp-sched-mobile-line:first-of-type{ border-top:none; }
.dp-sched-mobile-date{ font-size:.78rem; color:var(--color-text-muted); min-width:5.5rem; }
/* Mobile Chip ("Mein Dienstplan"): im Original bewusst NICHT typfarbig wie die
   Desktop-Kachel, sondern ein einheitlicher heller Chip mit farbigem 4px-
   Linksrand als Kategorie-Marker (Schicht/Wunsch/Abwesenheit). Geometrie 1:1
   aus dem Original (status-chip-v30). */
.dp-sched-chip{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:50px; padding:0 14px; border-radius:14px; font-size:.82rem; font-weight:700; border:1px solid var(--color-border-strong); border-left-width:4px; background:var(--color-surface-sunken); color:var(--color-text); }
.dp-sched-chip.shift{ border-left-color:var(--color-green-600); }
.dp-sched-chip.wish{ border-left-color:var(--color-accent); }
.dp-sched-chip.absence{ border-left-color:var(--color-amber-500); }
.dp-sched-chip.muted{ color:var(--color-text-muted); border-style:dashed; }
.dp-sched-chip strong{ font-size:.82rem; font-weight:600; }
.dp-sched-hotel-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.8rem .9rem; margin-bottom:.75rem; }
.dp-sched-hotel-card h3{ margin:0 0 .5rem; font-size:.95rem; }
.dp-sched-hotel-day{ padding:.4rem 0; border-top:1px solid var(--color-border); }
.dp-sched-hotel-day:first-of-type{ border-top:none; }
.dp-sched-hotel-day-label{ font-size:.78rem; font-weight:600; color:var(--color-text-muted); margin-bottom:.3rem; }
.dp-sched-shift-row{ display:flex; justify-content:space-between; gap:.5rem; font-size:.82rem; padding:.15rem 0; }
.dp-sched-shift-name.absent{ color:var(--color-text-muted); }
.dp-sched-shift-time{ color:var(--color-text-muted); }
/* "Gesamter Plan": dritte Farbebene des Originals - hier faerbt nicht die
   Flaeche, sondern nur der Statustext (mobile-shift-time.<typ>). */
.dp-sched-shift-time.urlaub{ color:#A8D96B; font-weight:500; }
.dp-sched-shift-time.krank{ color:#ef6c00; font-weight:500; }
.dp-sched-shift-time.frei{ color:#9e9e9e; }
.dp-sched-shift-time.homeoffice{ color:#6366f1; }
@media (max-width:920px){
  .dp-sched-mobile{ display:block; }
  .dp-sched-desktop{ display:none; }
}
/* Wochenraster am Schirm: volle Breite und gleich breite Tagesspalten.
   Ohne display:table greift die allgemeine Regel .panel table mit
   display:block - die Tabelle schrumpft dann auf ihre Inhaltsbreite und
   liess rechts die halbe Seite leer, waehrend jede Abteilung andere
   Spaltenbreiten bekam. table-layout:fixed macht die Tage ausserdem
   untereinander gleich gross, unabhaengig davon, wie viele Schichten in
   einer Spalte stehen. */
.dp-sched-draghint{ margin:.5rem 0 0; text-align:right; }
table.week-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.panel table.week-grid, .dp-sched-desktop table.week-grid { display: table; table-layout: fixed; }
table.week-grid th:first-child, table.week-grid td:first-child { width: 13rem; }
table.week-grid th, table.week-grid td {
    border: 1px solid var(--color-border-strong);
    padding: 0.5rem;
    vertical-align: top;
    text-align: left;
}
table.week-grid th { background: var(--color-surface-sunken); white-space: nowrap; }
.dp-sched-employee-cell strong{ display:block; }
.dp-sched-soll-geplant{ font-size:.72rem; margin-top:.2rem; color:var(--color-text-muted); }
.dp-sched-soll-geplant.over{ color:var(--color-red-600); font-weight:600; }
/* Desktop-Kachel: Geometrie 1:1 aus dem Original (desktop-cell-v30 /
   desktop-card-v30 inkl. der spaeteren Ueberschreibungen im Redesign-CSS:
   min-height 76px, vertikal zentriert, Radius 10px = --radius-md).
   Flaechenfarbe kommt ueber --shift-bg/--shift-border/--shift-fg aus den
   .shift-<typ>-Klassen in main.css; ohne Typklasse bleibt der neutrale
   Standard stehen. */
.dp-sched-cell{ position:relative; min-height:84px; }
.dp-sched-card{
    display:flex; flex-direction:column; justify-content:center; box-sizing:border-box;
    min-height:76px; padding:12px 14px; font-weight:800; border-radius:var(--radius-md);
    border:2px solid var(--shift-border, var(--color-border));
    background:var(--shift-bg, var(--color-surface));
    color:var(--shift-fg, var(--color-text));
    box-shadow:0 2px 8px rgba(0,0,0,.09);
}
.dp-sched-card-time{ font-weight:400; font-size:.8rem; margin-top:4px; }
/* Abwesenheit traegt dieselbe Typfarbe, aber gestrichelt - im Original der
   einzige Unterschied zur geplanten Schicht (desktop-card-v30.absence). */
.dp-sched-card.absence{ border-style:dashed; box-shadow:none; }
.dp-sched-card.empty-note{ align-items:center; min-height:2.4rem; background:none; border:1px dashed var(--color-border-strong); color:var(--color-text-muted); font-weight:400; box-shadow:none; }
.dp-sched-wish-badge{ position:absolute; top:.25rem; right:.25rem; width:1rem; height:1rem; border-radius:50%; background:var(--color-accent); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:help; z-index:2; }
.dp-sched-edit{ margin-top:.35rem; }
.dp-sched-edit summary{ cursor:pointer; font-size:.72rem; padding:.15rem .5rem; border-radius:var(--radius-sm); background:var(--color-amber-500); color:#fff; display:inline-block; list-style:none; }
.dp-sched-edit summary::-webkit-details-marker{ display:none; }
.dp-sched-edit-body{ margin-top:.35rem; padding:.5rem; background:var(--color-surface-sunken); border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:.3rem; min-width:11rem; }
.dp-sched-edit-body input{ padding:.25rem; border-radius:var(--radius-sm); border:1px solid var(--color-border-strong); font-size:.78rem; box-sizing:border-box; }
.dp-sched-edit-row{ display:flex; gap:.3rem; }
.dp-sched-edit-row input{ flex:1; }
.dp-sched-edit-body button{ padding:.25rem .5rem; font-size:.78rem; }
.dp-sched-empty-cell{
  min-height:76px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--color-border-strong); border-radius:var(--radius-sm);
  background:var(--color-surface-sunken); cursor:pointer;
}
.dp-sched-empty-cell:hover{ border-color:var(--color-accent); border-style:solid; background:var(--color-accent-soft); }
.dp-sched-empty-cell:hover::after{ content:'+ Schicht'; font-size:.78rem; font-weight:500; color:var(--color-accent-strong); }
.dp-sched-empty-form{ display:none; flex-direction:column; gap:1rem; margin-top:.3rem; }
.dp-sched-empty-form select, .dp-sched-empty-form input{ padding:.25rem; border-radius:var(--radius-sm); border:1px solid var(--color-border-strong); font-size:.78rem; box-sizing:border-box; }
.dp-sched-empty-form button{ padding:.25rem .5rem; font-size:.78rem; }
.shift-draggable{ cursor:grab; }
.shift-draggable.dragging{ opacity:.4; }
.drop-cell.drag-over{ background:var(--color-green-100); }

/* ==========================================================================
   CHAT-HUB (Split-View)
   Geometrie 1:1 aus dem Original (style.css, Block "V30 clean rebuild":
   .communication-layout-v30 ff.), Farben ueber die Tokens von 2.0 statt der
   dort hartkodierten Hex-Werte. Den Versionssuffix -v30 traegt 2.0 nicht mit.

   Das Original zeigt Liste und Verlauf NEBENEINANDER; 2.0 hatte drei
   gestapelte Listen-Panels und fuer jeden Chat eine eigene Seite.
   ========================================================================== */
.communication-layout{ display:flex; gap:16px; align-items:flex-start; }
.communication-sidebar{ flex:0 0 320px; min-width:0; display:grid; gap:16px; }
.communication-contact-list{ display:grid; gap:10px; }

.communication-contact-card{
  display:block; position:relative; width:100%; box-sizing:border-box; overflow:hidden;
  padding:14px 16px; border:1px solid var(--color-border); border-radius:18px;
  background:var(--color-surface); text-decoration:none; color:inherit;
}
.communication-contact-card.is-active{ border-color:var(--color-accent); background:var(--color-accent-soft); }
.chat-card-top, .chat-card-bottom{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.chat-card-top strong{ font-size:17px; color:var(--color-text); }
.chat-card-time{ font-size:12px; color:var(--color-text-muted); flex-shrink:0; }
.communication-contact-card .chat-preview{
  color:var(--color-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;
}
.chat-badge{
  display:inline-flex; min-width:22px; height:22px; border-radius:999px;
  background:var(--color-accent); color:#fff; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.chat-badge.is-hidden{ display:none; }
/* Loeschen sitzt wie im Original als Icon in der Karte, nicht erst im Verlauf. */
.chat-delete-form{ position:absolute; top:50%; right:8px; transform:translateY(-50%); margin:0; }
.chat-delete-btn{
  background:none; border:none; padding:4px; cursor:pointer; font-size:0.95rem;
  line-height:1; color:var(--color-text-muted); border-radius:var(--radius-sm);
}
.chat-delete-btn:hover{ background:var(--color-red-100); color:var(--color-red-600); }
.communication-contact-card:has(.chat-delete-form) > a{ padding-right:28px; display:block; }

/* ---------- Verlauf ---------- */
.communication-thread{ flex:1; min-width:0; display:grid; grid-template-rows:auto 1fr auto; min-height:620px; }
.communication-thread-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--color-border); padding-bottom:12px; margin-bottom:12px;
}
.communication-thread-head h3{ margin:0; }
.communication-thread-list{ display:flex; flex-direction:column; gap:10px; overflow:auto; padding-right:6px; }

.message-bubble{
  max-width:72%; padding:10px 12px; border-radius:16px 16px 16px 4px;
  background:var(--color-surface); border:1px solid var(--color-border);
}
.message-bubble.is-own{
  align-self:flex-end; background:var(--color-green-100);
  border-color:var(--color-green-100); border-radius:16px 16px 4px 16px;
}
.message-sender{ font-size:0.72rem; font-weight:600; color:var(--color-text-muted); margin-bottom:3px; }
.message-meta{ font-size:11px; color:var(--color-text-muted); margin-top:6px; }
.message-meta .edited-tag{ font-style:italic; }
.message-content{ white-space:pre-wrap; word-break:break-word; }
.attachment{ margin-top:0.3rem; font-size:0.9rem; }
.attachment-size{ color:var(--color-text-muted); font-size:0.75rem; }
/* Bearbeiten/Loeschen als dezente Textknoepfe in der Blase - vorher ein
   aufklappbares <details> mit Eingabefeld mitten in der Nachricht. */
.message-actions{ display:flex; gap:0.6rem; margin-top:0.35rem; }
.message-actions button{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:0.72rem; font-weight:600; color:var(--color-text-muted); text-decoration:underline;
}
.message-actions button:hover{ background:none; color:var(--color-accent-strong); }
.message-actions form{ display:inline; margin:0; }

/* ---------- Eingabezeile ---------- */
.communication-compose{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:12px; align-items:end; }
.communication-compose textarea{ min-height:48px; margin-top:0; resize:vertical; }
.communication-compose-side{ display:grid; gap:6px; justify-items:stretch; }
.communication-compose input[type="file"]{ width:auto; margin:0; font-size:0.75rem; border:none; padding:0; background:none; }

.communication-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:400px; color:var(--color-text-muted); text-align:center;
}

/* ---------- Hinweis bei neuer Nachricht ----------
   Ersetzt das bisherige window.location.reload() der Uebersicht. */
.chat-toast{
  position:fixed; right:16px; bottom:16px; z-index:1500; display:grid; gap:4px;
  padding:14px 16px; border-radius:16px; background:var(--color-ink-950); color:#fff;
  text-decoration:none; box-shadow:0 16px 40px rgba(16,22,26,.28);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s;
}
.chat-toast.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.chat-toast strong{ font-size:0.85rem; }
.chat-toast span{ font-size:0.78rem; opacity:.85; }

@media (max-width:920px){
  /* Mobil entweder Liste ODER Verlauf, nicht beides - wie im Original. */
  .communication-layout{ flex-direction:column; }
  .communication-sidebar{ flex:none; width:100%; }
  .communication-thread{ width:100%; min-height:auto; display:block; }
  .communication-layout.has-selection .communication-sidebar{ display:none; }
  .communication-layout:not(.has-selection) .communication-thread{ display:none; }
  .communication-thread-list{ min-height:48vh; padding:6px 0; }
  .message-bubble{ max-width:84%; }
  .communication-compose{ position:sticky; bottom:82px; background:var(--color-bg); padding:10px 0; }
  .mobile-chat-back{ display:inline-flex; }
}
@media (min-width:921px){
  .mobile-chat-back{ display:none; }
}

/* ---------- Einstellungen: Verweise auf die Einzelbereiche ---------- */
.settings-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.settings-link{
  display:grid; gap:4px; padding:14px 16px; text-decoration:none; color:inherit;
  background:var(--color-surface-sunken); border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.settings-link:hover{ border-color:var(--color-accent); background:var(--color-accent-soft); }
.settings-link strong{ font-size:0.95rem; }

/* ---------- Praesenz und Lesebestaetigung ----------
   Beides war serverseitig fertig und in beiden Versionen tot: is_user_online()
   entschied nur ueber die Offline-Mail, und auf das thread_read-Ereignis hat
   nie ein Client gehoert. */
.presence-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--color-border-strong); flex-shrink:0;
}
.presence-dot.is-online{ background:var(--color-green-600); }
.chat-card-top .presence-dot{ margin-right:6px; }
.communication-thread-head .presence-dot{ margin-right:6px; vertical-align:middle; }
.read-marker{ margin-left:6px; letter-spacing:-1px; color:var(--color-text-muted); }
.read-marker.is-read{ color:var(--color-accent); }

/* Unterbesetzungs-Hinweis im Kopf des Abteilungsblocks. Erscheint nur, wo
   eine Sollbesetzung gepflegt ist - gegen die blosse Heuristik zu warnen
   waere Rauschen. */
.understaffing-hint{ margin:8px 0 0; font-size:0.8rem; }
.section-rule{ border:none; border-top:1px solid var(--color-border); margin:20px 0 4px; }

/* ---------- Schichtart-Farben (Dienstplan) ----------
   Hex-Werte 1:1 aus dem Original (/opt/dpplus/static/style.css, Block
   ".desktop-card-v30.<typ>") - jede Schichtart hat dort eine feste
   Wiedererkennungsfarbe, das ist der eigentliche Orientierungsanker im
   Wochenraster. Zuordnung Schichttyp -> Klasse: schedule.py::shift_css_class().

   Bewusst als Custom Properties statt direkter background/color-Regeln: die
   Kachel- und Chip-Klassen liegen im Dienstplan-Template, diese Regeln in
   main.css. Setzten beide dieselben Eigenschaften, entschiede die
   Selektor-Spezifitaet bzw. die Dateireihenfolge darueber, welche Farbe
   gewinnt - mit Variablen gibt es diesen Konflikt nicht: die Kachel liest
   --shift-bg/--shift-border/--shift-fg und faellt ohne Typklasse auf ihren
   eigenen Standardwert zurueck. Eine manuell am Schichtbaustein gesetzte
   Farbe kommt weiterhin als inline-style und schlaegt damit beides. */
.shift-frueh      { --shift-bg:#e3f2fd; --shift-border:#1e78d7; --shift-fg:#3D8FD4; }
.shift-spaet      { --shift-bg:#f3e5f5; --shift-border:#9c27b0; --shift-fg:#6a1b9a; }
.shift-nacht      { --shift-bg:#1a237e; --shift-border:#0d1b6e; --shift-fg:#ffffff; }
.shift-urlaub     { --shift-bg:#e8f5e9; --shift-border:#43a047; --shift-fg:#2e7d32; }
.shift-krank      { --shift-bg:#fff3e0; --shift-border:#ef6c00; --shift-fg:#e65100; }
.shift-frei       { --shift-bg:#f5f5f5; --shift-border:#bdbdbd; --shift-fg:#757575; }
.shift-homeoffice { --shift-bg:#fff8e1; --shift-border:#f59e0b; --shift-fg:#92400e; }
.shift-buero      { --shift-bg:#fef9c3; --shift-border:#ca8a04; --shift-fg:#713f12; }


/* ---------- Verwaltungslisten (Hotels, Ketten) ----------
   Beide Seiten zeigten ihre Eintraege als schmucklose Tabelle mit sieben
   Spalten, in der "Bearbeiten" ein nackter Textlink neben einem gefuellten
   Knopf stand. Als Karte ist ein Eintrag am Schirm wie auf dem Handy ohne
   Umbrueche lesbar - dieselbe Richtung, die das Original mit seinen
   Hotel-Karten eingeschlagen hat. */
.admin-card-list{ display:flex; flex-direction:column; gap:.75rem; }
.admin-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:14px 18px; box-shadow:0 1px 2px rgba(16,22,26,.05);
}
/* Deaktivierte Eintraege bleiben lesbar, treten aber zurueck. */
.admin-card.is-inactive{ background:var(--color-surface-sunken); }
.admin-card.is-inactive .admin-card-text h3{ color:var(--color-text-muted); }
.admin-card-main{ display:flex; align-items:center; gap:.9rem; min-width:0; flex:1 1 18rem; }
.admin-card-text{ min-width:0; }
.admin-card-text h3{ margin:0; font-size:1rem; font-weight:600; }
.admin-card-logo{
  width:44px; height:44px; object-fit:contain; flex-shrink:0;
  border-radius:var(--radius-sm); background:var(--color-surface-sunken);
}
.admin-card-logo-fallback{
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.admin-card-side{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.admin-card-actions{ display:flex; align-items:center; gap:.5rem; }
.admin-card-actions form{ margin:0; }
@media (max-width:700px){
  .admin-card{ align-items:stretch; flex-direction:column; }
  .admin-card-side{ justify-content:space-between; }
  .admin-card-actions{ flex:1 1 auto; justify-content:flex-end; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:8px; }

/* ---------- Dienstplan-Werkzeugleiste auf schmalen Schirmen ----------
   Steht bewusst am Dateiende: die Grunddefinitionen der Leiste kommen
   weiter oben, und bei gleicher Spezifitaet gewinnt die spaetere Regel. */
@media (max-width:700px){
/* Dienstplan-Werkzeugleiste: alles gleich breit untereinander.
   Der vorherige Versuch mit zwei Spalten hat halbe und volle Breiten
   gemischt, weil die Knoepfe teils in Formularen stecken und teils nicht -
   das sah zufaellig aus. display:contents loest die Formular-Rahmen auf,
   danach steht jede Schaltflaeche gleichrangig in derselben Spalte. */
.dp-sched-toolbar{ flex-direction:column; align-items:stretch; gap:.75rem; padding:.8rem; }
.dp-sched-toolbar-group{ display:flex; flex-direction:column; gap:.5rem; width:100%; }
.dp-sched-toolbar-right{ margin-left:0; }
.dp-sched-inline-form{ display:contents; }
.dp-sched-inline-form > input[type="hidden"]{ display:none; }
.dp-sched-toolbar select,
.dp-sched-toolbar button,
.dp-sched-toolbar .btn-sm{
  width:100%; min-width:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:2.75rem;
}
/* Die zweite Gruppe (Veroeffentlichen, Exporte) sichtbar von der ersten
   absetzen - es sind zwei verschiedene Arten von Aktion. */
.dp-sched-toolbar-group + .dp-sched-toolbar-group{
  padding-top:.75rem; border-top:1px solid var(--color-border);
}
}