/* ============================================================================
   DESIGN „GLAS" — Woche (produktion/wochenuebersicht.php)
   ----------------------------------------------------------------------------
   1. Die Wochenübersicht: jede Person eine Glas-Spur, Einsätze als getönte Karten.
      Ohne Umbau des Markups — es bleibt die Tabelle, nur ihre Zeilen stehen frei.
   2. Die Sprechblase am Einsatz: Das Blatt der Zelle (assets/js/blatt.js, Art
      „blase") erscheint an der angeklickten Zelle statt am rechten Rand; am Handy
      ist es eine Karte von unten. Der Schleier dahinter lässt die Zelle frei.

   Die Seite bringt ihr klassisches Aussehen in einem eigenen <style> mit (feste
   Papierfarben). Alles hier steht eine Stufe darüber (html[data-design="glas"] …)
   und ersetzt diese Farben durch Token — so gilt es hell wie dunkel.

   Signalfarben (Rot, Blau, Lila) haben ihre helle und dunkle Belegung in
   90-dunkel.css (--gefahr, --info, --lila …). Ersatz steht hier nur, wo es ein Token
   aus 00-grund.css gibt — nie eine feste Farbe. Die gemeinsamen Bausteine des Blatts
   (Knöpfe, Tagwahl, Schalter, Meldungen) färbt 90-dunkel.css für alle Seiten — hier
   steht nur, was die Blase anders hat.
   ============================================================================ */

/* Der Schleier hinter der Blase dunkelt ab — in beiden Modi, deshalb ein eigenes
   Token mit heller und dunkler Belegung statt einer festen Farbe in der Regel. */
html[data-design="glas"] { --blase-schleier: rgba(20, 12, 50, 0.20); }
html[data-design="glas"][data-modus="dunkel"] { --blase-schleier: rgba(0, 0, 0, 0.46); }
@media (prefers-color-scheme: dark) {
    html[data-design="glas"][data-modus="auto"] { --blase-schleier: rgba(0, 0, 0, 0.46); }
}

/* ============================================================================
   1. Kopf der Seite: Wochenwechsel, Suche, „Zu klären"
   ============================================================================ */
html[data-design="glas"] .woche-rund {
    border-color: var(--glas-kante); background: var(--glas-stark); color: var(--ink);
    transition: transform .2s var(--feder), border-color .2s;
}
html[data-design="glas"] .woche-rund:hover { border-color: var(--line-2); transform: scale(1.08); }
html[data-design="glas"] .woche-heute.is-aktiv { border-color: transparent; background: var(--ink); color: var(--surface); }
html[data-design="glas"] #woche-search { border-color: var(--glas-kante); background: var(--glas-stark); color: var(--ink); }
html[data-design="glas"] .woche-kw { font-family: var(--font-sans); }

/* Linsen: Glas-Pillen; die gewählte steht dunkel (im Dunkeln: hell). */
html[data-design="glas"] .woche-zeile2 .linse {
    border: 1px solid var(--glas-kante); background: var(--glas-stark); color: var(--ink);
    font-weight: 600; transition: transform .2s var(--feder), background .2s, color .2s;
}
html[data-design="glas"] .woche-zeile2 .linse b { font-family: var(--font-sans); font-weight: 700; color: var(--ink-3); }
html[data-design="glas"] .woche-zeile2 .linse:hover { transform: translateY(-1px); }
html[data-design="glas"] .woche-zeile2 .linse-konflikt b { color: var(--gefahr, var(--danger)); }
html[data-design="glas"] .woche-zeile2 .linse-gemeldet b { color: var(--info, var(--accent-b)); }
html[data-design="glas"] .woche-zeile2 .linse-anfrage b { color: var(--accent-2); }
html[data-design="glas"] .woche-zeile2 .linse[aria-pressed="true"] { border-color: transparent; background: var(--ink); color: var(--surface); }
html[data-design="glas"] .woche-zeile2 .linse[aria-pressed="true"] b { color: var(--surface); }
html[data-design="glas"] .woche-zeile2 .linse-weg { border-color: transparent; background: transparent; color: var(--accent-2); }

