/* ==== 02-brand/design-v6/fonts-v6.css ==== */
/* =============================================================================
   JG-HAUSDESIGN v6 „Rotstift“ · SCHRIFTEN (Stand 30.10.2026)
   Einzige Schriften für neue Seiten und Dokumente:
     Literata          Überschriften, Wortmarke, Zahlen, Beispielblätter, Buchtext
     Schibsted Grotesk Fließtext, Bedienelemente, Tabellen, Formulare
     Mynerve           nur kurze Randnotizen in Karmin (höchstens fünf Wörter)
   Quelle: Fontsource 5.3.0 (@fontsource-variable/literata, @fontsource-variable/schibsted-grotesk,
   @fontsource/mynerve). Lizenz: SIL Open Font License 1.1, Texte in fonts/OFL-*.txt.
   Pfade relativ zu dieser Datei. Selbst gehostet, keine Anfrage an Google Fonts oder andere Dienste.
   latin-ext lädt per unicode-range nur, wenn solche Zeichen vorkommen; Kursivschnitte nur bei Kursivsatz.
   Einzeldateien (Decks, Karten, Versand): python3 scripts/embed-fonts-v6.py <datei.html>
   ========================================================================== */

/* ---------- Literata (variabel: opsz 7–72, wght 200–900) ---------- */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/literata-latin-opsz-normal.woff2') format('woff2-variations');
  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: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/literata-latin-ext-opsz-normal.woff2') format('woff2-variations');
  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;
}

/* Kursiv nur, wo der Inhalt es verlangt (Werktitel, Zitierbeispiele, Buchtext) */
@font-face {
  font-family: 'Literata Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/literata-latin-opsz-italic.woff2') format('woff2-variations');
  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: 'Literata Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/literata-latin-ext-opsz-italic.woff2') format('woff2-variations');
  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;
}

/* ---------- Schibsted Grotesk (variabel: wght 400–900) ---------- */
@font-face {
  font-family: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Schibsted Grotesk Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('fonts/schibsted-grotesk-latin-wght-italic.woff2') format('woff2-variations');
  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: 'Schibsted Grotesk Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('fonts/schibsted-grotesk-latin-ext-wght-italic.woff2') format('woff2-variations');
  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;
}

/* ---------- Mynerve (400): nur Randnotizen, nie vorladen, nie in versteckten Texten ---------- */
@font-face {
  font-family: 'Mynerve';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/mynerve-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: 'Mynerve';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/mynerve-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;
}

/* ---------- Ersatzschriften mit angeglichenen Maßen gegen Layoutsprünge ----------
   Werte aus der Design-Richtung Rotstift (Abschnitt 2.2, fontTools 4.68.0, Näherungen,
   im Browser per CLS-Messung zu bestätigen). Auf Android fehlen Georgia und Arial;
   dort greift die generische Ersatzschrift. */
@font-face {
  font-family: 'Literata Ersatz';
  src: local('Georgia Bold'), local('Georgia-Bold');
  font-weight: 500 900;
  size-adjust: 95%;
  ascent-override: 124%;
  descent-override: 32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Literata Ersatz';
  src: local('Georgia');
  font-weight: 200 499;
  size-adjust: 111%;
  ascent-override: 106%;
  descent-override: 28%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Schibsted Ersatz';
  src: local('Arial'), local('ArialMT');
  font-weight: 400 599;
  size-adjust: 104.7%;
  ascent-override: 93.3%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Schibsted Ersatz';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 900;
  size-adjust: 102.2%;
  ascent-override: 95.6%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

/* ==== 02-brand/design-v6/tokens.css ==== */
/* =============================================================================
   JG-HAUSDESIGN v6 „Rotstift“ · DESIGN-TOKENS (Stand 30.10.2026)
   Verbindlich: 02-brand/brand-design-system-v6.md. Gestaltungsquelle:
   04-projects/thesislotse/03-marke/02-design-richtung.md (Anhang A).
   Tinte ist der Stoff des Gegenübers (Zahlen, Text, Unternehmen). Karmin ist Jörgs Beitrag
   (Randnotiz, Prüfvermerk, Hauptaktion). Papier ist die Arbeitsfläche.
   Regeln: Farbwerte stehen nur in dieser Datei. Alle anderen Dateien verwenden Variablen.
   Namen bleiben stabil; ein neuer Name braucht einen Eintrag in der Abbildungstabelle der v6-Doku.
   Kontraste (WCAG 2.x) stehen in der v6-Doku, Abschnitt „Farben und Kontraste“.
   Breakpoints (in em, Medienabfragen können keine Variablen lesen):
     kompakt max-width 22.99em · schmal max-width 25.99em · mittel min-width 40em ·
     groß min-width 64em · breit min-width 80em
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Papier und Tinte ---------- */
  --farbe-papier: #F2F4F7;                    /* Seitengrund, kühles Papier, kein Creme */
  --farbe-blatt: #FFFFFF;                     /* Blätter: Karten, Formulare, Hinweise, Folien-Karten */
  --farbe-flaeche: #E6EAF0;                   /* abgesetzte Flächen: Tabellenkopf, Code, Platzhalter */
  --farbe-seitengrund: var(--farbe-papier);   /* KI OS und Dashboards: Weiß (ki-os-theme-v6.css), Druck: Weiß */
  --farbe-tinte: #121A2B;                     /* Text, Überschriften, Zahlen, Fokus, Fuß */
  --farbe-tinte-2: #3F4A5C;                   /* Lead, Nebentext */
  --farbe-tinte-3: #586273;                   /* Meta, Hilfetexte, Feldränder; als Text ab 13 px */
  --farbe-linie: #C9D0DA;                     /* Haarlinien, nur Schmuck, trägt nie Information */
  --farbe-linie-mittel: #7A8496;              /* gestrichelte Rahmen, Grafikgrau, mindestens 3:1 */
  --farbe-linie-stark: var(--farbe-tinte-3);  /* Ränder von Eingabefeldern */

  /* ---------- Rotstift: Jörgs Beitrag ---------- */
  --farbe-karmin: #C8102E;                    /* Randnotiz, Prüfvermerk, Korrektur, Hauptaktion, aktueller Bereich */
  --farbe-karmin-tief: #9E0E27;               /* Hover und aktiver Zustand der Hauptaktion */
  --farbe-auf-karmin: #FFFFFF;

  /* ---------- Auf Tinte (Fuß, Abschlussfolie) ---------- */
  --farbe-auf-tinte: #F2F4F7;
  --farbe-auf-tinte-2: #B5BECC;

  /* ---------- Status (Funktionsschicht): nie Karmin, nie Farbe allein ---------- */
  --farbe-fehler: #B42318;   --farbe-fehler-flaeche: #FCEDEB;
  --farbe-achtung: #8A5A00;  --farbe-achtung-flaeche: #FBF1DC;
  --farbe-info: #2B4C7E;     --farbe-info-flaeche: #E8EEF7;
  --farbe-erfolg: #1D6B46;   --farbe-erfolg-flaeche: #E6F2EB;
  --farbe-auswahl: #F7D9DE;                   /* ::selection; nur mit Tinte-Text */

  /* ---------- Diagramme: Reihen nie in Karmin, Karmin nur als Anmerkung ---------- */
  --farbe-diagramm-1: var(--farbe-tinte);     /* erste Reihe, meist Ist oder Ausgangslage */
  --farbe-diagramm-2: #4F6A8F;                /* Schiefer: zweite Reihe, meist Plan oder mit Maßnahme */
  --farbe-diagramm-3: #9A6B12;                /* Ocker: dritte Reihe, nie als Text auf Papier */
  --farbe-diagramm-4: var(--farbe-linie-mittel);
  --farbe-diagramm-anmerkung: var(--farbe-karmin);
  --farbe-diagramm-raster: var(--farbe-linie);
  --farbe-diagramm-achse: var(--farbe-tinte-3);
  --farbe-diagramm-grenze: var(--farbe-linie-mittel);
  --farbe-diagramm-kritisch: var(--farbe-fehler-flaeche);

  /* ---------- Fokus ---------- */
  --farbe-fokus: var(--farbe-tinte);
  --farbe-fokus-auf-dunkel: var(--farbe-auf-tinte);
  --fokus-breite: 3px;
  --fokus-abstand: 3px;

  /* ---------- Schriften ---------- */
  --schrift-display: 'Literata Variable', 'Literata Ersatz', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --schrift-text: 'Schibsted Grotesk Variable', 'Schibsted Ersatz', 'Helvetica Neue', Arial, sans-serif;
  --schrift-hand: 'Mynerve', 'Bradley Hand', 'Segoe Print', cursive;
  --schrift-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gewicht-normal: 400;  --gewicht-manuskript: 420; --gewicht-mittel: 550;
  --gewicht-titel: 560;   --gewicht-zahl: 600;       --gewicht-marke: 650;
  --gewicht-fett: 700;

  /* ---------- Schriftgrößen Web, fließend 360–1440 px ---------- */
  --text-xs: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);     /* 13–14 px  Meta, Tabellenkopf */
  --text-s: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);          /* 15–16 px  Labels, Dachzeilen */
  --text-m: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);     /* 17–19 px  Fließtext */
  --text-l: clamp(1.1875rem, 1.1042rem + 0.3704vw, 1.4375rem);     /* 19–23 px  Lead */
  --text-xl: clamp(1.375rem, 1.2083rem + 0.7407vw, 1.875rem);      /* 22–30 px  H3, Kartentitel */
  --text-2xl: clamp(1.75rem, 1.4167rem + 1.4815vw, 2.75rem);       /* 28–44 px  H2 */
  --text-3xl: clamp(1.875rem, 1.4167rem + 2.037vw, 3.25rem);       /* 30–52 px  H1 Unterseiten */
  --text-4xl: clamp(2.25rem, 1.5833rem + 2.963vw, 4.25rem);        /* 36–68 px  große H2, Statements */
  --text-hand: clamp(1.3125rem, 1.1667rem + 0.6481vw, 1.75rem);    /* 21–28 px  Randnotizen */
  --text-summe: clamp(2.5rem, 2.1667rem + 1.4815vw, 3.5rem);       /* 40–56 px  Ergebnis, Kennzahl groß */
  --text-claim: clamp(2.25rem, 1.4rem + 4vw, 6rem);                /* Rückfall; im Hero clamp(2.25rem, 11cqi, 6.25rem) (komponenten.css) */
  --zeilenhoehe-text: 1.6;  --zeilenhoehe-lead: 1.5;  --zeilenhoehe-h3: 1.2;
  --zeilenhoehe-titel: 1.1; --zeilenhoehe-claim: 1;   --zeilenhoehe-hand: 1.1;
  --laufweite-claim: -0.028em; --laufweite-titel: -0.015em; --laufweite-h3: -0.01em; --laufweite-zahl: -0.02em;

  /* ---------- Abstände ---------- */
  --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 0.75rem;
  --abstand-4: 1rem;    --abstand-5: 1.5rem; --abstand-6: 2rem;
  --abstand-7: 3rem;    --abstand-8: 4.5rem; --abstand-9: 7rem;
  --abstand-abschnitt: clamp(3.5rem, 2.1667rem + 5.9259vw, 7.5rem);
  --polster-blatt: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem);      /* 24–36 px Blätter, Formulare */
  --polster-blatt-gross: clamp(1.5rem, 0.5rem + 4.4444vw, 4.5rem);  /* 24–72 px große Blätter */
  --polster-fuss: clamp(3rem, 2.3333rem + 2.963vw, 5rem);           /* 48–80 px oben im Fuß */
  --polster-held: clamp(1.5rem, 0.8333rem + 2.963vw, 3.5rem);       /* 24–56 px über dem Hero */
  --abstand-raster: clamp(2rem, 1rem + 4.4444vw, 6rem);             /* Lesespalte zu Randspalte */

  /* ---------- Raster und Breiten ---------- */
  --breite-seite: 82rem;                                  /* 1312 px Inhaltsbreite */
  --breite-text: 40rem;                                   /* Lesespalte, rund 70 Zeichen */
  --breite-lead: 46ch;
  --breite-rand: clamp(13rem, 11.3333rem + 7.4074vw, 18rem); /* Randspalte für Notizen: 208–288 px */
  --breite-formular: 40rem;
  --breite-rechner: 60rem;
  --rand: clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);         /* Seitenrand 16–40 px */
  --spalte: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);      /* Spaltenabstand 16–32 px */
  --kopf-hoehe: 4.25rem;

  /* ---------- Bediengrößen ---------- */
  --hoehe-knopf: 3rem;           /* 48 px Knöpfe und Felder */
  --hoehe-knopf-gross: 3.25rem;  /* 52 px Hauptknöpfe mobil */
  --hoehe-ziel: 2.75rem;         /* 44 px Bedienziele */
  --hoehe-ziel-klein: 1.5rem;    /* 24 px Links in Listen (WCAG 2.5.8) */
  --groesse-auswahl: 1.25rem;    /* 20 px native Radios und Kästchen */
  --groesse-kreis: 3.5rem;       /* 56 px Kreis im Ablauf */
  --breite-klammer: 0.75rem;     /* Randklammer */

  /* ---------- Radien, Linien, Schatten ---------- */
  --radius-0: 0;        /* Blätter, Karten, Tabellen, Hinweise: Papier hat Ecken */
  --radius-1: 2px;      /* Knöpfe, Felder, Etiketten */
  --radius-2: 4px;      /* Stempel */
  --radius-rund: 50%;   /* nur Kreise im Ablauf und Radiopunkte */
  --linie-haar: 1px solid var(--farbe-linie);
  --linie-feld: 1.5px solid var(--farbe-linie-stark);
  --linie-stark: 2px solid var(--farbe-tinte);
  --linie-karte: 4px solid var(--farbe-tinte);
  --linie-blatt: 6px solid var(--farbe-tinte);
  --linie-auf-tinte: 1px solid color-mix(in srgb, var(--farbe-auf-tinte) 18%, transparent);
  --stift-breite: 2.5px;
  --schatten-blatt: 0 1px 1px rgb(18 26 43 / 0.06), 0 3px 8px rgb(18 26 43 / 0.05), 0 26px 50px -26px rgb(18 26 43 / 0.34);
  --schatten-karte: 0 1px 1px rgb(18 26 43 / 0.05), 0 14px 30px -20px rgb(18 26 43 / 0.28);
  --schatten-menue: 0 28px 40px -28px rgb(18 26 43 / 0.4);
  --schatten-knopf: 4px 4px 0 var(--farbe-tinte);
  --schatten-knopf-hover: 5px 5px 0 var(--farbe-tinte);
  --schatten-knopf-aktiv: 1px 1px 0 var(--farbe-tinte);
  --schatten-knopf-klein: 3px 3px 0 var(--farbe-tinte);

  /* ---------- Bewegung und Ebenen ---------- */
  --dauer-kurz: 140ms; --dauer-mittel: 280ms; --dauer-strich: 450ms;
  --kurve-aus: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kurve-stift: cubic-bezier(0.55, 0.08, 0.35, 1);
  --ebene-kopf: 40; --ebene-menue: 45; --ebene-sprunglink: 100;

  /* ---------- Druck, A4 (gilt über .dokument in vorlagen/dokument-a4.html) ---------- */
  --druck-text: 10.5pt;  --druck-klein: 9pt;   --druck-meta: 8pt;    --druck-lead: 12.5pt;
  --druck-titel: 34pt;   --druck-h1: 26pt;     --druck-h2: 17pt;     --druck-h3: 12.5pt;
  --druck-dachzeile: 11.5pt;  /* Karmin als Text ab 15 px: 11,5 pt entspricht 15,3 px */
  --druck-zahl: 26pt;    --druck-hand: 16pt;   --druck-zeilenhoehe: 1.5;
  --druck-rand-oben: 24mm; --druck-rand-unten: 22mm; --druck-rand-links: 22mm; --druck-rand-rechts: 20mm;
  --druck-randspalte: 44mm; --druck-spaltenabstand: 8mm;

  /* ---------- Folie 16:9 (px bei 1280 × 720; für 1920 × 1080 alles × 1,5) ---------- */
  --folie-breite: 1280px; --folie-hoehe: 720px;
  --folie-rand-x: 72px;   --folie-rand-oben: 56px; --folie-rand-unten: 32px; --folie-spalte: 24px;
  --folie-titel: 64px;    --folie-h2: 42px;   --folie-h3: 24px;   --folie-lead: 22px;
  --folie-text: 18px;     --folie-text-klein: 15px; --folie-meta: 13px; --folie-dachzeile: 15px;
  --folie-zahl: 96px;     --folie-zahl-klein: 48px; --folie-hand: 30px; --folie-zitat: 44px;

  /* ---------- LinkedIn (px) ---------- */
  --kachel-hoch-breite: 1080px; --kachel-hoch-hoehe: 1350px;
  --kachel-quer-breite: 1200px; --kachel-quer-hoehe: 627px;
  --kachel-rand: 80px;          --kachel-rand-quer: 56px;
  --kachel-titel: 92px;         --kachel-titel-quer: 58px;
  --kachel-text: 32px;          --kachel-text-quer: 24px;
  --kachel-dachzeile: 28px;     --kachel-dachzeile-quer: 22px;
  --kachel-hand: 46px;          --kachel-hand-quer: 34px;
  --kachel-meta: 22px;          --kachel-meta-quer: 17px;

  /* ---------- Weitere Formate (px). Karussell und Quote-Card nutzen das Hochformat oben. ---------- */
  --format-banner-breite: 1584px;   --format-banner-hoehe: 396px;    /* LinkedIn-Profilbanner */
  --format-quadrat-breite: 1080px;  --format-quadrat-hoehe: 1080px;  /* Instagram quadratisch */
  --format-ig-hoch-breite: 1080px;  --format-ig-hoch-hoehe: 1350px;  /* Instagram Hochformat */
  --format-produkt-breite: 740px;   --format-produkt-hoehe: 500px;   /* Produktbild CopeCart und Shops */
  --format-titelbild-breite: 1920px; --format-titelbild-hoehe: 1080px; /* Google-Unternehmensprofil, Titelbild */
  --banner-rand: 56px;  --banner-schutz-links: 33%;  /* Profilfoto-Zone links unten bleibt frei */
  --banner-titel: 54px; --banner-dachzeile: 22px; --banner-hand: 36px; --banner-meta: 18px;
  --produkt-rand: 40px; --produkt-titel: 44px; --produkt-dachzeile: 17px; --produkt-meta: 15px;
}

