/* ================= Schriften (selbst gehostet) =================

   IBM Plex Sans und Mono liegen unter /static/schriften und werden
   nicht mehr von Google geladen. Zwei Gruende: Die Anwendung laeuft
   spaeter auf einem Server im Haus und soll ohne fremde Abhaengigkeit
   starten, und es verlaesst keine Besucher-IP mehr den Betrieb.

   Je Schnitt zwei Dateien (latin, latin-ext) - der Browser laedt nur,
   was der Text tatsaechlich braucht. Umlaute stecken in latin. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/schriften/IBMPlexMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/schriften/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/schriften/IBMPlexMono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/schriften/IBMPlexMono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/schriften/IBMPlexMono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/schriften/IBMPlexMono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/schriften/IBMPlexSans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/schriften/IBMPlexSans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/schriften/IBMPlexSans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/schriften/IBMPlexSans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/schriften/IBMPlexSans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/schriften/IBMPlexSans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/static/schriften/IBMPlexSans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/static/schriften/IBMPlexSans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Gestaltung der Zeiterfassung.

   Umgesetzt nach dem Design-Handoff "Zeiterfassung Redesign" (V2).
   Leitfarbe ist das Rot aus RIBIS.TIROL, nicht mehr das Loxone-Gruen.

   AUFBAU DIESER DATEI:

   1. Der Token-Block kommt unveraendert aus dem Entwurf. Er ist die
      einzige Stelle mit Farbwerten - alles andere verweist nur.
   2. Danach folgt eine Uebersetzungsschicht: Die Vorlagen und die
      restlichen ~1700 Zeilen dieser Datei benutzen die alten deutschen
      Namen (--gruen, --flaeche-app ...). Statt sie alle anzufassen,
      zeigen sie hier auf die neuen Token. Ein Name, eine Wahrheit -
      und kein Grossumbau, bei dem die Haelfte uebersehen wird.

   REGEL: Farben ausschliesslich ueber Variablen setzen, nie fest im
   Baustein - sonst bleibt eine Seite im falschen Modus haengen.

   THEMES: Drei Zustaende, nicht zwei. "hell" und "dunkel" stempeln
   data-theme auf <html>; "system" stempelt gar nichts und ueberlaesst
   die Wahl prefers-color-scheme. Deshalb steht die helle Palette auf
   dem nackten :root, und die dunkle zweimal - einmal fuer den
   Systemfall, einmal fuer die ausdrueckliche Wahl. */

/* ================= 1. Token aus dem Entwurf ================= */

:root,
:root[data-theme="light"] {
    /* Die Grundflaechen sind bewusst fast neutral. Der Entwurf hatte
       ueberall einen Rosastich; auf einer Seite, die man den ganzen Tag
       offen hat, wird daraus schnell zu viel. Das Rot traegt jetzt die
       Akzente allein - Schaltflaechen, aktive Zeile, Pruefung - und die
       Flaechen dahinter halten sich raus. */
    /* Der Grund ist deutlich dunkler als die Karten. Vorher lagen beide
       nur sechs Prozent Helligkeit auseinander - die Widgets hatten
       nichts, wovon sie sich abheben konnten, und die Oberflaeche wirkte
       flach. Weiss bleibt weiss; die Tiefe entsteht allein durch den
       Grund darunter. */
    --canvas:#DDDDD8;  --canvas-tief:#D0D0CA;  --surface:#FFFFFF;  --surface-2:#F7F7F6;  --surface-3:#ECECEA;
    /* Die drei Linienstaerken wandern mit. Bliebe --grid-line stehen,
       waere die Rasterlinie im Schichtplan auf einmal heller als der
       Kartenrand - die Rangfolge der drei Staerken muss erhalten
       bleiben, sonst stimmt die Hierarchie nicht mehr. */
    --border:#BBBBB5;  --border-strong:#92928C;  --grid-line:#A8A8A2;
    --ink:#1C1C1A;     --ink-2:#52524E;    --ink-3:#6D6A65;
    --brand:#8C1A2C;   --brand-solid:#8C1A2C; --brand-hover:#731423; --brand-on:#FFFFFF;
    --brand-soft:#F8EBEE; --brand-soft-ink:#7A1626; --brand-line:#E3C9CD;
    --pos:#2F6B4F; --pos-soft:#E4EFE9; --neg:#96581A; --neg-soft:#F6EBDD; --warn:#865A0F;

    /* Bereichspalette, frei zuweisbar */
    --d1:#8C1A2C; --d2:#33587A; --d3:#856010; --d4:#5A4884; --d5:#1D6B6E; --d6:#7A3E1D;
    --d1-soft:#F7E6E9; --d2-soft:#E4EDF5; --d3-soft:#F6EDDA;
    --d4-soft:#ECE8F5; --d5-soft:#DFEFEF; --d6-soft:#F4E8DF;
    --shadow:0 1px 2px rgba(28,28,26,.09), 0 8px 20px -12px rgba(28,28,26,.45);

    color-scheme: light;
}

/* Systemfall: keine ausdrueckliche Wahl getroffen, Geraet steht dunkel. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --canvas:#0C0C0B;  --canvas-tief:#050504;  --surface:#1E1E1C;  --surface-2:#252523;  --surface-3:#2D2D2B;
        /* Im Dunkeln laeuft es andersherum: Die Karte ist heller als der
           Grund. Also wird der Grund tiefer und die Karte einen Tick
           heller - derselbe Abstand, nur gespiegelt. */
        --border:#514F4B;  --border-strong:#726F6A;  --grid-line:#5D5A56;
        --ink:#EFEEEC;     --ink-2:#B0AFAB;    --ink-3:#97948D;
        --brand:#E0687C;   --brand-solid:#A9243C; --brand-hover:#BC2B45; --brand-on:#FFFFFF;
        --brand-soft:#32191E; --brand-soft-ink:#F0A7B3; --brand-line:#5A383D;
        --pos:#6FBF95; --pos-soft:#16281F; --neg:#D79A4E; --neg-soft:#2C2214; --warn:#D7B25A;

        --d1:#E0687C; --d2:#8FB4D8; --d3:#D9AC5C; --d4:#A79AD6; --d5:#63BDBF; --d6:#D19467;
        --d1-soft:#371A20; --d2-soft:#1B2530; --d3-soft:#2B2314;
        --d4-soft:#221E33; --d5-soft:#132A2B; --d6-soft:#2C1E15;
        --shadow:0 1px 2px rgba(0,0,0,.55), 0 10px 24px -14px rgba(0,0,0,.95);

        color-scheme: dark;
    }
}

/* Ausdrueckliche Wahl "dunkel" - schlaegt ein helles Betriebssystem. */
:root[data-theme="dark"] {
    --canvas:#0C0C0B;  --canvas-tief:#050504;  --surface:#1E1E1C;  --surface-2:#252523;  --surface-3:#2D2D2B;
    /* Im Dunkeln laeuft es andersherum: Die Karte ist heller als der
       Grund. Also wird der Grund tiefer und die Karte einen Tick
       heller - derselbe Abstand, nur gespiegelt. */
    --border:#514F4B;  --border-strong:#726F6A;  --grid-line:#5D5A56;
    --ink:#EFEEEC;     --ink-2:#B0AFAB;    --ink-3:#97948D;
    --brand:#E0687C;   --brand-solid:#A9243C; --brand-hover:#BC2B45; --brand-on:#FFFFFF;
    --brand-soft:#32191E; --brand-soft-ink:#F0A7B3; --brand-line:#5A383D;
    --pos:#6FBF95; --pos-soft:#16281F; --neg:#D79A4E; --neg-soft:#2C2214; --warn:#D7B25A;

    --d1:#E0687C; --d2:#8FB4D8; --d3:#D9AC5C; --d4:#A79AD6; --d5:#63BDBF; --d6:#D19467;
    --d1-soft:#371A20; --d2-soft:#1B2530; --d3-soft:#2B2314;
    --d4-soft:#221E33; --d5-soft:#132A2B; --d6-soft:#2C1E15;
    --shadow:0 1px 2px rgba(0,0,0,.55), 0 10px 24px -14px rgba(0,0,0,.95);

    color-scheme: dark;
}

/* ================= 2. Uebersetzung der alten Namen ================= */

/* Diese Zuordnungen stehen bewusst NUR hier und nicht in den drei
   Theme-Bloecken: var() loest erst beim Benutzen auf, die Verweise
   folgen dem Theme also von selbst. Eine Zeile je Name, kein Duplikat
   je Modus. */

:root {
    /* Flaechen */
    --flaeche-app:          var(--canvas);
    --flaeche-karte:        var(--surface);
    --flaeche-kopf:         var(--surface-3);
    --flaeche-zeile:        var(--surface-2);
    --flaeche-spur:         var(--surface-3);
    --flaeche-leiste:       var(--surface);
    --flaeche-leiste-kopf:  var(--surface-2);
    /* Der aeusserste Grund, auf dem Seitenleiste und Inhaltsbereich als
       Widgets liegen. Er muss TIEFER sein als der Inhaltsbereich - zeigte
       er wie frueher auf --surface-3, waere der Rand um die Anwendung
       heller als ihr Inneres und die Staffelung stuende auf dem Kopf. */
    --flaeche-vertieft:     var(--canvas-tief);
    --flaeche-plan-spalte:  var(--surface-2);

    /* Linien. Der Entwurf kennt drei Staerken mit klarer Aufgabe:
       --border traegt Karten, --grid-line Tabellen und Schichtplan,
       --border-strong Eingabefelder und Aussenkanten. */
    --linie:        var(--border);
    --linie-leise:  var(--border);
    --linie-stark:  var(--border-strong);

    /* Text */
    --text:         var(--ink);
    --text-leise:   var(--ink-2);
    --text-schwach: var(--ink-3);

    /* Wo frueher Gruen stand, steht jetzt das Rot der Marke.
       Die Namen bleiben, damit die Vorlagen unveraendert weiterlaufen. */
    --gruen:         var(--brand-solid);
    --gruen-druck:   var(--brand-hover);
    --gruen-schrift: var(--brand);
    --gruen-tief:    var(--brand-soft-ink);
    --gruen-hauch:   var(--brand-soft);
    --gruen-hauch-2: var(--surface-2);
    --gruen-rand:    var(--brand-line);
    --gruen-link:    var(--brand);
    --gruen-fokus:   var(--brand);
    --auf-gruen:     var(--brand-on);

    /* Status. --neg ist im Entwurf ausdruecklich "Minus / Hinweis" -
       deshalb traegt es auch Fehlermeldungen. Das Markenrot bleibt der
       Hauptaktion vorbehalten, sonst liesse sich "wichtig" nicht mehr
       von "kaputt" unterscheiden. */
    --minus:       var(--neg);
    --minus-hauch: var(--neg-soft);
    --minus-rand:  var(--border);
    --warn-soft:   var(--neg-soft);
    --warn-hauch:  var(--neg-soft);
    --warn-rand:   var(--border);
    --warn-kopf:   var(--surface-2);
    --warn-punkt:  var(--warn);
    --warn-text:   var(--ink);

    --erfolg-text: var(--pos);
    --erfolg-bg:   var(--pos-soft);
    --fehler-text: var(--neg);
    --fehler-bg:   var(--neg-soft);

    /* Schatten. Der Entwurf fuehrt nur einen - Kanten tragen die
       Struktur, nicht Schatten. */
    --schatten-karte:  var(--shadow);
    --schatten-widget: var(--shadow);
    --schatten-hoch:   var(--shadow);

    --rand-auf-farbe:  rgb(255 255 255 / .18);
    --schiene-neutral: var(--border-strong);

    /* ---------- Form und Mass (farbunabhaengig) ---------- */
    --radius-widget: 14px;
    --radius-karte:  12px;
    --radius-feld:   10px;
    --radius-chip:   6px;
    --leisten-luft:  10px;
    --schiene-breite: 3px;
    --abstand-seite: 26px;
    --inhalt-max:    1680px;

    --seitenleiste-breit:  248px;
    --seitenleiste-schmal: 68px;

    --schrift: "IBM Plex Sans", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* HINWEIS zur Uebersetzung oben: --gruen* zeigt auf die Markenfarbe
   (Rot). Das ist richtig fuer alles, was frueher "Markenakzent" hiess -
   aktiver Menuepunkt, Hauptschaltflaeche, Fokusring.

   NICHT richtig ist es dort, wo Gruen "positiv" oder "verbunden"
   bedeutete: Plus-Saldo, Erfolgsmeldung, Miniserver-Status. Im alten
   Entwurf trug eine Farbe beide Bedeutungen; jetzt sind es zwei
   (--brand und --pos). Diese Stellen zeigen deshalb ausdruecklich auf
   --pos - sonst faerbte sich ein Plus-Saldo rot ein, und Rot heisst
   ueberall sonst "Achtung". */

/* ================= Grundlagen ================= */

* { box-sizing: border-box; }

/* Das HTML-Attribut hidden wirkt nur ueber das Standardstylesheet des
   Browsers - und jede eigene display-Angabe schlaegt das. Ein Element
   mit einer Klasse wie .btn (display: inline-flex) blieb deshalb trotz
   hidden sichtbar. Genau daran hing der "Umstellen"-Knopf in der
   Arbeitszeit: Er sollte verschwinden, sobald JavaScript laeuft, tat es
   aber nie. Diese eine Zeile raeumt das fuer die ganze Anwendung auf. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
    margin: 0;
    background: var(--flaeche-app);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--gruen-link); text-decoration: none; }
a:hover { color: var(--gruen-schrift); }
button { font: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Zahlen laufen in Festbreite, damit Spalten untereinander stehen -
   das macht den halben "Programm"-Eindruck aus. */
.zahl, .mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* Mikro-Label ueber Spalten und Kennzahlen */
.mikro {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

/* ================= Grundgeruest ================= */

.app { display: flex; align-items: stretch; min-height: 100vh; }
.inhalt-bereich { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt { padding: 20px 26px 40px; flex: 1; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Seitenleiste ---------- */

.seitenleiste {
    width: var(--seitenleiste-breit);
    flex: 0 0 var(--seitenleiste-breit);
    background: var(--flaeche-karte);
    border-right: 1px solid var(--linie);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .16s ease, flex-basis .16s ease;
}
.seitenleiste-kopf {
    padding: 20px 18px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--linie-leise);
}
.marken-zeichen {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--gruen);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.marken-zeichen span {
    width: 12px; height: 12px; border-radius: 3px; background: var(--brand-on);
}
.marken-text { min-width: 0; }
.marke {
    font-size: 14px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marke-unter {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-leise);
}

.leisten-nav {
    flex: 1; padding: 12px 10px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; overflow-x: hidden;
}
.nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-gruppe-titel {
    padding: 6px 12px 8px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-schwach);
}
.leisten-nav a {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-feld);
    color: var(--text-leise); font-size: 13.5px; font-weight: 500;
    white-space: nowrap; overflow: hidden;
}
.leisten-nav a svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-schwach); }
.leisten-nav a:hover { background: var(--flaeche-kopf); color: var(--text); }
.leisten-nav a.aktiv {
    background: var(--gruen-hauch); color: var(--gruen-tief); font-weight: 600;
}
.leisten-nav a.aktiv::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--gruen);
}
.leisten-nav a.aktiv svg { color: var(--gruen-schrift); }
.nav-zaehler {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    color: var(--warn); background: var(--warn-hauch);
    border-radius: 10px; padding: 2px 7px;
}