/* Sammelleiste der Mehrfachauswahl: hängt am <body>, darf also weichzeichnen. */
html[data-design="glas"] #woche-bulk {
    border-color: var(--glas-kante); border-radius: 22px; background: var(--glas-stark);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}

/* ============================================================================
   2. Die Woche: jede Person eine Glas-Spur
   ============================================================================ */
html[data-design="glas"] .woche-scroll { border: 0; border-radius: 0; background: transparent; }
html[data-design="glas"] .woche-grid { border-spacing: 0 var(--s-6); }
html[data-design="glas"] .woche-grid th,
html[data-design="glas"] .woche-grid td { border: 0; }

/* Kopfzeile: nur Schrift, der heutige Tag in der Akzentfarbe. */
html[data-design="glas"] .woche-grid thead th { background: transparent; box-shadow: none; color: var(--ink-3); }
html[data-design="glas"] .woche-grid thead th.wcol-name { background: transparent; }
html[data-design="glas"] .woche-grid thead th.is-today .wtag-kurz,
html[data-design="glas"] .woche-grid thead th.is-today .wtag-nr { color: var(--accent); }
html[data-design="glas"] .wtag-nr { font-weight: 700; }
html[data-design="glas"] .wcol-sub { font-family: var(--font-sans); }
/* Zwischen Handy und Schreibtisch rollt die Woche seitwärts — dort braucht der stehende
   Spaltenkopf der Namen einen Grund, sonst läse man die Tage durch ihn hindurch. */
@media (min-width: 641px) and (max-width: 1080px) {
    html[data-design="glas"] .woche-grid thead th.wcol-name { background: var(--grund-farbe); }
}

html[data-design="glas"] .wgruppe td { background: transparent; color: var(--ink-3); font-weight: 700; }

/* Die Spur: Die Zellen einer Zeile tragen zusammen eine Fläche mit heller Kante. Die
   stehende Namensspalte bleibt deckend — unter ihr rollen die Tage durch. */
html[data-design="glas"] .woche-row > td {
    border-top: 1px solid var(--glas-kante); border-bottom: 1px solid var(--glas-kante);
    background-color: var(--glas-stark);
}
html[data-design="glas"] .woche-row > td:first-child {
    border-left: 1px solid var(--glas-kante); border-radius: 20px 0 0 20px; background-color: var(--surface);
}
/* (:not(.is-open): Die Zelle, an der die Blase hängt, ist rundum rund — siehe unten.) */
html[data-design="glas"] .woche-row > td:last-child:not(.is-open) { border-right: 1px solid var(--glas-kante); border-radius: 0 20px 20px 0; }
/* Tag-Ansicht: Nur ein Tag ist zu sehen — er schließt die Spur ab. */
html[data-design="glas"] .woche[data-tag] .woche-row > td.wcell:not(.wcol-aus):not(.is-open) { border-right: 1px solid var(--glas-kante); border-radius: 0 20px 20px 0; }
/* Wochenende leicht getönt, heute in der Akzentfarbe — als Spalte lesbar, ohne Linien. */
html[data-design="glas"] .woche-row > td.is-we { background-image: linear-gradient(var(--paper-2), var(--paper-2)); }
html[data-design="glas"] .woche-row > td.is-today { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); box-shadow: none; }
html[data-design="glas"] .woche-grid th:not(.is-we) + th.is-we,
html[data-design="glas"] .woche-grid td:not(.is-we) + td.is-we { border-left: 0; }

/* Person: Kreis links, daneben Name und Stunden. Der Kreis sitzt fest in der Zelle —
   sie bleibt eine Tabellenzelle. */
html[data-design="glas"] .woche-row > .wcol-name { padding-left: calc(var(--s-12) + 36px + var(--s-10)) !important; }
html[data-design="glas"] .wname-kreis { position: absolute; left: var(--s-12); top: 50%; margin-top: calc(-1 * var(--s-18)); }
html[data-design="glas"] .wname-link { font-weight: 600; }
html[data-design="glas"] .wname-link:hover { color: var(--accent-2); }
html[data-design="glas"] .wmeta { font-family: var(--font-sans); }
html[data-design="glas"] .wmeta.wmeta-late { background: var(--warning-light); color: var(--warning); font-weight: 700; }

