@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #0f1420;
  --bg-card: #171d2c;
  --bg-card-2: #1d2436;
  --border: #2b3348;
  --gold: #c9a45c;
  --gold-hell: #e0c184;
  --text: #e7e9f0;
  --text-schwach: #9aa1b5;
  --gruen: #1f6d4c;
  --gruen-bg: #14301f;
  --rot: #8a2f3b;
  --rot-bg: #33161c;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* Dunkler Basis-Hintergrund auf html selbst (nicht nur ueber das weiter
   unten folgende, viewport-grosse Hintergrund-Element) - das ist ein
   Sicherheitsnetz gegen den "Gummiband"-Effekt beim schnellen Ueberscrollen
   auf dem Handy (v. a. iOS Safari): Scrollt man kurz ueber den oberen/
   unteren Rand der Seite hinaus, kann der Browser dabei kurz einen Bereich
   zeigen, der ausserhalb des eigentlich sichtbaren Fensters liegt - ohne
   diese Zeile waere das die weisse Standardfarbe des Browsers, mit dieser
   Zeile bleibt es durchgehend dunkel.
 */
html {
  background: #0b0f18;
}

body {
  margin: 0;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  padding-bottom: 60px;
  overflow-x: hidden; /* verhindert seitliches Verschieben der gesamten Seite; einzelne Tabellen scrollen weiterhin unabhaengig davon in ihrem eigenen Container */
}

/* Der Hintergrund-Verlauf sitzt als eigenes, fest am Bildschirm verankertes
   Element genau in Bildschirmgroesse dahinter - nicht direkt als
   Hintergrund von body selbst. Grund: Ein radialer Verlauf skaliert sich
   sonst standardmaessig an der GESAMTEN (veraenderlichen) Seitenhoehe, nicht
   am sichtbaren Ausschnitt - klappt man z. B. im Admin-Bereich einen
   Abschnitt auf/zu und die Seite wird dadurch laenger/kuerzer, wirkt der
   immer gleiche, sichtbare Ausschnitt dann je nachdem minimal heller/dunkler.
   Als fest positioniertes, auf Bildschirmgroesse fixiertes Element bleibt der
   Verlauf davon vollstaendig unberuehrt. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at top, #141a29 0%, #0b0f18 65%);
}

/* Fuer den dekorativen Sterneffekt (siehe sterne.js) - erzeugt per
   JavaScript laufend neue, zufaellig platzierte Punkte, die diese
   Animation nutzen, um sanft ein- und wieder auszublenden. */
@keyframes schliessplanSternEinAus {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.02em;
  color: var(--gold-hell);
  font-weight: 700;
}

a { color: var(--gold-hell); }

/* Der Titel steht jetzt auf einer eigenen, zentrierten Zeile ganz oben -
   unabhaengig von der Bildschirmgroesse -, die Status-/Navigations-Gruppe
   darunter. Vorher stand der Titel links, die Gruppe rechts (nebeneinander) -
   dadurch war der Titel nie wirklich mittig, sondern nur "irgendwo links". */
.kopfzeile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 5vw 20px;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  text-align: center;
}

.kopfzeile h1 { margin: 0; font-size: 1.5rem; }

/* Fasst Status-Infos (wer ist angemeldet, Inaktivitaets-Timer) und die
   eigentlichen Navigations-Links als zwei getrennte, klar erkennbare
   Gruppen zusammen statt einer einzigen, undurchsichtigen Reihe loser
   Textlinks - das war besonders auf dem Handy schnell unuebersichtlich. */
.kopf-rechts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px 20px;
}

.kopf-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nav-links a {
  color: var(--text-schwach);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.nav-links a:hover {
  color: var(--gold-hell);
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.08);
}
/* Markiert die Seite, auf der man sich gerade befindet - dieselbe Liste
   steht jetzt auf jeder Seite unveraendert (gleiche Eintraege, gleiche
   Reihenfolge), nur dieser eine Punkt sieht je nach aktueller Seite anders
   aus. Entspricht demselben Muster wie .woche-nav a.aktiv weiter unten. */
.nav-links a.aktiv {
  color: var(--gold-hell);
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.12);
}
/* "Abmelden" ist die folgenreichste Aktion in der Leiste - hebt sich
   farblich dezent ab, statt optisch gleichwertig neben den harmlosen
   Navigationslinks zu stehen. */
.nav-abmelden {
  color: #f0b6bd !important;
  border-color: var(--rot) !important;
}
.nav-abmelden:hover {
  background: var(--rot-bg) !important;
  border-color: var(--rot) !important;
  color: #fff !important;
}

.inhalt {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 5vw 40px;
}

.karte {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.woche-titel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.woche-titel h2 { margin: 0; font-size: 1.25rem; }
/* Der Zeitraum ("24.08.2026 – 28.08.2026") soll bei Platzmangel als GANZE
   Einheit in die naechste Zeile umbrechen, statt (wie es der Browser sonst
   an einer beliebigen Stelle innerhalb des Textes tut) z. B. mitten
   zwischen dem Gedankenstrich und dem zweiten Datum zu brechen - das sah
   auf dem Handy sehr unschoen und zufaellig aus. */
.woche-titel h2 .datumsbereich { white-space: nowrap; }
.woche-titel .zeitraum { color: var(--text-schwach); font-size: 0.92rem; }

.gesperrt-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-schwach);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Wie .gesperrt-badge, aber in Warnfarben - fuer Dinge, die die
   Aufmerksamkeit des Admins brauchen (z. B. ein dauerhaft gesperrtes Konto). */
.badge-warnung {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0b6bd;
  border: 1px solid var(--rot);
  background: var(--rot-bg);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: middle;
}

/* table-layout: fixed macht die Spaltenbreiten unabhaengig vom Inhalt einer
   Zelle - ohne das wuerde z. B. das Dashboard (mit Ein-/Austragen-Buttons
   in jeder Zelle, also mehr Inhalt) breitere Spalten bekommen als die
   Uebersichtsseite (nur der Name, ohne Buttons) - beim Wechsel zwischen
   beiden Seiten wirkte die Tabelle dadurch sichtbar unterschiedlich breit. */
.plan-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
  table-layout: fixed;
}
/* Browser zentrieren Tabellenzellen-Inhalte standardmaessig senkrecht - das
   erzeugt einen sichtbaren Versatz, sobald eine Zelle mehr Inhalt hat als
   die anderen (z. B. der "Austragen"-Button an genau dem einen Tag, an dem
   die eigene Person eingetragen ist, macht diese Zeile insgesamt hoeher).
   Alle Zellen richten sich stattdessen an der Oberkante aus - der Button
   verlaengert seine Zelle dann nur nach unten, statt den Namen ueberall
   sonst nach unten wegzudruecken. */
.plan-tabelle td {
  vertical-align: top;
}
.plan-tabelle th {
  color: var(--text-schwach);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  text-align: center;
}
.plan-tabelle th:first-child,
.plan-tabelle .zeit-label {
  width: 90px;
}
.plan-tabelle .zeit-label {
  color: var(--text-schwach);
  font-size: 0.85rem;
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
  /* Ohne das wuerde die Zeitangabe durch die neue Oberkanten-Ausrichtung der
     Zellen (siehe td weiter oben) ganz oben "kleben", waehrend der Name
     daneben durch sein eigenes Innenpolster (siehe .slot) sichtbar tiefer
     sitzt - das gleicht das grob wieder an. */
  padding-top: 20px;
}

