/* ============================================================
   Der Hausmeister Haake · Korrekturen
   Wird als letztes geladen und hat damit das letzte Wort.
   ============================================================ */

/* ------------------------------------------------------------
   1 · KOPFZEILE: kompakter Knopf, korrektes Ein- und Ausblenden
   ------------------------------------------------------------ */

/* Der Kopf-Knopf ist auf schmalen Geräten AUS – muss hinter
   .knopf-gruen stehen, sonst gewinnt dessen display-Wert. */
.kopf-cta { display: none !important; }
@media (min-width: 1280px) {
  .kopf-cta { display: inline-flex !important; }
}

/* Navigation erst zeigen, wenn sie wirklich passt (iPad quer: 1180px) */
@media (max-width: 1279px) {
  .haupt-nav { display: none; }
  .haupt-nav.offen { display: block; }
  .menue-schalter { display: inline-flex !important; }
}

/* Im Kopf so hoch wie der Umschalter und ohne Symbolkreise */
.kopf-cta {
  height: 46px;
  padding: 0 18px;
  font-size: .92rem;
  border-radius: 12px;
  border-width: 1px;
  box-shadow: none;
  gap: 0;
}
.kopf-cta::before { display: none; }
.kopf-cta .knopf-kreis { display: none; }
.kopf-cta:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------------------
   2 · FARBEN: EIN Knopfbild für beide Modi
       Grüne Fläche, immer weiße Schrift – nichts wechselt.
   ------------------------------------------------------------ */
.knopf-gruen {
  --kn-oben:        #55AF33;
  --kn-unten:       #3E8C22;
  --kn-oben-hover:  #5FBC3A;
  --kn-unten-hover: #468F27;
  --kn-kante:       #A5D65C;
  --kn-kante-hover: #B6E070;
  --kn-text:        #FFFFFF;
  --kn-kreis:       #EAF6DC;
  --kn-kreis-hover: #FFFFFF;
  --kn-symbol:      #2C6417;
  --kn-schatten:       0 4px 12px rgba(62, 140, 34, .22);
  --kn-schatten-hover: 0 7px 18px rgba(62, 140, 34, .28);
  --kn-schatten-aktiv: 0 2px 6px rgba(62, 140, 34, .26);
  color: var(--kn-text) !important;
}

/* Im Dunkelmodus dieselbe Fläche, nur minimal leuchtender –
   damit Schriftfarbe und Anmutung identisch bleiben. */
:root[data-theme="dark"] .knopf-gruen,
:root:not([data-theme="light"]) .knopf-gruen {
  --kn-oben:        #57B434;
  --kn-unten:       #3F9023;
  --kn-oben-hover:  #62C13D;
  --kn-unten-hover: #479728;
  --kn-kante:       #7EC44B;
  --kn-kante-hover: #96D662;
  --kn-text:        #FFFFFF;
  --kn-kreis:       #EAF6DC;
  --kn-kreis-hover: #FFFFFF;
  --kn-symbol:      #2C6417;
  --kn-schatten:       0 4px 14px rgba(88, 184, 56, .28);
  --kn-schatten-hover: 0 7px 20px rgba(88, 184, 56, .34);
  --kn-schatten-aktiv: 0 2px 6px rgba(88, 184, 56, .30);
}
.knopf-gruen .knopf-text { color: var(--kn-text); }

/* ------------------------------------------------------------
   3 · UMSCHALTER: Symbol füllt den Knopf
   ------------------------------------------------------------ */
.licht-schalter {
  width: 46px; height: 46px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  padding: 0;
}
.licht-schalter img {
  width: 100%; height: 100%;
  border-radius: 11px;
  object-fit: cover;
}
:root[data-theme="dark"] .licht-schalter { border-color: var(--gruen-linie); }

/* ------------------------------------------------------------
   4 · KOPFZEILE mobil: Logo, Umschalter, Menü – mehr nicht
   ------------------------------------------------------------ */
@media (max-width: 1119px) {
  .site-header .wrap { min-height: 68px; gap: 10px; }
  .marke .signet { width: 40px; height: 40px; }
  .marke strong { font-size: clamp(.86rem, 3.6vw, 1.05rem); }
  .kopf-aktionen { gap: 8px; }
  .licht-schalter, .menue-schalter { width: 42px; height: 42px; }
}
@media (max-width: 400px) {
  .marke strong { font-size: .8rem; letter-spacing: .02em; }
  .marke .signet { width: 34px; height: 34px; }
  .licht-schalter, .menue-schalter { width: 38px; height: 38px; }
  .licht-schalter img { border-radius: 9px; }
}

