/* ============================================================
   Der Hausmeister Haake · Glasoberflächen
   Wird nach korrektur.css geladen und hat damit das letzte Wort.

   Zwei Aufgaben:
   1. Die weichgezeichneten Überblendungen (mask-image-Verläufe an
      Titelbild, weißen Bändern und Mauerstreifen) fliegen raus. Sie
      erzeugten genau die störenden, halbharten Kanten. Ersatz sind
      saubere runde Ecken mit overflow: hidden.
   2. Flächen werden zu mattem Glas: durchscheinend, mit Weichzeichner
      dahinter, Haarlinie als Kante und einem Lichtreflex an der
      Oberkante. Die Schrift bleibt strikt schwarz bzw. weiß.
   ============================================================ */

:root {
  /* Glas auf hellem Grund */
  --glas:            rgba(255, 255, 255, .58);
  --glas-dicht:      rgba(255, 255, 255, .74);
  --glas-kante:      rgba(255, 255, 255, .70);
  --glas-kante-fein: rgba(37, 68, 34, .10);
  --glas-reflex:     rgba(255, 255, 255, .85);
  --glas-schatten:      0 10px 34px rgba(37, 68, 34, .13);
  --glas-schatten-hoch: 0 18px 52px rgba(37, 68, 34, .20);
  --glas-weich: blur(22px) saturate(175%);
  --glas-radius:       20px;
  --glas-radius-gross: 26px;
}

:root[data-theme="dark"] {
  --glas:            rgba(16, 32, 18, .54);
  --glas-dicht:      rgba(12, 26, 14, .76);
  --glas-kante:      rgba(255, 255, 255, .14);
  --glas-kante-fein: rgba(255, 255, 255, .08);
  --glas-reflex:     rgba(255, 255, 255, .22);
  --glas-schatten:      0 10px 34px rgba(0, 0, 0, .46);
  --glas-schatten-hoch: 0 18px 52px rgba(0, 0, 0, .58);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glas:            rgba(16, 32, 18, .54);
    --glas-dicht:      rgba(12, 26, 14, .76);
    --glas-kante:      rgba(255, 255, 255, .14);
    --glas-kante-fein: rgba(255, 255, 255, .08);
    --glas-reflex:     rgba(255, 255, 255, .22);
    --glas-schatten:      0 10px 34px rgba(0, 0, 0, .46);
    --glas-schatten-hoch: 0 18px 52px rgba(0, 0, 0, .58);
  }
}

/* ------------------------------------------------------------
   1 · ÜBERBLENDUNGEN ENTFERNEN
       Alle Verlaufsmasken raus – sie waren die störenden Kanten.
   ------------------------------------------------------------ */
.abschnitt-weiss,
.abschnitt-ziegel::before,
.auftakt-bild img,
.auftakt-bild {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  -webkit-mask-composite: unset !important;
          mask-composite: unset !important;
}

/* Titelbild: kein Überblenden mehr. Je Modus ist genau ein Bild da,
   der Wechsel passiert ohne Weichzeichnung und ohne Zeitverlauf. */
.auftakt-bild .titel-tag,
.auftakt-bild .titel-nacht {
  transition: none !important;
  border-radius: 0 !important;
}
.auftakt-bild .titel-nacht { opacity: 0 !important; visibility: hidden; }
.auftakt-bild .titel-tag   { opacity: 1 !important; visibility: visible; }
:root[data-theme="dark"] .auftakt-bild .titel-nacht { opacity: 1 !important; visibility: visible; }
:root[data-theme="dark"] .auftakt-bild .titel-tag   { opacity: 0 !important; visibility: hidden; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auftakt-bild .titel-nacht { opacity: 1 !important; visibility: visible; }
  :root:not([data-theme="light"]) .auftakt-bild .titel-tag   { opacity: 0 !important; visibility: hidden; }
}

/* ------------------------------------------------------------
   2 · GLASFLÄCHEN
   ------------------------------------------------------------ */
