:root {
    --bg: #f1f5f9;
    --card: #ffffff;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --sidebar: #1c1b2b;
    --sidebar-2: #1e2b3c;
    --sidebar-ink: #cbd5e1;
    --sidebar-active: #5856D6;
    --primary: #5856D6;
    --primary-dark: #4744c7;
    --green: #16a34a;
    --amber: #d97706;
    --red: #dc2626;
    --blue: #2563eb;
    --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-lg: 0 10px 25px rgba(15,23,42,.08);
}

/* Das hidden-Attribut muss immer wirken. Ohne diese Regel setzt jede eigene
   display-Angabe es aus – ".btn { display: flex }" liess einen per JS
   versteckten Knopf sichtbar bleiben. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }

/* ---------- App-Grundgeruest ---------- */
.app { display: flex; min-height: 100vh; }

/* Seitenleiste (TimeMoto-Stil) */
.sidebar {
    width: 240px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-ink);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
    padding: 1.25rem 1rem; font-size: 1.2rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-decoration: none;
}
.sidebar-brand:hover span { text-decoration: underline; }
.sidebar-brand span { line-height: 1.2; overflow-wrap: anywhere; max-width: 100%; }
.sidebar-brand .logo {
    width: 48px; height: 48px; border-radius: 12px; background: var(--primary);
    display: grid; place-items: center; color: #fff; font-size: 1.6rem; flex-shrink: 0;
}
.logo.logo-icon svg { width: 62%; height: 62%; display: block; }
.brand-logo { height: auto; width: auto; max-width: 190px; max-height: 60px; object-fit: contain; border-radius: 8px; display: block; }
.sidebar nav { padding: .75rem 0; overflow-y: auto; flex: 1; }
.nav-group-label {
    padding: .9rem 1.25rem .35rem; font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; color: #64748b;
}
.nav-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem 1.25rem; color: var(--sidebar-ink); text-decoration: none;
    font-size: .92rem; border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--sidebar-2); color: #fff; }