/* ------------------------------------------------------------
   5 · Knöpfe im Inhalt: schmal und kompakt
   ------------------------------------------------------------ */
.knopf-gruen {
  padding: 10px 16px;
  gap: 9px;
  font-size: .95rem;
  border-radius: 12px;
}
/* Der Textteil IM Knopf darf nichts vom Textlink-Stil erben
   (gleicher Klassenname, daher kam der Strich unter der Beschriftung). */
.knopf-gruen .knopf-text {
  white-space: nowrap;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0;
  background: none;
  text-decoration: none;
}
/* Blattkreis raus – macht den Knopf unnötig breit. Nur der Pfeil bleibt. */
.knopf-gruen .knopf-kreis--blatt { display: none; }
.knopf-gruen .knopf-kreis { width: 22px; height: 22px; }
.knopf-gruen .knopf-kreis svg { width: 12px; height: 12px; }
.knopf-gruen::before { height: 44%; border-radius: 11px 11px 60% 60% / 11px 11px 12px 12px; }

@media (max-width: 460px) {
  .knopf-gruen { padding: 10px 13px; font-size: .9rem; gap: 8px; }
  .knopf-gruen .knopf-kreis { width: 22px; height: 22px; }
  .knopf-gruen .knopf-kreis svg { width: 12px; height: 12px; }
}

/* ------------------------------------------------------------
   5b · Abstände auf kleinen Bildschirmen straffen
        (auf dem Handy wirkten die Abschnitte zu luftig)
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  section,
  .abschnitt      { padding: 26px 0; }
  /* zwei Abschnitte hintereinander addieren sonst 52px Leerraum */
  .abschnitt + .abschnitt:not(.abschnitt-weiss):not(.abschnitt-ziegel) { padding-top: 6px; }
  .abschnitt-weiss + .abschnitt:not(.abschnitt-weiss) { padding-top: 22px; }
  .leistungen     { padding: 24px 0 18px; }
  .auftakt        { padding: 18px 0 6px; }
  .seiten-kopf    { padding: 14px 0 20px; }
  .seiten-kopf h1 { margin-top: 8px; }
  .seiten-kopf .einleitung { margin-top: 10px; }
  /* erster Abschnitt schließt direkt an den Seitenkopf an */
  .seiten-kopf + section,
  .seiten-kopf + .abschnitt { padding-top: 18px; }

  .abschnitt-kopf { margin-bottom: 22px; }
  .abschnitt-kopf h2 { margin-top: 8px; }
  .abschnitt-kopf p  { margin-top: 10px; }

  .duo        { gap: 22px; }
  .duo h2     { margin-bottom: 12px; }
  .duo p + p  { margin-top: 10px; }
  .karten     { gap: 14px; margin-top: 16px; }
  .karte      { padding: 20px 18px 22px; }
  .referenz   { gap: 20px; padding: 24px 0; }
  .zahlen     { gap: 12px; margin-top: 18px; }
  .zahl       { padding: 16px 16px; }
  .punkte     { gap: 10px; margin-top: 16px; }
  .liste      { gap: 10px; margin-top: 16px; }
  .liste li   { padding: 13px 16px 13px 40px; }
  .notdienst  { padding: 26px 20px; gap: 16px; }
  .kontakt-raster { gap: 14px; }
  .kontakt-feld   { padding: 20px 18px; }
  .merkkasten     { padding: 24px 20px; }
  .merkmale       { gap: 12px; }
  .site-footer    { padding: 36px 0 0; }
  .site-footer .footer-haupt { gap: 26px; padding-bottom: 24px; }
}

/* Zeilenabstand im Fließtext auf dem Handy etwas enger */
@media (max-width: 560px) {
  body { line-height: 1.55; }
  .auftakt-text > p,
  .duo p, .karte p, .referenz p,
  .seiten-kopf .einleitung { line-height: 1.55; }
  h1, h2 { line-height: 1.12; }
}