/* Einsatz: getönte Karte in der Farbe der Station statt Rahmen mit Farbstreifen. */
html[data-design="glas"] .woche .wk {
    padding: var(--s-6) var(--s-10); border: 0; border-radius: 13px; box-shadow: none;
    background: color-mix(in srgb, var(--farbe, var(--ink-3)) 16%, transparent);
    transition: transform .2s var(--feder), box-shadow .2s;
}
/* 60 % Stationsfarbe, 40 % Tinte: dunkler im Hellen, heller im Dunkeln — in beiden lesbar. */
html[data-design="glas"] .woche .wk-1 { font-weight: 700; color: color-mix(in srgb, var(--farbe, var(--ink)) 60%, var(--ink)); }
html[data-design="glas"] .woche .wk-2 { font-family: var(--font-sans); color: var(--ink-2); }
html[data-design="glas"] .woche .wk-teil .wk-2 { color: var(--warning); }
html[data-design="glas"] .woche .wk-doppelt { background: color-mix(in srgb, var(--gefahr, var(--danger)) 14%, transparent); }
html[data-design="glas"] .woche .wk-doppelt .wk-1,
html[data-design="glas"] .woche .wk-doppelt .wk-2 { color: var(--gefahr, var(--danger)); }
html[data-design="glas"] .woche .wk-anfrage { border: 2px dashed var(--accent); background: transparent; }
html[data-design="glas"] .woche .wk-anfrage .wk-1 { color: var(--ink); }
html[data-design="glas"] .woche .wk.wl-karte { padding: 0; }
/* Meldung der Aushilfe (später / krank): Signalfarben aus Token, hell wie dunkel lesbar. */
html[data-design="glas"] .woche .wc-meldung-late { color: var(--warning); }
html[data-design="glas"] .woche .wc-meldung-sick { color: var(--gefahr, var(--danger)); }
html[data-design="glas"] .woche .wc-detail { font-family: var(--font-sans); }
@media (hover: hover) {
    /* Die Karte hebt sich, statt dass die Zelle einen Rahmen bekommt. (Zellen, die eine
       Linse hervorhebt, behalten ihren Rahmen — auch unter dem Zeiger.) */
    html[data-design="glas"] .woche:not(.select-mode) .wcell[data-einsatz="1"]:not([data-linse]):hover { box-shadow: none; }
    html[data-design="glas"] .woche:not(.select-mode) .wcell[data-einsatz="1"]:hover .wk {
        transform: scale(1.04); box-shadow: 0 10px 20px -10px var(--farbe, var(--ink-3));
    }
}
/* Die Zelle, an der die Blase hängt: heller Grund, Ring in der Akzentfarbe. Ihre
   Rundung übernimmt das Loch im Schleier (blatt.js liest sie von hier). */
html[data-design="glas"] .wcell.is-open {
    border-radius: 16px; background: var(--surface) !important;
    box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--accent-soft) !important;
}

@media (max-width: 640px) {
    /* Am Handy ist die Namensspalte 74 px breit — kein Platz für den Kreis. */
    html[data-design="glas"] .wname-kreis { display: none; }
    html[data-design="glas"] .woche-row > .wcol-name { padding-left: var(--s-8) !important; }
    html[data-design="glas"] .woche-row > td:first-child { border-radius: 14px 0 0 14px; }
    html[data-design="glas"] .woche-row > td:last-child:not(.is-open),
    html[data-design="glas"] .woche[data-tag] .woche-row > td.wcell:not(.wcol-aus):not(.is-open) { border-radius: 0 14px 14px 0; }
    html[data-design="glas"] .woche-grid { border-spacing: 0 var(--s-4); }
    html[data-design="glas"] .wcell.is-open { border-radius: 12px; }
    /* Kürzel je Tag: leere und abgesagte Tage aus Token. */
    html[data-design="glas"] .woche .wc-mini { border-radius: 11px; background: var(--paper-2); }
    html[data-design="glas"] .woche:not([data-tag]) .wc-mini.wm-ok { background: var(--success-light); color: var(--success-2); }
    html[data-design="glas"] .woche:not([data-tag]) .wc-mini.wm-frei { background: var(--info-flaeche); color: var(--info); }
    html[data-design="glas"] .woche:not([data-tag]) .wc-mini.wm-auto { background: var(--lila-flaeche); color: var(--lila); }
    html[data-design="glas"] .woche:not([data-tag]) .wc-mini.wm-ab {
        background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, var(--line-2) 4px 6px);
    }
    html[data-design="glas"] .woche:not([data-tag]):not(.show-hidden) .is-hidden-status .wc-mini { background: var(--paper-2); }
    html[data-design="glas"] .woche:not([data-tag]) .wc-mini.wm-meldung { outline-color: var(--warning); }
}

