/* Gestaltung "Glas": das von Christoph abgenommene Erscheinungsbild (29.09.2026), aufgeraeumt.
   Dunkelblauer Grund, Tuerkis als Akzent, Glasflaechen, Reiter oben. Die Werte in basis.css sind
   bereits die Glas-Vorgaben; hier stehen nur die Glas-eigenen Verzierungen. Nach allen anderen
   Stilvorlagen laden. Keine Statusangaben, keine Fortschrittswerte. */

html[data-gestaltung="glas"][data-hell="1"] {
  --arbeitsflaeche: #f4f8fd;
  --arbeitstext: #16283d;
  --arbeitshinweis: #4b6078;
  --arbeitsrand: #617c9d;
}

/* Design 3.0 (10.10.2026): ein drittes, tiefes Blau im Nordlicht hinter den Scheiben; die Kopfzeile und alles,
   was ueber dem Inhalt schwebt, ist wirklich Glas (Weichzeichner nur dort, wo etwas darunter liegt). */
html[data-gestaltung="glas"] {
  --hintergrund:
    radial-gradient(1100px 600px at 12% -10%, rgba(73, 220, 196, 0.12), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(154, 140, 255, 0.12), transparent 55%),
    radial-gradient(800px 520px at 55% 115%, rgba(73, 120, 220, 0.11), transparent 60%),
    linear-gradient(180deg, var(--grund-2), var(--grund) 60%);
}
html[data-gestaltung="glas"] .kopf {
  background: rgba(11, 15, 23, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
html[data-gestaltung="glas"] :is(.betriebsstatus-panel, .lernstatus-panel, .ausklapp-fenster, .boxen-anzeige-liste, .band, .aktualisierung, .kopf #reiter.reiter .menue-gruppe-inhalt) {
  background: var(--flaeche-karte);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--schatten-schwebend), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-gestaltung="glas"] .knopf.haupt { color: var(--text-auf-akzent); }
/* Kopfzeile oben (Hauptweg, 15.10.2026) in zwei ruhigen Zeilen: oben Marke und Werkzeuge, darunter der Hauptweg mit
   "Mehr" links und "Neues Video" als einzige gefuellte Taste rechts. */
html[data-gestaltung="glas"] .kopf { border-bottom: 1px solid var(--rand); }
@media (min-width: 981px) {
  html[data-gestaltung="glas"] .kopf { padding: 10px 24px 8px; flex-wrap: wrap; row-gap: var(--abstand-1); }
  html[data-gestaltung="glas"] .kopf #reiter.reiter { order: 3; flex: 1 1 100%; width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; }
  html[data-gestaltung="glas"] .kopf #reiter.reiter > button,
  html[data-gestaltung="glas"] .kopf #reiter.reiter > .menue-gruppe { flex: 0 0 auto; }
  html[data-gestaltung="glas"] .kopf #reiter.reiter > button,
  html[data-gestaltung="glas"] .kopf #reiter.reiter .menue-gruppe > summary { white-space: nowrap; }
  html[data-gestaltung="glas"] .kopf #reiter.reiter > .menue-hauptaktion { order: 1; margin-left: auto; padding: 0 var(--abstand-4); }
  html[data-gestaltung="glas"] .kopf .kopf-rechts { gap: var(--abstand-1); }
}
/* Ausgeklapptes Menue auf dem Handy: deckende Flaeche statt Weichzeichner, damit feste Ausklappfenster sich auf den
   Bildschirm beziehen und das rollbare Menue sie nicht beschneidet. */
@media (max-width: 980px) {
  html[data-gestaltung="glas"] .kopf.kopf-menue-offen { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Aktive Stelle: leiser Tuerkisschimmer ohne Rahmen; "body" und :not(...) heben die Regel ueber die Glanzregel
   aktiver Reiter aus der Bildsprache 3.3. */
html[data-gestaltung="glas"] body .kopf #reiter.reiter button.aktiv:not(.menue-hauptaktion),
html[data-gestaltung="glas"] body .kopf #reiter.reiter .menue-gruppe-aktiv:not([open]) > summary {
  background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-hell); box-shadow: none;
}
html[data-gestaltung="glas"] .eintrag.aktiv { box-shadow: inset 3px 0 0 var(--akzent), 0 0 0 1px rgba(73, 220, 196, 0.12); }

html[data-gestaltung="glas"] .marke span {
  background: linear-gradient(90deg, var(--text), var(--akzent-hell) 55%, var(--akzent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-gestaltung="glas"] .tafel.glas,
html[data-gestaltung="glas"] .seitenleiste.glas {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 48px rgba(0, 0, 0, 0.22);
}
html[data-gestaltung="glas"] .denkbox {
  background: linear-gradient(180deg, rgba(14, 21, 33, 0.96), rgba(9, 13, 21, 0.96));
}
html[data-gestaltung="glas"] .live-fenster {
  background: linear-gradient(180deg, rgba(20, 28, 42, 0.98), rgba(11, 16, 26, 0.98));
}