/* ============================================================================
   DESIGN „GLAS" — Heute, der Start der Planung (produktion/index.php)
   ----------------------------------------------------------------------------
   Aufbau der Ansicht „Kacheln" — nach der Breite des Rasters, nicht des Fensters
   (links steht je nach Gerät die Schiene). Ab 940 px drei Spalten:

     Reihe 1   Farbkarte „Heute im Einsatz"  ·  Wochenring  ·  zwei Zähler
     Reihe 2   Projekte als Karten (zwei Spalten)  ·  offene Punkte
     Reihe 3   Kalender (zwei Spalten)  ·  letzte Änderungen
     Reihe 4   Aushilfen (zwei Spalten)  ·  Einstellungen (nur Verwaltung)

   620–939 px: zwei Spalten. Darunter eine — die Farbkarte zuerst.
   Die Kacheln einer Reihe sind gleich hoch. Fehlt eine (keine Änderungen, keine
   Einstellungen), nimmt die Nachbarin ihren Platz: .ohne-verlauf / .ohne-einst
   am Raster, gesetzt in produktion/index.php.

   Die ersten fünf Kacheln haben im Glas-Design eigenes Markup (.gk-…); Kalender,
   Aushilfen, Änderungen und Einstellungen sind dasselbe Markup wie klassisch und
   werden hier über ihre Überschrift gefunden ([aria-labelledby="hk-…"]) — so
   bleibt das klassische HTML unberührt.

   „Kompakt" bleibt die Liste der Köpfe aus der Grundvorlage; hier steht dafür
   nur, was das Glas braucht (ganz unten).

   Milchglas ohne Weichzeichner (siehe 00-grund.css). Bewegung: einmal, kurz,
   Keyframes nur mit „from" und „backwards" — danach gilt wieder der eigene Stil
   der Kachel, sonst höbe sie sich beim Überfahren nicht mehr.
   ============================================================================ */

/* --- Kopf der Seite: der Gruß groß, darunter die Lage des Tages --------------
   Der Seitenname „Heute" bleibt für Vorleseprogramme die Überschrift; zu sehen
   ist er in der Schiene. Das Datum steht in der Lage-Zeile. */
html[data-design="glas"] .hub-kopf { position: relative; gap: var(--s-4); }
html[data-design="glas"] .hub-kopf h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-design="glas"] .hub-gruss {
    font-family: var(--font-display); font-size: clamp(25px, 3vw, 32px); font-weight: 700;
    line-height: 1.1; letter-spacing: -0.03em; color: var(--ink);
}
/* Der Name im Verlauf der Marke. Kann der Browser Schrift nicht mit einem Verlauf
   füllen, bleibt die Akzentfarbe stehen. */
