/* Rahmenregeln aus einer Quelle (E2, 06.09.2026): Skip-Link, Navigation mit
   Burger, Rückruf-Knopf, Fußzeile und mobiler Kontakt-Balken. Der Bau setzt
   diesen Block an der Markerzeile "@rahmen" in landingpage.css ein und liefert
   ihn zusätzlich als assets/rahmen.css für die Rechtsseiten aus, die sfta.css
   laden. Ausschließlich Token aus tokens.css. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  transform: translateY(-200%);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--surface-0);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* NAVIGATION */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--surface-0-rgb), 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* Mobile-Fix 2026-05-08: padding shorthand vermieden, damit das horizontale
   Padding aus .container (0 1.5rem) erhalten bleibt. flex-direction, flex-wrap
   und gap stehen ausdrücklich, damit die Portal-Regeln aus sfta.css auf den
   Rechtsseiten nicht durchschlagen. */
.nav-inner { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
/* min-width: 0 lässt die Markenzeile im Flex-Layout umbrechen statt die Navigation zu verdrängen (E2). */
.wordmark-link { text-decoration: none; min-width: 0; }
.wordmark { font-family: 'Source Serif Pro', serif; font-weight: 700; font-size: 1.15rem; color: var(--brand-primary); letter-spacing: 0.01em; }
.wordmark-sub { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 0.1rem; }
/* Header-Siegel (Logo-Roll-out 2026-06-04) */
.wordmark-link, a.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-seal { height: 46px; width: 46px; flex: none; display: block; }
.wordmark-textwrap { display: flex; flex-direction: column; }
/* Abstand 1,5 rem statt 2 rem (E2): sechs Ziele plus Rückruf-Knopf plus Markenzeile brauchen den Platz.
   Unterzeile der Wortmarke ist die Kurzform FAKTEN.md marke_kopf (Sven, 06.09.2026); mit dem vollen Wortlaut
   brach sie dreizeilig um. Der Abstand der Ziele steht seit dem Kachel-Umbau (08.09.2026) weiter unten;
   die Burger-Schwelle liegt seitdem bei 1240 px statt 1100 px. */
.nav-links { display: flex; flex-wrap: nowrap; gap: 1.5rem; align-items: center; }
/* white-space: nowrap (E2, Fremdprüfung): sonst drückt der Flex-Algorithmus den Rückruf-Knopf statt der
   Markenzeile zusammen und der Knopf bricht auf dem Desktop zweizeilig um. */
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover { color: var(--brand-primary); }
.nav-links a[aria-current] { color: var(--brand-primary); font-weight: 600; }

/* NAVIGATIONSKACHELN (Sven, 08.09.2026)
   Aus den schlichten Textlinks werden eigenstaendige Flaechen. Gilt nur fuer
   Navigationen MIT Menueschalter (`.nav-toggle ~ .nav-links`); die
   Portalnavigation ohne Schalter bleibt unberuehrt. Labels, Ziele und
   aria-current sind unveraendert.

   Spezifitaet mit Absicht: `.nav` davor und `:not(.btn-cta)` heben die Regeln
   ueber die aelteren seitenbezogenen Navigations-Overrides der Softwareseite in
   landingpage.css, die im Blatt spaeter stehen. Der Rueckruf-Knopf bleibt die
   einzige hervorgehobene Aktion und wird hier nur im Abstand angefasst.

   Reihenfolge wie in der Interaktions-Karte: Normalzustand, Hover nur mit
   feinem Zeiger, Druck, Tastatur, reduzierte Bewegung. */

/* Die Kopfzeile darf breiter sein als der Textcontainer; --max-width bleibt
   global bei 1120 px. Gemessen mit der echten Inter-Datei: Markenzeile, die sechs
   Kacheln der Fachseiten und der Rueckruf-Knopf brauchen zusammen rund 1144 px,
   hier stehen 1192 px bereit.
   `:has(.nav-toggle)` begrenzt das auf Koepfe MIT Menueschalter; die
   Portalkopfzeile ohne Schalter behaelt ihre Bestandsgeometrie. */
.nav .nav-inner:has(.nav-toggle) {
  max-width: 1240px;
  column-gap: 1.25rem;
}

/* Der aeltere Seiten-Override der Softwareseite setzte hier einen eigenen
   Rand; den Abstand traegt jetzt die Kopfzeile fuer alle Seiten gleich. */
.nav .nav-inner:has(.nav-toggle) .wordmark-link { margin-right: 0; }

/* Oberhalb der Burger-Schwelle traegt der Schalter kein Menue mehr. Ohne diese
   Regel bliebe er ein unsichtbarer Tabstopp -- bisher nahm ihn nur der lokale
   Override der Softwareseite heraus. */
@media (min-width: 1240.02px) {
  .nav .nav-inner .nav-toggle { display: none; }
}

.nav .nav-toggle ~ .nav-links { gap: 10px; }

.nav .nav-toggle ~ .nav-links a:not(.btn-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease,
              transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Aktives Ziel: Navy-Flaeche, weisse Schrift (12,9:1), Gewicht 700 und eine
   goldene Unterkante als zusaetzliche Markierung. */
.nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta) {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--surface-0);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brand-accent);
}