/* ------------------------------------------------------------
   6 · Infoleiste mobil: nur das Nötigste
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .infoleiste { font-size: .78rem; }
  .infoleiste .wrap { gap: 8px; }
  .infoleiste a { font-size: .8rem; }
  .infoleiste .lang { display: none; }   /* verhindert den Überlauf nach rechts */
}

/* ------------------------------------------------------------
   7 · Kein seitliches Verschieben, kein Rauszoomen
       WICHTIG: overflow-x: clip statt hidden – hidden würde
       position: sticky im Kopf außer Kraft setzen.
   ------------------------------------------------------------ */
/* Kein overflow an html/body – das würde position: sticky im Kopf
   auf iOS abschalten. Der Überlauf ist an der Quelle behoben. */
html, body { max-width: 100%; overscroll-behavior-x: none; }

/* ------------------------------------------------------------
   7b · Infoleiste und Kopfzeile bleiben beim Scrollen oben
   ------------------------------------------------------------ */
.infoleiste {
  position: sticky;
  top: 0;
  z-index: 61;
}
.site-header {
  position: sticky;
  top: var(--infoleiste-hoehe, 38px);
  z-index: 60;
}
@media (max-width: 560px) {
  /* Leiste flacher, damit beide zusammen nicht zu viel Platz nehmen */
  .infoleiste .wrap { padding-top: 7px; padding-bottom: 7px; }
  .site-header { --infoleiste-hoehe: 34px; }
  .site-header .wrap { min-height: 60px; }
}

/* ------------------------------------------------------------
   8 · Hintergrundbild: fest im Blickfeld statt über die
       gesamte Seitenhöhe gestreckt (war mobil stark gezoomt)
   ------------------------------------------------------------ */