/* Hinweis: korrektur.css setzt für dieselben Flächen bereits
   :root[data-theme="dark"]-Regeln mit !important. Deshalb stehen die
   Dunkelwerte hier mit derselben Selektorform und als literale Farben –
   ein var() plus niedrigere Spezifität hat sich als unzuverlässig
   erwiesen (die Karten blieben im Dunkelmodus weiß). */
.karte,
.kontakt-feld,
.zahl,
.liste li,
.merkkasten,
.bild-plakette,
.punkte li,
.referenz-karte {
  background: rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: var(--glas-weich);
          backdrop-filter: var(--glas-weich);
  border: 1px solid var(--glas-kante) !important;
  border-radius: var(--glas-radius) !important;
  box-shadow: var(--glas-schatten), inset 0 1px 0 var(--glas-reflex) !important;
}

:root[data-theme="dark"] .karte,
:root[data-theme="dark"] .kontakt-feld,
:root[data-theme="dark"] .zahl,
:root[data-theme="dark"] .liste li,
:root[data-theme="dark"] .merkkasten,
:root[data-theme="dark"] .bild-plakette,
:root[data-theme="dark"] .punkte li,
:root[data-theme="dark"] .referenz-karte {
  background: rgba(16, 32, 18, .54) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte,
  :root:not([data-theme="light"]) .kontakt-feld,
  :root:not([data-theme="light"]) .zahl,
  :root:not([data-theme="light"]) .liste li,
  :root:not([data-theme="light"]) .merkkasten,
  :root:not([data-theme="light"]) .bild-plakette,
  :root:not([data-theme="light"]) .punkte li,
  :root:not([data-theme="light"]) .referenz-karte {
    background: rgba(16, 32, 18, .54) !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }
}

/* Nur Anheben und Schatten wandern weich. Die Fläche NICHT animieren:
   sonst blendet beim Moduswechsel jede Karte 280 ms lang von hell nach
   dunkel über – genau die Art Überblendung, die störte. */
.karte { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--glas-schatten-hoch), inset 0 1px 0 var(--glas-reflex) !important;
}
.karte:hover { background: rgba(255, 255, 255, .74) !important; }
:root[data-theme="dark"] .karte:hover { background: rgba(20, 40, 22, .72) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte:hover { background: rgba(20, 40, 22, .72) !important; }
}

/* Das weiße Band wird ein eingerücktes Glaspaneel statt einer
   Fläche mit ausgefransten Kanten. */
.abschnitt-weiss {
  background: rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: var(--glas-weich);
          backdrop-filter: var(--glas-weich);
  border: 1px solid var(--glas-kante) !important;
  border-radius: var(--glas-radius-gross) !important;
  box-shadow: var(--glas-schatten), inset 0 1px 0 var(--glas-reflex) !important;
  width: calc(100% - 40px);
  max-width: var(--breite);
  margin-inline: auto;
}
:root[data-theme="dark"] .abschnitt-weiss {
  background: rgba(12, 26, 14, .58) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .abschnitt-weiss {
    background: rgba(12, 26, 14, .58) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }
}
@media (max-width: 700px) {
  .abschnitt-weiss { width: calc(100% - 24px); border-radius: 18px !important; }
}

/* Notdienst bleibt die dunkelgrüne, kräftige Fläche – aber als Glas
   und mit weißer Schrift, damit sie sich klar abhebt. */
.notdienst {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--glas-radius-gross) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: var(--glas-schatten), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* ------------------------------------------------------------
   3 · KOPFZEILE ALS GLAS
       Dichter als der Inhalt: die Leiste bleibt beim Scrollen ruhig.
   ------------------------------------------------------------ */