/* Im Druck ist das Papier das echte Blatt: Seitengrund Weiß, keine graue Fläche. */
@media print {
  :root {
    --farbe-seitengrund: var(--farbe-blatt);
  }
}

/* =============================================================================
   FORMEN DER ROTSTIFT-ZEICHEN (farblose Masken; die Farbe kommt über background-color
   aus einem Token, meist --farbe-karmin). Striche behalten mit vector-effect ihre Breite.
   Frei nach klassischen Korrekturzeichen (Duden, DIN 16511), nicht normgetreu.
   ========================================================================== */
:root {
  /* Stiftlinie: Hervorhebung, aktueller Bereich, Wortmarke, Pfeil-Link */
  --maske-stiftlinie: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 5.4 C 30 3.2, 70 4.6, 98 2.6%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  /* Doppelte Unterstreichung: „Das zählt“, höchstens einmal je Fläche */
  --maske-doppelt: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.4 C 30 2.6, 70 4, 98 2.2 M5 10 C 35 8.4, 66 9.6, 95 8.2%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  /* Randklammer: Randnotiz, Prüfvermerk, Einordnung */
  --maske-randklammer: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M10 2 C 5 2, 4 4, 4 9 L 4.6 91 C 4.6 96, 5.6 98, 10.4 98%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  /* Roter Faden: verbindet Schritte, senkrecht und waagerecht */
  --maske-faden-y: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 1000%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M20 0 C 8 80, 32 160, 20 250 S 8 420, 21 500 S 33 680, 20 750 S 9 920, 20 1000%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --maske-faden-x: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 22 C 80 9, 160 33, 250 20 S 420 8, 500 22 S 680 35, 750 20 S 920 9, 1000 20%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  /* Häkchen: Lob, geprüft, „Das mache ich“; im Status-Einsatz in Erfolgsgrün */
  --maske-haken: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Pfeilstrich: Pfeil-Link, Verweis von der Notiz zur Stelle */
  --maske-pfeil: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 20%27%3E%3Cpath d=%27M2 11 C 12 9.5, 24 10.5, 35 9.6 M 28 4 L 36 9.8 L 28.5 15.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Einfügezeichen: fehlende Angabe */
  --maske-einfuegung: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M2.5 13.5 C 4.5 10, 6.4 6.4, 8 3 C 9.6 6.4, 11.5 10, 13.5 13.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Plus und Minus als Stiftstriche: FAQ */
  --maske-plus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8 M 12.2 4 C 11.6 9, 12.6 15, 11.8 20%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  --maske-minus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  /* Kringel: Beleg oder Zahl prüfen */
  --maske-kringel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M152 8 C 110 0, 36 2, 14 18 C -4 31, 12 54, 74 60 C 136 66, 196 54, 193 33 C 190 15, 158 6, 116 6%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  /* Pfeil der Auswahlliste */
  --maske-auswahl: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 10%27%3E%3Cpath d=%27M2 2.5 L 8 8 L 14 2.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Farbige Bilder der Rotstift-Zeichen (Karmin #C8102E, Haken-Erfolg #1D6B46). Standard für alle
     Zeichen, weil Chrome-PDFs CSS-Masken über rund 200 px Breite in macOS Vorschau als volle Fläche
     zeigen (Test 30.10.2026). Die Masken oben bleiben für den Kontrastmodus (forced-colors). */
  --bild-doppelt: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.4 C 30 2.6, 70 4, 98 2.2 M5 10 C 35 8.4, 66 9.6, 95 8.2%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-randklammer: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M10 2 C 5 2, 4 4, 4 9 L 4.6 91 C 4.6 96, 5.6 98, 10.4 98%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-faden-y: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 1000%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M20 0 C 8 80, 32 160, 20 250 S 8 420, 21 500 S 33 680, 20 750 S 9 920, 20 1000%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-faden-x: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 22 C 80 9, 160 33, 250 20 S 420 8, 500 22 S 680 35, 750 20 S 920 9, 1000 20%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-haken: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  --bild-pfeil: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 20%27%3E%3Cpath d=%27M2 11 C 12 9.5, 24 10.5, 35 9.6 M 28 4 L 36 9.8 L 28.5 15.5%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  --bild-einfuegung: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M2.5 13.5 C 4.5 10, 6.4 6.4, 8 3 C 9.6 6.4, 11.5 10, 13.5 13.5%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  --bild-plus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8 M 12.2 4 C 11.6 9, 12.6 15, 11.8 20%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  --bild-minus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  --bild-kringel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M152 8 C 110 0, 36 2, 14 18 C -4 31, 12 54, 74 60 C 136 66, 196 54, 193 33 C 190 15, 158 6, 116 6%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-haken-erfolg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%231D6B46%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  --bild-haken-tinte: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%23121A2B%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Als Bild mit fester Farbe (deshalb hier): Stiftlinie in Karmin #C8102E, Auswahlpfeil in Tinte #121A2B */
  --bild-stiftlinie: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 5.4 C 30 3.2, 70 4.6, 98 2.6%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --bild-auswahl: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 10%27%3E%3Cpath d=%27M2 2.5 L 8 8 L 14 2.5%27 fill=%27none%27 stroke=%27%23121A2B%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}

/* ==== 02-brand/design-v6/basis.css ==== */
/* =============================================================================
   JG-HAUSDESIGN v6 „Rotstift“ · BASIS
   Grundstile für HTML-Elemente: Typografie, Links, Fokus, Auswahl, Medien, Formulare,
   Hilfsklassen, Bewegungsreduktion. Nur Variablen aus tokens.css, keine Farbwerte.
   Reihenfolge der Dateien: fonts-v6.css → tokens.css → basis.css → komponenten.css
   (→ ki-os-theme-v6.css für KI OS und Dashboards).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungziele liegen unter dem klebenden Kopf (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--farbe-seitengrund);
  color: var(--farbe-tinte);
  font: var(--gewicht-normal) var(--text-m) / var(--zeilenhoehe-text) var(--schrift-text);
  font-kerning: normal;
  font-synthesis-weight: none;
  /* Lange Wörter und Adressen brechen um, statt die Seite zu verbreitern (WCAG 1.4.10) */
  overflow-wrap: break-word;
  hyphenate-limit-chars: 10 4 4;
  /* Ziffern im Fließtext proportional; Zahlen, Tabellen und Preise tabellarisch (.zahl) */
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Überschriften: Literata 560, einfarbig in Tinte ---------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--abstand-3);
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-titel);
  font-optical-sizing: auto;
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
  overflow-wrap: break-word;
  hyphens: auto;
  /* Nur lange Wörter trennen: mindestens 14 Zeichen, 7 davor, 6 danach */
  hyphenate-limit-chars: 14 7 6;
  text-wrap: balance;
}

