/*
 * main.css — Gestaltung des Platzhalter-Prototyps.
 * Struktur: @layer reset, base, layout, components.
 * Alle Farb-, Abstands- und Größenwerte kommen aus styles/tokens.css.
 * Komponentenzustände: DESIGN_SYSTEM.md, Abschnitt „Komponentenzustände".
 */

@layer reset, base, layout, components;

/* ---------------------------------------------------------------
 * Schriften: selbst gehostet, WOFF2, Latin-Subset — Details fonts/README.md
 * --------------------------------------------------------------- */

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Bewusste Abweichung von DESIGN_SYSTEM.md („View Transitions für
 * Seitenwechsel"): @view-transition { navigation: auto } friert in
 * allen getesteten Chrome-Builds (Chromium 131, Chrome 149) nach der
 * Cross-Document-Navigation requestAnimationFrame dauerhaft ein —
 * Scroll-Reveals blieben unsichtbar, Tests hängen. In der
 * Phase-5b-Abnahme zurückgestellt; Details im PR und in AI_HANDOFF.md.
 */

/* ---------------------------------------------------------------
 * Reset
 * --------------------------------------------------------------- */

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

  * {
    margin: 0;
  }

  html {
    text-size-adjust: none;
  }

  body {
    min-height: 100svh;
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  p {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }
}

/* ---------------------------------------------------------------
 * Base: Typografie, Links, Fokus
 * --------------------------------------------------------------- */

@layer base {
  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--leading-text);
  }

  h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 560;
    font-variation-settings:
      'opsz' var(--opsz-h1),
      'wght' 560;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 540;
    font-variation-settings:
      'opsz' var(--opsz-h2),
      'wght' 540;
    line-height: var(--leading-heading);
    text-wrap: balance;
  }

  h3 {
    font-family: var(--font-text);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: var(--leading-heading);
  }

  /* Textlink (Fließtext) — Zustandstabelle DESIGN_SYSTEM.md */
  a {
    color: var(--color-ink);
    text-decoration-color: var(--color-line-strong);
    text-underline-offset: 0.15em;
    transition:
      color var(--duration-fast) var(--ease-out),
      text-decoration-color var(--duration-fast) var(--ease-out);
  }

  a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
  }

  a:active {
    color: var(--color-accent-strong);
  }

  /* Globale Fokus-Regel: sichtbar, niemals entfernt. */
  :focus-visible {
    outline: var(--border-w-strong) solid var(--color-focus);
    outline-offset: 2px;
  }

  @supports not selector(:focus-visible) {
    :focus {
      outline: var(--border-w-strong) solid var(--color-focus);
      outline-offset: 2px;
    }
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-paper);
  }

  /* Silbentrennung nur im Fließtext, nur auf schmalen Viewports. */
  @media (width < 40rem) {
    .textspalte p {
      hyphens: auto;
    }
  }
}