.infoleiste,
.site-header,
.haupt-nav.offen {
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
}
.infoleiste  { background: rgba(240, 248, 232, .82) !important; border-bottom: 1px solid var(--glas-kante-fein) !important; }
.site-header { background: rgba(255, 255, 255, .78) !important; border-bottom: 1px solid var(--glas-kante-fein) !important; }
.haupt-nav.offen {
  background: rgba(255, 255, 255, .90) !important;
  border-bottom: 1px solid var(--glas-kante-fein) !important;
  box-shadow: var(--glas-schatten);
}
:root[data-theme="dark"] .infoleiste      { background: rgba(8, 20, 8, .82) !important; }
:root[data-theme="dark"] .site-header     { background: rgba(10, 26, 12, .80) !important; }
:root[data-theme="dark"] .haupt-nav.offen { background: rgba(8, 20, 8, .93) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .infoleiste      { background: rgba(8, 20, 8, .82) !important; }
  :root:not([data-theme="light"]) .site-header     { background: rgba(10, 26, 12, .80) !important; }
  :root:not([data-theme="light"]) .haupt-nav.offen { background: rgba(8, 20, 8, .93) !important; }
}

/* ------------------------------------------------------------
   4 · BEDIENELEMENTE ALS GLAS
   ------------------------------------------------------------ */
.licht-schalter,
.menue-schalter,
.knopf-weiss {
  background: rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: var(--glas-weich);
          backdrop-filter: var(--glas-weich);
  border: 1px solid var(--glas-kante) !important;
  box-shadow: 0 4px 14px rgba(37, 68, 34, .10), inset 0 1px 0 var(--glas-reflex) !important;
}
:root[data-theme="dark"] .licht-schalter,
:root[data-theme="dark"] .menue-schalter,
:root[data-theme="dark"] .knopf-weiss {
  background: rgba(16, 32, 18, .58) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .licht-schalter,
  :root:not([data-theme="light"]) .menue-schalter,
  :root:not([data-theme="light"]) .knopf-weiss {
    background: rgba(16, 32, 18, .58) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  }
}
.licht-schalter { border-radius: 14px !important; }
.licht-schalter img { border-radius: 13px !important; }
.menue-schalter { border-radius: 14px !important; }
.knopf-weiss    { border-radius: 14px !important; }

/* Der grüne Knopf bekommt den Glasrand und den Reflex, bleibt aber
   deckend – weiße Schrift auf durchscheinendem Grün wäre nicht lesbar. */
.knopf-gruen {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 8px 22px rgba(46, 110, 24, .30), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}
.knopf-gruen:hover { box-shadow: 0 12px 30px rgba(46, 110, 24, .36), inset 0 1px 0 rgba(255, 255, 255, .38) !important; }

/* ------------------------------------------------------------
   5 · TITELBILD IM GLASRAHMEN
       Runde Ecke mit overflow: hidden statt Verlaufsmaske.
   ------------------------------------------------------------ */
.auftakt-bild {
  border-radius: var(--glas-radius-gross) !important;
  overflow: hidden !important;
  border: 1px solid var(--glas-kante);
  box-shadow: var(--glas-schatten-hoch), inset 0 1px 0 var(--glas-reflex);
}
.bild-plakette { border-radius: 16px !important; }

/* ------------------------------------------------------------
   6 · FUSSZEILE
   ------------------------------------------------------------ */
.site-footer {
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------------
   7 · OHNE backdrop-filter
       Dann muss die Fläche deckender sein, sonst leidet die Schrift.
   ------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte, .kontakt-feld, .zahl, .liste li, .merkkasten,
  .bild-plakette, .punkte li, .abschnitt-weiss,
  .licht-schalter, .menue-schalter, .knopf-weiss { background: rgba(255, 255, 255, .93) !important; }
  .infoleiste  { background: rgba(240, 248, 232, .97) !important; }
  .site-header { background: rgba(255, 255, 255, .97) !important; }
  :root[data-theme="dark"] .karte,
  :root[data-theme="dark"] .kontakt-feld,
  :root[data-theme="dark"] .zahl,
  :root[data-theme="dark"] .liste li,
  :root[data-theme="dark"] .merkkasten,
  :root[data-theme="dark"] .bild-plakette,
  :root[data-theme="dark"] .punkte li,
  :root[data-theme="dark"] .abschnitt-weiss,
  :root[data-theme="dark"] .licht-schalter,
  :root[data-theme="dark"] .menue-schalter,
  :root[data-theme="dark"] .knopf-weiss { background: rgba(14, 30, 16, .94) !important; }
  :root[data-theme="dark"] .infoleiste  { background: rgba(8, 20, 8, .97) !important; }
  :root[data-theme="dark"] .site-header { background: rgba(10, 26, 12, .97) !important; }
}