.leisten-status {
    margin: 10px; padding: 12px 13px;
    border: 1px solid var(--linie); border-radius: 9px;
    background: var(--flaeche-kopf);
    display: flex; flex-direction: column; gap: 7px;
}
.status-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status-verbunden {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--pos); font-weight: 600;
}
.lebenspunkt {
    width: 6px; height: 6px; border-radius: 50%; background: var(--pos);
    animation: lebenspunkt 2.4s ease-in-out infinite;
}
@keyframes lebenspunkt { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.status-haupt { font-size: 12px; color: var(--text); font-weight: 500; }
.status-neben { font-family: var(--mono); font-size: 10.5px; color: var(--text-leise); }
@media (prefers-reduced-motion: reduce) { .lebenspunkt { animation: none; } }

.leisten-benutzer {
    padding: 12px 16px 16px; border-top: 1px solid var(--linie-leise);
    display: flex; align-items: center; gap: 10px;
}
.benutzer-text { flex: 1; min-width: 0; }
.benutzer-name {
    display: block; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.benutzer-rolle { display: block; font-size: 10.5px; color: var(--text-leise); }
.abmelden-knopf {
    width: 28px; height: 28px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-schwach);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.abmelden-knopf:hover { background: var(--flaeche-kopf); color: var(--text); }
.abmelden-knopf svg { width: 16px; height: 16px; }

/* eingeklappt */
body.leiste-schmal .seitenleiste {
    width: var(--seitenleiste-schmal); flex-basis: var(--seitenleiste-schmal);
}
body.leiste-schmal .marken-text,
body.leiste-schmal .leisten-nav a span:not(.nav-zaehler),
body.leiste-schmal .nav-gruppe-titel,
body.leiste-schmal .leisten-status,
body.leiste-schmal .benutzer-text,
body.leiste-schmal .abmelden-knopf { display: none; }
body.leiste-schmal .leisten-nav a { justify-content: center; padding: 9px; }
body.leiste-schmal .seitenleiste-kopf { padding: 20px 0; justify-content: center; }
body.leiste-schmal .leisten-benutzer { justify-content: center; }

/* ---------- Kopfzeile ---------- */

.seiten-kopf {
    position: sticky; top: 0; z-index: 5;
    background: var(--flaeche-karte);
    border-bottom: 1px solid var(--linie);
    padding: 11px 26px; min-height: 66px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
}
.kopf-titel { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; }
.kopf-titel h1 { margin: 0; font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; }
.kopf-unter { font-family: var(--mono); font-size: 11px; color: var(--text-leise); }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leisten-schalter, .mobil-menue {
    width: 32px; height: 32px; border: 1px solid var(--linie); border-radius: var(--radius-feld);
    background: var(--flaeche-karte); color: var(--text-schwach);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.leisten-schalter:hover, .mobil-menue:hover { border-color: var(--linie-stark); color: var(--text); }
.leisten-schalter svg, .mobil-menue svg { width: 16px; height: 16px; }
.mobil-menue { display: none; }
.leisten-schleier { display: none; }

/* ================= Karten ================= */

.karte {
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
    overflow: hidden;
}
.karte-kopf {
    padding: 12px 17px;
    background: var(--flaeche-kopf);
    border-bottom: 1px solid var(--linie);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.karte-kopf-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.karte-kopf-titel > span:first-child { font-size: 13.5px; font-weight: 600; }
.karte-kopf-unter { font-family: var(--mono); font-size: 10.5px; color: var(--text-leise); }
.karte-koerper { padding: 15px 17px; }
.karte-fuss {
    padding: 11px 17px; border-top: 1px solid var(--linie-leise);
    background: var(--flaeche-zeile); font-size: 12px; color: var(--text-leise);
}

/* Kennzahl-Kacheln */
.kennzahl-raster {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px;
}
.kennzahl {
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    padding: 15px 17px;
    display: flex; flex-direction: column; gap: 7px;
}
.kennzahl.betont { background: var(--gruen-hauch-2); border-color: var(--gruen-rand); }
.kennzahl.betont .mikro { color: var(--gruen-schrift); }
.kennzahl.betont .kennzahl-wert { color: var(--gruen-tief); }
.kennzahl.betont .kennzahl-neben { color: var(--gruen-schrift); }
.kennzahl-wert {
    font-family: var(--mono); font-size: 27px; font-weight: 500;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kennzahl-wert.minus { color: var(--minus); }
.kennzahl-wert.warn { color: var(--warn); }
.kennzahl-neben { font-size: 11.5px; color: var(--text-leise); }

/* Fortschritt Ist/Soll */
.fortschritt-zeile { display: flex; align-items: center; gap: 8px; }
.fortschritt-leiste {
    flex: 1; height: 6px; border-radius: 3px;
    background: var(--flaeche-spur); overflow: hidden;
}
.fortschritt-fuellung { display: block; height: 100%; background: var(--gruen); border-radius: 3px; }
.fortschritt-wert { font-family: var(--mono); font-size: 10.5px; color: var(--text-leise); }

/* ================= Tabellen ================= */

table.datentabelle {
    width: 100%; border-collapse: collapse;
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    overflow: hidden;
    box-shadow: var(--schatten-karte);
}
table.datentabelle th {
    text-align: left; padding: 9px 17px;
    background: var(--flaeche-zeile);
    border-bottom: 1px solid var(--linie);
    font-family: var(--mono); font-size: 9px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-schwach);
    white-space: nowrap;
}
table.datentabelle td {
    text-align: left; padding: 11px 17px;
    border-bottom: 1px solid var(--linie-leise);
    font-size: 13px; vertical-align: middle;
}
table.datentabelle tbody tr:last-child td { border-bottom: none; }
table.datentabelle tbody tr:hover td { background: var(--flaeche-zeile); }
table.datentabelle td.zahl, table.datentabelle td .zahl {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* Gruppenkopf innerhalb einer Tabelle */
tr.gruppen-kopf td {
    background: var(--flaeche-zeile);
    border-bottom: 1px solid var(--linie);
    padding: 7px 17px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-schwach);
}
tr.gruppen-kopf .gruppen-summe { float: right; color: var(--text-leise); }

/* Statusschiene: 3px Balken links in der Zeile, nur bei Pruefbedarf */
tr.prueft td:first-child { position: relative; }
tr.prueft td:first-child::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--warn-punkt);
}

.tabellen-aktionen { display: flex; gap: 6px; justify-content: flex-end; }

/* ================= Chips und Marken ================= */

.chip {
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    padding: 3px 8px; border-radius: var(--radius-chip);
    border: 1px solid var(--linie); background: var(--flaeche-zeile);
    color: var(--text-leise); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.chip-plus { background: var(--gruen-hauch); border-color: var(--gruen-rand); color: var(--gruen-schrift); }
.chip-minus { background: var(--minus-hauch); border-color: var(--minus-rand); color: var(--minus); }

.badge {
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: 9px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 7px; border-radius: var(--radius-chip);
    border: 1px solid var(--linie); background: var(--flaeche-zeile);
    color: var(--text-leise); white-space: nowrap;
}
.badge-erfolg { background: var(--pos-soft); border-color: var(--border); color: var(--pos); }
.badge-warn { background: var(--warn-hauch); border-color: var(--warn-rand); color: var(--warn); }
.badge-neutral { background: var(--flaeche-zeile); border-color: var(--linie); color: var(--text-leise); }

/* ================= Knoepfe ================= */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; padding: 0 14px;
    border: 1px solid transparent; border-radius: var(--radius-feld);
    background: var(--gruen); color: var(--auf-gruen);
    font-size: 12.5px; font-weight: 600; text-decoration: none;
    white-space: nowrap; font-family: inherit;
}
.btn:hover { background: var(--gruen-druck); color: var(--auf-gruen); }
.btn-sekundaer {
    background: var(--flaeche-karte); color: var(--text);
    border-color: var(--linie); font-weight: 500;
}
.btn-sekundaer:hover { background: var(--flaeche-zeile); border-color: var(--linie-stark); color: var(--text); }
.btn-gefahr { color: var(--minus); }
.btn-gefahr:hover { border-color: var(--minus-rand); background: var(--minus-hauch); }
.btn-klein { height: 30px; padding: 0 12px; font-size: 12px; }

/* ================= Formulare ================= */

form.formular {
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
    padding: 18px 20px 20px;
    max-width: 620px;
}
.formular .feld { margin-bottom: 15px; }
.formular .feld-zeile { display: flex; gap: 14px; }
.formular .feld-zeile .feld { flex: 1; min-width: 0; }
.formular label {
    display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px;
}
.formular label .optional { font-weight: 400; color: var(--text-schwach); }
.formular input, .formular select, .formular textarea {
    width: 100%; height: 38px; padding: 0 11px;
    border: 1px solid var(--linie); border-radius: var(--radius-feld);
    font-size: 13.5px; font-family: inherit;
    background: var(--flaeche-karte); color: var(--text);
}
.formular textarea { height: auto; padding: 9px 11px; min-height: 76px; resize: vertical; }
.formular input[type="datetime-local"], .formular input[type="date"],
.formular input[type="time"], .formular input[type="number"] { font-family: var(--mono); }
.formular input:focus, .formular select:focus, .formular textarea:focus {
    outline: none; border-color: var(--gruen-fokus); box-shadow: 0 0 0 3px var(--gruen-hauch);
}
.formular input:disabled { background: var(--flaeche-zeile); color: var(--text-leise); }
.formular .aktionen { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.feld-hinweis { font-size: 11.5px; color: var(--text-leise); margin-top: 6px; line-height: 1.5; }

/* Passwortfeld mit Auge zum Mitlesen. Die Huelle legt _passwort_auge.html
   um das Feld; ohne JavaScript bleibt das Feld schlicht wie zuvor. */
.passwort-huelle { position: relative; }
.passwort-huelle input { padding-right: 42px; }
.passwort-auge {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; padding: 0; cursor: pointer;
    color: var(--text-leise); border-radius: 0 var(--radius-feld) var(--radius-feld) 0;
}
.passwort-auge:hover { color: var(--text); }
.passwort-auge:focus-visible {
    outline: none; color: var(--text);
    box-shadow: 0 0 0 2px var(--gruen-fokus); border-radius: var(--radius-feld);
}
.passwort-auge svg { width: 17px; height: 17px; }

/* ================= Titelzeile und Text ================= */

h1 { font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.005em; }
h3 { font-size: 13px; font-weight: 600; margin: 18px 0 6px; }
p { margin: 0 0 10px; line-height: 1.6; }
.beschreibung { color: var(--text-leise); font-size: 12.5px; }
.hilfstext { font-size: 11.5px; color: var(--text-leise); }
.nur-lesbar { color: var(--text-leise); }

.seiten-titel-zeile {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 14px; flex-wrap: wrap;
}

/* Leerzustand: zentriert, mit Platzhalter-Zeichen und einem Satz.

   Das Zeichen kommt aus dem CSS und nicht aus jeder Vorlage einzeln -
   ein leerer Zustand sieht ueberall gleich aus, und niemand muss beim
   Anlegen einer neuen Seite daran denken. Es steht auf aria-hidden,
   weil ein Kreis mit Strich nichts vorzulesen hat. */
.leer-hinweis {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-karte);
    padding: 40px 24px; text-align: center;
    color: var(--ink-2); font-size: 13.5px; line-height: 1.6;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.leer-hinweis::before {
    content: ""; display: block;
    width: 34px; height: 34px; margin-bottom: 8px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    /* Der Querstrich macht aus dem Kreis ein "leer"-Zeichen, ohne dass
       eine Bilddatei oder ein Zeichensatz dafuer noetig waere. */
    background: linear-gradient(to bottom right,
        transparent calc(50% - 1px), var(--border-strong) calc(50% - 1px),
        var(--border-strong) calc(50% + 1px), transparent calc(50% + 1px));
}
.leer-hinweis a { font-weight: 600; }
.zurueck-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-leise); font-size: 12.5px; margin-bottom: 4px;
}
.zurueck-link:hover { color: var(--text); }

.meldung {
    border-radius: var(--radius-feld); padding: 11px 14px;
    font-size: 13px; border: 1px solid var(--linie);
}
.meldung-fehler { background: var(--minus-hauch); border-color: var(--minus-rand); color: var(--minus); }
.meldung-erfolg { background: var(--pos-soft); border-color: var(--border); color: var(--pos); }

/* ================= Profilbilder ================= */

.avatar, .avatar-gross, .avatar-klein, .avatar-mini, .avatar-profil {
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-weight: 500; flex-shrink: 0;
    color: var(--gruen-schrift); background: var(--gruen-hauch);
    border: 1px solid var(--gruen-rand);
    overflow: hidden;
}
/* Die Initialen bekommen je nach Oberflaeche die dunklere oder die
   hellere Abstufung ihrer Farbe - beide Werte liefert avatar() mit.
   Gleiche Farbe fuer Schrift und Kreis waere zu schwach lesbar. */
.avatar[style*="--schrift-hell"],
.avatar-gross[style*="--schrift-hell"],
.avatar-klein[style*="--schrift-hell"],
.avatar-mini[style*="--schrift-hell"],
.avatar-profil[style*="--schrift-hell"] { color: var(--schrift-hell); }
.avatar { width: 38px; height: 38px; font-size: 12px; }
.avatar-profil { width: 84px; height: 84px; font-size: 26px; }
.avatar-gross { width: 52px; height: 52px; font-size: 15px; }
.avatar-klein { width: 32px; height: 32px; font-size: 11px; }
.avatar-mini { width: 26px; height: 26px; font-size: 9.5px; }
img.avatar, img.avatar-gross, img.avatar-klein, img.avatar-mini, img.avatar-profil {
    object-fit: cover; background: var(--flaeche-zeile);
}
.namens-zelle {
    display: inline-flex; align-items: center; gap: 10px;
    color: inherit; font-weight: 500; min-width: 0;
}
.namens-zelle:hover { color: var(--gruen-schrift); }
.namens-zelle span { overflow: hidden; text-overflow: ellipsis; }

.bild-waehler { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bild-vorschau {
    width: 84px; height: 84px; border-radius: 50%;
    border: 1px solid var(--linie); object-fit: cover;
    background: var(--gruen-hauch);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 24px; color: var(--gruen-schrift);
    flex: 0 0 auto;
}
.bild-waehler-text { flex: 1; min-width: 180px; }

/* ================= Dashboard ================= */

.karten-liste { display: flex; flex-direction: column; gap: 12px; }
.raster-zwei {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 16px; align-items: start;
}

.aufgaben-zeile {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 17px; border-bottom: 1px solid var(--linie-leise);
}
.aufgaben-zeile:last-child { border-bottom: none; }
.aufgaben-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aufgaben-titel { font-size: 13px; font-weight: 500; }
.aufgaben-meta { font-size: 11.5px; color: var(--text-leise); }
.karte-kopf.warnung {
    background: var(--warn-kopf); border-bottom-color: var(--warn-rand);
}
.karte-kopf.warnung .karte-kopf-titel > span:first-child { color: var(--warn-text); }
.warn-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-punkt); flex: 0 0 auto; }