/* ---------------------------------------------------------------
 * Layout: Container, Raster, Sektionsrhythmus
 * --------------------------------------------------------------- */

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  /* 12 Spalten ab 64rem, 6 Spalten ab 40rem, 4 darunter.
     Kinder spannen ohne Zuweisung die volle Breite. */
  .raster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--grid-gap);
  }

  .raster > * {
    grid-column: 1 / -1;
  }

  @media (width >= 40rem) {
    .raster {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .raster {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }

  /* Weißraum-Dramaturgie: Sektionsabstand aus dem Token. */
  main > * + * {
    margin-block-start: var(--space-section);
  }

  main {
    padding-block: var(--space-7) var(--space-section);
  }

  .sektionskopf {
    margin-block-end: var(--space-6);
  }

  /* Überzeile im Meta-Stil (Versalien, weite Laufweite). */
  .ueberzeile {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .lead {
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    color: var(--color-ink-soft);
    max-width: var(--measure);
  }

  .meta-zeile {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
  }

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

  /* Scroll-Reveal für Sektionsanfänge: Einblenden + 12 px aufwärts.
     Progressive Verbesserung — ohne Unterstützung oder bei reduzierter
     Bewegung erscheint der Inhalt sofort im Endzustand. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .sektionskopf,
      .aussage-satz {
        animation: einblenden var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------
 * Komponenten
 * --------------------------------------------------------------- */

@layer components {
  /* --- Skip-Link ------------------------------------------------ */

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

  .skip-link:focus-visible {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-5);
    clip-path: none;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-ui);
    font-size: var(--text-s);
    text-decoration: none;
    z-index: var(--z-skiplink);
    outline-color: var(--color-ink);
  }

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

  .kopfzeile {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: var(--color-paper);
    border-block-end: var(--border-w) solid var(--color-line);
  }

  .kopfzeile-inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-4);
  }

  .wortmarke {
    display: inline-flex;
    flex: none;
    text-decoration: none;
  }

  .wortmarke-logo {
    display: block;
  }

  .wortmarke-logo-own {
    fill: var(--color-ink);
  }

  .wortmarke-logo-it {
    fill: var(--color-accent);
  }

  .wortmarke:hover .wortmarke-logo-it {
    fill: var(--color-accent-strong);
  }

  /* --- Navigationslinks ---------------------------------------- */

  .hauptnavigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .hauptnavigation a {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink-soft);
    text-decoration: none;
    padding-block-end: var(--space-1);
    background-image: linear-gradient(var(--color-ink), var(--color-ink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% var(--border-w-strong);
    transition:
      color var(--duration-fast) var(--ease-out),
      background-size var(--duration-fast) var(--ease-out);
  }

  .hauptnavigation a:hover {
    color: var(--color-ink);
    background-size: 100% var(--border-w-strong);
  }

  .hauptnavigation a[aria-current='page'] {
    color: var(--color-ink);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-size: 100% var(--border-w-strong);
  }

  /* --- Menü-Schalter (mobil) ------------------------------------ */

  .menue-schalter {
    display: none;
    align-items: center;
    gap: var(--space-2);
    border: 0;
    background: none;
    padding: var(--space-2) 0;
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink-soft);
    cursor: pointer;
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
    transition: color var(--duration-fast) var(--ease-out);
  }

  .menue-schalter:hover {
    color: var(--color-ink);
  }

  .menue-schalter-icon {
    position: relative;
    display: inline-block;
    width: 1.125rem;
    height: 0.625rem;
  }

  .menue-schalter-icon::before,
  .menue-schalter-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--border-w-strong);
    background: currentcolor;
    transition: transform var(--duration-base) var(--ease-in-out);
  }

  .menue-schalter-icon::before {
    top: 0;
  }

  .menue-schalter-icon::after {
    bottom: 0;
  }

  .menue-schalter[aria-expanded='true'] .menue-schalter-icon::before {
    transform: translateY(0.25rem) rotate(45deg);
  }

  .menue-schalter[aria-expanded='true'] .menue-schalter-icon::after {
    transform: translateY(-0.25rem) rotate(-45deg);
  }

  /* --- Mobiles Nav-Overlay --------------------------------------
     Der parserfruehe data-js-Marker verhindert einen spaeten
     Layoutwechsel. Ohne JS bleibt die Linkliste immer sichtbar. */

  @media (width < 40rem) {
    html[data-js] .menue-schalter {
      display: inline-flex;
    }

    html[data-js] .kopfzeile[data-offen] .wortmarke {
      position: relative;
      z-index: calc(var(--z-overlay) + 1);
    }

    html[data-js] .hauptnavigation {
      position: fixed;
      inset: 0;
      z-index: var(--z-overlay);
      background: var(--color-paper);
      padding: var(--space-10) var(--container-pad) var(--space-7);
      visibility: hidden;
      opacity: 0;
      transform: translateY(8px);
      transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out),
        visibility 0s linear var(--duration-base);
    }

    html[data-js] .kopfzeile[data-offen] .hauptnavigation {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out),
        visibility 0s;
    }

    html[data-js] .hauptnavigation ul {
      flex-direction: column;
      gap: var(--space-5);
      border-block-start: var(--border-w) solid var(--color-line);
      padding-block-start: var(--space-6);
    }

    html[data-js] .hauptnavigation a {
      font-size: var(--text-h3);
      color: var(--color-ink);
    }
  }

  /* Seite hinter dem geöffneten Overlay nicht scrollbar. */
  body:has(.kopfzeile[data-offen]) {
    overflow: hidden;
  }

  /* --- Schaltflächen -------------------------------------------- */

  .schaltflaeche {
    display: inline-block;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-ui);
    font-size: var(--text-s);
    font-weight: 500;
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-s);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .schaltflaeche:hover,
  .schaltflaeche:active {
    background: var(--color-accent-strong);
    color: var(--color-paper);
  }

  .schaltflaeche:active {
    transform: translateY(1px);
  }

  .schaltflaeche[disabled] {
    background: var(--color-line);
    color: var(--color-ink-faint);
    cursor: not-allowed;
  }

  .schaltflaeche-sekundaer {
    display: inline-block;
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--text-s);
    font-weight: 500;
    text-decoration: none;
    border: var(--border-w) solid var(--color-ink);
    border-radius: var(--radius-s);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .schaltflaeche-sekundaer:hover,
  .schaltflaeche-sekundaer:active {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .schaltflaeche-sekundaer:active {
    transform: translateY(1px);
  }

  .schaltflaeche-sekundaer[disabled] {
    border-color: var(--color-ink-faint);
    color: var(--color-ink-faint);
    background: transparent;
    cursor: not-allowed;
  }

  /* --- Textlink mit Richtungspfeil ------------------------------ */

  /* Stehender Akzent (Beschluss 2026-07-16-7): Weiterführend-Links
     tragen das Tannengrün dauerhaft, nicht erst beim Hover. */
  .textlink-pfeil {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
  }

  .textlink-pfeil:hover {
    color: var(--color-accent-strong);
    text-decoration-color: var(--color-accent-strong);
  }

  .pfeil {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .textlink-pfeil:hover .pfeil {
    transform: translateX(4px);
  }

  /* --- Eröffnung (Startseite) ----------------------------------- */

  .eroeffnung-titel {
    font-size: var(--text-display);
    font-weight: 480;
    font-variation-settings:
      'opsz' var(--opsz-display),
      'wght' 480;
    margin-block: var(--space-4) var(--space-5);
    text-wrap: balance;
  }

  .aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-6);
  }

  @media (prefers-reduced-motion: no-preference) {
    .eroeffnung > * {
      animation: einblenden var(--duration-slow) var(--ease-out) both;
    }
  }

  @media (width >= 64rem) {
    .eroeffnung .ueberzeile {
      grid-column: 1 / 9;
    }

    .eroeffnung-titel {
      grid-column: 1 / 11;
    }

    .eroeffnung .lead,
    .eroeffnung .aktionen {
      grid-column: 1 / 8;
    }
  }

  .abschluss-text,
  .rechtstext,
  .textspalte {
    max-width: var(--measure);
  }

  .abschluss-aktion {
    margin-block-start: var(--space-5);
  }

  /* --- Verzeichniszeilen (Inhaltsverzeichnis-Sektion) ------------ */

  .verzeichnis {
    border-block-start: var(--border-w) solid var(--color-line-strong);
  }

  .verzeichniszeile {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-2) var(--grid-gap);
    align-items: baseline;
    border-block-end: var(--border-w) solid var(--color-line);
    padding-block: var(--space-5);
  }

  .verzeichniszeile > *,
  .eintrag > * {
    grid-column: 1 / -1;
  }

  /* Ausgestellte Sektions-/Bereichsnummern im stehenden Akzent
     (2026-07-16-7 und 2026-07-23-9). */
  .zeilennummer,
  .bereichsnummer {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 480;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-accent);

    /* Review-Alternative: color: var(--color-line-strong); */
    font-variant-numeric: oldstyle-nums;
  }

  .zeilentitel a {
    text-decoration: none;
  }

  .verzeichniszeile:hover .zeilentitel a,
  .verzeichniszeile:focus-within .zeilentitel a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.15em;
  }

  .zeilenbeschreibung {
    color: var(--color-ink-soft);
    max-width: var(--measure);
    margin-block-start: var(--space-2);
  }

  .zeilenpfeil {
    color: var(--color-accent);
    justify-self: end;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .verzeichniszeile:hover .zeilenpfeil,
  .verzeichniszeile:focus-within .zeilenpfeil,
  .eintrag:hover .zeilenpfeil,
  .eintrag:focus-within .zeilenpfeil {
    transform: translateX(4px);
    color: var(--color-accent-strong);
  }

  @media (width >= 64rem) {
    .verzeichniszeile .zeilennummer {
      grid-column: 1 / 3;
    }

    .verzeichniszeile .zeileninhalt {
      grid-column: 3 / 9;
    }

    .verzeichniszeile .zeilenpfeil {
      grid-column: 12 / 13;
      align-self: baseline;
    }
  }

  /* --- Redaktionelle Eintragsliste (Startseite) ------------------ */

  .eintrag {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-2) var(--grid-gap);
    border-block-end: var(--border-w) solid var(--color-line);
    padding-block: var(--space-6);
  }

  .eintrag:first-of-type {
    border-block-start: var(--border-w) solid var(--color-line-strong);
  }

  .eintrag-titel {
    margin-block-end: var(--space-2);
  }

  .eintrag-titel a {
    text-decoration: none;
  }

  .eintrag-titel a:hover,
  .blaettern a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.15em;
  }

  .eintrag-zusammenfassung {
    color: var(--color-ink-soft);
    max-width: var(--measure);
  }

  .eintrag-ausblick .eintrag-titel,
  .eintrag-ausblick .eintrag-zusammenfassung {
    color: var(--color-ink-faint);
  }

  .eintrag .bild-platzhalter,
  .eintragsbild {
    margin-block-end: var(--space-5);
  }

  @media (width >= 64rem) {
    .eintrag .eintrag-meta {
      grid-column: 1 / 4;
    }

    .eintrag .eintrag-inhalt {
      grid-column: 4 / 11;
    }

    .eintrag .zeilenpfeil {
      grid-column: 12 / 13;
      align-self: start;
    }
  }

  /* Mobil mehr Luft zwischen Trennlinie und Meta-Zeile (2026-07-16-7). */
  @media (width < 64rem) {
    .eintrag {
      padding-block-start: var(--space-7);
    }
  }

  .listenabschluss {
    padding-block-start: var(--space-5);
  }

  /* --- Allgemeine Seitenköpfe und Übersichtssteuerung ------------ */

  .seitenkopf-inhalt > * + *,
  .fehlerkopf > * + *,
  .artikelkopf > * + * {
    margin-block-start: var(--space-4);
  }

  .seitenkopf-text {
    display: grid;
    gap: var(--space-4);
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  @media (width >= 64rem) {
    .seitenkopf-inhalt {
      grid-column: 1 / 9;
    }
  }

  .ordnungszeile {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    border-block: var(--border-w) solid var(--color-line-strong);
    padding-block: var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
  }

  .ordnungszeile + .eintragsliste .eintrag:first-of-type {
    border-block-start: 0;
  }

  .seitenblaettern {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-5);
    font-family: var(--font-ui);
    font-size: var(--text-s);
  }

  .seitenblaettern-zurueck {
    text-align: right;
    margin-inline-start: auto;
  }

  /* --- Nummerierte Bereichsübersicht (Typ B) --------------------- */

  .bereichsliste,
  .thesenliste,
  .rollenliste,
  .kontaktwege-liste {
    border-block-start: var(--border-w) solid var(--color-line-strong);
  }

  .bereichsblock {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-5) var(--grid-gap);
    border-block-end: var(--border-w) solid var(--color-line-strong);
    padding-block: var(--space-7);
  }

  .bereichsblock > *,
  .thesenabschnitt > *,
  .rollenprofil > * {
    grid-column: 1 / -1;
  }

  .bereichskennung {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .bereichsblock-inhalt {
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  .bereichsblock-inhalt > * + * {
    margin-block-start: var(--space-4);
  }

  /* Merkmalslisten (2026-07-16-7): Strich-Marker im Meta-Stil —
     Linie als Orientierungsmittel statt generischem Punkt. */
  .bereichsmerkmale {
    list-style: '–  ' outside;
    padding-inline-start: var(--space-6);
  }

  .bereichsmerkmale li::marker {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-faint);
  }

  .bereichsmerkmale li + li {
    margin-block-start: var(--space-3);
  }

  @media (width >= 64rem) {
    .bereichskennung {
      grid-column: 1 / 6;
    }

    .bereichsblock-inhalt {
      grid-column: 6 / 12;
    }
  }

  .einordnung-text {
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  /* --- Selbstdarstellung: Thesen, Kennzahlen und Rollen ----------- */

  .thesenabschnitt {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-5) var(--grid-gap);
    border-block-end: var(--border-w) solid var(--color-line);
    padding-block: var(--space-7);
  }

  .thesentext {
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  .thesentext > * + *,
  .rechtstext > * + *,
  .textspalte > * + *,
  .akkordeon-inhalt > * + * {
    margin-block-start: 1.25em;
  }

  @media (width >= 64rem) {
    .thesentitel {
      grid-column: 1 / 5;
      align-self: start;
      position: sticky;
      top: var(--space-9);
    }

    .thesentext {
      grid-column: 5 / 12;
    }

    .kennzahlen-inhalt,
    .rollen-inhalt {
      grid-column: 3 / 11;
    }
  }

  .rollenprofil {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-5) var(--grid-gap);
    align-items: start;
    border-block-end: var(--border-w) solid var(--color-line);
    padding-block: var(--space-6);
  }

  .rollenbild {
    inline-size: min(100%, var(--space-10));
    aspect-ratio: 1;
  }

  .rollenbeschreibung > * + * {
    margin-block-start: var(--space-2);
  }

  .rollenbeschreibung p:last-child {
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  @media (width >= 40rem) {
    .rollenprofil .rollenbild {
      grid-column: 1 / 3;
    }

    .rollenprofil .rollenbeschreibung {
      grid-column: 3 / 7;
    }
  }

  @media (width >= 64rem) {
    .rollenprofil .rollenbeschreibung {
      grid-column: 3 / 10;
    }
  }

  /* --- Kontaktwege und E-Mail-Aktion ----------------------------- */

  .kontaktwege,
  .kontaktaktion {
    min-width: 0;
  }

  @media (width >= 64rem) {
    .kontaktwege {
      grid-column: 1 / 6;
    }

    .kontaktaktion {
      grid-column: 6 / 12;
    }
  }

  .kontaktwege-liste > div {
    border-block-end: var(--border-w) solid var(--color-line);
    padding-block: var(--space-4);
  }

  .kontaktwege-liste dt {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .kontaktwege-liste dd {
    margin-block-start: var(--space-2);
    color: var(--color-ink-soft);
  }

  .formular {
    display: grid;
    gap: var(--space-5);
    border-block-start: var(--border-w) solid var(--color-line-strong);
    padding-block-start: var(--space-4);
  }

  .formular-gruppe {
    display: grid;
    gap: var(--space-1);
  }

  .formular label {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink);
  }

  /* Papiernahe Feldfläche statt Reinweiß (2026-07-16-7); Rahmen
     bleibt funktional in --color-ink-faint (5,23:1 auf --color-field). */
  .formular input,
  .formular textarea {
    width: 100%;
    background: var(--color-field);
    color: var(--color-ink);
    border: var(--border-w) solid var(--color-ink-faint);
    border-radius: var(--radius-s);
    padding: var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-out);
  }

  .formular textarea {
    min-block-size: calc(var(--space-10) + var(--space-6));
    resize: vertical;
  }

  .formular input:hover,
  .formular textarea:hover {
    border-color: var(--color-ink-soft);
  }

  .formular input:focus-visible,
  .formular textarea:focus-visible {
    border-color: var(--color-ink);
  }

  .pflichtfeld-hinweis,
  .formular-hinweis {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink-faint);
  }

  .formular-fehler {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-error);
  }

  .formular [aria-invalid='true'] {
    border-color: var(--color-error);
  }

  .formular-aktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }

  .formular-hinweis {
    max-width: var(--measure-narrow);
  }

  .hinweisblock {
    max-width: var(--measure);
    border-block-start: var(--border-w) solid var(--color-line-strong);
    padding-block-start: var(--space-5);
  }

  .hinweisblock > * + * {
    margin-block-start: var(--space-3);
  }

  /* --- Schmale Rechtstexte und Fehlerseite ----------------------- */

  .rechtstext h2,
  .textspalte h2 {
    margin-block-start: var(--space-8);
  }

  .platzhalter-hinweis {
    border-block: var(--border-w) solid var(--color-line-strong);
    padding-block: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink-soft);
  }

  .fehler-titel {
    max-width: var(--measure-wide);
    font-size: var(--text-display);
    font-weight: 480;
    font-variation-settings:
      'opsz' var(--opsz-display),
      'wght' 480;
    text-wrap: balance;
  }

  .fehlertext {
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  /* --- Bilder und Bild-Platzhalter ------------------------------- */

  .eroeffnungsbild picture,
  .eroeffnungsbild img,
  .eintragsbild,
  .eintragsbild img {
    display: block;
    width: 100%;
  }

  .eroeffnungsbild img,
  .eintragsbild img {
    height: auto;
  }

  .bild-platzhalter {
    display: grid;
    place-content: center;
    background: var(--color-surface);
    border: var(--border-w) solid var(--color-line-strong);
    padding: var(--space-4);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .bild-platzhalter-quer {
    aspect-ratio: 3 / 2;
  }

  .bild-platzhalter-panorama {
    aspect-ratio: 21 / 9;
  }

  .bildunterschrift {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-soft);
    margin-block-start: var(--space-2);
  }

  /* --- Aussage-Sektion (Rhythmuswechsel) ------------------------- */

  .aussage-satz {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 480;
    font-variation-settings:
      'opsz' var(--opsz-statement),
      'wght' 480;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    border-block: var(--border-w) solid var(--color-line);
    padding-block: var(--space-7);
    text-wrap: balance;
  }

  @media (width >= 64rem) {
    .aussage .aussage-satz {
      grid-column: 2 / 12;
    }
  }

  /* --- Artikel (Detailseite) ------------------------------------- */

  .artikelkopf {
    margin-block-start: var(--space-8);
  }

  @media (width >= 64rem) {
    .artikelkopf {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      gap: var(--space-4) var(--grid-gap);
      align-items: start;
      margin-block-start: clamp(
        var(--space-10),
        28vh,
        calc(var(--space-10) + var(--space-10))
      );
    }

    .artikelkopf > * + * {
      margin-block-start: 0;
    }

    .artikelkopf .ueberzeile,
    .artikelkopf .meta-zeile {
      grid-column: 1 / 4;
    }

    .artikelkopf h1,
    .artikelkopf .untertitel {
      grid-column: 4 / 11;
    }

    .artikelkopf .ueberzeile,
    .artikelkopf h1 {
      grid-row: 1;
    }

    .artikelkopf .meta-zeile,
    .artikelkopf .untertitel {
      grid-row: 2;
    }

    .eroeffnungsbild {
      grid-column: 1 / 13;
    }
  }

  .eroeffnungsbild {
    margin-block-start: var(--space-6);
  }

  .untertitel {
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    color: var(--color-ink-soft);
    max-width: var(--measure);
  }

  /* Lesebereich: Marginalspalte + Textspalte */

  .marginalspalte {
    display: none;
  }

  @media (width >= 64rem) {
    .marginalspalte {
      display: block;
      grid-column: 1 / 4;
    }

    .textbereich .textspalte {
      grid-column: 4 / 11;
    }

    .seiteninhalt-mobil {
      display: none;
    }
  }

  .seiteninhalt {
    position: sticky;
    top: var(--space-9);
    border-block-start: var(--border-w) solid var(--color-line-strong);
    padding-block-start: var(--space-3);
  }

  .seiteninhalt-titel {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    font-weight: 500;
    font-variation-settings: normal;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-block-end: var(--space-3);
  }

  .seiteninhalt-liste,
  .fusszeile-liste {
    display: grid;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-s);
  }

  .seiteninhalt-liste a,
  .fusszeile-liste a {
    color: var(--color-ink-soft);
    text-decoration: none;
  }

  .seiteninhalt-liste a:hover,
  .fusszeile-liste a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
  }

  .textspalte ul {
    padding-inline-start: 1.25em;
  }

  .textspalte figure {
    margin-block: var(--space-7);
  }

  /* Progressive typografische Zeilenführung; unbekannte Werte werden
     von älteren Browsern ohne Funktionsverlust ignoriert. */
  .textspalte p,
  .lead,
  .zeilenbeschreibung,
  .eintrag-zusammenfassung,
  .zeilentitel,
  .thesentext p,
  .bereichsblock-inhalt p,
  .rechtstext p {
    text-wrap: pretty;
  }

  /* Initiale nur am ersten direkten Absatz der eigentlichen Lesestrecke. */
  .textspalte > p:first-of-type::first-letter {
    float: left;
    padding-inline-end: var(--space-2);
    color: var(--color-ink);

    /* Review-Alternative: color: var(--color-accent); */
    font-family: var(--font-display);
    font-size: var(--text-initial);
    font-weight: 560;
    line-height: 0.82;
  }

  @supports (initial-letter: 3) {
    .textspalte > p:first-of-type::first-letter {
      float: none;
      padding-block: 0;
      font-size: inherit;
      line-height: inherit;
      initial-letter: 3;
    }
  }

  /* Dekorative Endmarke der Lesestrecke. */
  .textspalte > p:last-child::after,
  .quellenliste li:last-child::after {
    content: '■' / '';
    display: inline-block;
    padding-inline-start: var(--space-1);
    color: var(--color-accent);
    font-size: var(--text-end-mark);
    line-height: 1;
  }

  .quellen {
    margin-block-start: var(--space-7);
  }

  .quellen .seiteninhalt-titel {
    margin-block-start: 0;
  }

  .quellenliste {
    display: grid;
    gap: var(--space-2);
    list-style: '–  ' outside;
    padding-inline-start: var(--space-5);
    color: var(--color-ink-soft);
  }

  .quellenliste a {
    overflow-wrap: anywhere;
  }

  /* Zitat-Block */
  .zitat {
    position: relative;
    border-block: var(--border-w) solid var(--color-line);
    padding-block: var(--space-5);
    padding-inline-start: var(--space-5);
    margin-block: var(--space-7);
  }

  .zitat::before {
    content: '“' / '';
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: calc(-1 * var(--space-7));
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-quote-mark);
    font-weight: 480;
    line-height: 0.75;
  }

  .zitat p {
    font-size: var(--text-lead);
    font-style: normal;
    line-height: var(--leading-lead);
    color: var(--color-ink-soft);
  }

  @media (width < 40rem) {
    .zitat {
      padding-inline-start: var(--space-6);
    }

    .zitat::before {
      inset-inline-start: 0;
    }
  }

  /* --- Tabelle ---------------------------------------------------- */

  .tabelle {
    width: 100%;
    max-width: var(--measure-wide);
    border-collapse: collapse;
    margin-block: var(--space-6);
  }

  .tabelle caption {
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-soft);
    padding-block-end: var(--space-3);
  }

  .tabelle th {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-soft);
  }

  .tabelle th,
  .tabelle td {
    text-align: left;
    border-block-end: var(--border-w) solid var(--color-line);
    padding: var(--space-3) var(--space-5) var(--space-3) 0;
    font-variant-numeric: tabular-nums;
  }

  .tabellen-scroll {
    max-width: 100%;
    overflow-x: auto;
  }

  .tabellen-scroll .tabelle {
    min-width: var(--measure);
  }

  /* --- Akkordeon (<details>) -------------------------------------- */

  .akkordeon {
    border-block-end: var(--border-w) solid var(--color-line);
  }

  .akkordeon summary {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding-block: var(--space-4);
    padding-inline-end: var(--space-7);
    font-family: var(--font-text);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: var(--leading-heading);
    transition: color var(--duration-fast) var(--ease-out);
  }

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

  .akkordeon summary:hover {
    color: var(--color-accent);
  }

  /* Marker „+" aus zwei CSS-Linien; offen rotiert die senkrechte
     Linie auf die waagerechte — es bleibt „–". */
  .akkordeon summary::before,
  .akkordeon summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--space-2);
    width: 0.875rem;
    height: var(--border-w-strong);
    background: currentcolor;
    transition: transform var(--duration-base) var(--ease-in-out);
  }

  .akkordeon summary::before {
    transform: translateY(-50%);
  }

  .akkordeon summary::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .akkordeon[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .akkordeon-inhalt {
    padding-inline-start: var(--space-4);
    padding-block: 0 var(--space-5);
    max-width: var(--measure);
    color: var(--color-ink-soft);
  }

  .vertiefung .akkordeon:first-of-type {
    border-block-start: var(--border-w) solid var(--color-line-strong);
  }

  /* Vertiefung und Blättern fluchten ab Desktop mit der Textspalte. */
  @media (width >= 64rem) {
    .vertiefung-inhalt,
    .blaettern {
      grid-column: 4 / 11;
    }
  }

  /* --- Vor/Zurück-Navigation -------------------------------------- */

  .blaettern {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-start: var(--border-w) solid var(--color-line-strong);
    padding-block-start: var(--space-5);
  }

  .blaettern a {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    text-decoration: none;
  }

  .blaettern-richtung {
    display: block;
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-block-end: var(--space-1);
  }

  .blaettern-weiter {
    text-align: right;
  }

  /* --- Fußzeile ----------------------------------------------------- */

  .fusszeile {
    border-block-start: var(--border-w) solid var(--color-line-strong);
    padding-block: var(--space-8) var(--space-6);
  }

  .fusszeile-spalten {
    display: grid;
    gap: var(--space-6) var(--grid-gap);
  }

  @media (width >= 40rem) {
    .fusszeile-spalten {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .fusszeile-titel {
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    font-weight: 500;
    font-variation-settings: normal;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-block-end: var(--space-4);
  }

  .fusszeile-hinweis {
    font-family: var(--font-ui);
    font-size: var(--text-s);
    color: var(--color-ink-faint);
    margin-block-start: var(--space-4);
  }

  .fusszeile-basis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-8);
    border-block-start: var(--border-w) solid var(--color-line);
    padding-block-start: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    color: var(--color-ink-faint);
  }
}