/* ============================================================================
   DESIGN „GLAS" — Seiten der Aushilfe
   ----------------------------------------------------------------------------
   1. Schwebender Knopf „Hilfe & Nachricht" mit seiner Karte — ein geführter Assistent
      (includes/_nachricht-knopf.php, assets/js/nachricht-knopf.js)
   2. Meine Einsätze (aushilfe/index.php): Farbkarte „Als Nächstes", Tageszeilen
   3. Monat und Jahr
   4. Verfügbarkeit (aushilfe/verfuegbarkeit.php)

   Viele Regeln dieser Seiten stehen in <style>-Blöcken der Seiten selbst. Sie
   bleiben dort (klassisch sieht aus wie immer) — hier werden sie überschrieben:
   Mit dem Vorsatz html[data-design="glas"] ist jede Regel hier stärker als ihr
   Gegenstück in der Seite, egal in welcher Reihenfolge.

   Feste helle Farben der Seiten (#fff, #eef8fc, #fdf3c4 …) sind hier durch Token
   ersetzt — sonst stünde im Dunkeln helle Schrift auf heller Fläche.
   ============================================================================ */

/* ============================================================================
   1. Knopf „Hilfe & Nachricht"
   ============================================================================ */
/* Stapel: UNTER der Kopfzeile (30) — deren geöffnete Menüs (Konto, Glocke) reichen am
   kleinen Handy bis hier herunter und müssen bedienbar bleiben. Über der Leiste unten
   muss der Knopf nicht liegen: Er steht darüber, nicht darauf. */
html[data-design="glas"] .nk-knopf {
    position: fixed; z-index: 29;
    right: calc(var(--s-16) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--leiste-unten) + var(--s-12));
    min-height: 52px; padding: 0 var(--s-18) 0 var(--s-14);
    display: inline-flex; align-items: center; gap: var(--s-8);
    border: 0; border-radius: 999px; background: var(--verlauf); color: #fff;
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    box-shadow: 0 18px 30px -12px var(--accent);
    transition: transform .2s var(--feder), filter .2s;
    -webkit-tap-highlight-color: transparent;
}
/* Solange in der Verfügbarkeit etwas ungespeichert ist, macht der Knopf der klebenden
   Speichern-Leiste Platz (Skript setzt hidden). */
html[data-design="glas"] .nk-knopf[hidden] { display: none; }
html[data-design="glas"] .nk-knopf:hover { filter: brightness(1.07); }
html[data-design="glas"] .nk-knopf:active { transform: scale(0.97); }
html[data-design="glas"] .nk-knopf:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
html[data-design="glas"] .nk-ico { flex: 0 0 auto; display: inline-flex; }
html[data-design="glas"] .nk-ico svg { width: 22px; height: 22px; display: block; }
/* Der KI-Assistent sitzt, wenn eingeschaltet, an derselben Ecke (56 px, 24 px vom Rand). */
html[data-design="glas"] .nk-knopf.nk-ueber-ki { bottom: calc(var(--leiste-unten) + 88px); }
/* Klein: nur noch der Kreis. So zeigt sich der Knopf, sobald die Seite gerollt ist — er
   deckt dann eine Schaltfläche zu statt zwei. Das Wort bleibt im Markup (Vorlese-Programme),
   es wird nur zusammengeschoben. (20em: „Допомога і повідомлення" braucht mehr als 14.) */
html[data-design="glas"] .nk-wort { display: inline-block; max-width: 20em; overflow: hidden; transition: max-width .25s ease, opacity .2s; }
html[data-design="glas"] .nk-knopf.ist-klein { min-width: 52px; padding: 0 var(--s-14); gap: 0; justify-content: center; }
html[data-design="glas"] .nk-knopf.ist-klein .nk-wort { max-width: 0; opacity: 0; }

/* Die Welle: ein Ring, der einmal vom Knopf wegläuft. Im Ruhezustand unsichtbar —
   die Bewegung nennt nur ihren Anfang, das Ende ist dieser Stil. */