/* Abstand zur hervorgehobenen Aktion, damit sie nicht als sechste Kachel liest. */
.nav .nav-toggle ~ .nav-links a.btn-cta { margin-left: 0.6rem; }

/* Ohne feinen Zeiger bleibt kein Zustand haengen: der geerbte Farbwechsel aus
   `.nav-links a:hover` wird fuer die Kacheln zurueckgenommen. */
.nav .nav-toggle ~ .nav-links a:not(.btn-cta):hover {
  background: var(--surface-2);
  border-color: var(--brand-primary);
  color: var(--text-primary);
}
.nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta):hover {
  background: var(--brand-primary);
  color: var(--surface-0);
}

@media (hover: hover) and (pointer: fine) {
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta):hover {
    background: rgba(var(--brand-primary-rgb), 0.10);
    border-color: var(--brand-primary-dark);
    color: var(--brand-primary);
  }
  .nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta):hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--surface-0);
  }
}

.nav .nav-toggle ~ .nav-links a:not(.btn-cta):active { transform: scale(0.97); }

.nav .nav-toggle ~ .nav-links a:not(.btn-cta):focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Keine Bewegung bei Tastaturbedienung. */
.nav .nav-toggle ~ .nav-links a:not(.btn-cta):focus-visible:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta) { transition: none; }
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta):active { transform: none; }
}
/* MOBILE-BURGER-NAV (P9, 2026-06-16) — CSS-only Checkbox-Hack (CSP erlaubt kein JS).
   Ersetzt das alte "Anker-Links ausblenden" (Stand 2026-05-02): statt die Links auf
   Mobile zu verstecken, oeffnet ein Burger ein Dropdown-Panel mit ALLEN Links.
   E2 (06.09.2026): Schwelle 1100 px statt 720 px, weil sechs Ziele plus Rückruf-Knopf
   allein rund 740 px brauchen und daneben zwischen 721 und 1100 px die Wortmarke
   mit Siegel (mindestens rund 270 px) keinen Platz mehr hat; unabhängig vom Wortlaut
   der Unterzeile (Kurzform, siehe oben).
   08.09.2026: Schwelle 1240 px. Als Kacheln brauchen die sechs Ziele mit Polster,
   Rand und Lücken rund 1165 px Inhaltsbreite (mit der echten Inter-Datei gemessen);
   zusammen mit dem Containerrand passt das erst ab 1240 px. Darunter übernimmt das
   Menü, damit nichts zusammengedrückt wird. */
