/* Website (Neubau) in der gemeinsamen App-Stilvorlage (26.10.2026, Farbfassung). Wird in NeuRahmen.astro nach neu.css und app-glas.css geladen.
   Das Original ist nur dunkel (Schwarz, Orange); hier folgt die Seite Hell und Dunkel der Systemeinstellung und nimmt Grund, Schrift, Glas und Linien aus der
   Vorlage. Orange ist nur noch im Logo (SVG im Kopf). Kein Schimmer (Lichtkante, Farbverlauf im Glas), kein Mausschein ([data-licht]), kein Papierweiß.
   Unschärfe 28 px, Fenster 28 px, Karten 22 px, Kapseln. Hintergrund: derselbe wandernde Verlauf wie in den Apps statt der Lichtkugeln. Feste Farben der
   Neubau-Stile übersetzt bau/glas-farben.mjs (Block am Ende der Datei). */
:root { --hg-farbton: 232; }
:root {
  --grund: var(--hg-grund); --text: var(--hg-text); --leise: var(--hg-leise); --orange: var(--hg-akzent); --orange-hell: var(--hg-akzent-text);
  --rand: var(--hg-linie); --rand-stark: var(--hg-leiser); --glas: var(--hg-glas); --rund: 22px;
  color-scheme: light dark;
}
:root[data-hg-modus="hell"] { color-scheme: light; }
:root[data-hg-modus="dunkel"] { color-scheme: dark; }
html { background: var(--hg-grund); }
body { color: var(--hg-text); font-family: var(--hg-schrift); }

/* Hintergrund: ein Verlauf, keine Kugeln */
.licht { background: var(--hg-verlauf); background-size: 320% 320%; animation: hg-band 36s ease-in-out infinite alternate; }
.licht i { display: none; }

/* Glas ohne Schimmer, Mausschein aus */
.glas { background-color: var(--hg-glas); background-image: none; border: 0; border-radius: var(--hg-r-fenster); -webkit-backdrop-filter: var(--hg-unschaerfe); backdrop-filter: var(--hg-unschaerfe); box-shadow: var(--hg-kante), var(--hg-schatten); }
[data-licht]::before { display: none; }
.sprung { background: var(--hg-akzent); color: var(--hg-auf-akzent); border-radius: 999px; }
:focus-visible { outline-color: color-mix(in srgb, var(--hg-text) 60%, transparent); }

/* Knöpfe: Kapseln, Hauptknopf neutral */
.knopf { background: var(--hg-akzent); color: var(--hg-auf-akzent); border-radius: 999px; box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-akzent) 28%, transparent); }
.knopf:hover { background: var(--hg-akzent-hover); }
.knopf--leise { background: var(--hg-glas-dicht); color: var(--hg-text); box-shadow: var(--hg-kante); }
@media (prefers-reduced-motion: reduce) { .licht { animation: none; background-position: 35% 50%; } }
@media (prefers-reduced-transparency: reduce) { .glas { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--hg-glas-dicht); } }

