/* Glas-Ebene im Apple-Stil (05.10.2026, MM: "den akzent der Gemeinnützigkeit muss sich optisch besser einfügen und mach
   bei allem noch bisschen mehr glass apple optik"). Wird auf jeder Seite als letztes Stylesheet geladen.
   Zentrale Werte stehen in :root, die Zielstellen in wenigen Sammelregeln darunter. Regeln dazu:
   - backdrop-filter nur auf kleinen bis mittleren, nicht haftenden Flächen (Kopfzeile, Meldungen, Gemeinnützigkeit,
     Bauteiltexte, Ergänzungen, Kontaktkarten, Knöpfe, Fotonachweise). Die haftenden Stapelkarten der Leistungsseite
     (je 100svh, vier übereinander) tragen die Glas-Optik ohne backdrop-filter: durchscheinender Verlauf, Innenkante,
     Lichtkante oben, mehrlagiger Schatten. So stapeln sich beim Scrollen keine großen Filterflächen.
   - Ohne backdrop-filter (@supports) und bei prefers-reduced-transparency: deckende Navy-Fläche, Text bleibt lesbar.
   - Marke bleibt: Navy und Rot, die rote Leiterbahn unverändert. */
:root{
  --glas-flaeche: rgba(23,30,69,.46);          /* Navy-dunkel #171E45, durchscheinend */
  --glas-flaeche-dicht: rgba(23,30,69,.62);
  --glas-flaeche-stapel: rgba(32,41,87,.82);   /* Navy #202957, ohne Filter: dichter, damit Text auf Nebel lesbar bleibt */
  --glas-flaeche-stapel-dunkel: rgba(23,30,69,.86);
  --glas-filter: blur(20px) saturate(170%);
  --glas-filter-klein: blur(14px) saturate(160%);
  --glas-kante: rgba(255,255,255,.14);
  --glas-kante-hell: rgba(255,255,255,.22);
  --glas-licht: linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 32%,rgba(255,255,255,0) 60%);
  --glas-schatten: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(5,8,28,.30), 0 10px 24px -8px rgba(5,8,28,.45), 0 30px 70px -24px rgba(5,8,28,.60);
  --glas-schatten-klein: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(5,8,28,.25), 0 8px 20px -10px rgba(5,8,28,.5);
  --glas-glut: 0 0 0 1px rgba(208,29,36,.55), 0 0 46px -6px rgba(208,29,36,.42);
  --glas-radius: 26px;
  --glas-deckend: #1b2350;
}

/* ---------- Grundebene: mittlere Karten mit Filter ---------- */
.meldung,.kreis__akzent,.bauteil__text,.abzweig,.ergaenzung,.partner-karte,.info-panel{
  background:var(--glas-licht),var(--glas-flaeche);
  -webkit-backdrop-filter:var(--glas-filter);backdrop-filter:var(--glas-filter);
  border:1px solid var(--glas-kante);border-radius:var(--glas-radius);box-shadow:var(--glas-schatten)}

/* Bauteiltexte und Abzweig hatten keine eigene Fläche: Innenabstand dazu */
.bauteil__text,.abzweig{padding:clamp(1.25rem,2.2vw,2rem)}
.bauteil__text{align-self:start}

/* ---------- Kopfzeile: mehr Milchglas, Lichtkante unten ---------- */
.kopf{background:color-mix(in srgb,var(--navy-dunkel) 64%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);
  border-bottom:1px solid var(--glas-kante);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04),0 10px 30px -18px rgba(5,8,28,.7)}

/* ---------- Knöpfe, Sprachumschalter, Fotonachweise: kleine Glasflächen ---------- */
.knopf--geist,.sprachwahl__liste{background:var(--glas-licht),rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--glas-filter-klein);backdrop-filter:var(--glas-filter-klein);
  border:1px solid var(--glas-kante-hell);box-shadow:var(--glas-schatten-klein)}
.kopf__cta{-webkit-backdrop-filter:var(--glas-filter-klein);backdrop-filter:var(--glas-filter-klein);box-shadow:var(--glas-schatten-klein)}
.bild-nachweis{background:rgba(12,16,48,.72);-webkit-backdrop-filter:var(--glas-filter-klein);backdrop-filter:var(--glas-filter-klein);
  border-top:1px solid var(--glas-kante);border-left:1px solid var(--glas-kante);border-top-left-radius:12px}
.bauteil__bild,.ergaenzung__foto,.ergaenzung__bild>img{box-shadow:0 0 0 1px var(--glas-kante),0 24px 50px -20px rgba(5,8,28,.65)}

/* ---------- Stapelkarten (Leistungen): Glas-Optik ohne Filter ---------- */
.stapel__karte-inner{background:var(--glas-licht),var(--glas-flaeche-stapel);border:1px solid var(--glas-kante);border-radius:var(--glas-radius);box-shadow:var(--glas-schatten)}
.stapel__karte-halt:nth-child(even) .stapel__karte-inner{background:var(--glas-licht),var(--glas-flaeche-stapel-dunkel)}

/* ---------- Aktuell: drei Karten in derselben Glas-Sprache ---------- */
html.js:not(.rm) .meldung{border-color:var(--glas-kante);box-shadow:var(--glas-schatten)}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung,html.js .meldung:has(> .meldung__knoten.an),html:not(.js) .meldung,html.rm .meldung{
  border-color:rgba(208,29,36,.75);box-shadow:var(--glas-glut),var(--glas-schatten)}