html[data-design="glas"] .hub-gruss .hand {
    margin: 0; font: inherit; letter-spacing: inherit; transform: none;
    color: var(--accent); background: var(--verlauf);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-design="glas"] .hub-lage { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
html[data-design="glas"] .hub-kopf ~ .ht-datum { display: none; }
/* Tag und Woche nennt im breiten Fenster schon der Kopf der App (.kopf-lage, 00-grund.css). */
@media (min-width: 1081px) {
    html[data-design="glas"] .hub-lage-datum { display: none; }
}

/* Die Zahl im Kopf einer Kachel, wenn etwas fehlt: In der Grundvorlage weiß auf
   --accent-2 — das ist im Dunkeln hell und die Zahl nicht mehr lesbar. Hier als
   getöntes Feld mit farbiger Schrift, in beiden Ansichten. */
html[data-design="glas"] .hubk-zahl.ist-warn { background: var(--accent-soft); color: var(--accent-2); }
html[data-design="glas"] .hat-dringend .hubk-zahl { background: var(--accent-soft); color: var(--accent-2); }

/* ============================================================================
   Raster
   ============================================================================ */
html[data-design="glas"] .hub[data-ansicht="kacheln"] { max-width: none; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hub-raster {
    grid-template-columns: minmax(0, 1fr); gap: var(--s-14); align-items: stretch;
}
/* Die Reihenfolge der Kacheln steht im Markup (produktion/index.php gibt die Aushilfen im
   Glas-Design nach den letzten Änderungen aus) — hier wird nichts umsortiert, damit der
   Tab-Fokus der Lesereihenfolge folgt. */

@container (min-width: 620px) and (max-width: 939.98px) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hub-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held { grid-column: 1 / -1; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-projekte { grid-column: 1 / -1; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-offen { grid-column: 1 / -1; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-kalender"] { grid-column: 1 / -1; }
    /* Änderungen und Aushilfen nebeneinander, die Einstellungen darunter in voller Breite. */
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-einst"] { grid-column: 1 / -1; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .ohne-verlauf .hubk[aria-labelledby="hk-einst"] { grid-column: auto; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .ohne-verlauf.ohne-einst .hubk[aria-labelledby="hk-aushilfen"] { grid-column: 1 / -1; }
}
@container (min-width: 940px) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hub-raster {
        grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr) minmax(0, 0.86fr);
    }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-projekte { grid-column: span 2; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-kalender"] { grid-column: span 2; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .ohne-verlauf .hubk[aria-labelledby="hk-kalender"] { grid-column: 1 / -1; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-aushilfen"] { grid-column: span 2; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .ohne-einst .hubk[aria-labelledby="hk-aushilfen"] { grid-column: 1 / -1; }
}

/* ============================================================================
   Kachel: Milchglas, federt beim Erscheinen, hebt sich beim Überfahren
   ============================================================================ */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hub-raster > * {
    animation: glas-heute-rein .45s var(--feder) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes glas-heute-rein { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
/* --i steht am Markup in der klassischen Reihenfolge (Aushilfen 5, Änderungen 6). Hier
   stehen die Änderungen vor den Aushilfen — also erscheinen sie auch zuerst. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-verlauf"] { animation-delay: 300ms; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-aushilfen"] { animation-delay: 360ms; }

html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk {
    padding: var(--s-18); gap: var(--s-12); border-radius: 26px;
    transition: transform .25s var(--feder), box-shadow .25s;
}
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-link::after { border-radius: 26px; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-inhalt { flex: 1 1 auto; }

/* Kopf: Name, daneben leise der Stand, rechts der Pfeil. Das Symbolfeld gehört zur
   Liste („Kompakt") — in der Kachel spricht der Inhalt. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-kopf { display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-ico { display: none; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-titel { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-kurz { flex: 1 1 0; font-size: 12px; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-zahl { align-self: center; font-family: var(--font-sans); font-weight: 700; }
/* Der Pfeil rückt beim Überfahren (transform) — damit läge er über dem Ziel der Kachel;
   er lässt den Tipp deshalb durch. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-pfeil { align-self: center; pointer-events: none; transition: transform .2s var(--feder), color .2s; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-werte div { background: var(--paper-2); }
/* Kalender: Ist die Nachbarkachel höher, verteilen sich die Zeilen (bis 56 px je Projekt),
   statt unten ein Loch zu lassen. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubkal { flex: 1 1 auto; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubkal-zeile { flex: 1 1 auto; max-height: 56px; justify-content: center; }

@media (hover: hover) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk:hover { transform: translateY(-4px); border-color: var(--glas-kante); box-shadow: var(--shadow-md); }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk:hover .hubk-pfeil { transform: translateX(3px); color: var(--accent); }
}

/* ============================================================================
   Farbkarte „Heute im Einsatz"
   ----------------------------------------------------------------------------
   Weiße Schrift auf dem Verlauf der Marke — in Hell und Dunkel dieselbe Karte.
   --verlauf (00-grund.css) ist so dunkel, dass Weiß darauf überall mindestens 4,65:1
   hat. Deshalb gilt hier: KEINE Abschwächung an kleiner Schrift (opacity, Farbmischung
   mit Transparenz) und nichts Helles unter der Schrift.
   ============================================================================ */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held {
    --auf-verlauf: #fff;
    isolation: isolate; overflow: hidden; min-height: 232px; padding: var(--s-24);
    border: 0; border-radius: 28px; background: var(--verlauf); color: var(--auf-verlauf);
    box-shadow: 0 26px 50px -24px var(--accent);
}
/* Der Kreis oben rechts: das warme Ende des Verlaufs, nicht Weiß. Eine Mischung zweier
   Verlaufsfarben ist nie heller als die hellere von beiden — Schrift, die darüber läuft
   (langer Titel, schmales Handy), behält ihren Kontrast. Ein weißer Kreis hätte ihn
   schon bei 8 % Deckkraft unter 4,5:1 gedrückt. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held::before {
    content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 260px; height: 260px;
    border-radius: 50%; background: var(--verlauf-a); opacity: 0.55; pointer-events: none;
}
/* Ein Lichtstreif zieht einmal über die Karte und bleibt dann rechts außerhalb liegen. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, currentColor 50%, transparent 65%);
    opacity: 0.22; transform: translateX(110%);
    animation: glas-heute-glanz .45s ease-in-out 1.1s backwards;
}
@keyframes glas-heute-glanz { from { transform: translateX(-110%); } }

html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-titel { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
/* Stand und Zahl stehen groß in der Karte; der Platz bleibt, damit der Pfeil rechts sitzt. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-kurz { visibility: hidden; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-zahl { display: none; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-pfeil { color: inherit; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-link:focus-visible::after { outline-color: currentColor; outline-offset: -4px; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held .hubk-inhalt { gap: var(--s-6); }

/* position: Anker für den vorgelesenen Satz (.sr-only). Ein positioniertes Element liegt
   aber über dem Ziel der Kachel (.hubk-link::after) — deshalb lässt es Tipps durch. */
html[data-design="glas"] .gh-zahl { position: relative; margin: 0; line-height: 0.95; pointer-events: none; }
html[data-design="glas"] .gh-zahl b { font-size: 84px; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
/* „/ 14" tritt hinter die Zahl zurück — große Schrift (26 px), dafür genügen 3:1 (gemessen 3,4). */
html[data-design="glas"] .gh-zahl i { margin-left: var(--s-6); font-style: normal; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; opacity: 0.8; }
html[data-design="glas"] .gh-lage { margin: 0; font-size: 13.5px; }
html[data-design="glas"] .gh-unten { margin-top: auto; padding-top: var(--s-12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
html[data-design="glas"] .gh-knopf {
    margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-6);
    min-height: 40px; padding: 0 var(--s-16); border-radius: 999px;
    background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700;
    text-decoration: none; white-space: nowrap; transition: transform .2s var(--feder);
}
html[data-design="glas"] .gh-knopf:hover { color: var(--ink); text-decoration: none; }
/* Fokus: Der übliche Rahmen in der Akzentfarbe verschwände auf dem Verlauf — hier in der
   Schriftfarbe der Karte, mit Abstand, damit er sich auch vom hellen Knopf abhebt. */
html[data-design="glas"] a.gh-knopf:focus-visible { outline: 2px solid var(--auf-verlauf); outline-offset: 2px; }
/* Ohne Lücken ist der Knopf nur ein Zeichen (span): Die ganze Karte führt zur Woche. */
html[data-design="glas"] span.gh-knopf { pointer-events: none; }
html[data-design="glas"] .gh-knopf svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (hover: hover) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held:hover { box-shadow: 0 32px 56px -24px var(--accent); }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held:hover .hubk-pfeil { color: inherit; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held:hover .gh-knopf { transform: scale(1.05); }
}
@container (max-width: 619.98px) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held { min-height: 208px; padding: var(--s-18); }
    html[data-design="glas"] .gh-zahl b { font-size: 68px; }
}

/* Gesichter als Stapel: Jedes liegt auf einem deckenden Rand, damit die Tönungen
   sich nicht durchscheinen. Baustein: person_kreis(). */
html[data-design="glas"] .gk-stapel { display: inline-flex; align-items: center; padding-left: var(--s-8); pointer-events: none; }
html[data-design="glas"] .gk-gesicht {
    box-sizing: border-box; display: inline-flex; margin-left: calc(var(--s-8) * -1); padding: var(--s-2);
    border-radius: 999px; background: var(--surface);
}
html[data-design="glas"] .gk-gesicht .pkreis { width: 32px; height: 32px; font-size: 11.5px; }
html[data-design="glas"] .gk-mehr {
    align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--s-6);
    font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}

/* ============================================================================
   Wochenring
   ============================================================================ */
html[data-design="glas"] .gr { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-16); min-width: 0; }
html[data-design="glas"] .gr-ring { flex: 0 0 auto; width: 124px; height: 124px; }
html[data-design="glas"] .gr-ring circle { fill: none; stroke-width: 13; }
html[data-design="glas"] .gr-spur { stroke: var(--line); }
/* pathLength="100" am Kreis: Der Versatz ist der fehlende Anteil in Prozent (inline). */
html[data-design="glas"] .gr-wert {
    stroke-linecap: round; stroke-dasharray: 100;
    animation: glas-heute-ring .45s cubic-bezier(0.2, 0.8, 0.2, 1) .2s backwards;
}
@keyframes glas-heute-ring { from { stroke-dashoffset: 100; } }
html[data-design="glas"] .gr-stop-a { stop-color: var(--accent); }
html[data-design="glas"] .gr-stop-b { stop-color: var(--accent-b); }
html[data-design="glas"] .gr-ring text { font-family: var(--font-sans); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; fill: var(--ink); }
html[data-design="glas"] .gr-werte { margin: 0; display: flex; flex-direction: column; gap: var(--s-10); min-width: 0; }
html[data-design="glas"] .gr-werte div { display: flex; flex-direction: column; gap: var(--s-2); }
html[data-design="glas"] .gr-werte dt { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
/* Die Zahl steht oben (order), im Markup nach ihrer Bezeichnung — wie in .hubk-werte. */
html[data-design="glas"] .gr-werte dd { order: -1; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
html[data-design="glas"] .gr-werte .ist-offen dd { color: var(--accent-2); }

/* ============================================================================
   Zwei Zähler
   ----------------------------------------------------------------------------
   Farbe bekommt das Symbolfeld nur, wenn etwas offen ist (--t); bei 0 bleibt es grau.
   ============================================================================ */
html[data-design="glas"] .gk-doppel { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-14); min-width: 0; }
html[data-design="glas"] .gk-mini {
    --t: var(--ink-3);
    display: flex; align-items: center; gap: var(--s-12); min-width: 0; min-height: 72px; padding: var(--s-14) var(--s-16);
    border: 1px solid var(--glas-kante); border-radius: 22px; background: var(--glas); box-shadow: var(--shadow);
    color: var(--ink); text-decoration: none;
    transition: transform .25s var(--feder), box-shadow .25s;
}
html[data-design="glas"] .gk-mini.ist-plan.ist-offen { --t: var(--warning); }
html[data-design="glas"] .gk-mini.ist-zeit.ist-offen { --t: var(--accent-b); }
html[data-design="glas"] .gk-mini:hover { color: var(--ink); text-decoration: none; }
html[data-design="glas"] .gk-mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html[data-design="glas"] .gk-mini-ico {
    flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px;
    background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--t);
    transition: transform .25s var(--feder);
}
html[data-design="glas"] .gk-mini-ico svg { width: 20px; height: 20px; }
html[data-design="glas"] .gk-mini-text { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
html[data-design="glas"] .gk-mini-text b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
html[data-design="glas"] .gk-mini-text span { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
@media (hover: hover) {
    html[data-design="glas"] .gk-mini:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-md); }
    html[data-design="glas"] .gk-mini:hover .gk-mini-ico { transform: scale(1.1) rotate(-6deg); }
}

/* ============================================================================
   Projekte als Karten
   ----------------------------------------------------------------------------
   --pk-farbe kommt je Karte aus PHP (dunkel genug für weiße Schrift). Balken und
   Tage mischen sie mit der Schriftfarbe: im Hellen etwas dunkler, im Dunkeln heller.
   ============================================================================ */
html[data-design="glas"] .gp-karten { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
html[data-design="glas"] .gp-karten li { display: flex; min-width: 0; }
@container (min-width: 620px) {
    /* So viele Spalten wie Karten: Ein oder zwei Projekte füllen die Breite. */
    html[data-design="glas"] .gp-karten { grid-template-columns: repeat(var(--gp-n, 3), minmax(0, 1fr)); }
}
html[data-design="glas"] .gp {
    flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--glas-stark);
    color: var(--ink); text-decoration: none;
    transition: transform .25s var(--feder), box-shadow .25s;
}
html[data-design="glas"] .gp:hover { color: var(--ink); text-decoration: none; }
html[data-design="glas"] .gp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html[data-design="glas"] .gp-kopf {
    display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
    padding: var(--s-12) var(--s-14); background: var(--pk-farbe, var(--accent-b)); color: #fff;
}
/* Volles Weiß: Die Projektfarbe ist genau so weit abgedunkelt, dass Weiß darauf 4,5:1 hat
   (d_farbe_fuer_weiss()) — jede Abschwächung läge darunter. Eine Zeile, der Rest wird gekürzt. */
html[data-design="glas"] .gp-zeit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
html[data-design="glas"] .gp-kopf b { font-size: 15px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
html[data-design="glas"] .gp-kopf .hubk-pin { color: inherit; opacity: 0.85; }
html[data-design="glas"] .gp-rumpf { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-12) var(--s-14); }
/* Feste Höhe: Mit großer Zahl („8/8 besetzt") ist die Zeile 26 px hoch, ohne („3 eingeteilt")
   nur 18 — die Tagesreihen der Nachbarkarten stünden sonst nicht auf einer Linie. */
html[data-design="glas"] .gp-stand { display: flex; align-items: flex-end; gap: var(--s-6); height: 28px; font-size: 12px; line-height: 18px; color: var(--ink-3); }
html[data-design="glas"] .gp-stand b { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-design="glas"] .gp-balken { display: block; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
html[data-design="glas"] .gp-balken i { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--pk-farbe, var(--accent-b)) 78%, var(--ink)); }
/* Ohne Bedarfszahl gibt es keinen Anteil und keinen Balken. */
html[data-design="glas"] .gp-balken.ist-ohne { display: none; }
/* Nebeneinander fluchten die Karten: gleich hoher Kopf, und der Platz des Balkens bleibt
   frei. Untereinander (Handy) fällt beides weg. Steht NACH den Grundregeln oben — bei
   gleicher Stärke gewinnt die spätere, sonst wäre der Platzhalter wirkungslos. */
@container (min-width: 620px) {
    html[data-design="glas"] .gp-kopf { min-height: 62px; }
    html[data-design="glas"] .gp-balken.ist-ohne { display: block; visibility: hidden; }
}
/* Die Tage nehmen die Höhe, die in der Reihe übrig ist (bis 68 px) — so bleibt in einer
   Karte kein Loch, wenn die Nachbarkachel höher ist. */
html[data-design="glas"] .gp-tage { flex: 1 1 auto; max-height: 68px; display: grid; grid-template-columns: repeat(var(--gp-tage, 5), minmax(0, 1fr)); gap: var(--s-4); }
html[data-design="glas"] .gp-tag { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: 0; font-size: 10px; font-weight: 600; color: var(--ink-3); }
html[data-design="glas"] .gp-tag i { flex: 1 1 auto; display: grid; place-items: center; width: 100%; min-height: 24px; border-radius: 8px; font-style: normal; font-size: 12px; font-weight: 700; }
html[data-design="glas"] .gp-tag svg { width: 14px; height: 14px; }
html[data-design="glas"] .gp-tag.ist-voll i { background: color-mix(in srgb, var(--pk-farbe, var(--accent-b)) 20%, transparent); color: color-mix(in srgb, var(--pk-farbe, var(--accent-b)) 60%, var(--ink)); }
html[data-design="glas"] .gp-tag.ist-fehlt i { outline: 1.5px dashed var(--accent); outline-offset: -1.5px; color: var(--accent-2); }
html[data-design="glas"] .gp-tag.ist-konflikt i { background: var(--accent-soft); color: var(--accent-2); }
html[data-design="glas"] .gp-tag.ist-leer i { color: var(--ink-4); }
html[data-design="glas"] .gp-tag.ist-ohne i { background: var(--paper-2); color: var(--ink-3); }
html[data-design="glas"] .gp-tag.ist-vorbei { opacity: 0.5; }
html[data-design="glas"] .gp-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6) var(--s-8); }
html[data-design="glas"] .gp .gk-gesicht .pkreis { width: 24px; height: 24px; font-size: 10px; }
html[data-design="glas"] .gp .gk-mehr { min-width: 28px; height: 28px; font-size: 10px; }
/* Etikett: was fehlt (Akzent), was noch raus muss (Warnfarbe), was erledigt ist (grün).
   Die Schrift mischt die Farbe mit der Schriftfarbe — kleine Schrift braucht mehr Kontrast
   als das Farbfeld hergibt (im Hellen dunkler, im Dunkeln heller). */
html[data-design="glas"] .gp-etikett {
    --e: var(--ink-3);
    padding: var(--s-2) var(--s-10); border-radius: 999px;
    background: color-mix(in srgb, var(--e) 16%, transparent); color: color-mix(in srgb, var(--e) 76%, var(--ink));
    font-size: 11px; font-weight: 600; line-height: 1.5;
}
html[data-design="glas"] .gp-etikett.ist-offen { --e: var(--accent-2); }
html[data-design="glas"] .gp-etikett.ist-warn { --e: var(--warning); }
html[data-design="glas"] .gp-etikett.ist-gut { --e: var(--success-2); }
@media (hover: hover) {
    html[data-design="glas"] .gp:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-md); }
}