/* GLAS-FARBEN-BEGIN (bau/glas-farben.mjs, nicht von Hand aendern) */
:root body { color: var(--text); }
:root .sprung { background: var(--orange); color: var(--hg-auf-akzent); }
:root .glas { background-color: var(--glas); }
:root .knopf { background: var(--orange); color: var(--hg-auf-akzent); }
:root .knopf--leise { color: var(--text); background: var(--hg-fuell); }
:root .knopf--leise:hover { border-color: var(--hg-linie); }
:root .pfeil-link { color: var(--text); }
:root .zeile { color: var(--orange); }
:root .kopf-nav > ul > li > a { color: var(--leise); }
:root .kopf-nav > ul > li > a:hover,
:root .kopf-nav > ul > li > a[aria-current] { color: var(--text); background: var(--hg-fuell); }
:root .unter { background: var(--hg-glas-dicht); }
:root .unter a:hover { background: var(--hg-fuell-2); }
:root .unter small { color: var(--leise); }
:root .kopf-anmelden { color: var(--leise); }
:root .kopf-anmelden:hover { color: var(--text); }
:root .held-text { color: var(--leise); }
:root .held-fakten { color: var(--leise); }
:root .held-fakten li::before { color: var(--orange); }
:root .band { background: var(--hg-glas); }
:root .band-inhalt b { color: var(--orange); }
:root .einl { color: var(--leise); }
:root .feld:hover { border-color: var(--rand-stark); }
:root .feld:hover .feld-pfeil { background: var(--orange); color: var(--hg-auf-akzent); }
:root .feld p { color: var(--leise); }
:root .liste p { color: var(--leise); }
:root .schritte-linie { background: var(--rand); }
:root .schritt-punkt { background: var(--orange); color: var(--hg-auf-akzent); }
:root .schritt-karte p { color: var(--leise); }
:root .schritt-karte li::before { color: var(--orange); }
:root .gruppe:hover { border-color: var(--rand-stark); }
:root .gruppe p { color: var(--leise); }
:root .chip:hover { border-color: var(--rand-stark); }
:root .ort-lage-titel { color: var(--leise); }
:root .ort-lage p { color: var(--leise); }
:root .artikel-karte:hover { border-color: var(--rand-stark); }
:root .artikel-meta { color: var(--orange); }
:root .artikel-karte p { color: var(--leise); }
:root .frage[open] summary i { background: var(--orange); border-color: var(--orange); color: var(--hg-auf-akzent); }
:root .frage p { color: var(--leise); }
:root .kontakt-text > p { color: var(--leise); }
:root .kontakt dt { color: var(--leise); }
:root .kontakt dd a:hover { color: var(--orange-hell); }
:root .formular label { color: var(--leise); }
:root .formular input,
:root .formular select,
:root .formular textarea { color: var(--text); background: var(--hg-glas); }
:root .formular option { background: var(--hg-glas-dicht); }
:root .formular input:focus,
:root .formular select:focus,
:root .formular textarea:focus { border-color: var(--orange); }
:root .formular-hinweis { color: var(--leise); }
:root .fuss { color: var(--leise); background: var(--hg-glas); }
:root .fuss-kontakt a { color: var(--text); }
:root .fuss-titel { color: var(--text); }
:root .fuss ul a:hover,
:root .fuss-unten a:hover { color: var(--text); }
@media (max-width: 1080px) {
:root .mobil summary span { background: var(--text); }
:root .mobil-nav { background: var(--hg-glas-dicht); }
:root .mobil-unter { color: var(--leise); }
}
:root .seitenkopf-text { color: var(--leise); }
:root .krumen ol { color: var(--leise); }
:root .krumen a:hover { color: var(--text); }
:root .krumen [aria-current] { color: var(--text); }
:root a.karte:hover { border-color: var(--rand-stark); }
:root .karte p { color: var(--leise); }
:root .karte-fuss { color: var(--text); }
:root .karte-fuss::after { color: var(--orange); }
:root .karte-zahl { color: var(--orange); }
:root .punkte li::before { color: var(--orange); }
:root .aussage em { color: var(--orange); }
:root .prosa p,
:root .prosa ul,
:root .prosa ol { color: var(--hg-leiser); }
:root .prosa a { color: var(--orange-hell); }
:root .prosa strong { color: var(--text); }
:root .prosa blockquote { background: var(--hg-fuell); }
:root .prosa-stand { color: var(--leise); }
:root .kontaktband p { color: var(--leise); }
:root .formular-fehler { color: var(--hg-leiser); }
:root .blaettern [aria-current] { background: var(--orange); border-color: var(--orange); color: var(--hg-auf-akzent); }
:root .prosa .hnvr-hinweis { color: var(--leise); }
:root .quer-karte:hover { border-color: var(--rand-stark); }
:root .quer-karte p { color: var(--leise); }
:root .quer-nummer { color: var(--orange); }
:root .quer-fortschritt { background: var(--rand); }
:root .kennzahl strong { color: var(--orange); }
:root .kennzahl p { color: var(--leise); }
:root .ort-zahl { color: var(--orange); }
:root .bk { color: var(--text); }
:root .bk-punkte i { background: var(--hg-fuell); }
:root .bk-zeilen i { background: var(--hg-fuell); }
:root .bk-kacheln i { background: var(--hg-fuell); }
:root .bk-lupe::after { background: var(--orange); }
:root .bk-knoten { background: var(--hg-fuell); }
:root .bk-knoten--an { background: var(--orange); color: var(--hg-auf-akzent); }
:root .bk-pin { background: var(--orange); }
:root .buehne-lead { color: var(--leise); }
:root .buehne-weiter { border-color: var(--hg-linie); }
:root .buehne-weiter span { background: var(--orange); }
:root .geschichte-leiste a { color: var(--leise); }
:root .geschichte-leiste span { color: var(--orange); }
:root .geschichte-leiste li.aktiv a { background: var(--orange); border-color: var(--orange); color: var(--hg-auf-akzent); }
:root .geschichte-leiste li.aktiv span { color: var(--hg-auf-akzent); }
:root .geschichte-nummer { -webkit-text-stroke-color: var(--hg-leiser); }
:root .geschichte-text p { color: var(--leise); }
:root .baender .band--voll { background: var(--orange); }
:root .band--voll .band-inhalt,
:root .band--voll .band-inhalt b { color: var(--hg-auf-akzent); }
:root .schluss-kreis { background: var(--orange); color: var(--hg-auf-akzent); }
:root .lauftext > p { color: var(--leise); }
:root .kasten p { color: var(--leise); }
:root .kasten .zeile { color: var(--orange); }
:root .quelle { color: var(--leise); }
:root .quelle a { color: var(--text); }
:root .quelle a:hover { color: var(--orange-hell); }
:root .o-steckbrief dt { color: var(--leise); }
:root .o-wirkung { border-color: var(--rand-stark); }
:root .o-wirkung p { color: var(--text); }
:root .o-hinweis { color: var(--leise); }
:root .o-text p { color: var(--leise); }
:root .o-preis { color: var(--hg-leiser); }
:root .o-merkmale li { color: var(--text); }
:root .o-leistung:hover { border-color: var(--rand-stark); }
:root .karte .o-projekt-titel { color: var(--text); }
:root .o-zahlen dt { color: var(--leise); }
:root .o-zahlen dd { color: var(--text); }
:root .o-gruppe-titel span { color: var(--leise); }
:root .o-status { color: var(--leise); }
:root .o-status--browser { color: var(--hg-leiser); }
:root .o-app-name a:hover { color: var(--orange); }
:root .o-status--download { color: var(--hg-leiser); }
:root .o-status--anbindung { color: var(--text); }
:root .o-gruppe-text { color: var(--leise); }
:root .zitat figcaption { color: var(--leise); }
:root .zitat figcaption::before { color: var(--orange); }
:root .gruppen-titel { color: var(--text); }
:root .gruppen-titel small { color: var(--leise); }
:root .karte-fremd { color: var(--orange); }
:root .spalte-text p { color: var(--leise); }
:root .wiki-zahl { color: var(--text); background: var(--hg-fuell); }
:root .wiki-kategorien .chip[aria-current] { background: var(--orange); border-color: var(--orange); color: var(--hg-auf-akzent); }
:root .wiki-kategorien .chip[aria-current] .wiki-zahl { color: var(--hg-auf-akzent); }
:root .blaettern a:hover { border-color: var(--rand-stark); background: var(--hg-fuell-2); }
:root .wiki-autor p { color: var(--leise); }
:root .wiki-autor .zeile { color: var(--orange); }
:root .wiki-autor h2,
:root .wiki-autor .wiki-autor-name { color: var(--text); }
:root .wiki-autor--gross p:last-child { color: var(--hg-leiser); }
:root .wiki-meta { color: var(--leise); }
:root .wiki-meta .chip { color: var(--text); }
:root .wiki-inhalt a { color: var(--leise); }
:root .wiki-inhalt a::before { color: var(--orange); }
:root .wiki-inhalt a:hover { color: var(--text); }
:root .wiki-text > p:first-child { color: var(--text); }
/* GLAS-FARBEN-ENDE */

