/* ============================================================================
   Fylgra-Hilfe – Stylesheet der öffentlichen Hilfe-Seiten, Richtung „Funke“
   ----------------------------------------------------------------------------
   Gestaltung: paul (Richtung C „Funke“, Wahl des Betreibers 2026-10-23).
   Regeln: docs/DESIGN.md §8.20. Klassen, Haken, IDs: docs/CORE_hilfe.md §16.8.
   Entwurf und die Alternativen A/B: fylgra-plaene/hilfe-center/handschrift/.

   Der Export kopiert diese Datei unverändert mit Inhalts-Hash in den Stand
   (/hilfe/_s/hilfe.<hash>.css). Kein Build, kein @import, nichts von fremden
   Hosts (CSP: style-src/font-src/img-src 'self', kein data:). Deshalb sind
   die Bedien-Symbole CSS-Formen (Lupe, Menü, Kasten-Symbole); das
   Pro-Symbol ist das Logo unter /logo/. Themen-Symbole (Lucide) und das
   Hero-Motiv kommen als geprüftes Inline-SVG aus rahmen/symbole/ (html.svg:
   ohne Größe, ohne class – Größe und Farbe setzt diese Datei über
   currentColor). Kein Inline-Stil im Markup.

   ---- Idee -------------------------------------------------------------------
   „Funke, runde Fassung“ (Betreiberwunsch 2026-10-23, Branch
   feat/hilfe-karten): klassisches Help Center in Fylgras Farben. Lesetext
   bleibt Graphit bzw. Papierweiß mit Atkinson, Ecken sind rund, Linien
   leise, Markenblau ist der Akzent. Keine Kopfspalte mehr (eine Spalte auf
   allen Seiten).
   * Startseite: Hero-Band über die ganze Breite im Logo-Verlauf (Blau →
     Violett, hell und dunkel eigene Werte) mit Linien-Motiv
     (rahmen/symbole/hero-motiv.svg, inline), zentrierter h1, Unterzeile und
     großem Suchfeld (Pille, Knopf im Feld). Darunter Themen-Karten, die das
     Band überlappen: weiß bzw. Graphit, rund, weicher Schatten, Symbol im
     getönten Kreis. Der Verlauf liegt NUR auf dem Hero-Band und im
     Symbolkreis (getönt), nie auf Knöpfen oder anderen Flächen.
   * Signatur: der Fylgra-Funke – GENAU EINMAL, als Teil des Hero-Motivs
     (DESIGN §8.20 Regel 13). Nicht ausdehnen.
   * Abschnittskopf: 1-px-Zierlinie über dem Abschnitt, darauf links ein
     kurzer, runder 4-px-Balken in --signal. EIN System für alle
     Abschnitts-h2, im Artikel auch für Inhalts-h2, „Klappt nicht?“ und
     „Verwandte Artikel“.
   * Aktueller Kopf-Link: Tinte, fett, Balken darunter (Menü: Balken links).

   ---- Gemeinsam mit der Landing (nur das) ------------------------------------
   Keine Token-Synchronisation mehr (DESIGN §8.20 Regel 11): Farben, Maße,
   Formen und Schriftwahl sind eigen. Gemeinsam sind nur:
     Marke:         Logo /logo/fylgra-zeichen.svg und der Name „fylgra“
                    (.fy-wortmarke mit <b>)
     Dateien:       Schriften unter /fonts/ (dieselben Dateien, eigene
                    @font-face-Zeilen hier; Lizenzen public/fonts/LICENSE.txt)
     Einwilligung:  consent.js baut das Banner mit .consent* und .btn* – die
                    Klassen sind Vertrag, das Aussehen ist hier eigen.

   ---- Unverändert aus H2b (Abnahme ute) -------------------------------------
   Trefferflächen ≥ 44 px am Handy, Fokusring (hier 3 px) nie ohne Ersatz,
   sr-only, ohne-JS-Regeln, Kopf in drei Stufen (1100/900/720/480), Banner
   sticky + --consent-hoehe, Steckbrief ≥ 900 px als Float und nicht sticky,
   Druck, reduzierte Bewegung, erzwungene Farben.

   ---- Ecken -------------------------------------------------------------------
   --radius-sm (10 px): Knöpfe, Kopf-Knöpfe, kleine Bedienelemente.
   --radius (14 px): Kästen, Vorlage, Video, Menü, Vorschläge, Problem-Zeile
   im Hero, Dialog.
   --radius-karte (18 px): Karten. Pille (999 px): Suchfelder und Chips.

   ---- Farbschema ------------------------------------------------------------
   <html data-farbschema="hell|dunkel"> setzt farbschema.js aus localStorage.
   Ohne Attribut folgt die Seite dem System (prefers-color-scheme). Browser
   melden praktisch immer hell oder dunkel; der dunkle Grundblock ist nur
   Rückfall für Browser ohne die Abfrage. Die Hell-Werte stehen deshalb
   ZWEIMAL (Systemwunsch und Wahl) – beide Blöcke gleich halten.

   ---- Schriften --------------------------------------------------------------
   Lesetext und Bedienung: Atkinson Hyperlegible Next (variabel 200–800, nur
   aufrecht; Kursiv setzt der Browser schräg). Überschriften: Outfit (auch
   für .rt-schrift-outfit). JetBrains Mono nur für <code>, Vorlagen und
   .rt-schrift-mono; Lora und Rajdhani nur für .rt-schrift-*.
   ============================================================================ */

/* ---------------------------------------------------------------- Schriften */
/* latin + latin-ext per unicode-range: Geladen wird eine Datei erst, wenn
   Text sie braucht. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.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: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Outfit: Überschriften, Wortmarke, Leitsätze (400–700) und .rt-schrift-outfit. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/outfit-latin-400-normal.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: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/outfit-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/outfit-latin-500-normal.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: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/outfit-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/outfit-latin-600-normal.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: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/outfit-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/outfit-latin-700-normal.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: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/outfit-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrains Mono: nur <code>, Vorlagen, .rt-schrift-mono. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-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; }
/* Nur für Artikeltext mit .rt-schrift-serif/-rajdhani und Flaggen. */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-latin-normal.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: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-latin-italic.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: "Rajdhani"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/rajdhani-latin-500-normal.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: "Rajdhani"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/rajdhani-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/rajdhani-latin-700-normal.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: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/rajdhani-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Twemoji Country Flags"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/twemoji-country-flags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; }