/* Ab 40 em trennen Überschriften nur an weichen Trennstellen (&shy;) */
@media (min-width: 40em) {
  h1,
  h2,
  h3,
  h4 {
    hyphens: manual;
  }
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--zeilenhoehe-h3);
  letter-spacing: var(--laufweite-h3);
}

h4 {
  font-size: var(--text-l);
  line-height: var(--zeilenhoehe-h3);
  letter-spacing: var(--laufweite-h3);
}

p,
ul,
ol,
dl,
blockquote,
figure,
table {
  margin: 0 0 1em;
}

p,
li {
  text-wrap: pretty;
}

li::marker {
  font-variant-numeric: proportional-nums;
}

strong,
b {
  font-weight: var(--gewicht-fett);
}

/* Kursiv nur, wo der Inhalt es verlangt: Werktitel, Zitierbeispiele. Keine kursiven Akzentwörter. */
em,
i,
cite {
  font-style: italic;
}

small {
  font-size: var(--text-xs);
}

hr {
  margin-block: var(--abstand-7);
  border: 0;
  border-top: var(--linie-haar);
}

code,
kbd,
samp,
pre {
  font-family: var(--schrift-code);
  font-size: 0.9em;
}

/* ---------- Links: Tinte mit Unterstreichung, Karmin erst beim Zeigen ---------- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--farbe-tinte) 45%, transparent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--farbe-karmin);
  text-decoration-thickness: 2px;
}

/* ---------- Fokus: 3 px Tinte mit 3 px Abstand, auf Tinte in Auf-Tinte ---------- */
:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

:focus:not(:focus-visible) {
  outline: none;
}

.auf-tinte :focus-visible,
.fuss :focus-visible {
  outline-color: var(--farbe-fokus-auf-dunkel);
}

::selection {
  background: var(--farbe-auswahl);
  color: var(--farbe-tinte);
}

/* ---------- Medien ---------- */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* ---------- Formularelemente erben die Schrift ---------- */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Knöpfe behalten im Kontrastmodus eine Kontur */
.knopf {
  border: 2px solid transparent;
}

/* Zahlen: Tabellenziffern für Beträge, Tabellen, Kennzahlen und Rechner */
.zahl,
.preis,
.summe {
  font-variant-numeric: tabular-nums;
}

/* ---------- Hilfsklassen ---------- */
[hidden] {
  display: none !important;
}

/* Nur für Screenreader sichtbar. Nie mit der Handschrift kombinieren: sie würde sonst laden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: erscheint beim ersten Tab-Druck */
.skip-link {
  position: absolute;
  left: var(--rand);
  top: var(--abstand-3);
  z-index: var(--ebene-sprunglink);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--farbe-tinte);
  color: var(--farbe-auf-tinte);
  font-weight: var(--gewicht-fett);
  text-decoration: none;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--farbe-fokus-auf-dunkel);
}

/* Handschrift des Rotstifts: nur Karmin, nur kurze Notizen, nie auf Bedienelementen,
   nie in Tabellenzellen, bei Beträgen, in Rechtstexten oder auf Tinte. */
.hand {
  color: var(--farbe-karmin);
  font-family: var(--schrift-hand);
  font-size: var(--text-hand);
  font-weight: var(--gewicht-normal);
  font-style: normal;
  line-height: var(--zeilenhoehe-hand);
  letter-spacing: 0;
}

mark {
  background: none;
  color: inherit;
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Keine Animation, kein weiches Scrollen: Der Grundzustand jedes Elements ist sein Endzustand. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druck: Farben wie am Bildschirm, keine Schatten ---------- */
@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    min-height: 0;
  }

  .skip-link {
    display: none;
  }
}

/* ==== 02-brand/design-v6/komponenten.css ==== */
/* =============================================================================
   JG-HAUSDESIGN v6 „Rotstift“ · KOMPONENTEN
   Tinte ist der Stoff des Gegenübers (Zahlen, Text, Unternehmen). Karmin ist Jörgs Beitrag am
   Rand: Randnotiz, Prüfvermerk, Korrektur, Hauptaktion. Papier ist die Arbeitsfläche.
   Regeln: nur Variablen aus tokens.css; mobile first (40 em, 64 em, 80 em; Kopf 23 und 26 em);
   rotate nur bei Beispielblatt, Stempel und Handschrift; Karmin nie für Fehler, Status oder
   Datenreihen; je Bildschirmhöhe höchstens eine Karminfläche und sechs Rotstift-Zeichen.
   Inhalt:  1 Rahmen · 2 Knöpfe und Links · 3 Kopf · 4 Brotkrumen und Seitenkopf · 5 Hero und
   Beispielblatt · 6 Motive · 7 Karten und Zeilen · 8 Tabellen · 9 Kennzahl-Kacheln ·
   10 Hinweise, Prüfvermerk, kommentierter Auszug · 11 Ablauf · 12 FAQ · 13 Formulare und Rechner ·
   14 Diagramme · 15 Platzhalter · 16 Fuß · 17 Bewegung · 18 Kontrastmodus · 19 Druck
   ========================================================================== */

/* ---------- 1 Rahmen ------------------------------------------------------------ */
.seite {
  width: min(100% - 2 * var(--rand), var(--breite-seite));
  margin-inline: auto;
}

.abschnitt {
  margin-block: var(--abstand-abschnitt);
}

.abschnitt > h2 {
  max-width: 24ch;
  margin-bottom: var(--abstand-5);
}

.lesespalte {
  max-width: var(--breite-text);
}

/* Lesespalte plus Randspalte für Notizen und Prüfvermerke (ab 64 em nebeneinander) */
.mit-rand {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-5) var(--abstand-raster);
}

.mit-rand > .breit {
  grid-column: 1 / -1;
}

@media (min-width: 64em) {
  .mit-rand {
    grid-template-columns: minmax(0, var(--breite-text)) var(--breite-rand);
    align-items: start;
  }

  .mit-rand > .rand-inhalt {
    grid-column: 2;
  }
}

.rand-inhalt > :first-child {
  margin-top: 0;
}

.raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spalte);
}

@media (min-width: 40em) {
  .raster-2,
  .raster-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .raster-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Blatt: alles, was auf dem Papier liegt */
.blatt {
  padding: var(--polster-blatt);
  background: var(--farbe-blatt);
  border-top: var(--linie-blatt);
  box-shadow: var(--schatten-blatt);
}

/* ---------- 2 Knöpfe und Links --------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--hoehe-knopf);
  padding: 0.95em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius-1);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: var(--gewicht-fett);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dauer-kurz) var(--kurve-aus),
    box-shadow var(--dauer-kurz) var(--kurve-aus),
    background-color var(--dauer-kurz) linear;
}

/* Hauptaktion: Karmin, Weiß, Stempel-Versatz. Höchstens einer je Bildschirmhöhe. */
.knopf-primaer {
  background: var(--farbe-karmin);
  color: var(--farbe-auf-karmin);
  box-shadow: var(--schatten-knopf);
}

.knopf-primaer:active {
  transform: translate(3px, 3px);
  box-shadow: var(--schatten-knopf-aktiv);
}

.knopf-sekundaer {
  background: transparent;
  color: var(--farbe-tinte);
  border: 1.5px solid var(--farbe-tinte);
}

.knopf-klein {
  min-height: var(--hoehe-ziel);
  padding: 0.55em 1em;
  font-size: var(--text-s);
}

.knopf-primaer.knopf-klein {
  box-shadow: var(--schatten-knopf-klein);
}

.knopf-gross {
  min-height: var(--hoehe-knopf-gross);
}

/* Auf Tinte (Fuß, Abschlussfolie): Kontur in Auf-Tinte, kein Karmin */
.knopf-auf-tinte {
  background: transparent;
  color: var(--farbe-auf-tinte);
  border: 1.5px solid var(--farbe-auf-tinte);
}

@media (hover: hover) {
  .knopf-primaer:hover {
    background: var(--farbe-karmin-tief);
    color: var(--farbe-auf-karmin);
    transform: translate(-1px, -1px);
    box-shadow: var(--schatten-knopf-hover);
  }

  .knopf-primaer.knopf-klein:hover {
    box-shadow: var(--schatten-knopf);
  }

  .knopf-sekundaer:hover {
    background: var(--farbe-flaeche);
  }
}

.knopf:disabled,
.knopf[aria-disabled='true'] {
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte-3);
  border-color: var(--farbe-linie-mittel);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Reihe aus Hauptaktion und Zweitweg */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-3) var(--abstand-6);
  margin: var(--abstand-5) 0 0;
}

/* Mobil: Hauptknöpfe in Hero, Rechner und Abschluss volle Breite */
@media (max-width: 39.99em) {
  .aktionen > .knopf-primaer,
  .knopf-gross {
    width: 100%;
  }
}