/* ------------------------------------------------------------
   8 · MODUSWECHSEL OHNE ÜBERBLENDUNG
       main.js setzt diese Klasse für zwei Bildschirmaufbauten, während
       data-theme umgestellt wird. Ohne sie blendet jede Fläche einzeln
       um und die Seite „schwimmt" beim Umschalten.
   ------------------------------------------------------------ */
:root.kein-uebergang,
:root.kein-uebergang *,
:root.kein-uebergang *::before,
:root.kein-uebergang *::after {
  transition: none !important;
  animation-duration: .001s !important;
  animation-delay: 0s !important;
}

/* ============================================================
   9 · NICHTS MEHR SOLIDE
       Ausdrückliche Vorgabe: die CTA-Felder werden komplett
       durchsichtig, keine gefüllten Flächen mehr. Damit gibt es im
       Hellmodus keine dunkle Fläche mehr – die Schrift ist überall
       schwarz, im Dunkelmodus überall weiß.
   ============================================================ */

/* --- Knöpfe: reines Glas, keine grüne Füllung, kein Glanz --- */
.knopf-gruen,
.knopf-gruen.kopf-cta,
.notdienst .knopf-gruen {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(44, 115, 23, .38) !important;
  box-shadow: 0 6px 20px rgba(37, 68, 34, .10), inset 0 1px 0 rgba(255, 255, 255, .80) !important;
}
.knopf-gruen::before,
.knopf-gruen::after { display: none !important; content: none !important; }
.knopf-gruen:hover {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(44, 115, 23, .58) !important;
  box-shadow: 0 10px 28px rgba(37, 68, 34, .16), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}
:root[data-theme="dark"] .knopf-gruen,
:root[data-theme="dark"] .knopf-gruen.kopf-cta,
:root[data-theme="dark"] .notdienst .knopf-gruen {
  border-color: rgba(143, 216, 106, .42) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
:root[data-theme="dark"] .knopf-gruen:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(143, 216, 106, .62) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-gruen,
  :root:not([data-theme="light"]) .knopf-gruen.kopf-cta,
  :root:not([data-theme="light"]) .notdienst .knopf-gruen {
    border-color: rgba(143, 216, 106, .42) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  }
  :root:not([data-theme="light"]) .knopf-gruen:hover {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(143, 216, 106, .62) !important;
  }
}

/* --- Notdienstkasten, Fußzeile, Sprungmarke, Anrufleiste: Glas --- */
.notdienst,
.site-footer,
.sprungmarke,
.anrufbalken,
.anrufbalken .a-tel,
.anrufbalken .a-mail {
  background: rgba(255, 255, 255, .46) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%);
          backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, .62) !important;
}
.notdienst   { border-color: rgba(44, 115, 23, .30) !important; }
.site-footer { border: 0 !important; border-top: 1px solid rgba(44, 115, 23, .22) !important; }
.sprungmarke { border-radius: 12px !important; }
.anrufbalken .a-tel,
.anrufbalken .a-mail { border-radius: 14px !important; }

:root[data-theme="dark"] .notdienst,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .sprungmarke,
:root[data-theme="dark"] .anrufbalken,
:root[data-theme="dark"] .anrufbalken .a-tel,
:root[data-theme="dark"] .anrufbalken .a-mail {
  background: rgba(14, 30, 16, .50) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}