html[data-design="glas"] .nk-knopf::before {
    content: ""; position: absolute; inset: -5px; border: 2px solid var(--accent); border-radius: 999px;
    opacity: 0; transform: scale(1.2); pointer-events: none;
}
html[data-design="glas"] .nk-knopf.nk-welle::before { animation: nk-welle .45s ease-out backwards; }
@keyframes nk-welle { from { opacity: 0.6; transform: scale(0.94); } }

/* Mehr Luft am Seitenende: Sonst läge der Knopf auf der letzten Zeile des Seitenfußes. */
html[data-design="glas"].nk-da .app-footer { padding-bottom: calc(var(--leiste-unten) + var(--s-32) + var(--s-32) + var(--s-24)); }

/* --- Schleier und Karte (hängen am <body>, deshalb hier Weichzeichner erlaubt) --- */
html[data-design="glas"] .nk-hinter {
    position: fixed; inset: 0; z-index: 1200;
    background: var(--paper-2);
    background: color-mix(in srgb, var(--grund-farbe) 58%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    touch-action: none;   /* die Seite dahinter rollt nicht mit */
    animation: nk-hinter-rein .2s ease-out backwards;
}
html[data-design="glas"] .nk-karte {
    position: fixed; z-index: 1201;
    right: calc(var(--s-16) + env(safe-area-inset-right, 0px));
    /* Über der Leiste unten — und über der Bildschirmtastatur, wenn die höher reicht
       (Tablet hochkant; --nk-tastatur setzt das Skript aus dem sichtbaren Ausschnitt). */
    bottom: calc(var(--leiste-unten) + var(--s-12));
    bottom: max(calc(var(--leiste-unten) + var(--s-12)), calc(var(--nk-tastatur, 0px) + var(--s-8)));
    width: 392px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px); max-height: calc(var(--nk-sicht, 100dvh) - 32px);
    box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--s-14); padding: var(--s-18);
    border: 1px solid var(--glas-kante); border-radius: 28px; background: var(--glas-stark); color: var(--ink);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    animation: nk-rein .28s var(--feder) backwards;
}
html[data-design="glas"] .nk-karte:focus { outline: none; }
html[data-design="glas"] .nk-hinter[hidden] { display: none; }
html[data-design="glas"] .nk-karte[hidden] { display: none; }
/* Formular, Bestätigung und Fehlerzeile setzen display selbst — hidden muss gewinnen. */
html[data-design="glas"] .nk-karte [hidden] { display: none; }
@keyframes nk-rein { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes nk-hinter-rein { from { opacity: 0; } }

/* Kopf der Karte: Zurück (ab dem zweiten Schritt), die Frage des Schritts, Schließen. */
html[data-design="glas"] .nk-kopf { display: flex; align-items: center; gap: var(--s-8); }
html[data-design="glas"] .nk-titel {
    flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2;
    letter-spacing: -0.015em; text-transform: none; color: var(--ink);
}
/* In der Bestätigung steht der Titel groß unter dem Haken — oben bleibt nur sein Platz
   (Vorlese-Programme lesen ihn weiter als Namen des Fensters). */
html[data-design="glas"] .nk-karte.ist-fertig .nk-titel { visibility: hidden; }
html[data-design="glas"] .nk-rund {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink-2);
    font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s var(--feder);
}
html[data-design="glas"] .nk-rund:hover { background: var(--line-2); color: var(--ink); transform: scale(1.06); }
html[data-design="glas"] .nk-rund:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Der Winkel der Tabelle zeigt nach unten — hier nach links (zurück) und nach rechts (weiter). */
html[data-design="glas"] .nk-zurueck .nk-ico svg { width: 20px; height: 20px; transform: rotate(90deg); }