/* Pfeil-Link: Karmin-Stiftlinie unter dem Text, Karmin-Pfeilstrich dahinter. Linktext in
   <span class="pfeil-text">. Mindestens 44 px hohes Ziel. */
.pfeil-link {
  display: inline;
  padding-block: 0.7em;
  color: var(--farbe-tinte);
  font-weight: var(--gewicht-marke);
  line-height: 1.6;
  text-decoration: none;
}

.pfeil-text {
  padding-bottom: 0.3em;
  background: var(--bild-stiftlinie) no-repeat 0 100% / 100% 0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Der Pfeil ist Text (Wortverbinder und Ziffernabstände): er rutscht nie allein in die nächste Zeile */
.pfeil-link::after {
  content: '\2060\2007\2007\2007';
  content: '\2060\2007\2007\2007' / '';
  margin-left: 0.3em;
  padding-right: 0.3em;
  --zeichen-maske: var(--maske-pfeil);
  --zeichen-lage: 0 60% / 1.6em 0.8em;
  background: var(--bild-pfeil) no-repeat 0 60% / 1.6em 0.8em;
  transition: background-position var(--dauer-mittel) var(--kurve-aus);
}

@media (hover: hover) {
  .pfeil-link:hover::after {
    background-position: 0.3em 60%;
  }
}

p:has(> .pfeil-link:only-child),
li:has(> .pfeil-link:only-child) {
  padding-block: var(--abstand-2);
}

/* ---------- 3 Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  background: var(--farbe-seitengrund);
  border-bottom: var(--linie-haar);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  width: min(100% - 2 * var(--rand), var(--breite-seite));
  min-height: var(--kopf-hoehe);
  margin-inline: auto;
  padding-block: var(--abstand-2);
}

/* Wortmarke: Name in Literata 650, Tinte, darunter ein Karmin-Stiftstrich */
.marke {
  display: inline-flex;
  flex-direction: column;
  margin-inline-end: auto;
  padding-block: var(--abstand-1);
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: 1.375rem;
  font-weight: var(--gewicht-marke);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.marke::after {
  content: '';
  height: 0.32em;
  margin-top: 0.06em;
  --zeichen-maske: var(--maske-stiftlinie);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-stiftlinie) no-repeat 0 0 / 100% 100%;
}

.marke-zusatz {
  color: var(--farbe-tinte-3);
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-mittel);
  letter-spacing: 0;
}

/* Wortabstand statt Knopf-Lücke: Der Leerraum am Anfang des Zusatzes fällt im Flex-Element weg */
.kopf-aktion {
  gap: 0.3em;
  white-space: nowrap;
}

/* Je Breite genau ein Kopfknopf sichtbar: mobil vor dem Menüknopf, breit in der Navigation */
.kopf-aktion-breit {
  display: none;
}

.menue-knopf {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-width: var(--hoehe-ziel);
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-3);
  border: 1.5px solid var(--farbe-tinte);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--farbe-tinte);
  font-size: var(--text-s);
  font-weight: var(--gewicht-marke);
  line-height: 1;
  cursor: pointer;
}

.menue-symbol {
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
}

.menue-strich {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.menue-strich-x,
.menue-knopf[aria-expanded='true'] .menue-strich-zu {
  display: none;
}

.menue-knopf[aria-expanded='true'] .menue-strich-x {
  display: inline;
}

/* Navigation: ohne JavaScript eine umbrechende Linkzeile unter der Wortmarke */
.hauptnav {
  flex-basis: 100%;
}

.hauptnav-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnav-liste a {
  position: relative;
  display: inline-block;
  padding-block: var(--abstand-2);
  color: var(--farbe-tinte);
  font-weight: var(--gewicht-mittel);
  text-decoration: none;
}

/* Stiftlinie: wächst beim Zeigen von links, dauerhaft beim aktuellen Bereich */
.hauptnav-liste a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  height: 0.45em;
  --zeichen-maske: var(--maske-stiftlinie);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-stiftlinie) no-repeat 0 0 / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dauer-mittel) var(--kurve-aus);
}

.hauptnav-liste a[aria-current]::after {
  transform: none;
}

@media (hover: hover) {
  .hauptnav-liste a:hover::after {
    transform: none;
  }
}

@media (max-width: 22.99em) {
  .marke {
    font-size: 1.1875rem;
  }
}

/* Schmal (bis 415 px): Kopfknopf zeigt sichtbar nur das erste Wort, der zugängliche Name bleibt
   vollständig; Menüknopf nur als Symbol. So bleibt der Kopf einzeilig. */
@media (max-width: 25.99em) {
  .kopf-innen {
    column-gap: var(--abstand-2);
  }

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

  .menue-knopf {
    padding: 0;
  }

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

/* Unter 64 em mit JavaScript: Menü als Panel in voller Breite unter dem Kopf */
@media (max-width: 63.99em) and (scripting: enabled) {
  .menue-knopf {
    display: inline-flex;
  }

  .hauptnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--ebene-menue);
    display: none;
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
    padding: 0 var(--rand) var(--abstand-5);
    background: var(--farbe-seitengrund);
    border-bottom: var(--linie-haar);
    box-shadow: var(--schatten-menue);
  }

  .menue-knopf[aria-expanded='true'] + .hauptnav {
    display: block;
  }

  .hauptnav-liste {
    flex-direction: column;
    gap: 0;
  }

  .hauptnav-liste a {
    display: flex;
    align-items: center;
    min-height: var(--hoehe-knopf);
    font-size: 1.1875rem;
    border-bottom: var(--linie-haar);
  }

  .hauptnav-liste a::after {
    right: auto;
    bottom: var(--abstand-2);
    width: 6em;
  }
}

@media (min-width: 64em) {
  .kopf-aktion-mobil {
    display: none;
  }

  .hauptnav {
    display: flex;
    flex-basis: auto;
    align-items: center;
    gap: var(--abstand-6);
  }

  .hauptnav-liste {
    gap: 0 calc(var(--abstand-5) + var(--abstand-1));
  }

  .hauptnav-liste a {
    font-size: var(--text-m);
  }

  .kopf-aktion-breit {
    display: inline-flex;
  }
}

/* ---------- 4 Brotkrumen und Seitenkopf -------------------------------------------- */
.brotkrumen {
  padding-top: var(--abstand-3);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brotkrumen li + li::before {
  content: '/';
  content: '/' / '';
  margin-inline: var(--abstand-2);
  color: var(--farbe-linie-mittel);
}

.brotkrumen a {
  display: inline-block;
  min-height: var(--hoehe-ziel-klein);
  padding-block: var(--abstand-1);
  color: inherit;
}

.brotkrumen a[aria-current='page'] {
  color: var(--farbe-tinte);
  text-decoration: none;
}

.seitenkopf {
  padding-block: var(--abstand-6) var(--abstand-7);
}

.seitenkopf h1 {
  max-width: 22ch;
  margin: 0;
}

/* Dachzeile: Schibsted 700 in Karmin, keine Versalien, ab 15 px */
.dachzeile {
  margin: 0 0 var(--abstand-3);
  color: var(--farbe-karmin);
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
  line-height: 1.4;
  letter-spacing: 0;
}

.lead {
  max-width: var(--breite-lead);
  margin: var(--abstand-5) 0 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-l);
  line-height: var(--zeilenhoehe-lead);
}

.meta {
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

/* ---------- 5 Hero und Beispielblatt ------------------------------------------------- */
/* overflow-x: clip kappt den Überstand des Hero-Stempels im Startzustand der Animation
   (scale 1.6, per fill both auch während der Verzögerung gehalten), sonst scrollt die Seite
   bei 320 px waagerecht (WCAG 1.4.10). clip baut keinen Scroll-Container, overflow-y bleibt
   sichtbar: Der Stempel darf unten weiter überstehen. */
.held {
  padding-block: var(--polster-held) var(--abstand-8);
  overflow-x: clip;
}

.held-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-8) var(--spalte);
  width: min(100% - 2 * var(--rand), var(--breite-seite));
  margin-inline: auto;
}

/* Die Textspalte ist ein Container: Der Claim richtet sich nach ihrer Breite */
.held-text {
  min-width: 0;
  container-type: inline-size;
}

@media (min-width: 64em) {
  .held-innen {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .held-text {
    grid-column: 1 / span 7;
  }

  .held-blatt {
    grid-column: 8 / span 5;
    margin-top: var(--abstand-6);
  }
}

.held-titel {
  margin: 0;
  font-size: var(--text-claim);
  font-size: clamp(2.25rem, 11cqi, 6.25rem);
  line-height: var(--zeilenhoehe-claim);
  letter-spacing: var(--laufweite-claim);
}

.claim-zeile {
  display: block;
}

.claim-markiert {
  position: relative;
  display: inline-block;
}

/* Randnotiz zur Claim-Geste: schmal unter der Zeile, breit rechts daneben */
.claim-notiz {
  position: absolute;
  top: calc(100% + 0.32em);
  right: 0;
  z-index: 1;
  font-size: var(--text-hand);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: right top;
}

.claim-notiz .hand {
  font-size: inherit;
}

.claim-zeile:has(.claim-notiz) {
  margin-bottom: 0.8em;
}

@container (min-width: 34rem) {
  .claim-zeile:has(.claim-notiz) {
    margin-bottom: 0;
  }

  .claim-notiz {
    top: 18%;
    right: auto;
    left: calc(100% + 0.18em);
    font-size: clamp(1.3125rem, 0.5rem + 1.6vw, 2.125rem);
    transform-origin: left top;
  }
}

.held-lead {
  margin-top: var(--abstand-6);
}

/* Vertrauenszeile: nur belegte Aussagen. Haken in Tinte, denn die Zeile ist Sachaussage und kein
   Randvermerk; so bleibt das Karmin im Hero für Claim-Geste, Pfeil-Link und Beispielblatt. */
.vertrauen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-3);
  margin: var(--abstand-6) 0 0;
  padding: var(--abstand-5) 0 0;
  border-top: var(--linie-haar);
  font-size: var(--text-s);
  font-weight: var(--gewicht-zahl);
  list-style: none;
}

.vertrauen li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
  gap: var(--abstand-2);
}

.vertrauen li::before {
  content: '';
  width: 1.25em;
  height: 1em;
  margin-top: 0.2em;
  --zeichen-maske: var(--maske-haken);
  --zeichen-lage: center / contain;
  background: var(--bild-haken-tinte) no-repeat center / contain;
}

/* Beispielblatt: das einzige handplatzierte Bild einer Seite. Fiktive Zahlen, als Beispiel
   gestempelt, für Screenreader in der Bildunterschrift beschrieben. */
.held-blatt {
  justify-self: center;
  width: min(100%, 32rem);
  margin: 0;
  padding: var(--abstand-4);
}

@media (min-width: 64em) {
  .held-blatt {
    justify-self: end;
  }
}

.beispielblatt {
  position: relative;
  container-type: inline-size;
  background: var(--farbe-blatt);
  box-shadow: var(--schatten-blatt);
  transform: rotate(1deg);
  transform-origin: 55% 40%;
}

/* Schnittmarken an den Ecken */
.beispielblatt::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--abstand-4));
  pointer-events: none;
  --c: var(--farbe-linie-mittel);
  background:
    linear-gradient(var(--c), var(--c)) 0 16px / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 16px 0 / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 16px / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 16px) 0 / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - 16px) / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 16px 100% / 1px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - 16px) / 10px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 16px) 100% / 1px 10px no-repeat;
}