.mitarbeiter-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 17px; border-bottom: 1px solid var(--linie-leise);
}
.mitarbeiter-zeile:last-child { border-bottom: none; }
.mitarbeiter-zeile:hover { background: var(--flaeche-zeile); }
.mz-text { flex: 1; min-width: 0; }
.mz-name { font-size: 13px; font-weight: 500; }
.mz-neben { font-size: 11.5px; color: var(--text-leise); }
.mz-zahlen { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Zustandsanzeige Mitarbeiter */
.zustand-anzeige {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--linie); background: var(--flaeche-karte);
}
.zustand-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-schwach); }
.zustand-aktiv { background: var(--gruen-hauch); border-color: var(--gruen-rand); color: var(--gruen-schrift); }
.zustand-aktiv .zustand-punkt { background: var(--gruen); }
.zustand-pause { background: var(--warn-hauch); border-color: var(--warn-rand); color: var(--warn); }
.zustand-pause .zustand-punkt { background: var(--warn-punkt); }

.tages-verlauf { display: flex; gap: 22px; flex-wrap: wrap; }
.verlauf-punkt { position: relative; padding-left: 13px; }
.verlauf-punkt::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--text-schwach);
}
.verlauf-check_in::before { background: var(--gruen); }
.verlauf-check_out::before { background: var(--minus); }
.verlauf-pause::before { background: var(--warn-punkt); }
.verlauf-zeit { font-family: var(--mono); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.verlauf-art { font-size: 11px; color: var(--text-leise); }

.schicht-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 17px; border-bottom: 1px solid var(--linie-leise);
}
.schicht-zeile:last-child { border-bottom: none; }
.schicht-zeile-text { min-width: 0; flex: 1; }

/* ================= Mitarbeiter-Detail ================= */

.detail-kopf { display: flex; align-items: center; gap: 13px; }
.personal-nr { font-family: var(--mono); font-size: 11px; color: var(--text-leise); word-break: break-word; }

.unternav {
    display: flex; gap: 4px; padding: 3px;
    background: var(--flaeche-karte); border: 1px solid var(--linie);
    border-radius: 9px; flex-wrap: wrap; align-self: flex-start;
}
.unternav a {
    padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
    color: var(--text-leise); border: 1px solid transparent;
}
.unternav a:hover { color: var(--text); background: var(--flaeche-zeile); }
.unternav a.aktiv {
    background: var(--gruen-hauch); border-color: var(--gruen-rand);
    color: var(--gruen-tief); font-weight: 600;
}

.info-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px 24px; }
.info-feld .label {
    font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-schwach); margin-bottom: 4px;
}
.info-feld .wert-text { font-size: 13.5px; word-break: break-word; }

.regel-liste { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.75; color: var(--text-leise); }
.regel-liste strong { color: var(--text); }

