/* ==========================================================================
glass.css — Liquid-Glass-Schicht fuer das Handbuch (public/dom.html)
--------------------------------------------------------------------------
Uebernommen aus _uebergabe/design_handoff_handbuch_liquid_glass/
code/glass-styles.js — inhaltlich unveraendert, nur aus dem JS-String
in eine echte CSS-Datei geholt. Grund: CSS als JavaScript-String hat uns
im August zweimal das Handbuch zerlegt (Backtick im Kommentar,
Anfuehrungszeichen im Selektor). Als .css kann diese Fehlerklasse nicht
mehr auftreten. Das README erlaubt diesen Weg ausdruecklich.
Enthaelt NUR Neues: Klassen mit Praefix .g- und Variablen mit --g-.
Bestehende Klassen (.task .kpi .cl .dnav) und Variablen (--cd --bd …)
werden nicht angefasst; alt und neu koennen nebeneinander laufen.
Material nachgezogen am 13.09.2026 (Uebergabe, zweite Fassung): die
Flaechen sind duenner (.41/.46/.60 statt .55/.62/.74), blur 28/20/34,
saturate 205 %, und JEDE Glasflaeche traegt eine Haarlinien-Kante
0 0 0 .5px rgba(22,45,66,.14) plus den Lichtsaum oben. Ohne die Kante
franst eine duenne Flaeche aus; das README verbietet zwar echte Raender, die
Kante ist keiner, sondern der erste Schatten.
Die Farbkreise sind die andere Haelfte: ohne sie ist eine Glasflaeche
weiss auf weiss und der Effekt faellt aus. Sie stehen seit dem
13.09.2026 am (dom.html, oben im Stilblock) und gelten damit fuer
ALLE 58 Ansichten, nicht nur die sechs mit .g-app. Kraeftiger als
vorher — aber NICHT auf den Werten der Uebergabe: nachgerechnet gegen
die duennste Glasschicht ist bei Blau bei .37 Schluss. Mit dem
Uebergabewert .50 faellt --g-blau auf 4,30 und --g-gruen-ink auf 4,14,
beide unter 4,5. Blau steht deshalb auf .36.
Gerechnet gegen die unguenstigste Flaeche (.40 ueber Blaukreis .36 =
rgb(194,221,250)): --g-ink 12,07 · --g-ink-2 5,47 · --g-ink-3 4,62 ·
--g-blau 4,69 · --g-gruen-ink 4,52 · --g-orange-ink 5,36 ·
--g-rot-ink 5,09 — alle ueber Ziel. Der Pruefstand rechnet es nach, und
zwar mit den Werten AUS DIESEN DATEIEN, nicht mit abgeschriebenen.
========================================================================== */
:root { --g-bg:#e9edf2;--g-ink:#1d1d1f;--g-ink-2:#4f545b;--g-ink-3:#5a5f66;--g-ink-4:rgba(29,29,31,.28);--g-line:rgba(29,29,31,.06);--g-blau:#005bbb;--g-blau-flaeche:linear-gradient(145deg,#3d9bff,#0057c8);--g-held:linear-gradient(145deg,#0057c8,#00347a);--g-gruen:#34c759;--g-gruen-ink:#16582a;--g-gruen-fl:rgba(52,199,89,.18);--g-orange:#ff9f0a;--g-orange-ink:#6b4104;--g-orange-fl:rgba(255,159,10,.18);--g-rot:#ff453a;--g-rot-ink:#842119;--g-rot-fl:rgba(255,69,58,.16);--g-neutral:rgba(29,29,31,.14);--g-matrix-fl:#f1f4f8;--g-feder:cubic-bezier(.34,1.56,.64,1); }
.g-app,.g-app *,.g-app *::before,.g-app *::after { box-sizing:border-box }
.g-app { position:relative;overflow:hidden;background:transparent;color:var(--g-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px }
.g-app { min-height:100vh }
.g-blob { position:fixed;border-radius:50%;pointer-events:none;filter:blur(46px);z-index:0 }
.g-blob--blau { background:radial-gradient(circle,rgba(10,132,255,.36),transparent 66%) }
.g-blob--tuerkis { background:radial-gradient(circle,rgba(92,200,220,.47),transparent 66%) }
.g-blob--pfirsich { background:radial-gradient(circle,rgba(255,176,120,.30),transparent 66%) }
.g-blob--violett { background:radial-gradient(circle,rgba(175,140,240,.43),transparent 66%) }
.g-blob--gruen { background:radial-gradient(circle,rgba(52,199,89,.43),transparent 66%) }
.g-blob--orange { background:radial-gradient(circle,rgba(255,159,10,.38),transparent 66%) }
.g-glas1 { background:rgba(255,255,255,.41);-webkit-backdrop-filter:blur(28px) saturate(205%);backdrop-filter:blur(28px) saturate(205%);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.85) inset,0 14px 36px rgba(20,40,60,.12) }
.g-glas2 { background:rgba(255,255,255,.46);-webkit-backdrop-filter:blur(20px) saturate(205%);backdrop-filter:blur(20px) saturate(205%);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.9) inset,0 8px 22px rgba(20,40,60,.09) }
.g-glas3 { background:rgba(255,255,255,.60);-webkit-backdrop-filter:blur(34px) saturate(205%);backdrop-filter:blur(34px) saturate(205%);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.98) inset,0 32px 70px rgba(10,22,36,.34) }
.g-glas-matt { background:rgba(255,255,255,.40);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.8) inset }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.g-glas1,.g-glas2,.g-glas3,.g-glas-matt { background:rgba(255,255,255,.92) }
.g-blob { display:none }
}
.g-t-large { font-size:34px;font-weight:700;letter-spacing:-.024em;line-height:1.1;margin:0 }
.g-t1 { font-size:28px;font-weight:700;letter-spacing:-.022em;line-height:1.12;margin:0 }
.g-t3 { font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 }
.g-body { font-size:17px;line-height:1.5;margin:0 }
.g-body-6 { font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0 }
.g-fuss { font-size:13px;line-height:1.45;color:var(--g-ink-2);margin:0 }
.g-caption { font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--g-ink-3);margin:0 }
.g-zahl { font-variant-numeric:tabular-nums }
.g-karte { border-radius:24px;padding:17px 19px;display:flex;align-items:center;gap:16px }
.g-karte--still { background:rgba(255,255,255,.40);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.8) inset }
.g-block { border-radius:26px;padding:22px 24px }
.g-flaeche { border-radius:30px;padding:24px 26px }
.g-wachsen { flex:1;min-width:0 }
.g-marke { width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto }
.g-marke--kachel { border-radius:14px }
.g-marke--gruen { background:var(--g-gruen-fl);color:var(--g-gruen-ink) }
.g-marke--orange { background:var(--g-orange-fl);color:var(--g-orange-ink) }
.g-marke--rot { background:var(--g-rot-fl);color:var(--g-rot-ink) }
.g-marke--blau { background:rgba(10,132,255,.16);color:var(--g-blau) }
/* Die unbunte Marke: eine abgesagte Reservierung. Kein Zustand, der ruft. */
.g-marke--still { background:rgba(29,29,31,.07);color:#44484d }
.g-pille { display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-size:15px;font-weight:600;border:0;cursor:pointer;color:var(--g-ink);font-family:inherit;transition:transform .5s var(--g-feder) }
.g-pille:active { transform:scale(.95) }
.g-chip { display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600 }
.g-chip--gruen { background:var(--g-gruen-fl);color:var(--g-gruen-ink) }
.g-chip--orange { background:var(--g-orange-fl);color:var(--g-orange-ink) }
.g-chip--rot { background:var(--g-rot-fl);color:var(--g-rot-ink) }
/* Der unbunte Chip: "Optional", "Gesperrt". Er sagt einen Zustand, aber
keinen, der ruft. Farbe heisst in diesem Handbuch "hier liegt etwas an" —
Freiwilliges und Gesperrtes liegt gerade nicht an. */
.g-chip--still { background:rgba(29,29,31,.07);color:#44484d }
.g-knopf { display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:16px 26px;border-radius:26px;font-size:17px;font-weight:600;font-family:inherit;border:0;cursor:pointer;color:#fff;background:var(--g-blau-flaeche);box-shadow:0 14px 32px rgba(0,87,200,.32),0 1px 0 rgba(255,255,255,.4) inset;transition:transform .5s var(--g-feder) }
.g-knopf:active { transform:scale(.96) }
.g-knopf--gruen { background:linear-gradient(145deg,#3ddc6b,#209044);box-shadow:0 14px 32px rgba(32,144,68,.34),0 1px 0 rgba(255,255,255,.4) inset }
.g-knopf--glas { color:var(--g-ink-2);background:rgba(255,255,255,.72);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 6px 16px rgba(20,40,60,.08) }
.g-knopf--warn { color:var(--g-orange-ink);background:rgba(255,255,255,.72);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 6px 16px rgba(20,40,60,.08) }
.g-knopf[disabled] { color:#6b7077;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.8) inset;cursor:default }
.g-knopf[disabled]:active { transform:none }
.g-knopf--gross { min-height:60px;font-size:17px;padding:0 28px;flex:0 0 auto }
/* Ein kleiner Knopf. Vier davon stehen unter einer Reservierung; in der
grossen Form waere die Zeile hoeher als ihr Inhalt. */
.g-knopf--klein { padding:9px 15px;border-radius:999px;font-size:13.5px;gap:7px;box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.9) inset }
/* „Absagen" und „Nicht erschienen": nicht rot, aber auch nicht gleich laut
wie „Bestaetigen". Rot waere eine Warnung — es ist aber eine normale
Handlung, nur eine, die etwas wegnimmt. */
.g-knopf--zurueckhaltend { color:var(--g-ink-3);background:rgba(255,255,255,.42) }
.g-balken { height:8px;border-radius:999px;background:rgba(29,29,31,.09);overflow:hidden }
.g-balken > i { display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#34c759,#248a3d);transition:width .6s cubic-bezier(.34,1.4,.64,1) }
.g-balken--auf-farbe { background:rgba(255,255,255,.28) }
.g-balken--auf-farbe > i { background:#fff }
.g-punkt { width:13px;height:13px;border-radius:999px;display:inline-block }
.g-punkt--gruen { background:var(--g-gruen);box-shadow:0 2px 6px rgba(20,40,60,.18) }
.g-punkt--orange { background:var(--g-orange);box-shadow:0 2px 6px rgba(20,40,60,.18) }
.g-punkt--rot { background:var(--g-rot);box-shadow:0 2px 6px rgba(20,40,60,.18) }
.g-punkt--neutral { background:var(--g-neutral) }
.g-avatar { width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;background:rgba(29,29,31,.07);color:#44484e }
.g-avatar--blau { background:linear-gradient(150deg,#9ad1ff,#4a8fe0);color:#fff }
/* ==========================================================================
Die Heldflaeche — und warum sie blau bleibt.
--------------------------------------------------------------------------
Alles, was hier steht, ist gerechnet, nicht gewaehlt. Weisser Text auf
einer farbigen Flaeche ist der Fall, in dem eine huebsche Farbe am
schnellsten unlesbar wird, und Ueberlagerungen (Glanz, Lichtfleck)
schlagen direkt auf den Kontrast durch.
Gemessen am 13.09.2026, weisser Text gegen die HELLSTE Stelle:
Amber #e89a1c -> #9c5f04 2,32 blank, 2,09 mit Glanz verworfen
#0a84ff (bis heute hier) 3,65 blank, 2,54 mit Glanz .28
#0057c8 -> #00347a 6,57 blank, 5,17 mit Glanz .12 gebaut
Die bis heute gebaute Flaeche war also selbst OHNE Glanz unter 4,5:1 —
aufgefallen erst, als die Regel aus der Uebergabe („Warnzustaende in den
Chip, nicht in die Flaeche") an einer neuen Ansicht nachgerechnet wurde.
Drei Regeln daraus, alle drei vom Pruefstand bewacht:
1. Glanz hoechstens .12.
2. Der Lichtfleck oben rechts hoechstens .07 — bei .28 faellt die
Stelle unter ihm auf 3,10:1, und ein langer Titel laeuft hinein.
3. KEINE opacity auf Text ueber farbigen Flaechen. Opazitaet frisst den
Kontrast unmittelbar; wer Text zuruecknehmen will, nimmt eine
hellere Textfarbe mit gerechnetem Wert.
========================================================================== */
.g-held { position:relative;overflow:hidden;border-radius:34px;padding:26px 28px;color:#fff;background:var(--g-held);box-shadow:0 18px 44px rgba(0,52,122,.34) }
.g-held::before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 48%) }
.g-held::after { content:"";position:absolute;top:-50px;right:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%) }
.g-held > * { position:relative }
.g-seite { position:relative;display:flex;min-height:100vh }
.g-nav { flex:0 0 236px;margin:16px 0 16px 16px;border-radius:30px;padding:20px 14px;display:flex;flex-direction:column;gap:3px }
.g-nav a { display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:16px;font-size:15px;color:#4f545b;text-decoration:none }
.g-nav a:hover { color:var(--g-ink) }
.g-nav a.is-aktiv { font-weight:600;color:var(--g-blau);background:rgba(255,255,255,.9);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 4px 12px rgba(20,40,60,.1) }
.g-nav .g-nav-zahl { margin-left:auto;font-size:13px;color:#5a5f66;font-variant-numeric:tabular-nums }
.g-inhalt { position:relative;flex:1;min-width:0;padding:30px 32px;display:flex;flex-direction:column }
.g-reiter { position:relative;display:flex;align-items:center;gap:6px;margin:16px 18px 0;padding:8px 10px;border-radius:24px }
.g-reiter a { padding:10px 18px;border-radius:999px;font-size:15px;text-decoration:none;color:var(--g-ink-2) }
.g-reiter a.is-aktiv { font-weight:600;color:var(--g-blau);background:rgba(255,255,255,.9);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 4px 12px rgba(20,40,60,.1) }
.g-rund { width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:transparent;color:#4f545b;transition:transform .5s var(--g-feder) }
.g-rund:active { transform:scale(.92) }
.g-liste { flex:0 0 262px;display:flex;flex-direction:column;gap:7px;padding:16px 14px;border-radius:30px;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.85) inset,0 12px 30px rgba(20,40,60,.1);overflow:auto }
.g-liste-zeile { display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border-radius:18px;border:0;width:100%;text-align:left;font-family:inherit;cursor:pointer;background:rgba(255,255,255,.4);transition:transform .45s var(--g-feder) }
.g-liste-zeile:active { transform:scale(.98) }
.g-liste-zeile.is-aktiv { background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.98) inset,0 8px 20px rgba(20,40,60,.12) }
.g-haken { width:22px;height:22px;border-radius:999px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1px;background:rgba(29,29,31,.08);box-shadow:0 1px 0 rgba(255,255,255,.8) inset }
.g-haken svg { opacity:0;width:13px;height:13px;display:block }
.is-erledigt .g-haken { background:var(--g-gruen);box-shadow:0 2px 6px rgba(52,199,89,.4) }
.is-erledigt .g-haken svg { opacity:1 }
.g-liste-text { font-size:14px;line-height:1.4;color:rgba(29,29,31,.78) }
.is-erledigt .g-liste-text { color:var(--g-ink-3);text-decoration:line-through }
.g-matrix { border-radius:30px;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--g-matrix-fl);-webkit-backdrop-filter:none;backdrop-filter:none }
.g-matrix-rolle { overflow-x:auto }
/* min-content statt 1fr auf den Themenspalten: Bei 14 Themen wuerde 1fr sie
auf die Rahmenbreite quetschen statt zu scrollen — und 44px waeren
unterschritten, obwohl genau das ausgeschlossen wurde. */
.g-matrix-kopf,.g-matrix-zeile { display:grid;align-items:center;grid-template-columns:240px repeat(var(--g-spalten,7),minmax(48px,1fr)) 132px;min-width:max-content }
.g-matrix-kopf { padding:20px 0 12px;align-items:end }
.g-matrix-zeile { padding:15px 0;border-top:1px solid var(--g-line) }
.g-matrix-zelle { display:flex;justify-content:center }
.g-matrix-fuss { padding:15px 22px;display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--g-ink-2);border-top:1px solid var(--g-line) }
.g-overlay { position:fixed;inset:0;z-index:60;display:flex;justify-content:center;padding-top:78px;background:rgba(16,26,38,.3) }
/* Schrift und Textfarbe kommen sonst aus dem Bestand — .g-app gibt sie
seinen Kindern, der Overlay haengt nicht darunter (siehe unten beim
Dunkelmodus). Ohne diese Zeile traegt die Palette die Schrift der
alten App, und .g-suchfeld erbt sie mit font:inherit weiter. */
.g-overlay { color:var(--g-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px }
/* Der sichtbare Fokusrahmen haengt an .g-app — aus demselben Grund hier
noch einmal. Wer mit der Tastatur blaettert, muss sehen, wo er steht. */
.g-overlay :focus-visible { outline:3px solid var(--g-blau);outline-offset:3px;border-radius:12px }
.g-blatt { width:672px;max-width:calc(100% - 32px);max-height:600px;border-radius:34px;display:flex;flex-direction:column;overflow:hidden;animation:gRise .75s cubic-bezier(.34,1.5,.64,1) both }
/* min-width:0 ist tragend, nicht Kosmetik: Ein hat min-width:auto
und weigert sich damit, unter seine Eigenbreite zu schrumpfen. Auf dem
Telefon (390px) schob es die esc-Marke aus dem Blatt heraus — gemessen
am 12.09.2026, nicht vermutet. */
.g-suchfeld { flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:22px;letter-spacing:-.015em;color:var(--g-ink) }
/* Die Zeile, die jede Liste benutzt.
--------------------------------------------------------------------------
Hiess bis zum 12.09.2026 .g-treffer und gehoerte der Suche. Beim Umbau des
Wissens zeigte sich: dieselbe Form — Marke links, Titel und Herkunft in der
Mitte, Pfeil rechts. Eine zweite Klasse mit denselben Werten waere der
Anfang davon gewesen, dass beide auseinanderlaufen und jemand die eine fuer
die richtige haelt. Dieselbe Lehre wie bei escA/onbAttr am selben Tag. */
.g-zeile { display:flex;gap:15px;align-items:center;padding:12px;border-radius:20px;cursor:pointer;text-decoration:none;color:inherit }
.g-zeile:hover { background:rgba(255,255,255,.72) }
/* Die mit den Pfeiltasten gewaehlte Zeile. Der Fuss der Suche
verspricht "pfeil-hoch/runter blaettern" — ohne sichtbare Marke
waere die Aufschrift wahr und trotzdem nutzlos, weil niemand sieht,
WAS Enter oeffnen wuerde. Gleiche Marke wie in der Navigation. */
.g-zeile.is-aktiv { background:rgba(255,255,255,.9);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 4px 12px rgba(20,40,60,.1) }
/* Gruppenueberschrift in einer Liste.
KEIN Knopf: Im Bestand traegt grpKopf ein data-grp, aber es gibt nirgends
einen Klick-Handler dafuer — die Gruppen klappen nur programmatisch zu,
wenn ein Filter greift. Ein cursor:pointer waere hier also eine Aufschrift
ohne Wirkung, dieselbe Fehlerklasse wie der Scrollhinweis, der auf breitem
Schirm log. Am 12.09.2026 nachgesehen, nicht angenommen. */
.g-gruppe { display:flex;align-items:center;gap:10px;padding:18px 12px 8px }
/* Warum diese vier Bauteile einen EIGENEN Wert tragen statt des Tokens
---------------------------------------------------------------------
.g-gruppe-zahl, .g-tastenmarke, .g-avatar und .g-regel-nr sitzen in
einer getoenten Pille. Eine Farbe, die auf blankem Glas reicht, reicht
dort nicht mehr: die Fuellung hellt den Untergrund noch einmal auf
(siehe den Abschnitt "dritte Schicht" in glas-grundlage-test).
An der WURZEL zu ziehen waere hier falsch. Nachgezaehlt am 13.09.2026:
--g-ink-3 steht an 14 Stellen frei (jede Caption, jede Metazeile) und
nur an zwei auf einer Fuellung; --g-blau an neun frei und an drei auf
einer Fuellung. Das ganze Handbuch dunkler zu machen, um vier Pillen
zu reparieren, waere die teurere Loesung.
Bei den drei Statusfarben ist es umgekehrt — --g-gruen-ink,
--g-rot-ink und --g-orange-ink werden AUSSCHLIESSLICH auf ihrer
eigenen Fuellung benutzt. Die sind deshalb an der Wurzel korrigiert.
Gerechnet: Zaehler 4,68 · Tastenmarke 4,60 · Avatar 4,59 ·
Regelnummer 4,56 hell / 4,75 dunkel. */
.g-gruppe-zahl { margin-left:auto;font-size:12.5px;font-weight:600;color:#44484d;background:rgba(29,29,31,.06);padding:3px 10px;border-radius:999px }
/* Die Filterleiste. .g-chip gab es, aber ohne Auswahlzustand — die Chips im
Bestand (.rchip) hatten ihn. Ohne ihn saehe man nicht, wonach gefiltert
ist: eine Leiste, die etwas tut, aber nicht zeigt, was. */
.g-filter { display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 10px }
.g-filter-chip { display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;font-family:inherit;border:0;cursor:pointer;color:var(--g-ink-2);background:rgba(255,255,255,.5) }
.g-filter-chip.is-aktiv { color:var(--g-blau);background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 4px 12px rgba(20,40,60,.1) }
/* Suchfeld einer Liste — nicht .g-suchfeld, das sitzt in der Befehlspalette
und ist dort 22px gross. */
.g-listensuche { display:flex;align-items:center;gap:11px;margin:0 12px 8px;padding:13px 17px;border-radius:999px }
.g-listensuche input { flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--g-ink) }
/* Der Lesetext eines Wissensartikels.
--------------------------------------------------------------------------
Zwei Formen, weil zwei Arten von Text: Kurze Saetze sind in Wahrheit
Regeln — die liest man als nummerierte Liste. Laengerer Text bleibt
Fliesstext. Die Unterscheidung stand schon im Bestand (Grenze 220 Zeichen)
und wird hier nur anders gezeichnet, nicht neu entschieden. */
.g-lese { max-width:64ch }
.g-lese p { margin:0 0 14px;font-size:17px;line-height:1.62;color:var(--g-ink-2) }
.g-lese p:first-child { font-size:19px;line-height:1.55;color:var(--g-ink) }
/* Vorspann und Nachsatz eines Hilfeartikels. Der Vorspann liest sich wie der
erste Absatz einer Lesespalte, steht aber ueber den nummerierten Schritten
und gehoert deshalb nicht in .g-lese. */
.g-artikel-lead { font-size:19px;line-height:1.55;color:var(--g-ink);margin:0 0 24px;max-width:64ch;text-wrap:pretty }
.g-artikel-hinweis { display:flex;gap:15px;align-items:flex-start;padding:17px 19px;border-radius:22px;margin-top:28px;max-width:64ch }
/* .g-regel und nicht .g-punkt: .g-punkt ist der Statuspunkt der Matrix.
Zwei Bedeutungen unter einem Namen waeren der Anfang davon, dass jemand
die falsche Regel trifft. */
.g-regel { display:flex;gap:15px;align-items:flex-start;padding:14px 0 }
.g-regel + .g-regel { border-top:1px solid var(--g-line) }
.g-regel-nr { flex:0 0 auto;width:29px;height:29px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;background:rgba(10,132,255,.16);color:#004791 }
.g-regel-text { font-size:16.5px;line-height:1.5;color:var(--g-ink);margin:2px 0 0 }
.g-tastenmarke { font-size:12px;font-weight:600;color:#44484d;padding:5px 10px;border-radius:9px;background:rgba(29,29,31,.07) }
/* Die esc-Marke ist ein KNOPF, nicht nur eine Aufschrift.
--------------------------------------------------------------------
Der Entwurf kannte nur Escape als Ausweg. Auf einem iPad ohne Tastatur
war die Suche damit eine Sackgasse: Der Overlay liegt ueber allem, die
Navigation darunter ist nicht erreichbar, und wer nichts Passendes
findet, kommt nicht mehr heraus. Dieselbe Lehre wie bei der PDF-Huelle
('drei Wege hinaus statt keinem'): Taste, Knopf, Klick auf den Rand.
44px ist Apples Richtwert fuer eine Trefferflaeche. */
.g-schliessen { flex:0 0 auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font-family:inherit }
/* Die Fussleiste der Suche stand als Inline-Stil in der Ansicht, mit
background:rgba(255,255,255,.45) fest verdrahtet. Im Dunkelmodus wurde
daraus ein hellgrauer Balken, auf dem --g-ink-3 (#98a3ac) stand: die
Tastenhinweise waren kaum zu lesen. Der Kontrasttest konnte es nicht
sehen, weil er Regeln liest und keine Inline-Stile — also wird daraus
eine Regel. Das ist auch die Hausregel: Glas-Stil liegt in glass.css. */
.g-blatt-fuss { margin-top:auto;padding:14px 24px;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--g-ink-2);background:rgba(255,255,255,.45) }
.g-blatt-fuss .g-fuss-arten { margin-left:auto }
/* Der Messwertkasten des Merkzettels.
--------------------------------------------------------------------
Stand als Inline-Stil in viewChecklisteGlas, mit background
rgba(255,255,255,.7) fest verdrahtet. Im Dunkelmodus wurde daraus ein
fast weisser Kasten — mit --g-ink-2 (#b3bcc4) als Beschriftung und
--g-ink (#eef3f6) als Zahl darauf. Gemessen am 12.09.2026: 1,02 bzw.
1,3 zu 1. Die Sollwerte der Kuehlung waren damit im Dunkeln nicht
lesbar, und das ist der eine Wert, wegen dem der Schritt existiert.
Gefunden beim Umbau der Suche — dieselbe Ursache, gleiche Loesung:
raus aus dem Inline-Stil, damit der Kontrasttest es sehen kann. */
.g-messkasten { margin-top:24px;display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:24px;max-width:430px;background:rgba(255,255,255,.7);box-shadow:0 0 0 .5px rgba(22,45,66,.14),0 1px 0 rgba(255,255,255,.95) inset,0 6px 18px rgba(20,40,60,.08) }
/* Auf dem Telefon nahm der Fuss drei Zeilen und damit zwei Treffer weg —
fuer Tastenhinweise, die dort niemand ausloesen kann. Was bleibt, ist
die Aufzaehlung dessen, worin gesucht wird. */
@media (max-width:560px) {
.g-blatt-fuss .g-fuss-tasten { display:none }
.g-blatt-fuss .g-fuss-arten { margin-left:0 }
}
.g-status { display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:999px }
.g-status-punkt { width:9px;height:9px;border-radius:999px;animation:gPulse 2.2s ease-in-out infinite }
@keyframes gRise {
from { opacity:0;transform:translateY(18px) scale(.985) }
to { opacity:1;transform:none }
}
@keyframes gPulse {
0%,100% { opacity:.5;transform:scale(1) }
50% { opacity:.95;transform:scale(1.5) }
}
.g-rise { animation:gRise .75s cubic-bezier(.34,1.5,.64,1) both }
@media (prefers-reduced-motion:reduce) {
.g-rise,.g-status-punkt { animation:none }
.g-knopf,.g-pille,.g-rund,.g-liste-zeile,.g-balken > i { transition:opacity .15s linear }
.g-knopf:active,.g-pille:active,.g-rund:active,.g-liste-zeile:active { transform:none;opacity:.7 }
}
.g-app :focus-visible { outline:3px solid var(--g-blau);outline-offset:3px;border-radius:12px }
/* ==========================================================================
Start fuer die Leitung — die neunte Ansicht (13.09.2026).
--------------------------------------------------------------------------
Die Mitarbeiter-Startseite zeigt eine Person, ihre Themen, einen Auftrag.
Die Leitung sieht das Team. Diese Vorlage fehlte in den ersten Uebergaben,
und die Startseite der Leitung war deshalb aus Bestandsteilen gebaut:
eine weisse Karte in einer weissen Karte in einer Sektion mit doppelter
Ueberschrift. Vier Unterschiede raeumen das auf — sie stehen einzeln in
viewStartLeitungGlas beschrieben.
Hier nur das Material. Nichts davon als Inline-Stil: der Kontrastpruefer
liest Regeln, keine style-Attribute. Genau dort sassen im August beide
Dunkelmodus-Fehler.
========================================================================== */
.g-kopf { display:flex;align-items:flex-start;gap:14px }
.g-kopf-titel { margin-top:5px }
/* Der Rollenwechsler hat echte Funktion und gehoert nach oben zu Suche und
Mond — nicht als blauer Knopf mitten in den Inhalt. */
.g-kopfpille { display:flex;align-items:center;gap:9px;padding:8px 9px 8px 15px;border-radius:999px;flex:0 0 auto }
.g-kopfpille button { border:0;background:none;font:inherit;cursor:pointer }
.g-rollenwahl { font-size:15px;font-weight:600;color:var(--g-ink);display:inline-flex;align-items:center;gap:7px }
.g-kopfpille .g-strich { width:1px;height:20px;background:rgba(22,45,66,.14);flex:0 0 auto }
.g-kopfpille .g-rund { width:30px;height:30px }
.g-held-kopf { display:flex;align-items:center;gap:10px;flex-wrap:wrap }
.g-held .g-caption { color:#fff }
/* Der Warnzustand steckt im Chip, nicht in der Flaeche. Weisse Pille, Text
im dunklen Orange — 7,03:1, gerechnet. */
.g-held-chip { padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.96);color:#7a4a05;font-size:12px;font-weight:700 }
.g-held-satz { margin-top:5px;max-width:52ch }
.g-held-fuss { display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap }
.g-held-knopf { padding:13px 22px;border-radius:999px;background:rgba(255,255,255,.96);color:#00458f;box-shadow:0 8px 20px rgba(0,32,80,.24) }
/* 15px statt einer Opazitaet: Opazitaet frisst den Kontrast. */
.g-held-dauer { font-size:15px;color:#fff }
.g-abschnitt { display:flex;align-items:baseline;gap:10px;margin:22px 4px 10px }
.g-abschnitt a { margin-left:auto;font-size:15px }
.g-teamliste { display:flex;flex-direction:column;gap:8px }
.g-teamliste .g-karte { border-radius:20px;padding:13px 17px;align-items:center;text-decoration:none;color:inherit }
.g-teamliste .g-balken { height:5px;margin-top:7px;display:block }
/* Kennzahlen: eine Reihe Glaszeilen. KEINE Deko-Symbole in den Ecken — ein
Symbol, das nichts unterscheidet, ist Farbe ohne Aussage. */
/* Kein margin-top:auto. Es hat die Kennzahlen an den unteren Rand
gedrueckt und bei 1440 x 980 gemessen eine Luecke von 130 px gelassen —
eine leere Flaeche mitten in der Seite sieht aus wie ein Ladefehler,
dieselbe Sorte Fehler wie die schwebende Leiste. Die Kennzahlen stehen
jetzt im normalen Rhythmus der Abschnitte hinter der Teamliste. */
.g-kennzahlreihe { display:flex;gap:9px;margin-top:22px }
.g-kennzahl { flex:1;min-width:0;border-radius:20px;padding:14px 16px }
.g-kennzahl b { display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums }
.g-kennzahl span { display:block;margin-top:5px }
/* Die Zusatzzeile der Kachel. Enger an ihre Beschriftung gesetzt als diese
an die Zahl — sie erlaeutert die Beschriftung, nicht die Zahl. */
.g-kennzahl-unten { margin-top:2px;color:var(--g-ink-3) }
@media (max-width:999px) {
/* Schmal: Kennzahlen als 2 x 2, Rollenwechsler als eigene Zeile. */
.g-kennzahlreihe { flex-wrap:wrap }
.g-kennzahl { flex:1 1 calc(50% - 5px) }
.g-kopf { flex-direction:column;align-items:stretch;gap:10px }
.g-kopfpille { align-self:flex-start }
}
[data-theme="dark"] .g-kopfpille .g-strich { background:rgba(255,255,255,.16) }
[data-theme="dark"] .g-rollenwahl { color:var(--g-ink) }
/* ==========================================================================
Wissen — die achte Ansicht (13.09.2026).
--------------------------------------------------------------------------
Drei Dinge, die diese Ansicht von den bisherigen Listen unterscheidet:
1. Der Kopf und die Filter bleiben stehen, die LISTE scrollt. Auf einem
iPad mit 768 px Hoehe war die Filterleiste nach zwei Zeilen aus dem
Bild. Der Innenabstand unten an der Liste sorgt dafuer, dass die letzte
Karte nicht halb abgeschnitten am Rand klebt.
Nur ab 1000 px: darunter scrollt die Seite, und das ist dort richtig
— ein innerer Roller neben dem Seitenroller ist auf dem Telefon
genau der Fehler, den man nicht mehr los wird.
Die 44 px sind der senkrechte Innenabstand von .domapp (16 oben,
28 unten, gesetzt im 700er Block von dom.html) — keine geratene Zahl.
2. Die Marke traegt den Ton der Gruppe, drei im Wechsel. Gerechnet gegen
den unguenstigsten Grund (Kachel auf Glas .46 auf Farbkreis):
Blau 3,85 · Gruen 4,18 · Violett 5,00 — Ziel fuer Grafik ist 3,0.
Dunkel: 4,63 · 4,20 · 4,13.
3. „Alle Bereiche" ist ein Textknopf, kein Chip. Er waehlt nichts aus,
er zeigt mehr — ein Chip daneben saehe aus wie ein weiterer Filter.
========================================================================== */
.g-wissen-kopf, .g-sammlung-kopf { display:flex;align-items:flex-end;gap:16px }
/* Am Telefon bricht der Untertitel auf drei Zeilen um, und die Zahl
stand dann auf halber Hoehe daneben, als gehoerte sie zur mittleren
Zeile. Untereinander ist sie eindeutig. Gemessen bei 430 px. */
@media (max-width:700px) {
.g-wissen-kopf, .g-sammlung-kopf { flex-direction:column;align-items:flex-start;gap:6px }
}
.g-wissen-unter, .g-sammlung-unter { color:var(--g-ink-2);margin-top:5px;max-width:62ch;text-wrap:pretty }
.g-wissen-zahl, .g-sammlung-zahl { white-space:nowrap;color:var(--g-ink-3) }
.g-wissen .g-listensuche, .g-sammlung .g-listensuche { margin:20px 0 0 }
.g-wissen .g-filter { padding:16px 0 0 }
.g-wissen .g-filter--alle { padding:10px 0 0 }
.g-wissen .g-gruppe, .g-sammlung .g-gruppe { padding:20px 4px 8px }
.g-wissen .g-zeile, .g-sammlung .g-zeile { border-radius:20px;padding:14px 17px }
/* Luft zwischen den Karten. Ohne sie kleben sie aneinander und sehen
aus wie eine Tabelle mit unsichtbaren Linien. */
.g-wissen .g-zeile + .g-zeile, .g-sammlung .g-zeile + .g-zeile { margin-top:8px }
.g-mehr-bereiche { align-self:center;font:inherit;font-size:13.5px;font-weight:600;border:0;background:none;cursor:pointer;color:var(--g-ink-3);padding:9px 8px;border-radius:999px }
.g-mehr-bereiche:hover { color:var(--g-blau) }
.g-wissen-liste, .g-sammlung-liste { margin-top:14px;padding-bottom:22px }
@media (min-width:1000px) {
/* Die Kette muss durchgehend sein: feste Hoehe oben, dann in jeder Stufe
flex:1 und min-height:0. Faellt EINE Stufe aus, waechst die Liste
stattdessen nach unten aus dem Bild — und der Roller erscheint gar
nicht. min-height:0 ist dabei das Entscheidende: ein Flex-Kind ist von
sich aus mindestens so hoch wie sein Inhalt. */
.g-app.g-wissen, .g-app.g-sammlung { height:calc(100dvh - 44px);min-height:0;display:flex;flex-direction:column }
.g-wissen .g-wissen-inhalt, .g-sammlung .g-sammlung-inhalt { flex:1;min-height:0 }
.g-wissen .g-wissen-liste, .g-sammlung .g-sammlung-liste,
.g-wissen .g-rolle, .g-sammlung .g-rolle { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable }
}
/* .g-rolle ist dasselbe Glied der Kette wie .g-sammlung-liste, nur ohne
dessen Listen-Abstaende.
--------------------------------------------------------------------------
Anlass, 14.09.2026. John: "telefon und auswertung scrollen nicht." Beide
tragen .g-sammlung und bekamen damit oben die feste Hoehe — aber sie
bauten keine .g-sammlung-liste, also fehlte das UNTERSTE Glied. Ergebnis
genau das, was der Kommentar darueber ankuendigt: Der Inhalt waechst aus
dem Bild, und der Roller erscheint gar nicht. .g-app hat overflow:hidden,
also war alles unterhalb der Faltkante schlicht weg.
Betroffen waren DREI Ansichten, nicht zwei: Auswertung, Telefon und
Auftraege. Bei den Auftraegen war es nur noch niemandem aufgefallen.
Warum eine eigene Klasse und nicht .g-sammlung-liste: Diese drei Seiten
sind keine Listen. .g-sammlung-liste bringt margin-top und padding-bottom
einer Liste mit; eine Auswertung mit Diagrammen will die nicht. */
.g-rolle { min-width:0 }
/* In einem .g-rolle ist eine Liste eine Liste — kein zweiter Roller.
--------------------------------------------------------------------------
15.09.2026, beim Beheben von „Leitung scrollt nicht" gemessen: Die Regel
oben macht JEDE .g-sammlung-liste zum Roller, egal wie tief sie haengt.
Bei „Meins" traf das eine 22 px hohe Liste mitten auf der Seite. Sie bekam
flex:1 und overflow:auto, rollte also als Einzige — und der Rest der Seite
blieb stehen. Das Rad tat etwas, nur nicht das, was der Benutzer erwartete.
Sobald ein .g-rolle die Seite traegt, ist es das unterste Glied der Kette.
Alles darin ist Inhalt. */
@media (min-width:1000px) {
.g-wissen .g-rolle .g-sammlung-liste, .g-sammlung .g-rolle .g-sammlung-liste,
.g-wissen .g-rolle .g-wissen-liste, .g-sammlung .g-rolle .g-wissen-liste {
flex:0 1 auto;min-height:auto;overflow:visible }
}
/* ==========================================================================
Der Nachweis-Block der Leitung
--------------------------------------------------------------------------
Er wird in die fertige Leitungsseite NACHGELADEN. Bis zum 14.09.2026 kam
er im alten Look (.kpis, .task, .block, .btnP) und war damit der letzte
sichtbare Bruch in einer Glas-Seite.
Fast alles teilt er sich mit dem Bestand: .g-kennzahlreihe wie in der
Auswertung, .g-zeile wie in den Sammel-Listen, .g-chip wie ueberall. Neu
sind nur der Kasten fuer den Geraetemodus und das Auswahlfeld darin.
========================================================================== */
.g-geraet { display:block;border-radius:22px;padding:18px 19px 19px;margin-top:6px }
.g-geraet-text { margin:0 0 14px;max-width:64ch;text-wrap:pretty }
.g-geraet-titel { display:block;margin:0 0 7px }
.g-geraet-hinweis { margin:9px 0 15px;max-width:64ch;text-wrap:pretty }
/* Das Auswahlfeld. Eigene Regel statt der alten .signame: das war ein
Unterschriften-Feld, und ein Name ist keine Abteilung. appearance:none,
damit das System nicht sein eigenes Grau darueberlegt; der Pfeil kommt
als Hintergrundbild, weil ein