/* Satz wie ein Arbeitsblatt: Literata-Textschnitt, Zahlen tabellarisch, Größen in Container-Einheiten */
.bb {
  padding: 7cqi 31cqi 9cqi 7cqi;
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: 3.35cqi;
  font-weight: var(--gewicht-manuskript);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

.bb-kopf {
  display: flex;
  justify-content: space-between;
  gap: 2cqi;
  margin: 0 -24cqi 4cqi 0;
  padding-bottom: 1.6cqi;
  border-bottom: var(--linie-haar);
  color: var(--farbe-tinte-3);
  font-family: var(--schrift-text);
  font-size: 2.7cqi;
  line-height: 1.4;
  font-variant-numeric: proportional-nums;
}

.bb-zeile {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 3cqi;
  padding-block: 1.25cqi;
  border-bottom: var(--linie-haar);
  white-space: nowrap;
}

.bb-zeile:first-of-type {
  border-top: var(--linie-stark);
}

.bb-summe {
  margin-top: 1cqi;
  border-top: var(--linie-stark);
  border-bottom: 0;
  font-weight: var(--gewicht-zahl);
}

.bb-wert {
  position: relative;
  display: inline-block;
}

.bb-gestrichen > span:not(.bb-notiz) {
  color: var(--farbe-tinte-3);
  text-decoration: line-through var(--farbe-karmin) 2px;
  text-decoration-skip-ink: none;
}

.bb-fuss {
  margin: 3cqi 0 0;
  color: var(--farbe-tinte-3);
  font-family: var(--schrift-text);
  font-size: 2.7cqi;
  font-variant-numeric: proportional-nums;
}

/* Randnotizen des Beispielblatts: in der Randspalte neben ihrer Zeile */
.bb-notiz {
  position: absolute;
  left: calc(100% + 4.5cqi);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.2em;
  width: max-content;
  max-width: 27cqi;
  font-size: 4.4cqi;
  line-height: 1.02;
  white-space: nowrap;
  transform: translateY(-55%) rotate(-3deg);
  transform-origin: left center;
}

.bb-notiz .stift {
  position: relative;
  flex: none;
  width: 1.1em;
  height: 0.9em;
}

/* Rotstift-Zeichen als SVG (nur im Hero): runde Enden, zeichnen sich per stroke-dashoffset */
.stift {
  position: absolute;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.stift path {
  fill: none;
  stroke: var(--farbe-karmin);
  stroke-width: var(--sw, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

.stift-doppelt {
  left: -0.03em;
  bottom: -0.22em;
  width: calc(100% + 0.08em);
  height: 0.27em;
  --sw: 5;
}

/* Größer als der Betrag und etwas tiefer gesetzt (die Glyphen sitzen unten in der Zeile):
   mindestens 0,15 em Abstand, am 30.10.2026 bei 320 bis 1440 px und auf der Folie gemessen */
.stift-kringel {
  left: -0.8em;
  top: -0.44em;
  width: calc(100% + 1.65em);
  height: calc(100% + 1.12em);
  --sw: 2.6;
}

.stift-haken {
  --sw: 4;
}

.held-bildunterschrift {
  max-width: 38ch;
  margin-top: var(--abstand-6);
  padding-left: var(--abstand-3);
  border-left: 2px solid var(--farbe-karmin);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.stempel-held {
  position: absolute;
  right: 5cqi;
  bottom: -3.5cqi;
  font-size: max(15px, 4.4cqi);
}

/* ---------- 6 Motive: Unterstreichung, Randnotiz, Kringel, Häkchen, Streichung, Stempel ---- */
/* Unterstreichung (eine Stiftlinie): Hervorhebung im Text, je Zeile neu gezeichnet */
.unterstrichen {
  padding-bottom: 0.15em;
  background: var(--bild-stiftlinie) no-repeat 0 100% / 100% 0.42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Doppelte Unterstreichung: „Das zählt“, höchstens einmal je Fläche, für kurze Wendungen */
.doppelt {
  position: relative;
  display: inline-block;
  margin-bottom: -0.3em;
  padding-bottom: 0.3em;
}

/* Masken-Zeichen bleiben innerhalb ihres Elements: Chrome-PDFs zeigen überstehende Masken in
   manchen Betrachtern (macOS Vorschau) sonst als volle Fläche. */
.doppelt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.3em;
  --zeichen-maske: var(--maske-doppelt);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-doppelt) no-repeat 0 0 / 100% 100%;
}

/* Randnotiz: Handschrift mit Karmin-Randklammer, höchstens fünf Wörter */
.randnotiz {
  position: relative;
  max-width: 17ch;
  margin: 0;
  padding: var(--abstand-1) 0 var(--abstand-1) calc(var(--breite-klammer) + var(--abstand-2));
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.randnotiz::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

/* Randnotiz in Schrift (ohne Handschrift): längere Hinweise in der Randspalte */
.randhinweis {
  position: relative;
  margin: 0;
  padding: var(--abstand-1) 0 var(--abstand-1) calc(var(--breite-klammer) + var(--abstand-3));
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  line-height: 1.5;
}

.randhinweis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

/* Kringel: Beleg oder Zahl prüfen; mindestens 0,15 em Abstand, schneidet nie Glyphen an */
.kringel {
  padding: 0.12em 0.42em;
  border: 2px solid var(--farbe-karmin);
  border-radius: 45% / 55%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Wellenlinie: Stil oder Ausdruck prüfen */
.welle {
  text-decoration: underline wavy var(--farbe-karmin) 1.5px;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: none;
}

/* Häkchen: Lob, „Das mache ich“, geprüft (nie als Siegel) */
.haken::before {
  content: '';
  display: inline-block;
  width: 1.15em;
  height: 0.92em;
  margin-right: 0.35em;
  vertical-align: -0.08em;
  --zeichen-maske: var(--maske-haken);
  --zeichen-lage: center / contain;
  background: var(--bild-haken) no-repeat center / contain;
}

/* Streichung: „mache ich nicht“ oder korrigierte Annahme; Ersatz in Handschrift */
.gestrichen,
del {
  text-decoration: line-through var(--farbe-karmin) 2px;
  text-decoration-skip-ink: none;
}

del {
  color: var(--farbe-tinte-3);
}

ins.hand,
.ersatz {
  margin-left: 0.15em;
  color: var(--farbe-karmin);
  font-family: var(--schrift-hand);
  font-size: max(1.15em, 1.3125rem);
  line-height: 1;
  text-decoration: none;
}

/* Einfügezeichen: fehlende Angabe */
.einfuegung::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-inline: 0.05em 0.15em;
  vertical-align: -0.1em;
  --zeichen-maske: var(--maske-einfuegung);
  --zeichen-lage: center / contain;
  background: var(--bild-einfuegung) no-repeat center / contain;
}

/* Listen: „Das mache ich“ mit Haken, „Das mache ich nicht“ gestrichen */
.liste-ja,
.liste-nie {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-ja li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  gap: var(--abstand-3);
  padding-block: var(--abstand-3);
  border-bottom: var(--linie-haar);
}

.liste-ja li::before {
  content: '';
  width: 1.2em;
  height: 0.95em;
  margin-top: 0.25em;
  --zeichen-maske: var(--maske-haken);
  --zeichen-lage: center / contain;
  background: var(--bild-haken) no-repeat center / contain;
}

.liste-nie li {
  padding-block: var(--abstand-3);
  border-bottom: var(--linie-haar);
}

.liste-nie li > :first-child {
  font-family: var(--schrift-display);
  font-size: var(--text-l);
  font-weight: var(--gewicht-titel);
  line-height: 1.3;
  text-decoration: line-through var(--farbe-karmin) 2px;
  text-decoration-skip-ink: none;
}

.liste-nie .grund {
  display: block;
  margin-top: var(--abstand-1);
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
}

/* Stempel: Kennzeichnung fiktiver Daten. Nur „BEISPIEL“; keinen Stempel „ENTWURF“ (Entscheid
   Jörg 30.10.2026). Die einzigen Versalien des Systems. Nie „geprüft“, „zertifiziert“, „garantiert“.
   Mindestmaße: Stempelwort in Karmin ab 15 px (Regel „Karmin als Text ab 15 px“), Unterzeile
   in Tinte-2 ab 13 px, damit die Kennzeichnung „fiktive Daten“ lesbar bleibt. */
.stempel {
  display: inline-block;
  margin: 0;
  font-size: max(15px, 1em);
  padding: 0.3em 0.55em 0.35em;
  border: 0.16em double var(--farbe-karmin);
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--farbe-blatt) 70%, transparent);
  color: var(--farbe-karmin);
  font-family: var(--schrift-text);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-10deg);
}

.stempel span {
  display: block;
  margin-top: 0.2em;
  color: var(--farbe-tinte-2);
  font-size: max(13px, 0.5em);
  font-weight: var(--gewicht-fett);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ---------- 7 Karten und Zeilen ------------------------------------------------------- */
/* Keine Kartenreihen als Füllung: Karten nur für gleichrangige, verlinkte Inhalte. */
.karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spalte);
  margin: var(--abstand-5) 0 var(--abstand-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-5);
  background: var(--farbe-blatt);
  border-top: var(--linie-karte);
  box-shadow: var(--schatten-karte);
}

.karte-dachzeile {
  margin: 0;
  color: var(--farbe-karmin);
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
}

.karte-titel {
  margin: 0;
  font-size: var(--text-xl);
  hyphens: auto;
}

.karte-titel a {
  color: var(--farbe-tinte);
  text-decoration: none;
}

/* Ganze Karte klickbar, ohne verschachtelte Links; der Fokusrahmen liegt um die Karte */
.karte-titel a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.karte-titel a:focus-visible {
  outline: none;
}

.karte:has(.karte-titel a:focus-visible) {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

@media (hover: hover) {
  .karte:hover .karte-titel a {
    text-decoration: underline var(--farbe-karmin) 2px;
    text-underline-offset: 0.18em;
  }
}

.karte-text {
  flex: 1;
  margin: 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
}

.karte-meta {
  margin: var(--abstand-2) 0 0;
  padding-top: var(--abstand-3);
  border-top: var(--linie-haar);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

/* Hervorgehobene Karte: Blatt über die volle Breite mit Karmin-Randklammer */
.karte-leit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  padding: var(--polster-blatt) var(--polster-blatt) var(--polster-blatt) calc(var(--polster-blatt) + var(--breite-klammer) + var(--abstand-3));
  background: var(--farbe-blatt);
  box-shadow: var(--schatten-blatt);
}

.karte-leit::before {
  content: '';
  position: absolute;
  left: var(--abstand-5);
  top: var(--polster-blatt);
  bottom: var(--polster-blatt);
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

/* Zeilen statt Kästen: Leistungen, Angebote, Bücher. Oberkante 2 px Tinte, Haarlinien. */
.zeilen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--abstand-5) 0 var(--abstand-6);
  padding: 0;
  list-style: none;
  border-top: var(--linie-stark);
}

@media (min-width: 40em) {
  .zeilen-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--abstand-7);
  }
}

.zeile {
  padding-block: var(--abstand-5) var(--abstand-6);
  border-bottom: var(--linie-haar);
}

.zeile-titel {
  margin: 0;
  font-size: var(--text-xl);
}

.zeile-titel a {
  color: var(--farbe-tinte);
  text-decoration: none;
}

