/* ===========================================================================
   Glas-Bauteil des Relaunchs (Phase A1)

   Vorgabe: DESIGN-VORGABE.md Abschnitt 5, gestaltet wie die an G0
   abgenommene Gesamtseite (prototypen/seite-d.css). Vier der fünf Schichten:

   1  Unschärfe und Sättigung   backdrop-filter: var(--glas-filter); die
                                Obergrenze der Helligkeit dahinter trägt
                                das gedämpfte Haus (tokens.css, gemessen)
   2  Brechung                  entfällt: Sie hing am WebGL-Hintergrund
                                (licht.js), der zurückgestellt ist. Ohne ihn
                                gibt es nichts zu brechen, und eine halbe
                                Brechung über einen SVG-Filter liefe nur in
                                Chrome (DESIGN-VORGABE 5).
   3  Kante                     1 px, oben heller als unten (::before, ein
                                Rahmen in drei Farben), dazu die innere
                                Lichtkante oben (box-shadow inset)
   4  Glanz am Zeiger           ::after, Lage aus --zx/--zy (glas.js)
   5  Körnung                   korn.png, 2,5 % Deckung, im selben ::after

   Kante und Körnung sind so gebaut, dass sie billig neu zu zeichnen sind.
   Ändert eine Glasfläche ihre Höhe (Aufklapper), zeichnet Safari beides in
   jedem Bild neu. Mit Körnung aus feTurbulence (korn.svg, beim Zeichnen
   gerechnet) und Kante als Verlauf hinter einer Maske gingen am iPhone beim
   Aufklappen bis zu 7 Bilder über 25 ms verloren, mit Bild und Rahmen 0
   (Ursachensuche im Katalog, 04.10.2026, messung-2026-10-04-iphone.txt).
   korn.png erzeugt werkzeuge/baue-korn.py. Keine Maske und kein SVG-Filter
   zurück in das Glas.

   Regeln, die das Bauteil selbst durchsetzt:
   - Nur die äußerste Glasfläche zeichnet weich. Glas in Glas bekommt die
     Fläche --feld ohne eigenen Weichzeichner (verschachtelter Blur kostet viel
     und sieht matschig aus; CLAUDE.md, „Milchglas und Rundungen“).
   - Höchstens drei weichgezeichnete Flächen gleichzeitig sichtbar. Das prüft
     glas.js zur Laufzeit (pruefeGlas) und meldet es in der Konsole.
   - Drei Rückfälle, alle deckend: weniger Transparenz, mehr Kontrast (dazu
     eine klare Kante) und ein Browser ohne backdrop-filter.

   Eine Regel, die das Bauteil NICHT durchsetzen kann: Kein Vorfahre einer
   Glasfläche bekommt opacity unter 1, filter, mask oder mix-blend-mode. Jedes
   davon schaltet den Weichzeichner im Glas ab (gemessen 03.10.2026, Chrome
   154: Lichtschein mit soft-light ließ die Linien scharf unter der Karte
   stehen). Auch im Glas kein mix-blend-mode.

   Text auf Glas trägt eine harte Kante von 1 px in der Grundfarbe (2 px Strich
   unter der Füllung), keinen Schein — wie auf der Gesamtseite. Gefüllte
   Knöpfe sind ausgenommen.
   =========================================================================== */

/* Die Stärke des Glanzes als registrierte Zahl, damit sie weich übergehen
   kann. Ohne @property springt sie; das ist der ganze Unterschied. */
@property --glanz-an { syntax: "<number>"; inherits: false; initial-value: 0; }

.glas {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--glas);
    border-radius: var(--r-flaeche);
    -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
    box-shadow: inset 0 1px 0 var(--glanzrand), 0 24px 60px -28px var(--schatten);
    -webkit-text-stroke: 2px var(--grund); paint-order: stroke fill;
    --glanz-an: 0;
    transition: --glanz-an var(--d-schritt) var(--ease-aus);
}
/* Ergebniskarte: am dichtesten (seite-d.css, Abend und Nacht). */
.glas.stark { background: var(--glas-stark); }

/* Schicht 3: Kante, oben heller als unten: oben --glanzrand, unten
   --glasrand, die Seiten in der Mitte dazwischen. Ein Rahmen und kein Verlauf
   hinter einer Maske (siehe oben). */
.glas::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    border: 1px solid; border-color: var(--glanzrand) color-mix(in srgb, var(--glanzrand), var(--glasrand)) var(--glasrand);
}
/* Schicht 4 und 5: Glanz und Körnung, unter dem Inhalt. */
.glas::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background:
        radial-gradient(var(--glanz-groesse) circle at var(--zx) var(--zy),
            color-mix(in srgb, var(--glanzrand) calc(var(--glanz-an) * 50%), transparent), transparent 60%),
        url("korn.png") 0 0 / 160px 160px;
}
@media (hover: hover) { .glas:hover { --glanz-an: 1; } }
.glas.beruehrt { --glanz-an: 1; }

/* Nur die äußerste Fläche zeichnet weich. */
.glas .glas {
    background: var(--feld); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}

/* Gefüllte Knöpfe tragen keine Kante, sie stehen auf eigener Fläche. */
.glas :is(.primaer, .primaer *) { -webkit-text-stroke: 0; }

/* Rückfälle. Alle drei deckend, gemessen gegen --glas-deckend (tokens.css). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glas, .glas.stark { background: var(--glas-deckend); }
}
@media (prefers-reduced-transparency: reduce) {
    .glas, .glas.stark { background: var(--glas-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .glas, .glas.stark { background: var(--glas-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; outline: 1px solid var(--text); }
    .glas::after { background: none; }
}
@media (prefers-reduced-motion: reduce) {
    .glas { transition: none; }
}