.quellen-wahl { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.quellen-karte {
    display: flex; gap: 11px; width: 100%; margin: 0; cursor: pointer;
    background: var(--flaeche-karte); border: 1px solid var(--linie);
    border-radius: var(--radius-karte); padding: 14px 16px;
}
.quellen-karte:hover { border-color: var(--linie-stark); }
.quellen-karte.aktiv { border-color: var(--gruen); background: var(--gruen-hauch-2); }
.quellen-karte input { width: auto; height: auto; margin: 3px 0 0; accent-color: var(--gruen); flex: 0 0 auto; }
.quellen-inhalt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quellen-titel { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.quellen-beschreibung { font-size: 12.5px; color: var(--text-leise); }
.quellen-details {
    font-family: var(--mono); font-size: 11px; color: var(--text-leise);
    background: var(--flaeche-zeile); border: 1px solid var(--linie-leise);
    border-radius: var(--radius-chip); padding: 5px 8px; margin-top: 3px; align-self: flex-start;
}

.tage-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-kaestchen {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    padding: 7px 11px; border: 1px solid var(--linie); border-radius: var(--radius-feld);
    cursor: pointer; font-size: 12.5px; font-weight: 500;
    background: var(--flaeche-karte); user-select: none;
}
.tag-kaestchen input { width: auto; height: auto; margin: 0; accent-color: var(--gruen); }
.tag-kaestchen:has(input:checked) {
    border-color: var(--gruen); background: var(--gruen-hauch); color: var(--gruen-tief);
}

.uebernommen-feld {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 10px 12px; border: 1px dashed var(--linie); border-radius: var(--radius-feld);
    background: var(--flaeche-zeile); font-size: 13.5px;
}
.unterflaeche {
    background: var(--flaeche-zeile); border: 1px solid var(--linie-leise);
    border-radius: var(--radius-feld); padding: 11px 13px; font-size: 13px;
}
.loeschen-gesperrt {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
    font-size: 11.5px; color: var(--text-schwach);
    border: 1px dashed var(--linie); border-radius: var(--radius-feld);
    cursor: help; white-space: nowrap;
}

/* ================= Schichtplan =================

   Umgesetzt nach der Bauanleitung aus "Schichtplan.dc.html". Die Werte
   dort sind ausdruecklich als exakt gemeint, deshalb stehen sie hier
   unveraendert - nur die Linien sind kraeftiger, wie ausdruecklich
   gewuenscht. */

/* Eine Karte traegt Kopf, Legende und Raster. */
.plan-karte {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    /* Waagrecht scrollen statt quetschen. Sieben Tagesspalten brauchen
       Platz; presst man sie in ein schmales Fenster, bricht die Uhrzeit
       um und der Plan wird unlesbar. Lieber schieben. */
    overflow: hidden;
    overflow-x: auto;
    box-shadow: var(--shadow);
}
/* Kopf, Legende und Raster muessen dieselbe Mindestbreite haben, sonst
   laufen sie beim Schieben gegeneinander. */
.plan-kopf, .plan-legende, .plan-raster { min-width: 1080px; }

.plan-kopf {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-strong);
}
.plan-kopf-titel { display: flex; flex-direction: column; gap: 3px; }
.plan-kopf-titel h2 {
    margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
}
.plan-kopf-woche { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.plan-kopf-aktionen {
    margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.plan-wochenwahl { display: flex; align-items: center; gap: 6px; }
.plan-pfeil, .plan-diese-woche {
    height: 36px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 9px; color: var(--ink); text-decoration: none;
}
.plan-pfeil { width: 36px; font-size: 15px; color: var(--ink-2); }
.plan-diese-woche { padding: 0 16px; font: 600 13px var(--schrift); }
.plan-pfeil:hover, .plan-diese-woche:hover {
    background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.plan-kopf-aktionen .btn { height: 36px; border-radius: 9px; padding: 0 18px; }

.plan-legende {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 11px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--grid-line);
}
.plan-legende-titel {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
}
.plan-legende-punkt {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    text-transform: uppercase;
}
.plan-legende-punkt i {
    width: 9px; height: 9px; border-radius: 3px; display: block;
}

/* Das Raster. gap:1px auf --grid-line zeichnet die Linien - so ist
   jede Zelle begrenzt, ohne dass irgendwo zwei Raender aufeinander
   stossen und doppelt dick werden. */
.plan-raster {
    display: grid;
    grid-template-columns: 236px repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
}

/* ---------- Kopfzeile ---------- */

.plan-ecke {
    background: var(--surface-3); padding: 12px 18px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
    display: flex; align-items: flex-end;
}
.plan-kopf-zelle {
    background: var(--surface-3); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.plan-kopf-zelle .tag-name {
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
}
.plan-kopf-zelle .tag-datum {
    font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink);
}
.plan-kopf-zelle.wochenende { background: var(--surface-2); }
.plan-kopf-zelle.wochenende .tag-datum { color: var(--ink-2); }
/* Heute: zarter Grund plus 3px Oberkante in der Markenfarbe. */
.plan-kopf-zelle.heute {
    background: var(--brand-soft); box-shadow: inset 0 3px 0 var(--brand);
}
.plan-kopf-zelle.heute .tag-name { color: var(--brand-soft-ink); opacity: .85; }
.plan-kopf-zelle.heute .tag-datum { color: var(--brand-soft-ink); font-weight: 700; }

/* ---------- Personenspalte ---------- */

.plan-name-zelle {
    background: var(--surface); padding: 14px 18px;
    display: flex; gap: 11px; align-items: flex-start; min-width: 0;
}
.plan-avatar {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.plan-name-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.plan-name-zelle a {
    color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-name-zelle a:hover { color: var(--brand); }
.plan-stunden { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.plan-stunden strong { color: var(--ink); font-weight: 600; }
/* Unterdeckung faellt auf: weniger geplant als Soll heisst Luecke im
   Dienstplan, nicht blosse Abweichung. */
.plan-stunden.unterdeckt strong { color: var(--neg); }

.plan-auslastung {
    height: 5px; border-radius: 999px;
    background: var(--surface-3); border: 1px solid var(--border); overflow: hidden;
}
.plan-auslastung span { display: block; height: 100%; }

/* ---------- Zellen ---------- */

.plan-zelle {
    position: relative;
    background: var(--surface); padding: 8px; min-height: 96px;
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.plan-zelle.wochenende { background: var(--surface-2); }
.plan-zelle.heute { background: var(--brand-soft); }

/* Die Schicht-Karte fuellt die Zelle aus - das ist der Punkt, an dem
   der Plan wie ein Plan aussieht und nicht wie eine Liste kleiner
   Zettel. Bei mehreren Schichten am selben Tag teilen sie sich die
   Hoehe gleichmaessig. */
.schicht-karte {
    flex: 1 1 0; min-height: 0;
    display: flex; flex-direction: column; gap: 3px;
    border-radius: 9px; padding: 9px 11px;
    border: 1px solid; border-left-width: 4px;
    text-decoration: none;
}
.schicht-karte:hover { filter: brightness(.97); text-decoration: none; }
.schicht-bereich {
    font-size: 12px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schicht-zeit {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    color: var(--ink); white-space: nowrap;
}
/* margin-top:auto schiebt die Stundenzahl an den unteren Rand - so
   stehen sie ueber alle Karten hinweg auf einer Linie, egal wie lang
   der Bereichsname ist. */
.schicht-dauer {
    font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: auto;
}

/* Eine leere Zelle ist eine Aktion, keine Luecke: Beim Ueberfahren
   erscheint der gestrichelte Rahmen mit "+", ein Klick legt die Schicht
   fuer genau diese Person an genau diesem Tag an. */
.schicht-hinzu {
    flex: 1 1 0; min-height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1.5px dashed transparent;
    color: transparent; font-size: 18px; line-height: 1; text-decoration: none;
}
.plan-zelle:hover .schicht-hinzu {
    border-color: var(--border-strong); color: var(--ink-3);
}
.plan-zelle.heute:hover .schicht-hinzu {
    border-color: var(--brand-line); color: var(--brand);
}
.schicht-hinzu:hover, .schicht-hinzu:focus-visible {
    border-color: var(--brand) !important; color: var(--brand) !important;
    background: var(--brand-soft); outline: none;
}
/* Steht schon eine Schicht in der Zelle, verlaesst das "+" den
   Textfluss: Sonst nimmt es der Karte ein Drittel der Hoehe weg, und
   der Chip fuellt die Zelle nicht mehr aus - im Entwurf tut er das.

   WICHTIG ist hier, dass im Ruhezustand wirklich NICHTS gemalt wird -
   keine Flaeche, kein Rahmen. Eine deckende Flaeche mit durchsichtiger
   Schrift waere zwar unsichtbar, wuerde aber die Ecke der Schicht-Karte
   ueberdecken und deren Rahmen sichtbar unterbrechen. Genau das war der
   Fehler, der die Kerbe unten rechts erzeugt hat. */
.plan-zelle:has(.schicht-karte) .schicht-hinzu {
    position: absolute; right: 7px; bottom: 7px;
    flex: none; width: 24px; height: 24px; min-height: 0;
    border-radius: 999px; border-width: 1px; border-style: solid;
    border-color: transparent; background: transparent;
    font-size: 15px;
    opacity: 0; transition: opacity .12s ease;
}
/* Erst beim Ueberfahren der Zelle bekommt der Knopf eine Flaeche - dort
   braucht er sie, um auf dem farbigen Chip lesbar zu bleiben. */
.plan-zelle:has(.schicht-karte):hover .schicht-hinzu {
    opacity: 1;
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink-2);
    box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}
/* In der Heute-Spalte ist der Zellengrund nicht --surface. Der Knopf
   nimmt ihn auf, sonst sitzt ein weisser Fleck in der Spalte. */
.plan-zelle.heute:has(.schicht-karte):hover .schicht-hinzu {
    background: var(--brand-soft);
}
/* Tastaturbedienung: Der Knopf muss auch ohne Maus auftauchen, sonst
   ist er per Tabulator nicht auffindbar. */
.plan-zelle:has(.schicht-karte) .schicht-hinzu:focus-visible {
    opacity: 1; background: var(--surface);
}

/* ---------- Fusszeile ---------- */

.plan-summe-ecke {
    background: var(--surface-3); padding: 13px 18px;
    font-size: 13px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center;
}
.plan-summe-zelle {
    background: var(--surface-3); padding: 13px 12px;
    display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.plan-summe-zelle .summe-stunden {
    font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink);
}
.plan-summe-zelle .summe-stunden.summe-null { color: var(--ink-3); }
.plan-summe-zelle > div:last-child {
    font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
}
.plan-summe-zelle.wochenende { background: var(--surface-2); }
.plan-summe-zelle.heute { background: var(--brand-soft); }
.plan-summe-zelle.heute .summe-stunden { color: var(--brand-soft-ink); font-weight: 700; }
.plan-summe-zelle.heute > div:last-child { color: var(--brand-soft-ink); opacity: .8; }
.plan-mobil { display: none; }

/* ================= Korrekturen ================= */

.filter-leiste {
    display: flex; gap: 4px; padding: 3px; background: var(--flaeche-karte);
    border: 1px solid var(--linie); border-radius: 9px; align-self: flex-start; flex-wrap: wrap;
}
.filter-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 6px; color: var(--text-leise);
    font-size: 12.5px; font-weight: 500; border: 1px solid transparent;
}
.filter-knopf:hover { color: var(--text); background: var(--flaeche-zeile); }
.filter-knopf.aktiv {
    background: var(--gruen-hauch); border-color: var(--gruen-rand);
    color: var(--gruen-tief); font-weight: 600;
}
.filter-zahl { font-family: var(--mono); font-size: 10.5px; }

.antrag-kopf { display: flex; align-items: center; gap: 11px; }
.antrag-titel { min-width: 0; flex: 1; }
.antrag-vergleich {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--flaeche-zeile); border: 1px solid var(--linie-leise);
    border-radius: var(--radius-feld); padding: 11px 13px; margin-top: 12px;
}
.vergleich-teil .label {
    font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-schwach);
}
.vergleich-teil .wert-text { font-family: var(--mono); font-size: 12.5px; }
.vergleich-pfeil { color: var(--text-schwach); }
.antrag-begruendung { margin-top: 11px; font-size: 12.5px; color: var(--text-leise); font-style: italic; }
.antrag-entscheidung {
    margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--linie-leise);
    font-size: 12px; color: var(--text-leise);
}
.antrag-aktionen {
    display: flex; gap: 7px; margin-top: 13px; padding-top: 13px;
    border-top: 1px solid var(--linie-leise); flex-wrap: wrap;
}
.antrag-kommentar {
    flex: 1; min-width: 160px; height: 34px; padding: 0 11px;
    border: 1px solid var(--linie); border-radius: var(--radius-feld);
    font-size: 12.5px; font-family: inherit;
    background: var(--flaeche-karte); color: var(--text);
}
.antrag-kommentar:focus { outline: none; border-color: var(--gruen-fokus); }

/* ================= Protokoll ================= */

.protokoll-aktion {
    font-family: var(--mono); font-size: 11px;
    background: var(--flaeche-zeile); border: 1px solid var(--linie-leise);
    padding: 3px 6px; border-radius: var(--radius-chip); white-space: nowrap;
}
.protokoll-alt, .protokoll-neu { font-family: var(--mono); font-size: 11px; word-break: break-word; }
.protokoll-alt { color: var(--minus); }
.protokoll-neu { color: var(--gruen-schrift); }
.blaetterleiste { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

/* ================= Einstellungen ================= */

.einstellungen-huelle { display: flex; gap: 22px; align-items: flex-start; }
.einstellungen-nav {
    flex-shrink: 0; width: 208px; position: sticky; top: 86px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--flaeche-karte); border: 1px solid var(--linie);
    border-radius: var(--radius-karte); padding: 7px;
}
.einstellungen-nav a {
    padding: 8px 11px; border-radius: 6px; color: var(--text-leise);
    font-size: 13px; font-weight: 500; border: 1px solid transparent;
}
.einstellungen-nav a:hover { background: var(--flaeche-zeile); color: var(--text); }
.einstellungen-nav a.aktiv {
    background: var(--gruen-hauch); border-color: var(--gruen-rand);
    color: var(--gruen-tief); font-weight: 600;
}
.einstellungen-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.wahl-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wahl-karte {
    display: flex; flex-direction: column; gap: 8px; cursor: pointer; margin: 0;
    border: 1px solid var(--linie); border-radius: var(--radius-karte);
    padding: 12px; background: var(--flaeche-karte); text-align: center; align-items: center;
}
.wahl-karte:hover { border-color: var(--linie-stark); }
.wahl-karte.aktiv { border-color: var(--gruen); background: var(--gruen-hauch-2); }
.wahl-karte input { width: auto; height: auto; margin: 0; accent-color: var(--gruen); }
.wahl-name { font-weight: 600; font-size: 12.5px; }
.wahl-vorschau {
    width: 100%; height: 54px; border-radius: 7px;
    border: 1px solid var(--linie); overflow: hidden; display: flex;
}
.vorschau-leiste { width: 30%; }
.vorschau-flaeche { flex: 1; }
/* Die Vorschaukacheln sind die eine Stelle, an der feste Farbwerte
   richtig sind: Sie zeigen beide Paletten nebeneinander, also kann
   keine davon dem aktuellen Theme folgen. Werte = --surface und
   --canvas aus dem Token-Block. */
.vorschau-light .vorschau-leiste { background: #FFFFFF; }
.vorschau-light .vorschau-flaeche { background: #DDDDD8; }
.vorschau-dark .vorschau-leiste { background: #1E1E1C; }
.vorschau-dark .vorschau-flaeche { background: #0C0C0B; }
.vorschau-system .vorschau-leiste { background: linear-gradient(135deg, #FFFFFF 50%, #1E1E1C 50%); }
.vorschau-system .vorschau-flaeche { background: linear-gradient(135deg, #DDDDD8 50%, #0C0C0B 50%); }

/* Schalterzeile (Kompakte Tabellen) */
.schalter-zeile {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0;
}
.schalter-zeile input { width: auto; height: auto; margin: 2px 0 0; accent-color: var(--brand); }
.schalter-text { display: flex; flex-direction: column; gap: 2px; }
.schalter-name { font-weight: 600; font-size: 13px; }

/* Kompakte Tabellen: greift ueberall, wird in _theme.html vor dem
   ersten Zeichnen gesetzt, damit die Zeilen nicht sichtbar springen. */
:root.tabellen-dicht .datentabelle td,
:root.tabellen-dicht .datentabelle th { padding-top: 5px; padding-bottom: 5px; }

.rechtstext { max-width: 68ch; }
.rechtstext p { color: var(--text-leise); font-size: 12.5px; }

.rollen-form select {
    height: 30px; padding: 0 8px; border: 1px solid var(--linie);
    border-radius: 6px; font-size: 12.5px; font-family: inherit;
    background: var(--flaeche-karte); color: var(--text);
}
.rollen-form select:focus { outline: none; border-color: var(--gruen-fokus); }

/* ================= Anmeldung und Fehlerseiten ================= */

.anmelde-seite {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 26px; background: var(--flaeche-app);
}
.anmelde-karte {
    background: var(--flaeche-karte); border: 1px solid var(--linie);
    border-radius: 12px; padding: 28px; width: 100%; max-width: 396px;
    box-shadow: 0 4px 18px rgb(26 30 25 / .06);
}
.anmelde-marke { font-size: 17px; font-weight: 600; margin-bottom: 5px; letter-spacing: -.015em; }
.anmelde-hinweis { color: var(--text-leise); font-size: 12.5px; margin-bottom: 20px; line-height: 1.55; }
.anmelde-karte .feld { margin-bottom: 14px; }
.anmelde-karte label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.anmelde-karte input {
    width: 100%; height: 40px; padding: 0 11px;
    border: 1px solid var(--linie); border-radius: var(--radius-feld);
    font-size: 13.5px; font-family: inherit;
    background: var(--flaeche-karte); color: var(--text);
}
.anmelde-karte input:focus { outline: none; border-color: var(--gruen-fokus); box-shadow: 0 0 0 3px var(--gruen-hauch); }
.anmelde-karte .btn { width: 100%; height: 40px; }
.anmelde-karte .meldung { margin-bottom: 16px; }
.anmelde-fuss { text-align: center; margin-top: 16px; font-size: 12.5px; }

.fehler-seite {
    min-height: 62vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 7px;
}
.fehler-code { font-family: var(--mono); font-size: 46px; font-weight: 500; color: var(--text-schwach); line-height: 1; }
.fehler-titel { font-size: 16px; font-weight: 600; }
.fehler-text { color: var(--text-leise); max-width: 44ch; font-size: 13px; margin-bottom: 10px; }

/* ================= Handy ================= */

@media (max-width: 860px) {
    .inhalt { padding: 14px 13px 40px; gap: 13px; }

    .seitenleiste {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
        width: var(--seitenleiste-breit) !important; flex-basis: var(--seitenleiste-breit) !important;
        transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: 0 0 26px rgb(0 0 0 / .16);
    }
    body.leiste-offen .seitenleiste { transform: translateX(0); }
    body.leiste-offen .leisten-schleier {
        display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 30;
    }
    body.leiste-schmal .marken-text,
    body.leiste-schmal .leisten-nav a span,
    body.leiste-schmal .nav-gruppe-titel,
    body.leiste-schmal .leisten-status,
    body.leiste-schmal .benutzer-text,
    body.leiste-schmal .abmelden-knopf { display: revert; }
    body.leiste-schmal .leisten-nav a { justify-content: flex-start; padding: 9px 12px; }
    body.leiste-schmal .seitenleiste-kopf { padding: 20px 18px 18px; justify-content: flex-start; }

    .mobil-menue { display: flex; }
    .leisten-schalter { display: none; }
    .seiten-kopf { padding: 10px 13px; min-height: 58px; }
    .kopf-titel h1 { font-size: 16px; }

    /* Am Handy wird mit dem Daumen getroffen, nicht mit dem Mauszeiger.
       Alles Antippbare bekommt deshalb mindestens 44 Punkte Hoehe -
       darunter trifft man im Gastro-Alltag zu oft daneben. */
    .leisten-nav a { min-height: 44px; padding: 10px 14px; }
    body.leiste-schmal .leisten-nav a { min-height: 44px; padding: 10px 14px; }
    .unternav a,
    .einstellungen-nav a { min-height: 44px; display: flex; align-items: center; }
    .filter-knopf { min-height: 44px; display: inline-flex; align-items: center; }
    /* Anmelde- und Registrierungskarte haben eigene Feldhoehen, die
       sonst die 44 Punkte unterlaufen - gerade dort wird am Handy
       getippt, bevor man ueberhaupt angemeldet ist. */
    .anmelde-karte input,
    .anmelde-karte .btn { height: 48px; }
    .anmelde-karte .code-feld { height: 56px; }
    .namens-zelle { min-height: 44px; }
    .rollen-form select, table.datentabelle select { height: 44px; }
    .mobil-menue, .abmelden-knopf { width: 44px; height: 44px; }
    .zurueck-link { min-height: 44px; display: inline-flex; align-items: center; }

    .seiten-titel-zeile { flex-direction: column; align-items: stretch; gap: 11px; }
    .seiten-titel-zeile > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
    .btn { height: 44px; padding: 0 16px; }
    .btn-klein { height: 44px; }

    /* Tabellen werden zu gestapelten Karten - kein Querscrollen */
    table.datentabelle { border: none; background: none; box-shadow: none; }
    table.datentabelle thead { display: none; }
    table.datentabelle, table.datentabelle tbody, table.datentabelle tr, table.datentabelle td { display: block; width: 100%; }
    table.datentabelle tr {
        background: var(--flaeche-karte); border: 1px solid var(--linie);
        border-radius: var(--radius-karte); margin-bottom: 9px; padding: 6px 0;
        box-shadow: var(--schatten-karte);
    }
    table.datentabelle tr.gruppen-kopf {
        background: none; border: none; box-shadow: none; padding: 10px 2px 2px; margin-bottom: 0;
    }
    table.datentabelle td {
        border: none; padding: 5px 14px;
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
    }
    table.datentabelle td::before {
        content: attr(data-label);
        font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
        text-transform: uppercase; color: var(--text-schwach); flex-shrink: 0;
    }
    table.datentabelle td[data-label=""]::before,
    table.datentabelle td:not([data-label])::before { content: none; }
    table.datentabelle td > * { text-align: right; }
    table.datentabelle tbody tr:hover td { background: none; }
    tr.prueft td:first-child::before { display: none; }
    tr.prueft { border-left: 3px solid var(--warn-punkt); }
    .tabellen-aktionen { width: 100%; }
    .tabellen-aktionen .btn { flex: 1; }

    form.formular { max-width: none; padding: 15px; }
    .formular .feld-zeile { flex-direction: column; gap: 0; }
    .formular .aktionen .btn { flex: 1; }
    .formular input, .formular select { height: 44px; }

    .raster-zwei { grid-template-columns: 1fr; }
    .kennzahl-raster { grid-template-columns: 1fr 1fr; }
    .kennzahl { padding: 12px 13px; }
    .kennzahl-wert { font-size: 21px; }

    .info-raster { grid-template-columns: 1fr; gap: 13px; }
    .unternav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .unternav a { white-space: nowrap; }

    .plan-raster { display: none; }
    .plan-mobil { display: block; }

    .einstellungen-huelle { flex-direction: column; gap: 13px; }
    .einstellungen-nav {
        width: 100%; position: static; flex-direction: row;
        overflow-x: auto; gap: 3px;
    }
    .einstellungen-nav a { white-space: nowrap; }
    .wahl-raster { grid-template-columns: 1fr; }

    .antrag-vergleich { flex-direction: column; align-items: flex-start; gap: 9px; }
    .vergleich-pfeil { transform: rotate(90deg); }
    .antrag-aktionen .btn { flex: 1; }
    .mz-zahlen { gap: 8px; }
    .tages-verlauf { gap: 15px; }
}

@media (max-width: 420px) {
    .kennzahl-raster { grid-template-columns: 1fr; }
}

/* ================= Profilbild aendern ================= */

.bild-form {
    display: flex; align-items: center; gap: 18px;
    padding: 16px; margin-top: 4px;
    background: var(--flaeche-kopf);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
}
.bild-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bild-titel { font-weight: 600; font-size: 14.5px; }
.bild-text .feld-hinweis { margin: 0; max-width: 46ch; }
.bild-knoepfe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* Das Dateifeld steckt in einem <label>. Damit sieht der Auswahlknopf
   aus wie jeder andere Knopf, oeffnet aber den Datei-Dialog. */
.bild-knoepfe label.btn { cursor: pointer; }

/* Zurueckhaltender Knopf fuer Nebensaechliches wie "Entfernen" -
   sichtbar, aber ohne Rahmen, damit er nichts an sich zieht. */
.btn-still {
    background: none; border: 1px solid transparent;
    color: var(--text-leise); font: inherit; font-size: 13px;
    padding: 0 10px; height: 34px; border-radius: var(--radius-feld);
    cursor: pointer;
}
.btn-still:hover { color: var(--minus); border-color: var(--linie); }

@media (max-width: 860px) {
    .bild-form { flex-direction: column; align-items: flex-start; gap: 14px; }
    .btn-still { height: 44px; }
}

/* ================= Kopfstreifen einer Personenseite ================= */

.personen-streifen {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 16px;
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}
.personen-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.personen-name { font-size: 15.5px; font-weight: 600; }
.personen-neben {
    font-family: var(--mono); font-size: 11px;
    color: var(--text-leise); font-variant-numeric: tabular-nums;
}
/* Das Kennzeichen rechts aussen, damit der Zustand auf einen Blick
   sichtbar ist, ohne den Namen zu verdraengen. */
.personen-streifen .badge { margin-left: auto; flex-shrink: 0; }

@media (max-width: 860px) {
    .personen-streifen { gap: 11px; padding: 12px 13px; }
    .personen-name { font-size: 14.5px; }
}

/* Initialen im Dunkelmodus (Systemvorgabe und ausdrueckliche Wahl) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) .avatar[style*="--schrift-dunkel"],
    :root:not([data-theme="hell"]) .avatar-gross[style*="--schrift-dunkel"],
    :root:not([data-theme="hell"]) .avatar-klein[style*="--schrift-dunkel"],
    :root:not([data-theme="hell"]) .avatar-mini[style*="--schrift-dunkel"],
    :root:not([data-theme="hell"]) .avatar-profil[style*="--schrift-dunkel"] {
        color: var(--schrift-dunkel);
    }
}
:root[data-theme="dunkel"] .avatar[style*="--schrift-dunkel"],
:root[data-theme="dunkel"] .avatar-gross[style*="--schrift-dunkel"],
:root[data-theme="dunkel"] .avatar-klein[style*="--schrift-dunkel"],
:root[data-theme="dunkel"] .avatar-mini[style*="--schrift-dunkel"],
:root[data-theme="dunkel"] .avatar-profil[style*="--schrift-dunkel"] {
    color: var(--schrift-dunkel);
}

/* ================= Registrierung ================= */

.schritt-leiste {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0 0 18px; padding: 0;
}
.schritt-leiste li {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
    font-size: 11px; color: var(--text-schwach);
}
.schritt-leiste li:not(:last-child)::after {
    content: ""; flex: 1; height: 1px; background: var(--linie); margin-left: 4px;
}
.schritt-punkt {
    width: 22px; height: 22px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--linie);
    font-family: var(--mono); font-size: 10.5px;
    background: var(--flaeche-karte); color: var(--text-schwach);
}
.schritt-leiste li.aktiv { color: var(--text); font-weight: 600; }
.schritt-leiste li.aktiv .schritt-punkt {
    background: var(--gruen); border-color: var(--gruen); color: var(--auf-gruen);
}
.schritt-leiste li.erledigt .schritt-punkt {
    background: var(--gruen-hauch); border-color: var(--gruen-rand);
    color: var(--gruen-schrift);
}
.schritt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Code wird abgetippt, nicht gelesen - grosse Ziffern mit Abstand,
   damit man beim Vergleichen mit der Mail nicht verrutscht. */
.code-feld {
    font-family: var(--mono); font-size: 22px; letter-spacing: .34em;
    text-align: center; height: 52px;
    font-variant-numeric: tabular-nums;
}

.anmelde-fuss {
    margin-top: 14px; text-align: center; font-size: 12.5px;
    color: var(--text-leise);
}

@media (max-width: 520px) {
    /* Am Handy nur den aktuellen Schritt benennen - vier Woerter
       nebeneinander werden sonst unleserlich abgeschnitten. */
    .schritt-leiste li:not(.aktiv) .schritt-name { display: none; }
    .code-feld { font-size: 20px; letter-spacing: .28em; }
}

/* ================= Punkt 7: Seitenleiste als hohes Widget ================= */

body { background: var(--flaeche-vertieft); }

.seitenleiste {
    background: var(--flaeche-leiste);
    border: 1px solid var(--linie);
    border-radius: var(--radius-widget);
    box-shadow: var(--schatten-widget);
    margin: var(--leisten-luft) 0 var(--leisten-luft) var(--leisten-luft);
    /* Volle Hoehe minus der Luft oben und unten - so steht das Widget frei
       und klebt nicht am Fensterrand. */
    height: calc(100vh - 2 * var(--leisten-luft));
    overflow: hidden;
}
.seitenleiste-kopf,
.leisten-benutzer { background: var(--flaeche-leiste-kopf); }
.leisten-benutzer { border-top: 1px solid var(--linie); }

/* Das Markenquadrat entfaellt - dort steht jetzt das Profilbild. */
.leisten-profil {
    display: inline-flex; flex-shrink: 0;
    border-radius: 50%; padding: 2px;
    border: 1px solid var(--gruen-rand);
    transition: border-color .15s ease;
}
.leisten-profil:hover { border-color: var(--gruen); }

/* Untergeordneter Menuepunkt (Archiv unter Mitarbeiter) */
.leisten-nav a.unterpunkt {
    padding-left: 40px; font-size: 12.5px;
    color: var(--text-leise);
}
.leisten-nav a.unterpunkt::before {
    content: ""; position: absolute; left: 25px; top: 50%;
    width: 7px; height: 1px; background: var(--linie-stark);
}
/* Unterpunkte zeigen ihr Symbol wie alle anderen auch - ohne wirkt die
   Zeile wie ein Fehler neben den Geschwistern mit Symbol. */
.leisten-nav a.unterpunkt svg { width: 15px; height: 15px; opacity: .85; }
.leisten-nav a.unterpunkt.aktiv { color: var(--gruen-schrift); }

.inhalt-bereich {
    background: var(--flaeche-app);
    border: 1px solid var(--linie);
    border-radius: var(--radius-widget);
    margin: var(--leisten-luft);
    overflow: hidden;
}
.inhalt { max-width: var(--inhalt-max); }

/* ================= Punkt 8: Kennzahlen-Kacheln ================= */

.kennzahl-reihe {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kennzahl-kachel {
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-widget);
    padding: 15px 17px 16px;
    display: flex; flex-direction: column; gap: 5px;
}
/* Die erste Kachel traegt einen gruenen Hauch - sie zeigt den Zustand,
   der sich im Tagesbetrieb am haeufigsten aendert. */
.kennzahl-kachel.kachel-gruen {
    background: var(--gruen-hauch);
    border-color: var(--gruen-rand);
}
.kennzahl-wert {
    font-family: var(--mono); font-size: 30px; font-weight: 500;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kennzahl-wert.wert-minus { color: var(--minus); }
.kennzahl-wert.wert-plus  { color: var(--pos); }
.kennzahl-neben { font-size: 11.5px; color: var(--text-leise); }
.kennzahl-balken { display: flex; align-items: center; gap: 9px; }
.kennzahl-balken .fortschritt-leiste { flex: 1; }

/* ================= Punkt 13: zwei Spalten, Breite nutzen ================= */

.raster-zwei {
    display: grid; gap: 13px;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
}
.spalte-breit, .spalte-schmal {
    display: flex; flex-direction: column; gap: 13px; min-width: 0;
}

/* Kartenkopf: Titel links, Zahl ganz rechts aussen */
.karte-titel { font-size: 13.5px; font-weight: 600; }
.karte-zahl {
    margin-left: auto;
    font-family: var(--mono); font-size: 11px; color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.karte-kopf-warnung { background: var(--warn-kopf); }
.warn-punkt {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--warn-punkt); flex-shrink: 0;
}

/* ---- Handlungsbedarf ---- */
.aufgaben-zeile {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 17px 11px 20px;
    border-top: 1px solid var(--linie-leise);
}
/* Schmale senkrechte Schiene - nur dort, wo etwas zu tun ist. */
.schiene-warn::before, .schiene-gruen::before, .schiene-neutral::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: var(--schiene-breite); border-radius: 0 2px 2px 0;
}
.schiene-warn::before    { background: var(--warn-punkt); }
.schiene-gruen::before   { background: var(--pos); }
.schiene-neutral::before { background: var(--schiene-neutral); }

/* Statuschips einheitlich nach dem Entwurf: Mono 11px/600, .06em,
   Pillenform, zarter Grund plus 1px Rand. Vorher waren sie 9px ohne
   Rand und verschwammen mit dem Untergrund. */
.art-marke {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap;
}
/* Pruefung traegt das Markenrot: Es ist die Sache, die jemand anfassen
   soll - nicht eine Stoerung, die von selbst wieder weggeht. */
.marke-pruefung { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-soft-ink); }
.marke-antrag   { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-soft-ink); }
.marke-geraet   { background: var(--surface-3); color: var(--ink-2); }
.aufgaben-text { min-width: 0; flex: 1; }
.aufgaben-titel { font-size: 13.5px; font-weight: 500; }
.aufgaben-zeile .btn { margin-left: auto; flex-shrink: 0; }

/* ---- Woche nach Abteilung ---- */
.gruppen-zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 17px 6px;
    border-top: 1px solid var(--linie-leise);
}
.gruppen-summe {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.mitarbeiter-zeile {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    padding: 9px 17px 9px 20px;
    color: inherit;
}
.mitarbeiter-zeile:hover { background: var(--flaeche-zeile); }
.mz-text { min-width: 0; flex: 0 1 210px; }
.mz-name { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.mz-neben { font-size: 11px; color: var(--text-leise); }
.mz-balken { flex: 1 1 90px; min-width: 60px; }
.mz-zahlen { text-align: right; flex-shrink: 0; min-width: 74px; }
.mz-ist { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mz-soll { font-family: var(--mono); font-size: 10px; color: var(--text-leise); }
.saldo-feld {
    font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
    padding: 5px 9px; border-radius: var(--radius-chip);
    flex-shrink: 0; min-width: 62px; text-align: center;
}
.saldo-plus  { background: var(--pos-soft); color: var(--pos); }
.saldo-minus { background: var(--neg-soft); color: var(--neg); }

/* "Ist gerade da" ist eine positive Lage, keine Markenaussage -
   deshalb --pos und nicht das Markenrot. */
.anwesend-punkt {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pos); flex-shrink: 0;
}
.anwesend-seit { font-family: var(--mono); font-size: 10.5px; color: var(--pos); }

/* ---- Jetzt im Haus ---- */
.haus-zeile {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 17px; border-top: 1px solid var(--linie-leise);
}
.haus-zeit { margin-left: auto; text-align: right; }
.zeit-zelle { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- Kennzahlen-Liste ---- */
.kennzahl-liste { margin: 0; }
.kennzahl-liste > div {
    display: flex; align-items: center;
    padding: 10px 17px; border-top: 1px solid var(--linie-leise);
}
.kennzahl-liste dt { font-size: 12.5px; color: var(--text-leise); }
.kennzahl-liste dd {
    margin: 0 0 0 auto;
    font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}

/* ================= Punkt 16: Protokoll nach Tagen ================= */

.tag-block { display: flex; flex-direction: column; gap: 9px; }
.tag-kopf {
    display: flex; align-items: baseline; gap: 11px;
    padding-left: 11px; border-left: var(--schiene-breite) solid var(--gruen);
}
.tag-titel { font-size: 14px; font-weight: 600; margin: 0; }
.tag-zahl {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; color: var(--text-leise);
}
.protokoll-satz { font-size: 13.5px; }
.quell-chip {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; padding: 3px 7px;
    border-radius: var(--radius-chip);
    background: var(--flaeche-spur); color: var(--text-leise);
}
.geraete-name { font-weight: 500; }

/* ================= Punkt 5: Anmeldefenster mittig ================= */

.anmelde-seite {
    /* Spalte, nicht Zeile: Die Seite hat zwei Kinder - die Karte und den
       Verweis darunter. Als Zeile setzt Flex den Verweis NEBEN die Karte. */
    flex-direction: column;
    background: var(--flaeche-vertieft); padding: 20px;
}
.anmelde-karte {
    box-shadow: var(--schatten-hoch);
    border-radius: var(--radius-widget);
}
.anmelde-fuss { display: flex; justify-content: center; gap: 16px; }

/* ================= Punkt 18: Testmitarbeiter ================= */

.schalter-zeile {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; margin-bottom: 15px;
    background: var(--warn-kopf);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-karte);
    cursor: pointer;
}
.schalter-zeile input { margin-top: 3px; flex-shrink: 0; }
.schalter-titel { display: block; font-size: 13.5px; font-weight: 600; }
.schalter-zeile .feld-hinweis { margin-top: 3px; }

@media (max-width: 1180px) {
    .raster-zwei { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    :root { --abstand-seite: 14px; --leisten-luft: 0px; }
    body { background: var(--flaeche-app); }
    .seitenleiste { border-radius: 0; border: none; height: 100vh; margin: 0; }
    .inhalt-bereich { border-radius: 0; border: none; margin: 0; }

    .kennzahl-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .kennzahl-wert { font-size: 24px; }
    .kennzahl-kachel { padding: 12px 13px; }

    /* Die Mitarbeiterzeile bricht am Handy um, sonst wird sie gequetscht. */
    .mitarbeiter-zeile { flex-wrap: wrap; padding: 11px 13px 11px 17px; }
    .mz-text { flex: 1 1 100%; }
    .mz-balken { flex: 1 1 auto; order: 3; }
    .mz-zahlen { order: 4; }
    .saldo-feld { order: 5; }
    .aufgaben-zeile { flex-wrap: wrap; }
    .aufgaben-zeile .btn { margin-left: 0; width: 100%; }
}

.marken-gruppe { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
h1.anmelde-marke { font-size: 17px; font-weight: 600; margin: 0 0 5px; letter-spacing: -.015em; }

/* Die Mikro-Beschriftung sitzt auf getoenten Flaechen (Statusblock,
   gruene Kennzahl-Kachel) und braucht dort mehr Halt als --text-schwach
   auf Weiss bietet. */
.mikro { color: var(--text-leise); }

@media (max-width: 860px) {
    /* Antippbares in der Leiste und in der Handy-Ansicht des
       Schichtplans - beides wird mit dem Daumen getroffen. */
    .leisten-profil { width: 44px; height: 44px; align-items: center; justify-content: center; }
    .mobil-schicht { min-height: 44px; }
    .anmelde-fuss a, .anmelde-abtrenner a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ================= Punkt 12: Schichtplan =================

   Dieser Block ist entfallen. Er stammte aus der Zeit vor dem Redesign
   und ueberschrieb den Schichtplan weiter oben - andere Zellenhoehe,
   runder Plus-Knopf, Schatten statt Kanten. Die verbindlichen Werte
   stehen jetzt im Abschnitt "Schichtplan" und kommen aus der
   Bauanleitung des Entwurfs. */
/* ================= Punkte 9, 10, 13: Listen aufraeumen ================= */

/* Ein Kopf ueber der Tabelle statt Text, der direkt an der Kopfleiste
   klebt. Titel links, Zahlen und Knoepfe ganz rechts aussen. */
.bereichs-kopf {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 17px;
    background: var(--flaeche-kopf);
    border-bottom: 1px solid var(--linie);
}
.bereichs-titel { font-size: 13.5px; font-weight: 600; }
.bereichs-zahl {
    font-family: var(--mono); font-size: 11px; color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.bereichs-kopf .rechts-aussen { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Eine Tabelle in einer Karte soll keine doppelten Raender haben. */
.karte > table.datentabelle { border: none; box-shadow: none; border-radius: 0; }

/* ================= Punkt 11: Bearbeiten dort, wo man es sucht ======= */

.abschnitt-kopf {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 9px;
}
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf .btn { margin-left: auto; }

@media (max-width: 860px) {
    .plan-zelle { min-height: 0; }
    .schicht-hinzu { opacity: 1; width: 44px; height: 44px; }
    .bereichs-kopf { padding: 12px 13px; }
    .bereichs-kopf .rechts-aussen { margin-left: 0; width: 100%; }
    .bereichs-kopf .rechts-aussen .btn { flex: 1; }
}

/* ================= Zweigeteilte Anmeldeseite ================= */
/*
   Gilt NUR fuer die Anmeldung. Registrierung, Passwort-vergessen und die
   Fehlerseite benutzen dieselben .anmelde-* Klassen und bleiben schmal -
   deshalb haengt alles hier an .anmelde-seite-weit bzw. .anmelde-geteilt.

   "Gut auf den Bildschirm passen" heisst hier zweierlei: Die Karte darf
   auf einem kleinen Notebook nicht ueber den unteren Rand hinauswachsen,
   und auf einem grossen Schirm nicht ins Leere auseinanderlaufen.
   Deshalb eine Obergrenze fuer die Breite UND eine fuer die Hoehe.
*/

.anmelde-seite-weit { padding: 24px; }

.anmelde-geteilt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    /* Die Breitenobergrenze steht hier und nicht auf .anmelde-karte,
       damit die schmalen Schwesterseiten ihre 396px behalten. */
    max-width: 980px;
    padding: 0;
    overflow: hidden;
}

/* ---- Linke Haelfte: Markenflaeche ---- */

.marken-spalte {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 30px;
    padding: 42px 40px;
    background: var(--flaeche-leiste-kopf);
    border-right: 1px solid var(--linie);
}
.marken-zeile { display: flex; align-items: center; gap: 10px; }
.marken-punkt {
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--gruen); color: var(--auf-gruen);
}
.marken-punkt svg { width: 15px; height: 15px; }
.marken-wort {
    font-size: 15px; font-weight: 600; letter-spacing: -.015em;
}
.marken-satz {
    margin: 0;
    font-size: 25px; font-weight: 600; line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
}
/* Bewusst NICHT .marken-text: so heisst schon der Namensblock in der
   Seitenleiste. Der gleiche Name hat dort den Betriebsnamen ausgegraut
   und die Kopfzeile 15px nach unten geschoben. */
.marken-beschreibung {
    margin: 11px 0 0;
    font-size: 12.5px; line-height: 1.6; color: var(--text-leise);
    max-width: 34ch;
}
.marken-fuss {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
    color: var(--text-leise);
}

/* ---- Rechte Haelfte: Formular ---- */

.form-spalte { padding: 42px 40px; }

/* Trennlinie unter dem Formular, die bis an die Kartenraender laeuft.
   Der negative Aussenabstand entspricht genau dem Innenabstand oben. */
.anmelde-abtrenner {
    margin: 22px -40px 0;
    padding: 18px 40px 0;
    border-top: 1px solid var(--linie);
    display: flex; flex-wrap: wrap;
    align-items: baseline; justify-content: center; gap: 6px;
    font-size: 12.5px; color: var(--text-leise);
}
.anmelde-abtrenner a { font-weight: 500; }

/* Auf niedrigen Fenstern (Notebook quer, 13 Zoll) darf die Karte nicht
   ueber den Bildschirm hinauswachsen - dann darf sie in sich scrollen. */
/* Niedrige Fenster (Handy quer, kurz gezogenes Notebook-Fenster).
   Frueher stand hier eine Hoehenbegrenzung mit overflow: hidden - die
   hat die Karte abgeschnitten, ohne dass man an den Rest herankam:
   Eine Grid-Zeilenspur bemisst sich nach ihrem Inhalt, deshalb wurden
   die Spalten nie gestaucht und ihr Scrollbalken erschien nie.
   Jetzt darf schlicht die Seite scrollen. */
@media (max-height: 720px) {
    .anmelde-seite { justify-content: flex-start; padding-top: 24px; padding-bottom: 24px; }
    .marken-spalte, .form-spalte { padding: 30px 32px; }
    .marken-satz { font-size: 20px; }
}

/* Schmaler als das: die Markenflaeche entfaellt, das Formular bleibt.
   Der Umbruch liegt bei 860px, derselben Grenze, die die ganze Anwendung
   als Handy-Grenze verwendet. Frueher umzubrechen waere technisch
   moeglich, quetscht die linke Spalte aber auf unter 300px Textbreite -
   dann steht dort nur noch Stueckwerk. */
@media (max-width: 1028px) {
    .anmelde-geteilt {
        grid-template-columns: minmax(0, 1fr);
        max-width: 396px;
    }
    .marken-spalte { display: none; }
    .form-spalte { padding: 28px; }
    .anmelde-abtrenner { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
    .anmelde-seite { justify-content: center; }
}

/* ================= Mehr Kontur, mehr Grün ================= */
/*
   Die weissen Karten hoben sich mit 1.20:1 kaum vom Hintergrund ab -
   deshalb wirkte die Oberflaeche flach und eintoenig. Die Grundflaeche
   liegt jetzt tiefer, die Linien sind kraeftiger, und Gruen taucht dort
   auf, wo es etwas bedeutet: Handlung, Zugehoerigkeit, aktueller Ort.
*/

/* Initialen ohne Bild: einheitlich gruen statt bunt je Person. */
.avatar-gruen {
    background: var(--gruen-hauch) !important;
    border-color: var(--gruen-rand) !important;
    color: var(--gruen-schrift) !important;
    font-weight: 600;
}

/* Karten bekommen eine sichtbare Kante und etwas mehr Tiefe. */
.karte {
    border-color: var(--linie);
    box-shadow: var(--schatten-widget);
}
.karte-kopf {
    border-bottom: 1px solid var(--linie);
}

/* Die Kennzahl-Kacheln setzen sich staerker voneinander ab. */
.kennzahl-kachel { border-color: var(--linie); }

/* Der aktive Menuepunkt traegt eine gruene Schiene - so sieht man auf
   einen Blick, wo man ist, ohne die Beschriftung zu lesen. */
.leisten-nav a.aktiv {
    position: relative;
    background: var(--gruen-hauch);
    color: var(--gruen-schrift);
    font-weight: 600;
}
.leisten-nav a.aktiv::after {
    content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--gruen);
}
.leisten-nav a.unterpunkt.aktiv::after { left: 0; }

/* Abschnittsueberschriften bekommen einen gruenen Strich davor. */
.bereichs-kopf {
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche-kopf);
}
.bereichs-titel {
    position: relative;
    padding-left: 11px;
}
.bereichs-titel::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 2px; background: var(--gruen);
}

/* Zaehlerchips im Kartenkopf: kleines gruenes Feld statt grauer Zahl. */
.bereichs-zahl {
    padding: 3px 8px;
    border-radius: var(--radius-chip);
    background: var(--gruen-hauch);
    color: var(--gruen-schrift);
}

/* Der Lebenspunkt war im hellen Theme mit 2.01:1 kaum zu sehen. */
.lebenspunkt { background: var(--pos); }

/* Tabellenkopf klarer abgesetzt. */
.datentabelle thead th {
    background: var(--flaeche-kopf);
    border-bottom: 1px solid var(--linie);
}
.datentabelle tbody tr + tr { border-top: 1px solid var(--linie-leise); }

/* Die Seitenleiste bekommt eine deutlichere Kante zum Inhalt. */
.seitenleiste { border-color: var(--linie); }
.inhalt-bereich { border-color: var(--linie); }

/* ================= Zugänge (nach dem Claude-Design-Entwurf) ================= */

.hinweis-raster {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.hinweis-karte {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 17px;
    background: var(--flaeche-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-widget);
}
.hinweis-warn {
    align-items: flex-start;
    background: var(--warn-kopf);
    border-color: var(--warn-rand);
}
.hinweis-punkt {
    width: 8px; height: 8px; margin-top: 6px; flex-shrink: 0;
    border-radius: 50%; background: var(--warn-punkt);
}
.hinweis-text-block { min-width: 0; flex: 1; }
.hinweis-titel { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.hinweis-text {
    margin: 4px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--text-leise);
    text-wrap: pretty;
}
.hinweis-text code {
    font-family: var(--mono); font-size: 11.5px;
    padding: 1px 5px; border-radius: var(--radius-chip);
    background: var(--warn-hauch);
}
.hinweis-neben {
    margin-top: 2px;
    font-family: var(--mono); font-size: 11px; color: var(--text-leise);
}
/* Der Knopf sitzt ganz rechts aussen, nicht neben dem Text. */
.hinweis-karte .btn { margin-left: auto; flex-shrink: 0; }

/* Zurueckhaltender Knopf in Gruen - Handlung, aber nicht die Haupthandlung. */
.btn-hauch {
    background: var(--gruen-hauch);
    color: var(--gruen-schrift);
    border-color: var(--gruen-rand);
    font-weight: 600;
}
.btn-hauch:hover { background: var(--gruen-hauch-2); border-color: var(--gruen); }

/* Sperren ist gefaehrlich, aber kein Hauptknopf - deshalb ohne Flaeche,
   die Farbe erscheint erst beim Ueberfahren. */
.btn-gefahr-still {
    background: transparent; border-color: transparent;
    color: var(--minus); font-weight: 600;
}
.btn-gefahr-still:hover {
    background: var(--minus-hauch); border-color: var(--minus-rand);
}

/* Zustand mit Punkt statt schlichtem Abzeichen - der Punkt traegt die
   Farbe, die Schrift bleibt lesbar. */
.zustand {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px;
    border-radius: var(--radius-chip);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; white-space: nowrap;
}
.zustand-punkt { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.zustand-an    { background: var(--gruen-hauch); color: var(--gruen-schrift); }
.zustand-an    .zustand-punkt { background: var(--gruen); }
.zustand-offen { background: var(--warn-hauch); color: var(--warn); }
.zustand-offen .zustand-punkt { background: var(--warn-punkt); }
.zustand-aus   { background: var(--flaeche-spur); color: var(--text-leise); }
.zustand-aus   .zustand-punkt { background: var(--linie-stark); }

.mono-zelle {
    font-family: var(--mono); font-size: 12px;
    color: var(--text-leise); word-break: break-word;
}
.eigene-rolle {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--gruen-schrift);
}

/* Die drei Rollenfelder */
.rollen-raster {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 17px;
}
.rollen-feld {
    display: flex; flex-direction: column; gap: 7px;
    padding: 15px;
    background: var(--flaeche-zeile);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
}
.rollen-feld p {
    margin: 0;
    font-size: 13px; line-height: 1.6; color: var(--text-leise);
    text-wrap: pretty;
}
/* Die eigene Rolle des Betrachters hervorheben. */
.rollen-feld-hebt {
    background: var(--gruen-hauch);
    border-color: var(--gruen-rand);
}
.rollen-feld-hebt .mikro { color: var(--gruen-schrift); }

@media (max-width: 860px) {
    .hinweis-raster { grid-template-columns: minmax(0, 1fr); }
    .hinweis-karte { flex-wrap: wrap; }
    .hinweis-karte .btn { margin-left: 0; width: 100%; }
    .rollen-raster { padding: 13px; }
}

.fehler-knoepfe { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
h1.fehler-titel { font-size: 17px; font-weight: 600; margin: 0; }

/* ================= Bereiche (Einstellungen) ================= */

.bereichs-liste { display: flex; flex-direction: column; }
.bereichs-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-top: 1px solid var(--grid-line);
    flex-wrap: wrap;
}
.bereichs-liste .bereichs-zeile:first-child { border-top: none; }
/* Deaktivierte Bereiche bleiben lesbar, treten aber zurueck. Nicht
   ausblenden: Man muss sie wiederfinden, um sie zu reaktivieren. */
.bereich-still { background: var(--surface-2); }
.bereich-still .bereichs-name-feld { color: var(--ink-2); }

.bereichs-punkt {
    width: 12px; height: 12px; border-radius: 4px; flex: none;
    border: 1px solid var(--rand-auf-farbe);
}
.bereichs-name-feld {
    flex: 1 1 160px; min-width: 0;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-feld);
    background: var(--surface); color: var(--ink);
    font: 600 13.5px var(--schrift);
}
.bereichs-name-feld:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.bereichs-farbwahl {
    height: 34px; padding: 0 8px; flex: none;
    border: 1px solid var(--border-strong); border-radius: var(--radius-feld);
    background: var(--surface); color: var(--ink); font: 400 12.5px var(--schrift);
}
.bereichs-belegung { font-size: 11.5px; color: var(--ink-3); flex: none; }
.bereichs-schalter {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.bereichs-schalter input { width: auto; height: auto; margin: 0; accent-color: var(--brand); }
.bereichs-fuss { margin: 0; padding: 14px 18px; border-top: 1px solid var(--border); }

.bereich-neu { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bereich-neu .feld label {
    display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px;
}
.bereich-neu input {
    width: 100%; height: 38px; padding: 0 11px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-feld);
    background: var(--surface); color: var(--ink); font: 400 13.5px var(--schrift);
}
.bereich-neu input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Fuer Beschriftungen, die nur Screenreader brauchen - die Spalte ist
   durch ihre Position schon eindeutig, ein sichtbares Label wuerde die
   Zeile nur aufblaehen. */
.visuell-versteckt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 720px) {
    .bereichs-zeile { align-items: stretch; }
    .bereichs-name-feld { flex: 1 1 100%; }
}

/* Bereichsname mit Farbpunkt in Gruppenkoepfen (Dashboard, Schichtplan) */
.gruppen-titel { display: inline-flex; align-items: center; gap: 8px; }
.gruppen-titel .bereichs-punkt { width: 9px; height: 9px; border-radius: 3px; }

/* Kennzahlen-Raster mit drei Kacheln (Mitarbeiter-Uebersicht).
   Nutzt dieselben Kacheln wie das Dashboard - eine Kennzahl soll
   ueberall gleich aussehen, egal auf welcher Seite sie steht. */
.kennzahl-drei { grid-template-columns: repeat(3, 1fr); }

/* Ueberschrift mit Aktion rechts daneben */
.abschnitt-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.abschnitt-kopf h2 { margin-bottom: 0; }

@media (max-width: 720px) {
    .kennzahl-drei { grid-template-columns: 1fr; }
}

/* ================= Nachbesserungen ================= */

/* 1) Karten ohne eigene Innenkante.

   .karte bringt bewusst kein Padding mit: Die meisten Karten fuellen
   sich mit Zeilen und Koepfen, die ihre Kante selbst mitbringen. Steht
   dort aber blosser Text oder ein Raster, klebte er an der Rundung -
   bei 12px Radius schneidet die Ecke sichtbar in die erste Zeile.
   Diese drei Faelle bekommen ihn deshalb nachtraeglich. */
.karte > .info-raster,
.karte > .regel-liste,
.karte > .kennzahl-liste { padding: 18px 20px; }
.rechtstext { padding: 18px 20px; }
.rechtstext > :first-child { margin-top: 0; }
.rechtstext > :last-child { margin-bottom: 0; }
/* Ueberschriften im Rechtstext brauchen Luft nach oben, aber nicht in
   der ersten Zeile - sonst entsteht oben eine doppelte Kante. */
.rechtstext h3 { margin-top: 20px; }

/* 2) Weniger grosse Farbflaechen.

   Das Markenrot soll auf das zeigen, was gerade wichtig ist. Wenn es
   zugleich den Seitengrund, die aktive Menuezeile und ganze Kacheln
   einfaerbt, zeigt es auf alles - und damit auf nichts. Ab hier traegt
   es nur noch Kanten, Schrift und Schaltflaechen. */

/* Aktiver Menuepunkt: ruhige Flaeche, roter Balken, rote Schrift. */
.leisten-nav a.aktiv {
    background: var(--surface-2);
    color: var(--brand);
}
.leisten-nav a.aktiv::after { background: var(--brand); }

/* Die Kachel "Zu erledigen" war vollflaechig rot hinterlegt. Jetzt
   traegt nur die Zahl die Farbe - die Kachel bleibt eine Kachel. */
.kennzahl-kachel.kachel-gruen {
    background: var(--surface);
    border-color: var(--border);
}





/* Unternavigation, Einstellungsspalte und Filterknoepfe bekommen
   dieselbe Behandlung wie die Hauptnavigation: ruhige Flaeche, roter
   Rand, rote Schrift. Vorher war jede aktive Stelle in der Anwendung
   eine rosa Flaeche - in Summe war die halbe Seite eingefaerbt. */
.unternav a.aktiv,
.einstellungen-nav a.aktiv,
.filter-knopf.aktiv {
    background: var(--surface-2);
    border-color: var(--brand-line);
    color: var(--brand);
    font-weight: 600;
}

/* Auswahlkarten (Darstellung, Sollzeit-Quelle): Der rote Rand traegt
   die Auswahl, die Flaeche bleibt ruhig. */
.wahl-karte.aktiv,
.quellen-karte.aktiv {
    border-color: var(--brand);
    background: var(--surface-2);
}

/* Der Zaehler neben einem Menuepunkt zeigt offene Arbeit an - das ist
   eine Aufforderung, kein Warnhinweis. */
.nav-zaehler {
    color: var(--brand-soft-ink);
    background: var(--brand-soft);
}



/* Die Schalterzeile ist der einzige Inhalt ihrer Karte und bringt
   deshalb selbst keine Innenkante mit - wie .info-raster oben. */
.karte > .schalter-zeile { padding: 16px 20px; }

/* Bearbeiten-Formular im Reiter Arbeitszeit. Es ist selbst die Karte,
   bringt also seine Innenkante mit - .karte hat keine. */
.arbeitszeit-formular { padding: 18px 20px; }
.arbeitszeit-formular .aktionen { margin-top: 16px; }
.arbeitszeit-formular .feld:last-of-type { margin-bottom: 0; }

/* ================= Protokoll: Spalten ueber alle Tage buendig =========

   Jeder Tag ist eine eigene Tabelle. Bei automatischer Spaltenbreite
   rechnet jede ihre Breiten aus ihrem EIGENEN Inhalt aus - ein Tag mit
   langen Saetzen bekommt eine breite mittlere Spalte, ein Tag mit
   kurzen eine schmale. Untereinander springen die Spalten dadurch.

   table-layout: fixed nimmt die Breiten aus der ersten Zeile statt aus
   dem Inhalt. Zusammen mit festen Werten je Spalte stehen alle Tage
   damit auf denselben Kanten. */
.protokoll-tabelle { table-layout: fixed; }
.protokoll-tabelle th:nth-child(1),
.protokoll-tabelle td:nth-child(1) { width: 86px; }
.protokoll-tabelle th:nth-child(3),
.protokoll-tabelle td:nth-child(3) { width: 230px; }
.protokoll-tabelle th:nth-child(4),
.protokoll-tabelle td:nth-child(4) { width: 108px; }
/* Die mittlere Spalte bekommt den Rest. Lange Aktionsnamen ohne
   Leerzeichen duerfen sie nicht aufsprengen. */
.protokoll-tabelle td:nth-child(2) { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
    .protokoll-tabelle th:nth-child(3),
    .protokoll-tabelle td:nth-child(3) { width: 180px; }
}
/* In der Handy-Ansicht loest sich die Tabelle in Karten auf - dort
   waeren feste Spaltenbreiten sinnlos. */
@media (max-width: 860px) {
    .protokoll-tabelle { table-layout: auto; }
    .protokoll-tabelle th, .protokoll-tabelle td { width: auto !important; }
}

/* ================= Filterleiste (Protokoll, Zeitstempel) ================= */

.filter-formular {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-karte);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.filter-zeile {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    padding: 14px 17px;
}
.filter-gruppe { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-breit { flex: 1 1 200px; }
.filter-titel {
    font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
}

/* Die Schnellwahl sind echte Absende-Knoepfe, keine Links: So tragen sie
   die uebrigen Felder des Formulars automatisch mit - wer einen Zeitraum
   wechselt, verliert seine Mitarbeiterauswahl nicht. */
.filter-knoepfe {
    display: flex; gap: 3px; padding: 3px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 9px; flex-wrap: wrap;
}
.filter-knoepfe .filter-knopf {
    background: transparent; border: 1px solid transparent;
    border-radius: 6px; padding: 6px 12px;
    font: 500 12.5px var(--schrift); color: var(--ink-2); cursor: pointer;
}
.filter-knoepfe .filter-knopf:hover { color: var(--ink); background: var(--surface); }
.filter-knoepfe .filter-knopf.aktiv {
    background: var(--surface); border-color: var(--brand-line);
    color: var(--brand); font-weight: 600; box-shadow: var(--shadow);
}

.filter-datum { display: flex; align-items: center; gap: 7px; }
.filter-bis { color: var(--ink-3); }
.filter-formular input[type="date"],
.filter-formular select {
    height: 34px; padding: 0 9px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-feld);
    background: var(--surface); color: var(--ink);
    font: 400 12.5px var(--schrift);
}
.filter-formular input[type="date"] { font-family: var(--mono); font-size: 12px; }
.filter-formular select { width: 100%; }
.filter-formular input[type="date"]:focus,
.filter-formular select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.filter-aktionen { flex-direction: row; align-items: center; gap: 8px; }

.filter-fuss {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 17px;
    background: var(--surface-2); border-top: 1px solid var(--border);
}
.filter-export { margin-left: auto; display: flex; gap: 7px; }
.filter-export .btn { height: 30px; padding: 0 13px; font-size: 12.5px; }

@media (max-width: 860px) {
    .filter-zeile { gap: 12px; }
    .filter-gruppe, .filter-breit { flex: 1 1 100%; }
    .filter-datum input { flex: 1; min-width: 0; }
    .filter-export { margin-left: 0; width: 100%; }
    .filter-export .btn { flex: 1; }
}

/* ================= Zeitraumwahl mit Blaettern (Dashboard) ================= */

.periode-leiste {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 15px; margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-karte);
    box-shadow: var(--shadow);
}

.periode-einheiten {
    display: flex; gap: 3px; padding: 3px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 9px;
}
.periode-knopf {
    padding: 6px 14px; border-radius: 6px;
    border: 1px solid transparent;
    font: 500 12.5px var(--schrift); color: var(--ink-2);
    text-decoration: none; white-space: nowrap;
}
.periode-knopf:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.periode-knopf.aktiv {
    background: var(--surface); border-color: var(--brand-line);
    color: var(--brand); font-weight: 600; box-shadow: var(--shadow);
}

/* Die Pfeile rahmen den Titel ein, statt daneben zu stehen: So liest
   sich die Zeile als eine Einheit - zurueck, wo man ist, vor. */
.periode-blaettern {
    display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.periode-pfeil {
    width: 32px; height: 32px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink-2);
    font-size: 14px; line-height: 1; text-decoration: none;
}
.periode-pfeil:hover {
    background: var(--surface-2); color: var(--brand);
    border-color: var(--brand-line); text-decoration: none;
}
.periode-titel {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 190px; padding: 0 6px;
}
.periode-titel strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.periode-unter {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    white-space: nowrap;
}
.periode-heute { height: 32px; padding: 0 13px; font-size: 12.5px; }

/* Hinweis fuer Zeitraeume, die noch nicht stattgefunden haben. */
.meldung-hinweis {
    background: var(--surface-2); border-color: var(--border-strong);
    color: var(--ink-2);
}

@media (max-width: 860px) {
    .periode-leiste { gap: 10px; }
    .periode-einheiten { width: 100%; }
    .periode-knopf { flex: 1; text-align: center; }
    .periode-blaettern { margin-left: 0; width: 100%; }
    .periode-titel { flex: 1; min-width: 0; }
    .periode-heute { width: 100%; }
}

/* ================= Auswertung ================= */

/* Zahlenspalten rechtsbuendig und in Festbreite - so stehen Komma und
   Stellen untereinander und lassen sich ueberfliegen. */
.auswertung-tabelle td.zahl {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    text-align: right; white-space: nowrap;
}
.auswertung-tabelle th:nth-child(3),
.auswertung-tabelle th:nth-child(4),
.auswertung-tabelle th:nth-child(5) { text-align: right; }
.auswertung-tabelle .badge { white-space: nowrap; }
.auswertung-tabelle .tabellen-aktionen { display: flex; gap: 6px; }
.auswertung-tabelle .tabellen-aktionen .btn { height: 28px; padding: 0 11px; font-size: 12px; }

@media (max-width: 860px) {
    .auswertung-tabelle td.zahl { text-align: left; }
}

/* Hinweiskarte mit Aktion rechts - Sammelnachweis, eigener Nachweis. */
.nachweis-karte {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 15px 18px;
}
.nachweis-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nachweis-titel { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.nachweis-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .nachweis-knoepfe { width: 100%; }
    .nachweis-knoepfe .btn { flex: 1; }
}

/* ================= Arbeitszeitaufzeichnung (Ansicht) ================= */

.nachweis-tabelle td.zahl {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nachweis-datum {
    display: block; font-family: var(--mono); font-weight: 600; color: var(--ink);
}

/* Dieselben drei Betonungen wie im PDF: Kopfzeile, erste Spalte,
   Summenzeile. Wer die Seite und das Blatt nebeneinander haelt, soll
   dasselbe Dokument sehen. */
.nachweis-tabelle tbody td:first-child { background: var(--surface-2); }
.nachweis-tabelle tfoot .nachweis-summe td {
    background: var(--surface-3);
    border-top: 2px solid var(--border-strong);
    font-weight: 700; padding-top: 11px; padding-bottom: 11px;
}
.nachweis-tabelle tfoot .nachweis-summe td.zahl { font-size: 13.5px; }
.nachweis-tabelle .badge { white-space: nowrap; }

.personen-kopf .nachweis-knoepfe { margin-left: auto; }

@media (max-width: 860px) {
    .nachweis-tabelle tbody td:first-child { background: transparent; }
}

/* ---------- Anklickbares Kennzeichen "Pause fehlt" ---------- */
/* Sieht aus wie ein Kennzeichen, verhaelt sich wie ein Knopf. Das "+"
   ist der einzige Hinweis, dass hier etwas passiert - mehr braucht es
   nicht, und mehr wuerde die Spalte sprengen. */
.badge-knopf {
    text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s ease, border-color .12s ease;
}
.badge-pfeil { font-weight: 700; opacity: .55; }
.badge-knopf:hover { border-color: var(--border-strong); }
.badge-knopf:hover .badge-pfeil { opacity: 1; }
.badge-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

}

/* ---------- Tagesverlauf "Heute" ---------- */
/* Die Karte hat bewusst keinen Innenabstand (Tabellen sollen bis an
   den Rand gehen). Der Tagesverlauf ist aber Fliesstext in einer Karte
   mit 12px Eckenradius - ohne eigenen Abstand sass die Uhrzeit exakt
   auf der Oberkante und wurde von der runden Ecke angeschnitten. */
.karte > .tages-verlauf { padding: 13px 16px 14px; }

@media (max-width: 860px) {
    /* Am Handy steht oft nur ein Stempel da; die Karte wirkte dann wie
       ein zu enger Streifen. Etwas mehr Luft, und die Uhrzeit bekommt
       eine feste Zeilenhoehe statt "normal" - sonst haengt die
       Unterlaenge je nach Schriftschnitt anders. */
    .karte > .tages-verlauf { padding: 14px 16px 15px; gap: 15px 22px; }
    .verlauf-zeit { font-size: 15px; line-height: 1.35; }
    .verlauf-art { line-height: 1.35; }
}

/* ================= Reiterleiste am unteren Rand (Handy) =================
   Am Telefon liegt der Daumen unten, das Menue oben links. Was jemand
   mehrmals am Tag braucht - stempeln, Zeiten nachsehen, Plan, Konto -
   gehoert deshalb nach unten. Das Menue bleibt fuer alles Seltene.

   Am Desktop gibt es die Leiste nicht: Dort ist die Seitenleiste immer
   sichtbar, ein zweites Navigationsband waere doppelt. */

.tableiste { display: none; }

@media (max-width: 860px) {
    .tableiste {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; gap: 2px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px));
        /* Der Inhalt scrollt darunter durch - eine Kante nach oben
           trennt sauberer als ein Schlagschatten. */
        box-shadow: 0 -6px 16px -12px rgb(0 0 0 / .35);
    }
    .tableiste .tab {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; height: 52px; border-radius: 12px;
        font-size: 11px; font-weight: 500; line-height: 1;
        color: var(--ink-3); text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tableiste .tab svg { width: 21px; height: 21px; }
    .tableiste .tab.aktiv { color: var(--brand-soft-ink); font-weight: 600; }
    .tableiste .tab.aktiv svg { stroke-width: 2.1; }
    .tableiste .tab:active { background: var(--surface-3); }
    .tableiste .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

    /* Platz schaffen, damit die Leiste nichts verdeckt. Der Wert ist
       Leistenhoehe (66) plus Abstand plus die Geste am iPhone. */
    body:has(.tableiste) .inhalt {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* ================= Mitarbeiter-Dashboard (Handy zuerst) =================
   Die Reihenfolge folgt der Frage, die jemand am Telefon zuerst hat:
   Bin ich eingebucht? Wie viel heute? Stimmt etwas nicht? Wann muss ich
   wieder? Erst danach die Historie. */

/* ---------- Stempeluhr ---------- */
.stempeluhr {
    padding: 16px 16px 15px;
    display: flex; flex-direction: column; gap: 13px;
}
.stempeluhr-kopf { display: flex; align-items: center; gap: 10px; }
.stempeluhr-kopf .mikro { flex: 1; min-width: 0; }

/* Der Zustand als Chip in der Karte - am Handy ist die Kopfzeile der
   Seite zu schmal fuer die Anzeige, die dort am Desktop steht. */
.zustand-chip {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 11px;
    font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.zustand-chip .zustand-punkt {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
}
.zustand-chip.zustand-aktiv { background: var(--pos-soft); color: var(--pos); border-color: var(--pos); }
.zustand-chip.zustand-aktiv .zustand-punkt { background: var(--pos); }
.zustand-chip.zustand-pause { background: var(--neg-soft); color: var(--neg); border-color: var(--neg); }
.zustand-chip.zustand-pause .zustand-punkt { background: var(--neg); }

.stempeluhr-zahl { display: flex; align-items: flex-end; gap: 14px; }
.stempeluhr-ist { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stempeluhr-wert {
    font-family: var(--mono); font-size: 38px; font-weight: 600;
    letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.stempeluhr-schicht {
    margin-left: auto; display: flex; flex-direction: column; gap: 4px;
    align-items: flex-end; text-align: right;
}
.schicht-zeitraum {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Der Tagesverlauf sitzt hier in der Stempeluhr und braucht deshalb
   keinen eigenen Kartenabstand mehr. */
.tages-verlauf.verlauf-eng {
    padding: 11px 0 0; gap: 14px 20px;
    border-top: 1px solid var(--border);
}

.btn-gross {
    height: 54px; border-radius: 14px; font-size: 16px; font-weight: 700;
    justify-content: center;
}
.btn-breit { width: 100%; justify-content: center; }

/* ---------- Woche als Streifen ---------- */
.kennzahl-streifen { display: flex; overflow: hidden; padding: 0; }
.streifen-feld {
    flex: 1 1 0; min-width: 0; padding: 14px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.streifen-feld + .streifen-feld { border-left: 1px solid var(--border); }
.streifen-wert {
    font-family: var(--mono); font-size: 19px; font-weight: 600;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.streifen-wert.leise { color: var(--ink-2); }
.streifen-wert.wert-plus { color: var(--pos); }
.streifen-wert.wert-minus { color: var(--neg); }
.streifen-label { font-size: 11px; color: var(--ink-3); }

/* ---------- Hinweisbanner ---------- */
.hinweis-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; text-decoration: none; color: inherit;
    box-shadow: inset 3px 0 0 var(--brand-soft-ink), var(--shadow);
}
.hinweis-banner:hover { background: var(--brand-soft); text-decoration: none; }
.banner-marke {
    flex: none; background: var(--brand-soft); color: var(--brand-soft-ink);
    border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 9px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.banner-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.banner-pfeil { width: 17px; height: 17px; flex: none; color: var(--ink-3); }

/* ---------- Abschnittsüberschrift ---------- */
.block-titel {
    display: flex; align-items: center; gap: 10px;
    padding: 0 2px; margin: 18px 0 8px;
}
.block-titel .mikro { flex: 1; min-width: 0; }
.block-link { font-size: 12px; font-weight: 600; color: var(--brand-soft-ink); }

/* ---------- Schichtkarte ---------- */
/* Eigener Name, nicht .schicht-karte: So heisst im Schichtplan schon
   die Karte im Wochenraster. Zwei Bausteine unter einem Namen heisst,
   dass der spaeter geschriebene den frueheren umbaut - genau das war
   passiert, der Bereichsname fiel im Plan aus der Karte. */
.naechste-schicht { display: flex; align-items: center; gap: 13px; padding: 14px; }
.naechste-schicht-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.schicht-tag { font-size: 14px; font-weight: 600; color: var(--ink); }
.bereich-marke {
    flex: none; border: 1px solid; border-radius: 8px; padding: 5px 9px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Stempelliste ---------- */
.stempel-liste { padding: 0; overflow: hidden; }
.stempel-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; text-decoration: none; color: inherit;
}
.stempel-zeile + .stempel-zeile { border-top: 1px solid var(--border); }
.stempel-zeile:hover { background: var(--surface-2); text-decoration: none; }
.stempel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.stempel-art { font-size: 14px; font-weight: 600; color: var(--ink); }
.stempel-zeit {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.zeilen-pfeil { width: 15px; height: 15px; flex: none; color: var(--ink-3); }

@media (max-width: 860px) {
    /* Am Handy ist die Kopfzeile zu schmal - der Zustand steht in der
       Stempeluhr, sonst stuende er zweimal da. */
    .kopf-aktionen .zustand-anzeige { display: none; }
    .stempeluhr-wert { font-size: 40px; }
    .stempeluhr-zahl { align-items: flex-end; }
}
@media (min-width: 861px) {
    /* Am Desktop gibt es die Anzeige oben rechts schon. */
    .stempeluhr-kopf .zustand-chip { display: none; }
    .stempeluhr { max-width: 720px; }
    .kennzahl-streifen { max-width: 720px; }
    .btn-gross { align-self: flex-start; padding: 0 26px; }
    .btn-breit { width: auto; align-self: flex-start; }
}

/* ================= Breit oder schmal =================
   Zwei Bausteine zeigen dieselben Zahlen in verschiedener Form: die
   Tabelle am Desktop, die Liste am Handy. Beide werden aus denselben
   Daten gerendert - sie koennen also nicht auseinanderlaufen. */
.nur-schmal { display: none; }
@media (max-width: 860px) {
    .nur-breit { display: none !important; }
    .nur-schmal { display: block; }
}

/* ================= Zeitraum-Summe (Arbeitszeitaufzeichnung) ================= */
.zeitraum-summe { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.summe-zeile { display: flex; align-items: flex-end; gap: 12px; }
.summe-haupt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summe-wert {
    font-family: var(--mono); font-size: 32px; font-weight: 600;
    letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.saldo-feld.gross {
    margin-left: auto; flex: none; white-space: nowrap;
    font-size: 14px; padding: 7px 11px; border-radius: 9px;
}
.summe-balken {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--surface-3); border: 1px solid var(--border);
}
.summe-balken > span { display: block; height: 100%; background: var(--brand-solid); }
.summe-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.summe-soll {
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.summe-fuss .hilfstext { margin-left: auto; }

@media (min-width: 861px) { .zeitraum-summe { max-width: 720px; } }

/* ================= Tagesliste (Handy) =================
   Ein Tag ist eine Zeile. Was § 26 AZG verlangt - Beginn, Ende, jede
   Pause mit Uhrzeit - steht vollstaendig im aufgeklappten Bereich; es
   wird nur nicht mehr alles gleichzeitig gezeigt. */

.tag-liste {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-karte); box-shadow: var(--shadow);
    overflow: hidden;
}
.tag-liste-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 14px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}

.tag-eintrag { border-bottom: 1px solid var(--border); }
.tag-eintrag.mit-hinweis > .tag-zeile { box-shadow: inset 3px 0 0 var(--brand-soft-ink); }

.tag-zeile {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.tag-zeile::-webkit-details-marker { display: none; }
.tag-zeile:hover { background: var(--surface-2); }
.tag-eintrag[open] > .tag-zeile { background: var(--surface-2); }
.tag-zeile:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Nicht .tag-datum: Der Plankopf im Wochenraster hat schon eine
   Klasse dieses Namens. */
.tagliste-datum { flex: none; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.tag-tag {
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.tag-wochentag {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-3);
}

.tag-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tag-spanne {
    font-family: var(--mono); font-size: 13px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.tag-hinweis { font-size: 11px; font-weight: 600; color: var(--brand-soft-ink); }

.tag-werte { flex: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.tag-ist {
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink);
}

/* ---------- Aufgeklappter Tag ---------- */
.tag-detail {
    padding: 14px; background: var(--surface-3);
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 12px;
}
.detail-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; }
.detail-raster > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-wert {
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    color: var(--ink); overflow-wrap: anywhere;
}
.detail-wert.fehlt { color: var(--neg); font-weight: 500; }
.detail-marken { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-aktionen { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Summe der Liste ---------- */
.tag-summe {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; background: var(--surface-3);
    border-top: 2px solid var(--border-strong);
}
.tag-summe-titel { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.tag-summe-werte { flex: none; display: flex; align-items: center; gap: 10px; }

/* ================= Schichtplan am Handy =================
   Eine Karte für die Woche statt eine je Tag, und freie Tage in einer
   Zeile. Der Plan wird überflogen: Wer wann, und wann habe ich frei. */

.plan-eigene { padding: 14px 16px; margin-bottom: 12px; }
.plan-eigene-text { display: flex; flex-direction: column; gap: 4px; }
.plan-eigene-wert {
    font-family: var(--mono); font-size: 27px; font-weight: 600;
    letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.plan-tage { padding: 0; overflow: hidden; }

.plan-tag-kopf {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.plan-tag-kopf + .plan-tag-kopf,
.plan-schicht + .plan-tag-kopf,
.plan-frei + .plan-tag-kopf,
.plan-hinzu + .plan-tag-kopf { border-top: 1px solid var(--border); }
.plan-tag-name {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.plan-tag-summe {
    flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
/* Heute und morgen sind die beiden Tage, wegen denen man den Plan
   aufmacht - sie tragen deshalb die Markenfläche. */
.plan-tag-kopf.heute, .plan-tag-kopf.morgen { background: var(--brand-soft); }
.plan-tag-kopf.heute .plan-tag-name,
.plan-tag-kopf.morgen .plan-tag-name { color: var(--brand-soft-ink); font-weight: 700; }
.plan-tag-kopf.heute .plan-tag-summe,
.plan-tag-kopf.morgen .plan-tag-summe { color: var(--brand-soft-ink); }

.plan-frei {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: var(--surface-3);
    border-bottom: 1px solid var(--border);
}
.plan-frei-spanne {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

.plan-schicht {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--border);
}
.plan-schicht:hover { background: var(--surface-2); text-decoration: none; }
.plan-schicht-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.plan-schicht-zeit {
    font-family: var(--mono); font-size: 15px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.plan-schicht-dauer {
    flex: none; font-family: var(--mono); font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink-2);
}

.plan-hinzu {
    display: block; padding: 11px 14px; text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--brand-soft-ink);
    text-decoration: none;
}
.plan-hinzu:hover { background: var(--brand-soft); text-decoration: none; }

/* Die letzte Zeile der Karte braucht keine Trennlinie - der Kartenrand
   schließt dort schon ab. */
.plan-tage > *:last-child { border-bottom: none; }

/* ---------- Plankopf am Handy ----------
   Die Plankarte schiebt am Desktop waagrecht, damit sieben Tagesspalten
   Platz haben. Am Handy gibt es das Raster nicht - dort wirkte die
   Mindestbreite von 1080px nur noch als Fehler: Der Kopf lief nach
   rechts aus dem Bild, und mit ihm der Wochenwechsel. Auf dem Telefon
   liess sich die Woche dadurch gar nicht wechseln. */
@media (max-width: 860px) {
    .plan-karte {
        min-width: 0; overflow: visible;
        border: none; background: none; box-shadow: none; border-radius: 0;
    }
    .plan-kopf, .plan-legende { min-width: 0; }

    .plan-kopf {
        flex-direction: column; align-items: stretch; gap: 11px;
        padding: 0 2px 12px; border-bottom: none;
    }
    .plan-kopf-titel h2 { font-size: 18px; }
    /* Der Kopf steht am Handy auf dem Seitengrund statt auf der weissen
       Karte. Auf dem dunkleren Grund reicht --ink-3 fuer Fliesstext
       nicht mehr (3.95:1 statt 4.5:1), deshalb eine Stufe kraeftiger. */
    .plan-kopf-woche { color: var(--ink-2); }
    .plan-kopf-aktionen { margin-left: 0; gap: 8px; }
    .plan-wochenwahl { flex: 1; gap: 8px; }
    .plan-pfeil { width: 44px; height: 44px; flex: none; }
    /* Der Zeitraum steht in der Mitte zwischen den Pfeilen, so wie im
       Entwurf - nicht als dritter Knopf daneben. */
    .plan-diese-woche { flex: 1; height: 44px; }
    .plan-kopf-aktionen .btn { height: 44px; border-radius: 11px; }

    .plan-legende {
        padding: 9px 12px; margin-bottom: 12px;
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface-2); gap: 12px;
    }
}

/* Am Desktop bekommt das Mitarbeiter-Dashboard eine gemeinsame Breite -
   sonst steht die schmale Stempeluhr neben Bloecken, die bis an den
   rechten Rand laufen, und die Spalte wirkt gebrochen. */
@media (min-width: 861px) {
    .hinweis-banner, .naechste-schicht, .stempel-liste, .block-titel { max-width: 720px; }
}

/* ================= Abo-Balken =================
   Steht über dem Seiteninhalt, auf jeder Seite. Wer gesperrt ist, soll
   es sehen, bevor ein Speichern fehlschlägt - und die Warnung kommt
   eine Woche vorher, damit die Sperre niemanden überrascht. */
.abo-balken {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px; margin-bottom: 16px;
    border: 1px solid; border-radius: var(--radius-karte);
    font-size: 13.5px; line-height: 1.5;
}
.abo-marke {
    flex: none; border-radius: 7px; padding: 3px 9px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.abo-text { min-width: 0; }
.abo-gesperrt {
    background: var(--brand-soft); border-color: var(--brand-line); color: var(--ink);
}
.abo-gesperrt .abo-marke { background: var(--brand-solid); color: var(--brand-on); }
.abo-warnung {
    background: var(--neg-soft); border-color: var(--neg); color: var(--ink);
}
.abo-warnung .abo-marke { background: var(--neg); color: var(--surface); }

/* ================= Betreiber: Liste der Betriebe ================= */

.betrieb-liste { display: flex; flex-direction: column; gap: 10px; }
.betrieb-karte { padding: 0; overflow: hidden; }
.betrieb-karte.ist-gesperrt { box-shadow: inset 3px 0 0 var(--brand-solid), var(--shadow); }

.betrieb-zeile {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; cursor: pointer; list-style: none;
}
.betrieb-zeile::-webkit-details-marker { display: none; }
.betrieb-zeile:hover { background: var(--surface-2); }
.betrieb-karte[open] > .betrieb-zeile { background: var(--surface-2); border-bottom: 1px solid var(--border); }

.betrieb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.betrieb-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.betrieb-status {
    flex: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    text-align: right;
}

.betrieb-detail {
    padding: 16px; background: var(--surface-3);
    display: flex; flex-direction: column; gap: 16px;
}
.betrieb-form {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px; max-width: none;
    display: flex; flex-direction: column; gap: 12px;
}
.betrieb-schalter { display: flex; gap: 8px; flex-wrap: wrap; }
.betrieb-schalter form { margin: 0; }

@media (max-width: 860px) {
    .betrieb-zeile { flex-wrap: wrap; }
    .betrieb-status { align-items: flex-start; text-align: left; width: 100%; }
    .betrieb-schalter .btn { width: 100%; }
    .betrieb-schalter form { flex: 1 1 100%; }
}

/* ================= Abo-Statuskarte (Einstellungen) ================= */
.abo-status { padding: 18px; border-left: 4px solid var(--border-strong); }
.abo-status.abo-ok { border-left-color: var(--pos); }
.abo-status.abo-warnung { border-left-color: var(--neg); }
.abo-status.abo-gesperrt { border-left-color: var(--brand-solid); }
.abo-status-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.abo-status-kopf .mikro { flex: 1; min-width: 0; }
.abo-gross {
    font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.abo-satz { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }

/* ================= Preisliste (Betreiber) ================= */
.tarif-karte { padding: 0; overflow: hidden; }
.tarif-zeile {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; cursor: pointer; list-style: none;
}
.tarif-zeile::-webkit-details-marker { display: none; }
.tarif-zeile:hover { background: var(--surface-2); }
.tarif-karte[open] > .tarif-zeile {
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tarif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tarif-name {
    font-size: 15px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.tarif-preise {
    flex: none; display: flex; flex-direction: column; gap: 3px;
    align-items: flex-end; text-align: right;
}
.tarif-preis {
    font-family: var(--mono); font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.tarif-detail { padding: 16px; background: var(--surface-3); }
.tarif-karte + .tarif-karte { margin-top: 10px; }

/* ---------- Korrekturvorschlag bei Tippfehlern in der E-Mail ---------- */
.vorschlag-zeile {
    margin-top: 7px; font-size: 13px; color: var(--ink-2);
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.vorschlag-knopf {
    background: var(--brand-soft); color: var(--brand-soft-ink);
    border: 1px solid var(--brand-line); border-radius: 7px;
    padding: 3px 9px; font: 600 13px var(--schrift); cursor: pointer;
}
.vorschlag-knopf:hover { background: var(--brand-solid); color: var(--brand-on); }

/* ================= Erfassungsgeräte (Einstellungen) ================= */
.geraet-karte {
    padding: 16px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 14px;
}
.geraet-kopf { display: flex; align-items: flex-start; gap: 12px; }
.geraet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.geraet-name { font-size: 15px; font-weight: 700; color: var(--ink); }

.geraet-feld { display: flex; flex-direction: column; gap: 6px; }
.geraet-feld-kopf { display: flex; align-items: center; gap: 10px; }
.geraet-feld-kopf .mikro { flex: 1; min-width: 0; }
/* Die Adresse ist lang und darf nicht die Seite aufsprengen - sie
   scrollt in ihrem eigenen Kasten. */
.geraet-code {
    display: block; font-family: var(--mono); font-size: 12px; line-height: 1.5;
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 9px; padding: 10px 12px;
    overflow-x: auto; white-space: pre; color: var(--ink);
}
.geraet-geheim { letter-spacing: .06em; }
.btn-klein { height: 32px; padding: 0 12px; font-size: 12px; }

.anleitung-liste { margin: 0; padding-left: 20px; line-height: 1.65; font-size: 13.5px; }
.anleitung-liste li + li { margin-top: 8px; }
.anleitung-liste ul { margin: 6px 0 0; padding-left: 18px; }
.anleitung-liste code, .beschreibung code {
    font-family: var(--mono); font-size: 12px;
    background: var(--surface-3); border-radius: 5px; padding: 1px 5px;
}

/* Der Miniserver-Block in der Seitenleiste führt zu den Geräten. */
.leisten-status.ist-link { display: block; text-decoration: none; color: inherit; }
.leisten-status.ist-link:hover {
    background: var(--surface-2); text-decoration: none;
    border-color: var(--border-strong);
}