/* ------------------------------------------------------------------- Tokens */
:root {
  /* Maße und Schriften (beide Schemata) */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-karte: 18px;
  --pille: 999px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kopf-hoehe: 66px;
  --haupt-breite: 780px;
  --steckbrief-breite: 320px;
  /* Startseite: Lesebreite der Abschnitte unter den Karten, Breite des
     Karten-Rasters, Überlappung der Karten ins Hero-Band. */
  --start-lesebreite: 760px;
  --start-kartenbreite: 1080px;
  --ueberlappung: 96px;
  --display: "Twemoji Country Flags", "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: "Twemoji Country Flags", "Atkinson Hyperlegible Next", "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Twemoji Country Flags", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dunkel „Graphit“: gilt bei Systemwunsch dunkel und als Rückfall, falls
     ein Browser prefers-color-scheme nicht kennt. Neutralgrau, kein
     Blaustich. Kontraste (berechnet): ink-dim ≥ 9:1, ink-faint ≥ 6:1,
     signal ≥ 6.7:1 auf panel-2; rand-feld ≥ 4.5:1. */
  color-scheme: dark;
  --ground: #111111;
  --ground-2: #0b0b0b;
  --panel: #1a1a1a;
  --panel-2: #222222;
  --line: #333333;
  --line-soft: #262626;
  --line-strong: #f4f4f1;
  --ink: #f4f4f1;
  --ink-dim: #c6c6c0;
  --ink-faint: #a0a09a;
  --signal: #7ea6ff;
  --signal-bright: #a8c2ff;
  --signal-deep: #1d2a4a;
  --live: #5fd38a;
  --deny: #ff7d73;
  --warn: #ffc14d;
  --rand-feld: #8a8a86;
  --link: #8fb2ff;
  --fokus: #8fb2ff;
  --mark: #3d4f80;
  --knopf: #7ea6ff;
  --knopf-text: #0b0d12;
  --umkehr-grund: #f4f4f1;
  --umkehr-text: #111111;
  --umkehr-dim: #3d3d40;
  --schatten: 0 18px 44px -16px rgba(0, 0, 0, 0.8);
  /* Hero-Band dunkel: Navy → Violett, Logo-Cyan nur als Schimmer oben
     links. Weiß darauf ≥ 12:1 (dunkelste Stelle ~17:1). */
  --hero-grund:
    radial-gradient(120% 140% at 0% 0%, rgba(62, 232, 255, 0.12), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(164, 92, 255, 0.24), transparent 60%),
    linear-gradient(120deg, #0a1633 0%, #13296b 50%, #33196f 100%);
  --hero-motiv-deckkraft: 0.75;
  --hero-feld: var(--panel);
  --hero-feld-rand: var(--rand-feld);
  /* Karten dunkel: Graphit mit Zierrand, Schatten dezent (auf #111 kaum
     sichtbar – der Rand trägt die Kante). */
  --karte: var(--panel);
  --karte-rand: var(--line);
  --karte-schatten: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -16px rgba(0, 0, 0, 0.9);
  --karte-schatten-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 20px 40px -16px rgba(0, 0, 0, 1);
  --symbol-grund: linear-gradient(135deg, rgba(62, 232, 255, 0.16), rgba(164, 92, 255, 0.22));
  --symbol-farbe: var(--signal-bright);
  --rt-akzent: #8fb2ff;
  --rt-rot: #ff7d73;
  --rt-gruen: #5fd38a;
  --rt-gelb: #ffc14d;
  --rt-blau: #4fd0e8;
  --rt-lila: #c3a2ff;
  --rt-grau: #a0a09a;
}

/* Hell „Papierweiß“ – Block 1 von 2: Systemwunsch, solange nichts gewählt
   ist. Gleich halten mit Block 2. Kontraste: ink-dim ≥ 9:1, ink-faint
   ≥ 5.6:1, signal ≥ 6:1 auf panel-2; rand-feld ≥ 4.2:1; Weiß auf Knopf 7:1.
   Hero (berechnet): Weiß auf den drei Verlaufsfarben 6,1 / 7,1 / 7,0:1; an der
   hellsten Stelle (Cyan-Schimmer ganz oben links, 0.18) ~4,6:1. Die Linien
   des Motivs (≤ 0,25 Weiß) liegen außerhalb der Textmitte. */
@media (prefers-color-scheme: light) {
  :root:not([data-farbschema="dunkel"]) {
    color-scheme: light;
    --ground: #ffffff;
    --ground-2: #f3f3f1;
    --panel: #f6f6f4;
    --panel-2: #ececea;
    --line: #d4d4d0;
    --line-soft: #e6e6e3;
    --line-strong: #0c0c0d;
    --ink: #0c0c0d;
    --ink-dim: #3d3d40;
    --ink-faint: #5c5c60;
    --signal: #1a44e0;
    --signal-bright: #1236b8;
    --signal-deep: #e3e9ff;
    --live: #17713b;
    --deny: #b3261e;
    --warn: #8a5000;
    --rand-feld: #6e6e72;
    --link: #1a44e0;
    --fokus: #1a44e0;
    --mark: #dfe6ff;
    --knopf: #1a44e0;
    --knopf-text: #ffffff;
    --umkehr-grund: #0c0c0d;
    --umkehr-text: #ffffff;
    --umkehr-dim: #c6c6c0;
    --schatten: 0 18px 40px -16px rgba(12, 12, 13, 0.3);
    --hero-grund:
      radial-gradient(120% 140% at 0% 0%, rgba(62, 232, 255, 0.18), transparent 55%),
      radial-gradient(90% 120% at 100% 100%, rgba(164, 92, 255, 0.24), transparent 60%),
      linear-gradient(120deg, #0b5bd3 0%, #1a44e0 50%, #6a2fd6 100%);
    --hero-motiv-deckkraft: 0.9;
    --hero-feld: #ffffff;
    --hero-feld-rand: #ffffff;
    --karte: #ffffff;
    --karte-rand: var(--line-soft);
    --karte-schatten: 0 1px 2px rgba(16, 24, 64, 0.06), 0 12px 32px -14px rgba(16, 24, 64, 0.22);
    --karte-schatten-hover: 0 2px 6px rgba(16, 24, 64, 0.08), 0 22px 44px -16px rgba(16, 24, 64, 0.34);
    --symbol-grund: linear-gradient(135deg, rgba(10, 166, 201, 0.12), rgba(123, 47, 224, 0.14));
    --symbol-farbe: var(--signal);
    --rt-akzent: #1a44e0;
    --rt-rot: #b3261e;
    --rt-gruen: #17713b;
    --rt-gelb: #8a5000;
    --rt-blau: #0e6f8a;
    --rt-lila: #6532c9;
    --rt-grau: #5c5c60;
  }
}

/* Hell – Block 2 von 2: ausdrücklich gewählt (Fuß „Hell“). */
:root[data-farbschema="hell"] {
  color-scheme: light;
  --ground: #ffffff;
  --ground-2: #f3f3f1;
  --panel: #f6f6f4;
  --panel-2: #ececea;
  --line: #d4d4d0;
  --line-soft: #e6e6e3;
  --line-strong: #0c0c0d;
  --ink: #0c0c0d;
  --ink-dim: #3d3d40;
  --ink-faint: #5c5c60;
  --signal: #1a44e0;
  --signal-bright: #1236b8;
  --signal-deep: #e3e9ff;
  --live: #17713b;
  --deny: #b3261e;
  --warn: #8a5000;
  --rand-feld: #6e6e72;
  --link: #1a44e0;
  --fokus: #1a44e0;
  --mark: #dfe6ff;
  --knopf: #1a44e0;
  --knopf-text: #ffffff;
  --umkehr-grund: #0c0c0d;
  --umkehr-text: #ffffff;
  --umkehr-dim: #c6c6c0;
  --schatten: 0 18px 40px -16px rgba(12, 12, 13, 0.3);
  --hero-grund:
    radial-gradient(120% 140% at 0% 0%, rgba(62, 232, 255, 0.18), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(164, 92, 255, 0.24), transparent 60%),
    linear-gradient(120deg, #0b5bd3 0%, #1a44e0 50%, #6a2fd6 100%);
  --hero-motiv-deckkraft: 0.9;
  --hero-feld: #ffffff;
  --hero-feld-rand: #ffffff;
  --karte: #ffffff;
  --karte-rand: var(--line-soft);
  --karte-schatten: 0 1px 2px rgba(16, 24, 64, 0.06), 0 12px 32px -14px rgba(16, 24, 64, 0.22);
  --karte-schatten-hover: 0 2px 6px rgba(16, 24, 64, 0.08), 0 22px 44px -16px rgba(16, 24, 64, 0.34);
  --symbol-grund: linear-gradient(135deg, rgba(10, 166, 201, 0.12), rgba(123, 47, 224, 0.14));
  --symbol-farbe: var(--signal);
  --rt-akzent: #1a44e0;
  --rt-rot: #b3261e;
  --rt-gruen: #17713b;
  --rt-gelb: #8a5000;
  --rt-blau: #0e6f8a;
  --rt-lila: #6532c9;
  --rt-grau: #5c5c60;
}

/* ---------------------------------------------------------- Grundregeln */
/* Pflicht (CORE_hilfe §16.8): kein totes Bedienelement ohne JavaScript. */
.fy-ohne-js .fy-nur-js,
.fy-mit-js .fy-nur-ohne-js,
[hidden] {
  display: none !important;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  accent-color: var(--signal);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 3px;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.08em 0.36em;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Treffer: Fläche + Unterstrich + fett, nie nur Farbe (Regel 9). */
mark {
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
  padding: 0 0.1em;
  box-shadow: inset 0 -3px 0 var(--signal);
}

/* Fokusring: 3 px Linie + Abstand, passend zur Linienstärke dieser
   Richtung; nie ohne Ersatz entfernt. Auf umgekehrten Flächen (Band,
   gewählte Farbschema-Option) wird --fokus dort auf die Umkehrfarbe gesetzt. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

/* Die einzige Klasse für versteckten Text (§16.8). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* „Zum Inhalt springen“ – erster Tab-Halt, sichtbar beim Fokus. */
.fy-sprung {
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.fy-sprung:focus,
.fy-sprung:focus-visible {
  transform: none;
}

/* Signatur: Der Fylgra-Funke steht seit der runden Fassung NUR im Hero-Motiv
   der Startseite (hero-motiv.svg, DESIGN §8.20 Regel 13) – nicht mehr als
   CSS-Form über der h1. */

/* ===== Abschnittskopf: Balken auf der Linie ===============================
   Jede Abschnitts-h2 steht unter einer 1-px-Zierlinie (am Abschnitt bzw.
   bei .rt > h2 an der h2 selbst, je 18 px Abstand). Ein kurzer, runder
   4-px-Balken in --signal sitzt mittig auf dieser Linie: -20.5 px = 18 px
   Abstand + 1 px Linie + 1.5 px (halber Überstand). Schmuck ohne Inhalt
   (content ""), kein Etikett, kein Symbol. */
.fy-abschnitt > h2::before,
.fy-kacheln > h2::before,
.fy-klappt-nicht > h2::before,
.rt > h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: -20.5px 0 16.5px;
  border-radius: 2px;
  background: var(--signal);
}

/* ------------------------------------------------------------------ Knöpfe */
/* Flach (kein Verlauf), runde Ecken, 2-px-Rand. Hover: Primär wird
   kräftiger (--signal-bright), Zweit/Ghost bekommen eine Tönung mit Rand in
   --signal. Kontraste (berechnet): knopf-text auf signal-bright hell ~9:1,
   dunkel ~11:1; Tinte auf signal-deep ≥ 13:1. */
.fy-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--knopf);
  border-radius: var(--radius-sm);
  background: var(--knopf);
  color: var(--knopf-text);
  font: 600 15.5px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.fy-knopf:hover {
  background: var(--signal-bright);
  border-color: var(--signal-bright);
  color: var(--knopf-text);
}
.fy-knopf:active {
  transform: translateY(1px);
}
/* Sekundär: „In Fylgra öffnen“, „Erneut versuchen“. */
.fy-knopf--zweit {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
/* Ghost: „Fylgra hinzufügen“ – nie primär (E9, L7). */
.fy-knopf--ghost {
  background: transparent;
  border-color: var(--rand-feld);
  color: var(--ink);
}
.fy-knopf--zweit:hover,
.fy-knopf--ghost:hover {
  background: var(--signal-deep);
  border-color: var(--signal);
  color: var(--ink);
}

/* Chips: Filter (hilfe.js), Sprungmarken ohne JS, Themenlisten – eine Optik.
   Pille mit 2-px-Rand (Abzeichen bleiben eckiger, damit sie nicht wie Chips
   oder Knöpfe wirken – Regel 1). */
.fy-chips,
.fy-sprungmarken ul,
.fy-liste--themen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-chip,
.fy-sprungmarken a,
.fy-liste--themen a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 15px;
  border: 2px solid var(--rand-feld);
  border-radius: var(--pille);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1.25 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.fy-chip:hover,
.fy-sprungmarken a:hover,
.fy-liste--themen a:hover {
  border-color: var(--ink);
}
.fy-sprungmarken,
.fy-sprungmarken + .fy-chips {
  margin-top: 28px;
}
/* Gewählt: Fläche in Markenblau + Haken + fett – nicht nur Farbe. */
.fy-chip[aria-pressed="true"] {
  border-color: var(--knopf);
  background: var(--knopf);
  color: var(--knopf-text);
  font-weight: 700;
}
.fy-chip[aria-pressed="true"]::before {
  content: "✓";
  content: "✓" / "";
}

/* --------------------------------------------------------------------- Kopf */
.fy-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.fy-kopf-innen {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--kopf-hoehe);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.fy-kopf ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-kopf a {
  text-decoration: none;
}

/* Marke: Zeichen frei, Wortmarke fett klein geschrieben, „Hilfe“ hinter
   einem 2-px-Balken. */
.fy-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--ink);
}
.fy-marke img {
  width: 30px;
  height: 30px;
}
.fy-wortmarke {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.fy-wortmarke b {
  color: var(--signal);
  font-weight: 700;
}
.fy-marke-zusatz {
  padding-left: 11px;
  border-left: 2px solid var(--line-strong);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.fy-kopf .fy-nav-links {
  display: flex;
  gap: 24px;
  margin-left: 16px;
}
.fy-nav-links a {
  position: relative;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color 0.12s ease;
}
.fy-nav-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* Aktuell: Tinte + fett + 4-px-Balken unter dem Wort (Form, nicht nur
   Farbe) – dieselbe Balken-Sprache wie der Abschnittskopf. */
.fy-nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}
.fy-nav-links a[aria-current="page"]:hover {
  text-decoration: none;
}
.fy-nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 4px;
  border-radius: 2px;
  background: var(--signal);
}

/* Kompakte Suche im Kopf (Unterseiten). */
.fy-kopfsuche {
  --feld-h: 38px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(200px, 26vw, 320px);
  margin-left: auto;
}
.fy-kopfsuche .fy-suchfeld {
  height: var(--feld-h);
  padding-left: 38px;
  font-size: 15px;
}
/* Kein zweites „ד neben „Suche schließen“ (Abnahme H2b N4). */
.fy-kopfsuche .fy-suchfeld::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Leeres Feld: Das „ד nimmt sonst Platz weg und schneidet bei 320 px den
   Platzhalter ab (Nachprüfung ute Hero). Mit Text erscheint es wieder. */
.fy-suchfeld:placeholder-shown::-webkit-search-cancel-button {
  display: none;
}
.fy-kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.fy-mit-js .fy-kopfsuche ~ .fy-kopf-aktionen {
  margin-left: 6px;
}
.fy-sprache {
  padding: 8px 6px;
  font-size: 14.5px;
  color: var(--ink-dim);
}
.fy-sprache:hover {
  color: var(--ink);
  text-decoration: underline;
}
.fy-kopf-aktionen .fy-anmelden,
.fy-kopf-aktionen .fy-einladen {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 2px solid var(--rand-feld);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 600 14.5px/1.2 var(--font);
  white-space: nowrap;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.fy-kopf-aktionen .fy-anmelden:hover,
.fy-kopf-aktionen .fy-einladen:hover {
  border-color: var(--signal);
  background: var(--signal-deep);
  color: var(--ink);
}

/* Lupe (Handy) und Menü (Handy) – am Desktop aus. */
.fy-lupe,
.fy-menue > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--rand-feld);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.fy-lupe:hover,
.fy-menue > summary:hover {
  border-color: var(--ink);
}
.fy-lupe[aria-expanded="true"],
.fy-menue[open] > summary {
  border-color: var(--umkehr-grund);
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
}
.fy-lupe {
  display: none;
}
/* Lupe als CSS-Form: Ring + Griff (keine Bilddatei, CSP). */
.fy-lupe::before,
.fy-kopfsuche::before,
.fy-suche-gross::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
}
.fy-lupe::after,
.fy-kopfsuche::after,
.fy-suche-gross::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 7px;
  background: currentColor;
  transform: rotate(-45deg);
  pointer-events: none;
}
.fy-lupe::before {
  left: 13px;
  top: 12px;
}
.fy-lupe::after {
  left: 24.5px;
  top: 21.5px;
}
.fy-kopfsuche::before,
.fy-kopfsuche::after {
  color: var(--ink-faint);
  z-index: 1;
}
.fy-kopfsuche::before {
  left: 14px;
  top: calc(var(--feld-h) / 2 - 7.5px);
}
.fy-kopfsuche::after {
  left: 25.5px;
  top: calc(var(--feld-h) / 2 + 1.5px);
}

