/* ===========================================================================
   glas.css — eine Glasflaeche fuer die ganze Seite (20.09.2026)

   Vorher trug nur die Einfuehrungskarte auf /modell/ Liquid Glass, die Knoepfe
   trugen sieben verschiedene Stile. Hier steht die Flaeche genau einmal.
   Wer sie braucht, setzt eine Klasse, niemand definiert backdrop-filter neu.

     .glas        Primaer. Der eine Hauptknopf je Bildschirm.
                  Download, Erstes Gespraech, Weiter.
     .glas.sek    Sekundaer. Alles andere.
     .glas.wahl   Waehlbare Option. Ungewaehlt (aria-pressed false oder ohne
                  Attribut) das helle Glas, gewaehlt (true) das tiefe. Lange
                  Namen duerfen umbrechen.
     .glas.karte  Kachel mit zwei Zeilen statt Pille: kleinere Ecke, links
                  buendig, Name ueber Unterzeile. Die Kinder stylt die Seite.
     .glas-feld   Textfeld neben einer Glaspille. Helle Flaeche ohne Wurf,
                  Polster und Zeilenhoehe wie .glas, also dieselbe Hoehe.
     .rg-karte    Die Einfuehrungskarte. Teilt die Werte der sekundaeren
                  Flaeche, nur Ecke und Wurf sind groesser. Ihre Lage und
                  Groesse stehen weiter in pages/inst-modell.html.
     .glas-invers Umschalter fuer dunklen Grund (Film, dunkle Buehne). Auf
                  einen Vorfahren setzen, dann ist Primaer hell und Sekundaer
                  ein durchscheinender Schleier. Nie ein Knopf dunkel auf dunkel.

   Eine Regel fuer die Bedeutung (21.09.2026, Befund 1.08):
   Die DECKENDE Flaeche ist die Hauptaktion, die DURCHSCHEINENDE ist sekundaer.
   Auf hellem Grund ist die deckende Flaeche dunkel, auf dunklem Grund hell.
   Dazu ein Rand: das Sekundaerglas trug frueher zwei Randstaerken, 0,38 auf der
   Landing gegen 0,16 im Schaufenster, und der starke Ring liess den Zweitknopf
   der Landing wie eine Hauptaktion aussehen. Es gibt jetzt nur noch
   --glas-rand-tief (0,16) fuer beide Faelle, und der Schleier traegt keinen
   hebenden Wurf mehr. Damit heisst eine gehobene, deckende Flaeche ueberall
   dasselbe.

   Ein Hover, ein Druckzustand, ein Fokusring, sonst nichts. Die Groessen
   (Schriftgrad, Polster) bleiben bei der Seite, damit ein Knopf im Kopf
   kleiner sein darf als einer auf der Buehne.
   =========================================================================== */

:root{
  /* Werte der Karte aus pages/inst-modell.html, hier zur einzigen Quelle gemacht */
  --glas-unschaerfe:blur(26px) saturate(1.5);
  --glas-hell:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.62) 100%);
  --glas-tief:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.78) 100%);
  --glas-schleier:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.10) 100%);
  --glas-rand-hell:rgba(255,255,255,.9);
  /* Ein Rand fuer beide Faelle des dunklen Glases: der dunkle Hauptknopf auf
     hellem Grund und der Schleier auf dunklem Grund. --glas-rand-schleier
     (0,38) ist am 21.09.2026 ersatzlos entfallen, Befund 1.08. */
  --glas-rand-tief:rgba(255,255,255,.16);
  --glas-kante-hell:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.4);
  --glas-kante-tief:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06);
  --glas-kontur:0 0 0 .5px rgba(10,10,10,.12);
  --glas-kontur-tief:0 0 0 .5px rgba(10,10,10,.34);
  --glas-wurf:0 10px 24px rgba(10,10,10,.14),0 2px 6px rgba(10,10,10,.08);
  --glas-wurf-hoch:0 16px 34px rgba(10,10,10,.20),0 3px 8px rgba(10,10,10,.10);
  --glas-wurf-karte:0 28px 64px rgba(10,10,10,.30),0 6px 18px rgba(10,10,10,.12);
  --glas-ecke:999px;
  --glas-ecke-karte:20px;
  --glas-ecke-kachel:16px;
  --glas-ink:#0A0A0A;
  --glas-papier:#FFFFFF;
}

/* Die Unschaerfe. Knopf, Karte und Feld teilen sie, es gibt sie nur hier. */
.glas,
.rg-karte,
.glas-feld{
  -webkit-backdrop-filter:var(--glas-unschaerfe);
  backdrop-filter:var(--glas-unschaerfe);
}

/* Form und Verhalten des Knopfs */
.glas{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.15;
  padding:11px 24px;border-radius:var(--glas-ecke);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  background:var(--glas-tief);color:var(--glas-papier);
  border:1px solid var(--glas-rand-tief);
  box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf);
  transition:transform .14s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}

