/* Look „20b“: dunkles Liquid Glass auf der abgedunkelten Website-Wand (Fabian 29.10.2026, Auswahl aus 22 Mockups in oberflaeche-neu/probe/).
   Aktiv, wenn <html data-look="glas">, geschaltet über ?look=glas bzw. ?look=hell (index.html merkt sich die Wahl im Browser).
   Baut auf app.css (Look 17c) auf und ändert nur Farben und Material; Layout, Abstände und Markup bleiben gleich.
   Nach Codex-Hinweis: Schrift deckend, keine Lichtkanten, Weichzeichner 12 bis 16 px nur auf wenigen Flächen, kleine Schatten. */
html[data-look="glas"] {
  --karte: rgba(17, 16, 14, 0.56); --karte-voll: rgba(28, 25, 22, 0.96);
  --text: rgba(239, 229, 218, 0.88); --bronze: #C9A46B; --gruen: #7FBF93;
  --linie: rgba(239, 229, 218, 0.14);
  --glas-rand: rgba(255, 255, 255, 0.14); --glas-schatten: 0 10px 30px rgba(0, 0, 0, 0.22);
  --glas-hell: rgba(239, 229, 218, 0.10); --glas-heller: rgba(239, 229, 218, 0.16);
  color-scheme: dark;
}
html[data-look="glas"] body {
  background: linear-gradient(180deg, rgba(17, 16, 14, 0.59), rgba(17, 16, 14, 0.67)), #1a1410 url("/img/wand.webp") center / cover fixed no-repeat;
  color: #EFE5DA;
}
html[data-look="glas"] button:focus-visible, html[data-look="glas"] input:focus-visible, html[data-look="glas"] a:focus-visible { outline-color: var(--gold); }