.fy-menue {
  display: none;
}
.fy-menue > summary {
  gap: 8px;
  padding: 0 12px;
  font: 600 15px/1 var(--font);
  list-style: none;
}
.fy-menue > summary::-webkit-details-marker {
  display: none;
}
/* Kein Burger: vier Quadrate im Raster (2 × 2) vor dem Wort „Menü“. Das
   erste Quadrat ist das Element, die drei anderen sind Schatten; der
   Versatz hält das Raster mittig. */
.fy-menue > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor, 0 7px 0 currentColor, 7px 7px 0 currentColor;
  transform: translateY(-3.5px);
}
.fy-kopf .fy-menue-liste {
  position: absolute;
  top: calc(100% + 2px);
  right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(320px, calc(100vw - 32px));
  /* Innenabstand statt overflow: hidden – der Fokusring der Einträge
     (3 + 3 px) bleibt so sichtbar. */
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schatten);
}
.fy-menue-liste li + li {
  border-top: 1px solid var(--line);
}
.fy-menue-liste a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 500;
}
.fy-menue-liste a:hover {
  background: var(--panel-2);
}
/* Aktuell im Menü: fett + Balken links (Balken-Sprache wie im Kopf). */
.fy-menue-liste a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--signal);
}
.fy-menue-liste .fy-sprache {
  padding: 8px 12px;
  font-size: 16.5px;
}
.fy-menue-liste .fy-einladen {
  justify-content: flex-start;
  margin: 8px 6px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}

/* × der aufgeklappten Handy-Suchzeile (hilfe.js) – am Desktop nie. */
.fy-suche-zu {
  display: none;
}

/* -------------------------------------------------------------- Suchfelder */
.fy-suchfeld {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 2px solid var(--rand-feld);
  border-radius: var(--pille);
  background: var(--panel);
  color: var(--ink);
  font: 400 16.5px/1.2 var(--font);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease;
}
.fy-suchfeld::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}
.fy-suchfeld:hover {
  border-color: var(--ink-dim);
}
.fy-suchfeld:focus-visible,
.fy-suchfeld:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--ink);
}

/* Großes Feld (Start, Ergebnisseite, 404/410) – der eine Akzent der Seite:
   Pille mit Lupe links und dem Knopf „Suchen“ IM Feld rechts (absolut, je
   6 px Luft). Das Feld selbst trägt Rand und Fokusring – der Ring liegt
   außen um die ganze Pille, der Knopf hat seinen eigenen. Platz rechts im
   Feld für den Knopf: --knopf-platz (Knopf „Suchen“/„Search“ ~100 px). */
.fy-suche-gross {
  --feld-h: 60px;
  --knopf-platz: 124px;
  position: relative;
  display: flex;
  gap: 0;
  max-width: 700px;
  margin-top: 28px;
}
.fy-suche-gross::before,
.fy-suche-gross::after {
  color: var(--ink-dim);
  z-index: 3;
}
.fy-suche-gross::before {
  left: 22px;
  top: calc(var(--feld-h) / 2 - 7.5px);
}
.fy-suche-gross::after {
  left: 33.5px;
  top: calc(var(--feld-h) / 2 + 1.5px);
}
.fy-suchfeld--gross {
  flex: 1;
  height: var(--feld-h);
  padding: 0 var(--knopf-platz) 0 52px;
  font-size: 19px;
}
.fy-suche-gross > .fy-knopf {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  min-height: 0;
  padding: 0 24px;
  border-radius: var(--pille);
  font-size: 16.5px;
}
/* Ring innerhalb der 6 px Luft, damit er nicht am Feldrand klebt. */
.fy-suche-gross > .fy-knopf:focus-visible {
  outline-offset: 2px;
}

/* Vorschlagsliste (Combobox, hilfe.js). */
.fy-vorschlaege {
  position: absolute;
  top: calc(var(--feld-h) + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 4px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  /* Steht im Hero (weißer Text): Farbe hier fest. */
  color: var(--ink);
  box-shadow: var(--schatten);
  text-align: left;
}
.fy-kopfsuche .fy-vorschlaege {
  left: auto;
  width: min(440px, calc(100vw - 32px));
}
.fy-vorschlag-gruppe + .fy-vorschlag-gruppe {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.fy-vorschlag-kopf {
  padding: 10px 14px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-faint);
}
.fy-vorschlag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 7px 14px;
  cursor: pointer;
}
.fy-vorschlag:hover {
  background: var(--panel-2);
}
/* Aktive Zeile: Fläche + Balken links (nicht nur Farbe). */
.fy-vorschlag[aria-selected="true"] {
  background: var(--signal-deep);
  box-shadow: inset 4px 0 0 var(--signal);
}
.fy-vorschlag-titel {
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fy-vorschlag-zusatz {
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.35;
}
.fy-vorschlag-alle {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.fy-vorschlag-alle .fy-vorschlag-titel {
  color: var(--link);
}
.fy-vorschlag-laedt {
  padding: 12px 14px;
  color: var(--ink-faint);
  font-size: 15px;
}

/* ------------------------------------------------------------ Hauptbereich */
.fy-haupt {
  --haupt-rand: 24px;
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--haupt-breite) + 2 * var(--haupt-rand));
  margin: 0 auto;
  padding: 30px var(--haupt-rand) 80px;
  overflow-wrap: anywhere;
}
.fy-seite--modul {
  --haupt-breite: 1092px;
}

/* Brotkrumen */
.fy-krumen {
  margin-bottom: 22px;
  font-size: 14.5px;
}
.fy-krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
}
.fy-krumen li + li::before {
  content: "›";
  content: "›" / "";
  margin-right: 8px;
  color: var(--ink-faint);
}
.fy-krumen a {
  color: var(--ink-dim);
  text-decoration: none;
}
.fy-krumen a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Kopfzeile: Abzeichen, h1, Untertitel, Stand – Plakatgröße, linksbündig.
   Laufweite nur leicht enger (Abnahme K2: -0.04em ließ die Wortabstände
   zusammenfallen). Die Startseiten-h1 steht im Hero (siehe dort). */
.fy-haupt h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  hyphens: auto;
}
.fy-untertitel {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--ink-dim);
  font-size: clamp(17.5px, 2.1vw, 20px);
  line-height: 1.5;
}
/* Abzeichen (Regel 1): getöntes Etikett in Markenblau, kleine Rundung –
   keine Pille, kein Rand (sonst sähe es wie ein Chip oder Knopf aus).
   signal-bright auf signal-deep: hell ~7:1, dunkel ~8:1. */
.fy-abzeichen {
  display: inline-block;
  padding: 3px 10px 4px;
  border-radius: 6px;
  background: var(--signal-deep);
  color: var(--signal-bright);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  vertical-align: middle;
}
p.fy-abzeichen {
  margin-bottom: 14px;
}
.fy-stand {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 14.5px;
  font-weight: 500;
}
.fy-absender {
  color: var(--ink);
  font-weight: 600;
}

/* Abschnitte und Listen. Zierlinie über jedem Abschnitt, Balken der h2
   darauf (siehe „Abschnittskopf“). */