/* --- Schritte: sichtbar ist immer genau einer (das Skript setzt hidden) --- */
html[data-design="glas"] .nk-schritt { margin: 0; display: flex; flex-direction: column; gap: var(--s-10); }
html[data-design="glas"] .nk-wahlen { display: flex; flex-direction: column; gap: var(--s-10); }
/* Solange ein Aufruf läuft, lässt sich nichts ein zweites Mal antippen. */
html[data-design="glas"] .nk-karte[aria-busy="true"] .nk-schritt { opacity: 0.55; pointer-events: none; }

/* Eine Wahl: die ganze Zeile zum Antippen — Symbol, Wort, Winkel. 56 px hoch. */
html[data-design="glas"] .nk-wahl {
    width: 100%; min-height: 56px; box-sizing: border-box; padding: var(--s-8) var(--s-14);
    display: flex; align-items: center; gap: var(--s-12);
    border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--surface); color: var(--ink);
    font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .2s var(--feder), border-color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
html[data-design="glas"] .nk-wahl:hover { border-color: var(--line-2); background: var(--accent-soft); color: var(--ink); text-decoration: none; }
html[data-design="glas"] .nk-wahl:active { transform: scale(0.98); }
html[data-design="glas"] .nk-wahl:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
html[data-design="glas"] .nk-wahl[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
html[data-design="glas"] .nk-wahl > .nk-ico {
    width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-2);
}
html[data-design="glas"] .nk-wahl-wort { flex: 1 1 auto; min-width: 0; }
html[data-design="glas"] .nk-pfeil { flex: 0 0 auto; display: inline-flex; color: var(--ink-4); }
html[data-design="glas"] .nk-pfeil svg { width: 18px; height: 18px; display: block; transform: rotate(-90deg); }
/* „Etwas anderes schreiben": leise, aber ein volles Tippziel. */
html[data-design="glas"] .nk-leise {
    align-self: center; min-height: 44px; padding: 0 var(--s-16); border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-2);
    font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