body { background-image: none !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/images/hintergrund-hell.jpg?v=202607300417");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
:root[data-theme="dark"] body::before { background-image: url("/images/hintergrund-dunkel.jpg?v=202607300417"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { background-image: url("/images/hintergrund-dunkel.jpg?v=202607300417"); }
}

/* Hochformat-Fassung für Handys und Tablets im Porträtmodus –
   das Querformat würde dort stark beschnitten. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  body::before { background-image: url("/images/hintergrund-hell-mobil.jpg?v=202607300417"); }
  :root[data-theme="dark"] body::before { background-image: url("/images/hintergrund-dunkel-mobil.jpg?v=202607300417"); }
}
@media (prefers-color-scheme: dark) {
  @media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    :root:not([data-theme="light"]) body::before { background-image: url("/images/hintergrund-dunkel-mobil.jpg?v=202607300417"); }
  }
}

/* Der Seitenhintergrund enthält Zaun und Ziegelmauer bereits –
   ein zusätzlicher Mauerstreifen im Referenzbereich wäre doppelt. */
.abschnitt-ziegel {
  position: relative;
  background-image: none !important;
}
.abschnitt-ziegel::before { content: none !important; }

/* ------------------------------------------------------------
   8b · Handy: Bild rückt nach oben neben die Merkmale,
        damit der erste Bildschirm nicht leer wirkt
   ------------------------------------------------------------ */
@media (max-width: 999px) {
  /* Reihenfolge frei sortierbar machen: Überzeile, Titel, Text,
     BILD, Knöpfe, Merkmale */
  .auftakt-raster { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .auftakt-text { display: contents; }
  .auftakt-text > * { align-self: stretch; }
  .auftakt-text > .ueberzeile { order: 1; }
  .auftakt-text > h1 { order: 2; margin-top: 12px; }
  .auftakt-text > p { order: 3; margin-top: 14px; }
  .auftakt-bild { order: 4; margin-top: 20px !important; }
  .auftakt-knoepfe { order: 5; margin-top: 20px; }
  .merkmale { order: 6; margin-top: 24px; }

  /* Bild über die volle Breite – ruhig und klar statt schwebend */
  .auftakt-bild {
    width: 100%;
    margin: 0;
  }
  .auftakt-bild img {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    object-position: center 42%;
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%, 0 34px);
  }
  .bild-plakette {
    left: auto; right: 8px; bottom: 8px;
    padding: 8px 12px 8px 9px; gap: 8px;
    border-radius: 10px;
  }
  .bild-plakette .kreis { width: 28px; height: 28px; }
  .bild-plakette .kreis svg { width: 15px; height: 15px; }
  .bild-plakette strong { font-size: .82rem; }
  .bild-plakette span { font-size: .78rem; }

}

/* ------------------------------------------------------------
   8e · Partikel bei Mausbewegung (Blätter und Ziegelsplitter)
   ------------------------------------------------------------ */
.maus-partikel {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.maus-partikel .teil {
  position: absolute;
  will-change: transform, opacity;
  animation-name: teil-treiben;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: forwards;
}
.maus-partikel .teil-blatt {
  background: var(--gruen);
  border-radius: 0 100% 0 100%;
  opacity: .55;
}
.maus-partikel .teil-stein {
  background: #B08055;
  border-radius: 1px;
  opacity: .45;
}
:root[data-theme="dark"] .maus-partikel .teil-blatt { background: var(--gruen-dunkel); opacity: .6; }
:root[data-theme="dark"] .maus-partikel .teil-stein { background: #C08F60; opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .maus-partikel .teil-blatt { background: var(--gruen-dunkel); opacity: .6; }
  :root:not([data-theme="light"]) .maus-partikel .teil-stein { background: #C08F60; opacity: .5; }
}

@keyframes teil-treiben {
  from { transform: translate(0, 0) rotate(0deg) scale(1); opacity: var(--start, .55); }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--dreh)) scale(.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .maus-partikel { display: none; }
}
@media (max-width: 560px) {
  .auftakt-bild img { aspect-ratio: 3 / 2; }
  .bild-plakette strong { font-size: .76rem; }
  .bild-plakette span { font-size: .73rem; }
}

/* ------------------------------------------------------------
   8c · Handy: Knopfpaare gleich groß, volle Breite
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .auftakt-knoepfe {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .auftakt-knoepfe > .knopf,
  .auftakt-knoepfe > .knopf-text {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
  }
  /* Textlink bekommt dieselbe Form wie der Knopf daneben */
  .auftakt-knoepfe > .knopf-text {
    border: 1.5px solid var(--gruen-linie);
    border-radius: 12px;
    padding: 0 16px;
    background: var(--flaeche);
  }
  :root[data-theme="dark"] .auftakt-knoepfe > .knopf-text {
    background: rgba(19, 42, 22, .93);
    border-color: var(--gruen-linie);
  }
}

/* ------------------------------------------------------------
   8d · Abschnittsflächen
        Die früheren Verlaufsmasken sind entfallen – sie erzeugten
        genau die störenden halbharten Kanten. Flächen und Kanten
        dieser Abschnitte gehören jetzt allein glas.css, damit es
        nur eine Quelle gibt und keine !important-Kette entsteht.
   ------------------------------------------------------------ */
.abschnitt-weiss { border-top: 0; border-bottom: 0; }

.leistungen {
  background: linear-gradient(180deg, rgba(75, 159, 46, 0) 0%, rgba(75, 159, 46, .05) 60%, rgba(75, 159, 46, 0) 100%) !important;
}
:root[data-theme="dark"] .leistungen {
  background: linear-gradient(180deg, rgba(88, 184, 56, 0) 0%, rgba(88, 184, 56, .07) 60%, rgba(88, 184, 56, 0) 100%) !important;
}

/* Der Mauerstreifen ist bereits über .abschnitt-ziegel::before {
   content: none } abgeschaltet – der Seitenhintergrund enthält die
   Ziegelmauer schon. Hier steht deshalb nichts mehr.

   Karten, Kontaktfelder, Zahlen, Listenpunkte und Merkkästen werden
   vollständig in glas.css beschrieben (Fläche, Kante, Radius, Schatten,
   beide Modi). Frühere Regeln an dieser Stelle standen mit !important
   dagegen und haben die Dunkelfassung der Karten blockiert. */

/* Kopfzeile und Infoleiste MÜSSEN deckend sein – sie bleiben beim
   Scrollen stehen, sonst scheint der Inhalt darunter durch. */
.site-header { background: #FFFFFF !important; backdrop-filter: none; }
.infoleiste  { background: #E9F4DC !important; }
:root[data-theme="dark"] .site-header { background: #0A1A0C !important; }
:root[data-theme="dark"] .infoleiste  { background: #081408 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: #0A1A0C !important; }
  :root:not([data-theme="light"]) .infoleiste  { background: #081408 !important; }
}
/* Der klebende Kopf liegt immer über allem anderen */
.infoleiste { z-index: 61; }
.site-header { z-index: 60; }
.blaetter, .maus-partikel { z-index: 0; }

/* ------------------------------------------------------------
   8f · Titelbild wechselt mit dem Modus: Tag bzw. Nacht
   ------------------------------------------------------------ */
.auftakt-bild { position: relative !important; overflow: hidden; border-radius: 14px; }
.auftakt-bild .titel-nacht {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0;
  transition: opacity .45s ease;
}
.auftakt-bild .titel-tag { transition: opacity .45s ease; }

/* Weiche Kanten statt hartem Schnitt */
.auftakt-bild img {
  clip-path: none !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

:root[data-theme="dark"] .auftakt-bild .titel-nacht { opacity: 1; }
:root[data-theme="dark"] .auftakt-bild .titel-tag   { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auftakt-bild .titel-nacht { opacity: 1; }
  :root:not([data-theme="light"]) .auftakt-bild .titel-tag   { opacity: 0; }
}

/* beide Bilder exakt deckungsgleich beschneiden */
.auftakt-bild img {
  object-fit: cover;
  object-position: center 46%;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .auftakt-bild .titel-tag, .auftakt-bild .titel-nacht { transition: none; }
}

/* ------------------------------------------------------------
   9 · Umschalter: Grafik füllt die Fläche randlos
   ------------------------------------------------------------ */
.licht-schalter {
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(30, 61, 42, .18);
}
.licht-schalter:hover { background: transparent; box-shadow: 0 2px 8px rgba(30, 61, 42, .26); }
.licht-schalter img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
:root[data-theme="dark"] .licht-schalter { box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* ============================================================
   9 · FIRMENLOGO
       Die Zeichnung des Kunden, unverändert übernommen.
       Sie steht auf hellem und dunklem Grund frei, deshalb
       dieselbe Datei in Kopfzeile und Fußzeile.
   ============================================================ */
.marke .signet,
.footer-marke .signet {
  width: auto !important;
  height: 56px;
  flex: none;
  object-fit: contain;
  border-radius: 0;
  background: none;
}
@media (max-width: 1119px) {
  .marke .signet { width: auto !important; height: 48px; }
}
@media (max-width: 400px) {
  .marke .signet { width: auto !important; height: 42px; }
}
.footer-marke .signet { height: 62px; }

/* ============================================================
   10 · SCHRIFTFARBEN UND KONTRASTE
        Ein System für beide Modi. Trennung zwischen
        --gruen  = Grün für Schrift, Symbole, feine Striche
        --gruen-flaeche = Grün für gefüllte Flächen mit weißer Schrift
        Beide Werte erfüllen WCAG AA (4.5:1 für Text, 3:1 für Grafik).
   ============================================================ */
:root {
  /* 5,9:1 auf Weiß · 5,4:1 auf #F2F8EA · 5,2:1 auf #E9F4DC */
  --gruen: #2C7317;
  /* Fläche für weiße Schrift: 4,7:1 am hellsten Punkt des Verlaufs */
  --gruen-flaeche: #37811E;
  /* Nebentext: 5,9:1 auf Weiß statt vorher 4,4:1 */
  --text-hell: #566A52;
}
:root[data-theme="dark"] {
  /* 8,9:1 auf #132A16 */
  --gruen: #8FD86A;
  /* bewusst identisch zum Hellmodus – ein Knopfbild, eine Schriftfarbe */
  --gruen-flaeche: #37811E;
  --text-hell: #A9BFA5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gruen: #8FD86A;
    --gruen-flaeche: #37811E;
    --text-hell: #A9BFA5;
  }
}

/* Sprungmarke, Anrufleiste und der Knopf im Notdienstkasten waren hier
   gefüllte grüne Flächen mit weißer Schrift. Sie sind jetzt Glas und
   werden vollständig in glas.css beschrieben, inklusive Schriftfarbe.
   Die Regel hier hatte mit .notdienst .knopf-gruen die höhere
   Spezifität und hielt die weiße Schrift auf hellem Glas fest. */
::selection { background: var(--gruen-flaeche); color: #FFFFFF; }
:root[data-theme="dark"] ::selection { background: var(--gruen-flaeche); color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection { background: var(--gruen-flaeche); color: #FFFFFF; }
}

/* Knopfverlauf etwas tiefer, damit weiße Schrift auch oben am Verlauf
   noch 4,5:1 erreicht – vorher waren es 2,8:1 am hellsten Punkt. */
.knopf-gruen {
  --kn-oben:        #3A8420;
  --kn-unten:       #2E6E18;
  --kn-oben-hover:  #42912A;
  --kn-unten-hover: #357B1E;
  --kn-kante:       #8FCB63;
  --kn-kante-hover: #A3D97A;
  --kn-text:        #FFFFFF;
}
:root[data-theme="dark"] .knopf-gruen,
:root:not([data-theme="light"]) .knopf-gruen {
  --kn-oben:        #3A8420;
  --kn-unten:       #2E6E18;
  --kn-oben-hover:  #42912A;
  --kn-unten-hover: #357B1E;
  --kn-kante:       #7BBE4F;
  --kn-kante-hover: #92D168;
  --kn-text:        #FFFFFF;
}

/* Der Glanz oben auf dem Knopf hellte die Fläche wieder auf und hat den
   Kontrast der Beschriftung gefressen – deutlich zurückgenommen. */
.knopf-gruen::before { opacity: .16; }

/* ============================================================
   11 · SCHRIFT: NUR SCHWARZ ODER WEISS
        Ausdrückliche Vorgabe. Keine Grüntöne, keine Graustufen
        in der Schrift. Die Rangfolge entsteht über Schriftgröße
        und Schriftschnitt, nicht über blassere Farben.
        Grün bleibt ausschließlich Fläche, Symbol und Zierstrich.
   ============================================================ */
:root {
  --schrift:     #000000;  /* auf hellen Flächen */
  --schrift-geg: #FFFFFF;  /* auf dunklen Flächen */
  --titel:     #000000;
  --text:      #000000;
  --text-hell: #000000;
}
:root[data-theme="dark"] {
  --schrift:     #FFFFFF;
  --schrift-geg: #FFFFFF;
  --titel:     #FFFFFF;
  --text:      #FFFFFF;
  --text-hell: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --schrift:     #FFFFFF;
    --schrift-geg: #FFFFFF;
    --titel:     #FFFFFF;
    --text:      #FFFFFF;
    --text-hell: #FFFFFF;
  }
}

/* Alles, was Schrift trägt, auf den Grundwert ziehen – damit auch die
   Stellen erfasst sind, die vorher feste Grün- oder Grauwerte hatten. */
body,
h1, h2, h3, h4, h5, h6,
p, li, a, span, strong, em, b, small, address, time, label,
figcaption, blockquote, td, th, dt, dd,
.ueberzeile, .mehr, .einleitung, .knopf-text, .zahl strong, .zahl span,
.marke strong, .haupt-nav a, .infoleiste, .infoleiste a, .bild-plakette span {
  color: var(--schrift) !important;
}

/* Früher standen hier Notdienstkasten, Fußzeile, Sprungmarke, Anrufleiste
   und die grünen Knöpfe auf „immer weiße Schrift", weil sie gefüllte
   dunkelgrüne Flächen waren. Seit sie Glas sind, gibt es im Hellmodus
   keine dunkle Fläche mehr. Die Schriftfarbe dieser Elemente folgt
   deshalb dem Modus und wird in glas.css gesetzt – schwarz im Hellmodus,
   weiß im Dunkelmodus. */

/* Der aktive Navigationspunkt wird über den grünen Unterstrich markiert,
   nicht mehr über eine grüne Schriftfarbe. */
.haupt-nav a[aria-current="page"],
.haupt-nav a:hover,
.infoleiste a:hover,
.knopf-text:hover,
.karte:hover h3,
.mehr:hover { color: var(--schrift) !important; }

/* Unterstreichungen tragen jetzt die Hervorhebung, da die Farbe es nicht
   mehr tut: Textlinks bleiben klar als Links erkennbar. */
.knopf-text { border-bottom-color: var(--gruen-flaeche); }
:root[data-theme="dark"] .knopf-text { border-bottom-color: #8FD86A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-text { border-bottom-color: #8FD86A; }
}

/* Die kleine Plakette am Titelbild sitzt auf weißer bzw. dunkler Fläche
   und folgt damit dem Grundwert – nur die Zeile darunter war grau. */
.bild-plakette strong,
.bild-plakette span { color: var(--schrift) !important; }