.fy-abschnitt,
.fy-kacheln,
.fy-klappt-nicht {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.fy-abschnitt h2,
.fy-kacheln h2,
.fy-klappt-nicht h2 {
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 700;
}
.fy-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-liste > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.fy-liste > li:first-child {
  padding-top: 4px;
}
.fy-liste a {
  font-weight: 600;
  font-size: 17.5px;
  text-decoration: none;
}
.fy-liste a:hover {
  text-decoration: underline;
}
.fy-liste.fy-liste--themen > li {
  padding: 0;
  border: 0;
}
.fy-liste.fy-liste--themen a {
  font-size: 15px;
  font-weight: 500;
}
.fy-liste.fy-liste--themen a:hover {
  text-decoration: none;
}
.fy-zusatz {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 400;
}
.fy-satz {
  margin-top: 2px;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.5;
}
.fy-mehr,
.fy-glossar-zeile {
  margin-top: 16px;
  font-weight: 600;
}
.fy-glossar-zeile {
  margin-top: 48px;
  font-size: 18px;
}
.fy-mehr a,
.fy-glossar-zeile a {
  text-decoration: none;
}
.fy-mehr a:hover,
.fy-glossar-zeile a:hover {
  text-decoration: underline;
}
.fy-mehr span,
.fy-glossar-zeile span {
  color: var(--link);
}

/* A–Z in Spalten */
.fy-abschnitt--az .fy-liste {
  columns: 3 200px;
  column-gap: 32px;
}
.fy-abschnitt--az .fy-liste > li {
  break-inside: avoid;
  padding: 5px 0;
  border: 0;
}

/* Leerer Zustand: ein Satz, kein Handelnder (Regel 3). */
.fy-leer {
  margin-top: 28px;
  padding: 18px 20px;
  border: 2px dashed var(--rand-feld);
  border-radius: var(--radius);
  color: var(--ink-dim);
}

/* Kontaktzeile */
.fy-kontakt {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 15.5px;
}
.fy-klappt-nicht .fy-kontakt {
  margin-top: 18px;
}

/* ------------------------------------------------------------- Startseite */
/* Aufbau (DESIGN §8.20 „Startseite“): .fy-hero über die volle Breite, dann
   die Themen-Karten, die das Band um --ueberlappung überlappen, darunter
   die Abschnitte zentriert in --start-lesebreite (keine Kopfspalte).
   .fy-haupt verliert hier Höchstbreite und oberen Abstand; die Kinder
   begrenzen sich selbst, das Hero zieht sich mit negativem Rand auf die
   volle Breite (kein 100vw – das liefe unter die Bildlaufleiste). */
.fy-seite--start .fy-haupt {
  max-width: none;
  padding-top: 0;
}
.fy-seite--start .fy-haupt > * {
  max-width: var(--start-lesebreite);
  margin-left: auto;
  margin-right: auto;
}
.fy-seite--start .fy-haupt > .fy-hero {
  max-width: none;
  margin-left: calc(-1 * var(--haupt-rand));
  margin-right: calc(-1 * var(--haupt-rand));
}
.fy-seite--start .fy-haupt > .fy-kacheln {
  max-width: var(--start-kartenbreite);
}

/* Hero-Band. Kein overflow: hidden (die Vorschlagsliste der Suche ragt
   unten heraus) und kein z-index am Band selbst: Nur der Inhalt liegt mit
   z-index 1 über den Karten, damit die Vorschläge die Karten überdecken.
   Unten Platz für die Überlappung der Karten. */
.fy-hero {
  position: relative;
  padding: clamp(52px, 7vw, 88px) var(--haupt-rand) calc(clamp(44px, 5vw, 64px) + var(--ueberlappung));
  background: var(--hero-grund);
  color: #ffffff;
  text-align: center;
}
/* Motiv: Inline-SVG ohne Größe (html.svg, kein preserveAspectRatio). Es
   deckt das Band ab wie „slice“: mindestens volle Breite, bei hohem Band so
   breit, dass die Höhe reicht (Bandhöhe × 1600/480), mittig angeschnitten.
   Am Handy bleibt so nur die ruhige Mitte (gepunktete Linien, einzelne
   Punkte) sichtbar; die Gruppen links/rechts liegen außerhalb. Ohne
   Container-Einheiten: mindestens 1200 px breit, mittig.
   Sehr breite Fenster (Abnahme ute, 3440 px): Die Breite aus der
   Bandbreite ist auf 2200 px begrenzt, das Motiv steht mittig, der Verlauf
   läuft weiter über die volle Breite. Die Höhen-Regel (333.4cqh) bleibt
   ungedeckelt, damit ein hohes Band immer gedeckt ist. */
.fy-hero-motiv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #ffffff;
  opacity: var(--hero-motiv-deckkraft);
  pointer-events: none;
}
.fy-hero-motiv svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(min(100%, 2200px), 1200px);
  height: auto;
  aspect-ratio: 1600 / 480;
  transform: translate(-50%, -50%);
}
@supports (width: 1cqh) {
  .fy-hero-motiv {
    container-type: size;
  }
  .fy-hero-motiv svg {
    width: max(min(100cqw, 2200px), 333.4cqh);
  }
}
/* Gleich dünne Linien bei jeder Skalierung (Breiten im SVG = px). */
.fy-hero-motiv svg * {
  vector-effect: non-scaling-stroke;
}
.fy-hero-inhalt {
  position: relative;
  z-index: 1;
  max-width: var(--start-lesebreite);
  margin: 0 auto;
}
.fy-hero h1 {
  color: #ffffff;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  word-spacing: 0.04em;
}
.fy-hero-unterzeile {
  max-width: 54ch;
  margin: 16px auto 0;
  color: #ffffff;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
}
.fy-hero .fy-suche-gross {
  --feld-h: 64px;
  max-width: 680px;
  margin: 32px auto 0;
}
/* Im Band: Feld weiß (dunkel: Graphit mit Rand --rand-feld, ≥ 3:1 zum
   Navy), Fokusring des Felds weiß (auf dem Band ≥ 4.6:1). Der Knopf im Feld
   behält den normalen Ring – er liegt auf dem Feld. */
.fy-hero .fy-suchfeld--gross {
  --fokus: #ffffff;
  border-color: var(--hero-feld-rand);
  background: var(--hero-feld);
  box-shadow: 0 12px 32px -14px rgba(8, 12, 40, 0.5);
}
.fy-hero .fy-suchfeld--gross:hover {
  border-color: var(--hero-feld-rand);
}
.fy-beispiele {
  max-width: 700px;
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 15px;
}
.fy-hero .fy-beispiele {
  max-width: 680px;
  margin: 16px auto 0;
  color: #ffffff;
}
/* Ein Beispiel bricht nie in sich um (Abnahme ute, 390 px „Ticket-Kanal
   fehlt“); die Zeile bricht zwischen den Beispielen. */
.fy-hero .fy-beispiele a {
  --fokus: #ffffff;
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}
/* Zusatz hinter einem Beispiel (z. B. Sprache) – grau wäre auf dem Band
   zu schwach. */
.fy-hero .fy-zusatz {
  color: #ffffff;
}

/* Problem-Zeile „Etwas klappt nicht? Probleme lösen ›“ im Hero (ersetzt
   das frühere Band nach den Karten). Ruhige, halbtransparente Leiste mit
   1-px-Rand (--radius, keine Pille – sie soll weder wie ein Chip noch wie
   der Suchknopf wirken), Text weiß, Link fett und unterstrichen. Die ganze
   Leiste ist die Trefferfläche (a::after, ≥ 44 px hoch); Fokusring weiß um
   die Leiste. Kontrast Weiß auf der Tönung (12 %, Hover 18 %) – berechnet:
   hell unter der Leiste (≈ #1a44e0) ≥ 5:1, selbst am hellsten Verlaufspunkt
   (#0b5bd3, nur Ecke oben links) 4,8:1 in Ruhe; dunkel ≥ 9:1. */
.fy-hero-problem {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  margin: 22px auto 0;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 16px;
  line-height: 1.35;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.fy-hero-problem strong {
  font-weight: 700;
}
.fy-hero-problem a {
  --fokus: #ffffff;
  color: #ffffff;
  font-weight: 700;
}
.fy-hero-problem a::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
}
.fy-hero-problem a:focus-visible {
  outline: none;
}
.fy-hero-problem a:focus-visible::after {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
.fy-hero-problem:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}

/* Themen-Karten der Startseite: sitzen auf der Bandkante. Die h2 („Themen“)
   bleibt für Vorleser und Gliederung, ist aber unsichtbar – an der Kante
   läge sie auf dem Verlauf, und die Karten sprechen für sich. */
.fy-seite--start .fy-kacheln {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
}
.fy-seite--start .fy-hero + .fy-kacheln {
  margin-top: calc(-1 * var(--ueberlappung));
}
.fy-seite--start .fy-kacheln > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Abschnitte unter den Karten: zentrierte Lesebreite, h2 darüber. */
.fy-seite--start .fy-abschnitt {
  margin-top: 64px;
}

/* Karten (Betreiberwunsch 2026-10-23, DESIGN §8.20 Regel 12). Regel 2:
   Titel als Link + ein Satz, keine Zähler. Zwei Arten, eine Optik:
   * Themen der Startseite (.fy-kachel): Symbol im getönten Kreis oben,
     Titel und Satz zentriert; am Handy kompakt (Symbol links, Text
     linksbündig). Flex statt Raster, damit eine unvollständige letzte
     Reihe mittig steht; gleiche Höhe je Reihe (stretch).
   * „Module in diesem Thema“ (fy-abschnitt--karten): ohne Symbol (kein
     Symbol-Markup), linksbündig, Raster 1/2 Spalten.
   Karte: --karte (weiß bzw. Graphit), 1-px-Zierrand, --radius-karte,
   weicher Schatten (hier ausdrücklich erlaubt). Titel in Markenblau.
   Hover und Tastaturfokus: 3 px nach oben, Schatten stärker, Titel
   unterstrichen (Form, nicht nur Farbe); bei reduzierter Bewegung kein
   Versatz. „Alle Module A–Z“ und alle übrigen Linklisten bleiben Listen. */
/* Abstand nach den Modulkarten der Themenseite, damit die Sprungmarken darunter
   nicht wie ein Teil der Karten wirken (Abnahme ute, Karten K2). */
.fy-abschnitt--karten {
  margin-bottom: 40px;
}
.fy-kachel-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-abschnitt--karten .fy-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-kachel,
.fy-abschnitt--karten .fy-liste > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  border: 1px solid var(--karte-rand);
  border-radius: var(--radius-karte);
  background: var(--karte);
  box-shadow: var(--karte-schatten);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.fy-kachel {
  flex: 1 1 100%;
  align-items: center;
  gap: 8px;
  padding: 30px 26px 28px;
  text-align: center;
}
/* Symbol: Lucide-SVG (24er viewBox, stroke = currentColor, ohne Größe aus
   html.svg) auf 28 px im getönten Kreis (Logo-Verlauf, niedrige Deckkraft).
   Symbolfarbe auf der Tönung: hell --signal ≥ 5,3:1 (gemessen), dunkel
   signal-bright ≥ 7:1 (Grafik braucht 3:1). */