/* ============================================================================
   Offene Punkte: je Art ein Symbol im Farbfeld der Stufe
   ============================================================================ */
html[data-design="glas"] .gk-offen .hubk-zeile { --e: var(--ink-3); min-height: 52px; padding: var(--s-8) var(--s-4); border-radius: 14px; }
html[data-design="glas"] .gk-offen .hubk-zeile.ist-rot { --e: var(--accent-2); }
html[data-design="glas"] .gk-offen .hubk-zeile.ist-gelb { --e: var(--warning); }
html[data-design="glas"] .gk-offen .hubk-text b { font-size: 13px; font-weight: 600; }
/* Schmale Spalte: Der Satz bekommt zwei Zeilen, die Zeile darunter eine — sonst wüchse
   die Kachel weit über ihre Nachbarin hinaus. Das Ganze steht hinter dem Ziel der Zeile. */
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-offen .hubk-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-verlauf"] .hubk-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-offen .hubk-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk[aria-labelledby="hk-verlauf"] .hubk-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design="glas"] .go-ico {
    flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px;
    background: color-mix(in srgb, var(--e) 16%, transparent); color: var(--e);
    transition: transform .2s var(--feder);
}
html[data-design="glas"] .go-ico svg { width: 17px; height: 17px; }
html[data-design="glas"] .go-pfeil { flex: 0 0 auto; display: inline-flex; color: var(--ink-4); transition: transform .2s var(--feder); }
html[data-design="glas"] .go-pfeil svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (hover: hover) {
    html[data-design="glas"] .gk-offen .hubk-zeile:hover .go-ico { transform: scale(1.1); }
    html[data-design="glas"] .gk-offen .hubk-zeile:hover .go-pfeil { transform: translateX(3px); }
}