.slot {
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  overflow-wrap: break-word;
  /* Erzwingt einen Umbruch auch bei einer langen Zeichenkette OHNE
     Leerzeichen (z. B. ein versehentlich sehr lang eingegebener Name) -
     "overflow-wrap: break-word" allein verhaelt sich dabei nicht in jedem
     Browser gleich zuverlaessig. */
  word-break: break-word;
  /* Feste Groesse, damit jedes Feld (egal ob "frei" oder mit Namen belegt)
     immer exakt gleich gross bleibt, unabhaengig davon, wie lang der Name
     ist - vorher wurde ein Feld mit einem laengeren, zweizeilig
     umgebrochenen Namen sichtbar hoeher als die uebrigen, kurzen Felder
     daneben. Der Name bekommt dabei bis zu zwei Zeilen Platz und wird
     darin ueber flexbox zuverlaessig sowohl senkrecht als auch waagerecht
     zentriert (bewusst KEIN mehrzeiliges "…"-Abschneiden - das laesst sich
     nicht browseruebergreifend zuverlaessig mit einer sauberen Zentrierung
     kombinieren; reicht der Platz bei einem ausnahmsweise sehr langen
     Namen nicht aus, wird er stattdessen einfach sauber am Rand
     abgeschnitten, statt das Feld zu vergroessern). */
  height: 62px;
  /* Flex-Elemente haben browserseitig eine unsichtbare Mindesthoehe/-breite
     ("min-height/min-width: auto"), die eine hier gesetzte feste Hoehe
     UEBERSTIMMEN kann, wenn der Inhalt mehr Platz braucht, als noch
     hineinpasst - genau das ist bei einem sehr langen Namen passiert: das
     Feld ist trotz "height: 62px" gewachsen, statt den Text sauber
     abzuschneiden. Erst mit min-height/min-width:0 wird die feste Groesse
     wirklich verbindlich durchgesetzt. */
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1.25;
}
/* Je laenger der Name, desto kleiner die Schrift - berechnet in
   slotSchriftKlasse() (server.js) anhand der Zeichenanzahl. So bleibt auch
   ein ausnahmsweise langer Name lesbar, statt einfach abgeschnitten zu
   werden, waehrend kurze, normale Namen weiterhin die groessere,
   angenehmere Standardschrift behalten. Gilt fuer Tabellen- UND mobile
   Kartenansicht gleichermassen (dort greift zusaetzlich die kleinere
   Basis-Schriftgroesse aus ".tag-karte .slot" weiter unten). */
.slot.slot-text-m { font-size: 0.72rem; }
.slot.slot-text-s { font-size: 0.6rem; letter-spacing: -0.01em; }
.slot.slot-text-xs { font-size: 0.5rem; letter-spacing: -0.02em; }
/* Bewusst zusaetzlich mit ".tag-karte" vorangestellt: ".tag-karte .slot"
   weiter unten (mobile Kartenansicht) hat dieselbe Anzahl Klassen wie
   ".slot.slot-text-*" hier und wuerde die kleinere Schriftgroesse sonst
   wieder ueberschreiben, je nachdem welche Regel zufaellig weiter unten in
   dieser Datei steht (genau dieser Fehler ist beim Kalender bereits
   passiert - hier vorsorglich behoben, bevor er auch hier auffaellt). */
.tag-karte .slot.slot-text-m { font-size: 0.72rem; }
.tag-karte .slot.slot-text-s { font-size: 0.6rem; letter-spacing: -0.01em; }
.tag-karte .slot.slot-text-xs { font-size: 0.5rem; letter-spacing: -0.02em; }
/* Dieselbe Abstufung auch fuer den kleineren Namens-Eintrag im
   Jahresverlauf-Kalender (dort ohnehin schon kleinere Basis-Schriftgroesse
   als bei .slot, deshalb eigene, passend kleinere Werte). */
.eintrag-name.slot-text-m { font-size: 0.62rem; }
.eintrag-name.slot-text-s { font-size: 0.54rem; letter-spacing: -0.01em; }
.eintrag-name.slot-text-xs { font-size: 0.48rem; letter-spacing: -0.02em; }
/* Bewusst zusaetzlich mit ".kalender-tag" vorangestellt (macht die Regel
   spezifischer/staerker als ".kalender-tag .eintrag-name" weiter unten,
   das dieselbe Anzahl an Klassen hat und sonst - je nach Reihenfolge in
   dieser Datei - die kleinere Schriftgroesse wieder ueberschreiben wuerde,
   wie es bei der Kalender-Umstellung auf CSS-Grid tatsaechlich passiert ist). */
.kalender-tag .eintrag-name.slot-text-m { font-size: 0.62rem; }
.kalender-tag .eintrag-name.slot-text-s { font-size: 0.54rem; letter-spacing: -0.01em; }
.kalender-tag .eintrag-name.slot-text-xs { font-size: 0.48rem; letter-spacing: -0.02em; }
.slot.frei {
  background: var(--gruen-bg);
  border-color: var(--gruen);
  color: #7bd3a8;
}
/* Ein Feiertag ist fuer Benutzer gesperrt (siehe istTagBearbeitbarFuerBenutzer
   in server.js) - statt "frei" steht hier "gesperrt", optisch als
   zurueckhaltender, gestrichelter Rahmen statt der einladenden gruenen
   Farbe von "frei". */
.slot.gesperrt {
  background: transparent;
  border: 1px dashed #6b4a8a;
  color: #a99ec7;
}
.slot.belegt {
  background: var(--rot-bg);
  border-color: var(--rot);
  color: #f0b6bd;
}

.tag-datum { display: block; font-size: 0.78rem; color: var(--text-schwach); font-weight: 400; }

.formular-slot { display: flex; flex-direction: column; gap: 6px; align-items: center; }
/* Nur innerhalb der Tabellen-Zelle (Desktop) auf die volle, jetzt feste
   Spaltenbreite strecken - in der mobilen Kartenzeile (siehe weiter unten,
   .tag-karte-zeile .formular-slot) bleibt das absichtlich unangetastet,
   da .formular-slot dort Teil einer flexiblen Zeile ist. */
td .formular-slot { width: 100%; }
td .formular-slot select { width: 100%; max-width: 100%; }
/* Die farbige Box selbst soll die jetzt volle Zellenbreite ausfuellen
   (sonst sieht sie in Dashboard/Admin schmaler aus als auf der
   Uebersicht, wo dieselbe Box ohne Formular direkt in der Zelle steht und
   automatisch die volle Breite ausfuellt). Wichtig: NUR die Box selbst
   bekommt das per align-self - waere es stattdessen ueber
   align-items:stretch am ganzen .formular-slot gesetzt, wuerde das auch
   das Eintragen/Austragen-Formular strecken und dessen Button an den
   linken Rand statt mittig darunter schieben. */
td .formular-slot .slot { align-self: stretch; width: 100%; box-sizing: border-box; }
/* Der Urlaubs-Kasten soll immer exakt dieselbe Breite wie das Namensfeld
   direkt darueber haben, nicht schmaler wirken - dieselbe Regel wie bei
   ".slot" direkt oben. */
td .formular-slot .urlaub-kasten { align-self: stretch; width: 100%; box-sizing: border-box; margin-top: 14px; }
/* Das Auswahlmenü zum Zuweisen (Admin) soll ebenfalls die volle Breite
   nutzen, damit es optisch zur Box darueber passt - das Eintragen/
   Austragen-Formular (ohne diese Kennzeichnung) bleibt dagegen bewusst
   zentriert/an der eigenen Breite, siehe Kommentar oben. */
td .formular-slot .zuweisen-form { align-self: stretch; width: 100%; }

button, input[type=submit] {
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(201,164,92,0.10), rgba(201,164,92,0.02));
  color: var(--gold-hell);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  /* Verhindert das kurze, mobile Browser eigene "Markieren"-Aufblitzen beim
     Antippen (sieht aus wie eine Textauswahl) - ein Button ist keine
     auswaehlbare/kopierbare Textstelle, sondern eine Aktion. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* WICHTIG: Ohne diese Zeile wartet der Browser auf einem Touchscreen bei
     schnellem, mehrfachem Antippen DESSELBEN Knopfes kurz ab, ob damit ein
     "Doppel-Tipp zum Zoomen" gemeint ist (das ist die browsereigene
     Standard-Geste fuer Textbereiche/Bilder) - erst nach dieser kurzen
     Wartezeit (typischerweise ca. 300-500ms) entscheidet der Browser, dass
     es sich doch nur um zwei einzelne Tipps handelte. Genau in diesem
     Wartefenster fuehlte sich schnelles, wiederholtes Antippen (z. B. im
     Urlaubsplan-Kalender) so an, als wuerde der erste oder zweite Tipp
     "verschluckt" bzw. gar nicht richtig ankommen. "manipulation" sagt dem
     Browser stattdessen ausdruecklich: Dieses Element ist nur fuer eine
     einzelne Aktion (Antippen) und normales Scrollen gedacht, niemals fuer
     Zoomen - die Wartezeit auf eine Doppel-Tipp-Geste entfaellt dadurch
     komplett, jeder einzelne Tipp wird sofort und zuverlaessig erkannt.
  */
  touch-action: manipulation;
}
button:hover, input[type=submit]:hover {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #1a1408;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 164, 92, 0.3);
}
button:active, input[type=submit]:active {
  transform: translateY(0);
  box-shadow: none;
}
button:focus-visible, input[type=submit]:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 2px;
}