.fy-kachel-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 68px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--symbol-grund);
  color: var(--symbol-farbe);
}
.fy-kachel-symbol svg {
  display: block;
  width: 28px;
  height: 28px;
}
.fy-kachel > a,
.fy-abschnitt--karten .fy-liste > li > a {
  color: var(--signal);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Ausgeglichene Zeilen: kein „&“ allein am Zeilenende (Abnahme ute, Karten K1). */
  text-wrap: balance;
}
/* Ganze Karte klickbar: Die Fläche des Links deckt die Karte samt Rand
   (-1 px, gleiche Rundung); der Fokusring liegt um die Karte. Höhere
   Spezifität bei „karten“, weil die Handy-Regel für .fy-liste (weiter
   unten) sonst inset: 0 setzt. */
.fy-kachel > a::after,
.fy-abschnitt.fy-abschnitt--karten .fy-liste > li > a::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-karte) + 1px);
}
.fy-kachel > a:focus-visible,
.fy-abschnitt--karten .fy-liste > li > a:focus-visible {
  outline: none;
}
/* Zweifarbiger Ring (Abnahme ute: die obere Reihe liegt auf dem Hero-Band,
   wo --fokus allein unsichtbar war): außen 3 px --fokus, innen füllt ein
   3-px-Saum in --ground die Lücke bis zur Karte. Auf dem Band trägt der
   Saum (hell Weiß auf Blau ≥ 4.6:1), auf dem Seitengrund der Ring (hell
   #1a44e0 auf Weiß 7:1, dunkel #8fb2ff auf #111 ≥ 8:1; auf dem dunklen
   Band ≥ 4.8:1). Erzwungene Farben: Schatten entfällt, Outline bleibt. */
.fy-kachel > a:focus-visible::after,
.fy-abschnitt.fy-abschnitt--karten .fy-liste > li > a:focus-visible::after {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ground);
}
.fy-kachel:hover,
.fy-abschnitt--karten .fy-liste > li:hover {
  box-shadow: var(--karte-schatten-hover);
  transform: translateY(-3px);
}
/* Eigene Regel: Ein Browser ohne :has verwirft nur diese, nicht den Hover. */
.fy-kachel:has(> a:focus-visible),
.fy-abschnitt--karten .fy-liste > li:has(> a:focus-visible) {
  box-shadow: var(--karte-schatten-hover);
  transform: translateY(-3px);
}
.fy-kachel:hover > a,
.fy-abschnitt--karten .fy-liste > li:hover > a {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.fy-kachel:active,
.fy-abschnitt--karten .fy-liste > li:active {
  transform: translateY(-1px);
}
.fy-kachel .fy-satz,
.fy-abschnitt--karten .fy-satz {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.5;
}
/* Spalten: Handy 1, ab 600 px 2, Startseite ab 900 px 3 (Raster
   1080 px; bei 900 px bleiben je Karte ≥ 260 px). 9 Themen = 3 × 3; 4
   Spalten auch bei ≥ 1280 px nicht (9 Karten gingen nicht auf, Sätze
   würden zu schmal). Die Themenseite (780 px) bleibt bei 2. */
@media (min-width: 600px) {
  .fy-kachel {
    flex: 0 1 calc((100% - 20px) / 2);
  }
  .fy-abschnitt--karten .fy-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 900px) {
  .fy-kachel {
    flex-basis: calc((100% - 40px) / 3);
  }
}
/* Handy: kompakte Karte – Symbol links (52 px), Titel und Satz
   linksbündig daneben. Fehlt einer Karte das Symbol, bleibt Spalte 1 leer. */
@media (max-width: 599.98px) {
  .fy-kachel-liste {
    gap: 12px;
  }
  .fy-kachel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    padding: 16px 18px;
    text-align: left;
  }
  .fy-kachel-symbol {
    grid-row: 1 / span 2;
    align-self: center;
    width: 52px;
    height: 52px;
    margin: 0;
  }
  .fy-kachel-symbol svg {
    width: 24px;
    height: 24px;
  }
  .fy-kachel > a,
  .fy-kachel > .fy-satz {
    grid-column: 2;
  }
  .fy-kachel > a {
    font-size: 19px;
  }
  .fy-kachel .fy-satz {
    font-size: 15px;
  }
}

/* Kopf der Themenseite: dasselbe Symbol im selben getönten Kreis wie die
   Startkarte (.fy-kachel-symbol), neben der h1 (Desktop) bzw. darüber
   (Handy < 600 px, wie die kompakte Karte). „Probleme lösen“ hat kein
   Thema und damit keinen .fy-thema-kopf, nur die normale h1. Größen fest,
   weil das SVG aus html.svg keine mitbringt; höhere Spezifität, damit die
   Handy-Regel der Karten (52 px, grid-row, align-self) hier nicht greift. */