.nav-toggle {              /* verstecktes Checkbox, bleibt fokussierbar (nicht display:none) */
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.nav-burger { display: none; }   /* Desktop: kein Burger */
/* Sichtbarer Fokusring am Burger (E3, Merker aus der E2-Diff-Prüfung P3-4): die Checkbox ist
   optisch versteckt, ihr Tastaturfokus muss deshalb am Burger-Symbol erscheinen (WCAG 2.4.7). */
.nav-toggle:focus-visible ~ .nav-burger {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 1240px) {
  /* Der Seiten-Override der Softwareseite nimmt den Schalter oberhalb von
     1100 px aus der Tastaturreihenfolge. Zwischen 1100 und 1240 px traegt er
     jetzt wieder das Menue und muss deshalb erreichbar bleiben. */
  .nav .nav-inner .nav-toggle { display: inline-block; }

  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px 10px;
    flex: none;                   /* Trefffläche bleibt 44 px, auch wenn die Wortmarke drückt (Nachprüfung 06.09.2026) */
    margin-right: -10px;          /* optisch buendig zum rechten Container-Rand */
    cursor: pointer; box-sizing: border-box;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--brand-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Burger -> X im offenen Zustand */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dropdown-Panel: geschlossen versteckt, ankert an der sticky .nav. Nur fuer Seiten mit
     Burger-Schalter (.nav-toggle ~): die Portal-Seiten ohne Schalter behalten ihre Kopf-Links
     bis 720 px wie im Bestand (Fremdprüfung E2). */
  .nav-toggle ~ .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px -16px rgba(var(--brand-primary-dark-rgb), 0.3);
    padding: 0.25rem 1.5rem 1rem;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle ~ .nav-links a {
    display: block; width: 100%;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    white-space: normal;
  }
  .nav-toggle ~ .nav-links a:first-of-type { border-top: none; }

  /* Kacheln im geoeffneten Menue: volle Breite, linksbuendig, klar getrennt.
     Die Trennlinien des Bestands entfallen, den Abstand traegt die Luecke. */
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta) {
    width: 100%;
    justify-content: flex-start;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    white-space: normal;
  }
  /* Den Abstand der Kacheln traegt allein die Luecke des Rasters. Der aeltere
     Seiten-Override der Softwareseite legte 9 px Rand obendrauf; das ergab dort
     19 statt 10 px. Der Rueckruf-Knopf behaelt seinen eigenen groesseren
     Abstand. */
  .nav .nav-toggle ~ .nav-links a + a:not(.btn-cta) { margin-top: 0; }
  .nav .nav-toggle ~ .nav-links a.btn-cta {
    margin-left: 0;
    margin-top: 0.85rem;
    /* Das Menue setzt alle Verweise auf display:block; damit greift die
       Zentrierung des Knopfes nicht und die Beschriftung klebt links. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  /* Kurze Fensterhoehen: das Menue bleibt erreichbar, statt unten abzuschneiden. */
  .nav .nav-toggle ~ .nav-links {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* CTA-Buttons im Menue voll sichtbar + zentriert (egal ob btn-cta oder btn-primary) */
  .nav-toggle ~ .nav-links a.btn-cta,
  .nav-toggle ~ .nav-links a.btn-primary {
    margin-top: 0.85rem;
    justify-content: center;
    border-top: none;
  }
}
/* Seiten ohne Burger-Schalter (Portal): Kopf-Links unter 720 px ausblenden wie im Bestand;
   Datenschutz, AVV und Impressum bleiben im Fuß erreichbar. */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
}

/* CTA-Button (Nav oben rechts): BLAUER Hintergrund, GOLDGELBE Schrift.
   Sven-Wunsch 2026-05-04: Markenblau als Hintergrund mit Akzent-Gold im Text.
   Hinweis: Selector als a.btn-cta, damit die Spezifitaet ueber .nav-links a liegt. */
a.btn-cta,
.btn-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--brand-accent);
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(var(--brand-primary-rgb), 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
a.btn-cta::after,
.btn-cta::after {
  content: "\2192";
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-accent-on-dark);
  transition: transform 0.18s ease;
}
a.btn-cta:hover,
.btn-cta:hover {
  transform: translateY(-1px);
  background: var(--brand-primary-dark);
  color: var(--brand-accent-light-on-dark);
  box-shadow: 0 8px 22px -6px rgba(var(--brand-primary-rgb), 0.45);
}
a.btn-cta:hover::after,
.btn-cta:hover::after { transform: translateX(3px); color: var(--brand-accent-light-on-dark); }
a.btn-cta:active,
.btn-cta:active { transform: translateY(0); }

