/* ethik-banken.de — ein Stylesheet, keine externe Abhängigkeit.
   Farbwelt aus der Bildmarke: das Olivgrün rgb(143,172,13) der Blüte,
   für Text auf hellem Grund abgedunkelt, dazu ein warmes Ziegelrot als
   Warnfarbe. Alle Werte unten sind gegen den jeweiligen Grund gemessen und
   erreichen mindestens 4,5:1 — das Logo-Grün selbst käme nur auf 2,45:1
   und taugt deshalb NICHT für Text, nur als Fläche (siehe Fußzeile). */

/* ───────────────────────────── Marken ───────────────────────────── */

:root {
  --grund:          #faf9f3;
  --flaeche:        #ffffff;
  --flaeche2:       #f1f2e4;
  --text:           #1a1f12;
  --text-leise:     #5c6450;  /* 5,87:1 */
  --linie:          #e4e5d2;
  --linie-stark:    #c7cbad;
  --akzent:         #5a6f07;  /* 5,36:1 */
  --akzent-hell:    #edf2d9;
  --akzent-tief:    #42510a;  /* 8,25:1 */
  --marke-gruen:    #8fac0d;  /* Blüte und Fußzeile — nur als Fläche */
  --signal:         #a83a22;  /* 6,05:1 — Warnungen, Ausschlüsse */
  --signal-hell:    #fbeae5;
  --gut:            #2f7a52;  /* 4,94:1 — bewusst kühler als der Akzent */
  --gut-hell:       #e6f2ea;
  --warn:           #8a6410;  /* 5,09:1 */
  --warn-hell:      #f8f0dd;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rund:   14px;
  --rund-s: 9px;
  --bahn:   1120px;
  --schatten: 0 1px 2px rgba(20, 30, 30, .04);
}

:root:not([data-theme="hell"]) {
  color-scheme: light;
}

[data-theme="dunkel"] {
  --grund:          #12150e;
  --flaeche:        #1a1e14;
  --flaeche2:       #232818;
  --text:           #e9ecdf;
  --text-leise:     #a0a78f;  /* 7,39:1 */
  --linie:          #2e3423;
  --linie-stark:    #454d36;
  --akzent:         #a9c825;  /* 9,63:1 */
  --akzent-hell:    #1e2610;
  --akzent-tief:    #c3dd4d;
  --marke-gruen:    #8fac0d;
  --signal:         #e8826a;  /* 6,87:1 */
  --signal-hell:    #2a1a14;
  --gut:            #5cc28c;  /* 8,38:1 */
  --gut-hell:       #152620;
  --warn:           #d6a74a;  /* 8,33:1 */
  --warn-hell:      #26200f;

  --schatten: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ───────────────────────────── Grundlagen ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem); margin-top: 0; }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 650; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-tief); }

strong { font-weight: 650; }

:focus-visible {
  outline: 2.5px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 3px;
}

.bahn {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--akzent);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--rund-s);
}
.sprungmarke:focus { left: 12px; }

/* Nur für Hilfsmittel, nicht sichtbar. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ───────────────────────────── Kopf ───────────────────────────── */