/* Gemeinnützigkeit: dieselbe Glaskarte, betont über einen warmen roten Verlauf und den roten Rand, keine helle Vollfläche */
.meldung--hell{color:var(--creme);
  background:radial-gradient(130% 80% at 100% 0%,rgba(208,29,36,.42),rgba(208,29,36,0) 64%),radial-gradient(90% 60% at 0% 100%,rgba(208,29,36,.16),rgba(208,29,36,0) 60%),var(--glas-licht),var(--glas-flaeche-dicht);
  border-color:rgba(208,29,36,.6)}
html.js:not(.rm) .meldung--hell{border-color:rgba(208,29,36,.6);box-shadow:0 0 34px -10px rgba(208,29,36,.35),var(--glas-schatten)}
.meldung--hell .meldung__kennung{color:#f3c9c9}
.meldung--hell .meldung__titel{color:var(--creme)}
.meldung--hell .meldung__text{color:color-mix(in srgb,var(--creme) 84%,transparent)}
.meldung--hell .bauteil__link{color:var(--creme)}
html.js:not(.rm) .meldung--hell .meldung__lampe{background:color-mix(in srgb,var(--creme) 28%,transparent)}
/* Ein-Zustand nach der Zeile darüber erneut setzen (gleiche Spezifität, die spätere Regel gewinnt) */
html .aktuell__karten:has(> .aktuell__knoten.an) .meldung--hell .meldung__lampe,html.js .meldung--hell:has(> .meldung__knoten.an) .meldung__lampe{background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung--hell,html.js .meldung--hell:has(> .meldung__knoten.an),html:not(.js) .meldung--hell,html.rm .meldung--hell{
  border-color:rgba(208,29,36,.9);box-shadow:0 0 0 1px rgba(208,29,36,.6),0 0 72px -6px rgba(208,29,36,.55),var(--glas-schatten)}

/* ---------- Gemeinnützigkeit im Kreis: dunkles Milchglas, rote Glut am Rand, große weiße 11 ---------- */
.kreis__akzent{color:var(--creme);
  background:radial-gradient(90% 120% at 0% 0%,rgba(208,29,36,.26),rgba(208,29,36,0) 55%),radial-gradient(70% 90% at 100% 100%,rgba(208,29,36,.14),rgba(208,29,36,0) 60%),var(--glas-licht),var(--glas-flaeche-dicht);
  border:1px solid rgba(208,29,36,.55);box-shadow:var(--glas-glut),var(--glas-schatten)}
html.js:not(.rm) .kreis__akzent{border-color:var(--glas-kante-hell);box-shadow:var(--glas-schatten)}
html.js .kreis__akzent:has(> .kreis__akzent-knoten.an){border-color:rgba(208,29,36,.75);box-shadow:var(--glas-glut),0 0 90px -20px rgba(208,29,36,.45),var(--glas-schatten)}
.kreis .kreis__akzent .label{color:#f3c9c9}
.kreis__akzent .h2{color:var(--creme)}
.kreis__akzent-satz{color:color-mix(in srgb,var(--creme) 86%,transparent)}
.kreis__akzent-zahl b{color:var(--creme);text-shadow:0 0 28px rgba(208,29,36,.75),0 0 2px rgba(208,29,36,.6)}
.kreis__akzent-zahl span{color:color-mix(in srgb,var(--creme) 86%,transparent)}
.kreis__akzent-namen li{color:var(--creme);background:var(--glas-licht),rgba(255,255,255,.07);border:1px solid var(--glas-kante-hell);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 12px -6px rgba(5,8,28,.6)}
html.js:not(.rm) .kreis__akzent-namen li::before{background:color-mix(in srgb,var(--creme) 30%,transparent)}

/* ---------- Rückfall ohne backdrop-filter ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .meldung,.kreis__akzent,.bauteil__text,.abzweig,.ergaenzung,.partner-karte,.info-panel,.meldung--hell{background-color:var(--glas-deckend)}
  .meldung,.bauteil__text,.abzweig,.ergaenzung,.partner-karte,.info-panel{background:var(--glas-licht),var(--glas-deckend)}
  .kopf{background:var(--navy-dunkel)}
  .bild-nachweis{background:rgba(12,16,48,.9)}
  .knopf--geist,.sprachwahl__liste{background:var(--glas-deckend)}
}
/* ---------- Weniger Transparenz gewünscht: deckend, ohne Filter ---------- */
@media (prefers-reduced-transparency:reduce){
  .meldung,.kreis__akzent,.bauteil__text,.abzweig,.ergaenzung,.partner-karte,.info-panel,.kopf,.knopf--geist,.sprachwahl__liste,.bild-nachweis,.kopf__cta{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .meldung,.bauteil__text,.abzweig,.ergaenzung,.partner-karte,.info-panel,.knopf--geist,.sprachwahl__liste{background:var(--glas-deckend)!important}
  .meldung--hell,.kreis__akzent{background:linear-gradient(135deg,#3a1f3e,var(--glas-deckend) 55%)!important}
  .kopf{background:var(--navy-dunkel)!important}
  .bild-nachweis{background:#0c1030!important}
  .stapel__karte-inner{background:var(--navy)!important}
  .stapel__karte-halt:nth-child(even) .stapel__karte-inner{background:var(--navy-dunkel)!important}
}
@media (max-width:899px){
  :root{--glas-radius:22px}
  .bauteil__text,.abzweig{padding:1.1rem 1.05rem}
}