:root[data-theme="dark"] .site-footer { border-top-color: rgba(255, 255, 255, .12) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notdienst,
  :root:not([data-theme="light"]) .site-footer,
  :root:not([data-theme="light"]) .sprungmarke,
  :root:not([data-theme="light"]) .anrufbalken,
  :root:not([data-theme="light"]) .anrufbalken .a-tel,
  :root:not([data-theme="light"]) .anrufbalken .a-mail {
    background: rgba(14, 30, 16, .50) !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }
  :root:not([data-theme="light"]) .site-footer { border-top-color: rgba(255, 255, 255, .12) !important; }
}

/* --- Symbolkreise: nicht mehr gefüllt --- */
.merkmal .kreis,
.kontakt-feld .kreis,
.bild-plakette .kreis,
.karte-kopf .kreis,
.knopf-kreis {
  background: rgba(255, 255, 255, .30) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
          backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(44, 115, 23, .28) !important;
}
:root[data-theme="dark"] .merkmal .kreis,
:root[data-theme="dark"] .kontakt-feld .kreis,
:root[data-theme="dark"] .bild-plakette .kreis,
:root[data-theme="dark"] .karte-kopf .kreis,
:root[data-theme="dark"] .knopf-kreis {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(143, 216, 106, .32) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .merkmal .kreis,
  :root:not([data-theme="light"]) .kontakt-feld .kreis,
  :root:not([data-theme="light"]) .bild-plakette .kreis,
  :root:not([data-theme="light"]) .karte-kopf .kreis,
  :root:not([data-theme="light"]) .knopf-kreis {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(143, 216, 106, .32) !important;
  }
}

/* --- Flächen insgesamt luftiger, damit der Garten durchkommt --- */
.karte, .kontakt-feld, .zahl, .liste li, .merkkasten,
.bild-plakette, .punkte li, .referenz-karte,
.abschnitt-weiss { background: rgba(255, 255, 255, .46) !important; }
:root[data-theme="dark"] .karte,
:root[data-theme="dark"] .kontakt-feld,
:root[data-theme="dark"] .zahl,
:root[data-theme="dark"] .liste li,
:root[data-theme="dark"] .merkkasten,
:root[data-theme="dark"] .bild-plakette,
:root[data-theme="dark"] .punkte li,
:root[data-theme="dark"] .referenz-karte,
:root[data-theme="dark"] .abschnitt-weiss { background: rgba(14, 30, 16, .48) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte,
  :root:not([data-theme="light"]) .kontakt-feld,
  :root:not([data-theme="light"]) .zahl,
  :root:not([data-theme="light"]) .liste li,
  :root:not([data-theme="light"]) .merkkasten,
  :root:not([data-theme="light"]) .bild-plakette,
  :root:not([data-theme="light"]) .punkte li,
  :root:not([data-theme="light"]) .referenz-karte,
  :root:not([data-theme="light"]) .abschnitt-weiss { background: rgba(14, 30, 16, .48) !important; }
}
.karte:hover { background: rgba(255, 255, 255, .62) !important; }
:root[data-theme="dark"] .karte:hover { background: rgba(20, 40, 22, .62) !important; }

/* --- Kopfzeilen bleiben etwas dichter: sie liegen beim Scrollen über
       dem Inhalt und dürfen nicht flimmern. Glas, aber ruhig. --- */
.site-header { background: rgba(255, 255, 255, .70) !important; }
.infoleiste  { background: rgba(240, 248, 232, .74) !important; }
:root[data-theme="dark"] .site-header { background: rgba(10, 26, 12, .72) !important; }
:root[data-theme="dark"] .infoleiste  { background: rgba(8, 20, 8, .76) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: rgba(10, 26, 12, .72) !important; }
  :root:not([data-theme="light"]) .infoleiste  { background: rgba(8, 20, 8, .76) !important; }
}

/* --- SCHRIFT: es gibt keine dunkle Fläche im Hellmodus mehr, also
       durchgehend schwarz bzw. weiß. Ersetzt die früheren
       „weiß auf grüner Fläche"-Regeln. --- */