.kopf {
  /* Höhe der Kopfzeile: `min-height` der Bahn plus deren Trennlinie. Das
     Klappmenü am Handy beginnt genau darunter. */
  --kopf-h: 79px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf-bahn {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  min-height: 78px;
}

.marke {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  border-radius: 8px;
}
/* 56px, damit der Claim „soziale Geldanlagen für die Welt" lesbar bleibt —
   bei 38px war er nur noch ein grauer Strich. */
.marke img {
  display: block;
  width: auto;
  height: 56px;
}
/* Das PNG trägt dunkle Schrift — im Dunkelmodus braucht es einen hellen
   Grund, sonst ist der Schriftzug weg. Die Blüte behält so ihre Farben. */
[data-theme="dunkel"] .marke {
  background: #f4f5ef;
  padding: 5px 9px;
  margin-inline-start: -4px;
}
@media (max-width: 640px) { .marke img { height: 44px; } }

.nav {
  display: flex;
  gap: clamp(4px, 1.6vw, 18px);
  margin-inline-start: auto;
}
/* Der Menüschalter erscheint erst am Handy — hier ist er aus dem Weg. */
.menue-feld,
.menue-knopf { display: none; }

/* ── Klappmenü am Handy ────────────────────────────────────────────────────
   Vorher lief die Navigation hier als seitlich scrollende Leiste: „Ratgeber"
   war angeschnitten, und die Unterpunkte der Bereiche waren überhaupt nicht
   erreichbar, weil sie am Zeigegerät hängen. Jetzt klappt ein Kontrollkästchen
   die ganze Navigation auf, Haupt- und Unterpunkte untereinander. */
@media (max-width: 860px) {
  /* Der Menüknopf sitzt außen rechts — dort wird er gesucht. Der
     Erscheinungsbild-Schalter rückt davor und schiebt beide nach rechts. */
  .thema-schalter { order: 7; margin-inline-start: auto; }
  .menue-knopf { order: 8; }

  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px 8px 13px;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    color: var(--text-leise);
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }
  .menue-knopf svg { width: 22px; height: 22px; flex: none; }
  .menue-knopf .sym-kreuz { display: none; }
  .menue-feld:checked ~ .menue-knopf .sym-balken,
  .menue-feld:checked ~ .menue-knopf .menue-wort { display: none; }
  .menue-feld:checked ~ .menue-knopf .sym-kreuz { display: inline; }
  /* Offen bleibt nur das Kreuz — quadratisch, damit es in der Ecke sitzt. */
  .menue-feld:checked ~ .menue-knopf { padding: 8px; }
  .menue-feld:checked ~ .menue-knopf {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
  }
  [data-theme="dunkel"] .menue-feld:checked ~ .menue-knopf { color: #09201f; }

  /* Nur optisch verborgen: Mit `display:none` wäre das Kästchen für die
     Tastatur verloren und der Knopf nicht mehr auslösbar. */
  .menue-feld {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    clip-path: inset(50%);
  }
  .menue-feld:focus-visible ~ .menue-knopf {
    outline: 2.5px solid var(--akzent);
    outline-offset: 2px;
  }

  .kopf-bahn { flex-wrap: wrap; row-gap: 0; }

  .nav { display: none; }

  /* `backdrop-filter` macht die Kopfzeile zum Bezugsrahmen für fest
     positionierte Nachkommen. Das Menü bezog sein `inset: 0` dadurch auf den
     Kopf statt auf den Bildschirm und war 131 statt 696 Pixel hoch. Solange
     das Menü offen ist, braucht die Kopfzeile die Unschärfe ohnehin nicht —
     dahinter liegt das deckende Menü. */
  .kopf:has(.menue-feld:checked) { backdrop-filter: none; background: var(--grund); }

  /* Das Menü ist ein Nachkomme der Kopfzeile und liegt damit zwangsläufig über
     deren Hintergrund — kein z-index ändert das. Die Menüpunkte rollten
     deshalb sichtbar durch die Kopfzeile hindurch. Dieses Feld legt den
     Hintergrund als eigene Lage ÜBER das Menü (40) und unter Marke und
     Schließknopf (41). Es misst sich an der Kopfzeile selbst und stimmt
     dadurch bei jeder Höhe. */
  .kopf:has(.menue-feld:checked)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
  }

  /* Das Menü ist ein Kind der Kopfzeile und liegt mit seinem z-index über
     seinen Geschwistern. Ohne diese Zeilen deckt es Marke und Schließen-Knopf
     zu: Der Knopf war sichtbar vorhanden, aber nicht anklickbar — gemessen mit
     `elementFromPoint`, nicht an der Geometrie, die davon nichts verrät.
     Die Marke steht im Quelltext VOR dem Kästchen; `~` erreicht sie nicht,
     darum für sie der Umweg über `:has()` an der Kopfzeile. */
  .kopf:has(.menue-feld:checked) .marke,
  .menue-feld:checked ~ .thema-schalter,
  .menue-feld:checked ~ .menue-knopf { position: relative; z-index: 41; }

  /* Das offene Menü ist höher als der Bildschirm — mit vier Bereichen und
     zwanzig Unterpunkten rund 1100 statt 700 Pixel. Im normalen Fluss hing
     deshalb die Hälfte unterhalb des Bildrands, und beim Scrollen bewegte sich
     die Seite dahinter mit. Als festes Feld füllt es den Bildschirm und rollt
     in sich; `overscroll-behavior: contain` hält den Schwung am Ende drin,
     statt ihn an die Seite weiterzureichen. Es liegt eine Lage unter der
     Kopfzeile (z-index 40), damit der Schließen-Knopf immer darüber steht. */
  .menue-feld:checked ~ .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 39;
    flex-direction: column;
    gap: 2px;
    width: auto;
    margin: 0;
    padding: calc(var(--kopf-h) + 12px) clamp(16px, 5vw, 28px) 40px;
    background: var(--grund);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav > .nav-punkt > a {
    display: block;
    padding: 11px 12px;
    font-size: 1.02rem;
    white-space: normal;
  }

  /* Die Darstellung der Unterpunkte steht weiter unten, hinter den
     Grundregeln — hier würde sie von ihnen überschrieben. */
}

.nav-punkt { position: relative; }

.nav > .nav-punkt > a,
.nav > a {
  display: inline-block;
  color: var(--text-leise);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 550;
  padding: 7px 10px;
  border-radius: var(--rund-s);
  white-space: nowrap;
}
.nav > .nav-punkt > a:hover { color: var(--text); background: var(--flaeche2); }
.nav > .nav-punkt > a[aria-current] {
  color: var(--akzent-tief);
  background: var(--akzent-hell);
  box-shadow: inset 0 -2px 0 var(--marke-gruen);
}

/* Untermenü: öffnet bei Mauszeiger UND bei Tastaturfokus im Punkt.
   Das padding-top überbrückt den Weg vom Hauptpunkt nach unten — ohne das
   schließt das Menü, sobald der Zeiger die Lücke überquert. */
.nav-unter {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  padding-top: 8px;
}
.nav-punkt:hover > .nav-unter,
.nav-punkt:focus-within > .nav-unter { display: block; }