@media (hover: hover) {
  .zeile-titel a:hover {
    text-decoration: underline var(--farbe-karmin) 2px;
    text-underline-offset: 0.18em;
  }
}

.zeile-text {
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  line-height: 1.55;
}

.zeile-preis {
  margin: var(--abstand-3) 0 0;
  color: var(--farbe-tinte-3);
  font-size: var(--text-s);
}

.zeile-preis .preis {
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: var(--text-l);
  font-weight: var(--gewicht-zahl);
}

/* ---------- 8 Tabellen ------------------------------------------------------------- */
.tabelle {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.tabelle caption {
  padding-bottom: var(--abstand-3);
  caption-side: top;
  font-weight: var(--gewicht-fett);
  text-align: left;
}

.tabelle th,
.tabelle td {
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: var(--linie-haar);
}

.tabelle :is(th, td):last-child {
  padding-right: 0;
}

.tabelle thead th {
  padding-top: 0;
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-marke);
  border-bottom: var(--linie-stark);
}

.tabelle tbody th {
  font-weight: var(--gewicht-zahl);
}

/* Zahlen rechtsbündig, Tabellenziffern, kein Umbruch; negative Werte mit echtem Minus (−), nie rot.
   Beträge in Tabellen in Literata: deren Tabellenziffern lassen Punkt und Komma schmal. */
.tabelle .zahl,
.zahl {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tabelle td.zahl {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-manuskript);
}

.tabelle tfoot :is(th, td) {
  border-top: var(--linie-stark);
  border-bottom: 0;
  font-weight: var(--gewicht-zahl);
}

.tabelle .betrag {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-zahl);
}

/* Markierte Zelle: Karmin-Kringel um den entscheidenden Wert (Anmerkung, kein Status) */
.tabelle .kringel {
  padding-block: 0.04em;
}

/* Rahmen für breite Tabellen: scrollt nur, wenn nötig; Schatten zeigen Überlauf an */
.tabelle-rahmen {
  position: relative;
  margin-block: var(--abstand-5);
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--farbe-seitengrund) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--farbe-seitengrund) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--farbe-tinte) 22%, transparent), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--farbe-tinte) 22%, transparent), transparent) right / 0.75rem 100% no-repeat scroll;
}

.tabelle-fussnote {
  max-width: var(--breite-text);
  margin-top: var(--abstand-2);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

.etikett {
  display: inline-block;
  padding: 0 var(--abstand-1);
  border: 1px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-1);
  color: var(--farbe-tinte-2);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-fett);
}

/* ---------- 9 Kennzahl-Kacheln ------------------------------------------------------- */
/* Jede Zahl mit Quelle oder Messweg. Beispieldaten klein und ausdrücklich beschriftet. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--spalte);
  margin: var(--abstand-5) 0;
  padding: 0;
  list-style: none;
}

.kennzahl {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  min-width: 0;
  padding: var(--abstand-4) 0 0;
  border-top: var(--linie-stark);
}

.kennzahl-label {
  margin: 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  font-weight: var(--gewicht-marke);
  line-height: 1.35;
}

.kennzahl-wert {
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: var(--text-summe);
  font-weight: var(--gewicht-zahl);
  line-height: 1.05;
  letter-spacing: var(--laufweite-zahl);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.kennzahl-einheit {
  font-size: 0.5em;
  font-weight: var(--gewicht-titel);
  letter-spacing: 0;
}

.kennzahl-text {
  margin: var(--abstand-1) 0 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
}

.kennzahl-quelle {
  margin: auto 0 0;
  padding-top: var(--abstand-3);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

/* Der eine entscheidende Wert: Karmin-Kringel (dekorativ), Aussage steht im Text.
   Der Kringel liegt innerhalb der Spalte (kein Überstand, der am Bildschirmrand abgeschnitten
   würde) und ist deutlich größer als die Zahl: Eine Ellipse schneidet sonst die Ecken des
   Textblocks („2“ und „€“). Am 30.10.2026 pixelgenau gemessen: bis 9 Zeichen mindestens
   0,15 em Abstand zu den Glyphen bei 320 bis 1440 px, im A4-Druck und auf Folien. */
.kennzahlen:has(.kennzahl-markiert) .kennzahl-wert {
  margin-top: calc(var(--abstand-2) + 0.5em);
}

.kennzahl-markiert .kennzahl-wert {
  position: relative;
  align-self: flex-start;
  margin: calc(var(--abstand-2) + 0.5em) 0 0.44em;
  padding: 0.06em 0.9em;
}

.kennzahl-markiert .kennzahl-wert::after {
  content: '';
  position: absolute;
  inset: -0.54em 0;
  --zeichen-maske: var(--maske-kringel);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-kringel) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* Kachel als Blatt (z. B. Dashboard, Folie) */
.kennzahl-kachel {
  padding: var(--abstand-4) var(--abstand-5) var(--abstand-5);
  background: var(--farbe-blatt);
  box-shadow: var(--schatten-karte);
}

/* ---------- 10 Hinweise, Prüfvermerk, kommentierter Auszug ------------------------------ */
.hinweis {
  position: relative;
  max-width: var(--breite-text);
  margin-block: var(--abstand-5);
  padding: var(--abstand-4) var(--abstand-5);
  border-left: 4px solid var(--farbe-info);
  background: var(--farbe-info-flaeche);
  color: var(--farbe-tinte);
}

.hinweis-titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-2);
  font-weight: var(--gewicht-fett);
}

.hinweis > :last-child,
.hinweis-inhalt > :last-child {
  margin-bottom: 0;
}

/* Symbole aus dem CSS, für Screenreader stumm; der Titel trägt die Bedeutung */
:is(.hinweis-info, .hinweis-achtung, .hinweis-fehler) .hinweis-titel::before {
  content: 'i';
  content: 'i' / '';
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid var(--farbe-info);
  border-radius: var(--radius-rund);
  color: var(--farbe-info);
  font-family: var(--schrift-display);
  font-size: 0.85em;
  font-weight: var(--gewicht-fett);
  line-height: 1;
}

.hinweis-achtung {
  border-left-color: var(--farbe-achtung);
  background: var(--farbe-achtung-flaeche);
}

.hinweis-achtung .hinweis-titel::before {
  content: '!';
  content: '!' / '';
  border-color: var(--farbe-achtung);
  color: var(--farbe-achtung);
}

.hinweis-fehler {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
}

.hinweis-fehler .hinweis-titel::before {
  content: '!';
  content: '!' / '';
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler);
  color: var(--farbe-blatt);
}

.hinweis-erfolg {
  border-left-color: var(--farbe-erfolg);
  background: var(--farbe-erfolg-flaeche);
}

.hinweis-erfolg .hinweis-titel::before {
  content: '';
  flex: none;
  width: 1.25em;
  height: 1em;
  --zeichen-maske: var(--maske-haken);
  --zeichen-lage: center / contain;
  background: var(--bild-haken-erfolg) no-repeat center / contain;
}

/* Einordnung oder Grenze: Blatt mit Karmin-Randklammer (Jörgs Beitrag) */
.hinweis-randklammer {
  padding: var(--abstand-5) var(--abstand-5) var(--abstand-5) calc(var(--abstand-5) + var(--breite-klammer) + var(--abstand-2));
  border-left: 0;
  background: var(--farbe-blatt);
}

.hinweis-randklammer::before {
  content: '';
  position: absolute;
  left: var(--abstand-4);
  top: var(--abstand-5);
  bottom: var(--abstand-5);
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

.hinweis-randklammer .hinweis-titel {
  margin-bottom: var(--abstand-3);
  font-family: var(--schrift-display);
  font-size: var(--text-xl);
  font-weight: var(--gewicht-titel);
  line-height: 1.2;
}

/* Prüfvermerk: was gegen welche Quelle wann geprüft wurde. Nur mit echter Prüfung, nie als Siegel. */
.pruefvermerk {
  position: relative;
  max-width: var(--breite-text);
  margin-block: var(--abstand-5);
  padding: var(--abstand-4) var(--abstand-5) var(--abstand-4) calc(var(--abstand-5) + var(--breite-klammer) + var(--abstand-2));
  background: var(--farbe-blatt);
  border-top: var(--linie-haar);
  border-bottom: var(--linie-haar);
}

.pruefvermerk::before {
  content: '';
  position: absolute;
  left: var(--abstand-4);
  top: var(--abstand-4);
  bottom: var(--abstand-4);
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

.pruefvermerk-titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-2);
  font-family: var(--schrift-display);
  font-size: var(--text-l);
  font-weight: var(--gewicht-titel);
  line-height: 1.2;
}

.pruefvermerk-titel::before {
  content: '';
  flex: none;
  width: 1.15em;
  height: 0.92em;
  --zeichen-maske: var(--maske-haken);
  --zeichen-lage: center / contain;
  background: var(--bild-haken) no-repeat center / contain;
}

.pruefvermerk-liste {
  margin: 0;
  font-size: var(--text-s);
}

.pruefvermerk-liste > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 28%) minmax(0, 1fr);
  gap: 0 var(--abstand-3);
  padding-block: var(--abstand-2);
  border-top: var(--linie-haar);
}

.pruefvermerk-liste dt {
  color: var(--farbe-tinte-3);
  font-weight: var(--gewicht-marke);
}

.pruefvermerk-liste dd {
  margin: 0;
}

/* Angaben: Schlüssel und Wert (Titelblatt, Bedingungen, Eckdaten) */
.angaben {
  margin: 0 0 var(--abstand-5);
  font-size: var(--text-s);
}

.angaben > div {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr);
  gap: 0 var(--abstand-3);
  padding-block: var(--abstand-2);
  border-top: var(--linie-haar);
}

.angaben > div:last-child {
  border-bottom: var(--linie-haar);
}

.angaben dt {
  color: var(--farbe-tinte-3);
  font-weight: var(--gewicht-marke);
}

.angaben dd {
  margin: 0;
}

/* Unterschriftsfelder: Linie in Tinte, Beschriftung darunter. Nie eine Handschrift als Unterschrift. */
.unterschrift {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-6) var(--abstand-7);
  margin-top: var(--abstand-8);
}

@media (min-width: 40em) {
  .unterschrift {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.unterschrift-feld {
  margin: 0;
  padding-top: var(--abstand-2);
  border-top: 1.5px solid var(--farbe-tinte);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

/* Kommentierter Auszug: Zahlen oder Text des Gegenübers in Tinte, Jörgs Notizen am Rand */
.kommentiert {
  max-width: 52rem;
  margin: var(--abstand-6) 0;
}

.kommentiert-blatt {
  padding: var(--polster-blatt);
  background: var(--farbe-blatt);
  border-top: var(--linie-karte);
  box-shadow: var(--schatten-karte);
}

.kommentiert-absatz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-2) var(--abstand-6);
}

.kommentiert-absatz + .kommentiert-absatz {
  margin-top: var(--abstand-5);
}

@media (min-width: 40em) {
  .kommentiert-absatz {
    grid-template-columns: minmax(0, 1fr) var(--breite-rand);
    align-items: start;
  }
}

.kommentiert-text {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--text-l);
  font-weight: var(--gewicht-manuskript);
  line-height: 1.9;
}

.notiz-bezug {
  margin-left: 0.1em;
  color: var(--farbe-karmin);
  font-family: var(--schrift-text);
  font-size: max(0.75em, 0.9375rem);
  font-weight: var(--gewicht-fett);
  line-height: 0;
}