/* ============================================================================
   3. Sprechblase am Einsatz
   ----------------------------------------------------------------------------
   blatt.js setzt die Klasse .blatt-blase, die Lage (left/top/bottom, max-height),
   data-lage = unten | oben | rechts | links und --pfeil-x / --pfeil-y: die Stelle
   am Rand der Blase, die auf die Zelle zeigt. Von dort aus „ploppt" sie auf.
   Blase und Schleier hängen am <body> — hier ist der Weichzeichner erlaubt.
   ============================================================================ */
html[data-design="glas"] .blatt-hinter.blatt-hinter-blase {
    background: var(--blase-schleier);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: glas-blende .3s ease-out backwards;
}
@keyframes glas-blende { from { opacity: 0; } }

html[data-design="glas"] .blatt.blatt-blase {
    top: auto; right: auto; bottom: auto;
    width: 392px; max-width: calc(100vw - 2 * var(--s-12)); max-height: calc(100vh - 2 * var(--s-12));
    overflow: visible; gap: var(--s-12); padding: var(--s-18);
    border: 1px solid var(--glas-kante); border-radius: 26px;
    background: var(--glas-stark); color: var(--ink); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
    transform-origin: var(--pfeil-x, 40px) 0;
    animation: glas-plopp .42s var(--feder) backwards;
}
/* Nur der Anfang: Nach dem Erscheinen bleibt kein transform stehen. Die Richtung
   kommt aus der Lage — die Blase wächst von der Zelle weg. */
@keyframes glas-plopp { from { opacity: 0; transform: translate(var(--plopp-x, 0), var(--plopp-y, -10px)) scale(.7); } }
@keyframes glas-hoch  { from { opacity: 0; transform: translateY(40px) scale(.96); } }
html[data-design="glas"] .blatt.blatt-blase[data-lage="oben"]   { transform-origin: var(--pfeil-x, 40px) 100%; --plopp-y: 10px; }
html[data-design="glas"] .blatt.blatt-blase[data-lage="rechts"] { transform-origin: 0 var(--pfeil-y, 44px); --plopp-x: -10px; --plopp-y: 0; }
html[data-design="glas"] .blatt.blatt-blase[data-lage="links"]  { transform-origin: 100% var(--pfeil-y, 44px); --plopp-x: 10px; --plopp-y: 0; }
/* Kein Anker mit Fläche (die Zelle ist ausgeblendet, etwa ein anderer Tag in der
   Tag-Ansicht) oder auf keiner Seite ganz Platz: mittig im Fenster, ohne Pfeil. Feste
   Ränder mit selbstrechnendem Außenabstand zentrieren ohne transform. Wie viel oben und
   unten frei bleibt (klebender Kopf, Leiste unten), nennt blatt.js — sonst der Rand.
   Höher als dieser Raum wird die Blase nicht: Dann rollt ihr Inhalt. */
html[data-design="glas"] .blatt.blatt-blase[data-lage="mitte"] {
    top: var(--blase-oben, var(--s-12)); right: 0; bottom: var(--blase-unten, var(--s-12)); left: 0; margin: auto;
    height: -moz-fit-content; height: fit-content;
    max-height: calc(100% - var(--blase-oben, var(--s-12)) - var(--blase-unten, var(--s-12)));
    transform-origin: 50% 50%; --plopp-y: 0;
}