.nav-unter > a {
  display: block;
  min-width: 232px;
  padding: 9px 14px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  background: var(--flaeche);
  border-inline: 1px solid var(--linie-stark);
}
.nav-unter > a:first-child {
  border-top: 1px solid var(--linie-stark);
  border-radius: var(--rund-s) var(--rund-s) 0 0;
  padding-top: 11px;
}
.nav-unter > a:last-child {
  border-bottom: 1px solid var(--linie-stark);
  border-radius: 0 0 var(--rund-s) var(--rund-s);
  padding-bottom: 11px;
  box-shadow: 0 12px 26px rgba(20, 28, 10, .14);
}
.nav-unter > a + a { border-top: 1px solid var(--linie); }
.nav-unter > a:hover { background: var(--akzent-hell); color: var(--akzent-tief); }
.nav-unter > a[aria-current] {
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--marke-gruen);
}

/* Am Handy klappen die Unterpunkte nicht beim Überfahren auf — es gibt kein
   Überfahren. Hier standen sie deshalb auf `display:none`, waren also gar nicht
   erreichbar. Seit die Navigation am Handy ein Klappmenü ist, ist Platz dafür:
   Die Unterpunkte stehen offen unter ihrem Bereich, eingerückt an einer Linie.
   Diese Regeln stehen bewusst HINTER den Grundregeln — als sie davor standen,
   gewann `.nav-unter { display: none }` und die Unterpunkte blieben weg. */
@media (max-width: 860px) {
  .nav-unter {
    display: block;
    position: static;
    padding: 2px 0 10px;
    margin: 0 0 4px 22px;
    border-inline-start: 2px solid var(--linie);
  }
  .nav-unter > a,
  .nav-unter > a:first-child,
  .nav-unter > a:last-child {
    min-width: 0;
    border: 0;
    border-radius: var(--rund-s);
    background: none;
    box-shadow: none;
    padding: 9px 12px;
    font-size: .93rem;
    /* Am Zeigegerät hält `nowrap` das Klappmenü einzeilig. In der schmalen
       Spalte am Handy schiebt es lange Namen wie „Pax-Bank für Kirche und
       Caritas" aus dem Bild und die ganze Seite nach rechts. */
    white-space: normal;
  }
  .nav-unter > a + a { border-top: 0; }
  .nav-unter > a[aria-current] {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    box-shadow: inset 3px 0 0 var(--marke-gruen);
  }
}

.thema-schalter {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text-leise);
  cursor: pointer;
}
.thema-schalter:hover { color: var(--text); border-color: var(--linie-stark); }

/* Am Handy passen Marke und vier Menüpunkte nicht in eine Zeile — dann
   bekommt die Navigation eine eigene, volle Zeile statt abgeschnitten zu werden. */
@media (max-width: 640px) {
  /* Ohne `min-height` ist die Kopfzeile hier niedriger — das Klappmenü setzt
     seinen oberen Abstand danach, deshalb wandert der Wert mit. */
  .kopf { --kopf-h: 65px; }
  .kopf-bahn { flex-wrap: wrap; padding-block: 10px; min-height: 0; row-gap: 2px; }
  .marke { font-size: 1.1rem; }
  .thema-schalter { margin-inline-start: auto; }
  .nav {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
    margin-inline: calc(clamp(16px, 4vw, 28px) * -1);
    padding-inline: clamp(16px, 4vw, 28px);
  }
  .nav { gap: 1px; }
  .nav a { padding-inline: 7px; font-size: .9rem; }
}
.thema-schalter svg { width: 19px; height: 19px; }
.thema-schalter .sym-mond { display: none; }
[data-theme="dunkel"] .thema-schalter .sym-sonne { display: none; }
[data-theme="dunkel"] .thema-schalter .sym-mond { display: block; }

/* ───────────────────────────── Abschnitte ───────────────────────────── */

section { padding-block: clamp(42px, 6vw, 76px); }
section + section { padding-top: 0; }
/* Der Seitenkopf endet ohne eigenen Abstand nach unten — sonst klebt die
   Dachzeile des nächsten Abschnitts direkt am Einleitungstext. */
.institut-kopf + section,
.held + section { padding-top: clamp(36px, 4.5vw, 60px); }

/* Ein Abschnittskopf steht immer über einem vollbreiten Raster oder einer
   Tabelle. Begrenzt man ihn auf Lesebreite, entsteht rechts daneben eine tote
   Fläche — deshalb läuft hier beides über die ganze Bahn. */
.abschnitt-kopf { max-width: none; margin-bottom: 30px; }
/* `text-wrap: balance` aus der h2-Grundregel würde eine Überschrift, für die
   der Platz längst reicht, auf zwei kurze Zeilen verteilen. */
.abschnitt-kopf h2 { max-width: none; text-wrap: normal; }
.abschnitt-kopf p { max-width: none; color: var(--text-leise); font-size: 1.08rem; }

/* Nur die langen Einleitungen über den Vergleichstabellen laufen zweispaltig.
   Ein zwei Zeilen kurzer Text ergäbe sonst zwei einzeilige Spalten. */
.abschnitt-kopf--breit p {
  columns: 2;
  column-gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 900px) {
  .abschnitt-kopf--breit p { columns: 1; }
}

.obertitel {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .7em;
}

/* ───────────────────────────── Aufmacher ───────────────────────────── */

.held { padding-block: clamp(46px, 7vw, 92px) clamp(32px, 4vw, 48px); }
.held-text { max-width: 66ch; }
.held h1 { margin-bottom: .35em; max-width: 19ch; }
.held-lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  color: var(--text-leise);
  max-width: 54ch;
}
.held-lead strong { color: var(--text); }

