/* ===========================================================================
   Bausteine — Kopfzeile, Knöpfe, Badges, Karten, Formular, Fuß
   Nur var(--…) aus tokens.css. Selektoren bleiben einklassig, damit sich
   Abstände nicht gegenseitig überschreiben.
   =========================================================================== */

/* --- Kopfzeile ----------------------------------------------------------- */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.kopfzeile-innen {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: var(--sp-3) var(--w-rand);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: auto; height: 2.75rem; }

/* Navigation.
   Grundzustand ohne JavaScript: sichtbar, umbrechend. Erst wenn
   navigation.js die Schaltfläche eingesetzt hat, trägt die Kopfzeile die
   Klasse `menue-aktiv` — dann und nur dann wird zusammengefaltet. */

.navigation { margin-left: auto; }

.navigation ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
}

.navigation a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.navigation a:hover { background: var(--c-surface-alt); color: var(--c-text); }

.navigation a[aria-current="page"] {
  color: var(--c-accent-strong);
  font-weight: var(--fw-bold);
}

/* Die Schaltfläche entsteht erst durch JavaScript und bleibt auf breiten
   Schirmen verborgen. */
.menue-schalter {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
}

.menue-schalter:hover { background: var(--c-surface-alt); }

.menue-strich {
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

.kopfzeile-knopf { margin-left: var(--sp-2); }

/* Zusammengefalteter Zustand — nur mit JavaScript. */
.menue-aktiv .menue-schalter { display: inline-flex; }
.menue-aktiv .kopfzeile-knopf { display: none; }
.menue-aktiv .navigation { display: none; }

.menue-aktiv .navigation.offen {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  padding: var(--sp-3) var(--sp-6) var(--sp-5);
}

.menue-aktiv .navigation.offen ul { flex-direction: column; align-items: stretch; }
.menue-aktiv .navigation.offen a { padding: var(--sp-3); }

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.knopf-haupt {
  background: var(--c-accent-strong);
  color: var(--c-accent-contrast);
  box-shadow: var(--sh-sm);
}

.knopf-haupt:hover {
  background: var(--c-accent-hover);
  color: var(--c-accent-contrast);
}

.knopf-zweit {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.knopf-zweit:hover { background: var(--c-surface-alt); color: var(--c-text); }

.knopf-gross { font-size: var(--fs-base); padding: var(--sp-4) var(--sp-8); }

/* Mehrere Knöpfe nebeneinander. Eigene Klasse statt eines `style`-Attributs:
   die Richtlinie in .htaccess erlaubt kein Inline-CSS, ein solches Attribut
   würde vom Browser verworfen. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.pfeil { transition: transform var(--t-base) var(--ease); }
.knopf:hover .pfeil { transform: translateX(2px); }

/* --- Badge --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
}

.badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

.badge-zweit { background: var(--c-second-soft); color: var(--c-second-strong); }

/* --- Karte --------------------------------------------------------------- */

.karte {
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-base) var(--ease);
}

.karte:hover { box-shadow: var(--sh-md); }

.karte-text {
  margin-top: var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.karte-symbol {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sp-4);
  color: var(--c-accent);
}

/* --- Kopfbereich der Startseite ------------------------------------------ */

.kopfbild {
  border-radius: var(--r-xl);
  border: 8px solid var(--c-surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* --- Formular ------------------------------------------------------------ */

.feldgruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-5);
}

.feld { display: flex; flex-direction: column; gap: var(--sp-2); }

.feld > label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-sm);
}

.feld textarea { min-height: 8rem; resize: vertical; }

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible { border-color: var(--c-accent-strong); }

.feld-hinweis { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Fehler tragen immer Text, nie nur Farbe. */
.feld-fehler input,
.feld-fehler select,
.feld-fehler textarea { border-color: var(--c-danger); }

.fehlertext {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-danger);
}

.honigtopf {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formularkarte {
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.datenschutzhinweis {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --- Fußbereich ---------------------------------------------------------- */

.fussbereich {
  background: var(--c-surface-invers);
  color: var(--c-text-invers);
  padding-block: var(--sp-16) var(--sp-8);
  margin-top: var(--sp-24);
}

.fussbereich-innen {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--w-rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-8);
}

.fussbereich p { color: var(--c-text-invers-muted); font-size: var(--fs-sm); }

.fuss-marke {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--c-text-invers);
  margin-bottom: var(--sp-3);
}

.fuss-titel {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-invers);
  margin-bottom: var(--sp-3);
}