.fy-thema-kopf {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fy-thema-kopf h1 {
  flex: 1 1 auto;
  min-width: 0;
}
.fy-thema-kopf .fy-thema-symbol {
  align-self: center;
  width: 64px;
  height: 64px;
  margin: 0;
}
.fy-thema-kopf .fy-thema-symbol svg {
  width: 30px;
  height: 30px;
}
@media (max-width: 599.98px) {
  .fy-thema-kopf {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .fy-thema-kopf h1 {
    flex: none;
    align-self: stretch;
  }
  .fy-thema-kopf .fy-thema-symbol {
    align-self: flex-start;
    width: 52px;
    height: 52px;
  }
  .fy-thema-kopf .fy-thema-symbol svg {
    width: 24px;
    height: 24px;
  }
}

/* ------------------------------------------------------------------ Kästen */
/* Gemeinsam: runde Fläche ohne Rahmen, Balken OBEN (4 px, ≥ 3:1; läuft in
   den Ecken mit der Rundung aus) – DESIGN §8.20 Regel 12. Wort und Symbol
   unterscheiden die Arten (Regel 9). */
.fy-kurz,
.fy-voraussetzungen,
.fy-steckbrief,
.fy-rahmen-hinweis,
.rt-hinweis,
.fy-such-fehler,
.fy-suche-ohne-js,
.fy-keine {
  margin: 26px 0 0;
  padding: 16px 20px 18px;
  border: 0;
  border-top: 4px solid var(--rand-feld);
  border-radius: var(--radius);
  background: var(--panel);
}
.fy-kurz,
.fy-voraussetzungen,
.fy-steckbrief {
  border-top-color: var(--signal);
}
.fy-rahmen-hinweis {
  margin: 0 0 22px;
  border-top-color: var(--signal);
  background: var(--panel-2);
  font-size: 15.5px;
}
.fy-rahmen-hinweis p + p {
  margin-top: 4px;
  color: var(--ink-dim);
}
/* Kastenkopf: kleiner fetter Satz (keine Versalien, kein Mono). */
.fy-kurz h2,
.fy-voraussetzungen h2 {
  margin-bottom: 6px;
  color: var(--ink-dim);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
/* „In Kürze“ als Leitsatz: groß gesetzt. */
.fy-kurz p {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Zeilen (dt/dd) – Voraussetzungen und Steckbrief */
.fy-kasten-zeilen {
  margin: 0;
}
.fy-kasten-zeilen dt {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.fy-kasten-zeilen dd {
  margin: 2px 0 0;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.55;
}
.fy-kasten-zeilen dd p + p {
  margin-top: 4px;
}
.fy-kasten-zeilen dd ul {
  margin: 4px 0 0;
  padding-left: 1.2em;
}
.fy-kasten-zeilen dd li + li {
  margin-top: 2px;
}
.fy-kasten-zeilen strong {
  color: var(--ink);
}
.fy-kasten-zeilen dd + dt {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) {
  .fy-voraussetzungen .fy-kasten-zeilen {
    display: grid;
    grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
    column-gap: 24px;
  }
  .fy-voraussetzungen .fy-kasten-zeilen dd {
    margin: 0;
  }
  .fy-voraussetzungen .fy-kasten-zeilen dd + dt,
  .fy-voraussetzungen .fy-kasten-zeilen dd + dt + dd {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}

/* „In Fylgra öffnen“: sekundär, daneben leise, was er öffnet (Regel 8). */
.fy-oeffnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 22px;
}
.fy-kasten-zeilen .fy-oeffnen {
  margin-top: 10px;
}
.fy-leise {
  flex: 1 1 220px;
  color: var(--ink-faint);
  font-size: 14.5px;
  line-height: 1.45;
}

/* Steckbrief (Regel 10) */
.fy-steckbrief h2 {
  margin-bottom: 12px;
  font-size: 21px;
  font-weight: 700;
}
.fy-steckbrief > .fy-oeffnen {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fy-steckbrief > .fy-oeffnen .fy-knopf {
  flex: 1 1 auto;
}
.fy-steckbrief > .fy-oeffnen .fy-leise {
  flex-basis: 100%;
}
.fy-steckbrief-mehr {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.fy-steckbrief-mehr > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fy-steckbrief-mehr > summary::-webkit-details-marker {
  display: none;
}
.fy-steckbrief-mehr > summary:hover {
  background: var(--panel-2);
}
/* Winkel als CSS-Form; dreht beim Öffnen. */
.fy-steckbrief-mehr > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 2px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(-45deg);
  transition: transform 0.15s var(--ease);
}
.fy-steckbrief-mehr[open] > summary::before {
  transform: rotate(45deg);
}
.fy-steckbrief-mehr > .fy-kasten-zeilen {
  padding: 6px 0 2px;
}

/* ---------------------------------------------------------------- Artikel */
.fy-toc {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 3px solid var(--line);
  font-size: 16px;
}
.fy-toc p {
  margin-bottom: 8px;
  color: var(--ink-dim);
  font-size: 15px;
  font-weight: 600;
}
.fy-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-toc li + li {
  margin-top: 6px;
}
.fy-toc a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.fy-toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}
.fy-artikel {
  margin-top: 34px;
}

/* ----------------------------------------------------- Artikelinhalt (rt-*)
   Klassen wie app/web/src/inhalt/inhalt.css (Format v2), Werte aus den
   Hilfe-Tokens. Markup: oeffentlich/rendern.py. */
.rt {
  color: var(--ink);
  font-size: 1em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.rt > :first-child {
  margin-top: 0;
}
.rt > :last-child {
  margin-bottom: 0;
}
.rt p {
  margin: 0 0 0.9em;
}
.rt h2,
.rt h3,
.rt h4 {
  margin: 1.7em 0 0.5em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
}
.rt h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
}
.rt h3 {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.rt h4 {
  font-size: 17px;
  letter-spacing: 0;
}
/* Inhalts-h2 = Abschnittskopf wie „Klappt nicht?“ und „Verwandte Artikel“
   (Abnahme V4: ein Überschriften-System im Artikel): Linie, Balken, gleiche
   Größe und Abstände. h3/h4 bleiben ohne Linie. */
.rt > h2 {
  margin: 48px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rt ul,
.rt ol {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}
.rt li {
  margin: 0 0 0.35em;
}
.rt li > p {
  margin-bottom: 0.25em;
}
.rt li > ul,
.rt li > ol {
  margin: 0.25em 0;
}
.rt li::marker {
  color: var(--ink);
  font-weight: 700;
}
.rt blockquote {
  margin: 0 0 0.9em;
  padding: 0.1em 0 0.1em 1em;
  border-left: 4px solid var(--signal);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.12em;
  font-weight: 500;
}
.rt hr {
  margin: 1.8em 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.rt strong {
  color: var(--ink);
  font-weight: 700;
}
.rt a {
  color: var(--link);
}

.rt-ausrichtung-left { text-align: left; }
.rt-ausrichtung-center { text-align: center; }
.rt-ausrichtung-right { text-align: right; }
.rt-ausrichtung-justify { text-align: justify; }

.rt-schrift-app { font-family: var(--font); }
.rt-schrift-outfit { font-family: var(--display); }
.rt-schrift-rajdhani { font-family: "Twemoji Country Flags", "Rajdhani", ui-sans-serif, system-ui, sans-serif; }
.rt-schrift-mono { font-family: var(--mono); }
.rt-schrift-serif { font-family: "Twemoji Country Flags", "Lora", Georgia, "Times New Roman", serif; }

.rt-groesse-klein { font-size: 0.875em; }
.rt-groesse-normal { font-size: 1em; }
.rt-groesse-gross { font-size: 1.125em; }
.rt-groesse-sehr_gross { font-size: clamp(1.2em, 1.1em + 0.4vw, 1.3em); line-height: 1.3; }

.rt-farbe-akzent { color: var(--rt-akzent); }
.rt-farbe-rot { color: var(--rt-rot); }
.rt-farbe-gruen { color: var(--rt-gruen); }
.rt-farbe-gelb { color: var(--rt-gelb); }
.rt-farbe-blau { color: var(--rt-blau); }
.rt-farbe-lila { color: var(--rt-lila); }
.rt-farbe-grau { color: var(--rt-grau); }

/* Bilder: Link zur großen Datei (ohne JS), Dialog mit JS. */
.rt-figur {
  margin: 0.5em auto 1.2em;
  text-align: center;
}
.rt-figur--klein { max-width: min(100%, 280px); }
.rt-figur--mittel { max-width: min(100%, 520px); }
.rt-bild-link {
  display: block;
  cursor: zoom-in;
}
.rt-bild {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 2px solid var(--line);
}
.rt-bild--klein { max-width: min(100%, 280px); }
.rt-bild--mittel { max-width: min(100%, 520px); }
.rt-bild--voll { max-width: 100%; }
.rt-figur figcaption {
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
}

/* Kästen im Inhalt: Wort + Symbol + Balken, nie nur Farbe (Regel 9).
   Tipp trägt ein Plus im Quadrat – der Funke ist Signatur der Startseite
   und bedeutet nirgends „Tipp“. */
.rt-hinweis {
  margin: 0.5em 0 1.2em;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 0.97em;
}
.rt-hinweis > p:last-child {
  margin-bottom: 0;
}
.rt-hinweis-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  line-height: 1.3;
}
.rt-hinweis-titel strong {
  color: var(--hinweis-farbe, var(--ink));
  font-family: var(--display);
  font-size: 1.05em;
}
.rt-hinweis-titel::before {
  content: "";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--hinweis-farbe, var(--ink-faint));
  color: var(--panel-2);
  font: 800 15px/1 var(--display);
}
/* Tipp: Plus im Quadrat */
.rt-hinweis--tipp {
  --hinweis-farbe: var(--live);
  border-top-color: var(--live);
}
.rt-hinweis--tipp .rt-hinweis-titel::before {
  content: "+";
  content: "+" / "";
}
/* Achtung: Dreieck mit Ausrufezeichen */
.rt-hinweis--achtung {
  --hinweis-farbe: var(--warn);
  border-top-color: var(--warn);
}
.rt-hinweis--achtung .rt-hinweis-titel::before {
  content: "!";
  content: "!" / "";
  width: 22px;
  padding-top: 5px;
  font-size: 13px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Info: Kreis mit „i“ */
.rt-hinweis--info {
  --hinweis-farbe: var(--ink-dim);
  border-top-color: var(--ink-faint);
}
.rt-hinweis--info .rt-hinweis-titel::before {
  content: "i";
  content: "i" / "";
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: italic;
}
/* Pro: Fylgra-Zeichen (Logo aus /logo/, img-src 'self') */
.rt-hinweis--pro {
  --hinweis-farbe: var(--signal);
  border-top-color: var(--signal);
}
.rt-hinweis--pro .rt-hinweis-titel::before {
  background: url("/logo/fylgra-zeichen.svg") center / contain no-repeat;
}

/* Vorlage (kopierbarer Text). Ohne JS markierbar, „Kopieren“ zeigt hilfe.js. */
.rt-vorlage {
  margin: 0.5em 0 1.2em;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.rt-vorlage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.rt-vorlage-titel {
  margin-right: auto;
  color: var(--ink);
  font-weight: 600;
}
.rt-vorlage-knopf {
  min-height: 34px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.2 var(--font);
  cursor: pointer;
}
.rt-vorlage-knopf:hover {
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
}
.rt-vorlage-status {
  color: var(--live);
  font-size: 14px;
  font-weight: 700;
}
.rt-vorlage-status:empty {
  display: none;
}
.rt-vorlage-text {
  margin: 0;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rt-vorlage-text:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: -4px;
}

/* Video: ohne JS ein Link zu YouTube, mit JS „Video laden“ (Knopf), danach iframe. */
.rt-video {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0.5em 0 1.2em;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.rt-video:not(.rt-video--geladen)::before {
  content: "";
  width: 24px;
  height: 28px;
  margin-bottom: 4px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.rt-video-titel {
  max-width: 40ch;
  font-family: var(--display);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
}
.rt-video-laden {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.rt-video:hover .rt-video-laden {
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
}
.rt-video-hinweis {
  max-width: 52ch;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.45;
}
.rt-video:focus-visible {
  outline-offset: 2px;
}
.rt-video--geladen {
  display: block;
  padding: 0;
  cursor: auto;
}
.rt-video--geladen iframe,
.rt-video-rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Bild-Dialog (hilfe.js) */
.fy-bild-dialog {
  max-width: min(1200px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--schatten);
  /* Scrollt bei Bedarf und schneidet das Bild an den runden Ecken. */
  overflow: auto;
}
.fy-bild-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}
.fy-bild-gross {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 60px);
  margin: 0 auto;
  object-fit: contain;
}
.fy-bild-unterschrift {
  padding: 10px 56px 12px 16px;
  color: var(--ink-dim);
  font-size: 15px;
}
.fy-bild-zu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: 400 26px/1 var(--font);
  cursor: pointer;
}
.fy-bild-zu:hover {
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
}

/* ------------------------------------------------------------------ Glossar */
.fy-glossar-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: 520px;
  margin-top: 26px;
  color: var(--ink-dim);
  font-size: 15.5px;
}
.fy-glossar-filter label {
  font-weight: 600;
}
.fy-glossar-filter .fy-suchfeld {
  flex: 1 1 220px;
}
.fy-glossar-status {
  flex-basis: 100%;
  color: var(--ink-faint);
  font-size: 15px;
}
.fy-glossar-status:empty {
  display: none;
}
.fy-glossar-eintrag {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.fy-glossar-eintrag h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 28px;
}
.fy-glossar-eintrag h2 .fy-zusatz {
  font-size: 14px;
  letter-spacing: 0;
}
.fy-glossar-eintrag h2 .fy-abzeichen {
  font-size: 13px;
}
.fy-kurz-text {
  margin: 8px 0 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
}
/* Angesprungener Eintrag: Streifen (Form), nicht nur Farbe. */
.fy-glossar-eintrag:target {
  margin-left: -16px;
  padding-left: 12px;
  border-left: 4px solid var(--signal);
}

/* ------------------------------------------------------------------- Suche */
.fy-ergebnisse,
.fy-suche-leer {
  margin-top: 28px;
}
.fy-suche-leer .fy-abschnitt {
  margin-top: 36px;
}
.fy-ergebnis-kopf {
  color: var(--ink-dim);
  font-size: 16px;
}
.fy-ergebnis-kopf:empty {
  display: none;
}
.fy-ergebnis-inhalt > * + * {
  margin-top: 16px;
}
.fy-ergebnis-kopf + .fy-ergebnis-inhalt {
  margin-top: 14px;
}
.fy-meintest {
  font-size: 18px;
  color: var(--ink);
}
.fy-ergebnis-inhalt > .fy-meintest-klein {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 14.5px;
}
.fy-treffer {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fy-treffer-eintrag {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.fy-treffer-eintrag:first-child {
  border-top: 1px solid var(--line);
}
.fy-treffer-eintrag h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.fy-treffer-eintrag h2 a {
  text-decoration: none;
}
.fy-treffer-eintrag h2 a:hover {
  text-decoration: underline;
}
.fy-treffer-eintrag h2 .fy-zusatz {
  margin-left: 6px;
}
.fy-lage {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 500;
}
.fy-auszug {
  margin-top: 6px;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.55;
}
.fy-keine-titel {
  margin-bottom: 6px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}
.fy-keine p + p,
.fy-such-fehler p + p {
  margin-top: 8px;
}
.fy-keine ul:not(.fy-liste--themen) {
  margin: 6px 0 0;
  padding-left: 1.2em;
  color: var(--ink-dim);
}
.fy-keine ul:not(.fy-liste--themen) li + li {
  margin-top: 4px;
}
.fy-keine .fy-liste--themen,
.fy-such-fehler .fy-liste--themen,
.fy-suche-ohne-js .fy-liste--themen {
  margin-top: 14px;
}
.fy-such-fehler {
  border-top-color: var(--warn);
}
.fy-suche-ohne-js p {
  color: var(--ink);
}
.fy-suche-ohne-js p + .fy-liste--themen + p {
  margin-top: 14px;
}

/* Fehlerseiten, Hinweisseite */
.fy-seite--fehler .fy-haupt > .fy-liste--themen,
.fy-seite--fehler .fy-haupt > p:not([class]),
.fy-seite--angemeldet .fy-haupt > p:not([class]) {
  margin-top: 28px;
}

/* ---------------------------------------------------------------------- Fuß */
.fy-fuss {
  border-top: 1px solid var(--line);
  background: var(--ground-2);
}
.fy-fuss-innen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px 24px 52px;
}
.fy-fuss-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.fy-fuss-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-dim);
  text-decoration: none;
}
.fy-fuss-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
/* Farbschema als Radiogruppe (G9): zusammenhängende Leiste, gewählt =
   umgekehrt. */
.fy-theme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-inline-size: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.fy-theme legend {
  float: left;
  margin-right: 12px;
  padding: 0;
  color: var(--ink-dim);
  font-size: 15px;
  font-weight: 600;
}
.fy-theme label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 2px solid var(--rand-feld);
  color: var(--ink-dim);
  font-size: 15px;
  cursor: pointer;
}
.fy-theme label + label {
  border-left-width: 0;
}
/* Zusammenhängende Leiste mit runden Außenecken. */
.fy-theme label:first-of-type {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.fy-theme label:last-of-type {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fy-theme label:hover {
  color: var(--ink);
  background: var(--panel);
}
.fy-theme input {
  margin: 0;
  accent-color: var(--signal);
}
/* Gewählt: umgekehrt + fett. Ring und Radio in Umkehrfarbe, damit der
   Fokusring auf der umgekehrten Fläche ≥ 3:1 hat (Abnahme V1, berechnet:
   hell 19,5:1, dunkel 17,1:1 statt gemessen 2,74 bzw. 1,91:1). Der Ring
   (3 px + 3 px Abstand) bleibt innerhalb der Option (40/44 px hoch). */
.fy-theme label:has(input:checked) {
  --fokus: var(--umkehr-text);
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
  font-weight: 700;
}
.fy-theme label:has(input:checked) input {
  accent-color: var(--umkehr-text);
}
.fy-fuss-hinweis {
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.5;
}

/* -------------------------------------------- Einwilligung (consent.js)
   consent.js baut das Banner mit den Klassen „.consent*“ und „.btn*“ (wie
   auf der Landing) – die Klassen sind Vertrag, das Aussehen ist eigen und
   gilt nur im Banner. Abweichung (Abnahme H2b V1, WCAG 2.4.11): `sticky`
   statt `fixed` – am Seitenende nimmt sich das Banner selbst Platz. */
.consent {
  position: sticky;
  bottom: 0;
  z-index: 80;
  flex: none;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.3);
  animation: fy-consent-ein 0.28s var(--ease) both;
}
@keyframes fy-consent-ein {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.consent-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.consent-copy {
  flex: 1;
  min-width: 0;
}
.consent-copy h2 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.3;
}
.consent-copy p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.5;
}
.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.consent .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 44px;
  padding: 11px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font);
  cursor: pointer;
}
/* Beide gleich auffällig (Kopfkommentar consent.js). */
.consent .btn-primary {
  background: var(--knopf);
  border-color: var(--knopf);
  color: var(--knopf-text);
}
.consent .btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
/* Hover wie .fy-knopf: Primär kräftiger, Ghost getönt. */
.consent .btn-primary:hover {
  background: var(--signal-bright);
  border-color: var(--signal-bright);
}
.consent .btn-ghost:hover {
  background: var(--signal-deep);
  border-color: var(--signal);
}
/* Mitten in der Seite liegt der Banner weiter über dem Inhalt: Solange er
   offen ist, hält scroll-padding-bottom den Fokus frei (Tab scrollt das
   Ziel über den Banner). Haken ist der Banner selbst (`:has`).
   --consent-hoehe setzt consent.js (gemessene Höhe in px); bis dahin gilt
   eine großzügige Schätzung – zu viel Abstand schadet nicht, zu wenig
   verdeckt (Abnahme H2b V1). */
html:has(> body > .consent) {
  scroll-padding-bottom: calc(var(--consent-hoehe, 220px) + 16px);
}

/* ============================================================ Responsiv */
/* Desktop ab 900 px: Steckbrief als rechte Spalte (Regel 10).
   Float statt Raster: Das Markup ist flach (h1, Steckbrief, Abschnitte als
   Geschwister), und ein über alle Zeilen gespanntes Raster-Element verteilt
   seine Höhe auf die Zeilen – bei hohem Steckbrief entstünden Lücken links.
   Nicht sticky, kein inneres Scrollen (Abnahme H2b V2): Mit offenem „Mehr
   zum Modul“ ist der Kasten meist höher als das Fenster. „In Fylgra öffnen“
   steht deshalb im oberen, immer sichtbaren Teil. */
@media (min-width: 900px) {
  .fy-seite--modul .fy-haupt {
    display: flow-root;
  }
  .fy-seite--modul .fy-steckbrief {
    float: right;
    width: var(--steckbrief-breite);
    /* Oben wie .fy-abschnitt (56 px): Steckbrief-Linie und erste
       Abschnittslinie stehen auf einer Höhe (Abnahme Funke K5). */
    margin: 56px 0 24px 40px;
  }
  .fy-seite--modul .fy-steckbrief ~ * {
    margin-right: calc(var(--steckbrief-breite) + 40px);
  }
}

/* Keine Kopfspalte mehr (runde Fassung, 2026-10-23): Auf allen Seiten steht
   die Abschnitts-h2 über ihrem Inhalt – wie im Artikel (Abnahme V4) und wie
   auf der neuen Startseite. Eine Spalte, ein System. */

/* Unter 1100 px: Kopf-Suche klappt zur Lupe ein. Unter 900 px zusätzlich
   Menü statt Links (§3.1). */
@media (max-width: 1099.98px) {
  .fy-kopf-innen {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .fy-lupe {
    display: inline-flex;
    margin-left: auto;
  }
  .fy-mit-js .fy-lupe ~ .fy-kopf-aktionen {
    margin-left: 0;
  }
  /* Neben der Lupe (44 px) gleich hoch (Abnahme H2b N4). */
  .fy-kopf-aktionen .fy-sprache {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fy-kopf-aktionen .fy-anmelden,
  .fy-kopf-aktionen .fy-einladen {
    min-height: 44px;
  }
  .fy-kopfsuche {
    --feld-h: 44px;
    display: none;
  }
  .fy-kopfsuche[data-offen] {
    display: flex;
    order: 10;
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0;
  }
  .fy-kopfsuche .fy-suchfeld {
    flex: 1;
    font-size: 16px;
  }
  .fy-kopfsuche .fy-vorschlaege {
    left: 0;
    right: 0;
    width: auto;
  }
  .fy-suche-zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 2px solid var(--rand-feld);
    background: transparent;
    color: var(--ink);
    font: 400 26px/1 var(--font);
    cursor: pointer;
  }
  .fy-suche-zu:hover {
    border-color: var(--ink);
  }
}

@media (max-width: 899.98px) {
  .fy-kopf-innen {
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .fy-nav,
  .fy-kopf-aktionen {
    display: none;
  }
  .fy-menue {
    display: block;
    margin-left: auto;
  }
  .fy-mit-js .fy-lupe ~ .fy-menue {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --ueberlappung: 56px;
  }
  body {
    font-size: 16.5px;
  }
  .fy-haupt {
    --haupt-rand: 20px;
    padding: 20px var(--haupt-rand) 60px;
  }
  /* Hero am Handy: ruhiger (Motiv schwächer), Suchfeld etwas flacher –
     der Knopf im Feld bleibt 44 px hoch. */
  .fy-hero-motiv {
    opacity: calc(var(--hero-motiv-deckkraft) * 0.7);
  }
  .fy-hero .fy-suche-gross {
    --feld-h: 56px;
  }
  .fy-seite--start .fy-abschnitt {
    margin-top: 48px;
  }
  /* Brotkrumen als „‹ {vorletztes Glied}“ (§8). */
  .fy-krumen li {
    display: none;
  }
  .fy-krumen {
    margin: -6px 0 8px;
  }
  .fy-krumen li:nth-last-child(2) {
    display: flex;
    align-items: center;
  }
  .fy-krumen li:nth-last-child(2)::before {
    content: "‹";
    content: "‹" / "";
    margin-right: 6px;
  }
  .fy-krumen a {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 44px;
  }
  /* Modulkarten am Handy etwas enger (Trefferfläche bleibt die ganze Karte).
     Die Themen-Karten der Startseite regelt der Block „max-width: 599.98px“. */
  .fy-abschnitt--karten .fy-liste > li {
    padding: 18px 18px 16px;
  }
  .fy-abschnitt--karten .fy-liste > li > a {
    font-size: 20px;
  }
  .fy-abschnitt,
  .fy-kacheln,
  .fy-klappt-nicht {
    margin-top: 40px;
  }
  .rt > h2 {
    margin-top: 40px;
  }
  .fy-kurz,
  .fy-voraussetzungen,
  .fy-steckbrief,
  .fy-rahmen-hinweis,
  .rt-hinweis,
  .fy-such-fehler,
  .fy-suche-ohne-js,
  .fy-keine {
    padding: 14px 16px 16px;
  }
  .fy-suchfeld--gross {
    font-size: 17px;
  }
  /* Ziele ≥ 44 px (§8): Chips, Themen, Theme-Optionen, Fußlinks. */
  .fy-chip,
  .fy-sprungmarken a,
  .fy-liste--themen a,
  .fy-theme label,
  .rt-vorlage-knopf {
    min-height: 44px;
  }
  .fy-fuss-innen {
    padding: 28px 20px 44px;
  }
  .fy-fuss-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  .fy-fuss-nav a {
    min-height: 44px;
  }
  .fy-oeffnen .fy-knopf {
    flex: 1 1 auto;
  }
  .consent-in {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .consent .btn {
    flex: 1;
    min-width: 0;
  }
  html:has(> body > .consent) {
    scroll-padding-bottom: calc(var(--consent-hoehe, 340px) + 16px);
  }
}

/* Listenlinks am Handy (Abnahme H2b N3/N17): Die ganze Zeile ist das Ziel.
   Nur Bildschirm: Der Druck schreibt die Adresse in `a::after`. */
@media screen and (max-width: 720px) {
  .fy-liste:not(.fy-liste--themen) > li {
    position: relative;
  }
  .fy-liste:not(.fy-liste--themen) > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .fy-liste:not(.fy-liste--themen) > li > a:focus-visible {
    outline: none;
  }
  .fy-liste:not(.fy-liste--themen) > li > a:focus-visible::after {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
  }
  .fy-liste:not(.fy-liste--themen) > li:hover > a {
    text-decoration: underline;
  }
  .fy-abschnitt--az .fy-liste > li {
    padding: 10px 0;
  }
  .fy-toc p {
    margin-bottom: 2px;
  }
  .fy-toc li + li {
    margin-top: 0;
  }
  .fy-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }
  .fy-mehr {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3em;
    min-height: 44px;
    margin-top: 3px;
  }
  .fy-mehr > a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .fy-mehr > a:focus-visible {
    outline: none;
  }
  .fy-mehr > a:focus-visible::after {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
  }
  .fy-mehr:hover > a {
    text-decoration: underline;
  }
}

/* Ganz schmal (390): Marke nur Zeichen + „Hilfe“ (UX-H2B §3.1). Plakat-h1
   mit fast normaler Laufweite, damit die Wörter bei 42 px nicht kleben. */
@media (max-width: 480px) {
  .fy-wortmarke {
    display: none;
  }
  .fy-marke-zusatz {
    padding-left: 0;
    border-left: 0;
  }
  .fy-hero h1 {
    letter-spacing: -0.01em;
  }
  /* Knopf im Feld schmaler, damit für den Suchtext Platz bleibt. */
  .fy-suche-gross {
    --knopf-platz: 102px;
  }
  .fy-suche-gross::before {
    left: 18px;
  }
  .fy-suche-gross::after {
    left: 29.5px;
  }
  .fy-suchfeld--gross {
    padding-left: 46px;
  }
  .fy-suche-gross > .fy-knopf {
    padding: 0 16px;
  }
  .fy-abschnitt--az .fy-liste {
    columns: 1;
  }
  /* Farbschema: Legende über der Gruppe, die drei Optionen (311 px) stehen
     dann in einer Zeile (Abnahme Funke K4). Ohne float ist sie wieder die
     Fieldset-Legende und kein Flex-Element. */
  .fy-theme legend {
    float: none;
    margin-right: 0;
    padding-bottom: 8px;
  }
}

/* Unter 360 px (Abnahme ute, 320 px: Platzhalter „Hilfe durchsuchen“
   abgeschnitten): Knopf, Lupe und linkes Polster rücken enger, Schrift
   16 px (iOS zoomt erst darunter). Bei 280 px Feldbreite bleiben ~146 px
   für den Text (Platzhalter ~135 px); der Knopf bleibt 44 px hoch. */
@media (max-width: 359.98px) {
  .fy-suche-gross {
    --knopf-platz: 96px;
  }
  .fy-suche-gross::before {
    left: 14px;
  }
  .fy-suche-gross::after {
    left: 25.5px;
  }
  .fy-suchfeld--gross {
    padding-left: 38px;
    font-size: 16px;
  }
  .fy-suche-gross > .fy-knopf {
    padding: 0 12px;
  }
}

/* ------------------------------------------------------ Bewegung reduziert */
/* Keine Einblendungen, kein weiches Scrollen. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Karten: Hover/Fokus nur über Schatten und Unterstrich, kein Versatz. */
  .fy-kachel:active,
  .fy-abschnitt--karten .fy-liste > li:active,
  .fy-kachel:hover,
  .fy-abschnitt--karten .fy-liste > li:hover {
    transform: none;
  }
  .fy-kachel:has(> a:focus-visible),
  .fy-abschnitt--karten .fy-liste > li:has(> a:focus-visible) {
    transform: none;
  }
}

/* ------------------------------------------------- Erzwungene Farben (HCM) */
/* Formen aus Pseudo-Elementen (Symbole, Balken) in Systemfarbe,
   sonst verschwänden sie mit der erzwungenen Hintergrundfarbe. */
@media (forced-colors: active) {
  .rt-hinweis-titel::before,
  .rt-video:not(.rt-video--geladen)::before,
  .fy-menue > summary::before,
  .fy-lupe::after,
  .fy-kopfsuche::after,
  .fy-suche-gross::after,
  .fy-abschnitt > h2::before,
  .fy-kacheln > h2::before,
  .fy-klappt-nicht > h2::before,
  .rt > h2::before,
  .fy-nav-links a[aria-current="page"]::after {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }
  /* Hero: Verlauf entfällt ohnehin (System erzwingt Canvas); das Motiv
     würde in CanvasText hinter dem Text stehen – weg. Eine Linie trennt
     das Band, Karten und Symbolkreis bekommen einen Rand. */
  .fy-hero-motiv {
    display: none;
  }
  .fy-hero {
    border-bottom: 2px solid CanvasText;
  }
  .fy-kachel,
  .fy-abschnitt--karten .fy-liste > li {
    border: 2px solid CanvasText;
  }
  .fy-kachel-symbol {
    border: 1px solid CanvasText;
  }
  .fy-menue > summary::before {
    box-shadow: 7px 0 0 CanvasText, 0 7px 0 CanvasText, 7px 7px 0 CanvasText;
  }
  .fy-menue-liste a[aria-current="page"] {
    border-left: 4px solid CanvasText;
  }
  .fy-abzeichen,
  .fy-hero-problem {
    border: 2px solid CanvasText;
  }
  .fy-chip[aria-pressed="true"],
  .fy-vorschlag[aria-selected="true"],
  .fy-theme label:has(input:checked) {
    outline: 2px solid Highlight;
  }
}

/* --------------------------------------------------------------------- Druck */
/* Hell, ohne Kopf, Fuß, Suche, Menü, Theme-Gruppe; Links mit Adresse,
   Video als eine Zeile. Hero-Verlauf und -Motiv, Symbole, Schatten und
   Balken fallen weg (Papier: schlichte Überschrift, Karten als Liste);
   Linien schwarz, auch wenn am Bildschirm dunkel gewählt war. */
@media print {
  :root {
    color-scheme: light;
    --line-strong: #000;
    --line: #999;
    --line-soft: #ccc;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body {
    display: block;
    font-size: 11pt;
  }
  /* ::marker erbt das !important-Schwarz von .fy-haupt * nicht (Abnahme Funke R1). */
  .rt li::marker {
    color: #000;
  }
  .fy-kopf,
  .fy-fuss,
  .fy-sprung,
  .fy-suche-gross,
  .fy-kopfsuche,
  .fy-lupe,
  .fy-menue,
  .fy-theme,
  .fy-sprungmarken,
  .fy-chips,
  .fy-glossar-filter,
  .fy-oeffnen,
  .fy-vorschlaege,
  .fy-bild-dialog,
  .rt-vorlage-knopf,
  .rt-vorlage-status,
  .fy-hero-motiv,
  .fy-kachel-symbol,
  .consent {
    display: none !important;
  }
  /* Hero schlicht: Überschrift, Unterzeile, „Zum Beispiel“ und die
     Problem-Zeile linksbündig untereinander (Abnahme ute: kein eingerückter
     mittiger Block), Karten ohne Überlappung. Die Problem-Zeile ist eine
     normale Textzeile ohne Leiste; „›“ entfällt im Druck (hinter der
     gedruckten Adresse stünde er verwaist), ebenso in den übrigen
     „… ›“-Zeilen. */
  .fy-seite--start .fy-haupt > .fy-hero {
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .fy-hero-inhalt,
  .fy-hero-unterzeile,
  .fy-hero .fy-beispiele {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .fy-hero .fy-beispiele a {
    white-space: normal;
  }
  .fy-hero-problem {
    display: block;
    width: auto;
    min-height: 0;
    margin: 6pt 0 0;
    padding: 0;
    border: 0 !important;
  }
  .fy-hero-problem a::after {
    position: static;
  }
  .fy-hero-problem span[aria-hidden="true"],
  .fy-mehr span[aria-hidden="true"],
  .fy-glossar-zeile span[aria-hidden="true"] {
    display: none;
  }
  .fy-seite--start .fy-haupt > * {
    max-width: none;
  }
  .fy-seite--start .fy-hero + .fy-kacheln {
    margin-top: 18pt;
  }
  .fy-haupt {
    max-width: none;
    padding: 0;
  }
  .fy-haupt,
  .fy-haupt * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  .fy-abschnitt,
  .fy-kacheln,
  .fy-klappt-nicht {
    display: block !important;
  }
  .fy-abschnitt > h2::before,
  .fy-kacheln > h2::before,
  .fy-klappt-nicht > h2::before,
  .rt > h2::before {
    content: none !important;
  }
  .fy-abzeichen {
    padding: 0;
    text-decoration: underline;
  }
  mark {
    text-decoration: underline;
  }
  .fy-kurz,
  .fy-voraussetzungen,
  .fy-steckbrief,
  .fy-rahmen-hinweis,
  .rt-hinweis,
  .rt-vorlage,
  .fy-leer {
    border-color: #999 !important;
    border-top-color: #000 !important;
    break-inside: avoid;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  .fy-seite--modul .fy-steckbrief {
    float: none;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 16px 0;
  }
  .fy-seite--modul .fy-steckbrief ~ * {
    margin-right: 0;
  }
  details::details-content {
    content-visibility: visible;
    display: block;
  }
  /* Adressen hinter Links (Abnahme H2b N2). */
  .fy-haupt a[href]:not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not(.rt-bild-link):not(.fy-knopf):not(.rt-video)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  .fy-haupt a[href^="/"]:not([href^="/_/"]):not(.rt-bild-link):not(.fy-knopf)::after {
    content: " (fylgra.com" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  /* Video als eine Zeile „Video: {Titel} – youtube.com/watch?v=…“. */
  .rt-video,
  .rt-video--geladen {
    display: block;
    aspect-ratio: auto;
    margin: 0.4em 0 0.9em;
    padding: 0;
    border: 0 !important;
    text-align: left;
  }
  .rt-video:not(.rt-video--geladen)::before,
  .rt-video--geladen[data-titel]::before {
    content: "Video: ";
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    background: none;
    font-weight: 700;
  }
  .rt-video--geladen[data-titel]::before {
    content: "Video: " attr(data-titel);
  }
  .rt-video-titel {
    font-weight: 700;
  }
  .rt-video-laden,
  .rt-video-hinweis,
  .rt-video--geladen iframe,
  .rt-video--geladen:not([data-titel]) {
    display: none !important;
  }
  .rt-video[data-video]::after {
    content: " – youtube.com/watch?v=" attr(data-video);
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  /* Karten als einfache Liste: eine Spalte, Zierlinie unten, kein Rand,
     kein Symbol, kein Schatten, kein Versatz, linksbündig. */
  .fy-kachel-liste,
  .fy-abschnitt--karten .fy-liste {
    display: block;
  }
  .fy-kachel,
  .fy-abschnitt--karten .fy-liste > li {
    display: block;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    text-align: left;
    transform: none !important;
    break-inside: avoid;
  }
  .fy-kachel > a,
  .fy-abschnitt--karten .fy-liste > li > a {
    font-size: 13pt;
  }
  .fy-kachel > a::after,
  .fy-abschnitt.fy-abschnitt--karten .fy-liste > li > a::after {
    position: static;
  }
  .fy-krumen a::after {
    content: none !important;
  }
  .fy-haupt a {
    text-decoration: underline;
  }
}