.kommentiert-notizen {
  margin: 0;
  padding-left: 1.6em;
  font-size: var(--text-s);
}

.kommentiert-notizen li {
  margin-bottom: var(--abstand-2);
}

.kommentiert-notizen li::marker {
  color: var(--farbe-karmin);
  font-weight: var(--gewicht-fett);
}

@media (min-width: 40em) {
  .kommentiert-notizen {
    position: relative;
    padding: var(--abstand-1) 0 var(--abstand-1) calc(var(--breite-klammer) + var(--abstand-5));
    list-style-position: inside;
  }

  .kommentiert-notizen::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--breite-klammer);
    --zeichen-maske: var(--maske-randklammer);
    --zeichen-lage: 0 0 / 100% 100%;
    background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
  }
}

figure > figcaption,
.bildunterschrift {
  max-width: 52ch;
  margin-top: var(--abstand-3);
  padding-left: var(--abstand-3);
  border-left: 2px solid var(--farbe-karmin);
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
  line-height: 1.45;
}

/* ---------- 11 Ablauf mit rotem Faden ----------------------------------------------- */
.ablauf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--abstand-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: ablauf;
}

.ablauf-schritt {
  position: relative;
  min-height: var(--groesse-kreis);
  padding-left: calc(var(--groesse-kreis) + var(--abstand-5));
  padding-bottom: var(--abstand-6);
  counter-increment: ablauf;
}

.ablauf-schritt:last-child {
  padding-bottom: 0;
}

/* Der rote Faden verbindet die Kreise von Mitte zu Mitte, er schreibt nichts. Jedes Stück liegt
   im eigenen Schritt (erster: ab Kreismitte, letzter: bis Kreismitte). */
.ablauf-schritt::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc(var(--groesse-kreis) / 2 - 0.625rem);
  top: 0;
  bottom: 0;
  width: 1.25rem;
  --zeichen-maske: var(--maske-faden-y);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-faden-y) no-repeat 0 0 / 100% 100%;
}

.ablauf-schritt:first-child::after {
  top: calc(var(--groesse-kreis) / 2);
}

.ablauf-schritt:last-child::after {
  bottom: auto;
  height: calc(var(--groesse-kreis) / 2);
}

.ablauf-schritt:only-child::after {
  display: none;
}

.ablauf-schritt::before {
  content: counter(ablauf);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--groesse-kreis);
  height: var(--groesse-kreis);
  border: 1.5px solid var(--farbe-tinte);
  border-radius: var(--radius-rund);
  background: var(--farbe-blatt);
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: var(--text-l);
  font-weight: var(--gewicht-zahl);
  font-variant-numeric: lining-nums;
}

.ablauf-titel {
  margin: var(--abstand-3) 0 var(--abstand-2);
  font-size: var(--text-xl);
  text-wrap: wrap;
}

.ablauf-text {
  margin: 0;
  color: var(--farbe-tinte-2);
}

/* Quer ab 64 em (und in Folien über .ablauf-quer-fest): Spaltenabstand als Polster rechts,
   damit jedes Fadenstück im eigenen Schritt liegt */
@media (min-width: 64em) {
  .ablauf-quer {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .ablauf-quer .ablauf-schritt {
    padding: calc(var(--groesse-kreis) + var(--abstand-2)) var(--spalte) 0 0;
  }

  .ablauf-quer .ablauf-schritt:last-child {
    padding-right: 0;
  }

  .ablauf-quer .ablauf-schritt::after {
    left: 0;
    right: 0;
    top: calc(var(--groesse-kreis) / 2 - 0.625rem);
    bottom: auto;
    width: auto;
    height: 1.25rem;
    --zeichen-maske: var(--maske-faden-x);
    background-image: var(--bild-faden-x);
  }

  .ablauf-quer .ablauf-schritt:first-child::after {
    left: calc(var(--groesse-kreis) / 2);
  }

  .ablauf-quer .ablauf-schritt:last-child::after {
    right: auto;
    width: calc(var(--groesse-kreis) / 2);
    height: 1.25rem;
  }
}

/* ---------- 12 FAQ ------------------------------------------------------------------- */
.faq-liste {
  max-width: 48rem;
  border-top: var(--linie-stark);
}

.faq-eintrag {
  border-bottom: var(--linie-haar);
}

.faq-eintrag summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-5);
  padding-block: calc(var(--abstand-4) + var(--abstand-1));
  font-family: var(--schrift-display);
  font-size: var(--text-xl);
  font-weight: var(--gewicht-titel);
  line-height: 1.25;
  letter-spacing: var(--laufweite-h3);
  list-style: none;
  cursor: pointer;
}

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

.faq-frage {
  min-width: 0;
  hyphens: auto;
  hyphenate-limit-chars: 14 7 6;
}

/* Plus und Minus als Karmin-Stiftstriche */
.faq-eintrag summary::after {
  content: '';
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1em;
  --zeichen-maske: var(--maske-plus);
  --zeichen-lage: center / contain;
  background: var(--bild-plus) no-repeat center / contain;
}

.faq-eintrag[open] > summary::after {
  --zeichen-maske: var(--maske-minus);
  background-image: var(--bild-minus);
}

@media (hover: hover) {
  .faq-eintrag summary:hover .faq-frage {
    text-decoration: underline var(--farbe-karmin) 2px;
    text-underline-offset: 0.18em;
  }
}

.faq-antwort {
  max-width: 62ch;
  padding-bottom: var(--abstand-5);
  color: var(--farbe-tinte-2);
}

.faq-antwort > :last-child {
  margin-bottom: 0;
}

/* ---------- 13 Formulare und Rechner ----------------------------------------------- */
.formular {
  max-width: var(--breite-formular);
  padding: var(--polster-blatt);
  background: var(--farbe-blatt);
  border-top: var(--linie-blatt);
  box-shadow: var(--schatten-blatt);
}

.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-2);
  min-width: 0;
  margin-bottom: var(--abstand-5);
}

.feld label {
  color: var(--farbe-tinte);
  font-size: var(--text-s);
  font-weight: var(--gewicht-marke);
  line-height: 1.4;
}

.optional {
  color: var(--farbe-tinte-3);
  font-weight: var(--gewicht-normal);
}

input:not([type='checkbox'], [type='radio'], [type='hidden'], [type='range'], [type='color']),
select,
textarea {
  width: 100%;
  min-height: var(--hoehe-knopf);
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--linie-feld);
  border-radius: var(--radius-1);
  background-color: var(--farbe-blatt);
  color: var(--farbe-tinte);
  font-size: max(1rem, var(--text-m));
  line-height: 1.3;
}

input:not([type='checkbox'], [type='radio'], [type='hidden'], [type='range'], [type='color']):hover,
select:hover,
textarea:hover {
  border-color: var(--farbe-tinte);
}

input:not([type='checkbox'], [type='radio'], [type='hidden'], [type='range'], [type='color']):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--farbe-tinte);
  outline-offset: 2px;
}

select {
  padding-right: calc(var(--abstand-6) + var(--abstand-3));
  background-image: var(--bild-auswahl);
  background-repeat: no-repeat;
  background-position: right var(--abstand-4) center;
  background-size: 1rem 0.625rem;
  text-overflow: ellipsis;
  appearance: none;
}

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

input[type='checkbox'],
input[type='radio'] {
  flex: none;
  width: var(--groesse-auswahl);
  height: var(--groesse-auswahl);
  margin: 0;
  accent-color: var(--farbe-tinte);
}

/* Fehler: Fehlerrot, Symbol und Wort, nie Karmin */
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border: 2px solid var(--farbe-fehler);
}

.feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-2);
  margin: 0;
  color: var(--farbe-tinte);
  font-size: var(--text-s);
  font-weight: var(--gewicht-zahl);
}

.feld-fehler::before {
  content: '!';
  content: '!' / '';
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.1em;
  border-radius: var(--radius-rund);
  background: var(--farbe-fehler);
  color: var(--farbe-blatt);
  font-size: 0.85em;
  font-weight: var(--gewicht-fett);
  line-height: 1;
}

.feld-hilfe {
  margin: 0;
  color: var(--farbe-tinte-3);
  font-size: var(--text-s);
}

.feld-auswahl {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  min-height: var(--hoehe-ziel);
  padding-block: var(--abstand-2);
}

.feld-auswahl input {
  margin-top: 0.15em;
}

.feld-auswahl label {
  font-weight: var(--gewicht-normal);
  cursor: pointer;
}

.feld-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--abstand-4);
  align-items: end;
}

@media (min-width: 40em) {
  .feld-reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

fieldset {
  min-width: 0;
  margin: 0 0 var(--abstand-6);
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--abstand-4);
  padding: 0;
  font-family: var(--schrift-display);
  font-size: var(--text-xl);
  font-weight: var(--gewicht-titel);
  line-height: 1.2;
  letter-spacing: var(--laufweite-h3);
}

/* Bestätigung im Kasten mit Karmin-Randklammer */
.feld-bestaetigung {
  position: relative;
  margin-block: var(--abstand-5);
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) calc(var(--abstand-4) + var(--breite-klammer) + var(--abstand-2));
  background: var(--farbe-papier);
}

.feld-bestaetigung::before {
  content: '';
  position: absolute;
  left: var(--abstand-3);
  top: var(--abstand-3);
  bottom: var(--abstand-3);
  width: var(--breite-klammer);
  --zeichen-maske: var(--maske-randklammer);
  --zeichen-lage: 0 0 / 100% 100%;
  background: var(--bild-randklammer) no-repeat 0 0 / 100% 100%;
}

.fehler-uebersicht {
  margin-bottom: var(--abstand-5);
  padding: var(--abstand-4) var(--abstand-5);
  border-left: 4px solid var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
}

.fehler-uebersicht ul {
  margin: 0;
  padding-left: 1.2em;
}

.fehler-titel {
  margin: 0 0 var(--abstand-2);
  font-weight: var(--gewicht-fett);
}

/* Statusmeldung: eine Live-Region, Text immer in Tinte */
.formular-status {
  margin: var(--abstand-4) 0 0;
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 4px solid var(--farbe-info);
  background: var(--farbe-info-flaeche);
  font-weight: var(--gewicht-zahl);
}

.formular-status:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.formular-status[data-zustand='ok'] {
  border-left-color: var(--farbe-erfolg);
  background: var(--farbe-erfolg-flaeche);
}

.formular-status[data-zustand='fehler'] {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
}

/* Rechner: Eingaben links, Ergebnis rechts (ab 64 em). Ergebnis ohne dunkle Fläche. */
.rechner {
  max-width: var(--breite-rechner);
  padding: var(--polster-blatt);
  background: var(--farbe-blatt);
  border-top: var(--linie-blatt);
  box-shadow: var(--schatten-blatt);
}

.rechner > h2,
.rechner > h3 {
  margin: 0 0 var(--abstand-5);
}

.rechner-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-6);
}