/* Nach dem Farbblock (gleiche Spezifität, spätere Regel gewinnt) */
:root .knopf.knopf--leise { background: var(--hg-glas-dicht); color: var(--hg-text); box-shadow: var(--hg-kante); }
:root .knopf.knopf--leise:hover { background: var(--hg-fuell-2); }

/* Logo: Marke und ".me" bleiben Original-Orange, nur die Schrift wechselt (Vorlage "logo-primary" auf hell, "logo-reversed" auf dunkel).
   Die Seite nutzt im Markup die einfarbig weiße Fassung; die Ersetzung geschieht hier über content, das Markup bleibt unverändert. */
img[src$="/logo-white.svg"] { content: url("/marke/svg/logo-primary.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-hg-modus="hell"]) img[src$="/logo-white.svg"] { content: url("/marke/svg/logo-reversed.svg"); } }
:root[data-hg-modus="dunkel"] img[src$="/logo-white.svg"] { content: url("/marke/svg/logo-reversed.svg"); }
/* Vollfarbiges Band: Akzentfläche, alle Schrift darin in der Schrift auf Akzent */
:root .band--voll, :root .band--voll * { color: var(--hg-auf-akzent); }

/* Grafiken (inline-SVG der Seite): die Farben stehen als Attribute im Markup, das für den dunklen Grund gezeichnet wurde. Hier werden sie auf die Vorlage gelegt:
   Weiß und Creme -> Schriftfarbe, Orange -> Farbe der App (--hg-kuehl) (Orange gibt es nur im Logo), Dunkelflächen -> dichtes Glas. Das Zeichen im Kopf (.buehne-zeichen) bleibt. */
.grafik [fill="#fff"], .grafik [fill="#f2efe9"] { fill: var(--hg-text); }
.grafik [stroke="#fff"], .grafik [stroke="#f2efe9"] { stroke: var(--hg-text); }
.grafik [fill="#ff7120"], .grafik [fill="#ff9a5c"] { fill: var(--hg-kuehl); }
.grafik [stroke="#ff7120"], .grafik [stroke="#ff9a5c"] { stroke: var(--hg-kuehl); }
.grafik [fill="#140900"], .grafik [fill="#0c0b0a"] { fill: var(--hg-glas-dicht); }
.grafik [stroke="#140900"], .grafik [stroke="#0c0b0a"] { stroke: var(--hg-glas-dicht); }