html[data-design="glas"] .nk-leise:hover { background: var(--paper-2); color: var(--ink); }
html[data-design="glas"] .nk-leise:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Was die Karte über heute weiß („Dein Einsatz heute: 08:00–14:00") — nur Tag und Uhrzeit. */
html[data-design="glas"] .nk-lage {
    margin: 0; padding: var(--s-10) var(--s-14); border-radius: 16px; background: var(--paper-2); color: var(--ink-2);
    font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums;
}

/* Eigene Angabe (Uhrzeit bzw. von–bis): Beschriftung über dem Feld, daneben der Knopf.
   16 px im Feld (sonst zoomt iOS beim Antippen), 44 px hoch. */
html[data-design="glas"] .nk-eigen {
    margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-8) var(--s-10);
    padding: var(--s-12) var(--s-14); border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface);
}
html[data-design="glas"] .nk-eigen label { flex: 1 1 100%; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
html[data-design="glas"] .nk-eigen input {
    flex: 1 1 120px; min-width: 0; width: auto; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 var(--s-12);
    border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink);
    font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
}
html[data-design="glas"] .nk-eigen input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-design="glas"] .nk-feld { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
html[data-design="glas"] .nk-feld input { flex: 0 0 auto; width: 100%; }
html[data-design="glas"] .nk-eigen-tage .nk-los { flex: 1 1 100%; }

/* Der eine Knopf, der etwas abschickt. */
html[data-design="glas"] .nk-los {
    flex: 0 0 auto; min-height: 44px; padding: 0 var(--s-18); display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: var(--verlauf); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: 0 12px 22px -12px var(--accent);
    transition: transform .2s var(--feder), filter .2s;
}
html[data-design="glas"] .nk-los:hover { filter: brightness(1.07); }
html[data-design="glas"] .nk-los:active { transform: scale(0.97); }
html[data-design="glas"] .nk-los:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
html[data-design="glas"] .nk-los-breit { width: 100%; min-height: 52px; font-size: 16px; }

/* Rückfrage und Bestätigung: die Frage groß, darunter was geschieht — Tag und Uhrzeit. */
html[data-design="glas"] .nk-frage {
    margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.015em; color: var(--ink);
}
html[data-design="glas"] .nk-absatz { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
html[data-design="glas"] .nk-absatz-klein { font-size: 13px; color: var(--ink-3); }
/* Eine lange Liste (ein Monat krank) rollt in sich — „Krankmelden" darunter bleibt im Bild. */
html[data-design="glas"] .nk-liste {
    align-self: stretch; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-4);
    max-height: 32vh; overflow-y: auto; overscroll-behavior: contain;
}
html[data-design="glas"] .nk-liste li {
    flex: 0 0 auto; padding: var(--s-8) var(--s-12); border-radius: 12px; background: var(--paper-2); color: var(--ink);
    font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: left;
}
html[data-design="glas"] .nk-warnung {
    align-self: stretch; margin: 0; padding: var(--s-10) var(--s-14); border-radius: 14px;
    background: var(--warning-light); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left;
}

html[data-design="glas"] .nk-form { margin: 0; display: flex; flex-direction: column; gap: var(--s-12); }

/* Eingabe als Kapsel: Feld und „Senden" in einer Form. Das Feld ist deckend (lesbar). */
html[data-design="glas"] .nk-eingabe {
    display: flex; align-items: flex-end; gap: var(--s-8); padding: var(--s-6) var(--s-6) var(--s-6) var(--s-16);
    border: 1px solid var(--line-2); border-radius: 28px; background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}
html[data-design="glas"] .nk-eingabe:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 16 px: Darunter zoomt iOS beim Antippen in die Seite. */
html[data-design="glas"] .nk-eingabe textarea {
    flex: 1 1 auto; min-width: 0; width: auto; min-height: 44px; max-height: 140px; box-sizing: border-box;
    margin: 0; padding: var(--s-10) 0; border: 0; border-radius: 0; background: transparent; color: var(--ink);
    font: inherit; font-size: 16px; line-height: 1.45; resize: none; outline: none; box-shadow: none;
}
html[data-design="glas"] .nk-eingabe textarea:focus { border: 0; outline: none; box-shadow: none; }
html[data-design="glas"] .nk-eingabe textarea::placeholder { color: var(--ink-4); }
html[data-design="glas"] .nk-senden {
    flex: 0 0 auto; min-height: 44px; padding: 0 var(--s-16) 0 var(--s-12);
    display: inline-flex; align-items: center; gap: var(--s-6);
    border: 0; border-radius: 999px; background: var(--verlauf); color: #fff;
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 12px 22px -12px var(--accent);
    transition: transform .2s var(--feder), filter .2s, opacity .2s;
}
html[data-design="glas"] .nk-senden .nk-ico svg { width: 18px; height: 18px; }
html[data-design="glas"] .nk-senden:hover { filter: brightness(1.07); }
html[data-design="glas"] .nk-senden:active { transform: scale(0.97); }
html[data-design="glas"] .nk-senden:disabled { opacity: 0.45; cursor: default; box-shadow: none; filter: none; transform: none; }
html[data-design="glas"] .nk-senden:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
html[data-design="glas"] .nk-fehler {
    margin: 0; padding: var(--s-10) var(--s-14); border-radius: 14px;
    background: var(--accent-soft); color: var(--accent-2); font-size: 14px; font-weight: 600; line-height: 1.4;
}

html[data-design="glas"] .nk-fertig {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-6);
    padding: var(--s-8) 0 var(--s-4); text-align: center;
}
html[data-design="glas"] .nk-fertig-zeichen {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
    background: var(--success-light); color: var(--success-2);
}
html[data-design="glas"] .nk-fertig-zeichen svg { width: 28px; height: 28px; display: block; }
html[data-design="glas"] .nk-fertig b { font-size: 18px; font-weight: 700; color: var(--ink); }
html[data-design="glas"] .nk-fertig-text { font-size: 14px; color: var(--ink-3); }
html[data-design="glas"] .nk-zum-chat {
    margin-top: var(--s-8); min-height: 44px; padding: 0 var(--s-18); display: inline-flex; align-items: center;
    border: 1px solid var(--glas-kante); border-radius: 999px; background: var(--surface); color: var(--ink);
    font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow);
    transition: transform .2s var(--feder), border-color .2s;
}
html[data-design="glas"] .nk-zum-chat:hover { border-color: var(--line-2); color: var(--ink); text-decoration: none; transform: translateY(-1px); }