.fuss-liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.fuss-liste a {
  color: var(--c-text-invers-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.fuss-liste a:hover { color: var(--c-text-invers); text-decoration: underline; }

.fuss-zeile {
  max-width: var(--w-content);
  margin: var(--sp-12) auto 0;
  padding: var(--sp-5) var(--w-rand) 0;
  border-top: 1px solid var(--c-border-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
}

.fuss-zeile p { font-size: var(--fs-xs); }

/* --- Brotkrumen ---------------------------------------------------------- */

.brotkrumen {
  padding-block: var(--sp-5) 0;
  font-size: var(--fs-sm);
}

.brotkrumen ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  color: var(--c-text-muted);
}

.brotkrumen li + li::before {
  content: "/";
  margin-right: var(--sp-3);
  color: var(--c-text-subtle);
}

.brotkrumen a { color: var(--c-text-muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--c-accent-strong); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--c-text); font-weight: var(--fw-medium); }

/* --- Beitragsübersicht --------------------------------------------------- */

/* Neun Beiträge je Seite gehen in drei Spalten glatt auf. */
.beitragsliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .beitragsliste { grid-template-columns: repeat(3, 1fr); }
}

.beitragskarte {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-base) var(--ease);
}

.beitragskarte:hover { box-shadow: var(--sh-md); }

.beitragskarte-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.beitragskarte-bild img { width: 100%; height: 100%; object-fit: cover; }