/* ───────────────────────────── Einstiegskarten ───────────────────────────── */

.einstieg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin-top: 36px;
}

/* Die Kachel ist KEIN Link. Verlinkt ist nur die Überschrift — damit der
   Ankertext aus dem Suchbegriff besteht und nicht aus dem ganzen Absatz.
   Klickbar ist die Kachel trotzdem: Der Anker legt über sie ein unsichtbares
   Feld (::after mit inset: 0). Kein JavaScript nötig, und Tastaturbedienung
   sowie Vorlesen betreffen weiterhin nur den Anker selbst. */
.einstieg-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  color: var(--text);
  box-shadow: var(--schatten);
  transition: border-color .15s, transform .15s;
}
.einstieg-karte:hover {
  border-color: var(--akzent);
  transform: translateY(-2px);
}
.einstieg-karte:has(a:focus-visible) {
  outline: 2.5px solid var(--akzent);
  outline-offset: 2px;
}

.einstieg-dach {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--akzent);
}
.einstieg-frage { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.einstieg-frage a {
  color: var(--text);
  text-decoration: none;
}
.einstieg-frage a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rund);
}
.einstieg-karte:hover .einstieg-frage a { color: var(--akzent); }
.einstieg-frage a:focus-visible { outline: none; }
.einstieg-text { font-size: .93rem; color: var(--text-leise); }
.einstieg-karte > .einstieg-pfeil {
  color: var(--akzent);
  font-size: 1.05rem;
  margin-top: auto;
  padding-top: 4px;
}

/* ───────────────────────────── Karten allgemein ───────────────────────────── */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 22px;
  box-shadow: var(--schatten);
  min-width: 0;
}

.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.karte h3 { margin-bottom: .2em; }
.karte h3 a { text-decoration: none; color: var(--text); }
.karte h3 a:hover { color: var(--akzent); text-decoration: underline; }

.karte-meta {
  font-size: .82rem;
  color: var(--text-leise);
  margin-bottom: 12px;
}
.karte-text { font-size: .97rem; color: var(--text-leise); }

.karte-werte {
  display: grid;
  gap: 2px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 16px 0 0;
  font-size: .92rem;
  border-top: 1px solid var(--linie);
  padding-top: 14px;
}
.karte-werte dt { color: var(--text-leise); }
.karte-werte dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ───────────────────────── Zeichen der Institute ─────────────────────────
   Echtes Logo, sobald eines unter assets/logos/ liegt; sonst ein eigenes
   Signet. Beide teilen sich Größe und Form, damit der Austausch nichts
   am Layout verschiebt. */

.logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
}
img.logo { object-fit: contain; background: #fff; padding: 4px; }
/* Für Marken, die nur in weißer Ausführung vorliegen — sonst unsichtbar. */
img.logo--dunkelgrund { background: #2a3315; padding: 7px; }

/* Die Höhe steht fest, die Breite folgt dem Seitenverhältnis der Datei.
   Vorher war die Fläche immer quadratisch, und ein Querformat-Logo schrumpfte
   darin auf seine Höhe: Die EthikBank (282 × 60) füllte 21 % der Fläche und war
   als Schriftzug nicht mehr zu lesen. `--v` setzt `eb_logo()` aus den echten
   Maßen; fehlt es — etwa beim Signet aus Kürzeln —, bleibt alles quadratisch. */
.logo { height: var(--logo-h); width: calc(var(--logo-h) * clamp(1, var(--v, 1), 2.8)); }
.logo--klein { --logo-h: 38px; font-size: .78rem; }
.logo--gross { --logo-h: 60px; font-size: 1.15rem; border-radius: 14px; }
.logo--zeile { --logo-h: 30px; font-size: .66rem; border-radius: 8px; }

.signet { border: 0; color: #fff; }
[data-theme="dunkel"] .signet { color: #0c1a1c; }
.signet[data-ton="1"] { background: #0f5c5c; }
.signet[data-ton="2"] { background: #2f6b4f; }
.signet[data-ton="3"] { background: #8a5a2b; }
.signet[data-ton="4"] { background: #45566b; }
.signet[data-ton="5"] { background: #6b4b6b; }
.signet[data-ton="6"] { background: #2c5b7a; }
[data-theme="dunkel"] .signet[data-ton="1"] { background: #4ec9bd; }
[data-theme="dunkel"] .signet[data-ton="2"] { background: #6cc090; }
[data-theme="dunkel"] .signet[data-ton="3"] { background: #d9a66a; }
[data-theme="dunkel"] .signet[data-ton="4"] { background: #94a9c0; }
[data-theme="dunkel"] .signet[data-ton="5"] { background: #bb97bb; }
[data-theme="dunkel"] .signet[data-ton="6"] { background: #7fb6d4; }

/* Kopfzeile einer Karte: Zeichen links, Titel daneben */
.karte-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  min-width: 0;
}
.karte-marke h3 { margin: 0; min-width: 0; }

/* Rangabzeichen */
.rang {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--sans);
}
[data-theme="dunkel"] .rang { color: #09201f; }
.rang--2 { background: var(--linie-stark); color: var(--text); }
.rang--3 { background: var(--flaeche2); color: var(--text-leise); border: 1px solid var(--linie); }

/* ───────────────────────────── Marker ───────────────────────────── */

.marker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
  vertical-align: 1px;
}
.marker--gut  { background: var(--gut-hell);  color: var(--gut); }
.marker--warn { background: var(--warn-hell); color: var(--warn); }
.marker--info { background: var(--akzent-hell); color: var(--akzent); }
.marker--aus  { background: var(--signal-hell); color: var(--signal); }

.pruefmarke {
  font-size: .68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--warn);
  background: var(--warn-hell);
  padding: 1px 5px;
  border-radius: 4px;
  cursor: help;
  white-space: nowrap;
}

.offen {
  color: var(--text-leise);
  font-style: italic;
  font-size: .92em;
  cursor: help;
  border-bottom: 1px dotted var(--linie-stark);
}

/* ───────────────────────────── Hinweisboxen ───────────────────────────── */

.hinweis {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--flaeche);
  border-radius: var(--rund-s);
  padding: 16px 20px;
  font-size: .97rem;
  margin-block: 24px;
}
/* Als <blockquote> verwendet (Zitat einer Richtlinienformulierung) würde sonst
   der Browser-Standardeinzug von 40px dazukommen. */
blockquote.hinweis { margin-inline: 0; }
.hinweis--warn { border-left-color: var(--signal); background: var(--signal-hell); }
.hinweis--merk { border-left-color: var(--warn); background: var(--warn-hell); }
.hinweis h4 { margin-bottom: .3em; }
/* Steht ein Hinweis direkt unter der h1, ist seine Überschrift strukturell eine
   h2 — aussehen soll sie wie jede andere Hinweis-Überschrift. */
.hinweis .wie-h4 {
  margin-bottom: .3em;
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 650;
}

/* ───────────────────────────── Werkzeugleiste ───────────────────────────── */

.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund) var(--rund) 0 0;
  border-bottom: 0;
}

.werkzeuge-titel {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-inline-end: 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .89rem;
  font-weight: 550;
  padding: 6px 13px;
  border: 1px solid var(--linie);
  border-radius: 100px;
  background: var(--grund);
  color: var(--text-leise);
  cursor: pointer;
  user-select: none;
}
.chip:hover { border-color: var(--linie-stark); color: var(--text); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
[data-theme="dunkel"] .chip:has(input:checked) { color: #09201f; }
.chip:has(input:focus-visible) { outline: 2.5px solid var(--akzent); outline-offset: 2px; }

.spaltenwahl { margin-inline-start: auto; position: relative; }
.spaltenwahl > summary {
  list-style: none;
  cursor: pointer;
  font-size: .89rem;
  font-weight: 550;
  padding: 6px 13px;
  border: 1px solid var(--linie);
  border-radius: 100px;
  color: var(--text-leise);
}
.spaltenwahl > summary::-webkit-details-marker { display: none; }
.spaltenwahl > summary::after { content: " ▾"; }
.spaltenwahl[open] > summary { border-color: var(--akzent); color: var(--akzent); }
.spaltenwahl-feld {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 230px;
  display: grid;
  gap: 2px;
  padding: 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-s);
  box-shadow: 0 10px 28px rgba(10, 20, 20, .14);
}
.spaltenwahl-feld label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: .92rem;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.spaltenwahl-feld label:hover { background: var(--flaeche2); }

.treffer { font-size: .88rem; color: var(--text-leise); }

/* ───────────────────────────── Tabelle ───────────────────────────── */

.tabellenhuelle {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: 0 0 var(--rund) var(--rund);
  background: var(--flaeche);
}

/* Auf der Faktenseite steht über der Tabelle keine Werkzeugleiste, also ist sie
   oben nicht abgeschnitten. */
.tabellenhuelle--schlicht { border-radius: var(--rund); margin: 24px 0 30px; }

table.vergleich,
table.fakten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}

table.fakten-tabelle th,
table.fakten-tabelle td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
table.fakten-tabelle thead th {
  background: var(--flaeche2);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
  border-bottom: 1px solid var(--linie-stark);
}
table.fakten-tabelle tbody th { font-weight: 650; }
table.fakten-tabelle tbody tr:last-child td,
table.fakten-tabelle tbody tr:last-child th { border-bottom: 0; }
table.fakten-tabelle tbody tr:hover { background: var(--flaeche2); }

table.vergleich th,
table.vergleich td {
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

table.vergleich thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche2);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
  border-bottom: 1px solid var(--linie-stark);
}

table.vergleich tbody tr:hover { background: var(--flaeche2); }
table.vergleich tbody tr:last-child td { border-bottom: 0; }

table.vergleich td.zahl,
table.vergleich th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.sortknopf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.sortknopf:hover { color: var(--akzent); }
.sortknopf::after { content: "↕"; opacity: .4; font-size: .9em; }
th[aria-sort="ascending"]  .sortknopf::after { content: "↑"; opacity: 1; color: var(--akzent); }
th[aria-sort="descending"] .sortknopf::after { content: "↓"; opacity: 1; color: var(--akzent); }

.institut { min-width: 190px; }
.zeilen-marke { display: flex; align-items: center; gap: 9px; min-width: 0; }
.institut a { font-weight: 600; text-decoration: none; }
.institut a:hover { text-decoration: underline; }
.institut small { display: block; color: var(--text-leise); font-size: .82rem; font-weight: 400; }

.ffg-wert { font-weight: 650; }

/* Beleg unter einem Datenblock: macht die Zahl nachprüfbar. */
.quelle {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-size: .82rem;
  color: var(--text-leise);
  word-break: break-word;
}
.quelle a { color: var(--text-leise); text-decoration-color: var(--linie-stark); }
.quelle a:hover { color: var(--akzent); }
p .quelle { border-top: 0; padding-top: 0; margin-top: 6px; }
.preiszelle { font-size: 1.02rem; font-weight: 600; }
.preiszelle small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-leise); }

.kriterienliste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 290px;
}

/* Mobil: Tabelle wird zur Kartenliste */
@media (max-width: 760px) {
  .tabellenhuelle { border: 0; background: none; overflow: visible; }
  /* Die Faktentabelle wird nicht zur Kartenliste — sie bleibt eine Tabelle und
     braucht deshalb ihren Rollbalken zurück, sonst schiebt sie die ganze Seite
     nach rechts. */
  .tabellenhuelle--schlicht {
    overflow-x: auto;
    border: 1px solid var(--linie);
    background: var(--flaeche);
  }
  table.vergleich { font-size: .95rem; }
  table.vergleich thead { display: none; }
  table.vergleich tbody tr {
    display: block;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: 6px 2px;
    margin-bottom: 12px;
  }
  table.vergleich tbody tr:hover { background: var(--flaeche); }
  table.vergleich td {
    display: grid;
    grid-template-columns: 11ch minmax(0, 1fr);
    gap: 12px;
    border-bottom: 0;
    padding: 6px 16px;
    text-align: left !important;
  }
  table.vergleich td::before {
    content: attr(data-spalte);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-leise);
    padding-top: 3px;
  }
  table.vergleich td.institut { border-bottom: 1px solid var(--linie); padding-bottom: 12px; }
  table.vergleich td.institut::before { content: none; }
  table.vergleich td.institut { display: block; }
  /* Muss nach den display-Regeln stehen: sonst schlägt `display: grid`
     das hidden-Attribut und abgewählte Spalten erscheinen am Handy wieder. */
  table.vergleich td[hidden], table.vergleich th[hidden] { display: none; }
  .kriterienliste { max-width: none; }
  /* Als flexible Reihe brechen die fünf verschieden breiten Chips hier in je
     eine eigene Zeile und bilden eine linksbündige Treppe; der Trefferzähler
     landet irgendwo daneben. Am Handy ist das Raster: Kopfzeile mit Titel und
     Zähler, darunter die Filter als gleich breite Liste. */
  .werkzeuge {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    border-radius: var(--rund);
    border-bottom: 1px solid var(--linie);
  }
  .werkzeuge-titel { grid-column: 1; grid-row: 1; margin-inline-end: 0; }
  .treffer { grid-column: 2; grid-row: 1; justify-self: end; }
  .werkzeuge .chip {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: var(--rund);
  }
  .spaltenwahl { grid-column: 1 / -1; margin-inline-start: 0; width: 100%; margin-top: 2px; }
  .spaltenwahl > summary { display: block; text-align: center; padding: 10px 14px; border-radius: var(--rund); }
  .spaltenwahl-feld { left: 0; right: auto; width: 100%; }
}

/* ───────────────────────────── Detailseite Institut ───────────────────────────── */

.institut-kopf {
  padding-block: clamp(32px, 5vw, 54px) 0;
}
.institut-marke {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: .45em;
  min-width: 0;
}
.institut-marke h1 { margin: 0; min-width: 0; }
.brotkrumen {
  font-size: .87rem;
  color: var(--text-leise);
  margin-bottom: 14px;
}
.brotkrumen a { color: var(--text-leise); }
.brotkrumen span { opacity: .5; margin-inline: 6px; }

.steckbrief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  margin-block: 28px;
}
.steckbrief > div {
  background: var(--flaeche);
  padding: 16px 18px;
  min-width: 0;
}
.steckbrief dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 3px;
}
.steckbrief dd { margin: 0; font-size: 1.02rem; font-weight: 550; }

.waage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.waage-teil { padding: 20px; border-radius: var(--rund); border: 1px solid var(--linie); }
.waage-teil h3 { font-family: var(--sans); font-size: 1rem; font-weight: 650; }
.waage-dafuer { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 25%, transparent); }
.waage-dafuer h3 { color: var(--gut); }
.waage-dagegen { background: var(--signal-hell); border-color: color-mix(in srgb, var(--signal) 25%, transparent); }
.waage-dagegen h3 { color: var(--signal); }

/* ───────────────────────────── Listen ───────────────────────────── */

.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.schritte > li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 22px 52px;
  border-left: 1px solid var(--linie);
  margin-left: 15px;
}
.schritte > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: -16px;
  top: 0;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: #fff;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
}
[data-theme="dunkel"] .schritte > li::before { color: #09201f; }
.schritte h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 650; margin-bottom: .25em; }
.schritte p { color: var(--text-leise); font-size: .97rem; }