@media (min-width: 64em) {
  .rechner-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.rechner-ergebnis {
  padding-top: var(--abstand-4);
  border-top: var(--linie-stark);
}

.summe-label {
  margin: 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  font-weight: var(--gewicht-marke);
}

.summe {
  display: block;
  margin: var(--abstand-1) 0 var(--abstand-2);
  color: var(--farbe-tinte);
  font-family: var(--schrift-display);
  font-size: var(--text-summe);
  font-weight: var(--gewicht-zahl);
  line-height: 1.05;
  letter-spacing: var(--laufweite-zahl);
  font-variant-numeric: lining-nums tabular-nums;
}

.summe-zusatz {
  margin: 0;
  color: var(--farbe-tinte-3);
  font-size: var(--text-xs);
}

/* ---------- 14 Diagramme ------------------------------------------------------------ */
/* Reihen in Tinte, Schiefer, Ocker, Grau; Karmin nur als Anmerkung (Kringel, Notiz, Pfeil).
   Direkte Beschriftung statt Legende, wo möglich; Quelle immer in der Bildunterschrift. */
.diagramm {
  max-width: 52rem;
  margin: var(--abstand-6) 0;
}

.diagramm svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--schrift-text);
}

.d-raster {
  stroke: var(--farbe-diagramm-raster);
  stroke-width: 1;
  fill: none;
}

.d-achse {
  stroke: var(--farbe-diagramm-achse);
  stroke-width: 1;
  fill: none;
}

/* Schriftgrößen stehen als Attribut am SVG-Text, damit sie mit der viewBox skalieren */
.d-text {
  fill: var(--farbe-tinte-3);
  font-variant-numeric: tabular-nums;
}

.d-beschriftung {
  fill: var(--farbe-tinte);
  font-weight: var(--gewicht-marke);
}

.d-reihe {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-reihe-1 { stroke: var(--farbe-diagramm-1); }
.d-reihe-2 { stroke: var(--farbe-diagramm-2); }
.d-reihe-3 { stroke: var(--farbe-diagramm-3); }
.d-reihe-4 { stroke: var(--farbe-diagramm-4); }

.d-punkt-1 { fill: var(--farbe-diagramm-1); }
.d-punkt-2 { fill: var(--farbe-diagramm-2); }
.d-punkt-3 { fill: var(--farbe-diagramm-3); }
.d-punkt-4 { fill: var(--farbe-diagramm-4); }

.d-balken-1 { fill: var(--farbe-diagramm-1); }
.d-balken-2 { fill: var(--farbe-diagramm-2); }
.d-balken-3 { fill: var(--farbe-diagramm-3); }
.d-balken-4 { fill: var(--farbe-diagramm-4); }

.d-grenze {
  stroke: var(--farbe-diagramm-grenze);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  fill: none;
}

.d-kritisch {
  fill: var(--farbe-diagramm-kritisch);
}

.d-anmerkung {
  fill: none;
  stroke: var(--farbe-diagramm-anmerkung);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-hand {
  fill: var(--farbe-diagramm-anmerkung);
  font-family: var(--schrift-hand);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-5);
  margin: 0 0 var(--abstand-3);
  padding: 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-xs);
  list-style: none;
}

.legende li {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
}

.legende li::before {
  content: '';
  width: 1.4em;
  height: 0;
  border-top: 3px solid var(--l-farbe, var(--farbe-diagramm-1));
}

.legende .l-reihe-2 { --l-farbe: var(--farbe-diagramm-2); }
.legende .l-reihe-3 { --l-farbe: var(--farbe-diagramm-3); }
.legende .l-reihe-4 { --l-farbe: var(--farbe-diagramm-4); }

.legende .l-grenze::before {
  border-top: 2px dashed var(--farbe-diagramm-grenze);
}

/* ---------- 15 Platzhalter (nur vor der Freigabe) ------------------------------------- */
.platzhalter-etikett {
  display: inline-block;
  margin: 0;
  padding: 0 var(--abstand-2);
  border: 1.5px dashed var(--farbe-linie-mittel);
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--farbe-flaeche) 65%, transparent);
  color: var(--farbe-tinte-2);
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-fett);
  line-height: 1.6;
}

.platzhalter-inline {
  padding: 0 0.3em;
  border: 1px dashed var(--farbe-linie-mittel);
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--farbe-flaeche) 65%, transparent);
  color: var(--farbe-tinte-2);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.platzhalter-feld {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: var(--abstand-5);
  border: 1.5px dashed var(--farbe-linie-mittel);
  background: color-mix(in srgb, var(--farbe-flaeche) 65%, transparent);
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  text-align: center;
}

/* ---------- 16 Fuß ------------------------------------------------------------------ */
/* Tinte-Fläche mit 4-px-Oberkante in Karmin: die einzige erlaubte Karmin-Stelle auf Tinte */
.fuss {
  margin-top: var(--abstand-abschnitt);
  background: var(--farbe-tinte);
  border-top: 4px solid var(--farbe-karmin);
  color: var(--farbe-auf-tinte-2);
  font-size: var(--text-s);
}

.fuss-innen {
  width: min(100% - 2 * var(--rand), var(--breite-seite));
  margin-inline: auto;
  padding-block: var(--polster-fuss) var(--abstand-5);
}

.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-7) var(--abstand-6);
}

@media (min-width: 40em) {
  .fuss-raster {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  }
}

@media (min-width: 64em) {
  .fuss-raster {
    grid-template-columns: minmax(15rem, 1.5fr) repeat(auto-fit, minmax(10rem, 1fr));
  }
}

.fuss a {
  color: var(--farbe-auf-tinte);
  text-decoration-color: color-mix(in srgb, var(--farbe-auf-tinte) 35%, transparent);
}

.fuss a:hover {
  color: var(--farbe-auf-tinte);
  text-decoration-color: var(--farbe-auf-tinte);
}

.fuss-marke {
  margin: 0 0 var(--abstand-4);
  color: var(--farbe-auf-tinte);
  font-family: var(--schrift-display);
  font-size: 1.75rem;
  font-weight: var(--gewicht-marke);
  line-height: 1.1;
}

.fuss-titel {
  margin: 0 0 var(--abstand-3);
  color: var(--farbe-auf-tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
  letter-spacing: 0;
}

.fuss-spalte ul {
  display: grid;
  gap: var(--abstand-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss-spalte a {
  display: inline-block;
  padding-block: var(--abstand-1);
}

.fuss-klein {
  margin: var(--abstand-7) 0 0;
  padding-top: var(--abstand-5);
  border-top: var(--linie-auf-tinte);
  color: var(--farbe-auf-tinte-2);
  font-size: var(--text-xs);
}

/* ---------- 17 Bewegung: Der Text steht, der Stift bewegt sich -------------------------- */
/* Nur Karmin-Elemente sind animiert. Hero-Sequenz höchstens 3,0 s, danach keine automatische
   Bewegung. Unterhalb des Hero nur ein Effekttyp: Striche zeichnen sich beim Hereinscrollen. */
@keyframes stift-zeichnen {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes schreiben {
  from {
    clip-path: inset(-40% 100% -40% -12%);
  }

  to {
    clip-path: inset(-40% -12% -40% -12%);
  }
}

@keyframes stempeln {
  0% {
    opacity: 0;
    transform: rotate(-17deg) scale(1.6);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
  }
}

@keyframes wischen-x {
  from {
    clip-path: inset(-50% 100% -50% 0);
  }

  to {
    clip-path: inset(-50% 0 -50% 0);
  }
}

@keyframes wischen-y {
  from {
    clip-path: inset(0 -50% 100% -50%);
  }

  to {
    clip-path: inset(0 -50% 0 -50%);
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

/* Zeitplan der Hero-Sequenz (Verzögerung --d, Dauer --t) als Klassen statt Inline-Styles */
.zeit-1 { --d: 0.3s; --t: 0.36s; }
.zeit-2 { --d: 0.7s; --t: 0.3s; }
.zeit-3 { --d: 1s; --t: 0.24s; }
.zeit-4 { --d: 1.24s; --t: 0.22s; }
.zeit-5 { --d: 1.5s; --t: 0.24s; }
.zeit-6 { --d: 1.74s; --t: 0.22s; }
.zeit-7 { --d: 2s; --t: 0.26s; }
.zeit-8 { --d: 2.26s; --t: 0.22s; }
.zeit-9 { --d: 2.62s; --t: 0.36s; }

@media (prefers-reduced-motion: no-preference) {
  .held .stift path,
  .zeichnet path {
    animation: stift-zeichnen var(--t, 0.3s) var(--kurve-stift) var(--d, 0s) both;
  }

  .held .schreibt {
    animation: schreiben var(--t, 0.3s) cubic-bezier(0.4, 0.1, 0.6, 0.9) var(--d, 0s) both;
  }

  .held .stempel-held {
    animation: stempeln var(--t, 0.36s) cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 2.62s) both;
  }

  .menue-knopf[aria-expanded='true'] + .hauptnav {
    animation: einblenden 160ms var(--kurve-aus);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablauf-schritt::after {
      animation: wischen-y linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }

    .ablauf-quer .ablauf-schritt::after {
      animation-name: wischen-x;
    }
  }
}

/* ---------- 18 Kontrastmodus: Konturen über border und outline ------------------------- */
@media (forced-colors: active) {
  .knopf,
  .menue-knopf {
    border-color: CanvasText;
  }

  .karte,
  .karte-leit,
  .blatt,
  .hinweis,
  .pruefvermerk,
  .formular,
  .rechner,
  .beispielblatt,
  .kommentiert-blatt,
  .kennzahl-kachel {
    border: 1px solid CanvasText;
  }

  .stift,
  .stift path,
  .d-anmerkung {
    stroke: CanvasText;
  }

  del,
  .gestrichen {
    text-decoration: line-through;
  }

  ins {
    text-decoration: underline;
  }

  .kringel {
    border-color: CanvasText;
  }

  .welle {
    text-decoration-color: CanvasText;
  }

  .marke::after,
  .pfeil-link::after,
  .randnotiz::before,
  .randhinweis::before,
  .hauptnav-liste a::after,
  .vertrauen li::before,
  .liste-ja li::before,
  .karte-leit::before,
  .hinweis-randklammer::before,
  .hinweis-erfolg .hinweis-titel::before,
  .pruefvermerk::before,
  .pruefvermerk-titel::before,
  .feld-bestaetigung::before,
  .kommentiert-notizen::before,
  .kennzahl-markiert .kennzahl-wert::after,
  .doppelt::after,
  .haken::before,
  .einfuegung::before,
  .ablauf-schritt::after,
  .faq-eintrag summary::after {
    forced-color-adjust: none;
    background: CanvasText;
    -webkit-mask: var(--zeichen-maske) no-repeat var(--zeichen-lage, 0 0 / 100% 100%);
    mask: var(--zeichen-maske) no-repeat var(--zeichen-lage, 0 0 / 100% 100%);
  }

  .hauptnav-liste a[aria-current] {
    text-decoration: underline;
  }

  select {
    padding-right: var(--abstand-4);
    background-image: none;
    appearance: auto;
  }

  .stempel {
    border-color: CanvasText;
    color: CanvasText;
  }
}

/* ---------- 19 Druck ---------------------------------------------------------------- */
@media print {
  .kopf,
  .menue-knopf,
  .hauptnav,
  .brotkrumen,
  .aktionen {
    display: none !important;
  }

  .karte,
  .karte-leit,
  .blatt,
  .formular,
  .rechner,
  .beispielblatt,
  .kommentiert-blatt,
  .kennzahl-kachel {
    box-shadow: none;
  }

  .abschnitt,
  .diagramm,
  .tabelle-rahmen,
  .pruefvermerk,
  .hinweis,
  .kennzahlen {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }
}