.beitragskarte-text {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Die Stufe der Kartenüberschrift wechselt je Seite, damit keine Ebene
   übersprungen wird — die Gestaltung bleibt dieselbe. */
.beitragskarte :is(h2, h3, h4) { font-size: var(--fs-lg); }
.beitragskarte :is(h2, h3, h4) a { color: var(--c-text-strong); text-decoration: none; }
.beitragskarte :is(h2, h3, h4) a:hover { color: var(--c-accent-strong); }

/* --- Blätterung ---------------------------------------------------------- */

.blaetterung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.blaetterung-zahlen {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.blaetterung-zahlen a,
.blaetterung-zahlen span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.blaetterung-zahlen a { color: var(--c-text-muted); }
.blaetterung-zahlen a:hover { background: var(--c-surface-alt); color: var(--c-text); }

.blaetterung-zahlen [aria-current] {
  background: var(--c-accent-strong);
  color: var(--c-accent-contrast);
}

/* --- Beitrag ------------------------------------------------------------- */

.beitragsbild-gross {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.beitragsbild-gross img { width: 100%; height: auto; }

.beitragstext > * + * { margin-top: var(--sp-5); }
.beitragstext h2 { margin-top: var(--sp-10); }
.beitragstext h3 { margin-top: var(--sp-8); }

.beitragstext ul,
.beitragstext ol {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.beitragsbild {
  margin-block: var(--sp-8);
  border-radius: var(--r-md);
  overflow: hidden;
}

.beitragsbild img { width: 100%; height: auto; }

/* --- Fragen -------------------------------------------------------------- */

/* Kopf links, Fragen rechts. Eine einspaltige Liste läuft auf der breiten
   Seite bei --w-prose aus und lässt rechts daneben eine leere Fläche stehen. */
.fragen-layout {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .fragen-layout {
    grid-template-columns: minmax(18rem, 26rem) 1fr;
    gap: var(--sp-16);
  }

  /* Der Kopf bleibt stehen, während die Liste durchläuft. */
  .fragen-kopf {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

.fragen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.frage {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.frage summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  list-style: none;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
  content: "+";
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent-strong);
  flex: 0 0 auto;
}

.frage[open] summary::after { content: "\2212"; }

.frage-antwort {
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--c-text-muted);
}

.frage-antwort ul {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* --- Schrittliste (Tipps) ------------------------------------------------ */

.schrittliste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  counter-reset: schritt;
}

.schrittliste > li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.schritt-nummer {
  font-family: var(--f-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.schrittliste h2 { font-size: var(--fs-2xl); }

@media (max-width: 40rem) {
  .schrittliste > li { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* --- Listen mit Haken und Ortsliste ------------------------------------- */

.hakenliste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--sp-4);
  max-width: var(--w-content);
}

.hakenliste li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--sp-3);
  color: var(--c-text-muted);
}

.hakenliste li::before {
  content: "\2713";
  color: var(--c-accent-strong);
  font-weight: var(--fw-bold);
}

.ortsliste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ortsliste a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
}

.ortsliste a:hover { border-color: var(--c-accent-strong); color: var(--c-accent-strong); }

/* --- Markenband ---------------------------------------------------------- */

.markenband {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--sp-4);
  align-items: center;
}

.markenband li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.markenband img { width: 100%; height: auto; max-height: 2.5rem; object-fit: contain; }

/* --- Aufruf zum Formular ------------------------------------------------ */

.aufruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  background: var(--c-surface-invers);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
}

.aufruf h2 { color: var(--c-text-invers); }
.aufruf p { color: var(--c-text-invers-muted); }

/* Eine Karte trägt je Seite eine andere Überschriftenstufe. Die Größe kommt aus
   der Karte, nicht aus der Ebene. */
.karte :is(h2, h3) { font-size: var(--fs-xl); }

/* --- Formular: Meldungen, Fehlerübersicht, Bildliste ---------------------- */

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

legend {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  padding: 0 0 var(--sp-2);
}

.meldung {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
}

.meldung-gut {
  background: var(--c-surface-alt);
  border-color: var(--c-success);
  color: var(--c-success);
}

.meldung-schlecht {
  background: var(--c-surface-alt);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* Der Meldungsbereich ist leer, bis JavaScript etwas hineinschreibt. */
.meldung-bereich:empty { display: none; }

.fehler-uebersicht {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-danger);
  border-radius: var(--r-md);
  color: var(--c-danger);
  font-weight: var(--fw-medium);
}

.fehler-uebersicht ul {
  margin-top: var(--sp-3);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-weight: var(--fw-normal);
}

.fehler-uebersicht a { color: var(--c-danger); }

.bildliste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.bildliste li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.bildliste-groesse {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.bildliste-weg {
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.bildliste-summe {
  grid-template-columns: 1fr;
  background: none;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
}

.feld input[type="file"] {
  padding: var(--sp-2);
  font-size: var(--fs-sm);
}

button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --- Abschnittskopf ------------------------------------------------------ */

/* Augenbraue, Überschrift, Vorspann als feste Einheit. Bringt die Akzentfarbe
   auf die ganze Seite — vorher trug nur der Kopfbereich ein Badge, und alles
   darunter begann nackt mit einer Überschrift. */
.abschnittskopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* --- Nummerierte Schrittfolge -------------------------------------------- */

/* Die Ziffer trägt echte Information: die Schritte folgen zeitlich
   aufeinander. Deshalb steht sie groß da, statt drei gleich aussehende Karten
   nebeneinanderzustellen. */
.schrittfolge {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  counter-reset: schritt;
}

.schrittfolge > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  position: relative;
}

.schrittfolge-nummer {
  font-family: var(--f-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-accent-strong);
  background: var(--c-accent-soft);
  border-radius: var(--r-pill);
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.schrittfolge h3 { font-size: var(--fs-xl); }

@media (min-width: 64rem) {
  .schrittfolge { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
  .schrittfolge > li { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Verbindungslinie zwischen den Ziffern — zeigt, dass es eine Folge ist
     und keine Aufzählung. Endet vor der letzten Ziffer. */
  .schrittfolge > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: calc(3.5rem + var(--sp-4));
    right: calc(-1 * var(--sp-10) - var(--sp-4));
    height: 2px;
    background: var(--c-border);
  }
}

/* --- Symbol im getönten Kreis -------------------------------------------- */

.symbolkreis {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  margin-bottom: var(--sp-4);
}

.symbolkreis img { width: 1.75rem; height: 1.75rem; }

/* --- Invertierter Abschnitt ---------------------------------------------- */

/* Bricht die Folge heller Abschnitte auf. Bisher kam die dunkle Fläche nur im
   Fuß und im Aufruf vor. */
.abschnitt-invers {
  background: var(--c-surface-invers);
  color: var(--c-text-invers);
}

.abschnitt-invers h2,
.abschnitt-invers h3 { color: var(--c-text-invers); }
.abschnitt-invers .vorspann { color: var(--c-text-invers-muted); }
.abschnitt-invers .hakenliste li { color: var(--c-text-invers-muted); }
.abschnitt-invers .hakenliste li::before { color: var(--c-accent); }
.abschnitt-invers .feld-hinweis { color: var(--c-text-invers-muted); }

.abschnitt-invers .ortsliste a {
  background: transparent;
  border-color: var(--c-border-invers);
  color: var(--c-text-invers);
}

.abschnitt-invers .ortsliste a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Badge auf dunklem Grund: die helle Tönung trägt dort keinen Text. */
.badge-hell {
  background: var(--c-surface-invers-alt);
  color: var(--c-text-invers);
}

/* --- Markenband: Band statt Kästchen ------------------------------------- */

.markenband li {
  background: var(--c-surface);
  border: 0;
  box-shadow: var(--sh-sm);
}