.notdienst, .notdienst *,
.site-footer, .site-footer *,
.sprungmarke, .sprungmarke *,
.anrufbalken .a-tel, .anrufbalken .a-tel *,
.anrufbalken .a-mail, .anrufbalken .a-mail *,
.knopf-gruen, .knopf-gruen * { color: #000000 !important; }

:root[data-theme="dark"] .notdienst, :root[data-theme="dark"] .notdienst *,
:root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .site-footer *,
:root[data-theme="dark"] .sprungmarke, :root[data-theme="dark"] .sprungmarke *,
:root[data-theme="dark"] .anrufbalken .a-tel, :root[data-theme="dark"] .anrufbalken .a-tel *,
:root[data-theme="dark"] .anrufbalken .a-mail, :root[data-theme="dark"] .anrufbalken .a-mail *,
:root[data-theme="dark"] .knopf-gruen, :root[data-theme="dark"] .knopf-gruen * { color: #FFFFFF !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notdienst, :root:not([data-theme="light"]) .notdienst *,
  :root:not([data-theme="light"]) .site-footer, :root:not([data-theme="light"]) .site-footer *,
  :root:not([data-theme="light"]) .sprungmarke, :root:not([data-theme="light"]) .sprungmarke *,
  :root:not([data-theme="light"]) .anrufbalken .a-tel, :root:not([data-theme="light"]) .anrufbalken .a-tel *,
  :root:not([data-theme="light"]) .anrufbalken .a-mail, :root:not([data-theme="light"]) .anrufbalken .a-mail *,
  :root:not([data-theme="light"]) .knopf-gruen, :root:not([data-theme="light"]) .knopf-gruen * { color: #FFFFFF !important; }
}

/* Symbole in den Knöpfen und Kreisen folgen der Schriftfarbe, damit auf
   Glas nichts mehr in Weiß auf Hell verschwindet. */
.knopf-gruen svg, .knopf-kreis svg,
.notdienst svg, .site-footer svg { stroke: currentColor !important; }

/* --- Auch der zweite Knopf und der helle Knopf: durchsichtig ---
   korrektur.css gab dem Textlink im Auftakt auf schmalen Geräten eine
   deckend weiße Fläche (`background: var(--flaeche)`). Dadurch war er je
   Fensterbreite mal solide, mal transparent. Gleiche Selektorform, damit
   die Spezifität reicht. */
.knopf-weiss,
.auftakt-knoepfe > .knopf-text {
  background: transparent !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(44, 115, 23, .38) !important;
  box-shadow: 0 6px 20px rgba(37, 68, 34, .10), inset 0 1px 0 rgba(255, 255, 255, .80) !important;
}
.knopf-weiss:hover,
.auftakt-knoepfe > .knopf-text:hover {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(44, 115, 23, .58) !important;
}
:root[data-theme="dark"] .knopf-weiss,
:root[data-theme="dark"] .auftakt-knoepfe > .knopf-text {
  background: transparent !important;
  border-color: rgba(143, 216, 106, .42) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
:root[data-theme="dark"] .knopf-weiss:hover,
:root[data-theme="dark"] .auftakt-knoepfe > .knopf-text:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(143, 216, 106, .62) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-weiss,
  :root:not([data-theme="light"]) .auftakt-knoepfe > .knopf-text {
    background: transparent !important;
    border-color: rgba(143, 216, 106, .42) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  }
}

/* Umschalter und Menüknopf ebenfalls ohne Füllung */
.licht-schalter,
.menue-schalter { background: transparent !important; }
:root[data-theme="dark"] .licht-schalter,
:root[data-theme="dark"] .menue-schalter { background: transparent !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .licht-schalter,
  :root:not([data-theme="light"]) .menue-schalter { background: transparent !important; }
}

/* Wer Bewegung reduziert haben will, bekommt kein Anheben der Karten. */
@media (prefers-reduced-motion: reduce) {
  .karte { transition: none; }
  .karte:hover { transform: none; }
}