/* Handy: die Karte als Blatt von unten, über der Leiste und über der Bildschirmtastatur
   (--nk-tastatur setzt das Skript aus dem sichtbaren Ausschnitt). */
@media (max-width: 640px) {
    html[data-design="glas"] .nk-karte {
        left: var(--s-10); right: var(--s-10); width: auto; max-width: none;
        bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px) + var(--nk-tastatur, 0px));
        max-height: calc(100vh - 24px); max-height: calc(var(--nk-sicht, 100dvh) - 24px);
        padding: var(--s-16); gap: var(--s-12);
        animation-name: nk-hoch;
    }
    /* „Senden" als runder Symbol-Knopf (wie im Chat): „Отправить" nähme dem Feld sonst die
       halbe Breite. Der Name steht als aria-label am Knopf. */
    html[data-design="glas"] .nk-senden { width: 44px; padding: 0; justify-content: center; }
    html[data-design="glas"] .nk-senden-wort { display: none; }
}
/* Ab hier sitzt der KI-Knopf AUF der Leiste unten (includes/_ai_widget.php, 560 px) —
   der Knopf braucht dann keine Stufe mehr darüber. */
@media (max-width: 560px) {
    html[data-design="glas"] .nk-knopf.nk-ueber-ki { bottom: calc(var(--leiste-unten) + var(--s-12)); }
}
@keyframes nk-hoch { from { opacity: 0; transform: translateY(40px); } }

/* ============================================================================
   2. Meine Einsätze — Farbkarte „Als Nächstes" und Tageszeilen
   ----------------------------------------------------------------------------
   Die Namen .mw-einsatz, .mw-frei … gibt es ein zweites Mal: in der Mini-Woche der
   Planung (.miniwoche, assets/js/wochenuebersicht.js). Deshalb hängt hier jede Regel
   für eine Tageszeile an .mw-woche — diesen Rahmen gibt es nur auf der Seite der
   Aushilfe. Die übrigen Namen (.mw-naechster, .mw-leer, .mw-woche-titel, .mw-kw,
   .mw-stand, .mw-blatt-form) kommen nur dort vor.
   ============================================================================ */
/* Zahlen in der runden Schrift statt in der Schreibmaschine — mit festen Ziffernbreiten. */
html[data-design="glas"] .mw-naechster .mw-mono,
html[data-design="glas"] .mw-woche .mw-mono,
html[data-design="glas"] .mw-woche-titel span,
html[data-design="glas"] .mw-kw,
html[data-design="glas"] .mw-stand,
html[data-design="glas"] .blatt .mw-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* Die wichtigste Auskunft der Seite sitzt auf der Verlaufskarte: Tag und Uhrzeit groß. */
html[data-design="glas"] .mw-naechster {
    position: relative; overflow: hidden; gap: var(--s-8); padding: var(--s-18) var(--s-18) var(--s-24);
    border-radius: 28px; background: var(--verlauf); color: #fff;
    box-shadow: 0 26px 50px -24px var(--accent);
}
/* Der helle Kreis hellt den Verlauf dahinter auf: Weiß hat auf dem Verlauf 4,65–5,4:1, auf
   dem Kreis (10 %) noch 4,1–4,5:1. Das genügt der großen Schrift (34 px, verlangt 3:1), der
   kleinen Zeile nicht — sie endet deshalb VOR dem Kreis (max-width) und bricht eher um. */