/* Faktenseite: Begriff und Wert nebeneinander, damit sie auch maschinell
   eindeutig zuzuordnen sind. */
.fakten {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: 6px 22px;
  margin: 0 0 1.8em;
  padding: 16px 0 0;
  border-top: 1px solid var(--linie);
}
.fakten dt { font-weight: 650; color: var(--text-leise); }
.fakten dd { margin: 0; }
@media (max-width: 620px) {
  .fakten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fakten dd { margin-bottom: 12px; }
}

.fragenliste { max-width: 76ch; }
.fragenliste > details {
  border-bottom: 1px solid var(--linie);
  padding: 4px 0;
}
.fragenliste > details > summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.13rem;
  font-weight: 600;
  padding: 16px 34px 16px 0;
  position: relative;
  list-style: none;
}
.fragenliste > details > summary::-webkit-details-marker { display: none; }
.fragenliste > details > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--akzent);
}
.fragenliste > details[open] > summary::after { content: "–"; }
.fragenliste > details > div { padding: 0 0 18px; color: var(--text-leise); max-width: 68ch; }

/* 76ch statt 70: bei 1120px Bahn wirkten 70ch neben der vollbreiten Bühne
   darüber zu schmal. Darüber hinaus leidet die Lesbarkeit. */
.textbahn { max-width: 76ch; }