/* Der Pfeil: ein gedrehtes Quadrat, von dem nur die äußere Hälfte gezeichnet wird. */
html[data-design="glas"] .blatt.blatt-blase::before {
    content: ""; position: absolute; width: 20px; height: 20px;
    border-left: 1px solid var(--glas-kante); border-top: 1px solid var(--glas-kante); border-radius: 5px 0 0 0;
    background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
    left: calc(var(--pfeil-x, 40px) - 10px); top: -11px; transform: rotate(45deg);
}
html[data-design="glas"] .blatt.blatt-blase:not([data-lage])::before,
html[data-design="glas"] .blatt.blatt-blase[data-lage="mitte"]::before { display: none; }
html[data-design="glas"] .blatt.blatt-blase[data-lage="oben"]::before   { top: auto; bottom: -11px; transform: rotate(225deg); }
html[data-design="glas"] .blatt.blatt-blase[data-lage="rechts"]::before { left: -11px; top: calc(var(--pfeil-y, 44px) - 10px); transform: rotate(-45deg); }
html[data-design="glas"] .blatt.blatt-blase[data-lage="links"]::before  { left: auto; right: -11px; top: calc(var(--pfeil-y, 44px) - 10px); transform: rotate(135deg); }

/* Der Kopf steht, der Inhalt rollt — so schneidet die Blase ihren Pfeil nicht ab. */
html[data-design="glas"] .blatt.blatt-blase > .blatt-kopf { flex: 0 0 auto; align-items: center; }
html[data-design="glas"] .blatt.blatt-blase > .bl-inhalt {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 calc(-1 * var(--s-8)); padding: var(--s-2) var(--s-8);
}
html[data-design="glas"] .blatt-blase .blatt-titel { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
html[data-design="glas"] .blatt-blase .blatt-unter { font-size: 12.5px; line-height: 1.35; }
html[data-design="glas"] .blatt-blase .blatt-rund {
    width: 38px; height: 38px; background: var(--paper-2); color: var(--ink-2);
    transition: transform .2s var(--feder), background .2s;
}
html[data-design="glas"] .blatt-blase .blatt-rund:hover { background: var(--line-2); transform: scale(1.08); }

/* Person: Kreis mit Bild oder Kürzel; in einem Schritt steht dort der Zurück-Knopf. */
html[data-design="glas"] .blatt-blase .bl-kreis { flex: 0 0 auto; display: inline-flex; }
html[data-design="glas"] .blatt-blase .bl-kreis:empty,
html[data-design="glas"] .blatt-blase.ist-schritt .bl-kreis { display: none; }
html[data-design="glas"] .blatt-blase .bl-kreis .pkreis { width: 46px; height: 46px; font-size: 15px; }

/* Stand des Tages: Punkt und Wort. */
html[data-design="glas"] .blatt-blase .bl-stand { font-weight: 600; color: var(--ink-3); }
html[data-design="glas"] .blatt-blase .bl-stand::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-6);
    border-radius: 50%; background: currentColor;
}
html[data-design="glas"] .blatt-blase .bl-stand-ok    { color: var(--success-2); }
html[data-design="glas"] .blatt-blase .bl-stand-frage { color: var(--accent-2); }
html[data-design="glas"] .blatt-blase .bl-stand-warn  { color: var(--warning); }
html[data-design="glas"] .blatt-blase .bl-stand-rot   { color: var(--gefahr, var(--danger)); }