button.gefahr {
  border-color: var(--rot);
  color: #f0b6bd;
  background: linear-gradient(180deg, rgba(178,58,72,0.10), rgba(178,58,72,0.02));
}
button.gefahr:hover {
  background: linear-gradient(180deg, #c9505f, var(--rot));
  color: #fff;
  box-shadow: 0 6px 16px rgba(178, 58, 72, 0.35);
}

button.klein { padding: 5px 12px; font-size: 0.75rem; }

.login-wrapper {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-karte { width: 100%; max-width: 360px; }
.login-karte h1 { text-align: center; margin-bottom: 22px; font-size: 1.5rem; }

/* Unsichtbare Bot-Falle (siehe login.ejs): bewusst NICHT ueber "display:none"
   oder "visibility:hidden" versteckt - manche automatisierten Angriffs-
   Skripte ueberspringen Felder mit genau diesen beiden, sehr bekannten
   Eigenschaften gezielt. Stattdessen wird das Feld ganz regulaer
   dargestellt, aber weit ausserhalb des sichtbaren Bildschirmbereichs
   platziert - fuer einen echten Menschen dadurch ebenso unsichtbar, fuer
   ein Skript, das nur auf "display"/"visibility" prueft, aber nicht. */
.bot-falle {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.warte-karte { text-align: center; }

/* Gestaltete 404-/500-Fehlerseiten (siehe error-404.ejs, error-500.ejs) -
   ersetzen den zuvor reinen, ungestalteten Text ("Seite nicht gefunden.").
   Nutzt bewusst dieselbe Grundstruktur (.karte.login-karte) wie Anmelde-
   und Wartenseite, fuer ein einheitliches Erscheinungsbild. */
.fehler-karte { text-align: center; }
.fehler-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.fehler-icon svg { width: 34px; height: 34px; }
.fehler-icon-gold {
  background: rgba(201, 164, 92, 0.1);
  border: 1px solid var(--gold);
  color: var(--gold-hell);
}
.fehler-icon-rot {
  background: rgba(138, 47, 59, 0.12);
  border: 1px solid var(--rot);
  color: #f0b6bd;
}
.fehler-nummer {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.4rem;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.fehler-nummer-gold { color: var(--gold-hell); }
.fehler-nummer-rot { color: #f0b6bd; }
.fehler-titel { font-size: 1.05rem; font-weight: 500; margin-bottom: 10px; }
.fehler-text { color: var(--text-schwach); font-size: 0.85rem; margin-bottom: 28px; line-height: 1.5; }
.fehler-knopf { text-decoration: none; display: inline-flex; width: auto; }

.warte-text { color: var(--text); font-size: 0.92rem; line-height: 1.5; margin-bottom: 22px; }
.warte-countdown {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.warte-link-deaktiviert {
  pointer-events: none;
  color: var(--text-schwach);
  opacity: 0.6;
}

.feld { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 0.82rem; color: var(--text-schwach); }
.feld input, select, textarea {
  background: #0f1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
/* Ein <select>-Feld kann seinen angezeigten Wert (anders als normaler Text)
   nie umbrechen - ohne diese Zeilen wuerde ein sehr langer Name dort ueber
   den Rand hinaus sichtbar bleiben statt sauber mit "…" abgeschnitten zu
   werden. */
select {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: manipulation;
}
textarea { resize: vertical; min-height: 70px; }
.feld input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
.feld-hinweis { font-size: 0.72rem; color: var(--text-schwach); }

/* Passwort-Feld mit "Auge"-Knopf zum Anzeigen, solange gedrueckt gehalten.
   Eingabefeld und Knopf stehen als feste Nachbarn NEBENEINANDER in einer
   Reihe (statt der Knopf schwebend ueber dem Feld positioniert waere) -
   so kann es unabhaengig vom umgebenden Layout (Formular-Zeile,
   aufklappbarer Bereich, Bildschirmgroesse) niemals zu einer Ueberlappung
   kommen, bei der der Knopf das Eingabefeld verdeckt.
   Die Eigenschaften sind hier bewusst mit !important abgesichert: dieses
   eine Bauteil wird an mehreren, unterschiedlich verschachtelten Stellen im
   Projekt wiederverwendet (einfaches Formular, Formular-Zeile, aufklappbarer
   Admin-Bereich) - das soll garantiert ueberall gleich aussehen, ganz ohne
   Restrisiko durch eine andernorts womoeglich hoehere CSS-Rangfolge. */
.passwort-feld {
  display: flex !important;
  position: static !important;
  align-items: stretch !important;
  background: #0f1420 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.passwort-feld:focus-within { border-color: var(--gold) !important; }
.passwort-feld input {
  display: block !important;
  position: static !important;
  flex: none !important;
  width: calc(100% - 44px) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  font-family: inherit !important;
}
.passwort-feld input:focus { outline: none !important; }
.passwort-anzeigen-btn {
  display: flex !important;
  position: static !important;
  flex: none !important;
  width: 44px !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--text-schwach) !important;
  cursor: pointer;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none !important;
}
/* Der allgemeine Button-Stil aendert bei :hover/:active u. a. transform und
   box-shadow (fuer die "normalen" Buttons gedacht, die dabei nach oben
   "abheben" sollen). Hier ausdruecklich neutralisiert, damit der Knopf in
   der Reihe an Ort und Stelle bleibt statt sichtbar zu "hueppen". */
.passwort-anzeigen-btn:hover,
.passwort-anzeigen-btn:active,
.passwort-anzeigen-btn:focus-visible {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.passwort-anzeigen-btn:hover,
.passwort-anzeigen-btn:focus-visible {
  color: var(--gold);
}
.passwort-anzeigen-btn:active {
  color: var(--gold-hell);
}
.passwort-anzeigen-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.auge-icon { width: 19px; height: 19px; flex-shrink: 0; }

.hinweis-fehler {
  background: var(--rot-bg);
  border: 1px solid var(--rot);
  color: #f0b6bd;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hinweis-erfolg {
  background: var(--gruen-bg);
  border: 1px solid var(--gruen);
  color: #7bd3a8;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hinweis-ausblenden {
  opacity: 0;
  transform: translateY(-6px);
}
.hinweis-info {
  background: rgba(96, 130, 182, 0.14);
  border: 1px solid #6082b6;
  color: #b7cdea;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.hinweis-info-text { margin: 0; }

/* Dauerhaft-gesperrte-Konten-Warnung im Admin-Dashboard */
.sperr-warnung {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--rot-bg);
  border: 1px solid var(--rot);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.sperr-warnung-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(138, 47, 59, 0.4);
  color: #f0b6bd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sperr-warnung-icon svg { width: 19px; height: 19px; }
.sperr-warnung-inhalt { flex: 1; min-width: 0; }
.sperr-warnung-titel { font-weight: 600; color: #f0b6bd; font-size: 0.95rem; }
.sperr-warnung-namen { color: var(--text); font-size: 0.9rem; margin-top: 3px; }
.sperr-warnung-hinweis { color: var(--text-schwach); font-size: 0.82rem; margin-top: 5px; }

.admin-nachricht-zitat {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.woche-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.woche-nav a {
  color: var(--text-schwach);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.woche-nav a:hover {
  color: var(--gold-hell);
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.08);
}
.woche-nav a.aktiv {
  color: var(--gold-hell);
  border-color: var(--gold);
  background: rgba(201, 164, 92, 0.12);
}
.verlauf-nav { margin-bottom: 18px; }

.benutzer-name { font-weight: 500; }
.benutzer-login { color: var(--text-schwach); font-size: 0.82rem; }

.inaktiv-timer-anzeige {
  color: var(--text-schwach);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* Eigene Klasse fuer "Angemeldet als NAME" im Kopfbereich - bewusst
   getrennt von .benutzer-login (das weiterhin fuer "Benutzername: xyz" in
   der Admin-Benutzerliste verwendet wird), damit Aenderungen an der einen
   Stelle nicht versehentlich die andere mitbeeinflussen. */
.kopf-benutzer { color: var(--text-schwach); font-size: 0.85rem; }

.abschnitt-trenner {
  margin: 28px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
}

/* Zeile aus mehreren Formularfeldern, gefolgt vom Speichern/Anlegen-Button
   in einer EIGENEN Zeile darunter (statt in derselben Zeile am unteren Rand
   ausgerichtet). Grund: ein Hinweistext unter nur einem der Felder (z. B.
   "mindestens 6 Zeichen" beim Passwort) macht dieses eine Feld hoeher als
   die anderen - waere der Button Teil derselben, unten ausgerichteten Zeile,
   wuerde er dadurch sichtbar nach unten verschoben aussehen. Als eigene
   Zeile bleibt er immer an derselben Stelle, egal wie viel Text unter
   einem Feld steht. */
.formular-felder-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.formular-felder-zeile .feld { margin-bottom: 0; min-width: 150px; flex: 1; }

.neu-benutzer-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.neu-benutzer-form button { align-self: flex-start; }

/* Nachricht senden / Passwortaenderung anfordern - eigenes, kompaktes,
   spaltenweises Formular statt einer breiten Zeile, da eine Textfläche
   dabei ist. */
.admin-formular {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 24px;
  max-width: 480px;
}
.admin-formular .feld { margin-bottom: 0; }
.admin-formular button { align-self: flex-start; }

/* Liste mit Kontrollkaestchen zur Mehrfachauswahl (Nachricht senden,
   Passwortaenderung anfordern) - erlaubt beliebig viele Personen
   gleichzeitig auszuwaehlen, statt nur "eine Person" oder "alle". */
.mehrfachauswahl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f1420;
}
.mehrfachauswahl-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 5px 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mehrfachauswahl-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.mehrfachauswahl-option.alle-option {
  font-weight: 600;
  color: var(--gold-hell);
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
  margin-bottom: 2px;
}

.nachricht-karte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-left: 3px solid var(--gold);
}
.nachricht-text { margin: 0; flex: 1; min-width: 200px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }

.tabelle-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Neue Desktop-Ansicht der Uebersichtsseite: jeder Wochentag als eigener,
   zusammenhaengender Rahmen (Wochentag, Datum und Namensfeld gemeinsam) -
   ersetzt hier bewusst die Tabelle (weiterhin unveraendert genutzt in
   Dashboard/Admin-Bereich), damit der heutige Tag einen durchgehenden
   goldenen Rahmen bekommen kann, auf dem das "HEUTE"-Kennzeichen sitzt. */
.uebersicht-grid {
  display: grid;
  grid-template-columns: 90px repeat(5, 1fr);
  gap: 8px;
  align-items: start;
}
/* Zweites, komplett eigenstaendiges Raster fuer die Urlaubs-Kaesten,
   direkt unter dem ersten (siehe overview.ejs) - nutzt bewusst dieselbe
   Spalten-Vorlage wie oben, dadurch richten sich beide Raster garantiert
   exakt aneinander aus (identische Spaltenbreiten), ohne auf komplexere,
   fehleranfaelligere explizite Zeilen-/Spalten-Zuweisungen innerhalb
   EINES einzigen, gemischten Rasters angewiesen zu sein. */
.uebersicht-grid-urlaub { margin-top: 12px; }
/* Auf Handy/Tablet (siehe ".tag-karte-gruppe" in overview.ejs) soll der
   Kasten dagegen bewusst enger an sein eigenes Namensfeld heranruecken -
   der groessere Abstand zum NAECHSTEN Tag wird dort unabhaengig davon
   bereits durch ".tag-karte-gruppe" selbst gesteuert. */
.tag-karte-gruppe .urlaub-kasten { margin-top: 14px; }
.uebersicht-grid .zeit-label-grid {
  color: var(--text-schwach);
  font-size: 0.85rem;
  text-align: right;
  grid-row: 1;
  /* Zentriert sich selbst auf die Hoehe der ERSTEN Rasterzeile (in der
     ausschliesslich die Namensfelder liegen, siehe explizite
     "grid-row"-Zuweisungen in overview.ejs) - eine ZWEITE Rasterzeile
     fuer die Urlaubs-Kaesten existiert unabhaengig davon separat darunter,
     beeinflusst diese Zentrierung hier also nicht mehr mit. */
  align-self: center;
  white-space: nowrap;
}
/* ".tag-box" (Namensfeld) und ein eigenstaendiger ".urlaub-kasten" (siehe
   weiter unten) liegen inzwischen in zwei komplett getrennten, aber
   identisch aufgebauten Rastern uebereinander (siehe overview.ejs) -
   dadurch garantiert exakt gleiche Spaltenbreiten, ganz ohne
   Positionsberechnung. */
.tag-box {
  /* Ohne dies wuerde diese Rasterspalte selbst durch einen sehr langen,
     nicht umbrechbaren Namen ueber ihre eigentliche Spaltenbreite hinaus
     wachsen koennen, statt den Inhalt darin umbrechen zu lassen. */
  min-width: 0;
  /* Bewusst ueberall 2px (nicht 1px) - nur die FARBE unterscheidet den
     heutigen Tag, nie die Rahmenbreite selbst. Waere die Breite
     unterschiedlich (1px normal, 2px "heute"), koennte das Feld dadurch
     einen winzigen Millimeter hoeher werden als die anderen Tage in
     derselben Zeile (".uebersicht-grid" nutzt bewusst "align-items: start"
     statt "stretch", jeder Tag behaelt also seine eigene, inhaltsbasierte
     Groesse) - mit ueberall gleicher Breite kann das gar nicht erst
     passieren. */
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  position: relative;
}
.tag-box .tag-name {
  display: block;
  font-size: 0.78rem;
  color: var(--text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-box .tag-datum {
  display: block;
  font-size: 0.75rem;
  color: var(--text-schwach);
  margin-bottom: 8px;
}
/* Der heutige Tag bekommt einen goldenen statt grauen Rahmen, Wochentag/
   Datum in Gold statt Grau, und das "HEUTE"-Kennzeichen sitzt genau auf
   der oberen Rahmenlinie - identisch auf Desktop (.tag-box) und Handy
   (.tag-karte) umgesetzt. */
.tag-box.heute,
.tag-karte.heute {
  border: 2px solid var(--gold);
}
.tag-box.heute .tag-name,
.tag-box.heute .tag-datum,
.tag-karte.heute .tag-name {
  color: var(--gold-hell);
  font-weight: 600;
}
.heute-kennzeichen {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--gold);
  color: var(--bg-card);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

/* Feiertags-Kennzeichnung (Brandenburg) - dezenter violetter Akzent, sowohl
   fuer die Tag-Box/Karte der Uebersichtsseite als auch fuer die
   Tabellen-Kopfzeile (Dashboard/Admin-Bereich) und den Jahresverlauf-
   Kalender. Faellt "heute" zufaellig auf einen Feiertag, bekommt der
   goldene "Heute"-Rahmen bewusst weiterhin Vorrang - der Name des
   Feiertags wird trotzdem immer mit angezeigt. */
.tag-box.feiertag:not(.heute) { border-color: #8b5cb4; }
.tag-karte.feiertag:not(.heute) { border-color: #8b5cb4; }
.plan-tabelle th.feiertag { color: #c39ee0; }
/* Eigener, deutlich sichtbarer Hinweis-Balken (statt kleinem Text direkt in
   den ohnehin schon vollen Tages-Feldern) - erscheint einmal pro Feiertag
   oberhalb der Wochenuebersicht/-tabelle bzw. unterhalb des Kalendermonats.
   Der Name des Feiertags bekommt dabei bewusst eine eigene, groessere
   Zeile in der Serifenschrift statt in einer eng gedraengten Klammer zu
   stehen - das wirkt aufgeraeumter, besonders auf dem Handy. */
.feiertag-banner {
  background: rgba(139, 92, 180, 0.1);
  border: 1px solid #6b4a8a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.feiertag-banner-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e9d6f5;
  font-size: 0.82rem;
  font-weight: 600;
}
.feiertag-banner-icon {
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1;
}
.feiertag-banner-name {
  color: #c39ee0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 3px;
  margin-left: 23px;
}
.kalender-tag.feiertag:not(.belegt) {
  border-color: #6b4a8a;
  background: rgba(139, 92, 180, 0.08);
}

/* Karten-Ansicht fuer sehr schmale Bildschirme (ersetzt die Tabelle) */
.mobile-plan { display: none; }
.tag-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  background: rgba(255,255,255,0.02);
  position: relative;
}
/* Innerhalb des neuen Umschlags (siehe ".tag-karte-gruppe" weiter unten,
   nur auf der Uebersichtsseite genutzt) uebernimmt DER Umschlag selbst
   den Abstand zum naechsten Tag - der eigene, obige Standard-Abstand
   wuerde sich sonst zusaetzlich draufaddieren. In dashboard.ejs (das
   diesen Umschlag nicht nutzt) bleibt der Standard-Abstand oben
   unveraendert wirksam. */
.tag-karte-gruppe .tag-karte { margin-bottom: 0; }
/* Neuer, aeusserer Umschlag um ".tag-karte" und den (falls vorhanden)
   folgenden ".urlaub-kasten" - als Flex-Container verschmelzen die
   Raender seiner beiden Kinder NICHT automatisch miteinander (anders als
   bei zwei direkt aufeinanderfolgenden, normalen Bloecken), wodurch sich
   der Abstand ZWISCHEN ihnen unabhaengig von dem Abstand ZUM naechsten
   Tag einstellen laesst - genau das war vorher nicht zuverlaessig
   moeglich. */
.tag-karte-gruppe {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
}
.tag-karte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.tag-karte-kopf .tag-name { font-weight: 600; color: var(--gold-hell); font-size: 0.95rem; }
.tag-karte-kopf .tag-datum-mobil { color: var(--text-schwach); font-size: 0.8rem; }
.tag-karte-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.tag-karte-zeile:first-of-type { border-top: none; }
/* flex-shrink:0 und white-space:nowrap verhindern, dass diese Zeitangabe
   jemals zusammengedrueckt wird und dadurch mitten im Text ("16:00" / "Uhr")
   umbricht - das konnte passieren, wenn die Namens-/Button-Kombination
   daneben (z. B. "Austragen", breiter als "Eintragen") auf einem schmalen
   Bildschirm mehr Platz beansprucht hat. Die Zeit bleibt jetzt garantiert
   einzeilig, ganz unabhaengig davon, was sonst noch in der Zeile steht. */
.tag-karte-zeile .zeit { color: var(--text-schwach); font-size: 0.85rem; min-width: 62px; flex-shrink: 0; white-space: nowrap; }
.tag-karte-zeile .formular-slot {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
/* Die feste Hoehe von .slot (siehe oben) ist fuer die Tabellenansicht
   gedacht - in dieser kompakten, einzeiligen Kartenzeile waere sie
   unpassend hoch. Hier reicht die natuerliche, inhaltsbasierte Groesse. */
/* Auch hier feste Groesse (Breite UND Hoehe), passend kompakter fuer diese
   einzeilige Kartenzeile - die Zentrierung (display:flex etc.) erbt die
   Regel bereits von .slot weiter oben, hier wird nur Groesse/Abstand
   angepasst. Vorher war hier bewusst "auto" gesetzt, wodurch kuerzere
   Namen (z. B. "Rico") sichtbar schmalere Faecher bekamen als laengere
   (z. B. "Robert") - genau das, was auch in der Tabellenansicht behoben
   wurde, fehlte hier noch. */
.tag-karte .slot { min-width: auto; width: 88px; height: 40px; padding: 4px 8px; font-size: 0.82rem; flex-shrink: 0; }
.tag-karte-zeile select { max-width: 130px; font-size: 0.8rem; padding: 6px 4px; }

/* Handy/Tablet: Namensfeld und Eintragen/Austragen-Button (bzw. im
   Admin-Bereich das Auswahlfeld) stehen uebereinander statt nebeneinander -
   beide gleich breit, damit es wie ein zusammengehoeriger Block wirkt,
   statt dass ein schmaleres Namensfeld ueber einem breiteren Button/
   Auswahlfeld "schwebt". Gilt einheitlich fuer die normale Benutzer-Ansicht
   und den Admin-Bereich - aber gezielt NUR fuer Zeilen, in denen tatsaechlich
   ein Formular ODER ein Urlaubs-Kasten danebensteht (":has(form, .urlaub-kasten)"):
   Ein Urlaubs-Kasten kann naemlich auch OHNE ein Eintragen-Formular
   vorkommen (z. B. wenn der Tag fuer die eigene Person gesperrt ist oder
   sie selbst an diesem Tag Urlaub hat) - ohne diese Ergaenzung blieb die
   Zeile in genau diesem Fall faelschlich nebeneinander statt untereinander
   (ein bereits gemeldeter, echter Fehler). Auf der oeffentlichen
   Uebersicht oder wenn ein Tag von einer ANDEREN Person belegt ist, gibt es
   weder ein Formular noch einen Urlaubs-Kasten in diesem Bereich - dort
   soll das Namensfeld weiterhin seine kompakte, feste Groesse behalten
   statt auf die volle Breite gestreckt zu werden. */
.tag-karte-zeile:has(form, .urlaub-kasten) { align-items: flex-start; }
.tag-karte-zeile:has(form, .urlaub-kasten) .zeit { padding-top: 9px; }
.tag-karte-zeile .formular-slot:has(form, .urlaub-kasten) {
  flex-direction: column;
  align-items: stretch;
}
.tag-karte-zeile .formular-slot:has(form, .urlaub-kasten) .slot { width: 100%; }
/* Genau dieselbe volle Breite auch fuer den Urlaubs-Kasten in der
   mobilen Kartenansicht - passend zur Desktop-Regel weiter oben. */
.tag-karte-zeile .formular-slot .urlaub-kasten { width: 100%; box-sizing: border-box; }
.tag-karte-zeile .formular-slot form,
.tag-karte-zeile .formular-slot form select,
.tag-karte-zeile .formular-slot form button {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
/* Name im Auswahlfeld mittig statt (wie bei <select> ueblich) linksbuendig -
   passt optisch besser zum zentrierten Namensfeld direkt darueber. */
.tag-karte-zeile .zuweisen-form select {
  text-align: center;
  text-align-last: center;
}

.fussnote { text-align: center; color: var(--text-schwach); font-size: 0.78rem; margin-top: 20px; }
.fussnote.links { text-align: left; }

/* Sicherheitsprotokoll (/admin/protokoll) - im Stil eines kleinen
   Kassenbons/Tickets: alle Kategorien stehen IMMER da (auch mit 0
   Eintraegen), jede einzeln auf-/zuklappbar, durch gestrichelte Linien
   getrennt statt einzelner Karten pro Kategorie. */
.protokoll-ticket { padding: 26px 30px; position: relative; }
.protokoll-ticket-titel {
  text-align: center;
  color: var(--gold-hell);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.protokoll-ticket-stand { text-align: center; color: var(--text-schwach); font-size: 0.72rem; margin-bottom: 20px; }

.protokoll-zeile { border-bottom: 1px dashed var(--border); }
.protokoll-zeile:last-of-type { border-bottom: none; }
.protokoll-zeile summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.protokoll-zeile summary::-webkit-details-marker { display: none; }
.protokoll-zeile-name { font-size: 0.88rem; }
.protokoll-zeile-anzahl { font-weight: 700; font-size: 0.88rem; flex-shrink: 0; }
.protokoll-zeile-inhalt { padding: 0 0 10px; }
.protokoll-zeile-eintrag {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-schwach);
  padding: 6px 0 6px 4px;
  border-top: 1px solid var(--bg);
}
.protokoll-zeile-eintrag-haupt { color: var(--text); font-weight: 600; }

/* Farbvarianten je Kategorie - leere Kategorien (0 Eintraege) sind bewusst
   in dieser Farbe trotzdem sichtbar (nicht komplett ausgegraut), damit
   erkennbar bleibt, um welche Art von Ereignis es sich handelt. */
.protokoll-akzent-rot .protokoll-zeile-name,
.protokoll-akzent-rot .protokoll-zeile-anzahl { color: #f0b6bd; }
.protokoll-akzent-gold .protokoll-zeile-name,
.protokoll-akzent-gold .protokoll-zeile-anzahl { color: var(--gold-hell); }
.protokoll-akzent-grau .protokoll-zeile-name,
.protokoll-akzent-grau .protokoll-zeile-anzahl { color: var(--text-schwach); }
.protokoll-akzent-gruen .protokoll-zeile-name,
.protokoll-akzent-gruen .protokoll-zeile-anzahl { color: #8fd4b0; }
.protokoll-akzent-lila .protokoll-zeile-name,
.protokoll-akzent-lila .protokoll-zeile-anzahl { color: #c39ee0; }

/* Angedeuteter, gezackter unterer Rand wie bei einer echten Kassenquittung -
   rein dekorativ. */
.protokoll-ticket-zickzack {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background-image: repeating-linear-gradient(-45deg, var(--bg) 0, var(--bg) 5px, transparent 5px, transparent 10px);
  background-color: var(--bg-card);
  border-radius: 0 0 12px 12px;
}

/* Bot-Fallen-Versuche: eigene, verschachtelte Ebene innerhalb der
   "Automatisierte Anmelde-Versuche"-Zeile oben - pro IP-Adresse wiederum
   einzeln auf-/zuklappbar (siehe admin-protokoll.ejs). */
.bot-versuche-inhalt { padding: 4px 0 4px 4px; }
.bot-versuch-eintrag {
  border-bottom: 1px dashed var(--border);
}
.bot-versuch-eintrag:last-child { border-bottom: none; }
.bot-versuch-eintrag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bot-versuch-eintrag summary::-webkit-details-marker { display: none; }
.bot-versuch-eintrag summary::before {
  content: '▸';
  font-size: 0.72rem;
  color: var(--text-schwach);
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.bot-versuch-eintrag[open] summary::before { transform: rotate(90deg); color: #c39ee0; }
/* Eine IPv6-Adresse kann deutlich laenger sein als eine gewohnte IPv4-
   Adresse (z. B. "2001:0db8:85a3:0000:0000:8a2e:0370:7334") - auf einem
   schmalen Bildschirm koennte sie sonst die Anzahl-Anzeige daneben
   verdraengen oder die Zeile sprengen. Darf umbrechen, die Anzahl bleibt
   dabei bewusst immer an fester Breite und vollstaendig lesbar erhalten.
   Getestet mit einer echten, langen Beispiel-IPv6-Adresse. */
.bot-versuch-ip { color: var(--text); font-size: 0.82rem; font-family: monospace; min-width: 0; overflow-wrap: break-word; word-break: break-all; }
.bot-versuch-anzahl { color: var(--text-schwach); font-size: 0.74rem; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.bot-versuch-eintrag[open] .bot-versuch-anzahl { color: #c39ee0; }
.bot-versuch-zeiten { padding: 4px 0 8px 20px; }
.bot-versuch-zeit { display: flex; justify-content: space-between; color: var(--text-schwach); font-size: 0.76rem; padding: 3px 0; }
.bot-versuch-mehr { color: var(--text-schwach); font-size: 0.72rem; font-style: italic; text-align: center; padding-top: 6px; }

/* Grosse, vollbreite Haupt-Aktionen (Anmelden, Passwort speichern, "Ich bin
   noch da") heben sich mit einer kraeftigen, durchgehenden Farbfuellung
   bewusst von den kleinen Nebenaktionen ab - klare visuelle Prioritaet. */
.breite-voll {
  width: 100%;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 12px 18px;
  font-size: 0.95rem;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #1a1408;
  box-shadow: 0 6px 18px rgba(201, 164, 92, 0.25);
}
.breite-voll:hover {
  background: linear-gradient(180deg, #ecd39c, var(--gold-hell));
  box-shadow: 0 8px 22px rgba(201, 164, 92, 0.4);
}

.btn-mit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

.zeitraum-kompakt { margin-top: -8px; margin-bottom: 16px; }

.kalender-scroll {
  width: 100%;
}

/* Bewusst CSS-Grid statt einer Tabelle: Eine Tabellenzelle haelt eine feste
   Hoehe browseruebergreifend nicht immer zuverlaessig ein (ein langer Name
   konnte eine einzelne Zelle sichtbar groesser wirken lassen als die
   uebrigen). Mit "grid-auto-rows" ist jede Tageszelle garantiert exakt
   gleich gross, ganz unabhaengig vom Inhalt. */
.kalender-wochentage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.kalender-wochentag {
  color: var(--text-schwach);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px;
  text-align: center;
}
.kalender-woche {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 64px;
  gap: 4px;
  margin-bottom: 4px;
}
.kalender-tag {
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  /* Genau wie bei .slot (Wochenuebersicht): Grid-Elemente haben
     browserseitig ebenfalls eine unsichtbare Mindesthoehe/-breite
     ("min-height/min-width: auto"), die die feste Zeilenhoehe von
     .kalender-woche (grid-auto-rows: 64px) uebersteuern kann, wenn der
     Inhalt (Tageszahl + Name) mehr Platz braucht - genau das fuehrte dazu,
     dass Zeilen MIT Eintraegen sichtbar hoeher wirkten als leere Zeilen.
     Erst mit min-height/min-width:0 wird die feste Groesse wirklich
     verbindlich durchgesetzt. */
  min-height: 0;
  min-width: 0;
  /* Zusaetzliche Absicherung: erzwingt, dass die Zelle wirklich die volle
     Hoehe ihrer Grid-Zeile ausfuellt, unabhaengig von etwaigen
     Browser-Eigenheiten beim automatischen "Strecken" von Grid-Elementen. */
  height: 100%;
  background: rgba(255,255,255,0.02);
}
.kalender-tag.ausserhalb {
  opacity: 0.35;
}
/* Ein bereits vergangener, nicht markierter Tag: kein Formular mehr (siehe
   urlaubsplan.ejs), stattdessen nur noch die Zahl selbst - etwas gedaempfter
   dargestellt, damit auf den ersten Blick erkennbar ist, dass dieser Tag
   nicht mehr angetippt werden kann. */
.kalender-tag.vergangen {
  opacity: 0.4;
}
.kalender-tag.belegt {
  border-color: var(--rot);
  background: var(--rot-bg);
}
/* Tageszahl klein in der Ecke, damit der Name darunter (bzw. bei einem
   Eintrag mittig ueber die ganze Zelle) den meisten Platz bekommt. */
.kalender-tag .tag-nr {
  position: absolute;
  top: 5px;
  left: 6px;
  font-size: 0.68rem;
  color: var(--text-schwach);
}
.kalender-tag-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.kalender-tag .eintrag-name {
  font-size: 0.85rem;
  color: #f0b6bd;
  font-weight: 600;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.15;
}

/* ---------- Urlaubsplan ---------- */
.urlaubsplan-monatsnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.urlaubsplan-monatsnav a {
  color: var(--text-schwach);
  text-decoration: none;
  font-size: 1.3rem;
  padding: 8px 18px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  /* Siehe ausfuehrliche Begruendung bei "button, input[type=submit]" weiter
     oben - verhindert dieselbe, kurze Wartezeit auf eine Doppel-Tipp-Geste
     bei schnellem, mehrfachem Antippen der Monats-Pfeile. */
  touch-action: manipulation;
}
.urlaubsplan-monatsnav a:hover { color: var(--gold-hell); }
.urlaubsplan-monatsname { font-size: 0.95rem; font-weight: 500; }

/* Jeder Tag ist jetzt ein eigenes, sofort absendendes Formular (statt
   einer Checkbox mit separatem "Speichern"-Knopf) - antippen traegt sofort
   ein bzw. wieder aus, genau wie beim normalen Ein-/Austragen. */
.urlaub-tag-form { position: absolute; inset: 0; }
.urlaub-tag-form button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-schwach);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.urlaub-tag-form button:hover {
  background: rgba(201, 164, 92, 0.08);
  color: var(--gold-hell);
  transform: none;
  box-shadow: none;
}
/* Markierter Zustand: dieselbe rote Farbgebung wie ein belegter Tag im
   normalen Kalender (.kalender-tag.belegt) - ein markierter Urlaubstag ist
   ja im selben Sinne "nicht verfuegbar", nur aus einem anderen Grund. */
.urlaub-tag.urlaub-markiert {
  border-color: var(--rot);
  background: var(--rot-bg);
}
.urlaub-tag.urlaub-markiert .urlaub-tag-form button {
  color: #f0b6bd;
  font-weight: 600;
}
.urlaub-tag.urlaub-markiert .urlaub-tag-form button:hover {
  background: rgba(178, 58, 72, 0.15);
  color: #fff;
}

.urlaubsplan-legende {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  color: var(--text-schwach);
  font-size: 0.8rem;
}
.urlaubsplan-legende-punkt {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--rot-bg);
  border: 1px solid var(--rot);
  display: inline-block;
  flex-shrink: 0;
}

/* Kleiner, zurueckhaltender Hinweis im Ein-/Austragen-Bereich (Benutzer)
   bzw. beim Zuweisen (Admin): wer hat an diesem Tag Urlaub. Bewusst
   dezenter als die eigentliche Belegungs-Anzeige, damit es nicht wie eine
   zweite, gleichwertige Meldung wirkt. */
/* Ersetzt das fruehere ".urlaub-hinweis" (reiner Fliesstext direkt unter
   der Zelle) durch einen eigenen, deutlich abgesetzten Kasten - siehe
   overview.ejs. Nutzt bewusst dieselbe Pillen-Optik wie
   ".heute-kennzeichen" (gleiche Groesse/Position), aber in Weiss/Grau
   statt Gold, damit beide klar auseinandergehalten werden koennen. */
.urlaub-kasten {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px 9px;
  /* Streckt sich immer auf die volle Breite seines umgebenden Elements
     (egal ob Rasterspalte im Desktop-Raster oder mobile Kartenzeile) -
     ohne diese ausdrueckliche Regel richtet sich die Breite sonst nur
     nach dem eigenen Inhalt, was den Kasten schmaler und dadurch optisch
     verschoben wirken laesst gegenueber dem Namensfeld direkt darueber,
     das die volle Breite einnimmt. */
  width: 100%;
  box-sizing: border-box;
  /* Die Pille (".urlaub-kennzeichen") ragt 10px nach oben ueber den
     Kasten hinaus (siehe "top: -10px" dort) - dieser kleine Abstand
     dient nur als minimale Sicherheits-Reserve dafuer. Die eigentliche,
     groessere Abstands-Gestaltung zum jeweils vorherigen Element
     uebernehmen andere, spezifischere Regeln (siehe
     ".uebersicht-grid-urlaub" fuer Desktop bzw.
     ".tag-karte-gruppe .urlaub-kasten" weiter unten fuer Handy/Tablet). */
  margin-top: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  /* WICHTIG: Ohne dies wuerde ein sehr langer, EINZELNER (nicht durch
     Leerzeichen/Bindestriche unterbrechbarer) Name den Kasten in die
     Breite wachsen lassen, statt in eine zweite Zeile umzubrechen - Flex-
     Elemente verweigern das Schrumpfen unter ihre "natuerliche"
     Inhaltsbreite standardmaessig ("min-width: auto"). */
  min-width: 0;
}
/* Nur am HEUTIGEN Tag wird der Kasten weiss hervorgehoben (passend zum
   goldenen Rahmen der Namens-Zelle direkt darueber) - an allen anderen
   Tagen bleibt er in der normalen, grauen Standardfarbe. */
.urlaub-kasten.heute { border-color: #fff; }
/* Auf der Ein-/Austragen-Seite (innerhalb von ".formular-slot") bewusst
   NICHT weiss - dort soll der Kasten unabhaengig vom heutigen Tag immer
   in der normalen, grauen Rahmenfarbe bleiben. */
.formular-slot .urlaub-kasten.heute { border-color: var(--border); }
.formular-slot .urlaub-kasten.heute .urlaub-kennzeichen { background: var(--border); color: var(--text); }
.urlaub-kennzeichen {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--border);
  color: var(--text);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.urlaub-kasten.heute .urlaub-kennzeichen { background: #fff; color: var(--bg-card); }
/* Feste Hoechstbreite (statt "100%", das sich am jeweils breitesten
   Inhalt in der Zeile orientieren wuerde): Ohne diese feste Grenze
   wuerde ein sehr langer Name zwar umbrechen, aber dabei versuchen,
   moeglichst breit zu bleiben - das haette die GESAMTE Rasterspalte (und
   dadurch, da alle Spalten gleich breit sind, auch alle NACHBAR-Spalten)
   unnoetig aufgeblaeht, selbst wenn dort z. B. nur ein kurzer Name wie
   "Mario" stand. Mit einer festen, kompakten Breite bricht ein langer
   Name stattdessen fruehzeitig in mehrere, schmalere Zeilen um. */
.urlaub-namen { text-align: left; max-width: 72px; }
.urlaub-name {
  font-size: 0.7rem;
  color: var(--gold-hell);
  /* Erzwingt einen Umbruch auch bei einer langen Zeichenkette OHNE
     Leerzeichen/Bindestriche (z. B. ein sehr langer Name) - verhindert,
     dass der Kasten dadurch in die Breite gedrueckt wird, statt einfach
     in eine zweite Zeile umzubrechen. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.urlaub-name.eigen { font-weight: 700; }


/* Eigene Liste aller bereits markierten Urlaubstage, unterhalb des
   Kalenders selbst - nach Monat gruppiert (jeder Monat einzeln auf-/
   zuklappbar), damit man nicht jeden Monat im Kalender selbst durchklicken
   muss, um einen Ueberblick ueber ALLE eigenen Urlaubstage zu bekommen. */
.urlaubsliste { margin-top: 22px; }
.urlaubsliste-titel {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--gold-hell);
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.urlaubsliste-monat { border-bottom: 1px dashed var(--border); }
.urlaubsliste-monat:last-of-type { border-bottom: none; }
.urlaubsliste-monat summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.urlaubsliste-monat summary::-webkit-details-marker { display: none; }
.urlaubsliste-monat summary::before {
  content: '▸';
  font-size: 0.78rem;
  color: var(--text-schwach);
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.urlaubsliste-monat[open] summary::before { transform: rotate(90deg); }
.urlaubsliste-monat-name { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.urlaubsliste-monat-anzahl { color: #f0b6bd; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.urlaubsliste-tage { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.urlaubsliste-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(178, 58, 72, 0.06);
  border-radius: 8px;
  padding: 6px 8px;
}
.urlaubsliste-datum {
  flex-shrink: 0;
  width: 34px;
  text-align: center;
  line-height: 1.05;
}
.urlaubsliste-datum-tag { display: block; color: #f0b6bd; font-size: 0.9rem; font-weight: 700; }
.urlaubsliste-datum-monat { display: block; color: #a86e78; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.03em; }
.urlaubsliste-wochentag { flex: 1; color: var(--text); font-size: 0.82rem; }
.urlaubsliste-loeschen {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(178, 58, 72, 0.2) !important;
  border: none !important;
  color: #f0b6bd !important;
  font-size: 0.68rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none !important;
}
.urlaubsliste-loeschen:hover {
  background: var(--rot) !important;
  color: #fff !important;
  transform: none !important;
}
/* Ersetzt den Entfernen-Knopf fuer den heutigen Tag (siehe urlaubsplan.ejs)
   - rein informativ, kein anklickbares Element. */
.urlaubsliste-heute-hinweis {
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--text-schwach);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.einklappbar summary {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-hell);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.einklappbar summary::-webkit-details-marker { display: none; }
.einklappbar summary::before {
  content: '▸';
  font-size: 0.85rem;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.einklappbar[open] summary::before { transform: rotate(90deg); }
.einklappbar-inhalt { margin-top: 18px; }

.benutzer-eintrag {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.benutzer-eintrag:last-of-type { border-bottom: none; }

/* Hebt das Admin-Konto (steht immer zuerst) etwas deutlicher von der Liste
   der normalen Benutzer darunter ab. */
.benutzer-eintrag-admin {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
}

.benutzer-eintrag summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.benutzer-eintrag summary::-webkit-details-marker { display: none; }
.benutzer-eintrag summary::after {
  content: '▸';
  color: var(--gold);
  font-size: 0.85rem;
  margin-left: auto;
  transition: transform 0.15s ease;
}
.benutzer-eintrag[open] summary::after { transform: rotate(90deg); }

.benutzer-eintrag[open] .benutzer-bearbeiten {
  padding: 6px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bearbeiten-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bearbeiten-form button { align-self: flex-start; }

/* Eigener "App installieren"-Hinweis (siehe pwa.js) - schwebt als kleine,
   abgerundete Karte kurz unterhalb des oberen Bildschirmrands, im selben
   Kartenstil wie der Rest der Seite (Farbverlauf, Schatten, goldener
   Rahmen), statt als schlichter, randloser Balken. */
.install-hinweis {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 5vw 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  font-size: 0.88rem;
  color: var(--text);
}
.install-hinweis-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(180deg, rgba(201,164,92,0.16), rgba(201,164,92,0.05)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.install-hinweis-icon svg { width: 22px; height: 22px; color: var(--gold-hell); }
.install-hinweis-text { flex: 1; min-width: 120px; line-height: 1.4; }
.install-hinweis-knopfleiste { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.install-hinweis-aktion { padding: 8px 16px; font-size: 0.82rem; }
.install-hinweis-schliessen {
  background: transparent !important;
  border: none !important;
  color: var(--text-schwach) !important;
  font-size: 1.3rem !important;
  line-height: 1 !important;
  padding: 2px 4px !important;
  box-shadow: none !important;
}
.install-hinweis-schliessen:hover { color: var(--gold-hell) !important; }

.inaktiv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 14, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.inaktiv-box {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 26px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.inaktiv-box p { margin: 0 0 18px; color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.inaktiv-countdown { color: var(--gold-hell); font-weight: 700; }

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 820px) {
  .inhalt { max-width: 100%; }
  .karte { padding: 22px 18px; }
  .formular-felder-zeile .feld { min-width: 130px; }

  /* Ab Tablet-Breite Kartenansicht statt breiter Tabelle, damit man
     nicht mehr horizontal scrollen muss */
  .tabelle-scroll { display: none; }
  .uebersicht-grid { display: none; }
  .mobile-plan { display: block; }

  /* Jede Navigations-Pille als eigene, volle Zeile untereinander - genau
     wie auf dem Handy (siehe dieselbe Regel weiter unten, dort
     ausfuehrlicher erklaert). Ohne das faellt genau bei Tablet-Breiten ein
     unschoener Zwischenzustand auf: zu schmal, um alle Pillen (bei einem
     normalen Benutzer inzwischen 5 Stueck: Ein-/Austragen, Passwort
     aendern, Urlaubsplan, Uebersicht, Abmelden) noch in eine einzige Zeile
     zu quetschen, aber noch breit genug, dass der normale Zeilenumbruch
     (flex-wrap) sie ueber zwei ungleichmaessig gefuellte, jeweils fuer
     sich zentrierte Zeilen verteilt - das wirkt dann leicht "verschoben",
     als wuerden die Pillen nicht sauber untereinander/nebeneinander
     stehen. Bisher betraf das nur den Admin-Bereich mit weniger
     Eintraegen, faellt bei einem normalen Benutzer mit einem Eintrag mehr
     aber deutlich eher auf.
     Wird durch dieselbe, klare Untereinander-Anordnung wie auf dem Handy
     geloest, statt eine eigene, zusaetzliche Zwischenloesung nur fuer
     Tablet-Breiten einzufuehren. */
  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links a {
    text-align: center;
    padding: 10px 12px;
  }
}

/* ---------- Responsive: Handy ---------- */
@media (max-width: 600px) {
  .kopfzeile {
    padding: 18px 4vw 16px;
    gap: 12px;
  }
  .kopfzeile h1 { font-size: 1.35rem; }

  /* Sicherheitsprotokoll: Name und Status stehen auf dem Handy als eigene
     Zeilen untereinander statt eng gedraengt nebeneinander - der volle
     Zeitstempel mit Datum macht die Status-Seite sonst recht lang, was auf
     einem schmalen Bildschirm neben dem Namen kaum noch Platz liesse. */
  .protokoll-zeile-eintrag { flex-direction: column; gap: 2px; }
  .protokoll-zeile-eintrag-neben { font-size: 0.78rem; }

  .feiertag-banner { padding: 9px 12px; }
  .feiertag-banner-zeile { font-size: 0.7rem; }
  .feiertag-banner-icon { font-size: 1em; }
  .feiertag-banner-name { font-size: 0.85rem; margin-left: 19px; }

  /* Status-Zeile (Angemeldet als/Timer) und Navigations-Zeile stehen auf
     dem Handy jeweils als eigene, volle Zeile untereinander - klarer
     getrennt als eine einzige, dicht gedraengte Reihe. */
  .kopf-rechts {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
  }
  .kopf-status {
    width: 100%;
    justify-content: space-between;
  }
  /* Jede Pille als eigene, volle Zeile untereinander - genau wie bei
     .woche-nav weiter unten aus demselben Grund: bei "flex: 1 1 auto" mit
     Zeilenumbruch wuerden unterschiedlich viele Pillen pro Zeile (je nach
     Textlaenge) unterschiedlich breite Pillen zwischen den Zeilen ergeben.
     Das faellt jetzt staerker auf als frueher, da im Admin-Bereich
     inzwischen konsequent bis zu 6 Eintraege gleichzeitig angezeigt werden
     (vorher waren es je nach Seite mal nur 2, mal 5). */
  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links a {
    text-align: center;
    padding: 10px 12px;
  }

  /* Wochen-/Jahres-Navigation (Admin-Dashboard, Verlauf) auf dem Handy:
     jede Pille steht als eigene, volle Zeile untereinander - vorher konnte
     es je nach Textlaenge passieren, dass z. B. zwei Pillen nebeneinander
     passten und die dritte allein und ungleichmaessig in der naechsten
     Zeile haengen blieb. So sieht es immer gleichmaessig aus, egal wie
     viele Pillen es sind oder wie lang ihr Text ist. */
  .woche-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .woche-nav a {
    padding: 10px 14px;
    text-align: center;
  }

  .inhalt { padding: 8px 4vw 30px; }
  .karte { padding: 18px 14px; border-radius: 10px; margin-bottom: 18px; }

  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem !important; }

  .woche-titel { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Die Benutzerliste soll auf dem Handy fuer JEDE Zeile gleich aussehen -
     ohne diese Regel bricht nur die Admin-Zeile (wegen des zusaetzlichen
     "Admin"-Kennzeichens neben dem Namen) anders um als alle anderen
     Zeilen und wirkt dadurch im Vergleich verschoben. Jetzt steht bei
     jeder Zeile Name/Kennzeichen ueber dem Benutzernamen, der Pfeil sitzt
     fest oben rechts - unabhaengig davon, wie breit der Name ist. */
  .benutzer-eintrag summary {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-right: 26px;
  }
  .benutzer-eintrag summary::after {
    position: absolute;
    top: 10px;
    right: 0;
    margin-left: 0;
  }
  .benutzer-name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .benutzer-name .gesperrt-badge, .benutzer-name .badge-warnung { margin-left: 0; }

  /* Touch-Ziele in der mobilen Kartenansicht komfortabel groß halten */
  .tag-karte-zeile button.klein { padding: 9px 14px; font-size: 0.78rem; }
  .tag-karte-zeile select { padding: 9px 8px; }

  /* Der Inaktivitaets-Dialog entscheidet, ob man ausgeloggt wird - der
     Button dafuer soll auf dem Handy besonders komfortabel antippbar sein. */
  .inaktiv-box button { padding: 13px 16px; font-size: 0.95rem; }

  /* Anmelden, Passwort speichern: die wichtigsten Buttons der jeweiligen
     Seite verdienen auf dem Handy ebenfalls ein grosszuegiges Tippfeld. */
  .breite-voll { padding: 13px 16px; }

  /* Der Augen-Knopf zum Passwort-Anzeigen wird auf dem Handy komfortabler
     antippbar/gedrueckt haltbar - das Eingabefeld nutzt automatisch den
     verbleibenden Platz (width: calc(100% - <Knopfbreite>)). */
  .passwort-anzeigen-btn { width: 48px !important; }
  .passwort-feld input { width: calc(100% - 48px) !important; }

  .login-karte { max-width: 100%; }

  .formular-felder-zeile { flex-direction: column; }
  /* "flex: 1" (aus der Desktop-Zeilenansicht) verteilt bei "column" die
     Hoehe statt der Breite gleichmaessig zwischen den Feldern - das
     drueckt sie auf eine viel zu kleine Hoehe zusammen (das Eingabefeld
     im Passwort-Feld wirkte dadurch praktisch unsichtbar/nicht antippbar).
     "flex: none" laesst jedes Feld stattdessen einfach seine natuerliche,
     inhaltsbasierte Hoehe behalten. */
  .formular-felder-zeile .feld { min-width: 0; width: 100%; flex: none; }
  .neu-benutzer-form button,
  .bearbeiten-form button { width: 100%; }

  .admin-formular { max-width: 100%; }
  .admin-formular button { align-self: stretch; }

  /* Checkbox-Zeilen zur Mehrfachauswahl komfortabler antippbar machen. */
  .mehrfachauswahl-option { padding: 10px 0; }

  /* "App installieren"-Hinweis: etwas kompakter und mit komfortableren
     Touch-Zielen auf dem Handy. Die Knopfgruppe (Installieren + Schliessen)
     bricht dank margin-left:auto und flex-wrap bei Platzmangel als GANZE
     Einheit in eine eigene Zeile um, statt einzelne Buttons zu verstreuen. */
  .install-hinweis { padding: 12px 14px; margin: 12px 4vw 0; font-size: 0.85rem; }
  .install-hinweis-icon { width: 36px; height: 36px; }
  .install-hinweis-icon svg { width: 19px; height: 19px; }
  .install-hinweis-aktion { padding: 10px 16px; }
  .install-hinweis-schliessen { padding: 8px 12px !important; font-size: 1.5rem !important; }

  /* Der Loeschen-Knopf in der eigenen Urlaubstage-Liste ist am PC bewusst
     klein und dezent (22x22px) - auf dem Handy waere das aber eine zu
     kleine, schwer treffbare Tippflaeche. Groesser gesetzt, ohne dabei die
     Zeile selbst sprengen zu lassen. */
  .urlaubsliste-loeschen { width: 34px !important; height: 34px !important; font-size: 0.8rem !important; }
}