/* Variante für Fließtext, der neben einer vollbreiten Tabelle steht:
   Überschriften, Hinweiskästen und Zitate laufen über die ganze Bahn, nur die
   Absätze und Listen behalten Lesebreite. Dadurch verschwindet der leere
   Streifen rechts, ohne dass Zeilen 130 Zeichen lang werden. */
.textbahn--breit { max-width: none; }
.textbahn--breit > p,
.textbahn--breit > ul,
.textbahn--breit > ol { max-width: 88ch; }
.textbahn--breit > h2 { max-width: 34ch; }
.textbahn--breit > h3 { max-width: none; }
.textbahn--breit > .hinweis,
.textbahn--breit > blockquote { max-width: none; }

/* Die Kästen bekommen innen zwei Spalten, wenn Platz ist — sie tragen
   oft drei kurze Absätze und wirken sonst wie ein breites Band. */
@media (min-width: 1000px) {
  .textbahn--breit > .hinweis { columns: 2; column-gap: 40px; }
  .textbahn--breit > .hinweis h4 { column-span: all; }
}
.textbahn h2 { margin-top: 1.8em; }
.textbahn ul, .textbahn ol { padding-left: 1.3em; }
.textbahn li { margin-bottom: .45em; }

/* ───────────────────────────── Wege (Edelmetalle) ───────────────────────────── */

.wege { display: grid; gap: 16px; }
.weg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
@media (min-width: 820px) {
  .weg { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.weg-haupt h3 { margin-bottom: .3em; }
.weg-haupt > p { color: var(--text-leise); font-size: .97rem; }
.weg-rang {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .5em;
}
.weg-spalte h4 {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: .4em;
}
.weg-spalte p { font-size: .93rem; }

.siegelgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
/* Siegelkarten: gleicher Kopfaufbau in jeder Karte, damit die Einordnung
   immer an derselben Stelle steht und nicht je nach Namenslänge umbricht. */
.siegel-kopf {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 60px;
}
.siegel-kopf-text { min-width: 0; }
.siegel-kopf h3 { margin: 0 0 2px; }
.siegel-kopf .karte-meta { margin: 0; }
.siegel-einordnung { margin: 12px 0 0; }

.siegel-deckt { margin: 14px 0 0; padding: 0; list-style: none; font-size: .92rem; }
.siegel-deckt li { display: flex; gap: 8px; margin-bottom: 5px; }
.siegel-deckt li::before { content: "✓"; color: var(--gut); font-weight: 700; flex: none; }
.siegel-deckt.nicht li::before { content: "✕"; color: var(--signal); }

/* Verweis-Kasten (etwa auf edelmetall-preis.de) */
.verweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--akzent-hell);
  border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
  border-radius: var(--rund);
  margin-block: 28px;
}
.verweis-text { flex: 1 1 320px; min-width: 0; }
.verweis-text strong { display: block; font-family: var(--serif); font-size: 1.12rem; }
.verweis-text p { font-size: .95rem; color: var(--text-leise); margin: .2em 0 0; }
.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
  padding: 11px 20px;
  border-radius: 100px;
  white-space: nowrap;
}
[data-theme="dunkel"] .knopf { color: #09201f; }
.knopf:hover { background: var(--akzent-tief); color: #fff; }
[data-theme="dunkel"] .knopf:hover { color: #09201f; }
.knopf--leise {
  background: transparent;
  color: var(--akzent);
  border: 1px solid var(--akzent);
}
.knopf--leise:hover { background: var(--akzent-hell); color: var(--akzent); }

/* ───────────────────────────── Fuß ───────────────────────────── */

/* ───────────────────────── Bühne ─────────────────────────
   Seitenkopf mit Bild: H1 und Einleitung liegen auf dem Motiv. Damit der
   Text sicher lesbar bleibt, liegt unter ihm ein dunkler Verlauf ZUSÄTZLICH
   zum grünen Schleier — der Schleier allein vereinheitlicht die Farbe, aber
   nicht die Helligkeit, und ein heller Himmel sitzt genau dort, wo der Text
   anfängt. */

.buehne {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 42vw, 540px);
  padding-block: clamp(30px, 5vw, 60px);
  background: var(--akzent-tief);
  overflow: hidden;
}
.buehne--ohne-bild {
  background: none;
  min-height: 0;
  padding-block: clamp(32px, 5vw, 54px) 0;
  color: inherit;
}

.buehne-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
}
.buehne-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(18, 26, 6, .82) 0%, rgba(18, 26, 6, .42) 42%, rgba(18, 26, 6, .12) 100%),
    linear-gradient(to right, rgba(66, 81, 10, .5), rgba(66, 81, 10, .1));
}