/* Einsatz: Tag klein, Uhrzeit groß; Projekt und Station als zwei Felder; Aktionen rund. */
html[data-design="glas"] .blatt-blase .bl-einsatz { display: flex; flex-direction: column; gap: var(--s-8); }
html[data-design="glas"] .blatt-blase .bl-einsatz + .bl-einsatz { padding-top: var(--s-14); border-top: 1px solid var(--line); }
html[data-design="glas"] .blatt-blase .bl-zeit { font-size: 13px; color: var(--ink-2); }
html[data-design="glas"] .blatt-blase .bl-zeit b {
    display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink);
}
html[data-design="glas"] .blatt-blase .bl-neben { font-size: 12.5px; color: var(--ink-3); }
html[data-design="glas"] .blatt-blase .blatt-notiz { font-size: 12.5px; }
html[data-design="glas"] .blatt-blase .blatt-meldung-late { color: var(--warning); }
html[data-design="glas"] .blatt-blase .blatt-meldung-sick { color: var(--gefahr, var(--danger)); }
html[data-design="glas"] .blatt-blase .blatt-feld input { border-radius: 16px; background: var(--paper); }
html[data-design="glas"] .blatt-blase .bl-hinweis { font-size: 12.5px; font-weight: 600; color: var(--accent-2); }
html[data-design="glas"] .blatt-blase .bl-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
html[data-design="glas"] .blatt-blase .bl-feld {
    min-width: 0; padding: var(--s-10) var(--s-12); border-radius: 16px; background: var(--paper-2);
    font-size: 13px; line-height: 1.3;
}
html[data-design="glas"] .blatt-blase .bl-feld-name {
    display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-2);
    font-size: 11px; font-weight: 500; color: var(--ink-3);
}
html[data-design="glas"] .blatt-blase .bl-feld-name .ksym { width: 13px; height: 13px; }
/* Lange Namen trennen an der Silbe („Schreibtischunter-lagen"), nicht mitten im Wort. */
html[data-design="glas"] .blatt-blase .bl-feld b { display: block; font-weight: 600; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
/* Projekt mit Farbpunkt: Der Punkt bleibt vor dem Namen, auch wenn der umbricht. */
html[data-design="glas"] .blatt-blase .bl-feld-projekt b { display: flex; align-items: baseline; gap: var(--s-6); }
html[data-design="glas"] .blatt-blase .bl-feld-projekt b::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-radius: 50%; background: var(--farbe, var(--line-2));
}