html[data-design="glas"] .mw-naechster::before {
    content: ""; position: absolute; right: -90px; top: -110px; width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); pointer-events: none;
}
html[data-design="glas"] .mw-naechster-titel { position: relative; max-width: calc(100% - 112px); font-size: 13px; font-weight: 600; opacity: 1; }
html[data-design="glas"] .mw-naechster-zeile { position: relative; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
html[data-design="glas"] .mw-naechster-zeile b {
    font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
}
html[data-design="glas"] .mw-naechster-zeile b.mw-mono { font-family: var(--font-display); }

html[data-design="glas"] .mw-leer { border-color: var(--glas-kante); border-radius: 24px; background: var(--glas); box-shadow: var(--shadow); }
html[data-design="glas"] .mw-woche-titel { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }

/* Tageszeilen: links der Tag als Glas-Kachel, rechts die Einträge als Glas-Zeilen. */
html[data-design="glas"] .mw-woche .mw-datum { border: 1px solid var(--glas-kante); border-radius: 16px; background: var(--glas); }
html[data-design="glas"] .mw-woche .mw-datum span { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .mw-woche .mw-tag.ist-heute .mw-datum {
    border-color: transparent; background: var(--verlauf); color: #fff; box-shadow: 0 10px 20px -12px var(--accent);
}
/* (Die Seite färbt den Wochentag eigens — hier erbt er das Weiß der Kachel.) */
html[data-design="glas"] .mw-woche .mw-tag.ist-heute .mw-datum b { color: inherit; }
html[data-design="glas"] .mw-woche .mw-eintrag { border-color: var(--glas-kante); border-radius: 20px; background: var(--glas); box-shadow: var(--shadow); }
/* Ein fester Einsatz: grüner Streifen (wie ein gewählter Tag in der Verfügbarkeit). */
html[data-design="glas"] .mw-woche .mw-einsatz { box-shadow: inset 5px 0 0 var(--success), var(--shadow); }
html[data-design="glas"] .mw-woche .mw-einsatz.ist-vorbei { box-shadow: inset 5px 0 0 var(--line-2); }
html[data-design="glas"] .mw-woche .mw-einsatz .mw-kopf { border-radius: 20px; }
html[data-design="glas"] .mw-woche .mw-einsatz .mw-kopf[aria-expanded="true"] { border-radius: 20px 20px 0 0; }
html[data-design="glas"] .mw-woche .mw-einsatz:has(.mw-kopf[aria-expanded="true"]) { border-color: var(--line-2); background: var(--glas-stark); }
html[data-design="glas"] .mw-woche .mw-einsatz .mw-titel { font-size: 18px; }
html[data-design="glas"] .mw-woche .mw-angenommen { border-color: var(--glas-kante); background: var(--success-light); }
html[data-design="glas"] .mw-woche .mw-gemeldet { border-color: var(--glas-kante); background: var(--glas); }
html[data-design="glas"] .mw-woche .mw-gemeldet .mw-titel { color: var(--ink); }
html[data-design="glas"] .mw-woche .mw-gemeldet.ist-abgelehnt { border-color: var(--line); background: var(--paper-2); box-shadow: none; }
html[data-design="glas"] .mw-woche .mw-gemeldet.ist-abgelehnt .mw-titel { color: var(--ink-3); }
html[data-design="glas"] .mw-woche .mw-anfrage { border-color: var(--accent); background: var(--accent-soft); }
html[data-design="glas"] .mw-woche .mw-abgesagt { background: var(--paper-2); box-shadow: none; }
/* „Absagen" leise: Rot auf Weiß wäre im Dunkeln Rot auf Nachtblau. */
html[data-design="glas"] .mw-woche .mw-knoepfe .btn-danger-quiet { border: 1px solid var(--accent); background: var(--glas-stark); color: var(--accent-2); }
html[data-design="glas"] .mw-woche .mw-knoepfe .btn-danger-quiet:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
/* Der leise Nachbar („Krank melden") braucht auf der Glas-Zeile eine sichtbare Kante. */
html[data-design="glas"] .mw-woche .mw-knoepfe .btn-secondary { border-color: var(--line-2); }
html[data-design="glas"] .mw-blatt-form textarea { border-radius: 16px; background: var(--surface); }

/* ============================================================================
   3. Monat und Jahr
   ============================================================================ */
/* Zusagen ohne Einsatz. Die klassischen Farben stehen als Klasse im <style> der Seite
   (nicht mehr im style="…" des Tages) — so genügt hier eine gewöhnliche Regel. */
html[data-design="glas"] .mcal-pill.ist-zusage { border-left-color: var(--success); background: var(--success-light); color: var(--success-2); }
html[data-design="glas"] .mcal-pill.ist-zusage-auto { border-left-color: var(--accent-b); background: var(--paper-2); color: var(--ink); }
html[data-design="glas"] .mini-month-card { border-color: var(--glas-kante); border-radius: 22px; background: var(--glas); box-shadow: var(--shadow); }
html[data-design="glas"] a.jahr-tag.ist-zusage,
html[data-design="glas"] a.jahr-tag.ist-zusage:hover { background: var(--success-light); color: var(--success-2); }
html[data-design="glas"] a.jahr-tag.ist-zusage-auto,
html[data-design="glas"] a.jahr-tag.ist-zusage-auto:hover { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-b); }

/* ============================================================================
   4. Verfügbarkeit
   ============================================================================ */
html[data-design="glas"] .zm-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .zm-frist { border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--warning-light); color: var(--ink); }
html[data-design="glas"] .zm-frist.ist-vorbei { background: var(--glas); }
html[data-design="glas"] .zm-frist-ico { color: var(--warning); }
html[data-design="glas"] .zm-frist.ist-vorbei .zm-frist-ico { color: var(--ink-3); }
html[data-design="glas"] .zm-rund { border-color: var(--glas-kante); background: var(--glas-stark); box-shadow: var(--shadow); transition: transform .2s var(--feder), border-color .2s; }
html[data-design="glas"] .zm-rund:hover { border-color: var(--line-2); transform: scale(1.06); }
html[data-design="glas"] .zm-nav-text b { font-family: var(--font-display); font-weight: 700; }
html[data-design="glas"] .zm-nav-text span { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .zm-heute { border: 1px solid var(--glas-kante); background: var(--glas-stark); }

/* Jeder Tag eine Glas-Zeile. */
html[data-design="glas"] .zm-tag { border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--glas); box-shadow: var(--shadow); }
html[data-design="glas"] .zm-tag.ist-gewaehlt { border-color: var(--glas-kante); box-shadow: inset 4px 0 0 var(--success), var(--shadow); }
html[data-design="glas"] .zm-tag.ist-fest { background: var(--paper-2); box-shadow: none; }
html[data-design="glas"] .zm-datum span { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .zm-opt {
    border: 1px solid var(--line); border-radius: 14px; background: var(--glas-stark); color: var(--ink);
    transition: transform .2s var(--feder), background .2s, border-color .2s;
}
html[data-design="glas"] .zm-opt span { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .zm-opt:active { transform: scale(0.96); }
html[data-design="glas"] .zm-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Gewählt: sattes Grün mit der Schrift der Gegenseite — hell auf dunklem Grün, im
   Dunkeln dunkel auf hellem Grün. (#fff allein wäre dort unlesbar.) */
html[data-design="glas"] .zm-opt[aria-pressed="true"] { border-color: var(--success-2); background: var(--success-2); color: var(--paper); }
html[data-design="glas"] .zm-opt[aria-pressed="true"] span { color: var(--paper); opacity: 0.86; }
/* In .zm-eigen stehen nur die beiden Uhrzeit-Felder (von, bis). */
html[data-design="glas"] .zm-eigen label input { border: 1px solid var(--line-2); border-radius: 14px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .zm-chip { border: 1px solid var(--glas-kante); }
html[data-design="glas"] .zm-chip-weg:hover { background: var(--accent-soft); color: var(--accent-2); }
html[data-design="glas"] .zm-leer { border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--glas); }

/* Speichern-Leiste. Klebt sie (ungespeichert), ist sie deckend — Zeilen laufen darunter
   durch. (Dass sie über der Leiste unten klebt, regelt die Seite für beide Designs.) */
html[data-design="glas"] .zm-leiste { border-color: var(--glas-kante); border-radius: 26px; background: var(--glas-stark); box-shadow: var(--shadow); }
html[data-design="glas"] .zm-leiste.ist-offen { border-color: var(--line-2); background: var(--surface); box-shadow: var(--shadow-lg); }
html[data-design="glas"] .zm-summe span { color: var(--warning); }
html[data-design="glas"] .zm-leiste.ist-gespeichert .zm-summe span { color: var(--success-2); }
html[data-design="glas"] .zm-speichern {
    border-color: transparent; background: var(--verlauf); color: #fff; box-shadow: 0 14px 26px -14px var(--accent);
}
html[data-design="glas"] .zm-speichern:hover { border-color: transparent; background: var(--verlauf); color: #fff; filter: brightness(1.07); }
html[data-design="glas"] .zm-speichern:disabled {
    border-color: transparent; background: var(--success-light); color: var(--success-2); box-shadow: none; filter: none;
}
html[data-design="glas"] .wd-chip > span { border: 1px solid var(--line); border-radius: 14px; background: var(--glas-stark); font-family: var(--font-sans); }
html[data-design="glas"] .wd-chip input:checked + span { border-color: transparent; background: var(--verlauf); color: #fff; }

/* Auf Papier gibt es nichts zu tippen. */
@media print {
    html[data-design="glas"] .nk-knopf { display: none; }
    html[data-design="glas"] .nk-hinter { display: none; }
    html[data-design="glas"] .nk-karte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .nk-knopf,
    html[data-design="glas"] .nk-wort,
    html[data-design="glas"] .nk-wahl,
    html[data-design="glas"] .nk-los,
    html[data-design="glas"] .nk-senden,
    html[data-design="glas"] .nk-rund,
    html[data-design="glas"] .nk-zum-chat,
    html[data-design="glas"] .zm-rund,
    html[data-design="glas"] .zm-opt { transition: none; }
    html[data-design="glas"] .nk-knopf.nk-welle::before,
    html[data-design="glas"] .nk-karte,
    html[data-design="glas"] .nk-hinter { animation: none; }
}

/* ============================================================================
   KW-Leiste der Verfügbarkeit (TASK-026, Agent R) — eigener Block, nur angehängt.
   Aufbau und Maße stehen in aushilfe/verfuegbarkeit.php; hier nur das Glas:
   die Woche in der Mitte als Feld wie die runden Pfeile daneben, die Rückfrage
   beim Wechsel mit ungespeicherten Eingaben als deckende Karte.
   ============================================================================ */
html[data-design="glas"] .zm-kw { border-color: var(--glas-kante); background: var(--glas-stark); box-shadow: var(--shadow); transition: border-color .2s; }
html[data-design="glas"] .zm-kw:hover { border-color: var(--line-2); }
html[data-design="glas"] .zm-kw:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Platzhalter der laufenden Woche: Text in --ink-2 (über 4,5:1 auf dem Verlauf, hell wie dunkel). */
html[data-design="glas"] .zm-heute.ist-hier { border-color: transparent; background: transparent; color: var(--ink-2); }
html[data-design="glas"] .zm-frage { border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .zm-kw { transition: none; }
}