.buehne-inhalt { position: relative; width: 100%; }
.buehne:not(.buehne--ohne-bild) .buehne-inhalt { color: #fff; }
.buehne:not(.buehne--ohne-bild) h1 { color: #fff; max-width: 20ch; }
.buehne:not(.buehne--ohne-bild) .held-lead { color: rgba(255, 255, 255, .93); max-width: 56ch; }
.buehne:not(.buehne--ohne-bild) .held-lead strong { color: #fff; }
.buehne:not(.buehne--ohne-bild) .brotkrumen,
.buehne:not(.buehne--ohne-bild) .brotkrumen a { color: rgba(255, 255, 255, .85); }
.buehne:not(.buehne--ohne-bild) h1,
.buehne:not(.buehne--ohne-bild) .held-lead { text-shadow: 0 2px 18px rgba(14, 20, 4, .55); }

/* ───────────────────────── Bildbänder ─────────────────────────
   Das Bild liegt unter einem Schleier in der Markenfarbe: Es soll die Seite
   tragen, nicht sie dominieren. Deshalb Deckkraft am Bild UND eine grüne
   Fläche darüber — beides zusammen ergibt den monochromen Eindruck, ohne dass
   das Bild in Graustufen umgerechnet werden müsste. */

.band {
  position: relative;
  overflow: hidden;
  background: var(--akzent-tief);
  isolation: isolate;
}
.band-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.band-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(66, 81, 10, .18), rgba(66, 81, 10, .55)),
    var(--marke-gruen);
  mix-blend-mode: multiply;
  opacity: .72;
}

/* Kopfstreifen der Übersichtsseiten */
.band { height: clamp(120px, 17vw, 210px); }
/* Großes Band der Startseite */
.band--hoch { height: clamp(220px, 30vw, 400px); }

.band-wort {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(18px, 3vw, 34px);
  color: #fff;
}
.band-wort p {
  max-width: 34ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, .9rem + 1.3vw, 1.95rem);
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(20, 28, 6, .5);
}
.band-wort strong { color: #e8f3b8; font-weight: 600; }

/* Transparenzangabe nach Art. 50 EU AI Act — gehört an jedes erzeugte Bild. */
.band-ki {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: .64rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  background: rgba(20, 28, 6, .32);
  padding: 2px 7px;
  border-radius: 4px;
  cursor: help;
}

/* Fußbereich: Der Waldboden läuft durch den ganzen Bereich — oben als freie
   Bildfläche, unten hinter den Spalten. Darüber derselbe Schleier wie auf den
   Bühnen (dunkler Verlauf plus grüner Farbstich), nur sanfter, damit vom Bild
   mehr stehen bleibt. Schrift weiß. */
.fuss {
  --fuss-text:  #ffffff;
  --fuss-leise: rgba(255, 255, 255, .82);
  --fuss-linie: rgba(255, 255, 255, .28);

  position: relative;
  isolation: isolate;
  margin-top: clamp(50px, 8vw, 96px);
  padding-top: clamp(150px, 18vw, 280px);   /* freie Bildfläche über den Spalten */
  padding-bottom: 34px;
  background: #1b2409;
  color: var(--fuss-text);
  font-size: .93rem;
  text-shadow: 0 1px 10px rgba(12, 18, 4, .5);
}
.fuss-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/bilder/fuss.webp") center 58% / cover no-repeat;
}
.fuss-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Gemessen am Bild selbst: Bei 0,70 Deckkraft erreicht weißer Text auch an
     der hellsten Stelle des unteren Bilddrittels noch 6,8:1 (im Mittel 16:1).
     Deshalb reicht dieser sanfte Verlauf — mehr Abdunklung würde nur Bild
     verschenken. Der grüne Schleier darunter dunkelt zusätzlich ab. */
  background:
    linear-gradient(to bottom, rgba(18, 26, 6, .04) 0%, rgba(18, 26, 6, .30) 48%,
                    rgba(18, 26, 6, .70) 100%),
    linear-gradient(to right, rgba(66, 81, 10, .42), rgba(66, 81, 10, .14));
}
[data-theme="dunkel"] .fuss-bild { filter: brightness(.86) saturate(.94); }
.fuss-bahn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 28px;
}
.fuss-spalte { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fuss-spalte strong {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fuss-leise);
  margin-bottom: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fuss-linie);
}
.fuss-spalte a { color: var(--fuss-text); text-decoration: none; }
.fuss-spalte a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.fuss a:focus-visible { outline-color: #fff; }
.fuss-wort { grid-column: span 2; }
.fuss-wort p { color: var(--fuss-leise); font-size: .89rem; }
.fuss-wort strong { color: var(--fuss-text); }
.fuss-stand { font-size: .83rem !important; }
@media (max-width: 620px) { .fuss-wort { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}