html[data-design="glas"] .blatt-blase .bl-akt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
html[data-design="glas"] .blatt-blase .bl-a {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-6); min-width: 0;
    padding: var(--s-2) 0; border: 0; border-radius: 16px; background: transparent; color: var(--ink-2);
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
html[data-design="glas"] .blatt-blase .bl-a-rund {
    width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%;
    background: var(--paper-2); color: var(--ink);
    transition: transform .2s var(--feder), box-shadow .2s;
}
html[data-design="glas"] .blatt-blase .bl-a-rund .ksym { width: 20px; height: 20px; }
html[data-design="glas"] .blatt-blase .bl-a-wort { max-width: 100%; overflow-wrap: anywhere; }
html[data-design="glas"] .blatt-blase .bl-a:hover .bl-a-rund { transform: scale(1.12); }
html[data-design="glas"] .blatt-blase .bl-a:active .bl-a-rund { transform: scale(0.94); }
html[data-design="glas"] .blatt-blase .bl-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-design="glas"] .blatt-blase .bl-a-haupt .bl-a-rund { background: var(--verlauf); color: #fff; box-shadow: 0 12px 22px -10px var(--accent); }
html[data-design="glas"] .blatt-blase .bl-a-rot .bl-a-rund {
    background: color-mix(in srgb, var(--gefahr, var(--danger)) 15%, transparent);
    color: var(--gefahr, var(--danger));
}

/* Darunter, zum Aufklappen: die Woche der Person, weitere Einsätze, Verweise. Der Knopf
   trägt die Stunden der Woche; eingeklappt bleibt die Blase klein genug, um unter oder
   über der Zelle ganz Platz zu haben. */
html[data-design="glas"] .blatt-blase .bl-mehr {
    display: flex; flex-direction: column; gap: var(--s-8);
    padding-top: var(--s-6); border-top: 1px solid var(--line);
}
html[data-design="glas"] .blatt-blase .bl-mehr-knopf {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
    width: 100%; min-height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent;
    color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
html[data-design="glas"] .blatt-blase .bl-mehr-knopf:hover { color: var(--ink); }
html[data-design="glas"] .blatt-blase .bl-mehr-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-design="glas"] .blatt-blase .bl-mehr-pfeil { display: inline-flex; transition: transform .2s; }
html[data-design="glas"] .blatt-blase .bl-mehr-pfeil .ksym { width: 18px; height: 18px; }
html[data-design="glas"] .blatt-blase .bl-mehr-knopf[aria-expanded="true"] .bl-mehr-pfeil { transform: rotate(180deg); }
html[data-design="glas"] .blatt-blase .bl-mehr-rest { display: flex; flex-direction: column; gap: var(--s-8); padding-bottom: var(--s-2); }
html[data-design="glas"] .blatt-blase .blatt-abschnitt { font-size: 13px; font-weight: 700; color: var(--ink-2); }
html[data-design="glas"] .blatt-blase .blatt-link { min-width: 36px; min-height: 36px; font-size: 13.5px; font-weight: 600; }
html[data-design="glas"] .blatt-blase .blatt-link.blatt-link-leise { font-size: 13px; font-weight: 600; }

/* Die Schritte (Verschieben, neue Zeit, Absagen) zeichnen die gemeinsamen Bausteine
   des Blatts in die Blase. Sie ist schmaler als das Blatt: Knöpfe und Kästen rücken
   zusammen. Ihre Farben kommen aus 90-dunkel.css. */
html[data-design="glas"] .blatt-blase .btn-lg { min-height: 48px; padding: 0 var(--s-12); font-size: 14px; font-weight: 700; }
html[data-design="glas"] .blatt-blase .blatt-block { background: var(--paper-2); }
html[data-design="glas"] .blatt-blase .blatt-block-kopf b { font-weight: 700; }
/* „.mw-einsatz" heißt auch die Einsatz-Karte in „Meine Woche" der Aushilfe (60-aushilfe.css) —
   deren Streifen und Schatten gehören nicht an das Tages-Kästchen hier. Der Ring des
   gewählten Tages gilt danach wieder. */
html[data-design="glas"] .blatt-blase .miniwoche .mw-einsatz { box-shadow: none; }
/* Die Blase ist schmaler als das Blatt: Eine Zeit wie „8–16:30" bräche im Kästchen um.
   Schmale Schrift, eine Zeile; ein Tag mit langer Zeit darf breiter sein als sein Nachbar. */
html[data-design="glas"] .blatt-blase .miniwoche { grid-template-columns: repeat(7, minmax(min-content, 1fr)); gap: var(--s-4); }
html[data-design="glas"] .blatt-blase .miniwoche small { font-family: var(--font-sans); font-size: 10px; letter-spacing: -0.02em; white-space: nowrap; }
html[data-design="glas"] .blatt-blase .miniwoche .is-aktiv { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* Handy: Karte von unten wie das Blatt — im Glas-Stil, ohne Pfeil. Auch in niedrigen
   Fenstern (Handy quer): Dort wäre unter und über der Zelle kein Platz. Dieselbe
   Bedingung steht als SCHMAL in assets/js/blatt.js — dann setzt das Skript keine Lage.
   Quer wird die Karte nicht breiter als 560 px und steht mittig. */
@media (max-width: 640px), (max-height: 520px) {
    html[data-design="glas"] .blatt.blatt-blase {
        top: auto; left: var(--s-8); right: var(--s-8); bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
        width: auto; max-width: 560px; max-height: 86vh; max-height: 86dvh; margin: 0 auto;
        padding: var(--s-10) var(--s-16) var(--s-18); border-radius: 28px;
        transform-origin: 50% 100%;
        animation: glas-hoch .36s var(--feder) backwards;
    }
    html[data-design="glas"] .blatt.blatt-blase::before { display: none; }
    html[data-design="glas"] .blatt-blase .blatt-rund { width: 44px; height: 44px; }
    html[data-design="glas"] .blatt-blase .bl-zeit b { font-size: 28px; }
    html[data-design="glas"] .blatt-blase .bl-a-rund { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .blatt.blatt-blase,
    html[data-design="glas"] .blatt-hinter.blatt-hinter-blase { animation: none; }
    html[data-design="glas"] .woche .wk,
    html[data-design="glas"] .woche-rund,
    html[data-design="glas"] .woche-zeile2 .linse,
    html[data-design="glas"] .blatt-blase .blatt-rund,
    html[data-design="glas"] .blatt-blase .bl-mehr-pfeil,
    html[data-design="glas"] .blatt-blase .bl-a-rund { transition: none; }
    html[data-design="glas"] .woche:not(.select-mode) .wcell[data-einsatz="1"]:hover .wk,
    html[data-design="glas"] .woche-rund:hover,
    html[data-design="glas"] .woche-zeile2 .linse:hover,
    html[data-design="glas"] .blatt-blase .blatt-rund:hover,
    html[data-design="glas"] .blatt-blase .bl-a:hover .bl-a-rund,
    html[data-design="glas"] .blatt-blase .bl-a:active .bl-a-rund { transform: none; }
}