/* FOOTER */
footer { background: var(--brand-primary-dark); color: rgba(var(--surface-0-rgb), 0.85); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media(max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: 'Source Serif Pro', serif; font-weight: 700; font-size: 1.15rem; color: var(--surface-0); margin-bottom: 0.8rem; }
.footer-desc { font-size: 0.92rem; line-height: 1.7; color: rgba(var(--surface-0-rgb), 0.7); max-width: 380px; }
.footer-heading { font-size: 0.78rem; font-weight: 600; color: rgba(var(--surface-0-rgb), 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
/* Die Listenfarbe steht ausdrücklich, weil sfta.css auf den Rechtsseiten ul/ol in --text-secondary
   färbt; ohne diese Zeile wären Adresszeilen im Fuß dort unlesbar (Lighthouse-Befund E2). */
.footer-links { list-style: none; padding: 0; margin: 0; color: rgba(var(--surface-0-rgb), 0.8); font-size: 0.92rem; }
.footer-links li { padding: 0.3rem 0; }
.footer-links a { color: rgba(var(--surface-0-rgb), 0.8); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--surface-0); text-decoration: underline; }
.footer-bar { padding-top: 2rem; border-top: 1px solid rgba(var(--surface-0-rgb), 0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(var(--surface-0-rgb), 0.6); }
/* Impressum/Datenschutz/AGB/AVV-Linkleiste in der unteren Footer-Bar; flex-wrap: wrap ist neu (E2), damit vier
   Verweise auf schmalen Breiten umbrechen statt zu überlaufen. */
.footer-meta-links { display: inline-flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-meta-links a {
  color: rgba(var(--surface-0-rgb), 0.7);
  text-decoration: none;
}
.footer-meta-links a:hover { color: var(--surface-0); text-decoration: underline; }

@media (max-width: 720px) {
  .footer-links a,
  .footer-meta-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
  }
}

/* MOBILER KONTAKT-BALKEN (E2): unter 768 px fest am unteren Rand; der Fuß
   bekommt darunter zusätzlichen Abstand, damit der Balken nichts verdeckt. */
.kontakt-mobil { display: none; }
@media (max-width: 767.98px) {
  .kontakt-mobil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 0.6rem;
    padding: 0.55rem 1rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--surface-0-rgb), 0.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -16px rgba(var(--brand-primary-dark-rgb), 0.35);
  }
  .kontakt-mobil a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  /* Der kurze E-Mail-Weg nimmt nur seine Breite, der Hauptknopf den Rest
     (Fremdprüfung E2: sonst bricht die längere Beschriftung bei 360 bis 393 px
     zweizeilig um). Seit 09.09.2026 führt der erste Weg zur E-Mail; öffentliche
     Telefonoptionen gibt es nicht mehr. */
  .kontakt-mobil a.kontakt-mobil__mail {
    flex: 0 1 auto;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    background: var(--surface-0);
  }
  .kontakt-mobil a.btn-cta { flex: 1 1 auto; margin: 0; }
  footer { padding-bottom: calc(2rem + 4.25rem + env(safe-area-inset-bottom, 0px)); }
  /* Fokus nicht verdeckt (WCAG 2.2, 2.4.11): Scroll-Reserve in Höhe des Balkens. */
  html { scroll-padding-bottom: 6rem; }
}

/* =================================================================
   LESEFADEN UND AKTIVE THEMENKACHEL (Sven, 09.09.2026)
   Zentral im Rahmen, weil der Faden auf allen verwalteten Seiten
   erscheint -- also auch auf den Rechtsseiten mit sfta.css. Der
   frühere Einzelblock in landingpage.css ist dafür entfallen.

   Faden und Kachel sind Dekoration: aria-hidden, kein Tabstopp, keine
   Zeiger-Ereignisse. Ohne JavaScript bleibt beides unsichtbar, damit
   keine leere Linie stehen bleibt.
   ================================================================= */

.scroll-thread {
  /* Startwerte; oben und unten setzt das Skript aus der gemessenen Höhe von
     Kopfzeile und mobilem Kontaktbalken. Bewusst keine eigenen Token: die
     Token-Quelle bleibt unverändert. */
  position: fixed;
  top: 7rem;
  bottom: 3rem;
  left: 24px;
  width: 3px;
  z-index: 30;
  pointer-events: none;
  display: none;
}

.scroll-thread.ist-bereit { display: block; }

.scroll-thread::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--brand-accent-rgb), 0.22) 8%,
    rgba(var(--brand-accent-rgb), 0.22) 92%,
    transparent 100%);
  border-radius: 2px;
}