/* ============================================================================
   „Kompakt": die Liste der Köpfe aus der Grundvorlage, auf Glas
   ----------------------------------------------------------------------------
   Die Zähler haben keinen Kopf und gehören nicht in die Liste. Sie stehen im
   Markup zwischen zwei Kacheln — die Trennlinie danach setzt deshalb diese Regel.
   ============================================================================ */
html[data-design="glas"] .hub[data-ansicht="kompakt"] .gk-doppel { display: none; }
html[data-design="glas"] .hub[data-ansicht="kompakt"] .gk-doppel + .hubk { border-top: 1px solid var(--line); }
html[data-design="glas"] .hub[data-ansicht="kompakt"] .hub-raster { border-color: var(--glas-kante); background: var(--glas-stark); box-shadow: var(--shadow); }
html[data-design="glas"] .hub[data-ansicht="kompakt"] .hubk { background: transparent; }
html[data-design="glas"] .hub[data-ansicht="kompakt"] .hubk:hover { background: var(--paper-2); }

/* ============================================================================
   Bewegung reduzieren: nichts erscheint, nichts hebt sich, der Ring steht gefüllt da
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hub-raster > * { animation: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held::after { animation: none; }
    html[data-design="glas"] .gr-wert { animation: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk { transition: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk:hover { transform: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk-pfeil { transition: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .hubk:hover .hubk-pfeil { transform: none; }
    html[data-design="glas"] .gh-knopf { transition: none; }
    html[data-design="glas"] .hub[data-ansicht="kacheln"] .gk-held:hover .gh-knopf { transform: none; }
    html[data-design="glas"] .gk-mini { transition: none; }
    html[data-design="glas"] .gk-mini:hover { transform: none; }
    html[data-design="glas"] .gk-mini-ico { transition: none; }
    html[data-design="glas"] .gk-mini:hover .gk-mini-ico { transform: none; }
    html[data-design="glas"] .gp { transition: none; }
    html[data-design="glas"] .gp:hover { transform: none; }
    html[data-design="glas"] .go-ico { transition: none; }
    html[data-design="glas"] .go-pfeil { transition: none; }
    html[data-design="glas"] .gk-offen .hubk-zeile:hover .go-ico { transform: none; }
    html[data-design="glas"] .gk-offen .hubk-zeile:hover .go-pfeil { transform: none; }
}