/* === Variables === */
:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-gray: #9ca3af;
  --color-gray-light: #f3f4f6;
  --color-gray-border: #e5e7eb;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-white: #ffffff;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg: #f0f2f5;
  --color-card-bg: #ffffff;
  /* Flaeche fuer Hinweiskaesten. Bewusst ein FARBTON und keine Helligkeit:
     --color-gray-light (#f3f4f6) liegt nur drei Stufen von --color-bg (#f0f2f5)
     entfernt und ist auf dieser Seite unsichtbar (Bedienabnahme 2026-09-10).
     Blau, weil der Balken links dieselbe Familie traegt (--color-primary). */
  --color-info-bg: #e8f0fe;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 0.625rem;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);

  /* Hub-Ebene (DESIGN.md 4.1) — die einzigen zwei neuen Tokens. Neu sind nur die
     Namen: 2rem steht im Bestand an .auth-wrapper/.auth-card und an
     .dashboard-secondary, 1rem ist dessen gap. Als Literale verteilte sich
     "grosszuegig" ueber jede Hub-Regel; die naechste Korrektur muesste sie alle finden,
     und die Ebene driftete still auf die dichten LaxxTime-Masse zurueck. */
  --hub-space: 2rem;
  --hub-gap: 1rem;

  /* Location colors */
  --loc-blue: #3b82f6;
  --loc-blue-light: #dbeafe;
  --loc-blue-hover: #2563eb;
  --loc-violet: #8b5cf6;
  --loc-violet-light: #ede9fe;
  --loc-violet-hover: #7c3aed;
  --loc-amber: #f59e0b;
  --loc-amber-light: #fef3c7;
  --loc-amber-hover: #d97706;
  --loc-teal: #14b8a6;
  --loc-teal-light: #ccfbf1;
  --loc-teal-hover: #0d9488;
  --loc-rose: #f43f5e;
  --loc-rose-light: #ffe4e6;
  --loc-rose-hover: #e11d48;
  --loc-green: #22c55e;
  --loc-green-light: #dcfce7;
  --loc-green-hover: #16a34a;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Sticky-Footer-Pattern: alle direkten body-Kinder mit expliziter Breite, damit
   max-width + margin:0 auto innen greift (sonst bricht align-items: stretch
   die Container-Zentrierung in manchen Browsern). */
body > .navbar,
body > main.container,
body > .site-footer { width: 100%; box-sizing: border-box; }
body > main.container { flex: 1 0 auto; }

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

/* === Navbar === */
.navbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nav-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-brand:hover { text-decoration: none; }

/* Zeichen + Ortsname: "⚛ LaxxTime". Die Aussage traegt der GROESSENUNTERSCHIED, nicht
   mehr eine Kette aus zwei gleich grossen Gliedern — der Ortsname ist die Ueberschrift
   der Seite, das Zeichen daneben der Weg hinaus. Bis zum 25.08. stand hier ein
   Brotkrumenpfad ("Laxxsys › LaxxTime"); der Owner hat ihn am Bild abgelehnt, weil
   zwei gleich schwere Woerter mit einem Winkel dazwischen schmal und beliebig wirken.

   align-items: center und nicht baseline — bei zwei so verschiedenen Groessen
   (24 px Zeichen gegen eine 1.35rem-Ueberschrift) legt baseline das Zeichen optisch
   zu tief. */
.nav-brand-pfad {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* NICHT schrumpfen lassen. Die erste Fassung stand hier auf min-width: 0, damit der
     Pfad die Leiste nicht aufschiebt -- gemessen am 2026-08-20 war die Folge, dass die
     Navigationsknoepfe den Pfad zusammendrueckten und "LaxxTime" als "L…" erschien.
     Ein abgeschnittener Ortsname ist schlimmer als der falsche Ortsname, den wir
     gerade abgeschafft haben. Auf schmalen Geraeten schrumpft stattdessen die
     Beschriftung des Rueckwegs (Medienabfrage weiter unten). */
  flex-shrink: 0;
}
/* 🔴 DIE GROESSE IST HIER EINE ZUGAENGLICHKEITS-REGEL, KEIN GESCHMACK. Das Zeichen
   steht seit dem 25.08. OHNE Wort daneben; bis dahin teilten sich Zeichen und Wort
   eine Flaeche, die von allein gross genug war. Allein misst das Zeichen rund 24 px —
   WCAG 2.5.5 nennt 44 px als Ziel, 2.5.8 nennt 24 als Untergrenze. Deshalb steht die
   Flaeche hier ausdruecklich da, statt sich aus dem Inhalt zu ergeben.

   Der negative Aussenabstand nimmt die Flaeche aus dem Layout wieder heraus: sie ist
   greifbar, schiebt die Leiste aber nicht auf und ist unsichtbar. Genau das wollte
   der Owner ("muss auch nicht in dieser schmalen Border mit drin sein"). */
.nav-brand-dach {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  margin: -10px -10px -10px -12px;
  color: var(--color-primary);
}
/* Keine Flaeche beim Zeigen, nur das Zeichen selbst dunkelt nach — eine Kachel unter
   dem Zeichen war das, was der Owner am 25.08. als "Border" abgelehnt hat. Die
   Rueckmeldung bleibt trotzdem da, sie wechselt nur das Mittel. */
.nav-brand-dach:hover { color: var(--color-primary-dark, var(--color-text)); text-decoration: none; }
/* Das Zeichen traegt die MARKENFARBE. Es ist der Wiedererkennungspunkt der Kopfzeile
   und seit dem 25.08. ihr einziger Weg nach draussen -- in blassem Grau war es auf
   einem Telefon kaum als etwas Eigenes zu sehen (am Bild geprueft). currentColor:
   die Farbe kommt vom Link, damit der Hover-Wechsel eine Regel bleibt und nicht zwei. */
.nav-brand-zeichen { flex-shrink: 0; }
/* Der Ortsname ist die UEBERSCHRIFT der Seite, nicht das zweite Glied einer Kette.
   Kein overflow/ellipsis: er wird nie abgekuerzt — er ist kurz und die einzige Angabe,
   wo man ist. */
.nav-brand-welt {
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nav-user {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  background: var(--color-gray-light);
  color: var(--color-text);
}
.nav-link:hover {
  background: var(--color-gray-border);
  text-decoration: none;
}

.nav-logout-form { display: inline; }

/* Mobile-Hamburger (2026-07-20): Elemente existieren nur für ≤768px. */
.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--color-text);
}
.nav-user-mobile { display: none; }
.nav-mobile-only { display: none; }