/* Sekundaer und Karte tragen dieselbe helle Flaeche */
.glas.sek,
.rg-karte{
  background:var(--glas-hell);
  border:1px solid var(--glas-rand-hell);
}
.glas.sek{
  color:var(--glas-ink);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf);
}
.rg-karte{
  border-radius:var(--glas-ecke-karte);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-karte);
}

/* Ein Hover */
.glas:hover,
.glas.wahl[aria-pressed="true"]:hover{transform:translateY(-1px);box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf-hoch)}
.glas.sek:hover,
.glas.wahl:hover{box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-hoch)}

/* Ein Druckzustand */
.glas:active,
.glas.wahl[aria-pressed="true"]:active{transform:translateY(1px);box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),0 2px 6px rgba(10,10,10,.14)}
.glas.sek:active,
.glas.wahl:active{box-shadow:var(--glas-kante-hell),var(--glas-kontur),0 2px 6px rgba(10,10,10,.10)}

/* Ein Fokusring */
.glas:focus-visible,
.glas-feld:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:3px}

/* Waehlbare Option. Ein Knopf, zwei Bedeutungen, geschaltet ueber aria-pressed.
   Ungewaehlt traegt er das helle Glas, gewaehlt das tiefe. Das ist dieselbe
   Aussage wie .glas gegen .glas.sek, nur umschaltbar. Ohne Attribut gilt
   ungewaehlt, damit eine frische Seite nie voll gewaehlt aussieht. Lange Namen
   duerfen umbrechen, der Text bleibt mittig wie bei .glas. */
.glas.wahl{
  white-space:normal;text-align:center;
  background:var(--glas-hell);color:var(--glas-ink);
  border-color:var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf);
}
.glas.wahl[aria-pressed="true"]{
  background:var(--glas-tief);color:var(--glas-papier);
  border-color:var(--glas-rand-tief);
  box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf);
}

/* Kachel statt Pille: zwei Zeilen, Name oben, Unterzeile darunter. Gleiche
   Flaeche, nur die Form aendert sich. Steht nach .glas.wahl, damit eine
   gewaehlte Kachel links buendig bleibt und nicht mittig wird. Name und
   Unterzeile stylt die Seite, nicht diese Datei. */
.glas.karte{
  flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;white-space:normal;
  border-radius:var(--glas-ecke-kachel);
}

/* Textfeld neben einer Glaspille. Dieselbe helle Flaeche wie das Sekundaerglas,
   aber ohne Wurf: ein Feld liegt in der Seite, es steht nicht darueber.
   Schriftgrad, Zeilenhoehe und Polster sind die von .glas, damit Feld und Knopf
   nebeneinander ohne Sondermass gleich hoch sind. Die Seite darf beides
   gemeinsam ueberschreiben. */
.glas-feld{
  font:inherit;font-size:15px;line-height:1.15;
  padding:11px 24px;border-radius:var(--glas-ecke);
  background:var(--glas-hell);color:var(--glas-ink);
  border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur);
  transition:box-shadow .18s ease,border-color .18s ease;
}

/* Aus. Der Weiterknopf ohne Wahl bleibt sichtbar, aber taub. */
.glas[disabled],
.glas.taub{opacity:.32;pointer-events:none}
/* display aus der Flaeche darf das hidden Merkmal nicht ueberholen:
   der Zurueckknopf der Karte steht mit hidden im Quelltext. */
.glas[hidden]{display:none}

/* Dunkler Grund: das Paar dreht sich um */
.glas-invers .glas{
  background:var(--glas-hell);color:var(--glas-ink);
  border-color:var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf);
}
/* Sekundaer auf dunklem Grund: durchscheinend, derselbe Rand wie das dunkle
   Glas sonst, und kein hebender Wurf. Der Wurf gehoert der Hauptaktion. */
.glas-invers .glas.sek{
  background:var(--glas-schleier);color:var(--glas-papier);
  border-color:var(--glas-rand-tief);
  box-shadow:var(--glas-kante-tief);
}
.glas-invers .glas.sek:hover{box-shadow:var(--glas-kante-tief),var(--glas-wurf-hoch)}
.glas-invers .glas.sek:active{box-shadow:var(--glas-kante-tief)}
.glas-invers .glas:focus-visible{outline-color:rgba(255,255,255,.85)}

/* Daumenzone. Am Telefon trifft niemand 38 px. */
@media (max-width:900px){
  .glas,
  .glas-feld{min-height:44px}
}

/* Wer Bewegung reduziert, bekommt dieselbe Flaeche ohne Weg dorthin. */
@media (prefers-reduced-motion:reduce){
  .glas,
  .glas-feld{transition:none}
  .glas:hover,
  .glas:active{transform:none}
}

/* Hoehe je Rolle (08.10.2026, Bahn kopf_termin): Handlung so hoch wie der Kopf, Wahl eine Stufe kleiner,
   am Handy beide 44 wie oben. Schriftgrad und Polster bleiben bei der Seite, die Hoehe kommt von hier. */
:root{--glas-handlung:52px;--glas-wahl:36px}
@media (max-width:900px){:root{--glas-handlung:44px;--glas-wahl:44px}}