.scroll-thread__fill {
  /* Fortschritt ausschliesslich ueber transform: scaleY von oben. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--brand-accent-light), var(--brand-accent));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
}

.scroll-thread__head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--brand-accent);
  border: 2px solid var(--brand-primary-dark);
  box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.22);
  transform: translateY(0);
}

/* Schmale Fassung im freien Seitenrand. */
@media (max-width: 980px) {
  .scroll-thread { left: 8px; width: 2px; }
  .scroll-thread__head {
    width: 10px; height: 10px;
    margin-left: -5px; margin-top: -5px;
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.20);
  }
}

/* Traeger der Kachel: nur das aktive Thema bekommt die Klasse. Die
   Kachel liegt als negativ gestapeltes Kind HINTER dem Inhalt, aber
   ueber der eigenen Flaeche des Traegers; `isolation` haelt sie darin. */
.lesefaden-traeger {
  position: relative;
  isolation: isolate;
}

.lesefaden-rahmen {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  opacity: 0;
  /* Flaeche und Schrift wechseln GEMEINSAM und ohne Uebergang: ein Ueberblenden
     zeigte sonst kurz weisse Schrift auf hellem Grund. Weich laufen nur Rand
     und Schatten, die keinen Kontrast tragen. */
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Deckendes Marken-Navy statt des frueheren Goldschleiers (Sven, 09.09.2026). */
.lesefaden-rahmen.ist-aktiv {
  opacity: 1;
  background: var(--brand-primary);
  border-color: rgba(var(--brand-accent-rgb), 0.75);
  box-shadow: 0 10px 30px -16px rgba(var(--brand-primary-dark-rgb), 0.65);
}

/* Auf ohnehin dunklen Flaechen bleibt die Kachel deckend, aber unterscheidbar:
   Navy-tief aus derselben Palette. Das Skript setzt die Fassung anhand der
   gemessenen Flaeche. */
.lesefaden-rahmen.auf-dunkel.ist-aktiv {
  background: var(--brand-primary-dark);
  border-color: rgba(var(--brand-accent-rgb), 0.6);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Lesefarben des aktiven Themas (Fassung B, 09.09.2026).

   Weil die Kachel deckend fuellt, muss die Schrift des aktiven Themas
   mitziehen. Entschieden wird das NICHT ueber Nachfahrenregeln, sondern je
   Element im Skript: Es misst die tatsaechliche Schriftfarbe gegen den
   tatsaechlichen Grund und markiert nur die Elemente, deren Kontrast auf der
   Kachel unter 4,5:1 faellt. Elemente mit eigener deckender Flaeche bleiben
   samt Inhalt vollstaendig unberuehrt -- auch verschachtelte dunkle Flaechen
   darin behalten so ihren Kontrast.

   Der Wert steht mit `!important`, weil die Klasse auf dem markierten Element
   SELBST sitzt und dort gegen spaetere, spezifischere Bestandsregeln bestehen
   muss (`.article-body p`, `.legal-doc h3`, `.article-eyebrow`). Er ist rein
   temporaer: mit der Klasse verschwindet er restlos, es bleibt kein Inline-Stil
   und keine eigene Custom Property zurueck.

   Alle Vordergrundregeln stehen in `@media screen`: der Druck blendet die
   Kachel aus, dort darf keine helle Schrift zurueckbleiben. Ohne JavaScript
   entsteht keine dieser Klassen.
   --------------------------------------------------------------------- */
@media screen {
  .lesefaden-auf-navy { color: var(--surface-0) !important; }

  /* Gold statt Weiss, wo der Bestand einen warmen Akzent traegt, und fuer
     Verweise -- sonst waeren sie auf Navy nicht mehr als Verweis erkennbar. */
  .lesefaden-auf-navy-gold { color: var(--brand-accent-light-on-dark) !important; }
  a.lesefaden-auf-navy-gold {
    text-decoration-color: rgba(var(--brand-accent-rgb), 0.7);
  }

  /* Bricht die Vererbung an einer eigenen Flaeche unter einem gefaerbten
     Texttraeger: sonst erbte ihr Inhalt das Weiss von oben (weiss auf weiss in
     den hellen Statuskarten, Browserbefund 09.09.2026). Welche der beiden
     Bestandsfarben gilt, misst das Skript am Grund DIESER Flaeche -- nicht
     pauschal fuer alle Nachfahren. Nachfahren mit eigener Farbregel bleiben
     davon unberuehrt, sie erben gar nicht erst. */
  .lesefaden-flaeche-hell { color: var(--text-primary) !important; }
  .lesefaden-flaeche-dunkel { color: var(--surface-0) !important; }

  /* Artikelkopf als aktives Thema (Browserbefund Sven, 11.09.2026): Der helle
     Vollbreiten-Streifen des Kopfs (`.article-header::before`, landingpage.css)
     liegt ueber der Kachel, weil der Kopf mit `z-index: 0` einen eigenen Stapel
     bildet -- die Schrift stand weiss auf hellem Grund. Traegt die Kachel den
     Kopf, tritt der Streifen zurueck; die Goldlinie (`::after`) bleibt. Mit der
     Themenklasse verschwindet die Regel wieder restlos. */
  .article-header.lesefaden-thema::before { opacity: 0; }

  /* Waehrend des weichen Wechsels (Sven, 09.09.2026) zeichnet der Text denselben
     Umschlag wie die Flaeche: Das Skript legt je Element einen zweifarbigen
     Verlauf aus Ausgangs- und Zielfarbe an, dessen Kante an derselben
     Bildschirmposition steht wie der Zuschnitt der Kachel. Ein unabhaengiges
     Ueberblenden von Flaeche und Farbe waere kontrastarm.
     Nur der Verlauf steht inline und wird am Ende restlos entfernt; die
     durchsichtige Schrift kommt aus dieser Klasse und gilt deshalb NUR am
     Bildschirm -- im Druck bleibt die Bestandsfarbe stehen.
     Den Verlauf tragen nur Traeger mit EINEM durchgehenden Kasten. Ein ueber
     mehrere Zeilen laufender Inline-Text zerfaellt in Fragmente, die CSS nicht
     in einem gemeinsamen senkrechten System malt; solche Traeger werden
     stattdessen durchsichtig gestellt und vom umgebenden Block mitgemalt
     (`lesefaden-wisch-erbt`) oder schlagen an der Kante um.
     Bewusst OHNE `-webkit-text-fill-color`: die Eigenschaft schlaegt `color`
     und wuerde vererbt auch die erhaltenen hellen Innenflaechen unsichtbar
     machen. */
  .lesefaden-wisch {
    background-origin: border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }

  .lesefaden-wisch-erbt { color: transparent !important; }

  /* Dunkler Knopf auf Navy: Kante statt Rahmen, damit nichts verrutscht. */
  .lesefaden-knopf-dunkel {
    outline: 1px solid rgba(var(--brand-accent-rgb), 0.55);
    outline-offset: -1px;
  }

  /* Tastaturfokus auf der Kachel erkennbar halten. Erhaltene Eigenflaechen
     tragen keine dieser Klassen und behalten ihren Bestandsfokus. */
  .lesefaden-auf-navy:focus-visible,
  .lesefaden-auf-navy-gold:focus-visible,
  .lesefaden-knopf-dunkel:focus-visible {
    outline: 2px solid var(--brand-accent-light);
    outline-offset: 2px;
  }
}

/* Der dekorative Rahmen haengt als LETZTES Kind im Traeger und nimmt damit dem
   bisherigen letzten Absatz seinen :last-child-Status. Auf den Rechtsseiten
   setzt sfta.css dort `p:last-child { margin-bottom: 0 }`; ohne diese Regel
   wuchsen Dokument und Main um 16 px, waehrend alle Ueberschriften an ihrer
   Stelle blieben (Browserbefund 09.09.2026, Impressum). Eng auf den Traeger der
   Rechtstexte begrenzt: Ohne aktive Kachel gibt es die Klasse nicht, und der
   vorhandene p:last-child-Fall der uebrigen Seiten bleibt unberuehrt. */
.legal-doc.lesefaden-traeger > p:nth-last-child(2) {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-thread__fill { display: none; }
  .lesefaden-rahmen { transition: none; }
}

@media print {
  .scroll-thread, .lesefaden-rahmen { display: none !important; }
}