/* === Container === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-full { width: 100%; }

.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary { background: var(--color-gray-light); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-gray-border); }

.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-nav {
  background: transparent;
  color: var(--color-text-muted);
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid var(--color-gray-border);
}
.btn-nav:hover { background: var(--color-gray-light); }

/* === Checkin buttons per color === */
/* Paket G Phase 4: Ruhe-Schatten + Hover-Lift mit standortfarbigem Schatten. */
.btn-checkin {
  color: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-checkin:hover { transform: translateY(-1px); }
.btn-checkin[data-color="blue"]   { background: var(--loc-blue); }
.btn-checkin[data-color="blue"]:hover   { background: var(--loc-blue-hover);   box-shadow: 0 4px 12px #3b82f640; }
.btn-checkin[data-color="violet"] { background: var(--loc-violet); }
.btn-checkin[data-color="violet"]:hover { background: var(--loc-violet-hover); box-shadow: 0 4px 12px #8b5cf640; }
.btn-checkin[data-color="amber"]  { background: var(--loc-amber); }
.btn-checkin[data-color="amber"]:hover  { background: var(--loc-amber-hover);  box-shadow: 0 4px 12px #f59e0b40; }
.btn-checkin[data-color="teal"]   { background: var(--loc-teal); }
.btn-checkin[data-color="teal"]:hover   { background: var(--loc-teal-hover);   box-shadow: 0 4px 12px #14b8a640; }
.btn-checkin[data-color="rose"]   { background: var(--loc-rose); }
.btn-checkin[data-color="rose"]:hover   { background: var(--loc-rose-hover);   box-shadow: 0 4px 12px #f43f5e40; }
.btn-checkin[data-color="green"]  { background: var(--loc-green); }
.btn-checkin[data-color="green"]:hover  { background: var(--loc-green-hover);  box-shadow: 0 4px 12px #22c55e40; }

/* === Flash Messages === */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.flash-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.flash-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.flash-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* === Auth Pages === */
.auth-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2rem;
}

.auth-card {
  background: var(--color-card-bg);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 420px;
}

.auth-card h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: var(--font);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-group input[readonly] {
  background: var(--color-gray-light);
  color: var(--color-text-muted);
}

.auth-card .btn { margin-top: 0.5rem; }

.auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* === Verify page === */
.verify-icon {
  font-size: 3rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.verify-success { background: #dcfce7; color: #16a34a; }
.verify-error   { background: #fef2f2; color: #dc2626; }
.verify-bestaetigen { background: #eff6ff; color: var(--color-primary); }

/* === Status Bar === */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-active { background: #16a34a; }
.status-dot-inactive { background: var(--color-gray); }

/* === Page Title === */
.page-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* === Locations Layout (links: Büro + Halle, rechts: Rest) === */
.locations-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.location-col-left,
.location-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* === Location Card === */
.location-card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
  border-left: 4px solid var(--color-gray);
}
.location-card:hover { box-shadow: var(--shadow-md); }

/* Per-color borders */
.location-card[data-color="blue"]   { border-left-color: var(--loc-blue); }
.location-card[data-color="violet"] { border-left-color: var(--loc-violet); }
.location-card[data-color="amber"]  { border-left-color: var(--loc-amber); }
.location-card[data-color="teal"]   { border-left-color: var(--loc-teal); }
.location-card[data-color="rose"]   { border-left-color: var(--loc-rose); }
.location-card[data-color="green"]  { border-left-color: var(--loc-green); }

/* Getönte Kopfzeile (Paket G Phase 4): Hintergrund je Standortfarbe.
   Obere Ecken werden bereits durch overflow:hidden + border-radius der
   .location-card geclippt — daher hier KEIN eigener border-radius (sonst Spalt). */
.card-header {
  padding: 0.6rem 0.85rem;
  background: var(--color-gray-light);
}
.location-card[data-color="blue"]   .card-header { background: var(--loc-blue-light); }
.location-card[data-color="violet"] .card-header { background: var(--loc-violet-light); }
.location-card[data-color="amber"]  .card-header { background: var(--loc-amber-light); }
.location-card[data-color="teal"]   .card-header { background: var(--loc-teal-light); }
.location-card[data-color="rose"]   .card-header { background: var(--loc-rose-light); }
.location-card[data-color="green"]  .card-header { background: var(--loc-green-light); }

.card-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.card-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.card-address-inline {
  font-size: 0.75rem;
  color: #475467;
  min-width: 0;
}
.card-address-inline::before { content: "· "; color: #98a2b3; }

.card-title-row .badge {
  margin-left: auto;
  align-self: center;
}

/* === Badge per color === */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: var(--color-gray-light);
  color: var(--color-gray);
}
.badge[data-color="blue"]   { background: var(--loc-blue-light); color: var(--loc-blue); }
.badge[data-color="violet"] { background: var(--loc-violet-light); color: var(--loc-violet); }
.badge[data-color="amber"]  { background: var(--loc-amber-light); color: var(--loc-amber); }
.badge[data-color="teal"]   { background: var(--loc-teal-light); color: var(--loc-teal); }
.badge[data-color="rose"]   { background: var(--loc-rose-light); color: var(--loc-rose); }
.badge[data-color="green"]  { background: var(--loc-green-light); color: var(--loc-green); }

/* === Card Body === */
.card-body {
  /* weißer Spalt oben, damit die erste (ggf. hervorgehobene) Person nicht an
     der getönten Kopfzeile klebt */
  padding: 0.45rem 0.75rem 0;
  flex: 1;
}

.person-list {
  list-style: none;
}
.person-list li {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--color-gray-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  border-radius: 0.25rem;
}
.person-list li:last-child { border-bottom: none; }

.person-list li.is-me {
  background: #eff6ff;
  font-weight: 600;
}

.me-tag {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 700;
}

.empty-message {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  font-style: italic;
}

/* === Card Footer === */
.card-footer {
  padding: 0.5rem 0.75rem;
}

.checked-in-here {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0;
}
.checked-in-here[data-color="blue"]   { color: var(--loc-blue); }
.checked-in-here[data-color="violet"] { color: var(--loc-violet); }
.checked-in-here[data-color="amber"]  { color: var(--loc-amber); }
.checked-in-here[data-color="teal"]   { color: var(--loc-teal); }
.checked-in-here[data-color="rose"]   { color: var(--loc-rose); }
.checked-in-here[data-color="green"]  { color: var(--loc-green); }

/* === Emergency Page === */
.emergency-page { max-width: 900px; }

.emergency-header { margin-bottom: 1.5rem; }
.emergency-header h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.emergency-date { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.emergency-actions { display: flex; gap: 0.5rem; }

.emergency-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.emergency-table tr.roster-present { background: #f0fdf4; }
.emergency-table .status-present { color: #15803d; font-weight: 600; }
.emergency-table .status-absent { color: #b45309; }
.emergency-table .status-none { color: #9ca3af; }
.emergency-table th,
.emergency-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  font-size: 0.9rem;
}
.emergency-table thead { background: var(--color-gray-light); }
.emergency-table th {
  font-weight: 700;
  border-bottom: 2px solid var(--color-gray-border);
}
.emergency-table tbody tr { border-bottom: 1px solid var(--color-gray-light); }
.emergency-table tbody tr:nth-child(even) { background: #fafbfc; }
.emergency-table .col-nr { width: 40px; }
.emergency-table .col-time { white-space: nowrap; }

.emergency-total { margin-top: 1rem; font-size: 1rem; }

/* === Responsive === */
@media (max-width: 768px) {
  /* Hamburger-Nav: Leiste bleibt einzeilig (Logo · Name · ≡),
     Links klappen als vertikales Panel unter der Navbar aus. */
  .nav-content { gap: 0.5rem; }
  /* Hier ist die Leiste dreigeteilt und eng: Zeichen + Ortsname links, Name des
     Nutzers, Menueknopf. Seit dem 25.08. steht oben schon ueberall nur noch das
     Zeichen — es gibt hier also nichts mehr wegzunehmen (bis dahin fielen hier das
     Wort "Laxxsys" und der Trenner "›" weg; beide gibt es nicht mehr).

     Der Weg zurueck bleibt ausdruecklich SICHTBAR und wandert nicht ins Menue: er ist
     der einzige Weg aus der Welt heraus, und im Menue findet ihn niemand.

     Der Ortsname faellt eine Stufe kleiner aus als am grossen Schirm. Bei 390 px
     teilen sich Zeichen, Name, Nutzername und Menueknopf eine Zeile; 1.35rem waeren
     dort der Anfang eines Umbruchs. */
  .nav-brand-pfad { gap: 0.45rem; }
  .nav-brand-welt { font-size: 1.15rem; }
  .nav-brand-dach { margin-left: -10px; }
  .nav-user-mobile {
    display: inline;
    margin-left: auto;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-burger { display: inline-flex; align-items: center; }
  .nav-right { display: none; }
  .nav-right.nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-border);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 1rem 0.75rem;
    gap: 0.35rem;
  }
  .nav-right .nav-user { display: none; }     /* Name steht schon in der Leiste */
  .nav-right .nav-dropdown { display: none; } /* Werkzeuge: flach via .nav-mobile-only */
  .nav-mobile-only { display: flex; }
  .nav-right .nav-link { width: 100%; box-sizing: border-box; }
  .nav-logout-form { width: 100%; }
  .container { padding: 0.75rem; }
  .locations-layout {
    grid-template-columns: 1fr;
  }
  .status-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .emergency-table { font-size: 0.8rem; }
  .emergency-table th, .emergency-table td { padding: 0.5rem; }
  .auswertung-bar {
    padding: 0.5rem 0.75rem;
    justify-content: center;
  }
}

/* === Print === */
@media print {
  .no-print { display: none !important; }
  .navbar { display: none; }
  body { background: white; font-size: 12pt; }
  .container { padding: 0; max-width: none; }
  .emergency-table { box-shadow: none; border: 1px solid #000; }
  .emergency-table th, .emergency-table td { border: 1px solid #ccc; padding: 0.4rem 0.5rem; }
  .emergency-table thead { background: #eee; }
}

/* === Tablettenauswertung SSO Button === */
.auswertung-bar {
  padding: 0.5rem 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.btn-auswertung {
  background: #4f46e5;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.btn-auswertung:hover {
  background: #4338ca;
}

/* === Worktime page === */
.worktime-page { max-width: 1100px; margin: 0 auto; }
.worktime-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.worktime-header h1 { margin: 0; font-size: 1.75rem; }
.worktime-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.btn-vacation {
  background: #dbeafe; color: #1e40af;
  border: 1px solid #93c5fd;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem;
  font-weight: 500;
}
.btn-vacation:hover { background: #bfdbfe; }
.week-nav {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-card-bg);
  padding: 0.4rem; border-radius: 0.625rem;
  box-shadow: var(--shadow);
}
.week-nav-today {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-right: 0.25rem;
}
.week-nav-today.is-current {
  pointer-events: none;
  opacity: 0.55;
}
.week-nav-today-icon { font-size: 1rem; line-height: 1; }
.week-nav-arrow {
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.week-range {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 0 0.75rem; min-width: 12rem;
}
.week-range .week-kw {
  font-weight: 600; color: var(--color-text);
  font-size: 0.95rem; letter-spacing: 0.02em;
}
.week-range .week-dates {
  font-size: 0.82rem; color: var(--color-text-muted);
  margin-top: 0.1rem;
}
@media (max-width: 640px) {
  .week-nav { flex-wrap: wrap; justify-content: center; }
  .week-range { min-width: auto; }
}

.saldo-card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-left: 4px solid var(--color-gray);
}
.saldo-card.saldo-positive { border-left-color: #10b981; }
.saldo-card.saldo-negative { border-left-color: var(--color-danger); }
.saldo-row { display: flex; flex-direction: column; gap: 0.25rem; }
.saldo-label { color: var(--color-text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.saldo-value { font-size: 1.5rem; font-weight: 600; }
.saldo-result .saldo-value { color: var(--color-primary); }
.saldo-card.saldo-positive .saldo-result .saldo-value { color: #10b981; }
.saldo-card.saldo-negative .saldo-result .saldo-value { color: var(--color-danger); }

.worktime-days { display: flex; flex-direction: column; gap: 1rem; }
.worktime-day {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-left: 4px solid transparent;
  transition: border-color 0.2s;
}
.worktime-day.fully-booked { border-left-color: #16a34a; }
.worktime-day.fully-booked .day-total::after {
  content: " ✓"; color: #16a34a; font-weight: 600;
}
.worktime-day.is-vacation {
  border-left-color: #60a5fa;
  background: #eff6ff;
}
.worktime-day.is-vacation .day-header {
  background:
    linear-gradient(to right, #dbeafe var(--booked-pct, 0%), transparent var(--booked-pct, 0%)),
    #e0eaff;
}
.day-stat-vacation {
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.85);
}
.worktime-day.is-holiday {
  border-left-color: #d97706;
  background: #fef3c7;
}
.worktime-day.is-holiday .day-header {
  background:
    linear-gradient(to right, #fde68a var(--booked-pct, 0%), transparent var(--booked-pct, 0%)),
    #fef3c7;
}
.day-stat-holiday {
  color: #92400e;
  background: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.day-header {
  --booked-pct: 0%;
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  background:
    linear-gradient(to right, #dcfce7 var(--booked-pct), transparent var(--booked-pct)),
    var(--color-gray-light);
  font-weight: 500;
  transition: background 0.4s ease;
  gap: 0.75rem;
}
.day-header-left, .day-header-right {
  display: inline-flex; align-items: center; gap: 0.75rem;
  position: relative; z-index: 1;
}
.day-stat {
  font-size: 0.82rem; font-weight: 500;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}
.day-stat-booked  { color: #15803d; }
.day-stat-remaining { color: var(--color-text-muted); }
.day-total { color: var(--color-text-muted); position: relative; z-index: 1; }
.day-empty { padding: 0.75rem 1rem; color: var(--color-text-muted); font-style: italic; }

/* Slash-Separator zwischen Day-Header-Pills (Feiertag / Abwesenheit etc.) */
.day-stat-sep {
  color: #999;
  font-size: 0.85em;
  margin: 0 0.1rem;
  user-select: none;
}

/* Absence-Pille: einheitlicher Stil analog .day-stat-vacation (transparenter
   weißer Hintergrund + kräftige Text-Farbe). Pro Kind nur die Akzentfarbe. */
.day-stat-absence {
  background: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.day-stat-absence-urlaub        { color: #1d4ed8; }  /* Blau */
.day-stat-absence-krank         { color: #dc2626; }  /* Rot */
.day-stat-absence-kind_krank    { color: #b91c1c; }  /* Dunkelrot (2.6.0) */
.day-stat-absence-dienstreise   { color: #0369a1; }  /* Petrol-Blau */
.day-stat-absence-fortbildung   { color: #7c3aed; }  /* Lila */
.day-stat-absence-berufsschule  { color: #0891b2; }  /* Cyan */
.day-stat-absence-mutterschaft,
.day-stat-absence-vaterschaft   { color: #16a34a; }  /* Grün */
.day-stat-absence-gleitzeit     { color: #d97706; }  /* Bernstein */
.day-stat-absence-homeoffice    { color: #0d9488; }  /* Türkis */

/* Virtuelle Session-Zeile für Auto-h Abwesenheitstage */
.session-table tr.absence-virtual-row td {
  background: rgba(0, 0, 0, 0.025);
  font-style: italic;
}
.session-table tr.absence-virtual-row .absence-override-comment {
  font-size: 0.85em;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  font-style: normal;
}

/* Absence-Day-Override Edit-Modal — kompakte Form analog #edit-modal aus v1.0.1 */
#absence-edit-modal .ae-meta {
  font-size: 0.95em;
  color: var(--color-text);
  margin-bottom: 1rem;
}
#absence-edit-modal .ae-default-hint {
  color: var(--color-text-muted);
  font-size: 0.85em;
  margin-top: 0.25rem;
}
#absence-edit-modal .ae-form {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 2fr;
}
#absence-edit-modal .ae-field {
  display: flex; flex-direction: column; gap: 0.25rem;
}
#absence-edit-modal .ae-field span {
  font-size: 0.85rem; color: var(--color-text-muted);
}
#absence-edit-modal .ae-field input {
  padding: 0.45rem 0.625rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.375rem; font: inherit; width: 100%; box-sizing: border-box;
}
#absence-edit-modal #ae-error,
#absence-edit-modal .modal-actions {
  grid-column: 1 / -1;
}
@media (max-width: 480px) {
  #absence-edit-modal .ae-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .day-header { flex-wrap: wrap; gap: 0.4rem; }
  .day-header-left, .day-header-right { gap: 0.4rem; flex-wrap: wrap; }
}

.session-table { width: 100%; border-collapse: collapse; }
.session-table th, .session-table td {
  padding: 0.5rem 1rem; text-align: left; border-bottom: 1px solid var(--color-gray-border);
  font-size: 0.9rem;
}
.session-table th { font-weight: 500; color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; }
.session-table tr.edited td { background: #fef9c3; }
.edited-mark { color: var(--color-text-muted); margin-left: 0.5rem; }

/* Paket C / P4: editierbare Tagespause-Zeile (dezent abgesetzt) */
.session-table tr.break-row td {
  background: rgba(0, 0, 0, 0.025);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.session-table tr.break-row .cell-duration { font-variant-numeric: tabular-nums; }

/* Paket C / P3: "Zeit nachtragen"-Button unter dem Tag */
.day-footer {
  padding: 0.5rem 1rem;
  text-align: right;
  border-top: 1px solid var(--color-gray-border);
}

/* Audit-Trail: ursprüngliche Zeit, festgeschrieben */
.session-table tr.session-history-row td {
  background: #fff4dc;
  border-top: none;
  padding-top: 0.25rem;
  padding-bottom: 0.4rem;
  font-size: 0.85rem;
}
.session-table tr.session-history-row .cell-history-time {
  color: #c33;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.history-label {
  color: #b54;
  font-style: italic;
  font-size: 0.8rem;
}

.btn-small { padding: 0.25rem 0.625rem; font-size: 0.8rem; }
.edit-row td { background: #f9fafb; padding: 1rem; }
.edit-form {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.5rem 1rem; align-items: end;
}
.edit-form label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--color-text-muted); }
.edit-form label.full { grid-column: 1 / span 2; }
.edit-form input { padding: 0.4rem 0.625rem; border: 1px solid var(--color-gray-border); border-radius: 0.375rem; font: inherit; }

.error-page { text-align: center; padding: 3rem 1rem; }
.error-page h1 { color: var(--color-danger); }

/* === Booking pills + project-share === */
.booking-pills { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.booking-pill {
  display: inline-block; font-size: 0.75rem;
  background: var(--color-gray-light); color: var(--color-text);
  padding: 0.125rem 0.5rem; border-radius: 999px;
}
.actions { white-space: nowrap; }
.actions .btn-small { margin-right: 0.25rem; }

/* v1.7.0: „Meine Zeiten" mobil (Portrait ~360px) — Ansatz B der Spec 2026-07-14:
   kompakte Tabelle statt abgeschnittener Buttons. table-layout: fixed deckelt die
   Spaltenbreiten; Inhalte (Kommentar, Buchungs-Pills, Standort) brechen um, statt
   die Aktions-Spalte aus dem Viewport zu drücken. Wirkt auf alle 4 Zeilentypen.
   Bewusst KEIN horizontales Scrollen (UX-Falle). */
@media (max-width: 600px) {
  .session-table { table-layout: fixed; }
  .session-table th, .session-table td {
    padding: 0.35rem 0.25rem; font-size: 0.8rem; overflow-wrap: break-word;
  }
  .session-table th { font-size: 0.65rem; }
  .session-table th:nth-child(1) { width: 2.9rem; }  /* Start */
  .session-table th:nth-child(2) { width: 2.9rem; }  /* Ende */
  .session-table th:nth-child(3) { width: 3.4rem; }  /* Dauer */
  .session-table th:nth-child(4) { width: 3.4rem; }  /* Standort */
  /* Kommentar (Spalte 5) bekommt den Rest */
  .session-table th:nth-child(6) { width: 5rem; }    /* Aktionen */
  .session-table .actions { white-space: normal; }
  .session-table .actions .btn-small {
    display: block; margin: 0 0 0.25rem 0;
    padding: 0.25rem 0.4rem; font-size: 0.75rem;
  }
  .session-table .actions .btn-small:last-child { margin-bottom: 0; }
  .booking-pill { white-space: normal; }
  .day-footer { padding: 0.5rem; }
}

.project-share-card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--color-gray);
}
.project-share-card.share-ok { border-left-color: #10b981; }
.project-share-card.share-low { border-left-color: var(--color-gray); }
.share-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.share-label { font-weight: 500; }
.share-target { color: var(--color-text-muted); font-size: 0.875rem; }
.project-share-card.share-ok .share-target::after {
  content: ' ✓';
  color: #10b981;
  font-weight: 700;
  margin-left: 0.15rem;
}
.share-bar {
  position: relative; height: 1.5rem;
  background: var(--color-gray-light); border-radius: 999px; overflow: hidden;
}
.share-fill {
  height: 100%; background: var(--color-primary);
  transition: width 0.3s ease;
}
.project-share-card.share-ok .share-fill { background: #10b981; }
.share-pct {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 600; color: var(--color-text); font-size: 0.875rem;
  text-shadow: 0 0 2px var(--color-white);
}

/* === Modal === */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
}
.modal[hidden] { display: none !important; }
.modal-content {
  position: relative;
  background: var(--color-card-bg); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  padding: 1.5rem;
  width: min(1100px, calc(100vw - 2rem));
  max-height: 90vh; overflow-y: auto;
  box-sizing: border-box;
}
.modal-content.modal-edit { width: min(640px, calc(100vw - 2rem)); }
.modal-content h2 { margin: 0 0 1rem; }

/* Modal-X-Button: oben rechts in der Ecke des Modal-Contents (scrollt mit
   beim Runterscrollen — Schließen-Button unten ist Backup). */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0;
  z-index: 10;
}
.modal-close:hover { color: var(--color-text); background: var(--color-bg); }
.modal-summary {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1rem;
  padding: 0.75rem 1rem; background: var(--color-gray-light); border-radius: var(--radius);
}
.modal-controls { margin-bottom: 0.75rem; display: flex; gap: 1rem; }

.bm-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.5fr) auto;
  gap: 0.5rem; margin-bottom: 0.5rem; align-items: center;
}
.bm-row > * { min-width: 0; }
.bm-row select, .bm-row input[type="text"], .bm-row input[type="number"] {
  padding: 0.4rem 0.625rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.375rem; font: inherit; width: 100%; box-sizing: border-box;
}

/* Stunden-/Minuten-Eingabe mit Suffix */
.hm-input { display: flex; gap: 0.4rem; align-items: stretch; }
.hm-field {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-gray-border); border-radius: 0.375rem;
  background: #fff; overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.2s;
}
.hm-field:focus-within {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.hm-field input[type="number"] {
  width: 3.25rem; border: 0 !important; padding: 0.4rem 0.4rem 0.4rem 0.55rem !important;
  text-align: right; background: transparent; outline: none;
}
.hm-field input::-webkit-outer-spin-button,
.hm-field input::-webkit-inner-spin-button { opacity: 1; }
.hm-suffix {
  padding: 0 0.55rem 0 0.15rem; color: var(--color-text-muted);
  font-size: 0.85rem; user-select: none; pointer-events: none;
}

/* Live-Limit: kurzer roter Blink */
@keyframes hmFlash {
  0%   { background: #fee2e2; border-color: #ef4444; }
  100% { background: #fff;    border-color: var(--color-gray-border); }
}
.hm-field.hm-flash {
  animation: hmFlash 0.45s ease-out;
}

/* Paket G: fehlende Projektwahl beim Buchen hervorheben */
@keyframes bmSelectFlash {
  0%   { background: #fee2e2; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.30); }
  100% { background: #fff;    border-color: var(--color-gray-border); box-shadow: none; }
}
.bm-project-select.bm-flash {
  animation: bmSelectFlash 0.9s ease-out;
}

/* Generisches Pflichtfeld-Feedback (rot aufblinken) — wiederverwendbar systemweit */
@keyframes fieldFlash {
  0%   { background: #fee2e2; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
  100% { background: #fff;    border-color: var(--color-gray-border); box-shadow: none; }
}
.field-flash { animation: fieldFlash 0.6s ease-out; }

@media (max-width: 640px) {
  .modal-content { padding: 1rem; }
  .bm-row {
    grid-template-columns: 1fr;
    padding: 0.5rem; border: 1px solid var(--color-gray-border);
    border-radius: 0.5rem; background: var(--color-gray-light);
  }
  .hm-input { width: 100%; }
  .hm-input input { flex: 1; width: auto; }
  .bm-remove { justify-self: end; }
}

.modal-projects { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-gray-border); }
.modal-projects h3 { font-size: 0.95rem; color: var(--color-text-muted); margin: 0 0 0.5rem; }
.project-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.project-row .project-info { display: flex; flex-direction: column; line-height: 1.25; }
.project-row .project-desc { font-size: 0.8em; color: var(--color-gray); margin-top: 1px; }
.star-btn {
  background: none; border: none; cursor: pointer; font-size: 1.1rem;
  color: var(--color-gray); padding: 0; width: 1.5rem;
}
.star-btn.fav { color: #f59e0b; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--color-gray-border);
}

/* === Edit-Modal === */
.modal-edit .edit-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.modal-edit .edit-field { display: flex; flex-direction: column; gap: 0.25rem; }
.modal-edit .edit-field span { font-size: 0.85rem; color: var(--color-text-muted); }
.modal-edit .edit-field.full { grid-column: 1 / -1; }
.modal-edit .edit-field input {
  padding: 0.45rem 0.625rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.375rem; font: inherit; width: 100%; box-sizing: border-box;
}
.modal-edit .edit-time {
  display: flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--color-gray-border); border-radius: 0.5rem;
  padding: 0.4rem 0.6rem 0.6rem; margin: 0;
}
.modal-edit .edit-time legend {
  font-size: 0.85rem; color: var(--color-text-muted); padding: 0 0.25rem;
}
@media (max-width: 640px) {
  .modal-edit .edit-grid { grid-template-columns: 1fr 1fr; }
  .modal-edit .edit-field:first-child { grid-column: 1 / -1; }
}

/* === Admin tables === */
.admin-page { max-width: 1100px; margin: 0 auto; }
/* v1.7.0: Userverwaltung hat 10 Spalten — breiterer Container, damit sie auf großen
   Monitoren ganz sichtbar ist. 1700 → 1880 (2026-08-17): bei 1700 blieb die Tabelle
   1668px breit und quetschte Rolle/Vorgesetzter/E-Mail unlesbar zusammen. Unter dieser
   Breite ist horizontales Scrollen über .table-scroll jetzt der GEWOLLTE Weg — die
   Spalten haben Untergrenzen (siehe .admin-table--users weiter unten) und quetschen
   nicht mehr. */
.admin-page--wide { max-width: 1880px; }
/* v1.7.0: Der äußere Seiten-Container (main.container, 1200px) deckelt sonst die
   breite Userverwaltung — für Seiten mit .admin-page--wide mitwachsen lassen.
   Browser ohne :has()-Support fallen aufs bisherige Verhalten zurück (table-scroll). */
main.container:has(.admin-page--wide) { max-width: 1880px; }
.admin-page h1 { margin-bottom: 1rem; }
.new-project { margin-bottom: 1.5rem; background: var(--color-card-bg); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); }
.new-project summary { cursor: pointer; font-weight: 500; padding: 0.25rem 0; }
.project-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: end; margin-top: 0.75rem; }
.project-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--color-text-muted); }
.project-form label.full { grid-column: 1 / -1; }
.project-form input { padding: 0.5rem 0.75rem; border: 1px solid var(--color-gray-border); border-radius: 0.375rem; font: inherit; }

.section-heading {
  margin: 1.75rem 0 0.5rem; font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem; color: var(--color-text);
}
.section-heading.section-archived { color: var(--color-text-muted); }
.section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  background: var(--color-gray-light); color: var(--color-text-muted);
  border-radius: 999px; font-size: 0.8rem; font-weight: 500;
}
.section-empty { color: var(--color-text-muted); font-style: italic; margin: 0.25rem 0 0.5rem; }

/* Paket G Phase 4 Responsive: breite Datentabellen auf schmalen Screens horizontal
   scrollbar machen, ohne das table-Layout zu brechen. Bei breiten Screens unsichtbar. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Userverwaltung (Owner-Blick 23.09.): die Tabelle braucht rund 1750 px. Auf einem Full-HD-
   Bildschirm mit 125 % Skalierung bleiben 1536 px -- es fehlten 262 px, und die waagerechte
   Scrollleiste stand am Tabellenende, 2200 px tiefer; die Spalte "Aktiv" war nicht zu finden.
   Der Kasten passt zwischen die klebende Navbar (105 px) und die klebende Speicherleiste
   (.admin-save-bar, 62 px; gemessen bei 1536 und 1920 px): die Leiste steht immer im Blick,
   und die Spaltenkoepfe bleiben beim Scrollen stehen. overflow: visible an der Tabelle, weil
   ihr overflow: hidden (unten) sonst selbst der Bezug fuer sticky waere. */
.table-scroll--users { max-height: calc(100vh - 12rem); overflow: auto; }
.table-scroll--users .admin-table { overflow: visible; }
.table-scroll--users thead th { position: sticky; top: 0; z-index: 2; }

.admin-table { width: 100%; background: var(--color-card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-gray-border); vertical-align: middle; }
.admin-table th { background: var(--color-gray-light); font-weight: 500; font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; }
.admin-table tr.archived td { opacity: 0.6; }
/* v1.7.0: Beschreibung in der Projektübersicht — einzeilig gekürzt, voller Text als Tooltip */
.desc-cell { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-table input[type="text"], .admin-table input[type="number"], .admin-table input[type="email"], .admin-table select { padding: 0.35rem 0.5rem; border: 1px solid var(--color-gray-border); border-radius: 0.25rem; font: inherit; width: 100%; }
.row-form { display: contents; }

/* Untergrenzen für die Userverwaltung. Die zehn Spalten quetschten sich vorher in den
   verfügbaren Platz statt zu scrollen — Rolle, Vorgesetzter und E-Mail waren dadurch in
   allen 20 Zeilen abgeschnitten, auch auf großen Monitoren. Eine min-width auf der
   Tabelle allein reicht nachweislich NICHT: die Felder haben width:100% (Regel weiter
   oben), damit meldet das Auto-Layout der Tabelle für diese Spalten keine Inhaltsbreite
   und verteilt den Zusatzplatz an Name und Login — gemessen blieben 20/20 Vorgesetzter
   zu schmal. Darum die Untergrenze an den Feldern selbst; die Tabelle wächst dadurch von
   allein auf die nötige Breite, .table-scroll fängt den Rest.
   Werte = gemessener Textbedarf + Innenabstand + Dropdown-Pfeil, aufgerundet:
   Rolle 123 (längste OPTION "Vorgesetzter", nicht nur die gewählte — jede Rolle muss
   nach dem Umstellen lesbar bleiben), Vorgesetzter 196 ("— nicht zugeordnet —"),
   E-Mail 313 ("christiane.kruschwitz@laxxonmedical.com"). */
.admin-table--users select[data-field="role"] { min-width: 130px; }
.admin-table--users select[data-field="supervisor_selection"] { min-width: 200px; }
.admin-table--users .admin-email-input { min-width: 320px; }

/* Anzeigegeräte-Tafel (Wandmonitor), 2026-09-03. Die Zeile eines stillen Geräts muss
   sich beim Überfliegen der Seite von selbst melden — die Tafel wird nicht gesucht,
   sondern beiläufig gesehen. Deshalb der farbige Balken links und nicht nur ein
   Wort im Text. Der gedämpfte Hinweis darunter trägt die Deutung. */
.admin-table--anzeige { max-width: 720px; }
.admin-table--anzeige tr.anzeige-still { background: #fef2f2; }
.admin-table--anzeige tr.anzeige-still td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.admin-table--anzeige tr.anzeige-still td { color: var(--color-danger); }
.admin-table--anzeige tr.anzeige-still small { color: var(--color-text-muted); }

/* Stichtag-Dialog: Rangfolge im Textblock unter dem Datumsfeld. Die Vorschau-Zahlen
   (Saldo-Verschiebung, betroffene Abwesenheitstage) sind das, wofuer der Dialog
   existiert — sie muessen vor dem Erklaertext gelesen werden. Ohne diese beiden Regeln
   erben beide Zeilen .modal-edit .edit-field span (0.85rem, gedaempft) und sehen
   gleichrangig aus; der laengere Hinweistext dominiert dann optisch die Zahlen. */
.modal-edit .edit-field .tc-zahlen {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 0.35rem;
}
.modal-edit .edit-field .tc-hinweis {
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Soll/Tag Mo–Fr. Lag vorher im <style> der View mit width:48px — wirkungslos, weil die
   Regel weiter oben (.admin-table input[type="number"], Spezifität 0,2,1) mit width:100%
   gewinnt. Die Felder schrumpften dadurch mit dem Fenster: gemessen 53px bei 1920,
   34,6px bei 1440, 21,3px bei 768 — ab 1440 abwärts war selbst ein einstelliger Wert
   abgeschnitten. Darum hier, mit gleicher Spezifität und später im File, eine feste
   Breite, die nicht mitschrumpft. Der Selektor MUSS input.daily-target-input bleiben;
   .daily-target-input allein verliert den Vergleich wieder. */
.daily-target-grid { display: flex; gap: 4px; align-items: flex-end; }
.daily-target-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.admin-table input.daily-target-input {
  flex: 0 0 auto; width: 3.25rem; padding: 0.35rem 0.25rem; text-align: center;
}
/* Spinner-Pfeile aus. Sie kosten Textbreite, und zwar je nach Browser unterschiedlich
   viel (Chrome blendet sie bis zum Hovern aus, Firefox/Safari zeigen sie dauerhaft) —
   daher sah dieselbe Tabelle auf verschiedenen Geräten verschieden kaputt aus. Ohne
   sie ist die nutzbare Textbreite überall gleich. Pfeiltasten/Mausrad bleiben. */
.daily-target-input::-webkit-outer-spin-button,
.daily-target-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.daily-target-input { -moz-appearance: textfield; appearance: textfield; }
.daily-target-sum { font-size: 11px; margin-left: 6px; white-space: nowrap; }
.daily-target-sum.is-bad { color: #c0392b; font-weight: 600; }
.daily-target-sum.is-ok { color: #27ae60; }

/* v1.7.0: Monatsende-Erinnerung (Admin-Card, Userverwaltung) */
.reminder-card {
  background: var(--color-card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.25rem; margin-top: 0.5rem;
}
.reminder-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.reminder-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--color-text-muted); }
.reminder-form .reminder-toggle { flex-direction: row; align-items: center; gap: 0.4rem; }
.reminder-form input[type="number"] { width: 80px; padding: 0.4rem 0.6rem; border: 1px solid var(--color-gray-border); border-radius: 0.375rem; font: inherit; }
.reminder-last { margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); }

/* === Zeitübersicht === */
.overview-page { max-width: 1200px; margin: 0 auto; }
.overview-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.overview-header h1 { margin: 0; }

.overview-filter {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end;
  background: var(--color-card-bg); padding: 0.75rem 1rem;
  border-radius: 0.625rem; box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}
.overview-filter .filter-field {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.overview-filter .filter-field span {
  font-size: 0.78rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.overview-filter input, .overview-filter select {
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.375rem; font: inherit; background: #fff;
}

.overview-user-card {
  background: var(--color-card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.overview-user-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--color-gray-border);
  padding-bottom: 0.5rem; margin-bottom: 0.75rem;
}
.overview-user-head h2 { margin: 0; font-size: 1.1rem; }
.overview-user-meta { color: var(--color-text-muted); font-size: 0.85rem; }

.overview-table { width: 100%; border-collapse: collapse; }
.overview-table th, .overview-table td {
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--color-gray-border);
  text-align: left; vertical-align: middle;
}
.overview-table th {
  background: var(--color-gray-light); font-weight: 500;
  font-size: 0.78rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.overview-table td.num, .overview-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Kontostand-Spalte: die Zahl, nach der gefragt wird, traegt mehr Gewicht als der
   Zeitraum-Beitrag daneben. 600 ist im Blatt die uebliche Betonung. */
.overview-table td.strong { font-weight: 600; }
.overview-table small { color: var(--color-text-muted); font-size: 0.75rem; }
.overview-table .pos { color: #15803d; font-weight: 500; }
.overview-table .neg { color: #b91c1c; font-weight: 500; }
.overview-table tr.overview-total td {
  background: var(--color-gray-light); font-weight: 600;
  border-top: 2px solid var(--color-gray-border);
}

.entry-tabs {
  display: flex; gap: 0.25rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-border);
}
.entry-tab {
  background: none; border: none; padding: 0.5rem 0.85rem;
  cursor: pointer; font: inherit; color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.entry-tab.is-active {
  color: var(--color-text); border-bottom-color: var(--color-primary, #2563eb);
  font-weight: 500;
}
.entry-pane { display: none; margin-top: 0.75rem; }
.entry-pane.is-active { display: block; }
.entry-hint {
  font-size: 0.85rem; color: var(--color-text-muted);
  background: var(--color-gray-light); padding: 0.5rem 0.75rem;
  border-radius: 0.375rem; margin: 0;
}

/* === Vacation-Modal === */
.modal-content.modal-vacation { width: min(820px, calc(100vw - 2rem)); }

.vac-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.vac-summary-card {
  background: var(--color-gray-light); border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.vac-summary-label {
  font-size: 0.78rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.vac-summary-value {
  font-size: 1.25rem; font-weight: 600; color: var(--color-text);
}
.vac-summary-value small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.vac-saldo-pos { color: #15803d; }
.vac-saldo-neg { color: #b91c1c; }

.vac-form-wrap {
  border: 1px solid var(--color-gray-border); border-radius: 0.625rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.vac-form-wrap > summary {
  cursor: pointer; font-weight: 500; padding: 0.25rem 0;
  list-style: revert;
}
.vac-form {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.75rem;
}
.vac-form .edit-field { display: flex; flex-direction: column; gap: 0.25rem; }
.vac-form .edit-field span { font-size: 0.85rem; color: var(--color-text-muted); }
.vac-form .edit-field input,
.vac-form .edit-field select {
  padding: 0.45rem 0.625rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.375rem; font: inherit; width: 100%; box-sizing: border-box;
  background-color: #fff; color: inherit;
}
.vac-form .edit-field input:focus,
.vac-form .edit-field select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Modernes Dropdown: nativen Pfeil ersetzen, gleiche Höhe/Optik wie die Inputs */
.vac-form .edit-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem;
}
/* Oberer 2×2-Block: Art|Start / Tage|Ende (alle gleiche Größe). Das Tage-Feld
   bleibt immer sichtbar; bei Arten ohne Tage-Verrechnung wird es ausgegraut. */
.vac-form .abs-kind-field  { grid-column: 1; grid-row: 1; }
.vac-form .abs-start-field { grid-column: 2; grid-row: 1; }
.vac-form #abs-days-field  { grid-column: 1; grid-row: 2; }
.vac-form .abs-end-field   { grid-column: 2; grid-row: 2; }
/* Ausgegrautes (nicht editierbares) Tage-Feld bei krank/Dienstreise/etc. */
.vac-form .edit-field input:disabled {
  background: var(--color-gray-light); color: var(--color-text-muted); cursor: not-allowed;
}
.vac-form .edit-field.is-disabled > span { color: var(--color-text-muted); opacity: 0.75; }
/* Datei-Auswahl: moderner Button statt Browser-Default */
.vac-form .edit-field input[type="file"] { padding: 0.3rem 0.45rem; cursor: pointer; }
.vac-form .edit-field input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.85rem; font-weight: 600;
  margin-right: 0.7rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-gray-border); border-radius: 0.375rem;
  background: var(--color-gray-light); color: var(--color-text); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vac-form .edit-field input[type="file"]::file-selector-button:hover {
  background: #e9edf3; border-color: #c5ccd6;
}
.vac-form .edit-field.full { grid-column: 1 / -1; }
.vac-form-meta {
  grid-column: 1 / -1; font-size: 0.85rem; color: var(--color-text-muted);
  background: var(--color-gray-light); padding: 0.45rem 0.7rem;
  border-radius: 0.375rem;
}
.vac-form-actions {
  grid-column: 1 / -1; display: flex; justify-content: flex-end;
}

.vac-list-heading {
  margin: 1rem 0 0.5rem; font-size: 1rem; color: var(--color-text-muted);
}
.vac-list { display: flex; flex-direction: column; gap: 0.5rem; }
.vac-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  background: var(--color-card-bg); border: 1px solid var(--color-gray-border);
  border-radius: 0.5rem; padding: 0.6rem 0.85rem; column-gap: 0.85rem;
}
/* Text-Block wächst -> Storno-Button steht in jeder Card an gleicher Stelle (rechts). */
.vac-item-main { flex: 1 1 auto; min-width: 0; }
.vac-item > .abs-delete { flex: 0 0 auto; white-space: nowrap; }
/* Dokumenten-Liste auf eigene Zeile, damit der Button rechts ausgerichtet bleibt. */
.vac-item > .abs-doc-list { flex-basis: 100%; }
.vac-item-range { font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; row-gap: 0.25rem; }
.vac-item-meta { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.vac-comment { font-style: italic; }

@media (max-width: 640px) {
  .vac-summary { grid-template-columns: 1fr; }
  .vac-form { grid-template-columns: 1fr; }
  .vac-form .abs-kind-field,
  .vac-form .abs-start-field,
  .vac-form .abs-end-field,
  .vac-form #abs-days-field { grid-column: auto; grid-row: auto; }
  .vac-item { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .vac-item > .abs-doc-list { flex-basis: auto; }
}

/* ----- Abwesenheits-System (Teilprojekt A) ----- */

/* Status-Badges in der Eintragsliste im Modal */
.abs-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 0.5em;
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 0.4em;
}
.abs-pending      { background: #fff3cd; color: #7d5e00; }
.abs-approved     { background: #d1e7dd; color: #0f5132; }
.abs-not-required { background: #e9ecef; color: #495057; }
.abs-rejected     { background: #f8d7da; color: #842029; cursor: help; }
.abs-cancelled    { background: #9ca3af; color: #fff; }

/* Paket H: storniert/gelöscht — abgesetzt, durchgestrichen, Grund kursiv */
.abs-item-cancelled .vac-item-range { text-decoration: line-through; opacity: 0.7; }
.abs-cancel-reason { font-style: italic; font-size: 0.875em; color: var(--color-text-muted); }

/* Abwesenheits-Modal Helfer */
.abs-pending-hint {
  display: block;
  font-size: 0.8em;
  color: #6c757d;
  margin-top: 0.2em;
}
.abs-days-hint { font-weight: 400; color: #6c757d; font-size: 0.85em; }

/* Anträge-Pille im Header */
.nav-link-antraege.has-pending {
  background: #dc3545;
  color: white;
  border-radius: 1em;
  padding: 0.25em 0.7em;
}
.nav-link-antraege.no-pending {
  background: #198754;
  color: white;
  border-radius: 1em;
  padding: 0.25em 0.7em;
}

/* Anträge-Seite */
.antrag-actions { white-space: nowrap; }
.antrag-actions .btn-small { margin-right: 0.3rem; }
.antrag-eigen { color: var(--color-text-muted, #666); font-size: 0.9em; white-space: normal; }
.btn-success { background: #198754; color: white; border-color: #198754; }
.btn-success:hover { background: #157347; }

/* ============================================================ */
/* Team-Kalender                                                 */
/* ============================================================ */

.btn-calendar {
  background: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-calendar:hover { background: var(--color-bg); }

/* Modal-Größe analog Buchungs-Modal (Standard) */
/* Task 13: flex-Spalte, kein Außen-Scroll, Schließen immer sichtbar */
/* Mail-Punkt 1 (05.10.): das Fenster nutzt die Bildschirmfläche — feste Höhe statt nur Obergrenze, damit
   Team-Übersicht und Monatsraster den Platz bekommen. Die einzige Größenregel des Kalenders steht hier; die
   frühere zweite (max-width 960px) deckelte diese still. */
.modal-content.modal-calendar{width:min(1800px, calc(100vw - 2rem));display:flex;flex-direction:column;height:92vh;max-height:92vh;overflow:hidden}
.modal-calendar>h2,.modal-calendar>.cal-tabs{flex:0 0 auto}
.modal-calendar .cal-tab-panel{min-height:0;overflow-y:auto;flex:1}
#cal-tab-team:not([hidden]){display:flex;flex-direction:column;min-height:0;overflow:hidden}
#cal-tab-team .tl-head{flex:0 0 auto}
#cal-tab-team .tl{flex:1;min-height:0}
.modal-calendar .modal-actions{flex:0 0 auto}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.cal-nav-arrow { padding: 0.25rem 0.6rem; }
.cal-month-label {
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 9.5rem;
  text-align: center;
}
.cal-toggle { display: inline-flex; align-items: center; gap: 0.4rem; user-select: none; }

.cal-grid-wrap { display: flex; flex-direction: column; gap: 4px; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(78px, auto);
  gap: 4px;
}
.cal-grid.is-loading { opacity: 0.5; pointer-events: none; }

/* Tageszelle */
.cal-day {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 6px;
  background: var(--color-card-bg);
  min-height: 78px;
  font-size: 0.78rem;
  overflow: hidden;
}
.cal-day .cal-date {
  font-weight: 600;
  font-size: 0.85rem;
}
.cal-day .cal-kind-label {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cal-kind-text, var(--color-text));
  vertical-align: baseline;
}
.cal-day.is-padding .cal-kind-label { display: none !important; }
.cal-day .cal-status {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.95rem;
}
.cal-day .cal-badge {
  position: absolute;
  bottom: 4px;
  right: 6px;
  background: var(--color-text);
  color: var(--color-card-bg);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  display: none;
}
#calendar-modal.show-others .cal-day .cal-badge.has-colleagues { display: inline-block; }

/* Wochenende: leicht abgesetzt */
.cal-day.is-weekend { background: var(--color-bg); }

/* Heute: Akzent-Border */
.cal-day.is-today { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Padding-Tage (Vor-/Folgemonat): nur Datumszahl, kein Inhalt */
.cal-day.is-padding .cal-date { opacity: 0.4; }
.cal-day.is-padding .cal-status,
.cal-day.is-padding .cal-badge,
.cal-day.is-padding .cal-holiday-name { display: none !important; }
.cal-day.is-padding.has-kind { background: var(--color-card-bg) !important; border-left-color: var(--color-border) !important; }

/* Feiertag */
.cal-day.is-holiday {
  background: #fef3c7;
}
.cal-day.is-holiday .cal-date { color: #92400e; }
.cal-day .cal-holiday-name {
  display: block;
  margin-top: 14px;
  font-size: 0.7rem;
  color: #92400e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Wenn eigener Eintrag + Feiertag: Eintrag dominiert, Feiertag nur als Sternchen */
.cal-day.is-holiday.has-kind { background: var(--cal-bg, var(--color-card-bg)); }
.cal-day.is-holiday.has-kind .cal-date { color: inherit; }
.cal-day.is-holiday.has-kind .cal-holiday-name { display: none; }
.cal-day.is-holiday.has-kind::after {
  content: '★';
  position: absolute;
  bottom: 4px;
  left: 6px;
  color: #92400e;
  font-size: 0.85rem;
}

/* Farben pro Art (Hintergrund = ~22% gemischt mit Weiß; Border-Left = Vollfarbe) */
.cal-day.has-kind { border-left-width: 4px; border-left-style: solid; --cal-bg: var(--color-card-bg); background: var(--cal-bg); }
.cal-day.kind-urlaub        { --cal-bg: color-mix(in srgb, #3b82f6 22%, white); --cal-kind-text: #1d4ed8; border-left-color: #3b82f6; }
.cal-day.kind-gleitzeit     { --cal-bg: color-mix(in srgb, #8b5cf6 22%, white); --cal-kind-text: #6d28d9; border-left-color: #8b5cf6; }
.cal-day.kind-krank         { --cal-bg: color-mix(in srgb, #ef4444 22%, white); --cal-kind-text: #b91c1c; border-left-color: #ef4444; }
.cal-day.kind-kind_krank    { --cal-bg: color-mix(in srgb, #b91c1c 22%, white); --cal-kind-text: #7f1d1d; border-left-color: #b91c1c; }
.cal-day.kind-berufsschule  { --cal-bg: color-mix(in srgb, #d97706 22%, white); --cal-kind-text: #92400e; border-left-color: #d97706; }
.cal-day.kind-dienstreise   { --cal-bg: color-mix(in srgb, #0891b2 22%, white); --cal-kind-text: #0e7490; border-left-color: #0891b2; }
.cal-day.kind-homeoffice    { --cal-bg: color-mix(in srgb, #10b981 22%, white); --cal-kind-text: #047857; border-left-color: #10b981; }
.cal-day.kind-fortbildung   { --cal-bg: color-mix(in srgb, #f97316 22%, white); --cal-kind-text: #c2410c; border-left-color: #f97316; }
.cal-day.kind-mutterschaft  { --cal-bg: color-mix(in srgb, #ec4899 22%, white); --cal-kind-text: #be185d; border-left-color: #ec4899; }
.cal-day.kind-vaterschaft   { --cal-bg: color-mix(in srgb, #06b6d4 22%, white); --cal-kind-text: #0e7490; border-left-color: #06b6d4; }

/* Legende */
.cal-legend {
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
}
.cal-legend > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  user-select: none;
}
.cal-legend-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.cal-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
}
.cal-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-leg .dot {
  display: inline-block;
  width: 0.7rem; height: 0.7rem; border-radius: 999px;
}
.cal-leg-urlaub       .dot { background: #3b82f6; }
.cal-leg-gleitzeit    .dot { background: #8b5cf6; }
.cal-leg-krank        .dot { background: #ef4444; }
.cal-leg-kind_krank   .dot { background: #b91c1c; }
.cal-leg-berufsschule .dot { background: #d97706; }
.cal-leg-dienstreise  .dot { background: #0891b2; }
.cal-leg-homeoffice   .dot { background: #10b981; }
.cal-leg-fortbildung  .dot { background: #f97316; }
.cal-leg-mutterschaft .dot { background: #ec4899; }
.cal-leg-vaterschaft  .dot { background: #06b6d4; }
.cal-leg-holiday      .dot { background: #fef3c7; border: 1px solid #d97706; }

.cal-badge-demo {
  background: var(--color-text);
  color: var(--color-card-bg);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 720px) {
  .cal-grid { grid-auto-rows: minmax(64px, auto); }
  .cal-day { font-size: 0.7rem; min-height: 64px; padding: 3px 4px; }
  .cal-day .cal-date { font-size: 0.78rem; }
}
@media (max-width: 480px) {
  .cal-weekdays { font-size: 0.7rem; }
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-toggle { justify-content: flex-end; }
}

.abs-holidays { color: #92400e; font-size: 0.85rem; margin-left: 0.25rem; }

/* Tages-Detail-Modal */
.cal-day.is-clickable { cursor: pointer; }
.cal-day.is-clickable:hover { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.modal-content.modal-cal-day { width: min(480px, calc(100vw - 2rem)); }
.modal-cal-day h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.cal-day-section { margin-bottom: 0.9rem; }
.cal-day-section h4 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-day-section-holiday p { color: #92400e; font-weight: 600; margin: 0; }
.cal-day-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cal-day-list li {
  padding: 0.35rem 0.5rem;
  background: var(--color-bg);
  border-radius: 4px;
  font-size: 0.85rem;
}
.cal-day-empty { color: var(--color-text-muted); font-style: italic; margin: 0.5rem 0; }

/* Past-Date-Hinweise */
.btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #d97706;
}
.btn-warning:hover { background: #d97706; }
.abs-past-warning {
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  flex: 1;
}
.vac-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.abs-badge.abs-retroactive {
  background: #fed7aa;
  color: #9a3412;
  border: 1px solid #f97316;
}

/* --- Teilprojekt D: Admin-Projects-Form --- */
.prebooked-group .prebooked-inputs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.prebooked-group input[type="number"] {
  width: 5rem;
}
.prebooked-cell input[type="number"] {
  width: 4rem;
}
.prebooked-cell {
  white-space: nowrap;
}

/* --- Teilprojekt D: Vorbelastung-Anzeige (Übersicht + Detail) --- */
.hours-booked { color: var(--text-muted, #555); }
.hours-prebooked { color: #b07c00; font-weight: 500; }
.hours-sep { color: var(--text-muted, #888); margin: 0 0.15rem; }

/* --- Teilprojekt D: Project-Detail --- */
.project-detail-page .project-detail-head { margin-bottom: 1rem; }
.project-detail-page .project-detail-head h1 { margin-bottom: 0.25rem; }

.project-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--card-bg, #f5f5f7);
  border-radius: 0.5rem;
}
.range-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #ddd);
  border-radius: 0.5rem;
  overflow: hidden;
}
.range-btn {
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  color: var(--text, #222);
  background: white;
  border-right: 1px solid var(--border, #ddd);
  font-size: 0.92rem;
}
.range-btn:last-child { border-right: none; }
.range-btn.active { background: var(--primary, #2c5fa3); color: white; }
.range-btn:hover:not(.active) { background: #f0f0f3; }

.user-filter select { padding: 0.3rem 0.5rem; }
.toolbar-actions { margin-left: auto; display: inline-flex; gap: 0.5rem; }

.totals-line {
  margin: 0.6rem 0 1rem;
  font-size: 1.1rem;
}

.chart-host {
  width: 100%;
  margin: 0.5rem 0 0.4rem;
  min-height: 180px;
  position: relative;
}

.chart-hint {
  font-size: 0.88rem;
  color: var(--text-muted, #666);
  margin: 0 0 1rem;
}
.chart-hint a { color: var(--primary, #2c5fa3); }

.bucket-section {
  margin-bottom: 1.2rem;
  border: 1px solid var(--border, #e0e0e2);
  border-radius: 0.5rem;
  overflow: hidden;
}
.bucket-section.bucket-prebooked { border-color: #e0c476; background: #fffaef; }
.bucket-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.8rem;
  background: var(--section-header-bg, #f0f0f3);
  font-size: 0.95rem;
}
.bucket-section.bucket-prebooked .bucket-header { background: #faf2dc; }
.bucket-title { font-weight: 600; }
.bucket-sum { color: var(--text-muted, #555); font-variant-numeric: tabular-nums; }
.bucket-table { margin: 0; border-radius: 0; }
.bucket-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bucket-empty {
  padding: 0.6rem 0.8rem;
  margin: 0;
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: 0.92rem;
}

@media (max-width: 700px) {
  .project-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-actions { margin-left: 0; }
}

/* --- Teilprojekt D: Diagramm --- */
.chart-wrap { width: 100%; }
.chart-svg {
  width: 100%;
  height: auto;
  max-height: 280px;
  display: block;
}
.chart-grid {
  stroke: var(--border, #e2e2e5);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.chart-y-label {
  font-size: 11px;
  fill: var(--text-muted, #666);
}
.chart-x-label {
  font-size: 10.5px;
  fill: var(--text-muted, #555);
}
.chart-bar { fill: var(--primary, #2c5fa3); transition: fill 0.15s ease; }
.bar-prebooked .chart-bar { fill: #d6a93b; }
.chart-bar-group:hover .chart-bar { fill-opacity: 0.85; }
.chart-bar-group.active .chart-bar { stroke: #111; stroke-width: 2; }
.chart-bar-group.active.bar-prebooked .chart-bar { stroke: #6f4d00; }

.chart-pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.pager-btn {
  border: 1px solid var(--border, #ccc);
  background: white;
  padding: 0.15rem 0.55rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-info { color: var(--text-muted, #555); }

/* --- Teilprojekt D: Export-Modal-Form-Layout --- */
#export-modal .form-row {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
#export-modal .form-row > label {
  display: flex; flex-direction: column; font-size: 0.92rem;
}
#export-modal .checkbox-row {
  flex-direction: row !important; align-items: center; gap: 0.4rem;
}
.chart-empty { color: var(--text-muted, #777); font-style: italic; padding: 1rem 0; }

/* --- Teilprojekt D: Print-CSS --- */
@media print {
  body { background: white; color: black; font-size: 11pt; }
  .site-header, .site-footer, nav, .back-link,
  .project-toolbar, .chart-hint, .chart-pager,
  #export-modal, .modal { display: none !important; }

  .project-detail-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .project-detail-page::before {
    content: "Stundenauswertung — " attr(data-print-title);
    display: block;
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 0.4rem;
  }

  .totals-line { font-size: 13pt; margin: 0.4rem 0 0.6rem; }
  .chart-host { page-break-inside: avoid; }
  .chart-svg { max-height: 200pt; }

  .bucket-section {
    page-break-inside: avoid;
    border: 1px solid #999;
    margin-bottom: 0.6rem;
  }
  .bucket-header { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
  .bucket-section.bucket-prebooked { background: #fff8e6 !important; }

  .bucket-table { font-size: 10pt; }
  .bucket-table td { padding: 0.2rem 0.4rem; }

  .chart-bar { fill: #2c5fa3 !important; -webkit-print-color-adjust: exact; }
  .bar-prebooked .chart-bar { fill: #d6a93b !important; }
}

/* ----- Teilprojekt F-A: Rejection-Reason inline + Antraege-Sektionen ----- */
.abs-rejection-reason {
  font-style: italic;
  font-size: 0.875em;
  color: var(--color-danger);
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.antraege-section-h { margin-top: 2rem; }
.antraege-section-h-bearbeitet { color: var(--color-text-muted, #666); }
.antraege-section-h small { font-weight: normal; font-size: 0.75em; color: var(--color-text-muted, #666); margin-left: 0.5em; }
.antrag-reason { font-style: italic; color: var(--color-danger); }
.antraege-toggle-line { margin-top: 0.5rem; text-align: right; font-size: 0.875em; }

/* Banner-Pattern (Cluster C: Antrag-Status auf /worktime, Save-Erfolg auf /admin/users) */
.banner-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 4px solid;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.banner-success { border-left-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.banner-error   { border-left-color: #c62828; background: #ffebee; color: #b71c1c; }
.banner-body { flex: 1 1 auto; min-width: 0; }
.banner-reason { font-style: italic; white-space: pre-wrap; }
.banner-close {
  background: none; border: none; cursor: pointer; font-size: 1.5em;
  line-height: 1; color: inherit; opacity: 0.6; padding: 0 0.25rem;
}
.banner-close:hover { opacity: 1; }

/* User-Verwaltung Bulk-Save (Cluster D, Status-Anzeige integriert in F-G2) */
.admin-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 6px;
  position: sticky;
  bottom: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.admin-save-bar.is-dirty   { background: #fff8e1; border-color: #f0c060; }
.admin-save-bar.is-saving  { background: #f5f5f5; border-color: #bbb; color: #666; }
.admin-save-bar.is-success { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.admin-save-bar.is-error   { background: #ffebee; border-color: #c62828; color: #b71c1c; }
.admin-status-info { font-size: 0.9em; color: inherit; }
.admin-save-bar:not(.is-dirty):not(.is-success):not(.is-error):not(.is-saving) .admin-status-info {
  color: var(--color-text-muted, #666);
}
.admin-table tr.row-dirty { background: #fff8e1; }
.admin-table tr.row-error { outline: 2px solid var(--color-danger, #c62828); outline-offset: -2px; }

/* Header-Icons (Cluster F-E11) */
.nav-link .nav-icon { vertical-align: middle; margin-right: 0.4em; }
.nav-link span { vertical-align: middle; }
.nav-dropdown-toggle .nav-icon:last-child { margin-right: 0; margin-left: 0.2em; }

/* Werkzeuge-Dropdown (Cluster F-E10) */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0.5rem 0.75rem;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 0.25rem 0;
  z-index: 100;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.nav-dropdown-item:hover { background: #f5f5f5; }
.nav-dropdown-item .nav-icon { margin-right: 0.5em; }

/* Footer (Cluster F-E12) — sticky am Viewport-Bottom bei wenig Content,
   am echten Page-Ende bei viel Content (klassisches Sticky-Footer-Pattern,
   gesteuert über body als flex-column oben). */
.site-footer {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.875em;
  color: var(--color-text-muted);
  border-top: 1px solid #eee;
  background: #fafafa;
  flex-shrink: 0;
}
.site-footer a { color: inherit; text-decoration: underline; }

/* ----- Paket D: Krankmeldungs-Dokumente ----- */
.abs-doc-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.abs-doc-link {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.8rem; padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-gray-border); border-radius: 999px;
  color: inherit; text-decoration: none; background: var(--color-card-bg);
}
.abs-doc-link:hover { background: #f1f5f9; }
.abs-doc-upload {
  display: inline-flex; align-items: center;
  font-size: 0.8rem; padding: 0.15rem 0.55rem;
  border: 1px dashed var(--color-gray-border); border-radius: 999px;
  color: var(--color-text-muted); cursor: pointer;
}
.abs-doc-upload:hover { border-color: var(--color-text-muted); background: #f9fafb; }
.abs-doc-upload input[type="file"] { display: none; }
/* Krankmeldungs-Tabelle: Dokument-Links mit etwas Abstand */
.overview-table .abs-doc-link { margin: 0 0.3rem 0.3rem 0; }
/* Admin-User-Tabelle: editierbares E-Mail-Feld */
.admin-email-input { margin-top: 0.3rem; font-size: 0.85rem; }
/* Paket I: Mail-Benachrichtigungs-Dropdown (details/summary) */
.mail-notify-dropdown { font-size: 0.85rem; }
.mail-notify-dropdown > summary {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  min-width: 9rem; max-width: 16rem;
  padding: 0.25rem 0.55rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.4rem; background: var(--color-card-bg);
}
.mail-notify-dropdown > summary::after { content: '▾'; color: var(--color-text-muted); }
.mail-notify-dropdown[open] > summary { border-color: var(--color-text-muted); }
.mail-notify-dropdown[data-disabled="1"] > summary { color: var(--color-text-muted); opacity: 0.6; cursor: default; }

/* Task 5: Kalender-Modal Tab-Leiste (Fenstergröße: .modal-content.modal-calendar oben) */
.cal-tabs { display: flex; gap: 4px; border-bottom: 1px solid #eceef3; margin-bottom: 12px; }
.cal-tab { font-size: 13px; padding: 7px 14px; border: none; background: transparent;
  color: #5b6472; border-radius: 8px 8px 0 0; cursor: pointer; }
.cal-tab.active { background: #3b5bdb; color: #fff; }
.cal-tab-panel[hidden] { display: none; }
.mail-notify-group {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin-top: 0.3rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-gray-border); border-radius: 0.4rem; background: var(--color-card-bg);
}
.mail-notify-group label { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mail-notify-group .mail-notify-all { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed var(--color-gray-border); }
/* v2.0 (Hub): Welten-Rechte in der Userverwaltung. Je Welt ein eigenes Formular im
   Aufklapper — sie sollen wie eine Liste von Kaestchen aussehen, nicht wie vier Bloecke,
   deshalb kein eigener Rahmen und kein Abstand ausser dem der Gruppe. */
.mail-notify-group [data-app-access-form] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* Der Aufklapper sitzt in der schmalen Rollen-Spalte. Ohne Mindestbreite quetscht sich
   der Baukasten-Hinweis auf sechs Zeilen a zwei Woertern — gemessen, nicht vermutet.
   Die Breite wirkt nur im OFFENEN Zustand: geschlossen rendert <details> seinen Inhalt
   nicht, die Spalte bleibt also so schmal wie bisher. */
.app-access-welten > .mail-notify-group { min-width: 14rem; }
/* Der Absende-Knopf wird per Skript ausgeblendet (hidden), sobald das Kaestchen selbst
   schicken kann. OHNE diese Zeile bliebe er stehen: .btn setzt display: inline-flex und
   gewinnt gegen das display: none des Browsers fuer [hidden] — dieselbe Falle, die
   .modal[hidden] und .cal-tab-panel[hidden] oben schon einmal stellen mussten. */
[data-app-access-submit][hidden] { display: none; }
/* .app-access-hint ist am 2026-08-21 entfallen: die beiden Vorbehalte, die es trug
   (Baukasten-ALLOWED_USERS, Tabletten-Zutritt), sind eingeloest, und keine View gibt die
   Klasse mehr aus. Der Name lebt nur noch in tests/app-access-admin.test.js weiter, das
   ihre ABWESENHEIT zusichert — wer beim Grep hier landet, sucht also nicht vergebens.
   Kaeme je wieder ein Vorbehalt, braucht er mit der Klasse auch diese Regel zurueck:
   es ist ein Satz und kein Etikett, die Gruppe setzt fuer Labels white-space: nowrap. */
/* Paket G Phase 4: Parkplätze + "Heute auf Dienstreise" zweispaltig. */
.dashboard-secondary { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; }
.dashboard-secondary > section { flex: 1; min-width: 0; margin-top: 0; }
@media (max-width: 768px) { .dashboard-secondary { flex-direction: column; } }
.dienstreise-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.dienstreise-list { list-style: none; margin: 0; padding: 0; }
.dienstreise-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-gray-border); }
.dienstreise-list li:last-child { border-bottom: none; }

.parking-section { margin-top: 2rem; }
.parking-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.parking-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.parking-tile {
  flex: 0 0 auto; min-width: 110px; padding: 0.75rem; border-radius: 8px;
  border: 1px solid #d0d5dd; text-align: center; background: #fff;
}
.parking-tile .parking-num { font-weight: 600; margin-bottom: 0.4rem; }
.parking-tile .parking-status { font-size: 0.85rem; color: #667085; margin-bottom: 0.4rem; }
/* Paket G Phase 4: Ampel-Farben frei/belegt/meiner. */
.parking-tile.free { background: #dcfce7; border: 1px dashed #86efac; }
.parking-tile.free .btn-checkin { background: var(--loc-green-hover); color: #fff; }
.parking-tile.free .btn-checkin:hover { background: #15803d; box-shadow: 0 4px 12px #22c55e40; }
.parking-tile.occupied { background: #fef2f2; border: 1px solid #fecaca; }
.parking-tile.occupied .parking-occupant {
  color: #b42318; font-weight: 600; overflow-wrap: anywhere;
}
.parking-tile.is-mine { background: #eff6ff; border: 1px solid #3b82f6; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

/* === Patch Notes ("Was ist neu?") === */
body.modal-open { overflow: hidden; }
.patchnotes-link { color: inherit; text-decoration: underline; cursor: pointer; }
.modal-content.modal-patchnotes {
  padding: 0;
  width: min(820px, calc(100vw - 2rem));
  display: flex; flex-direction: column;
}
.pn-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-gray-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pn-header h2 { margin: 0; font-size: 1.2rem; }
.pn-header .modal-close { position: static; }
.pn-body { padding: 1.25rem 1.5rem 1.5rem; }
.pn-version { margin-bottom: 1.4rem; }
.pn-version:last-child { margin-bottom: 0; }
.pn-version h3 {
  margin: 0 0 0.5rem; font-size: 1rem; color: var(--color-text);
}
.pn-version .pn-date {
  font-weight: normal; font-size: 0.82rem; color: var(--color-text-muted); margin-left: 0.5rem;
}
.pn-version ul { margin: 0; padding-left: 1.2rem; }
.pn-version li { margin-bottom: 0.4rem; line-height: 1.45; }

/* Paket G / Phase 2: laufende Session + Dashboard-Statuszeile */
.running-label {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
  vertical-align: middle;
}
.status-duration { color: #475467; }
.status-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Zeitkonto — Einzelbuchungen aufklappen */
.period-toggle { background: none; border: none; cursor: pointer; font-size: 0.9em; margin-right: 0.4em; color: var(--text-muted, #666); }
.period-detail-body { padding: 0.5em 0.75em; font-size: 0.9em; }
.detail-day { margin-bottom: 0.6em; }
.detail-day-head { margin-bottom: 0.2em; }
.detail-session { padding-left: 0.5em; }
.detail-booking { padding-left: 1.8em; color: var(--text-muted, #666); }
.detail-comment, .detail-corr { color: var(--text-muted, #666); }
.period-detail-empty { padding: 0.5em 0.75em; color: var(--text-muted, #666); }

/* Projekt-Detail — Einzelbuchungen pro Person */
.proj-toggle { background: none; border: none; cursor: pointer; font-size: 0.9em; margin-right: 0.4em; color: var(--text-muted, #666); }
.proj-booking-list { margin: 0; padding: 0.4em 0 0.4em 1.5em; font-size: 0.9em; }
.proj-booking-list li { list-style: none; padding: 0.1em 0; }
.bk-date { font-variant-numeric: tabular-nums; }
.bk-comment { color: var(--text-muted, #666); }

/* ===== v1.3.5: Zeitkonto-Modal — moderne Selects + Responsive ===== */
/* Gleiches Dropdown-Pattern wie im Abwesenheitsmodal (.vac-form), für alle
   Selects in Edit-Modals (#entry-user, #ev-kind, …). */
.modal-edit .edit-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 0.45rem 2rem 0.45rem 0.625rem;
  border: 1px solid var(--color-gray-border); border-radius: 0.375rem;
  font: inherit; width: 100%; box-sizing: border-box;
  background-color: #fff; color: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem;
}
.modal-edit .edit-field select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Responsive: Modal scrollbar halten, Tabs umbrechen (Urlaubsnachtrag wurde abgeschnitten) */
.modal-edit { max-height: 90vh; overflow-y: auto; }
.entry-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* v1.3.5: Zeitkonto-Detail — Abwesenheits-Zeilen, laufender Saldo, Löschen */
.detail-absence {
  padding: 0.15rem 0 0.15rem 0.5rem; font-size: 0.9rem;
  color: var(--color-text); border-left: 3px solid var(--color-gray-border);
  margin: 0.15rem 0;
}
.detail-status { color: var(--color-text-muted); font-size: 0.85em; }
.detail-absence-cancelled { opacity: 0.7; text-decoration: line-through; }
.detail-status-cancelled { color: #6b7280; font-weight: 600; text-decoration: none; }
.detail-running { font-weight: 600; }
.detail-running.pos { color: #15803d; }
.detail-running.neg { color: #b91c1c; }
.detail-autoclosed { color: #b45309; font-size: 0.85em; }
/* Punkt 5: Storno-Button als erkennbarer, dezenter Icon-Button (grau → Hover rot) */
.detail-del, .detail-corr-del {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin-left: 6px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #9aa1ad; cursor: pointer;
  vertical-align: middle; line-height: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.detail-del:hover, .detail-corr-del:hover {
  background: #fef2f2; color: #ef4444; border-color: #fecaca;
}
.detail-del:active, .detail-corr-del:active { background: #fee2e2; }
.detail-del:focus-visible, .detail-corr-del:focus-visible {
  outline: 2px solid #ef4444; outline-offset: 1px;
}
.detail-del svg, .detail-corr-del svg { width: 15px; height: 15px; display: block; }

/* v1.3.5: Marker für automatisch beendete Sessions */
.autoclosed-mark { color: #b45309; font-size: 0.8em; margin-left: 0.3em; }

/* v1.3.5: Gesamt-Saldo (kumuliert) als vierte Zeile der Saldo-Karte */
.saldo-row.saldo-cumulative {
  border-top: 1px dashed var(--color-gray-border);
  padding-top: 0.35rem; margin-top: 0.35rem;
}
.saldo-row.saldo-cumulative .saldo-value.pos { color: #15803d; }
.saldo-row.saldo-cumulative .saldo-value.neg { color: #b91c1c; }

/* v1.3.5: Art-Label in der virtuellen Abwesenheits-Zeile (Wochenliste) */
.absence-virtual-row .absence-row-kind {
  color: var(--color-text-muted); font-size: 0.85em; white-space: nowrap;
}

/* Task 6: Team-Zeitstrahl */
.tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.tl-nav{display:flex;align-items:center;gap:6px}
.tl-actions{display:flex;align-items:center;gap:10px}
.tl-chip{font-size:12.5px;color:#39404c}
/* Task 13: einziger Scroll-Container (beide Achsen) */
#cal-tab-team .tl{overflow:auto;border:1px solid #eceef3;border-radius:8px;font-size:11px}
.tl-grid{width:max-content}
.tl-row{display:flex}
.tl-name{position:sticky;left:0;z-index:2;background:#fff;flex:0 0 160px;
  display:flex;align-items:center;gap:8px;padding:0 10px;height:42px;
  border-right:2px solid #e6e8ee;border-bottom:1px solid #f3f4f7;white-space:nowrap;overflow:hidden}
/* Punkt 2: gespannte Monatsleiste über der Tageszeile (Label sticky-links, nie abgeschnitten) */
.tl-monthrow{position:sticky;top:0;z-index:3;display:flex}
.tl-monthrow .tl-mcorner{position:sticky;left:0;top:0;z-index:4;flex:0 0 160px;height:28px;
  background:#fbfbfd;border-right:2px solid #e6e8ee;border-bottom:1px solid #e6e8ee}
.tl-mcell{flex:0 0 auto;height:28px;background:#fbfbfd;border-bottom:1px solid #e6e8ee;
  border-left:2px solid #aeb6c6;display:flex;align-items:center;overflow:hidden}
.tl-mcell:first-of-type{border-left:none}
.tl-mlabel{position:sticky;left:170px;padding:0 8px;white-space:nowrap;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:#39404c}
.tl-headrow{position:sticky;top:28px;z-index:3}
.tl-headrow .tl-cell{position:sticky;top:28px;background:#fbfbfd}
.tl-headrow .tl-name.tl-corner{z-index:4;background:#fbfbfd;font-weight:600;color:#5b6472;height:40px;border-bottom:2px solid #e6e8ee}
.tl-av{width:22px;height:22px;border-radius:50%;flex:0 0 22px;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600}
.tl-cell{flex:0 0 30px;height:42px;border-right:1px solid #f3f4f7;border-bottom:1px solid #f3f4f7;display:flex;align-items:center;justify-content:center;color:#9aa1ad;font-size:9px;position:relative}
.tl-cell.we{background:#f6f7f9}
/* Feedback: Monatsanfang als durchgehende vertikale Trennlinie (auch durch die Datenzeilen) */
.tl-cell.mstart{box-shadow:inset 2px 0 0 #aeb6c6}
.tl-cell.today{box-shadow:inset 1px 0 0 #3b5bdb, inset -1px 0 0 #3b5bdb}
/* Feedback: eigene Zeile (angemeldeter User) durchgehend markieren — sofort als „meine Zeile" erkennbar */
.tl-row.tl-me .tl-name{background:#eef2ff;box-shadow:inset 3px 0 0 #3b5bdb;font-weight:600}
.tl-row.tl-me .tl-cell{background:#eef2ff;border-top:1px solid #c7d2fe;border-bottom:1px solid #c7d2fe}
.tl-seg{position:relative;width:100%;height:26px;border-radius:5px;cursor:pointer}
/* Punkt 4: Art-Icon am Range-Anfang, weißer Halo für Lesbarkeit auf gesättigter Balkenfarbe */
.tl-seg-ic{position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;pointer-events:none}
.tl-seg.tl-holiday{background:#fde68a;height:6px;border-radius:2px;cursor:default}
.tl-popover{position:absolute;z-index:1000;background:#fff;border:1px solid #d8dce4;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.14);padding:9px 12px;font-size:12.5px;color:#39404c;max-width:240px}
.tl-pop-range{color:#5b6472}
.tl-pop-status{color:#1c7c47;font-weight:600}
.cal-tab-panel.is-loading{opacity:.5}
.cal-error{padding:14px;color:#b02a37}
/* Task 11: Toggle "Mitarbeiter ohne Einträge ausblenden" — eigene Zeile (.tl-me) bleibt immer sichtbar */
#cal-tab-team.hide-empty .tl-row.tl-empty:not(.tl-me){display:none}
/* Task 11/13: Team-Legende kompakt (2-zeilig, außerhalb Scroll-Container) */
#tl-legend-slot{flex:0 0 auto}
.team-legend{border-top:1px solid #eceef3;padding:6px 0 4px;font-size:11.5px}
.team-legend>summary{cursor:pointer;font-weight:600;font-size:0.85rem;padding:0.15rem 0;user-select:none;color:#39404c}
.team-legend-body{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;align-items:center}
.team-leg{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#39404c}
.team-leg .dot{display:inline-block;width:10px;height:10px;border-radius:2px;flex:0 0 10px}
/* Mein Jahr — Statistik-Sidebar + Monatskärtchen (Task 8) */
.mj{display:flex;gap:14px}
.mj-side{flex:0 0 220px}
.mj-year{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;margin-bottom:12px}
/* Mail-Punkt 2 (05.10.): Personenwahl für Admins im Reiter „Mein Jahr“ */
.mj-person{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#5b6472;margin-bottom:10px}
.mj-person select{padding:5px 6px;font-size:13px}
.mj-fremd{margin:0 0 8px;font-size:13px;text-align:center}
.mj-card{border:1px solid #eef0f4;border-radius:10px;padding:11px 12px;margin-bottom:12px}
.mj-card h5{margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:#7a828f}
.mj-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#39404c}
.mj-row i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.mj-row.mj-big{font-size:15px;font-weight:700;color:#1f2733;border-top:1px solid #eef0f4;margin-top:5px;padding-top:7px}
.mj-months{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mj-month{border:1px solid #eef0f4;border-radius:10px;padding:9px 10px}
.mj-month h6{margin:0 0 7px;font-size:12.5px;text-align:center;color:#1f2733}
.mj-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mj-wd{font-size:8.5px;color:#aab0ba;text-align:center}
.mj-day{font-size:9px;text-align:center;padding:3px 0;border-radius:4px;color:#39404c}
.mj-day.we{color:#b9bec8}
.mj-day.on{color:#fff;font-weight:600}
.mj-day.ft{background:#fde68a;color:#7c5e00}
/* Task 12: klickbare Jahres-Tage */
.mj-day[data-date]{cursor:pointer}
.mj-day[data-date]:hover{outline:2px solid rgba(59,130,246,.45);outline-offset:-1px}

/* Task 9: Responsive-Feinschliff */
@media (max-width: 720px) {
  .modal-calendar { width: 98vw; }
  .cal-tab { padding: 6px 10px; font-size: 12px; }
  .mj { flex-direction: column; }
  .mj-side { flex: 1 1 auto; }
  .mj-months { grid-template-columns: repeat(2, 1fr); }
  .tl-name { flex: 0 0 110px; }
}
@media (max-width: 480px) {
  .mj-months { grid-template-columns: 1fr; }
}

/* --- Projektstunden-Export (Modal auf der Projektübersicht) --- */
.page-actions { margin: 0 0 16px; }
.export-modal-content { max-width: 420px; }
.export-hint { color: #666; font-size: 0.9em; margin-top: 4px; }
.export-form label { display: block; margin: 12px 0 0; font-weight: 600; }
.export-form input[type="month"],
.export-form select { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; font-weight: 400; }
.export-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* === Hub (laxxsys.de) === */
/* Grundlage: DESIGN.md Abschnitt 4. Dieselbe Palette, dieselbe Schrift, dieselbe
   Formensprache wie LaxxTime — der Unterschied liegt allein in Abstand (R3),
   Farbmenge (R2: nur --color-primary, keine Weltfarben) und der Zahl der
   Bedienelemente (R5). Keine neue Farbe, kein neuer Radius, keine dritte
   Schattenstufe; die zwei neuen Abstands-Tokens stehen in :root. */

/* Sticky-Footer-Pattern wie bei body > main.container: ohne explizite
   Breite bricht align-items: stretch die max-width-Zentrierung. */
body > .hub { width: 100%; flex: 1 0 auto; }

.hub {
  max-width: 1100px;          /* die ruhigen Inhaltsseiten (R6), nicht die 1200px des Containers */
  margin: 0 auto;
  padding: var(--hub-space);
}

/* Abmelden und Sprachwahl stehen als Paar rechts im Kopf. Eigener Flex-Kasten,
   damit .hub-head weiterhin GENAU zwei Kinder auseinanderzieht -- ohne ihn waere aus
   dem space-between eine Dreiteilung geworden und der Titel haette seinen Platz
   verloren. */
.hub-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm, .5rem);
  flex-wrap: wrap;
}

.hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hub-gap);
  margin-bottom: var(--hub-space);
}
/* <h1> hat im Blatt keine globale Regel (DESIGN.md 2.2) — ohne diese Zeile griffe die
   Browser-Vorgabe 2em. 1.75rem ist die groesste belegte Seitenueberschrift
   (.worktime-header h1), keine neue Groesse. */
.hub-title { font-size: 1.75rem; font-weight: 600; }
.hub-sub { font-size: 0.9rem; color: var(--color-text-muted); }

.hub-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hub-gap);
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--hub-space);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Sichtbarer Fokus ist Pflicht, weil die Kachel ein Link ist (R5). Der Ring sitzt an
   der Kachel und nicht am Titel, weil die Klickflaeche die ganze Kachel ist. Der Wert
   ist derselbe wie an .form-group input:focus und bleibt ein Literal, solange
   er im Bestand einer ist (DESIGN.md 4.1). */
.hub-card:focus-within { box-shadow: var(--shadow-md), 0 0 0 3px rgba(37, 99, 235, 0.15); }

.hub-card-title { font-size: 1.05rem; font-weight: 600; }
.hub-card-link { color: var(--color-text); }
.hub-card-link:hover { color: var(--color-primary); text-decoration: none; }
/* Die Kachel IST das Bedienelement (R5): die Deckflaeche des Titel-Links macht die
   ganze Kachel klickbar, ohne einen zweiten Knopf zu brauchen. */
.hub-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.hub-card-link:focus-visible { outline: none; }
.hub-card-text { font-size: 0.9rem; color: var(--color-text-muted); }

/* Der Stern liegt UEBER der Deckflaeche — ohne z-index finge der Link jeden Klick ab
   und die Startwelt waere nicht setzbar. */
.hub-star-form { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; }

/* Nebenwelt an derselben Karte (heute: Testumgebung an der Beschaffung). Ein zweiter Link
   in einer Kachel, deren ganze Flaeche schon der Titel-Link ist -- deshalb wie der Stern
   UEBER der Deckflaeche, sonst fuehrte jeder Klick darauf in die Produktion. Bewusst als
   umrandeter Knopf und nicht als Fliesstext-Link: er muss neben dem Titel als EIGENES Ziel
   erkennbar sein. */
.welt-nebenziele { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.welt-nebenziel {
  display: inline-flex; align-items: center; min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-gray-border); border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 500; color: var(--color-text);
}
.welt-nebenziel:hover { color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }
.welt-nebenziel:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.hub-star {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0.25rem 0; cursor: pointer;
  font-family: var(--font);   /* Knoepfe erben die Schrift nicht (DESIGN.md 2.1) */
  font-size: 0.85rem; font-weight: 500;
  color: var(--color-gray);   /* ungesetzt (R5) */
  transition: color 0.15s;
}
.hub-star:hover,
.hub-star.is-set { color: var(--color-primary); }   /* gesetzt (R5) */
.hub-star:focus-visible {
  outline: none;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Forced-Colors (Windows-Kontrastmodus): dort ersetzt das System Hintergruende, Farben
   UND Schatten. Ein Fokusring aus box-shadow verschwindet damit ersatzlos -- die
   Tastaturbedienung haette keine sichtbare Position mehr. outline wird nicht ersetzt und
   ist der uebliche Weg; Highlight ist die Systemfarbe genau fuer diese Rolle. Der Ring
   aus DESIGN.md R5 bleibt fuer den Normalfall unangetastet, das hier greift nur im Modus.
   NUR an der Kachel, nicht zusaetzlich am Titel-Link: dessen outline: none darf hier
   stehen bleiben, weil die Kachel den Rahmen schon zieht -- sonst stehen im Modus zwei
   ineinander geschachtelte Rahmen (gemessen). */
@media (forced-colors: active) {
  .hub-card:focus-within,
  .hub-star:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* R7: Text statt leerer Flaeche, wie .empty-message — nicht in
   --color-danger, denn eine offene Freischaltung ist kein Fehler. */
.hub-empty { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; }

/* Der einzige Bruchpunkt des Blattes (R6, max-width: 768px): darunter einspaltig wie die
   Standortkarten. Die Abstaende bleiben, sonst faellt die Hub-Ebene auf dem Handy
   genau in die Masse zurueck, von denen sie sich unterscheiden soll. */
@media (max-width: 768px) {
  .hub-grid { grid-template-columns: 1fr; }
}


/* ---- Rechtstexte (Impressum, Datenschutz) ------------------------------------
   Lesetexte, keine Oberflaeche: schmale Spalte statt volle Breite, mehr Zeilenhoehe,
   keine Karten. Wer hier liest, liest wirklich -- Kacheln wuerden nur zerschneiden. */
.legal-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 0 3rem;
  line-height: 1.65;
}
.legal-page h1 { margin-bottom: 0.5rem; }
.legal-page h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.legal-page ul { padding-left: 1.25rem; }
.legal-page li { margin-bottom: 0.5rem; }
.legal-hinweis { color: var(--color-text-muted); font-size: 0.92rem; }

/* Der Entwurfs-Hinweis muss sich NICHT einfuegen. Er ist eine Warnung an den, der die
   Seite freischalten will, und verschwindet mit dem Entwurfsstatus wieder. */
.legal-entwurf {
  border-left: 4px solid #d97706;
  background: #fffbeb;
  color: #7c2d12;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  margin-bottom: 2rem;
}

/* Jede unbestaetigte Angabe ist im Text SICHTBAR markiert, nicht nur im Entwurfs-Kasten
   angekuendigt. Ein Platzhalter, der wie Fliesstext aussieht, geht irgendwann als
   Tatsache durch -- genau die Verwechslung soll hier unmoeglich sein. */
.legal-luecke {
  background: #fef08a;
  padding: 0 0.2em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Welten-Auswahl im Einladungsformular (nur Admins sehen sie). */
.invite-welten {
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius);
  padding: .75rem .9rem 1rem;
  margin-bottom: 1rem;
}
.invite-welten legend {
  font-size: .9rem;
  font-weight: 600;
  padding: 0 .35rem;
}
.invite-welten-hint {
  color: var(--color-text-muted);
  font-size: .82rem;
  line-height: 1.45;
  margin: .35rem 0 .7rem;
}
/* Das Kaestchen bleibt oben, damit eine zweizeilige Beschreibung nicht an ihm
   klebt -- align-items:center haette es auf die Mitte des Textblocks gezogen. */
.invite-welt {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .3rem 0;
  font-size: .9rem;
  cursor: pointer;
}
/* width/padding zuruecksetzen: `.form-group input` (oben, fuer Textfelder) gibt jedem input
   100 % Breite -- das Haekchen stand dann mittig auf einer eigenen Zeile zwischen zwei Welten,
   und niemand sah, zu welcher es gehoert (Owner-Blick 23.09.). */
.invite-welt input { width: auto; padding: 0; margin-top: .25rem; flex: none; }

/* Sprachwahl auf den Seiten vor der Anmeldung. Rechtsbuendig ueber der
   Ueberschrift: sie ist ein Hilfsmittel, kein Bedienelement des Formulars --
   im Lesefluss vor dem Titel stuende sie ueber dem, was die Seite eigentlich
   ist. */
.sprachwahl {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .25rem;
}
.sprachwahl-knopf {
  background: none;
  border: none;
  padding: .2rem .35rem;
  font: inherit;
  font-size: .82rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sprachwahl-knopf:hover { color: var(--color-text); }
/* Der Fokusring bleibt sichtbar: der Knopf ist die einzige Bedienung auf der
   Anmeldeseite, die per Tastatur erreicht wird, bevor das Formular beginnt. */
.sprachwahl-knopf:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Aenderungsprotokoll (Punkt 16, Task 8) ---
   Die Ansicht kommt ohne eigenes Skript aus (Nonce-CSP seit T4); alles Sichtbare
   entsteht aus diesen Regeln und den Klassen, die routes/protokoll.js setzt.

   Die drei Kettenzustaende tragen VERSCHIEDENE Farben, und keiner von ihnen ist
   die Vorgabe: ein unbekannter Zustand sieht neutral aus, nicht gruen. Dieselbe
   Regel wie bei der Anzeigekonten-Tafel. */
.protokoll-kopf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.protokoll-karte {
  background: var(--color-card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.75rem 1rem 1rem;
}
.protokoll-karte .section-heading { margin-top: 0.25rem; }
.protokoll-zustand { font-size: 1.05rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.protokoll-zustand.kette-ok { color: #15803d; }
.protokoll-zustand.kette-bruch { color: var(--color-danger); }
.protokoll-zustand.kette-ungeprueft { color: var(--color-text-muted); }
/* Der Zustand der Erfassung (Trigger-Waechter, 2026-09-10). EIGENE Marken und nicht
   die des Kettenzustands: `kette-ok` darf ohne Knopfdruck nirgends im Dokument
   stehen, und ein Fall bindet genau das. Dieselbe Dreiteilung, dieselbe Regel --
   `waechter-unbekannt` ist neutral und ausdruecklich nicht gruen. */
.protokoll-zustand.waechter-ok { color: #15803d; }
.protokoll-zustand.waechter-bruch { color: var(--color-danger); }
.protokoll-zustand.waechter-unbekannt { color: var(--color-text-muted); }

.protokoll-filter {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
  background: var(--color-card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.protokoll-filter label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.protokoll-filter select, .protokoll-filter input {
  padding: 0.35rem 0.5rem; border: 1px solid var(--color-gray-border);
  border-radius: 0.25rem; font: inherit;
}
.protokoll-filter-aktionen { display: flex; gap: 0.5rem; }

/* Die beiden Hinweise stehen bewusst NEBEN dem Formular und nicht als
   kleingedruckte Zeile darunter: sie entscheiden, ob die Liste ehrlich benutzt
   werden kann. Der erste nennt die Luecke des Betroffenen-Filters, der zweite die
   gemischten Uhren in der Spalte "Aenderung" -- beides Eigenschaften der Daten,
   die diese Ansicht nicht richtigstellen kann. */
/* 🔴 Der Hintergrund war bis zum 2026-09-10 `--color-gray-light` (#f3f4f6) — auf
   `--color-bg` (#f0f2f5). Zwei Werte, die sich um drei Stufen unterscheiden: die
   Flaeche KONNTE sich nicht abheben, nur der Balken links war zu sehen. In der
   Bedienabnahme sofort aufgefallen ("hebt sich ueberhaupt nicht ab").
   Ein Farbton statt einer Helligkeit — gegen ein graues Umfeld traegt Blau auch
   dann, wenn es blass ist. */
.protokoll-luecke, .protokoll-uhren {
  border-left: 3px solid var(--color-primary); background: var(--color-info-bg);
  padding: 0.6rem 0.9rem; border-radius: 0.25rem; margin: 0 0 1rem;
  font-size: 0.9rem; line-height: 1.45;
}

/* Die Kopfzeile bleibt beim Scrollen stehen (Bedienabnahme 2026-09-10: ohne sie
   ist eine Zeile mit 16 Feldern nicht mehr zuzuordnen — man muesste die Spalten
   auswendig kennen).
   🔴 ZWEI HUERDEN, die beide unsichtbar sind, und deshalb steht hier ein EIGENER
   Wrapper statt `table-scroll`:
     1. `table-scroll` traegt `overflow-x: auto`. Ist einer der beiden
        overflow-Werte nicht `visible`, zwingt CSS den anderen von `visible` auf
        `auto` — der Container wird selbst zum Scroll-Container, und `sticky`
        klebt an SEINEM Rand, der mit der Seite mitscrollt. Wirkungslos.
     2. `.admin-table` traegt `overflow: hidden` (fuer den border-radius). Ein
        Vorfahre mit `overflow: hidden` kappt `sticky` ebenfalls.
   Deshalb: der WRAPPER bekommt Hoehe, Rundung und Schatten, die Tabelle darin
   wird flach. Nebengewinn und zweiter Befund derselben Abnahme: der waagerechte
   Scrollbalken sitzt jetzt am unteren Rand der Tabelle statt am Seitenende.
   ⚠️ Wer hier auf `table-scroll` zurueckbaut, verliert beides lautlos. */
.protokoll-tabelle {
  max-height: 70vh; overflow: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--color-card-bg);
}
.admin-table--protokoll { overflow: visible; border-radius: 0; box-shadow: none; }
.admin-table--protokoll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-gray-light);
  /* ⚠️ `border-collapse: collapse` und `sticky` vertragen sich nicht: die
     Rahmenlinie der Kopfzeile scrollt beim Kleben weg. Ein inset-Schatten haengt
     dagegen am Element selbst und bleibt. */
  box-shadow: inset 0 -1px 0 var(--color-gray-border);
}

.admin-table--protokoll td { vertical-align: top; font-size: 0.85rem; }
.admin-table--protokoll .protokoll-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.protokoll-vorgang { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
.protokoll-vorgang[data-vorgang="DELETE"] { color: var(--color-danger); }
.protokoll-vorgang[data-vorgang="SCHNITT"] { color: var(--color-text-muted); }
.protokoll-felder { list-style: none; margin: 0; padding: 0; }
.protokoll-felder li { margin: 0 0 0.15rem; word-break: break-word; }
.protokoll-felder code { font-size: 0.8rem; color: var(--color-text-muted); }
.protokoll-alt { text-decoration: line-through; color: var(--color-text-muted); }
.protokoll-neu { font-weight: 600; }
.protokoll-blaettern { display: flex; gap: 0.5rem; margin: 1rem 0 2rem; }

/* ── Urlaubs- und Krankheitsliste (2.6.0, views/abwesenheitsliste.ejs) ──
   Farben wie KIND_COLORS (views/worktime.ejs) und das Excel (lib/abwesenheitsliste-xlsx.js). */
.al-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.al-monat { min-width: 9rem; text-align: center; }
.al-tabelle { border-collapse: collapse; font-size: 0.8rem; }
.al-tabelle th, .al-tabelle td { border: 1px solid var(--color-border, #e2e8f0); padding: 0.15rem 0.25rem; }
.al-tabelle .al-name { position: sticky; left: 0; z-index: 1; background: var(--color-surface, #fff); text-align: left; min-width: 11rem; white-space: nowrap; }
.al-tag { min-width: 1.6rem; text-align: center; font-weight: 600; }
.al-zelle { text-align: center; height: 1.6rem; }
.al-summe, .al-summe-kopf { text-align: right; white-space: nowrap; }
.al-summe-kopf { text-align: center; }
.al-vermerk { display: block; font-weight: 400; color: var(--color-text-muted); }
.al-vermerk-warnung { color: #b45309; }
.al-grau { background: #d9d9d9; }
.al-frei { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 3px, #d9d9d9 3px, #d9d9d9 4px); }
.al-art-urlaub { background: #3b82f6; color: #fff; }
.al-art-krank { background: #ef4444; color: #fff; }
.al-art-kind_krank { background: #b91c1c; color: #fff; }
.al-art-mutterschaft { background: #ec4899; color: #fff; }
.al-art-vaterschaft { background: #06b6d4; color: #fff; }
.al-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1rem 0 2rem; font-size: 0.85rem; }
.al-legende-eintrag { display: inline-flex; align-items: center; gap: 0.35rem; }
.al-legende-eintrag i { display: inline-block; width: 1rem; height: 1rem; border: 1px solid var(--color-border, #e2e8f0); }
.nav-kurz { display: none; }
@media (max-width: 768px) {
  .nav-lang { display: none; }
  .nav-kurz { display: inline; }
}