.nav-item.active { background: var(--sidebar-2); color: #fff; border-left-color: var(--sidebar-active); }
.nav-item .ic { width: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: .92; }
.nav-svg { width: 20px; height: 20px; display: block; }
.sidebar-user {
    padding: .9rem 1.25rem; border-top: 1px solid rgba(255,255,255,.07);
    font-size: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.sidebar-user .who { color: #fff; font-weight: 600; }
.sidebar-user .role { color: #64748b; font-size: .75rem; }

/* Helles Farbschema: helle Seitenleiste statt dunkler. */
body.theme-hell { --sidebar: #ffffff; --sidebar-2: #eef2f7; --sidebar-ink: #475569; }
body.theme-hell .sidebar { border-right: 1px solid var(--line); }
body.theme-hell .sidebar-brand { color: var(--ink); border-bottom-color: var(--line); }
body.theme-hell .nav-group-label { color: #94a3b8; }
body.theme-hell .nav-item:hover,
body.theme-hell .nav-item.active { color: var(--ink); }
body.theme-hell .sidebar-user { border-top-color: var(--line); }
body.theme-hell .sidebar-user .who { color: var(--ink); }
body.theme-hell .sidebar-user .role { color: var(--muted); }
body.theme-hell .avatar-sm { color: var(--ink); }

/* ---------- Menuefuehrung "Kopfleiste oben" ----------
   Hauptbereiche (Zeiterfassung, Verwaltung, Einstellungen) als Reiter in
   einer Leiste am oberen Rand, links nur die Punkte des aktiven Bereichs.
   Die Leiste traegt die Farbe der Seitenleiste, damit die Farbwahl unter
   Erscheinungsbild in beiden Varianten gilt. */
.app-oben { flex-direction: column; }
.topnav {
    display: flex; align-items: stretch; gap: .75rem; background: var(--sidebar); color: var(--sidebar-ink);
    padding: 0 1.25rem; min-height: 56px; position: sticky; top: 0; z-index: 30;
}
.topnav-brand {
    display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.05rem;
    text-decoration: none; padding: .5rem 0; margin-right: .5rem; white-space: nowrap;
}
.topnav-brand:hover span { text-decoration: underline; }
.topnav-brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primary);
    display: grid; place-items: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.topnav-brand .brand-logo { max-height: 36px; max-width: 140px; }
.topnav-tabs { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.topnav-tabs::-webkit-scrollbar { display: none; }
.topnav-tab {
    display: flex; align-items: center; gap: .5rem; padding: 0 1rem; color: var(--sidebar-ink);
    text-decoration: none; font-size: .95rem; font-weight: 600; white-space: nowrap;
    border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.topnav-tab:hover { color: #fff; background: var(--sidebar-2); }
.topnav-tab.active { color: #fff; border-bottom-color: var(--sidebar-active); }
.topnav-tab .ic { display: inline-flex; opacity: .9; }
.topnav-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .85rem; padding: .5rem 0; }
.topnav-user .who { color: #fff; font-weight: 600; white-space: nowrap; }
.topnav-user .role { color: #94a3b8; font-size: .75rem; }
.app-body { display: flex; flex: 1; min-height: 0; }
.subnav {
    width: 220px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line);
    position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding: .5rem 0;
}
.subnav .nav-group-label { color: var(--muted); }
.subnav .nav-item { color: var(--ink); }
.subnav .nav-item:hover { background: var(--bg); color: var(--ink); }
.subnav .nav-item.active { background: var(--bg); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
body.theme-hell .topnav { border-bottom: 1px solid var(--line); }
body.theme-hell .topnav-brand, body.theme-hell .topnav-user .who,
body.theme-hell .topnav-tab:hover, body.theme-hell .topnav-tab.active { color: var(--ink); }
body.theme-hell .topnav-user .role { color: var(--muted); }

/* ---------- "Zu erledigen" (Uebersicht) ----------
   Eine Zeile je Thema: Zahl, Titel, Kurztext, Pfeil - die ganze Zeile ist
   der Link zum Abschnitt unter "Aufgaben". Rot = jemand wartet darauf. */
.aufgaben-karte { border-left: 4px solid var(--amber); }
.aufgaben-karte.ist-leer { border-left-color: var(--green); }
.aufgaben-karte .section-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.aufgaben-zeile {
    display: flex; align-items: center; gap: .85rem; padding: .55rem .8rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg); color: inherit; text-decoration: none;
}
.aufgaben-zeile:hover { border-color: var(--primary); background: var(--card); }
.aufgaben-zahl {
    min-width: 2.6rem; padding: .15rem .5rem; border-radius: 999px; text-align: center;
    font-weight: 700; font-variant-numeric: tabular-nums; background: #fef3c7; color: #92400e;
}
.ist-dringend .aufgaben-zahl { background: #fee2e2; color: #b91c1c; }
.aufgaben-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.aufgaben-text .muted { font-size: .85rem; }
.aufgaben-pfeil { color: var(--muted); font-size: .7rem; }
.aufgaben-leer { display: flex; align-items: center; gap: .5rem; }
.dot-gruen { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.dot-gelb  { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #d97706; flex-shrink: 0; }

/* Hauptbereich */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: 1rem; background: var(--card);
    border-bottom: 1px solid var(--line); padding: .85rem 1.75rem;
}
.topbar h1 { font-size: 1.25rem; margin: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.topbar .clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .95rem; }
.status-pill.my-status { text-decoration: none; font-size: .85rem; padding: .3rem .85rem; }
.status-pill.my-status:hover { filter: brightness(.97); }
.topbar .clock strong { color: var(--ink); }
.idle-timer {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted);
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem;
    font-variant-numeric: tabular-nums;
}
.idle-timer strong { color: var(--ink); }
.idle-timer.idle-warn { color: var(--red); border-color: var(--red); background: #fef2f2; }
.idle-timer.idle-warn strong { color: var(--red); }
@media (max-width: 640px) { .idle-timer { display: none; } }
/* Der Inhalt nutzt die ganze Breite des Bildschirms (Nutzerwunsch) - in
   beiden Menuefuehrungen. Die frueheren 1200 px waren eine Bremse fuer
   breite Monitore, auf denen Raster, Tabellen und Kacheln nur Platz
   verschenkten. Lange TEXTE und Formulare bleiben ueber .card-wide auf
   Lesebreite (860 px), sonst laufen Zeilen ueber 90 Zeichen. */
.content { padding: 1.75rem; width: 100%; }
.vendor-footer { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.vendor-footer a { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.vendor-footer .vendor-logo { height: 22px; width: auto; display: block; }
.login-wrap .vendor-footer { border-top: none; color: rgba(255,255,255,.6); margin-top: 1.5rem; }
.login-wrap .vendor-footer .vendor-logo { height: 24px; }

/* ---------- Login (ohne Sidebar) ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--sidebar);
    background-image: radial-gradient(circle at 30% 20%, #33306a 0%, #1c1b2b 58%); padding: 1rem; }
.login-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 2rem; width: 100%; max-width: 380px; }
/* Logo und Firmenname auf der Anmeldeseite. Ein breites Kundenlogo und der
   Name nebeneinander passen nicht immer in die 380 px der Karte – dann rutscht
   der Name in eine eigene Zeile darunter, statt gequetscht zu werden oder aus
   der Karte zu laufen. Beides bleibt mittig, damit es in jedem Fall wie
   gewollt aussieht. */
.login-card .logo-row { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: .55rem .8rem; margin-bottom: 1.25rem; text-align: center; }
.login-card .logo { width: 46px; height: 46px; border-radius: 11px; background: var(--primary); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.5rem; flex-shrink: 0; }
.login-card .logo-row .name { font-size: 1.35rem; font-weight: 700; }
/* Nicht fest 54 px hoch: Ein sehr breites Logo wuerde sonst an der
   Breitengrenze haengen bleiben und verzerrt wirken. So schrumpft es
   gleichmaessig, bis es passt. */
.login-card .brand-logo { height: auto; max-height: 54px; max-width: 100%; }
.login-card .logo-row .name { max-width: 100%; }

/* ---------- Zugriff verweigert ----------
   Dieselbe Karte wie die Anmeldung. Wer abgewiesen wird, hat meist nichts
   falsch gemacht - eine nackte Textzeile liest sich aber wie ein Defekt.
   Innerhalb der App (Rolle reicht nicht) steht die Karte mittig im
   Inhaltsbereich, ohne Anmeldung uebernimmt .login-wrap das Zentrieren. */
.denied-card { margin: 2.5rem auto; text-align: center; }
.login-wrap .denied-card { margin: 0 auto; }
.denied-icon { width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; background: rgba(220, 38, 38, .12); color: var(--red); }
.denied-icon .ui-ic { width: 28px; height: 28px; vertical-align: 0; }
.denied-card h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
.denied-card > p { color: var(--muted); margin: 0 0 1rem; }
.denied-hint { margin: -.4rem 0 1.25rem; }
.denied-actions { display: flex; flex-direction: column; gap: .5rem; }

/* Formularspalten an der Unterkante ausrichten. Braucht es, wenn eine
   Beschriftung laenger ist als die der Nachbarspalten und umbricht: Sonst
   rutscht deren Eingabefeld eine Zeile tiefer und die Reihe sieht verrutscht
   aus. Bewusst als eigene Klasse statt fuer alle .grid – bei Kaestchen und
   Schaltern ist die Ausrichtung oben richtig. */
.grid-boden { align-items: end; }

/* ---------- Raster (Team-Zeiten) ----------
   Mitarbeiter als Zeilen, Tage als Spalten. Zwei Monate sind rund 60 Spalten -
   die Tabelle scrollt deshalb waagerecht, waehrend Namensspalte und Kopfzeilen
   stehen bleiben. Ohne das verliert man beim Scrollen die Zuordnung. */
/* Raster statt Flexbox: Mit "flex: 1 1 130px" wurden die Stempel
   unterschiedlich breit - eine Zeile mit vier Knoepfen teilte den Platz anders
   auf als eine mit sechs, und lange Namen ("Berufsschule") schoben ihren Knopf
   ueber die gemeinsame Grundbreite hinaus. Feste Rasterspalten geben allen
   dieselbe Breite, ueber alle Zeilen hinweg. */
.stempel-leiste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.stempel { display: flex; align-items: center; justify-content: flex-start;
    gap: .45rem; padding: .5rem .7rem; min-width: 0;
    border: 2px solid transparent; border-radius: 10px; cursor: pointer; font: inherit;
    background: var(--card); box-shadow: var(--shadow); color: inherit; text-align: left; }
.stempel:hover { transform: translateY(-1px); }
/* Das Kuerzel darf nicht schrumpfen - sonst quetscht ein langer Name das
   Farbfeld zusammen, an dem man den Stempel erkennt. */
.stempel .stempel-kuerzel { flex: 0 0 auto; display: grid; place-items: center; min-width: 26px; height: 26px;
    border-radius: 7px; font-weight: 700; font-size: .8rem; background: rgba(0,0,0,.08); }
/* Zu lange Namen werden gekuerzt statt umgebrochen: Umbruch machte einzelne
   Knoepfe hoeher als ihre Nachbarn. Der volle Name steht im title. */
.stempel .stempel-name { font-size: .85rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stempel.ist-aktiv { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88,86,214,.18); }
.stempel-radierer .stempel-kuerzel { background: rgba(0,0,0,.12); }

/* Eigene, kraeftigere Linienfarbe als --line: Im Raster stehen die Zellen
   dicht an dicht und sind teils weiss auf weiss - mit der zarten Linie der
   uebrigen Oberflaeche liesse sich nicht erkennen, wo ein Tag aufhoert.

   Alle Masse haengen an Variablen, damit sich das Raster in Stufen
   vergroessern laesst. Fest verdrahtete Pixel gingen nicht: Die
   "right"-Abstaende der angehefteten Zahlenspalten und die "top"-Abstaende
   der Kopfzeilen muessen mitwachsen, sonst verrutscht beim Scrollen alles. */
/* ---------- Raster im Vollbild ----------
   Zwei Wege zum selben Bild: die echte Vollbild-Schnittstelle des Browsers
   (:fullscreen) und der Rueckfall als fester Kasten ueber der Seite
   (.ist-vollbild), wo die Schnittstelle fehlt oder verweigert wird. Beide
   Regeln muessen dasselbe aussehen - sonst haengt das Erscheinungsbild am
   Browser. */
#raster-vollbild-bereich:fullscreen,
#raster-vollbild-bereich.ist-vollbild {
    background: var(--bg); overflow: auto; padding: 1rem;
}
#raster-vollbild-bereich.ist-vollbild {
    position: fixed; inset: 0; z-index: 100;
}
/* Im Vollbild darf das Raster die ganze Hoehe nutzen - die 78vh-Bremse gilt
   der normalen Seite, auf der darunter noch etwas kommt. */
#raster-vollbild-bereich:fullscreen .raster-scroll,
#raster-vollbild-bereich.ist-vollbild .raster-scroll { max-height: none; }

.raster-scroll {
    --raster-linie: #cbd5e1;
    --z-breite: 22px;      /* Spaltenbreite je Tag */
    --z-hoehe: 26px;       /* Zeilenhoehe */
    --z-schrift: .72rem;
    --z-name: 165px;       /* Namensspalte */
    --z-zahl: 58px;        /* je Zahlenspalte rechts */
    --z-kopf1: 22px; --z-kopf2: 18px; --z-kopf3: 30px;
    overflow: auto; max-height: 78vh; border: 1px solid var(--raster-linie); border-radius: 10px;
    /* Bewusst KEIN scroll-behavior: smooth. Manche Browser fuehren einen so
       angestossenen Sprung gar nicht aus - dann tun die Wochenknoepfe nichts.
       Ein Wochensprung ist ein Schritt, kein Weg; er darf springen. */
}
.raster-scroll.ist-gross {
    --z-breite: 32px; --z-hoehe: 34px; --z-schrift: .85rem; --z-name: 200px; --z-zahl: 70px;
    --z-kopf1: 26px; --z-kopf2: 22px; --z-kopf3: 36px;
}
.raster-scroll.ist-sehr-gross {
    --z-breite: 44px; --z-hoehe: 44px; --z-schrift: 1rem; --z-name: 240px; --z-zahl: 84px;
    --z-kopf1: 30px; --z-kopf2: 26px; --z-kopf3: 42px;
}

/* Volle Breite: Bei einem Monat in normaler Groesse ist die Tabelle schmaler
   als die Karte - der Streifen rechts saehe nach einem Fehler aus. Die
   Tagesspalten dehnen sich dann gleichmaessig. Passt der Zeitraum nicht mehr
   hinein, greifen die min-width-Angaben und es wird wieder gescrollt. */
table.raster { border-collapse: separate; border-spacing: 0; font-size: var(--z-schrift); width: 100%; }
table.raster th, table.raster td { border-right: 1px solid var(--raster-linie);
    border-bottom: 1px solid var(--raster-linie);
    padding: 0; text-align: center; white-space: nowrap; }
table.raster thead th { position: sticky; background: var(--card); z-index: 2; font-weight: 600; }
table.raster tr.raster-monate th { top: 0; height: var(--z-kopf1); text-align: left; }
/* Der Monatsname bleibt am linken Rand haengen, solange sein Monat sichtbar
   ist. Zentriert stuende er bei einem breiten Monat ausserhalb des Bildes. */
table.raster tr.raster-monate th > span { position: sticky; left: var(--z-name);
    display: inline-block; padding: 0 .5rem; }
table.raster tr.raster-kw th { top: var(--z-kopf1); height: var(--z-kopf2); color: var(--muted); font-weight: 500; }
table.raster tr.raster-tage th { top: calc(var(--z-kopf1) + var(--z-kopf2)); height: var(--z-kopf3);
    min-width: var(--z-breite); }
/* Namensspalte und Zahlenspalten bleiben beim Scrollen stehen. */
table.raster .raster-name { position: sticky; left: 0; z-index: 3; background: var(--card);
    text-align: left; padding: .2rem .6rem; min-width: var(--z-name); font-weight: 600; }
table.raster thead .raster-name { z-index: 4; }
/* Der Name ist ein Link zu den Stammdaten - aber zurueckhaltend: In einer
   Liste aus zwanzig Namen waeren zwanzig blaue Links Unruhe. */
table.raster tbody .raster-name a { color: inherit; text-decoration: none; }
table.raster tbody .raster-name a:hover { color: var(--primary); text-decoration: underline; }
/* Auszubildende in derselben Bernsteinfarbe wie das Kennzeichen unter
   "Benutzer" (.badge-role-azubi) - wer beide Seiten benutzt, soll nicht zwei
   Farbsprachen lernen muessen. Der Streifen links traegt die Information
   auch dann, wenn die Flaeche zu blass gedruckt wird. */
table.raster tbody .raster-name.ist-azubi { background: #ffedd5; color: #9a3412;
    box-shadow: inset 3px 0 0 #ea580c; }
.raster-azubi { display: inline-block; margin-left: .35rem; padding: 0 .3rem;
    border-radius: 4px; background: #9a3412; color: #fff;
    font-size: .62rem; font-weight: 700; letter-spacing: .02em; vertical-align: .05em; }
/* Jugendschutz in Rot, nicht im Azubi-Bernstein: Es ist eine andere
   Eigenschaft (Alter statt Ausbildung) und die mit den strengeren Folgen. */
.raster-jung { display: inline-block; margin-left: .3rem; padding: 0 .3rem;
    border-radius: 4px; background: var(--red); color: #fff;
    font-size: .62rem; font-weight: 700; vertical-align: .05em; white-space: nowrap; }
/* Fester Berufsschultag: abgeleitet, nicht eingetragen - deshalb gestrichelt
   umrandet statt gefuellt. So ist er vom gestempelten "BS" zu unterscheiden. */
.raster-zelle.ist-schultag { background: rgba(154, 52, 18, .07); color: #9a3412;
    box-shadow: inset 0 0 0 1px rgba(154, 52, 18, .45); font-weight: 600; }
/* Etwas anderes liegt auf einem festen Schultag. Die Ecke oben rechts stoert
   den Inhalt nicht und faellt trotzdem auf - ein Tooltip allein liest nur,
   wer ohnehin schon stutzt. */
/* Zeitfeld mit "Jetzt"-Knopf. Bewusst KEIN align-items: stretch - das zog den
   Knopf auf die Hoehe des ganzen Labels (42 statt 37 px) und er stand dann
   hoeher als "Hinzufuegen" am Ende derselben Zeile. Mit "center" behaelt er
   seine normale Knopfhoehe und sitzt auf einer Linie mit Feld und Auswahl. */
.zeit-mit-jetzt { display: inline-flex; align-items: center; gap: .4rem; }
.zeit-mit-jetzt input { margin: 0; }
.zeit-mit-jetzt .btn { white-space: nowrap; margin: 0; }

.raster-zelle.hat-schulkonflikt { position: relative; }
.raster-zelle.hat-schulkonflikt::after { content: ""; position: absolute; top: 0; right: 0;
    border-width: 0 6px 6px 0; border-style: solid; border-color: transparent #9a3412 transparent transparent; }
/* Warnungen wie im Kalender: rotes ! = Arbeitstag ohne Buchung, gelb =
   Ausstempeln vergessen. Bei Zellen mit eigener Farbe (Dienst, Abwesenheit)
   warnt eine rote Ecke - dasselbe Muster wie beim Schulkonflikt. */
.raster-zelle.hat-fehlende-buchung { background: rgba(239,68,68,.14); color: #b91c1c; font-weight: 700; }
.raster-zelle.hat-offene-buchung { background: #fef3c7; }
.raster-zelle.hat-offene-buchung .raster-zeit { color: #92400e; font-weight: 700; }
.raster-zelle.hat-warnecke { position: relative; }
.raster-zelle.hat-warnecke::after { content: ""; position: absolute; top: 0; right: 0;
    border-width: 0 6px 6px 0; border-style: solid; border-color: transparent #dc2626 transparent transparent; }
/* Die drei Zahlenspalten haengen am rechten Rand fest - sie sind der Grund,
   warum man ueberhaupt scrollt, und muessen deshalb immer sichtbar bleiben. */
table.raster .raster-zahl { width: var(--z-zahl); min-width: var(--z-zahl); max-width: var(--z-zahl);
    padding: .2rem .4rem; font-variant-numeric: tabular-nums;
    background: var(--card); font-weight: 600; position: sticky; z-index: 3; }
table.raster .raster-z1 { right: calc(var(--z-zahl) * 2); border-left: 2px solid #94a3b8; }
table.raster .raster-z2 { right: var(--z-zahl); }
table.raster .raster-z3 { right: 0; }
table.raster thead .raster-zahl { z-index: 4; }
.raster-wt { display: block; font-size: .86em; color: var(--muted); line-height: 1.1; }
.raster-tag { display: block; line-height: 1.2; }

.raster-zelle { width: var(--z-breite); height: var(--z-hoehe); font-weight: 700; font-size: .95em; }
/* Gearbeitete Zeit: kleiner und ruhiger als ein Abwesenheits-Kuerzel. Sie ist
   der Normalfall - haette sie dasselbe Gewicht, faende das Auge die
   Abwesenheiten nicht mehr, um die es beim Planen geht. */
.raster-zeit { font-size: .74em; font-weight: 600; color: var(--muted); letter-spacing: -.02em; }
/* Rueckfall fuer selbst angelegte Arten: Sie tragen ihre Farbe am Element.
   Wo das fehlt (aeltere Ansichten, Druck ohne Farben), bleibt wenigstens ein
   erkennbarer Kasten stehen statt gar nichts. */
.abs-eigen { background: #e2e8f0; color: #1f2937; }
/* Dienste tragen ihre Farbe ebenfalls am Element; die Klasse ist nur der
   Rueckfall und macht sie im Quelltext auffindbar. */
.ist-dienst { background: #e0f2fe; color: #075985; }
/* Vor dem Stichtag rechnet die App nicht mit. Blass statt farbig: Diese Tage
   sind da, wirken aber nicht aufs Konto - sonst sucht man den Fehler in der
   Rechnung statt im Stichtag. */
.raster-zelle.vor-stichtag { opacity: .38; }
/* Waagerecht scrollende Tabelle in den Einstellungen (Dienste haben acht
   Spalten - auf einem schmalen Bildschirm passt das sonst nicht). */
.tabelle-scroll { overflow-x: auto; }
.raster-zelle.hat-zeit { background: rgba(16,185,129,.10); }
.raster-zelle { cursor: pointer; }
.raster-zelle[data-klickbar] { cursor: pointer; }
.raster-zelle[data-klickbar]:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.raster-zelle.ist-frei, table.raster th.ist-wochenende { background: rgba(100,116,139,.16); }
.raster-zelle.ist-feiertag, table.raster th.ist-feiertag { background: rgba(220,38,38,.14); color: var(--red); }
.raster-zelle.ist-zu { background: repeating-linear-gradient(45deg, rgba(100,116,139,.2) 0 4px, transparent 4px 8px); }
/* Heute als durchgehendes Band, nicht als Kasten je Zelle: Ein Rahmen um
   jede einzelne Zelle sah aus wie ein leeres Eingabefeld. */
.raster-zelle.ist-heute { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
table.raster th.ist-heute { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 2px 0 var(--primary);
    color: var(--primary); }
table.raster tbody tr:last-child .raster-zelle.ist-heute {
    box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 -2px 0 var(--primary); }
/* Beantragt, aber noch nicht entschieden: schraffiert statt gefuellt. */
.raster-zelle.ist-offen { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.raster-zelle.js-laeuft { opacity: .45; }

@media (max-width: 900px) {
    table.raster .raster-name { min-width: 110px; font-size: .68rem; }
}

/* Raster auf Papier / als PDF.
   Drei Dinge muessen sich aendern, sonst kommt nur ein Ausschnitt heraus:
   Der Kasten darf nicht mehr scrollen, die angehefteten Spalten muessen
   wieder mitlaufen, und die Farben muessen gedruckt werden - Browser lassen
   Hintergruende sonst weg, und dann sind alle Zellen weiss. */
@media print {
    .raster-scroll { max-height: none; overflow: visible; border: none; border-radius: 0; }
    table.raster { width: 100%; font-size: 7pt; }
    table.raster thead th,
    table.raster .raster-name,
    table.raster .raster-zahl { position: static; }
    table.raster thead { display: table-header-group; }      /* Kopf auf jeder Seite */
    table.raster tr { page-break-inside: avoid; }
    .raster-zelle, table.raster th, table.raster td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .raster-zelle { height: auto; padding: 1.5pt 0; }
    /* Der Rahmen ums Heute-Band druckt sich schlecht - auf Papier genuegt der
       Datumskopf, und ein grauer Kasten quer durch die Liste stoert eher. */
    .raster-zelle.ist-heute { box-shadow: none; }
}

/* ---------- Laufende Uhr (Ladebildschirm) ----------
   Aus HTML-Elementen statt SVG, damit sich die Zeiger in jedem Browser um
   denselben Punkt drehen. Groesse ueber --zc, Farbe ueber currentColor. */
.ze-clock { --zc: 92px; position: relative; display: block; color: #fff;
    width: var(--zc); height: calc(var(--zc) + var(--zc) * .12); flex-shrink: 0; }
.ze-clock-sm { --zc: 46px; }
.ze-crown { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: calc(var(--zc) * .26); height: calc(var(--zc) * .075);
    border-radius: calc(var(--zc) * .04); background: currentColor; }
.ze-crown::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: calc(var(--zc) * .07); height: calc(var(--zc) * .07); background: currentColor; }
.ze-face { position: absolute; left: 0; bottom: 0; width: var(--zc); height: var(--zc);
    border: calc(var(--zc) * .055) solid currentColor; border-radius: 50%; box-sizing: border-box; }
.ze-tick { position: absolute; left: 50%; top: calc(var(--zc) * .055);
    width: calc(var(--zc) * .035); height: calc(var(--zc) * .1); margin-left: calc(var(--zc) * -.0175);
    /* Drehpunkt = Mittelpunkt des Zifferblatts. Die Marke beginnt .11*zc unter
       der Aussenkante (Rahmen + Abstand), der Mittelpunkt liegt bei .5*zc. */
    background: currentColor; opacity: .55; transform-origin: 50% calc(var(--zc) * .39); }
.ze-t3 { transform: rotate(90deg); }
.ze-t6 { transform: rotate(180deg); }
.ze-t9 { transform: rotate(270deg); }
.ze-hand { position: absolute; left: 50%; bottom: 50%; background: currentColor;
    border-radius: calc(var(--zc) * .03); transform-origin: 50% 100%; }
.ze-hand-h { width: calc(var(--zc) * .055); margin-left: calc(var(--zc) * -.0275);
    height: calc(var(--zc) * .25); animation: ze-hand 8s linear infinite; }
.ze-hand-m { width: calc(var(--zc) * .04); margin-left: calc(var(--zc) * -.02);
    height: calc(var(--zc) * .35); animation: ze-hand 1.6s linear infinite; }
.ze-pin { position: absolute; left: 50%; top: 50%; width: calc(var(--zc) * .1); height: calc(var(--zc) * .1);
    margin: calc(var(--zc) * -.05) 0 0 calc(var(--zc) * -.05); border-radius: 50%; background: currentColor; }
@keyframes ze-hand { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Ladebildschirm bei der Anmeldung ---------- */
.splash { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
    background: var(--sidebar);
    background-image: radial-gradient(circle at 30% 20%, #33306a 0%, #1c1b2b 58%);
    animation: splash-in .18s ease both; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.5rem; text-align: center; }
.splash-logo { max-width: 260px; max-height: 78px; width: auto; height: auto; object-fit: contain; }
.splash-name { color: #fff; font-size: 1.3rem; font-weight: 700; }
.splash-text { color: rgba(255,255,255,.72); font-size: .9rem; letter-spacing: .02em; }
.splash-vendor { height: 26px; width: auto; margin-top: 1.4rem; opacity: .65; }
@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Karten & Raster ---------- */
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .85rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.card-narrow { max-width: 460px; }
.card-wide { max-width: 860px; }
.open-warning { border-color: #fca5a5; background: #fef2f2; }
.open-warning h2 { color: #b91c1c; }
.pending-warning { border-color: #93c5fd; background: #eff6ff; }
.pending-warning h2 { color: #1d4ed8; }
.note-box { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; }
.note-box ul { color: var(--ink); }
.over-warning { border-color: #fcd34d; background: #fffbeb; }
.over-warning h2 { color: #92400e; }
.card h2 { display: flex; align-items: center; gap: .5rem; }
/* flex-wrap + gap: Seit die Monats-Blaetter-Leiste der Team-Zeiten-Tabelle
   mit in der Zeile sitzt, muss sie auf schmalen Fenstern sauber umbrechen. */
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: .5rem 1rem; }

/* Symbole in Ueberschriften, Schaltflaechen und Hinweisen. Gleicher Icon-Satz
   wie in der Seitenleiste (siehe icon_paths()), damit links und rechts
   dieselbe Bildsprache steht. Groesse und Farbe folgen dem Text. */
.ui-ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.19em; }
.btn .ui-ic { width: 1.05em; height: 1.05em; }
.btn-small .ui-ic { width: 1em; height: 1em; }

.grid { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.dash-top { grid-template-columns: 1.1fr .9fr; align-items: start; }

/* Kennzahlen-Kacheln */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.stat-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.6rem; font-weight: 700; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--muted); font-size: .82rem; margin-top: .2rem; }

/* Grosse Stempeluhr */
.punch-clock { text-align: center; padding: .5rem 0 1rem; }
.punch-clock .big-time { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.punch-clock .big-date { color: var(--muted); margin-bottom: 1rem; }
.status-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; }
.pill-working { background: #dcfce7; color: #166534; }
.pill-working .dot { background: var(--green); }
.pill-break { background: #fef3c7; color: #92400e; }
.pill-break .dot { background: var(--amber); }
.pill-out { background: #e2e8f0; color: #475569; }
.pill-out .dot { background: #94a3b8; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff;
    color: var(--ink); cursor: pointer; font-size: .92rem; text-decoration: none; font-weight: 500; }
/* Einheitliches Hover-Prinzip fuer ALLE Knoepfe: Jeder wird spuerbar
   dunkler in seiner eigenen Farbe. Vorher wechselte der neutrale Knopf
   nur von Weiss zu #f8fafc - ein kaum sichtbarer Unterschied, waehrend
   Primaer- und Stempeltasten deutlich reagierten. */
.btn:hover { border-color: #94a3b8; background: #e9eef4; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-block { width: 100%; }
.btn-small { padding: .32rem .6rem; font-size: .82rem; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }
.btn-danger { color: var(--red); border-color: #fecaca; }
.btn-danger:hover { background: #fee2e2; border-color: #fca5a5; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-right { margin-left: auto; }

.stamp-buttons { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.kiosk-qr { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); text-align: center; }
.kiosk-qr-code { display: inline-block; line-height: 0; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.kiosk-qr-code svg { width: 140px; height: 140px; display: block; }
.kiosk-qr .muted { margin-top: .5rem; font-size: .82rem; }
.btn-stamp { padding: .95rem 1.75rem; font-size: 1.02rem; font-weight: 600; color: #fff; border: none; min-width: 140px; }
.btn-in { background: var(--green); }
.btn-in:hover { background: #15803d; }
.btn-out { background: var(--red); }
.btn-out:hover { background: #b91c1c; }
.btn-break { background: var(--amber); }
.btn-break:hover { background: #b45309; }
.inline { display: inline; }

/* ---------- Ansichtswechsel (Team-Zeiten) ----------
   Vier Knoepfe statt einer Auswahlliste. Jede Ansicht hat ihre eigene Farbe,
   damit man sie am Fleck wiedererkennt und nicht erst den Text lesen muss.
   Die aktive ist gefuellt, die uebrigen sind nur umrandet - gefuellt waeren
   alle vier ein Farbteppich, in dem nicht mehr auffaellt, wo man steht.
   Die Farbe steckt in --a-farbe, damit Umriss und Fuellung aus einer Angabe
   kommen und nicht auseinanderlaufen. */
/* Die Knopfreihe nimmt den uebrigen Platz der Zeile ein, statt links zu
   kleben und rechts einen leeren Streifen zu lassen. Die vier teilen ihn
   gleichmaessig (flex-basis 0) - so sind sie untereinander gleich breit,
   egal wie lang die Beschriftung ist. */
.ansicht-feld { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.ansicht-titel { font-size: .88rem; color: var(--muted); font-weight: 500; }
.ansicht-wahl { display: flex; gap: .4rem; flex-wrap: wrap; }
/* "min-width: fit-content" statt einer festen Mindestbreite: Im Raster steht
   die Reihe allein in der Zeile und zieht sich ueber die ganze Breite, in der
   Tabelle teilt sie sich die Zeile mit Monat, Jahr und Sortierung - dort
   schrumpfen die Knoepfe bis auf ihre Beschriftung, statt eine zweite Zeile
   zu erzwingen. */
.ansicht-btn { flex: 1 1 0; justify-content: center; min-width: fit-content;
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem;
    border: 2px solid var(--a-farbe); border-radius: 8px; background: #fff; color: var(--a-farbe);
    text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.ansicht-btn:hover { background: color-mix(in srgb, var(--a-farbe) 10%, #fff); }
.ansicht-btn.ist-aktiv { background: var(--a-farbe); color: #fff; box-shadow: var(--shadow); }
.ansicht-btn .ui-ic { width: 1.05em; height: 1.05em; }
.a-tabelle  { --a-farbe: #2563eb; }
.a-kalender { --a-farbe: #16a34a; }
.a-planer   { --a-farbe: #d97706; }
.a-raster   { --a-farbe: #7c3aed; }

/* Sprungmarke der Kennzahlen-Tabelle (Statistik): etwas Luft ueber der
   Ueberschrift, damit sie nach dem Sortieren nicht am oberen Rand klebt - und
   auf schmalen Geraeten zusaetzlich Platz fuer die dort angeheftete
   Kopfleiste, die den Anfang der Karte sonst verdeckt. */
#kennzahlen { scroll-margin-top: 1rem; }
@media (max-width: 720px) { #kennzahlen { scroll-margin-top: 4.5rem; } }

/* ---------- Formulare ---------- */
.form label, .form-inline label { display: block; margin-bottom: .85rem; font-size: .88rem; color: var(--muted); font-weight: 500; }
.form input, .form select, .form textarea,
.form-inline input, .form-inline select {
    display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem;
    border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; color: var(--ink); background: #fff;
}
.form input:focus, .form select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.form-inline { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline label { margin-bottom: 0; }
.form-inline input, .form-inline select { width: auto; }
.chk { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 400; }
.chk input { width: auto; display: inline; margin: 0; }
.chk-block { margin-top: 1.75rem; }
.weekdays { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .85rem; }
.weekdays legend { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }
.weekdays .chk { margin-right: .9rem; }

/* Soll-Stunden je Wochentag: umbrechendes Raster, jedes Feld breit genug lesbar */
.weekday-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .5rem; }
/* Stundenlohn ohne Gutschrift: nur Haken je Arbeitstag statt Zeitfeldern (27.10.2026). */
.arbeitstag-haken { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .2rem 0 .4rem; }
.form .arbeitstag-haken label.chk { display: inline-flex; margin: 0; }
.weekday-grid label { margin: 0; text-align: center; font-size: .82rem; font-weight: 600; color: var(--ink); }
.weekday-grid input { text-align: center; width: 100%; margin-top: .3rem; padding: .5rem .3rem; font-variant-numeric: tabular-nums; }
/* Vom Geburtsdatum gesteuerte Bereiche (Jugendschutz, Berufsschule) */
.is-hidden { display: none !important; }
.minor-note { margin: .2rem 0 .8rem; padding: .6rem .8rem; border-radius: 8px; font-size: .85rem;
    background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.school-toggle { margin: .2rem 0 .8rem; }

/* Wochentag als Ankreuzfeld (Berufsschultage) */
.weekday-grid label.chk-day { display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .5rem .3rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--bg); }
.weekday-grid label.chk-day input { width: auto; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; }
.weekday-grid label.chk-day:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ---------- Tabellen ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); }
.table thead th { color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.table tbody tr:hover { background: #f8fafc; }
.table tfoot th { border-top: 2px solid var(--line); font-size: .9rem; background: #f8fafc; }
.table-month td, .table-month th { white-space: nowrap; }
/* Erklaerzeile unter dem Tages-Saldo ("Soll 8:00 h entfaellt (Urlaub)"):
   bewusst gedeckt gefaerbt, damit die Saldo-Zahl die Hauptsache bleibt. */
.table-month .saldo-grund { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); line-height: 1.25; }
.row-weekend { background: #f8fafc; color: var(--muted); }
.row-today td { box-shadow: inset 3px 0 0 var(--primary); }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* DATEV-Dateivorschau: Rohzeilen mit Zeilennummern zur Fehlersuche.
   Die Nummern stehen im ::before und werden beim Kopieren NICHT
   mitgenommen - kopiert wird exakt der Dateiinhalt. */
.datei-vorschau summary { cursor: pointer; }
.datei-vorschau pre { margin: .6rem 0 .4rem; padding: .6rem .8rem; background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; overflow-x: auto;
    counter-reset: dz; font-size: .82rem; line-height: 1.5; }
.datei-vorschau pre code { display: block; counter-increment: dz; }
.datei-vorschau pre code::before { content: counter(dz); display: inline-block; min-width: 2.2em;
    margin-right: .8em; text-align: right; color: var(--muted); }

/* Badges */
.badge { display: inline-block; padding: .13rem .55rem; border-radius: 999px; font-size: .76rem; background: var(--line); color: var(--ink); font-weight: 500; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #dcfce7; color: #166534; }
/* Rolle und Sonderstatus in der Benutzerliste */
.badge-role-admin { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-dark); font-weight: 600; }
.badge-role-employee { background: #e2e8f0; color: #475569; }
.badge-role-azubi { background: #ffedd5; color: #9a3412; font-weight: 600; }
.badge-minor { background: #ffedd5; color: #9a3412; font-weight: 600; }
.badge-exempt { background: #f1f5f9; color: #64748b; font-style: italic; }
.badge-abteilung { background: #e0f2fe; color: #075985; }
.badge-open-nogo { background: #fef3c7; color: #92400e; }
.badge-open-none { background: #fee2e2; color: #991b1b; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-src { background: #e0f2fe; color: #075985; }
.badge-system { background: #ede9fe; color: #5b21b6; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-ok { background: #dcfce7; color: #166534; }

/* Statistik-Seite */
.stat-danger { border-color: #fca5a5; background: #fef2f2; }
.stat-danger .stat-value { color: #b91c1c; }
.saldo-pos-txt { color: var(--green); font-weight: 600; }
.saldo-neg-txt { color: var(--red); font-weight: 600; }
.stat-bars { display: flex; flex-direction: column; gap: .5rem; }
.stat-bar-row { display: grid; grid-template-columns: 64px 1fr 80px; align-items: center; gap: .75rem; }
.stat-bar-label { color: var(--muted); font-size: .85rem; }
.stat-bar-track { background: var(--bg); border-radius: 999px; height: 16px; overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.stat-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; }

/* Abwesenheitsarten */
.abs-urlaub { background: #dbeafe; color: #1e40af; }
.abs-krank { background: #fee2e2; color: #991b1b; }
.abs-feiertag { background: #ede9fe; color: #5b21b6; }
.abs-gleitzeit { background: #cffafe; color: #155e75; }
.abs-fortbildung { background: #dcfce7; color: #166534; }
.abs-berufsschule { background: #ffedd5; color: #9a3412; }
.abs-unbezahlt { background: #f1f5f9; color: #475569; }
.row-absence { background: #f0f9ff; }

/* Anwesenheits-Board */
/* Nebeneinander statt untereinander: Bei 60 Mitarbeitern ist eine einspaltige
   Liste seitenlang. Die Spalten richten sich nach der Breite – auf dem Handy
   bleibt es eine Spalte, am Bildschirm werden es zwei bis vier. */
.presence-list { display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.presence-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.presence-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sidebar-2); color: #fff; display: grid; place-items: center; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.presence-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kleiner Avatar (Seitenleiste, Benutzerliste) */
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--sidebar-2); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .82rem; flex-shrink: 0; overflow: hidden; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Avatar-Widget im Benutzerformular */
.avatar-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; background: #e2e8f0; color: #475569; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { font-size: 1.6rem; font-weight: 700; }
.avatar-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.av-camera { margin-top: .85rem; }
.av-video { width: 240px; max-width: 100%; border-radius: 10px; background: #000; display: block; }
.av-cam-buttons { display: flex; gap: .5rem; margin-top: .5rem; }
.av-hint { font-size: .82rem; }
.presence-main { flex: 1; min-width: 0; }
/* Verwaltung: Name + "seit … Uhr" springen zu den Buchungen des Tages. */
a.presence-link { color: inherit; text-decoration: none; border-radius: 6px; }
a.presence-link:hover .presence-name, a.presence-link:focus-visible .presence-name { color: var(--primary); text-decoration: underline; }
.presence-name { font-weight: 600; }
.presence-meta { color: var(--muted); font-size: .82rem; }

/* Flash */
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent; }
.flash-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.flash-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ---------- Abwesenheitskalender ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cal-modes { display: flex; gap: .4rem; }
.cal-nav { display: flex; align-items: center; gap: .75rem; }
.cal-nav strong { min-width: 8rem; text-align: center; }

.cal-title { font-weight: 700; margin-bottom: .5rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { text-align: center; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: .2rem 0; font-weight: 600; }
.cal-cell { min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: .3rem; background: #fff; overflow: hidden; }
.cal-empty { border: none; background: transparent; }
.cal-weekend { background: #f8fafc; }
.cal-holiday { background: #faf5ff; }
.cal-today { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-daynum { font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: .15rem; }
.cal-entries { display: flex; flex-direction: column; gap: 2px; }
.cal-entry { display: block; font-size: .72rem; padding: .08rem .35rem; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Offener Antrag: frueher weiss mit duennem Punktrand und 75% Deckkraft -
   auf den Mitarbeiter-Bildschirmen kaum zu erkennen. Jetzt behaelt der
   Eintrag die volle Farbe seiner Art und traegt eine deutliche weisse
   Schraffur ("noch nicht fix") samt kraeftigem gestricheltem Rand. */
.cal-pending { border: 2px dashed currentColor; font-weight: 700;
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.6) 0 5px, rgba(255,255,255,0) 5px 10px); }
.cal-more { font-size: .68rem; color: var(--muted); }
/* Kalendereintrag mit Kontextmenue (Urlaub & Anträge, Team-Zeiten): sieht aus wie ein Eintrag, ist ein Knopf. */
.cal-entries button.cal-entry { border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
[data-abw-menue] [data-abw-id] { cursor: pointer; }
[data-abw-menue] [data-abw-id]:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Das Menue selbst (assets/abwesenheit-menue.js) */
.abw-menue { z-index: 1000; min-width: min(250px, calc(100vw - 16px)); max-width: min(340px, calc(100vw - 16px)); box-sizing: border-box; background: var(--card, #fff); color: var(--text, inherit);
    border: 1px solid var(--border, #e2e8f0); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .35rem; }
.abw-menue-kopf { padding: .45rem .6rem .5rem; border-bottom: 1px solid var(--border, #e2e8f0); margin-bottom: .25rem; font-size: .9rem; }
.abw-menue-unter { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.abw-menue-punkt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .6rem;
    border-radius: 6px; font: inherit; font-size: .9rem; cursor: pointer; color: inherit; }
.abw-menue-punkt:hover, .abw-menue-punkt:focus-visible { background: var(--hover, rgba(0,0,0,.06)); }
.abw-menue-punkt.ist-gut { color: var(--green, #15803d); font-weight: 600; }
.abw-menue-punkt.ist-gefahr { color: var(--red, #dc2626); }
.abw-menue-form { padding: .55rem .6rem .45rem; display: grid; gap: .6rem; }
.abw-menue-titel { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.abw-menue .form .abw-menue-feld { display: block; margin: 0; font-size: .8rem; }
.abw-menue .form .abw-menue-feld input, .abw-menue .form .abw-menue-feld select { margin-top: .2rem; padding: .42rem .5rem; font-size: .9rem; }
.abw-menue-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.abw-menue .form .abw-menue-feld.chk { display: flex; align-items: center; gap: .4rem; color: var(--ink); }
.abw-menue .form .abw-menue-feld.chk input { width: auto; margin: 0; }
.abw-menue-leiste { display: flex; gap: .45rem; justify-content: flex-end; padding-top: .45rem; border-top: 1px solid var(--line, #e2e8f0); }
.abw-menue:has(.abw-menue-form) { min-width: min(300px, calc(100vw - 16px)); }
/* Abteilungs-Reiter ueber dem Urlaubsplan (Urlaub & Anträge) */
.abt-reiter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .9rem; }
.abt-reiter-titel { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; }
.abt-reiter a, .abt-reiter button { padding: .38rem .9rem; border-radius: 999px; border: 1px solid var(--line, #e2e8f0); background: var(--card, #fff);
    color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; line-height: 1.2; font-family: inherit; cursor: pointer; }
.abt-reiter a:hover, .abt-reiter button:hover { border-color: var(--primary); color: var(--primary); }
.abt-reiter a.ist-aktiv, .abt-reiter button.ist-aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Jahres-Abschnitte in der Antrags-Karte (30.10.2026): Jahreszahl als Zwischen-
   ueberschrift ueber der jeweiligen Tabelle, Anzahl klein daneben. */
.antrag-jahr { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .35rem; font-size: 1.05rem; font-weight: 700; }
.antrag-jahr .muted { font-size: .85rem; font-weight: 500; }
.antrag-jahr:first-of-type { margin-top: .4rem; }
.abt-reiter-hint { margin: 0 0 0 .3rem; }
/* Reiter in den Einstellungen (Abwesenheitsarten, 26.10.2026): Name plus aktueller
   Stand in einer zweiten, kleinen Zeile - deshalb kein Pillen-Radius. */
.einst-reiter a { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; border-radius: 12px; padding: .45rem .9rem; }
.einst-reiter-stand { font-size: .72rem; font-weight: 400; opacity: .75; }
/* Urlaub & Antraege: offene Antraege im Reiter rot hervorheben (darauf wartet jemand). */
.einst-reiter a.ist-dringend:not(.ist-aktiv) { border-color: #dc2626; }
.einst-reiter a.ist-dringend:not(.ist-aktiv) .einst-reiter-stand { color: #dc2626; font-weight: 700; opacity: 1; }
.wirkung-liste { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .6rem; font-size: .9rem; }
.wirkung-liste dt { font-weight: 700; }
.wirkung-liste dd { margin: 0; }
@media (max-width: 600px) { .wirkung-liste { grid-template-columns: 1fr; gap: .1rem; } .wirkung-liste dd { margin-bottom: .45rem; } }
/* Wochentags-Schalter (Personen nur im Urlaubsplan) */
.tag-schalter { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.tag-schalter label { position: relative; margin: 0; }
.tag-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-schalter span { display: inline-block; min-width: 2.6rem; text-align: center; padding: .42rem .55rem; border-radius: 8px;
    border: 1px solid var(--line, #e2e8f0); background: var(--card, #fff); color: var(--ink); font-weight: 600; font-size: .88rem; cursor: pointer; }
.tag-schalter input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.tag-schalter input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.up-formular { border-top: 1px solid var(--line, #e2e8f0); padding-top: 1rem; margin-top: .25rem; }
.up-formular .grid { margin-bottom: .75rem; }
.up-formular .up-leiste { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
@media (max-width: 720px) { .up-formular .grid-4 { grid-template-columns: 1fr 1fr; } }
/* Raster: Vorschau beim Ziehen einer Abwesenheit */
.raster-zelle.js-zieh-vorschau { outline: 2px dashed var(--primary); outline-offset: -3px; }
@media print { .abw-menue { display: none; } }
/* Ueberzaehlige Eintraege eines Tages: versteckt, bis "+N" die Zelle aufklappt. */
.cal-cell:not(.cal-alle) .cal-entry.cal-extra { display: none; }
button.cal-more { border: 0; background: none; padding: 0 .2rem; cursor: pointer; text-align: left;
    font-weight: 600; text-decoration: underline dotted; }
button.cal-more:hover { color: var(--primary); }
@media print {
    .cal-cell .cal-entry.cal-extra { display: block !important; }
    button.cal-more { display: none; }
}

/* Warnmarkierung im Tag: Gehen vergessen / nicht gebucht */
.cal-warn { font-weight: 700; }
.warn-open { background: #fef3c7; color: #92400e; }
.warn-missing { background: #fee2e2; color: #991b1b; }
.cal-cell.cal-flag-open { background: #fffbeb; box-shadow: inset 0 0 0 2px #fcd34d; }
.cal-cell.cal-flag-missing { background: #fef2f2; box-shadow: inset 0 0 0 2px #fca5a5; }
.cal-mini-day.cal-flag-open { background: #fcd34d; color: #92400e; }
.cal-mini-day.cal-flag-missing { background: #fca5a5; color: #991b1b; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); align-items: center; }
/* Eintraege in der Legende: gleich hohe Pillen, nie gestreckt (align-items oben). */
.cal-legend > .cal-entry { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; padding: .22rem .6rem; font-size: .78rem; }
.cal-legende-titel { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: .15rem; }
.cal-legende-muster { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .8rem; color: var(--muted);
    padding: .2rem .6rem; border: 1px dashed var(--line); border-radius: 6px; white-space: nowrap; }
.cal-legende-muster .cal-time, .cal-legende-muster .cal-saldo { display: inline; margin: 0; font-size: .82rem; }
.cal-legende-muster .cal-saldo + .cal-saldo::before { content: "/"; color: var(--muted); font-weight: 400; margin: 0 .2rem 0 -.1rem; }
.cal-legende-trenner { width: 1px; align-self: stretch; min-height: 1.4rem; background: var(--line); margin: 0 .2rem; }
.cal-legende-hinweis { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
@media (max-width: 720px) { .cal-legende-trenner { display: none; } .cal-legende-hinweis { margin-left: 0; flex-basis: 100%; } }
/* Legende OBEN als klickbarer Filter: Knoepfe statt Spans, ausgeschaltete
   Arten werden blass und durchgestrichen. */
.cal-legend-oben { margin-top: 0; margin-bottom: .9rem; padding-top: 0; border-top: none;
    padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.cal-legend-oben button.cal-entry { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .78rem; }
.cal-legend-oben button.cal-entry:hover { border-color: var(--muted); }
.cal-legend-oben button.ist-aus { opacity: .35; text-decoration: line-through; }
/* "PDF / Drucken" am Abwesenheitskalender: nur die Kalender-Karte drucken.
   Ueber .card statt ueber direkte Kinder - das haelt auch, wenn die Karte
   in einer Ansicht tiefer verschachtelt sitzt. */
@media print {
    body.druck-nur-abwkal .content .card:not(.abw-kal-karte) { display: none !important; }
}

/* Zwei-Monats-Ansicht */
.cal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cal-compact .cal-cell { min-height: 64px; }
.cal-compact .cal-entry { font-size: .68rem; }

/* Jahresansicht (12 Mini-Monate) */
.cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cal-mini-title { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; text-align: center; }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-head { text-align: center; font-size: .6rem; color: var(--muted); }
.cal-mini-day { text-align: center; font-size: .7rem; padding: .2rem 0; border-radius: 4px; color: var(--ink); }
.cal-mini-day.cal-weekend { color: var(--muted); }
.cal-mini-day.cal-has { font-weight: 700; cursor: help; }
.cal-mini-day.cal-today { outline: 1px solid var(--primary); }

@media (max-width: 900px) {
    .cal-two { grid-template-columns: 1fr; }
    .cal-year { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cal-year { grid-template-columns: 1fr; }
    .cal-cell { min-height: 68px; }
}

.muted { color: var(--muted); font-size: .9rem; }
.hint { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: .25rem; }
/* Klartext neben Dauer-Feldern: "9,25" -> "= 9 Std. 15 Min.". Leer nimmt er
   KEINEN Platz ein - eine reservierte Leerzeile drueckte das Stunden-Feld in
   einzeiligen Formularen (Konto-Korrektur) aus der Reihe. */
.dur-klartext { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.dur-klartext:not(:empty) { margin-top: .15rem; }
/* In einzeiligen Formularen (Konto-Korrektur) schwebt der Klartext unter dem
   Feld, statt die Reihe beim Tippen auseinanderzudruecken - form-inline
   richtet die Felder an der Unterkante aus, und ein wachsendes Label wuerde
   alle Nachbarn verschieben. */
.form-inline label { position: relative; }
.form-inline .dur-klartext:not(:empty) { position: absolute; top: 100%; left: 0; margin-top: .15rem; white-space: nowrap; }
.neg { color: var(--red); font-weight: 600; }
.pos { color: var(--green); font-weight: 600; }
.monthnav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
/* Zweite Werkzeugzeile des Rasters (Groesse, Ausschnitt, Vollbild, Druck).
   Eigene Zeile unter der Monatsnavigation: In einer gemeinsamen brachen die
   Knoepfe an zufaelliger Stelle um. */
.raster-werkzeuge { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
    margin: -.35rem 0 1rem; }
/* Benutzer bearbeiten: volle Breite als aufklappbare Zeile (kein Überlappen) */
.edit-row > td { background: #f8fafc; padding: 0; border-top: 2px solid var(--primary); }
.edit-panel { padding: 1.25rem; }
details summary { display: inline-block; list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: 1fr; }
    .dash-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .app { flex-direction: column; }
    /* Inhalt + Status-Kopfleiste zuerst, Menue darunter (Status sofort sichtbar). */
    .main { order: -1; }
    .sidebar { order: 1; }
    .topbar { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; gap: .5rem .8rem; padding: .7rem 1rem; }
    .topbar h1 { font-size: 1.1rem; }
    .topbar-right { gap: .7rem; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: column; }
    /* Kompakter Markenkopf: Icon und Name nebeneinander statt gestapelt. */
    .sidebar-brand { flex-direction: row; justify-content: center; gap: .5rem; padding: .8rem 1rem; font-size: 1.05rem; }
    .sidebar-brand .logo { width: 34px; height: 34px; font-size: 1.15rem; border-radius: 9px; }
    /* Menü als gleichmäßiges 2-Spalten-Raster mit sichtbaren Gruppen-Überschriften. */
    .sidebar nav { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .5rem .5rem .7rem; }
    .nav-group-label { display: block; grid-column: 1 / -1; padding: .55rem .4rem .1rem; }
    .nav-item { border-left: none; border-radius: 8px; padding: .6rem .55rem; font-size: .88rem; }
    .nav-item.active { border-left: none; }
    /* Kopfleiste auf dem Handy: Marke und Konto in der ersten Zeile, die
       Reiter darunter; die Unterpunkte als waagerechte Chip-Zeile ueber dem
       Inhalt. Die Status-Kopfzeile bleibt angeheftet, die Kopfleiste nicht -
       zwei angeheftete Leisten naehmen ein Drittel des Bildschirms. */
    .app-oben .topnav { position: static; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .35rem .75rem; }
    .app-oben .topnav-tabs { order: 3; width: 100%; min-height: 42px; margin: 0 -.75rem -.35rem; padding: 0 .5rem; }
    .app-oben .topnav-tab { padding: 0 .7rem; font-size: .9rem; }
    .app-oben .topnav-user .who, .app-oben .topnav-user .role { display: none; }
    .app-oben .app-body { flex-direction: column; }
    .app-oben .main { order: 0; }
    .app-oben .subnav { order: -1; position: static; width: 100%; height: auto; display: flex; gap: .25rem;
        overflow-x: auto; padding: .45rem .6rem; border-right: none; border-bottom: 1px solid var(--line); }
    .app-oben .subnav nav { display: flex; gap: .25rem; padding: 0; }
    .app-oben .subnav .nav-group-label { display: none; }
    .app-oben .subnav .nav-item { white-space: nowrap; border-radius: 999px; padding: .4rem .8rem; font-size: .85rem; }
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
    .table { display: block; overflow-x: auto; }
}

/* ---------- Terminal / Kiosk ---------- */
.terminal-body { background: var(--sidebar); background-image: radial-gradient(circle at 30% 10%, #1e3a44 0%, #16202e 60%); color: #fff; min-height: 100vh; }
.terminal-wrap { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; min-height: 100vh; display: flex; flex-direction: column; }
/* gap: auf einem hochkant stehenden Tablet reicht die Breite sonst nicht und
   Firmenname und Uhrzeit stossen aneinander ("Musterbetrieb15:10"). */
.terminal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* Grosses Logo/langer Firmenname duerfen die Uhr nicht aus dem Kopf
   druecken: die Marke darf schrumpfen (Name mit ...), die Uhr nie. */
.terminal-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; min-width: 0; }
.terminal-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-brand .brand-logo { flex-shrink: 0; }
.terminal-clock { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Urlaub/Gleitzeit am Terminal beantragen (aufklappbar unter den Tasten).
   Die Felder tragen die dunkle Terminal-Optik der PIN-Tasten - die hellen
   App-Felder sahen auf dem dunklen Kiosk aus wie hineinkopiert. */
.terminal-antrag { margin-top: 1.1rem; text-align: center; }
/* Die Zusatz-Knoepfe (Antrag, Uebersicht) tragen dieselbe Groesse wie die
   Stempeltasten und "Abbrechen" - kleinere Knoepfe verfehlt der Daumen auf
   dem Tablet. Farblich bleiben sie neutral: bunt ist nur, was sofort stempelt. */
.terminal-antrag-toggle { display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 3.4rem; font-size: 1.02rem; font-weight: 600; line-height: 1.15;
    background: transparent; color: #cbd5e1; border: 1px solid rgba(255,255,255,.2); }
/* Der allgemeine .btn:hover wird hell - auf dem dunklen Kiosk ergaebe das
   helle Schrift auf hellem Grund. Neutrale Terminal-Knoepfe hovern dunkel. */
.terminal-antrag-toggle:hover, .terminal-cancel:hover {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.terminal-antrag form { margin-top: .9rem; }
/* Felder fuellen gemeinsam die volle Breite der Tastenleiste (Abbrechen war
   sonst breiter als jedes Feld) und tragen die Groesse der PIN-Tasten. */
.antrag-felder { display: flex; gap: .8rem; flex-wrap: wrap; }
.antrag-felder label { flex: 1 1 12rem; font-size: 1rem; color: #cbd5e1; font-weight: 500; text-align: left; }
.antrag-felder select, .antrag-felder input {
    display: block; width: 100%; margin-top: .3rem; padding: .85rem .9rem; font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
    background: rgba(255,255,255,.08); color: #fff;
}
/* Ein einzelner Absende-Knopf gehoert mittig ueber die volle Breite - im
   Zwei-Spalten-Raster der Stempeltasten stuende er halb so breit links. */
.terminal-antrag .terminal-actions { grid-template-columns: 1fr; }

/* Zusatz-Knoepfe unter den Stempeltasten (Meine Abwesenheiten) und die
   Uebersichts-Liste in der dunklen Kiosk-Optik. */
.terminal-zusatz { margin-top: .7rem; text-align: center; }
.uebersicht-kennzahlen { text-align: center; font-size: 1.1rem; margin: .8rem 0 1rem; }
.uebersicht-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.uebersicht-liste li { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
    background: rgba(255,255,255,.06); }
.uebersicht-liste .ul-zeitraum { font-weight: 600; font-variant-numeric: tabular-nums; }
.uebersicht-liste .cal-entry { display: inline-block; font-size: .8rem; }
.uebersicht-liste .badge { margin-left: auto; }
.uebersicht-kennzahlen .ist-minus { color: #f87171; }
/* Tagesstand (gearbeitete Zeit, Rest bis zur gesetzlichen Pause) in der eigenen
   Uebersicht: abgesetzter Kasten, weil es die wichtigste Zeile der Seite ist. */
.terminal-zeit-heute { padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15); font-weight: 600; }
.antrag-felder select:focus, .antrag-felder input:focus { outline: none; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); }
.antrag-felder select option { background: #16202e; color: #fff; }
/* Kalender-Symbol und Datums-Platzhalter der Browser hell einfaerben. */
.antrag-felder input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.antrag-felder input::placeholder { color: #94a3b8; }
.terminal-title { text-align: center; font-weight: 600; font-size: 1.3rem; margin: .5rem 0 1.5rem; }
.terminal-flash { padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: 1.1rem; font-weight: 600; text-align: center; }

/* Abteilungs-Reiter ueber der Kachelwand (Terminal mit vielen Mitarbeitern). */
.terminal-abt { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -.5rem 0 1.25rem; }
.terminal-abt-tab { padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.terminal-abt-tab.is-aktiv { background: #fff; color: #16202e; border-color: #fff; }
.terminal-abt-fest { text-align: center; margin: -.75rem 0 1rem; color: #cbd5e1; font-size: 1.05rem; }
.terminal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1rem; }
.terminal-tile { display: flex; align-items: center; justify-content: center; min-height: 118px; padding: 1.25rem .75rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: #fff; text-decoration: none; transition: background .12s; }
.terminal-tile:hover, .terminal-tile:active { background: rgba(255,255,255,.14); }
/* Das Kuerzel ist der einzige Inhalt der Kachel und muss aus zwei Metern
   lesbar sein. clamp(), damit ein zur Unterscheidung verlaengertes Kuerzel
   ("M. Wa.") auf schmalen Kacheln nicht umbricht. */
.terminal-tile-label { font-size: clamp(1.5rem, 4.2vw, 2.2rem); font-weight: 700; text-align: center;
    letter-spacing: .02em; white-space: nowrap; }

.terminal-punch { max-width: 420px; margin: 0 auto; width: 100%; }
/* ---------- QR-Code auf der Kurzanleitung ---------- */
.sheet-qr { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 .6rem;
    padding: .8rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
.sheet-qr-code { flex-shrink: 0; width: 104px; height: 104px; }
.sheet-qr-code svg { width: 100%; height: 100%; display: block; }
.sheet-qr-text { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; line-height: 1.4; }
.sheet-qr-url { font-size: .74rem; color: #64748b; word-break: break-all; }
/* Kurzanleitung: App-Kasten mit zwei beschrifteten Codes ("App einrichten", "App laden") nebeneinander */
/* App-Kasten (26.10.2026, drei Codes): Codes in einer Reihe oben, Text in voller Breite darunter -
   untereinander (Stand 02.10. mit zwei Codes) wurde der Kasten mit dem dritten Code zu hoch. */
.sheet-qr-app { flex-direction: column; align-items: stretch; gap: .6rem; }
.sheet-qr-app .sheet-qr-text { flex: 1 1 auto; }
.sheet-qr-codes { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.4rem; justify-content: center; align-items: flex-start; }
.sheet-qr-app .sheet-qr-code { width: 118px; height: 118px; }
.sheet-qr-app .sheet-qr-mit { width: 128px; }
.sheet-qr-mit { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 104px;
    text-align: center; font-size: .74rem; line-height: 1.25; color: #334155; }
/* Kurzanleitung: Einrichtungs-Code ohne Kennwort - gross und abtippbar */
.sheet-code { display: block; margin: .35rem 0 .15rem; padding: .4rem .65rem; border: 1px dashed #94a3b8; border-radius: 6px; background: #fff; font-size: .88rem; }
.sheet-code strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .1em; }
.sheet-code small { display: block; margin-top: .15rem; color: #64748b; font-size: .74rem; }
/* Aushang "App laden" (A4): grosser Code, damit er auch aus einem Meter Abstand scannt */
.aushang-mitte { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin: 1.2rem 0 1rem; padding: 1rem;
    border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; page-break-inside: avoid; }
.aushang-qr { flex-shrink: 0; width: 260px; height: 260px; }
.aushang-qr svg { width: 100%; height: 100%; display: block; }
.aushang-text { display: flex; flex: 1 1 240px; flex-direction: column; gap: .25rem; font-size: 1.05rem; line-height: 1.45; }
.aushang-text .sheet-qr-url { font-size: .82rem; }
.aushang-schritte { font-size: .95rem; line-height: 1.5; page-break-inside: avoid; }
.aushang-schritte ol { margin: .4rem 0 .6rem 1.2rem; padding: 0; }
.aushang-schritte li { margin: .25rem 0; }
/* Handy & App: Store-Code neben dem Text */
.store-qr { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1rem; }
.store-qr-code { flex-shrink: 0; width: 120px; height: 120px; }
.store-qr-code svg { width: 100%; height: 100%; display: block; }
/* Kurzanleitung: "Als App aufs Handy" - zwei kurze Klickfolgen nebeneinander */
.sheet-app { margin: .7rem 0 .4rem; padding: .6rem .8rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .84rem; line-height: 1.4; page-break-inside: avoid; }
.sheet-app-kopf { margin-bottom: .35rem; }
.sheet-app-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sheet-app-spalte ol { margin: .2rem 0 0 1.1rem; padding: 0; }
.sheet-app-spalte li { margin: .1rem 0; }
.sheet-app-icon { display: inline-block; min-width: 1.2em; text-align: center; border: 1px solid #94a3b8; border-radius: 4px; padding: 0 .2em; font-size: .9em; line-height: 1.3; }
.sheet-app-note { margin-top: .35rem; color: #64748b; font-size: .78rem; }
@media print {
    /* Auf Papier zaehlt jeder Millimeter – und der Code muss scharf bleiben. */
    .sheet-qr { background: none; page-break-inside: avoid; }
}

/* ---------- Lizenzstand in der Kopfzeile ---------- */
.lizenz-pill {
    display: inline-flex; align-items: center; gap: .35rem; margin-left: .9rem;
    padding: .25rem .65rem; border-radius: 999px; text-decoration: none;
    background: var(--bg); border: 1px solid var(--line); color: var(--muted);
    font-size: .82rem; white-space: nowrap; flex-shrink: 0;
}
.lizenz-pill:hover { border-color: var(--primary); color: var(--ink); }
.lizenz-pill strong { color: var(--ink); }
/* Alle Plaetze belegt: auffaellig, aber nicht alarmierend – es ist kein Fehler,
   sondern eine Grenze, die erreicht wurde. */
.lizenz-pill.voll { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.lizenz-pill.voll strong { color: #92400e; }
/* Auf schmalen Bildschirmen nur die Zahlen – "Lizenzen" ist dann verzichtbar. */
@media (max-width: 860px) { .lizenz-wort { display: none; } }
@media (max-width: 520px) { .lizenz-pill { display: none; } }

/* ---------- Anwesenheit: Status per Klick umstellen (Admin) ---------- */
.presence-switch { position: relative; flex-shrink: 0; }
.presence-switch-btn { display: inline-flex; align-items: center; gap: .35rem; background: none;
    border: none; padding: 0; cursor: pointer; font: inherit; border-radius: 999px; }
.presence-switch-btn:hover .status-pill, .presence-switch-btn:focus-visible .status-pill {
    filter: brightness(.96); box-shadow: 0 0 0 2px var(--ring); }
.presence-caret { color: var(--muted); font-size: .7rem; }
.presence-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60; min-width: 210px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: .35rem; text-align: left; }
.presence-menu-head { font-size: .78rem; color: var(--muted); padding: .3rem .55rem .35rem; }
.presence-menu-item { display: block; width: 100%; text-align: left; padding: .5rem .55rem;
    background: none; border: none; border-radius: 7px; cursor: pointer; font: inherit; color: var(--ink); }
.presence-menu-item:hover { background: var(--bg); }
.presence-menu-hint { font-size: .74rem; color: var(--muted); padding: .4rem .55rem .25rem;
    border-top: 1px solid var(--line); margin-top: .3rem; line-height: 1.35; }

/* ---------- Hilfe (Handbuch in der App) ---------- */
.help-search { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.help-search input { width: 100%; }
.help-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .help-wrap { grid-template-columns: 1fr; } }

.help-toc { position: sticky; top: 1rem; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: .9rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.help-toc-title { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.help-toc a { display: block; padding: .38rem .5rem; border-radius: 8px; color: var(--ink);
    text-decoration: none; font-size: .9rem; line-height: 1.35; }
.help-toc a:hover { background: var(--bg); }

.help-body { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.5rem; max-width: 780px; line-height: 1.6; }
.help-body p { margin: 0 0 .8rem; }
.help-h1 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--primary); scroll-margin-top: 1rem; }
.help-body > .help-h1:first-child { margin-top: 0; }
.help-h2 { font-size: 1.02rem; margin: 1.4rem 0 .6rem; color: var(--primary-dark); }
.help-bullet { padding-left: 1.1rem; position: relative; margin-bottom: .5rem; }
.help-bullet::before { content: "•"; position: absolute; left: .15rem; color: var(--primary); }
.help-note { border-left: 3px solid var(--primary); background: var(--bg); padding: .7rem .9rem; border-radius: 0 8px 8px 0; }
.help-warn { border-left: 3px solid var(--red); background: #fef2f2; color: #7f1d1d;
    padding: .7rem .9rem; border-radius: 0 8px 8px 0; display: flex; gap: .5rem; align-items: flex-start; }
.help-bild { margin: .9rem 0 1.2rem; }
.help-bild img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; display: block; }
/* Deckblatt-Logo: klein und ohne Rahmen – es ist kein Bildschirmfoto. */
.help-bild-logo img { max-height: 42px; width: auto; border: none; border-radius: 0; }
.help-treffer { background: #fef9c3; border-radius: 6px; }
@media print {
    .help-wrap { grid-template-columns: 1fr; }
    .help-body { border: none; padding: 0; max-width: none; }
}

/* ---------- Terminal: Eingabe der Personalnummer ---------- */
.nr-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.nr-feld { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; cursor: pointer;
    background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15);
    border-radius: 12px; color: #fff; font: inherit; text-align: left; }
/* Das aktive Feld muss auf einen Blick erkennbar sein – sonst tippt jemand die
   PIN ins Nummernfeld und wundert sich. */
.nr-feld.is-aktiv { border-color: var(--primary); background: rgba(255,255,255,.12); }
.nr-label { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.nr-wert { font-size: 1.7rem; font-weight: 700; letter-spacing: .12rem; min-height: 1.3em; }
@media (max-width: 420px) { .nr-felder { grid-template-columns: 1fr; } }

/* ---------- Terminal-Modus B: offline gemerkte Buchungen ---------- */
.offline-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
    padding: .85rem 1rem; text-align: center; font-size: 1rem;
    background: #334155; color: #e2e8f0; border-top: 1px solid rgba(255,255,255,.15);
}
.offline-bar.warten { background: #92400e; color: #fef3c7; }
.offline-bar.ok     { background: #166534; color: #dcfce7; }
.offline-bar.fehler { background: #991b1b; color: #fee2e2; }

/* PIN-Maske, die einspringt, wenn die eigentliche PIN-Seite nicht ladbar ist */
/* Voll deckend: Am Kiosk schimmerten sonst die Kacheln und der Kopf durch
   und ueberlagerten die Ziffern. */
.offline-pin { position: fixed; inset: 0; z-index: 8100; display: grid; place-items: center;
    background: #16202e; padding: 1rem; overflow-y: auto; }
.offline-pin-box { width: 100%; max-width: 420px; text-align: center; }
.offline-pin-box .pin-pad { margin-top: 1rem; }
.offline-pin-box .terminal-actions { margin-top: 1rem; }

/* Auswahl des Verhaltens in den Einstellungen */
.offline-choice { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; }
.offline-choice input { margin-top: .28rem; flex-shrink: 0; }
.offline-choice .hint { margin-top: .2rem; }

.terminal-person { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 1.25rem; text-align: center; }
.terminal-person-name { font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.pin-display { height: 3rem; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; letter-spacing: .5rem; font-size: 2rem; margin-bottom: 1rem; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.pin-key { padding: 1.1rem 0; font-size: 1.6rem; font-weight: 600; border-radius: 14px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.pin-key:active { background: rgba(255,255,255,.2); }
.pin-clear, .pin-back { font-size: 1.3rem; background: rgba(255,255,255,.04); }
.terminal-hint { text-align: center; color: #cbd5e1; margin: 1.25rem 0 .75rem; }
/* Immer alle vier Aktionen (der Status bleibt am oeffentlichen Terminal
   verborgen), deshalb ein festes 2x2-Raster statt einer umbrechenden Reihe. */
/* grid-auto-rows 1fr: Alle vier Tasten gleich hoch - auf schmalen Handys
   bricht "Pause beenden" in zwei Zeilen um, und seine Zeile war sonst
   hoeher als die der uebrigen Tasten. */
.terminal-actions { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .75rem; }
.terminal-actions .btn-stamp { width: 100%; height: 100%; min-height: 3.4rem;
    display: flex; align-items: center; justify-content: center; line-height: 1.15;
    padding-top: .5rem; padding-bottom: .5rem; }
.terminal-cancel { display: block; text-align: center; margin-top: 1rem; background: transparent; color: #cbd5e1; border-color: rgba(255,255,255,.2); }
.terminal-pinchange-note { text-align: center; color: #fde68a; background: rgba(217,119,6,.15); border: 1px solid rgba(217,119,6,.4); border-radius: 12px; padding: .6rem .8rem; margin: 0 0 1rem; font-size: .95rem; }
.pin-change-fields { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.pin-change-fields label { color: #cbd5e1; font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }
.pin-change-fields .pin-field { font-size: 1.6rem; letter-spacing: .4rem; text-align: center; padding: .6rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; }
.pin-change-fields .pin-field:focus { outline: 2px solid var(--primary); }

/* ---------- Feinschliff ---------- */
:root { --ring: rgba(14,165,164,.28); }

/* Weiche Übergänge */
.btn, .nav-item, .stat, .card, .terminal-tile, .presence-row, .status-pill, .badge, details summary {
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .10s ease, color .14s ease;
}

/* Feinere Schatten & Hover-Anhebung bei Kacheln */
.card { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }
.stat { position: relative; overflow: hidden; }
.stat:hover { box-shadow: 0 6px 18px rgba(15,23,42,.09); transform: translateY(-1px); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); opacity: .0; transition: opacity .15s; }
.stat:hover::before { opacity: .5; }

/* Buttons: mehr Tiefe */
.btn-primary { box-shadow: 0 1px 2px rgba(14,165,164,.25); }
.btn:active { transform: translateY(1px); }
.btn-stamp { box-shadow: 0 2px 6px rgba(15,23,42,.14); }
.btn-stamp:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.18); }
.btn-stamp:active { transform: translateY(0); }

/* Eingabefelder: ruhigerer Fokus-Ring */
.form input:focus, .form select:focus, .form textarea:focus,
.form-inline input:focus, .form-inline select:focus,
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* Sidebar-Navigation etwas lebendiger */
.nav-item { border-radius: 0 8px 8px 0; margin-right: .5rem; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

/* Topbar mit feiner Trennung */
.topbar { box-shadow: 0 1px 0 rgba(15,23,42,.04); }

/* Tabellen: ruhiger Hover, klarere Kopfzeile */
.table thead th { background: #f8fafc; }
.table tbody tr { transition: background-color .1s; }

/* Badges: dezent abgerundet, leichte Kontur */
.badge { box-shadow: inset 0 0 0 1px rgba(15,23,42,.04); }

/* Presence-Zeilen Hover */
.presence-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15,23,42,.06); }

/* Avatare mit feinem Rahmen */
.presence-avatar, .avatar-sm, .avatar-preview { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.12); }

/* Geburtstags-Banner */
.birthday-banner {
    border: 1px solid #fcd34d;
    background: linear-gradient(90deg, #fffbeb, #fef3c7);
    color: #92400e; font-size: 1rem;
    display: flex; align-items: center; gap: .5rem;
}

/* Flash-Meldungen einblenden */
.flash { animation: flash-in .2s ease both; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Sanftes Scrollverhalten */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    /* Ohne Animation stehen beide Zeiger auf 12 und liegen uebereinander – das
       sieht nach einer defekten Uhr aus. Deshalb eine ruhende Stellung. */
    .ze-hand-h { transform: rotate(310deg); }
    .ze-hand-m { transform: rotate(55deg); }
}

/* Einstellungen: Aktionsleisten */
.form-actions {
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
    display: flex; justify-content: flex-end;
}
.testmail-row {
    display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
    margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line);
}
.testmail-row .muted { font-size: .82rem; }

/* Arbeitszeit-Kalender (Team-Zeiten) */
.cal-time { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); }
/* Geplante Arbeitszeit kuenftiger Tage: gedaempft und kursiv, damit sie
   nicht mit gebuchter Zeit verwechselt wird. */
.cal-plan { display: block; font-size: .72rem; color: var(--muted); font-style: italic; }
.cal-saldo { display: block; font-size: .7rem; font-weight: 600; }
.cal-saldo.pos { color: var(--green, #16a34a); }
.cal-saldo.neg { color: var(--red, #dc2626); }
.cal-saldo.laeuft { color: var(--muted, #64748b); font-weight: 500; }   /* laufender Tag: Rest bis Soll statt Minus */

/* Rich-Text-Editor der E-Mail-Vorlagen (Einstellungen -> E-Mail & Zugriff) */
.mail-editor { margin: .25rem 0 .4rem; }
.mail-editor-leiste { display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: .3rem .4rem; border: 1px solid var(--line); border-bottom: 0;
                      border-radius: 8px 8px 0 0; background: var(--bg); }
.mail-editor-leiste .me-gruppe { display: inline-flex; gap: .15rem; align-items: center; padding-right: .5rem; border-right: 1px solid var(--line); }
.mail-editor-leiste .me-gruppe:last-child { border-right: 0; padding-right: 0; }
.mail-editor-leiste button { min-width: 28px; height: 28px; padding: 0 .35rem; border: 1px solid transparent; border-radius: 5px;
                      background: transparent; color: var(--ink); cursor: pointer; font-size: .85rem; line-height: 1; display: inline-flex;
                      align-items: center; justify-content: center; gap: .05rem; }
.mail-editor-leiste button:hover, .mail-editor-leiste button.ist-an { border-color: var(--line); background: var(--card); color: var(--primary); }
.mail-editor-leiste button svg { display: block; }
.mail-editor-leiste select { height: 28px; font-size: .8rem; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 5px;
                      background: var(--card); color: var(--ink); cursor: pointer; max-width: 11rem; }
.mail-editor-flaeche { min-height: 11rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 0 0 8px 8px;
                      background: var(--card); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; outline: none; }
.mail-editor-flaeche:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring, rgba(88,86,214,.2)); }
.mail-editor-flaeche h1 { font-size: 22px; margin: .6em 0 .3em; }
.mail-editor-flaeche h2 { font-size: 20px; margin: .6em 0 .3em; }
.mail-editor-flaeche h3 { font-size: 16px; margin: .6em 0 .3em; }
.mail-editor-flaeche p { margin: 0 0 .6em; }
.mail-editor-flaeche ul, .mail-editor-flaeche ol { margin: 0 0 .6em 1.3em; }
.mail-editor-flaeche blockquote { margin: .4em 0 .6em; padding: .2em .8em; border-left: 3px solid var(--line); color: var(--muted); }
.cal-open { color: var(--green, #16a34a); }
.cal-compact .cal-time { font-size: .74rem; }
.cal-mini-day.saldo-pos { background: #dcfce7; font-weight: 700; }
.cal-mini-day.saldo-neg { background: #fee2e2; font-weight: 700; }
a.cal-mini-day { text-decoration: none; }
a.cal-mini-day:hover { outline: 1px solid var(--primary); }

/* Tageszelle als Korrektur-Link */
a.cal-cell-link { display: block; color: inherit; text-decoration: none; position: relative; transition: border-color .12s, box-shadow .12s; }
a.cal-cell-link:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
a.cal-cell-link::after {
    content: "\270E"; position: absolute; top: 4px; right: 6px; font-size: .78rem;
    color: var(--primary); opacity: 0; transition: opacity .12s;
}
a.cal-cell-link:hover::after { opacity: 1; }

/* Vergleichsmodus (mehrere Mitarbeiter, farbige Namenspunkte) */
.cmp-row { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-row.cmp-top { font-weight: 800; }
.cmp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-val { flex-shrink: 0; font-weight: 700; }
.cmp-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; flex-shrink: 0; }
.cmp-delta { display: inline-block; font-size: .72rem; font-weight: 700; margin-top: .15rem; color: var(--muted); }
.cmp-delta.pos { color: var(--green); }
.cmp-delta.neg { color: var(--red); }
.cal-compact .cmp-row { font-size: .7rem; }
/* Vergleichszellen dürfen wachsen (mehrere Zeilen) */
.cal-compare .cal-cell { overflow: visible; }
.cal-mini-day.cmp-multi { background: #e0e7ff; font-weight: 700; }

/* Teilnehmer-Farbpalette */
/* 16 unterscheidbare Farben: mit „Alle auswählen" koennen leicht ein Dutzend
   Personen gleichzeitig im Kalender stehen. Danach wiederholt sich die Reihe –
   der Name steht in jeder Zelle daneben, die Farbe ist nur eine Lesehilfe. */
.cmp-c0 { background: #2563eb; } .cmp-c1 { background: #7c3aed; }
.cmp-c2 { background: #059669; } .cmp-c3 { background: #d97706; }
.cmp-c4 { background: #db2777; } .cmp-c5 { background: #0891b2; }
.cmp-c6 { background: #65a30d; } .cmp-c7 { background: #dc2626; }
.cmp-c8 { background: #1e3a8a; } .cmp-c9 { background: #4c1d95; }
.cmp-c10 { background: #065f46; } .cmp-c11 { background: #92400e; }
.cmp-c12 { background: #9d174d; } .cmp-c13 { background: #155e75; }
.cmp-c14 { background: #3f6212; } .cmp-c15 { background: #991b1b; }

/* Namensliste in der Kalender-Kopfzeile */
.cmp-people { display: inline-flex; flex-wrap: wrap; gap: .1rem .8rem; align-items: center; }
.cmp-person { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; }

/* Mehrfachauswahl „Vergleichen mit" */
.compare-picker { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; background: #fff; align-self: flex-end; }
.compare-picker > summary { cursor: pointer; font-size: .9rem; color: var(--ink); list-style: none; user-select: none; white-space: nowrap; }
.compare-picker > summary::-webkit-details-marker { display: none; }
.compare-picker > summary::before { content: "\25B8"; display: inline-block; margin-right: .4rem; transition: transform .12s; }
.compare-picker[open] > summary::before { transform: rotate(90deg); }
.compare-grid {
    position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0;
    display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: .15rem 1rem;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
    padding: .7rem .9rem; max-height: 260px; overflow-y: auto; min-width: 340px;
}
.compare-grid .chk { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 400; white-space: nowrap; }
/* „Alle auswählen" steht über der Namensliste und nimmt beide Spalten ein. */
.compare-tools {
    grid-column: 1 / -1; display: flex; gap: .4rem;
    padding-bottom: .5rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line);
}

/* Tagesplaner (horizontale Timeline) */
.planner { display: flex; flex-direction: column; gap: .35rem; }
.planner-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: .6rem; }
.planner-head { margin-bottom: .1rem; }
.planner-head .planner-track { height: 16px; border: none; background: none; overflow: visible; }
.planner-hour { position: absolute; transform: translateX(-50%); font-size: .7rem; color: var(--muted); top: 0; font-variant-numeric: tabular-nums; }
.planner-label { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.planner-who { min-width: 0; }
.planner-who .pname { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-who .pmeta { font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zwei kurze Zeilen (Uhrzeiten / netto-brutto) statt einer langen: In der
   schmalen Spalte wurde sonst genau der netto/brutto-Teil abgeschnitten. */
.planner-who .pmeta .pmeta-zeile { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-track {
    position: relative; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: calc(100% / var(--hours)) 100%; overflow: hidden;
}
.planner-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; min-width: 3px; }
.planner-bar.work { background: var(--primary); }
.planner-bar.brk { background: var(--amber); }
.planner-bar.open { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px); }
.planner-bar.planner-abs { display: flex; align-items: center; padding: 0 .5rem; font-size: .72rem; font-weight: 600; overflow: hidden; white-space: nowrap; }
.planner-now { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--red); z-index: 3; }
.planner-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; }
.planner-swatch.work { background: var(--primary); }
.planner-swatch.brk { background: var(--amber); }
.planner-swatch.open { background: var(--primary); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.planner-swatch.abs { background: #ede9fe; }
.planner-swatch.now { background: var(--red); width: 3px; }
@media (max-width: 640px) { .planner-row { grid-template-columns: 116px 1fr; } }

/* QR-Code fuer 2FA-Einrichtung */
.qr-box {
    display: inline-block;
    background: #fff;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    margin: .25rem 0 .75rem;
    line-height: 0;
}
.qr-box svg { width: 220px; height: 220px; display: block; }

/* Druckansicht fuer Berichte */
/* Nur im Ausdruck sichtbar (z. B. Kopfzeile des Kalenders). */
.print-only { display: none; }
.print-head { margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid #999; font-size: .9rem; }

@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .content { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    body { background: #fff; }
    .print-only { display: block; }

    /* Kalender: Farben der Abwesenheiten müssen mitgedruckt werden, sonst
       ist der Ausdruck unbrauchbar (Browser lassen Hintergründe sonst weg). */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Nicht mitten in einem Monat oder in der Legende umbrechen. */
    .cal-grid, .cal-mini, .cal-legend { break-inside: avoid; page-break-inside: avoid; }
    .cal-toolbar { margin-bottom: .4rem; }
}

/* Aufklappbarer Hinweis (spart Platz, Text bleibt bei Bedarf verfuegbar) */
.info-details { margin-top: .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.info-details > summary { cursor: pointer; padding: .55rem .8rem; font-size: .87rem; font-weight: 600; color: var(--ink); }
.info-details > summary::marker { color: var(--muted); }
.info-details p { margin: 0 .8rem .7rem; font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* Unterabschnitt innerhalb einer Karte (z. B. "Buchung hinzufügen" unter der
   Buchungsliste): gehoert inhaltlich dazu, braucht aber eine sichtbare Trennung. */
.sub-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sub-title { font-size: .95rem; font-weight: 600; margin: 0 0 .7rem; color: var(--ink); }

/* ---------- Zeiten korrigieren: Buchungstabelle ---------- */
/* Aufbau wie unter „Anträge": echte Tabelle mit ausgerichteten Spalten.
   Die Eingabefelder sitzen in den Zellen und gehoeren per form-Attribut zu
   einem Formular ausserhalb der Tabelle (ein <form> darf keine <td>
   umschliessen). Farben bleiben: Speichern blau, Löschen rot. */
.table-events td { vertical-align: middle; }
/* Die Felder liegen in Tabellenzellen, nicht in einem .form-Container - ohne
   diese Regel blieben sie im grauen Systemlook des Browsers. */
.table-events input, .table-events select {
    display: block; margin: 0; padding: .55rem .65rem;
    border: 1px solid var(--line); border-radius: 8px;
    font-size: .95rem; color: var(--ink); background: #fff;
}
.table-events input:focus, .table-events select:focus {
    outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary);
}
.table-events input[name="time"] {
    width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums;
}
.table-events select[name="type"] { width: 100%; max-width: 13rem; }
.table-events td.actions { white-space: nowrap; }
.table-events .badge { white-space: nowrap; }

@media (max-width: 760px) {
    .table-events select[name="type"] { max-width: none; }
    .table-events td.actions { white-space: normal; }
}

/* ---------- Statistik: aufklappbare Kennzahlen ---------- */
/* Die Zahlen in „Kennzahlen je Mitarbeiter" sind Schaltflaechen, sehen aber wie
   Text aus - erst beim Ueberfahren wird die Klickbarkeit sichtbar. */
.drill-btn {
    border: 0; background: none; padding: .1rem .35rem; margin: -.1rem -.35rem;
    font: inherit; color: inherit; cursor: pointer; border-radius: 6px;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 3px; text-decoration-color: var(--line);
}
.drill-btn:hover { background: #eef2ff; color: var(--primary); text-decoration-color: var(--primary); }
.drill-btn.is-open { background: var(--primary); color: #fff; text-decoration: none; }
.table-drillable td.is-danger .drill-btn { color: var(--red); font-weight: 600; }
.table-drillable td.is-danger .drill-btn.is-open { color: #fff; background: var(--red); }

/* Seitenblätterung (Protokoll) */
.pager { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: 1rem; }
.pager .is-disabled { opacity: .45; pointer-events: none; }
.pager-gap { color: var(--muted); padding: 0 .2rem; }
.pager-info { margin-left: auto; font-size: .85rem; }

/* Terminal-Kürzel in der Benutzerliste: schmal und monospace, damit es sich
   klar vom Namen daneben abhebt. */
.badge-kuerzel {
    background: var(--bg); color: var(--muted); border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em; white-space: nowrap;
}

/* Sortierbare Spaltenüberschrift: sieht aus wie der übrige Kopf, der Pfeil
   zeigt die aktive Spalte und die Richtung. */
.th-sort {
    display: inline-flex; align-items: center; gap: .3rem;
    color: inherit; text-decoration: none; white-space: nowrap;
}
/* Breite Tabelle in ihrer Karte halten: Nur sie rollt waagerecht, die Seite
   selbst nicht. Ohne das schob die Kennzahlen-Tabelle sich ueber die Karte
   hinaus, sobald genug Spalten zusammenkamen. */
.tabelle-scroll { overflow-x: auto; }
/* In dieser Tabelle duerfen die Ueberschriften umbrechen ("Saldo Zeitraum"
   auf zwei Zeilen). Das spart genug Breite, dass die Tabelle auf einem
   normalen Bildschirm ueberhaupt erst ganz hineinpasst - anderswo bleibt es
   bei einzeiligen Koepfen. */
.table-drillable .th-sort { white-space: normal; }
/* Etwas enger als die uebrigen Tabellen: Dreizehn Spalten mit dem normalen
   Innenabstand sind rund 80px breiter, als auf einen ueblichen Bildschirm
   passt. Nur die aeussere Tabelle - in den aufgeklappten Aufstellungen
   stehen wenige Spalten, die brauchen die Luft. */
.table-drillable > thead th, .table-drillable > tbody > tr > td { padding-left: .45rem; padding-right: .45rem; }
.th-sort:hover { color: var(--primary); }
.th-sort .sort-ind { opacity: .3; font-size: .85em; }
/* Clientseitig sortierbare Tabellen (assets/tabellen-sortieren.js) */
.th-sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortierbar:hover, .th-sortierbar:focus-visible { color: var(--primary); }
.th-sortierbar .sort-ind { opacity: .35; font-size: .85em; }
.th-sortierbar[aria-sort] .sort-ind { opacity: 1; }
@media print { .th-sortierbar .sort-ind { display: none; } }
.th-sort:hover .sort-ind { opacity: .7; }
.th-sort.is-active { color: var(--primary); }
.th-sort.is-active .sort-ind { opacity: 1; }

.drill-row > td { background: #f8fafc; padding: 0; }
.drill-panel { padding: .9rem 1rem 1rem; border-left: 3px solid var(--primary); }
.drill-title { font-size: .95rem; font-weight: 600; margin-bottom: .6rem; }
.table-drill { margin: 0; background: var(--card); border-radius: 8px; overflow: hidden; }
.table-drill th, .table-drill td { padding: .45rem .7rem; font-size: .9rem; }
.table-drill tr:last-child td { border-bottom: 0; }

@media print {
    .drill-btn { text-decoration: none; }
    .drill-panel { border-left-color: #94a3b8; }
}

/* ---------- Einseitige Kurzanleitung fuers Tablet (Ausdruck/PDF) ---------- */
/* Eigenstaendige Seite, auf A4 ausgelegt: alles Wichtige auf eine Seite. */
.sheet-body { background: var(--bg); margin: 0; }
.sheet-bar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    max-width: 21cm; margin: 1rem auto 0; padding: .75rem 1rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.sheet-bar .muted { flex: 1; font-size: .85rem; }

.sheet {
    max-width: 21cm; margin: 1rem auto 2rem; padding: 1.6cm 1.7cm;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.sheet-head .brand-logo { max-height: 46px; width: auto; }
.sheet-head .logo-icon { width: 46px; height: 46px; color: var(--primary); }
.sheet-firma { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sheet h1 { font-size: 1.5rem; margin: .15rem 0 .2rem; }
.sheet-sub { margin: 0; color: var(--muted); }
.sheet h2 {
    font-size: 1rem; margin: 1rem 0 .4rem; padding-bottom: .2rem;
    border-bottom: 2px solid var(--primary); display: inline-block;
}

/* Kuerzel und PIN – der eigentliche Zweck des Blattes. */
.sheet-key { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.sheet-key-box { border: 2px solid var(--primary); border-radius: 12px; padding: .8rem 1rem; text-align: center; }
.sheet-key-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sheet-key-value { font-size: 2.3rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.sheet-key-note { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.sheet-pin-line { min-height: 2.8rem; display: flex; align-items: center; justify-content: center; }
.sheet-pin {
    width: 6.5rem; font-size: 2rem; font-weight: 700; text-align: center; letter-spacing: .25em;
    color: var(--primary); border: 0; border-bottom: 2px dashed var(--line); background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sheet-pin:focus { outline: none; border-bottom-color: var(--primary); }
.sheet-pin-missing { color: var(--muted); font-style: italic; }

.sheet-steps { margin: .25rem 0 .6rem 1.1rem; padding: 0; line-height: 1.5; }
.sheet-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.sheet-act { padding: .45rem .9rem; border-radius: 8px; color: #fff; font-weight: 600; font-size: .95rem; }
.sheet-act.act-in { background: var(--green); }
.sheet-act.act-break { background: var(--amber); }
.sheet-act.act-out { background: var(--red); }
.sheet-hint { font-size: .85rem; color: var(--muted); margin: .35rem 0 0; line-height: 1.5; }
.sheet-rules { margin: .25rem 0 0 1.1rem; padding: 0; line-height: 1.5; }
.sheet-rules li { margin-bottom: .22rem; }

.sheet-week { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.sheet-week th, .sheet-week td {
    border: 1px solid var(--line); padding: .4rem; text-align: center; font-size: .95rem;
}
.sheet-week th { background: var(--bg); font-size: .8rem; color: var(--muted); }
.sheet-week .sheet-frei { color: var(--muted); }

.sheet-foot {
    display: flex; justify-content: space-between; margin-top: 1.1rem; padding-top: .5rem;
    border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted);
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .sheet-bar { display: none !important; }
    .sheet-body { background: #fff; }
    .sheet { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    /* Farben der Tasten muessen mitgedruckt werden, sonst ist die Zuordnung weg. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sheet-pin { border-bottom-color: #94a3b8; }
    .sheet h2, .sheet-key, .sheet-week { break-inside: avoid; page-break-inside: avoid; }
}

/* Geraeteangabe an einer Buchung ("Zeiten korrigieren") – dezent, weil sie im
   Normalfall niemanden interessiert und nur bei Nachfragen zaehlt. */
.ev-geraet { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }

/* ---------- NFC-Anhänger am Terminal ---------- */
.nfc-box { display: flex; align-items: center; gap: 1rem; max-width: 520px; margin: 0 auto 1.5rem;
    padding: 1rem 1.2rem; border: 2px dashed rgba(255,255,255,.25); border-radius: 16px; color: #fff; }
.nfc-box.fehler { border-color: #f87171; border-style: solid; background: rgba(220,38,38,.12); }
.nfc-ring { width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.1); }
.nfc-ring svg { width: 28px; height: 28px; }
.nfc-text { display: flex; flex-direction: column; gap: .15rem; }
.nfc-text strong { font-size: 1.05rem; }
.nfc-text span { font-size: .88rem; color: rgba(255,255,255,.7); }
.nfc-aktion { max-width: 520px; margin: 0 auto 1.5rem; text-align: center; }

/* Anhänger beschreiben (Verwaltung) */
.nfc-write { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); text-align: center; }
.nfc-ok { color: var(--green); font-weight: 600; }
.nfc-fehler { color: var(--red); }
.nfc-code-anzeige { display: block; padding: .6rem .8rem; background: var(--bg); border: 1px solid var(--line);
    border-radius: 8px; font-size: .82rem; word-break: break-all; margin: .4rem 0; }

/* Rückmeldung direkt am Benutzer-Formular. Die Meldung oben auf der Seite
   allein genügt nicht: Nach dem Speichern springt die Ansicht zum Formular. */
.speicher-hinweis { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
    padding: .7rem .9rem; border-radius: 8px; font-size: .92rem;
    animation: speicher-auf .25s ease both; }
.speicher-hinweis.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.speicher-hinweis.fehler { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
@keyframes speicher-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Kennwortfelder: Schalter zum Anzeigen (rechts im Feld) und Rückmeldung
   direkt darunter. Der Hinweis kommt beim Tippen, spätestens beim Verlassen
   des Feldes – nicht erst nach dem Abschicken. */
.pw-box { position: relative; display: block; }
.pw-box input { padding-right: 5.5rem; }
.pw-auge { position: absolute; right: .3rem; top: .3rem; bottom: 0;
    display: flex; align-items: center; gap: .3rem;
    border: 0; background: none; padding: 0 .5rem; cursor: pointer;
    color: var(--muted); font-size: .78rem; font-weight: 600; font-family: inherit; }
.pw-auge:hover { color: var(--primary); }
.pw-generieren-knopf { margin: .4rem 0 .1rem; }
/* Aktionsknoepfe der Benutzerliste: je Knopf eine Zeile, aber kein
   Umbruch INNERHALB eines Knopfs ("Anleitung mailen" brach in zwei Zeilen). */
#benutzer-tabelle td.no-print .btn { white-space: nowrap; margin: .15rem 0; }
.pw-hinweis.ok { color: var(--green); font-weight: 600; }
.pw-hinweis.fehler { color: var(--red); font-weight: 600; }

/* Warnhinweis in der gleichen Form wie die Speicher-Rückmeldung. */
.flash-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.speicher-hinweis.warnung { background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    align-items: flex-start; }

/* Buchungen aller Mitarbeiter (Übersicht der Verwaltung): eine Karte je
   Person, darin die Buchungen des Tages in ihrer Reihenfolge. */
.tagesbuchungen { display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.tagesbuchung { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .7rem .9rem; }
.tagesbuchung.hat-warnung { border-color: #fde68a; background: #fffbeb; }
.tagesbuchung-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.tagesbuchung-name { flex: 1; min-width: 0; font-weight: 600; }
.tagesbuchung-name a { color: inherit; text-decoration: none; }
.tagesbuchung-name a:hover { text-decoration: underline; }
.buchungskette { display: flex; flex-wrap: wrap; gap: .35rem; }
.buchung { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap;
    padding: .2rem .5rem; border-radius: 6px; font-size: .8rem;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.buchung strong { font-variant-numeric: tabular-nums; }
.buchung-in       { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.buchung-out      { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }
.buchung-break_start, .buchung-break_end { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.buchung-quelle { font-size: .72rem; opacity: .75; font-style: italic; }
.buchung-warnung { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0;
    font-size: .82rem; color: #92400e; }

/* Gruß über der Auswahl am Terminal – wie in Nextcloud nach der Anmeldung. */
.terminal-gruss { margin: 0 0 .2rem; text-align: center; font-size: clamp(1.3rem, 3.2vw, 2rem);
    font-weight: 600; color: #fff; letter-spacing: -.01em; }

/* Abwesenheit an einem Tag in „Zeiten korrigieren": Urlaub war dort vorher
   gar nicht zu sehen – der Tag sah aus wie eine vergessene Buchung. */
.tages-abwesenheit { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--line); font-size: .9rem; }
.tages-abwesenheit.ist-offen { background: #fef3c7; border-color: #fde68a; color: #92400e; }
/* Abwesenheit UND gebuchte Zeit am selben Tag: kraeftiger als der blosse
   Hinweis darueber, weil hier etwas zu entscheiden ist - der Tag zaehlt
   sonst doppelt (Plus aufs Konto und ein Abwesenheitstag weg). */
.tages-warnung { display: flex; align-items: flex-start; gap: .55rem; flex-wrap: wrap;
    margin: 0 0 .9rem; padding: .7rem .8rem; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; font-size: .9rem; }
.tages-warnung .hint { color: inherit; opacity: .85; }

/* Wiederherstellungscodes ausdrucken: Beim Drucken bleibt nur der Kasten mit
   den Codes stehen. Die Codes gibt es genau einmal zu sehen – ein Ausdruck
   (oder „Als PDF sichern" im Druckdialog) ist die einzige Kopie. */
@media print {
    body:has(.codes-blatt) .sidebar,
    body:has(.codes-blatt) .topbar,
    body:has(.codes-blatt) .card:not(.codes-blatt),
    body:has(.codes-blatt) .flash { display: none !important; }
    body:has(.codes-blatt) .codes-blatt {
        border: 1px solid #999 !important; background: #fff !important;
        box-shadow: none; page-break-inside: avoid; }
    .codes-raster div { border-color: #999 !important; }
}
.codes-kopf { color: var(--muted); font-size: .9rem; }

/* Entschiedener Antrag – einmalig auf der Übersicht. Auffällig genug, dass
   man ihn nicht übersieht: Er kommt kein zweites Mal. */
.antrag-bescheid { display: flex; align-items: flex-start; gap: .7rem;
    border-left: 4px solid var(--green); }
.antrag-bescheid.ist-abgelehnt { border-left-color: var(--red); }
.antrag-bescheid .ui-ic { flex-shrink: 0; margin-top: .15rem; color: var(--green); }
.antrag-bescheid.ist-abgelehnt .ui-ic { color: var(--red); }

/* Untermenü der Einstellungen: eingerückt und kleiner, damit auf einen Blick
   klar ist, dass es zu „Einstellungen" gehört. */
.nav-sub { display: flex; flex-direction: column; margin: .1rem 0 .3rem; }
.nav-item-sub { padding-left: 2.4rem; font-size: .88rem; opacity: .9; }
.nav-item-sub .ic { width: 16px; height: 16px; }
.nav-item-sub .ic svg { width: 16px; height: 16px; }

/* Zwischenüberschrift innerhalb eines Formulars – gruppiert zusammengehörige
   Felder, ohne dass ein weiteres Kästchen nötig wäre. */
.feld-gruppe { margin: .2rem 0 .5rem; font-size: .82rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Übersicht der freigeschalteten Funktionen (reine Anzeige), in Gruppen
   mit Zaehler: Grundpaket, Terminal-Erweiterungen, Planung, Lohn, Betrieb. */
.feature-gruppe { margin-bottom: .8rem; }
.feature-gruppe:last-child { margin-bottom: 0; }
.feature-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin: .2rem 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.feature-gruppe.ist-aus .feature-gruppe-kopf { opacity: .75; }
.badge-muted { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.feature-liste { display: grid; gap: .35rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.feature-eintrag { display: flex; align-items: center; gap: .4rem; font-size: .9rem;
    padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.feature-eintrag strong { margin-left: auto; color: var(--green); font-size: .8rem; }
.feature-eintrag.ist-aus { background: var(--bg); color: var(--muted); }
.feature-eintrag.ist-aus strong { color: var(--muted); }

/* Monatsabschluss: offen (neutral) oder geschlossen (deutlich). */
.monatsabschluss { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.monatsabschluss.ist-zu { border-left: 4px solid var(--amber); background: #fffbeb; }
.monatsabschluss .ma-text { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 240px; }
.monatsabschluss .ui-ic { flex-shrink: 0; color: var(--muted); }
.monatsabschluss.ist-zu .ui-ic { color: var(--amber); }

/* Namen im Anwesenheits-Board führen zur Zeitkorrektur – dezent, damit die
   Liste nicht wie ein Linkverzeichnis aussieht. */
.presence-name a { color: inherit; text-decoration: none; }
.presence-name a:hover { text-decoration: underline; }

/* Aktionen unter den Soll-Stunden (Durchschnitts-Knopf, Assistent):
   Knopf auf eigener Zeile, die Erklaerung klein darunter - eingebettet in
   Fliesstext wirkten die Knoepfe wie Fremdkoerper. */
.soll-aktionen { display: grid; gap: .8rem; margin-top: .8rem; }
/* Hinweis beim Umtippen der Soll-Stunden (26.10.2026): wie die Warnfarbe der Klartext-Zeile. */
.soll-warnung { margin: .6rem 0; padding: .6rem .8rem; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; color: #92400e; font-size: .9rem; }
.soll-warnung .regel-schalter { color: #92400e; font-size: .9rem; }
.soll-aktionen .hint { display: block; margin-top: .25rem; }

/* Gesamturlaub-Erklaerung unter der Uebernahme: als farbige Infozeile
   statt grauem Hinweis - genau diese Zahl war dem Kunden unklar. Leer
   (kein Stichtag) verschwindet die Box samt Platz. */
.js-urlaub-klartext { display: none; }
.js-urlaub-klartext.hat-text { display: block; background: #eef2ff; border: 1px solid #c7d2fe;
    color: #3730a3; border-radius: 8px; padding: .55rem .8rem; font-size: .85rem; }
.js-urlaub-klartext.ist-warnung { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* Elternzeit: kein Stempel, aber ueberall sichtbares Kennzeichen (EZ). */
.abs-elternzeit { background: #ede9fe; color: #6d28d9; }

/* Kennzahlen-Verlauf (Statistik): vier Linien-Grafiken nebeneinander. */
.verlauf-feld { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem .3rem; background: #fff; }
.verlauf-chart { width: 100%; height: auto; display: block; }

/* Standort an der Buchung (Modul): dezent wie die Geraeteart, Rot bei "ausserhalb". */
.ev-ort { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.ev-ort.ist-ausserhalb { color: var(--red); font-weight: 600; }
.ev-ort a { color: var(--primary); }


/* ---------- Benutzerliste: Aktionsspalte ----------
   Zwei Knoepfe je Zeile ("Bearbeiten", "Mehr"), das Menue klappt in der Zelle
   auf und listet die uebrigen Aktionen senkrecht - sieht bei jeder Breite
   gleich aufgeraeumt aus (vorher liefen sechs Knoepfe wild um). */
.benutzer-aktionen { text-align: right; white-space: nowrap; vertical-align: top; }
.aktionen-zeile { display: inline-flex; gap: .4rem; align-items: flex-start; justify-content: flex-end; flex-wrap: nowrap; }
.aktionen-menu { display: inline-block; text-align: left; position: relative; }
.aktionen-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.aktionen-menu > summary::-webkit-details-marker { display: none; }
.aktionen-menu[open] > summary .aktionen-pfeil { display: inline-block; transform: rotate(180deg); }
.aktionen-liste {
    /* Liegt unter den beiden Knoepfen, ohne sie zu verschieben. Den Platz dafuer
       schafft das Skript in admin_users.php (Innenabstand der Zelle = Hoehe der
       Liste) - so waechst die Zeile mit und nichts wird von der scrollbaren
       Tabelle abgeschnitten. */
    position: absolute; right: 0; top: 100%; z-index: 5;
    margin-top: .35rem; min-width: 13.5rem; padding: .3rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
    display: flex; flex-direction: column; gap: .1rem; white-space: normal;
}
.aktionen-liste form, .aktionen-liste form.inline { display: block; margin: 0; }
.aktionen-liste .btn, .aktionen-liste a.btn {
    display: flex; align-items: center; gap: .5rem; width: 100%; box-sizing: border-box;
    justify-content: flex-start; text-align: left;
    border: 0; background: transparent; box-shadow: none; border-radius: 7px;
    padding: .5rem .6rem; font-weight: 500; color: var(--text); white-space: nowrap;
}
.aktionen-liste .btn:hover, .aktionen-liste a.btn:hover { background: var(--hover, rgba(100, 116, 139, .12)); }
.aktionen-liste .btn.btn-primary { color: var(--primary); }
.aktionen-liste .btn.btn-danger, .aktionen-liste a.btn.btn-danger {
    color: var(--red); margin-top: .25rem; padding-top: .6rem;
    border-top: 1px solid var(--line); border-radius: 0 0 7px 7px;
}


/* Rueckfrage bei ungespeicherten Aenderungen (layout.php) */
.ungespeichert-dialog {
    border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.4rem; max-width: 30rem; width: calc(100% - 2rem);
    background: var(--card, #fff); color: var(--text); box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
}
.ungespeichert-dialog::backdrop { background: rgba(15, 23, 42, .55); }

/* Attest hochladen (Verwaltung, 19.10.2026): Dateifeld hinter dem Knopf - die Auswahl schickt gleich ab. */
.attest-upload label.btn { cursor: pointer; }
.attest-upload label.btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* Aufgaben (23.10.2026): einklappbare Karten, Namensfilter, "Zeiten pruefen" je Person */
.aufgaben-suche { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.aufgaben-suche input[type="search"] { max-width: 18rem; padding: .4rem .6rem; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; font: inherit; }
.aufgabe-klappbar > .section-title { cursor: pointer; user-select: none; }
.aufgabe-klappbar > .section-title h2::before { content: "▾"; display: inline-block; width: 1rem; margin-right: .15rem; font-size: .85em; color: var(--muted, #64748b); transition: transform .15s; }
.aufgabe-zu > .section-title h2::before { transform: rotate(-90deg); }
.aufgabe-zu > :not(.section-title) { display: none !important; }
.aufgabe-zu > .section-title { margin-bottom: 0; }
.zeiten-personen { display: flex; flex-direction: column; gap: .35rem; }
.zeiten-person { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; background: var(--card, #fff); padding: 0 .75rem; }
.zeiten-person > summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; cursor: pointer; list-style: none; }
.zeiten-person > summary::-webkit-details-marker { display: none; }
.zeiten-person > summary::before { content: "▸"; color: var(--muted, #64748b); font-size: .85em; }
.zeiten-person[open] > summary::before { content: "▾"; }
.zeiten-person-name { font-weight: 600; min-width: 11rem; }
.zeiten-person-zahlen { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.zeiten-person-zeitraum { font-size: .85rem; flex: 1; }
.zeiten-person-knoepfe { margin-left: auto; }
@media print { .aufgabe-zu > :not(.section-title) { display: block !important; } }

/* Teamkalender-Abo (23.10.2026): Adressen untereinander, Kopieren-Knopf, Haken und Knoepfe links */
.abo-liste { display: flex; flex-direction: column; gap: .55rem; }
.abo-zeile { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: center; }
.abo-name { font-weight: 600; font-size: .9rem; }
.abo-zeile input { width: 100%; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--ink); background: #fff; }
.abo-hinweis { grid-column: 2 / -1; margin-top: -.2rem; }
.abo-form { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line, #e2e8f0); }
.abo-haken { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--ink); }
.abo-haken input { width: auto; margin: .25rem 0 0; flex: 0 0 auto; }
.abo-knoepfe { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
@media (max-width: 720px) { .abo-zeile { grid-template-columns: 1fr auto; } .abo-name { grid-column: 1 / -1; } .abo-hinweis { grid-column: 1 / -1; } }
.abo-knopfpaar { display: inline-flex; gap: .35rem; }
.abo-qr { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .9rem; padding: .4rem 0 .2rem; }
.abo-qr-code { width: 150px; height: 150px; flex: 0 0 auto; background: #fff; padding: 6px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; }
.abo-qr-code svg { width: 100%; height: 100%; display: block; }
/* Zwei Store-Codes (Google Play, App Store) auf Aushang und in den Einstellungen (26.10.2026) */
.aushang-qrs { display: flex; flex-wrap: wrap; gap: 1.2rem; flex-shrink: 0; }
.aushang-qr-mit { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; color: #334155; }
.aushang-qrs .aushang-qr { width: 220px; height: 220px; }
.store-qr-mit { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex-shrink: 0; }
/* Aushang: zwei gleiche Store-Kaesten (26.10.2026) */
.aushang-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.2rem 0 1rem; page-break-inside: avoid; }
.aushang-store { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: 1.1rem 1rem 1rem;
    border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; }
.aushang-store .aushang-qr { width: 230px; height: 230px; }
.aushang-store-name { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-top: .2rem; }
.aushang-store-text { font-size: .98rem; line-height: 1.4; color: #334155; }
.aushang-store .sheet-qr-url { font-size: .74rem; word-break: break-all; }
@media (max-width: 640px) { .aushang-stores { grid-template-columns: 1fr; } }
/* Regel-Schalter mit "gilt ab" (27.10.2026) */
/* Mit .form davor: ".form label { display:block }" ist spezifischer und setzte den Haken
   sonst UEBER den Text (Nutzerhinweis 26.10.2026). */
.regel-schalter, .form label.regel-schalter { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .5rem; font-size: .95rem; color: var(--ink); font-weight: 400; }
.regel-schalter input, .form .regel-schalter input { width: auto; margin: .25rem 0 0; flex: 0 0 auto; display: inline-block; }
.regel-ab { margin-left: 1.6rem; max-width: 22rem; font-size: .85rem; }
/* Zeiten korrigieren: gruener Hinweis "Alles in Ordnung" (Krankheit nach Arbeit, 27.10.2026) */
.tages-hinweis-ok { display: flex; gap: .7rem; align-items: flex-start; margin: .3rem 0 .9rem; padding: .75rem .9rem;
    border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4; font-size: .92rem; line-height: 1.45; }
.tages-hinweis-ok p { margin: .3rem 0 0; }
.tages-hinweis-ok .badge { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tages-hinweis-ok { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.35); } }
:root[data-theme="dark"] .tages-hinweis-ok { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.35); }