/* Seitenleiste: dunkles Glas, feine Linie rechts, Goldstrich unter der Wortmarke, offene Seite als Creme-Block */
html[data-look="glas"] .seitenleiste { background: rgba(17, 16, 14, 0.46); color: #EFE5DA; border-right: 1px solid rgba(255, 255, 255, 0.08); }
html[data-look="glas"] .seitenleiste > .marke { color: #EFE5DA; }
html[data-look="glas"] .menue button, html[data-look="glas"] .menue a { color: #EFE5DA; }
html[data-look="glas"] .menue button:hover, html[data-look="glas"] .menue a:hover { background: var(--glas-hell); }
html[data-look="glas"] .menue button[aria-current="page"] { background: #EFE5DA; color: #11100E; }
html[data-look="glas"] .akademie-knopf { border-color: var(--gold); color: #EFE5DA; background: linear-gradient(180deg, rgba(201, 164, 107, 0.22), rgba(201, 164, 107, 0.10)), var(--karte); box-shadow: 0 0 0 3px rgba(201, 164, 107, 0.14); }
html[data-look="glas"] .akademie-knopf:hover { background: linear-gradient(180deg, rgba(201, 164, 107, 0.32), rgba(201, 164, 107, 0.16)), var(--karte); }
html[data-look="glas"] .krone { background: #11100E; border-color: var(--gold); }
html[data-look="glas"] .assistentin .info-knopf { border-color: rgba(239, 229, 218, 0.4); color: var(--text); }
html[data-look="glas"] .assistentin .info-knopf[aria-expanded="true"] { background: #EFE5DA; color: #11100E; border-color: #EFE5DA; }
html[data-look="glas"] .assistentin .schalter { background: rgba(239, 229, 218, 0.25); }
html[data-look="glas"] .assistentin .schalter.an { background: #3C8A52; }
html[data-look="glas"] .profil-knopf .zahnrad { color: var(--text); }
html[data-look="glas"] .na-wahl { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.25); color: #EFE5DA; }
html[data-look="glas"] .assistentin-satz, html[data-look="glas"] .assistentin button { color: var(--text); }
html[data-look="glas"] .assistentin-satz strong { color: #EFE5DA; }
html[data-look="glas"] .profil-knopf { border-top-color: rgba(239, 229, 218, 0.16); color: #EFE5DA; }
html[data-look="glas"] .profil-knopf:hover, html[data-look="glas"] .profil-knopf[aria-current="page"] { background: var(--glas-hell); }

/* Flächen und Kacheln: dunkles Glas, Kacheln hell nur beim Überfahren */
html[data-look="glas"] .flaeche, html[data-look="glas"] .kachel, html[data-look="glas"] .wtag, html[data-look="glas"] .anmelde-karte, html[data-look="glas"] .fenster {
  background: var(--karte); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten); color: #EFE5DA;
}
html[data-look="glas"] .fenster { background: rgba(17, 16, 14, 0.9); }
html[data-look="glas"] .kachel, html[data-look="glas"] a.kachel.dunkel, html[data-look="glas"] .kachel.dunkel { color: #EFE5DA; }
@media (hover: hover) and (pointer: fine) { html[data-look="glas"] .kachel:hover { background: linear-gradient(var(--glas-hell), var(--glas-hell)), var(--karte); } }
html[data-look="glas"] .kachel:active, html[data-look="glas"] .kachel:focus-visible { background: linear-gradient(var(--glas-heller), var(--glas-heller)), var(--karte); }
html[data-look="glas"] .hinweis-beispiel { border-color: rgba(239, 229, 218, 0.28); background: rgba(17, 16, 14, 0.45); color: var(--text); }
html[data-look="glas"] h1, html[data-look="glas"] h2 { color: #EFE5DA; }
html[data-look="glas"] h1 .web-name { color: var(--gold-hell); }
html[data-look="glas"] .datum { color: rgba(239, 229, 218, 0.88); } /* Codex: .6 lag bei 2,9:1 */
html[data-look="glas"] .datum::after { background: var(--gold); }
html[data-look="glas"] .leise, html[data-look="glas"] .hell-text { color: var(--text); }
html[data-look="glas"] .textknopf, html[data-look="glas"] a.textknopf { color: var(--gold-hell); }
html[data-look="glas"] .zeile:hover { background: var(--glas-hell); }
html[data-look="glas"] .zeile.gewaehlt { background: var(--glas-heller); }
html[data-look="glas"] .rund { background: rgba(239, 229, 218, 0.14); color: #EFE5DA; border: 1px solid rgba(239, 229, 218, 0.18); }
html[data-look="glas"] .erfolg strong { color: #EFE5DA; }
html[data-look="glas"] .neu-punkt { background: var(--gold); }

/* Knöpfe, Felder, Umschalter: Hauptknopf in Creme, zweiter Knopf als Glasrahmen */
html[data-look="glas"] .knopf, html[data-look="glas"] a.knopf { background: #EFE5DA; color: #11100E; }
html[data-look="glas"] .knopf:hover { background: #fff; }
html[data-look="glas"] .knopf.hell, html[data-look="glas"] a.knopf.hell { background: transparent; color: #EFE5DA; border-color: rgba(239, 229, 218, 0.6); }
html[data-look="glas"] .knopf.hell:hover { background: var(--glas-hell); border-color: #EFE5DA; }
html[data-look="glas"] .eingabe input, html[data-look="glas"] .feld, html[data-look="glas"] .bw-link input {
  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.25); color: #EFE5DA;
}
html[data-look="glas"] .eingabe input::placeholder, html[data-look="glas"] .feld::placeholder { color: rgba(239, 229, 218, 0.6); }
html[data-look="glas"] .eingabe input:focus, html[data-look="glas"] .feld:focus { border-color: var(--gold); background: rgba(255, 255, 255, 0.14); }
html[data-look="glas"] .umschalter { border-color: rgba(239, 229, 218, 0.35); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .umschalter button[aria-pressed="true"] { background: #EFE5DA; color: #11100E; }
html[data-look="glas"] .chip { border-color: rgba(239, 229, 218, 0.22); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .chip:hover { background: var(--glas-hell); }
html[data-look="glas"] .chip[aria-pressed="true"] { background: #EFE5DA; border-color: #EFE5DA; color: #11100E; }
html[data-look="glas"] .chip[aria-pressed="true"] .leise { color: rgba(17, 16, 14, 0.65); }
html[data-look="glas"] .pfeil { border-color: rgba(239, 229, 218, 0.22); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .pfeil:hover { background: var(--glas-hell); }
html[data-look="glas"] .frei-schalter { border-color: rgba(239, 229, 218, 0.22); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .frei-schalter[aria-pressed="true"] { border-color: var(--gruen); color: var(--gruen); }
html[data-look="glas"] .schalter { background: rgba(239, 229, 218, 0.25); }
html[data-look="glas"] .schalter.an { background: #3C8A52; }
html[data-look="glas"] .tasten button { background: rgba(239, 229, 218, 0.10); border: 1px solid rgba(255, 255, 255, 0.12); color: #EFE5DA; }
html[data-look="glas"] .tasten button:hover { background: var(--glas-heller); }
html[data-look="glas"] .leistung { border-color: var(--glas-rand); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .leistung:hover, html[data-look="glas"] .leistung:focus-visible { border-color: var(--gold); background: var(--glas-hell); }
html[data-look="glas"] .betrag { color: #EFE5DA; }
html[data-look="glas"] .haken { background: #3C8A52; }

/* Chat, Nachrichten, Bewertungen */
html[data-look="glas"] .blase.kundin { background: rgba(239, 229, 218, 0.12); color: #EFE5DA; border: 1px solid rgba(255, 255, 255, 0.10); }
html[data-look="glas"] .blase.assist { background: #EFE5DA; color: #11100E; }
html[data-look="glas"] .wer { color: var(--text); }
html[data-look="glas"] .wer.ai { color: var(--gold); }
html[data-look="glas"] .na-icon { color: #EFE5DA; }
html[data-look="glas"] .na-punkt { box-shadow: 0 0 0 1.5px rgba(17, 16, 14, 0.6); }
html[data-look="glas"] .bw-zahl { color: #EFE5DA; }
html[data-look="glas"] .bw-sterne { color: var(--gold); }
html[data-look="glas"] .bw-sterne .bw-leer { color: rgba(239, 229, 218, 0.2); }
html[data-look="glas"] .bw-balken { background: rgba(239, 229, 218, 0.14); }
html[data-look="glas"] .bw-balken i { background: var(--gold); }
html[data-look="glas"] .bw-antwort { background: rgba(255, 255, 255, 0.06); }

/* Kalender: Woche, Tagesraster, Wochen- und Monatsansicht auf dunklem Grund */
html[data-look="glas"] .woche button { border-color: var(--glas-rand); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .woche button:hover { background: var(--glas-hell); }
html[data-look="glas"] .woche button[aria-pressed="true"] { background: #EFE5DA; border-color: #EFE5DA; color: #11100E; }
html[data-look="glas"] .woche button[aria-pressed="true"] small { color: rgba(17, 16, 14, 0.65); }
html[data-look="glas"] .woche .heute-markierung { background: var(--gold); }
html[data-look="glas"] .woche button[aria-pressed="true"] .heute-markierung { background: #7A5A36; }
html[data-look="glas"] .raster-kopf { background: var(--karte-voll); border-bottom-color: var(--glas-rand); color: #EFE5DA; }
html[data-look="glas"] .raster-kopf button { color: #EFE5DA; }
html[data-look="glas"] .achse span { color: var(--text); }
html[data-look="glas"] .spalte { border-left-color: var(--linie); background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(rgba(239, 229, 218, 0.05) 1px, transparent 1px); }
html[data-look="glas"] .spalte.frei, html[data-look="glas"] .spalte.nicht-da { background: repeating-linear-gradient(135deg, rgba(239, 229, 218, 0.06) 0 8px, transparent 8px 16px); }
html[data-look="glas"] .slot:hover, html[data-look="glas"] .slot:focus-visible { background: rgba(201, 164, 107, 0.2); }
html[data-look="glas"] .slot:hover::after { color: var(--gold); }
html[data-look="glas"] .zelle:hover, html[data-look="glas"] .zelle:focus-visible { background: rgba(201, 164, 107, 0.2); }
html[data-look="glas"] .zelle.vergangen { background: rgba(0, 0, 0, 0.18); }
html[data-look="glas"] .termin .block, html[data-look="glas"] .raster .block { background: color-mix(in srgb, var(--f, var(--gold)) 38%, #1a1715); color: #EFE5DA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
html[data-look="glas"] .termin .zeit { color: var(--text); }
html[data-look="glas"] .raster .block.pause { background: repeating-linear-gradient(135deg, rgba(239, 229, 218, 0.08) 0 6px, rgba(239, 229, 218, 0.03) 6px 12px); border-left-color: rgba(239, 229, 218, 0.3); color: var(--text); }
html[data-look="glas"] .block.planity, html[data-look="glas"] .raster .block.planity { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--planity) 40%, #1a1715) 0 8px, color-mix(in srgb, var(--planity) 24%, #1a1715) 8px 16px); }
html[data-look="glas"] .mit-bahnen .bahn .block { background: color-mix(in srgb, var(--f) 70%, #1a1715); }
html[data-look="glas"] .mit-bahnen .bahn .block.pause { background: rgba(239, 229, 218, 0.14); }
html[data-look="glas"] .mit-bahnen .bahn .block.planity { background: color-mix(in srgb, var(--planity) 60%, #1a1715); }
html[data-look="glas"] .bahn.frei, html[data-look="glas"] .bahn.nicht-da { background: repeating-linear-gradient(135deg, rgba(239, 229, 218, 0.08) 0 4px, transparent 4px 8px); }
html[data-look="glas"] .frei-block { border-color: rgba(127, 191, 147, 0.55); background: rgba(127, 191, 147, 0.12); color: var(--gruen); }
html[data-look="glas"] .frei-block:hover, html[data-look="glas"] .frei-block:focus-visible { background: rgba(127, 191, 147, 0.24); }
html[data-look="glas"] .frei-block.von-hand { border-color: rgba(239, 229, 218, 0.3); background: rgba(239, 229, 218, 0.06); color: var(--text); }
html[data-look="glas"] .frei-block.von-hand:hover, html[data-look="glas"] .frei-block.von-hand:focus-visible { background: rgba(239, 229, 218, 0.12); }
html[data-look="glas"] .zeige-frei.mit-bahnen .bahn .frei-block { background: rgba(127, 191, 147, 0.45); }
html[data-look="glas"] .zeige-frei.mit-bahnen .bahn .frei-block.von-hand { background: rgba(239, 229, 218, 0.14); }
html[data-look="glas"] .jetzt, html[data-look="glas"] .jetzt::before { background: #E0634A; }
html[data-look="glas"] .zeitraum { color: #EFE5DA; }
html[data-look="glas"] .wtag.ist-heute { box-shadow: inset 0 0 0 2px #EFE5DA, var(--glas-schatten); }
html[data-look="glas"] .wtag-kopf { border-bottom-color: var(--linie); color: #EFE5DA; }
html[data-look="glas"] .wtag-kopf small, html[data-look="glas"] .wtag-kopf .leise { color: var(--text); }
html[data-look="glas"] .wtermin { background: color-mix(in srgb, var(--f) 34%, #1a1715); color: #EFE5DA; }
html[data-look="glas"] .zeit-k, html[data-look="glas"] .kopf-wt { color: var(--text); }
html[data-look="glas"] .mtag { border-color: var(--glas-rand); background: rgba(17, 16, 14, 0.45); color: #EFE5DA; }
html[data-look="glas"] .mtag .fuell { background: rgba(239, 229, 218, 0.12); }
html[data-look="glas"] .mtag.vorbei { background: rgba(17, 16, 14, 0.25); color: var(--text); }
html[data-look="glas"] .mtag.zu { background: transparent; }
html[data-look="glas"] .mtag.ist-heute { border: 2px solid #EFE5DA; }
html[data-look="glas"] .mtag-neu:hover, html[data-look="glas"] .mtag-neu:focus-visible { background: rgba(201, 164, 107, 0.16); }
html[data-look="glas"] .woche-raster .raster-kopf button.ist-heute { color: var(--gold); }

/* Fenster, Hinweis, Anmeldung */
html[data-look="glas"] .ebene { background: rgba(0, 0, 0, 0.55); }
html[data-look="glas"] .fenster h2 { color: #EFE5DA; }
html[data-look="glas"] .toast { background: #EFE5DA; color: #11100E; box-shadow: var(--glas-schatten); }
html[data-look="glas"] .anmelde-karte label { color: var(--text); }
html[data-look="glas"] .fehlertext { color: #E8A090; }
html[data-look="glas"] .einzeln { color: #EFE5DA; }
html[data-look="glas"] .daten div { border-bottom-color: var(--linie); }
html[data-look="glas"] .umsatz, html[data-look="glas"] .erfolg, html[data-look="glas"] .bw-eintrag, html[data-look="glas"] .zeile, html[data-look="glas"] .termin { border-color: var(--linie); }

/* Handy: Leiste unten als dunkles Glas */
@media (max-width: 899px) {
  html[data-look="glas"] .seitenleiste { background: rgba(17, 16, 14, 0.74); color: #EFE5DA; border-top: 1px solid rgba(255, 255, 255, 0.10); border-right: 0; }
  html[data-look="glas"] .menue button, html[data-look="glas"] .menue a { color: rgba(239, 229, 218, 0.6); }
  html[data-look="glas"] .menue button[aria-current="page"] { background: none; color: #EFE5DA; }
  html[data-look="glas"] .kopf-handy .marke { color: #EFE5DA; }
}

/* Menü am Handy im dunklen Look */
html[data-look="glas"] .menue-knopf { color: #EFE5DA; }
html[data-look="glas"] .hm-tafel { background: rgba(28, 25, 22, 0.98); color: #EFE5DA; }
html[data-look="glas"] .hm-eintrag[aria-current="page"] { background: #EFE5DA; color: #11100E; }
html[data-look="glas"] .hm-kopf .marke { color: #EFE5DA; }