/* ==========================================================================================
   Arkcanis Consulting GmbH — Styleguide als CSS · Stand 23.09.2026
   Erzeugt aus dem Website-Repository (web/src/styles): tokens.css (Werte), fonts.css (Schriften),
   global.css (Grundstile und Bausteine). Nicht von Hand ändern — Quelle ist die Website;
   neu erzeugen mit make_styleguide.py. Regeln zum Einsatz: Arkcanis-Styleguide.pdf.

   Einsatz:
   - Setzt einen CSS-Reset voraus (die Website nutzt den Preflight von Tailwind 4).
   - Schriften liegen unter fonts/ neben dieser Datei (SIL Open Font License, Lizenztexte dort).
   - Bausteine als Klassen: .btn .btn-primary .btn-secondary .link-pfeil .chip .karte .karte-akzent
     .eyebrow .lead .verlaufslinie .bogen .bogen-halb .bogen-rahmen .band-strong .band-canvas .prosa
   ========================================================================================== */

/* === 1 Tokens ============================================================= */
/* Design-Tokens — EINZIGE Quelle für Farben, Schriften, Abstände, Radien, Schatten und Bewegung.
   Verbindliche Einsatzregeln: DESIGN.md im Projektstamm. Komponenten verwenden ausschließlich diese
   Variablen (oder die daraus abgeleiteten Tailwind-Utilities aus @theme), nie eigene Farbwerte.
   Kontraste am 15.09.2026 gerechnet (WCAG 2.2): siehe DESIGN.md, Abschnitt Farben. */

:root {
  color-scheme: light;

  /* Markenfarben (aus dem Logo abgeleitet) */
  --brand-violet: #5E4A9B;        /* Bildmarke, oberer Bogen; Aktionsfarbe */
  --brand-violet-deep: #4B3A80;   /* Hover/Aktiv der Aktionsfarbe */
  --brand-sky: #6FB4E6;           /* Bildmarke, unterer Bogen; nur Dekoration und Fokus auf Dunkel */
  --brand-slate: #2C4A5C;         /* Wortmarke; Überschriften, dunkle Flächen */
  --brand-slate-deep: #1E3A4A;    /* Innenschatten der Bildmarke; Hero-Panel, Fußzeile */

  /* Flächen */
  --surface: #FFFFFF;             /* Seitengrund */
  --surface-canvas: #F4F7F9;      /* ruhige Wechselfläche für Abschnitte */
  --surface-violet-soft: #EEEAF6; /* Chips, Hinweise mit Aktionsfarbe als Text (6,1:1) */
  --surface-sky-soft: #E4F1FA;    /* Chips, Hinweise mit Haupttext (11,2:1) */
  --surface-strong: var(--brand-slate-deep);   /* dunkle Fläche: Hero-Panel, Fußzeile, Kontaktband */
  --surface-strong-2: var(--brand-slate);      /* zweite dunkle Fläche: Karten auf Dunkel */

  /* Text */
  --text: #1F3442;                /* Fließtext auf hell (12,9:1) */
  --text-2: #4A6272;              /* Begleittext, Meta auf hell (6,4:1) */
  --heading: var(--brand-slate);  /* Überschriften auf hell (9,4:1) */
  --on-strong: #FFFFFF;           /* Text auf dunklen Flächen (11,9:1) */
  --on-strong-2: #C9DCE8;         /* Begleittext auf dunklen Flächen (8,5:1) */

  /* Aktion und Links */
  --action: var(--brand-violet);          /* Primärbutton-Fläche, Textlinks auf hell (7,2:1) */
  --action-hover: var(--brand-violet-deep);
  --on-action: #FFFFFF;

  /* Linien und Bedienelement-Konturen */
  --border: #D9E2E8;              /* dekorative Trennlinien, Kartenrahmen */
  --border-control: #6F8493;      /* Eingabefelder, sekundäre Buttons (3,9:1 auf Weiß) */
  --border-on-strong: rgb(255 255 255 / 0.28);
  --border-control-on-strong: rgb(255 255 255 / 0.55);   /* sekundäre Buttons auf dunklen Flächen */
  --surface-hover-on-strong: rgb(255 255 255 / 0.08);    /* Hover-Fläche auf dunklen Flächen */
  --overlay-strong: linear-gradient(to top, rgb(30 58 74 / 0.85), rgb(30 58 74 / 0)); /* Bildunterschrift auf Foto */

  /* Status — immer mit Text, nie nur Farbe */
  --error: #B42318;               /* 6,6:1 auf Weiß */
  --error-soft: #FCEBE9;
  --success: #1E6B45;             /* 6,5:1 auf Weiß */
  --success-soft: #E6F3EC;

  /* Fokus: zweifarbiger Ring, je Untergrund */
  --focus: var(--brand-violet);          /* auf hellen Flächen */
  --focus-inner: #FFFFFF;
  --focus-on-strong: var(--brand-sky);   /* auf dunklen Flächen (5,3:1 auf strong) */
  --focus-inner-on-strong: var(--brand-slate-deep);

  /* Verlauf der Bildmarke — nur dekorativ (Linie, Bogenkante), nie unter Text */
  --gradient-brand: linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-sky) 100%);

  /* Schrift */
  --font-display: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", "Source Sans Fallback", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrößen: fließend zwischen 390 px und 1440 px */
  --fs-meta: 0.875rem;                                   /* 14 px: Datum, Kategorien, Fußnoten */
  --fs-small: 0.9375rem;                                 /* 15 px: Navigation, Buttons, Karten-Text */
  --fs-body: 1.0625rem;                                  /* 17 px: Fließtext */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* Teaser, Einleitung */
  --fs-h4: 1.125rem;
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h1-artikel: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); /* Blogtitel sind bis 126 Zeichen lang */
  --fs-h2-artikel: clamp(1.5rem, 1.25rem + 1vw, 2rem);       /* Zwischenüberschriften im Beitrag */
  --fs-display: clamp(2.25rem, 1rem + 3.4vw, 4.25rem);  /* nur Startseiten-Headline */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-lead: 1.55;                 /* Teaser, Einleitung */
  --lh-card-title: 1.35;           /* Kartentitel (mehrzeilig, Sans) */
  --lh-control: 1.25;              /* Buttons, Bedienelemente */
  --tracking-display: -0.01em;     /* H1 */
  --tracking-heading: -0.005em;    /* H2 */
  --tracking-wide: 0.08em;         /* Versal-Vorzeilen, Rubriken, Claim */
  --fs-tag: 0.7rem;                /* Kennzeichen „Entwurf“ im Menü */

  /* Abstände (4er-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section: clamp(3rem, 2rem + 4vw, 6rem);              /* vertikaler Abschnittsabstand */
  --hero-block: clamp(2.5rem, 2rem + 3vw, 5rem);          /* vertikaler Abstand des Seitenkopfs */
  --hero-block-kompakt: clamp(2rem, 1.5rem + 2vw, 3.5rem); /* Titelband der Übersichten */
  --panel-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);         /* Innenabstand von Flächen (Formularfläche) */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);           /* Seitenrand */

  /* Breiten */
  --width-page: 76rem;            /* 1216 px Inhaltsbreite */
  --width-reading: 42rem;         /* ~68 Zeichen Lesespalte */
  --width-narrow: 34rem;

  /* Bedienmaße */
  --control-height: 2.75rem;      /* 44 px: Buttons, Felder, Menüpunkte */
  --control-pad: 0.6em 1.25em;    /* Innenabstand Buttons */
  --field-pad: 0.55em 0.8em;      /* Innenabstand Eingabefelder */

  /* Radien */
  --radius-control: 6px;          /* Buttons, Eingabefelder */
  --radius-card: 12px;            /* Karten, Bildrahmen */
  --radius-pill: 999px;           /* Kategorie-Chips */
  --radius-arc: 42%;              /* einseitige große Rundung der Bildmaske (Bogen-Signatur) */

  /* Schatten: nur für schwebende Ebenen (Menüs) und Hover auf Karten */
  --shadow-color: rgb(30 58 74);
  --shadow-menu: 0 12px 32px -8px rgb(from var(--shadow-color) r g b / 0.28), 0 0 0 1px var(--border);
  --shadow-card-hover: 0 10px 24px -12px rgb(from var(--shadow-color) r g b / 0.35);

  /* Bewegung */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Kopfzeile */
  --header-height: 4.5rem;
}

/* === 2 Schriften ========================================================== */
/* Selbst gehostete Schriften (SIL Open Font License, Lizenztexte unter /fonts/): Source Serif 4 (Display)
   und Source Sans 3 (Text), variable Schnitte, latin-Subset (deckt Umlaute, ß, typografische Zeichen ab).
   Die Ersatzschriften tragen per size-adjust/ascent-override die Metriken der echten Schrift, gemessen an
   den Glyphenvorschüben eines echten DE/EN-Textes (tools/fontmetrik.py, 15.09.2026) — so verschiebt sich
   das Layout beim Schriftwechsel praktisch nicht (CLS). */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-serif-4-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: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-serif-4-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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3-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: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3-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;
}

/* Ersatzschriften mit angepassten Metriken (Georgia für die Serif, Arial für die Sans) */
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 107.69%;
  ascent-override: 96.2%;
  descent-override: 31.11%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans Fallback";
  src: local("Arial");
  size-adjust: 88.61%;
  ascent-override: 115.57%;
  descent-override: 45.14%;
  line-gap-override: 0%;
}

/* === 3 Grundstile und Bausteine =========================================== */

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
  body { background: var(--surface); color: var(--text); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
  h1, h2, h3, h4 { color: var(--heading); font-weight: 600; line-height: var(--lh-heading); text-wrap: balance; overflow-wrap: normal; }
  h1, h2 { font-family: var(--font-display); }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
  h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-heading); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }
  b, strong { font-weight: 600; }
  a { color: var(--action); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--motion-fast) var(--ease); }
  a:hover { color: var(--action-hover); }
  img { max-width: 100%; height: auto; }
  code, samp, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
  /* Kein Wortzerfall in Titeln: oberhalb 640 px keine Trennung (Titel dürfen mehr Zeilen belegen), darunter Silbentrennung,
     damit „Verwaltungsgesellschaft“ bei 320 px in die Zeile passt */
  @media (max-width: 40rem) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }

  /* Fokus: zweifarbiger Ring, sichtbar auf hellen und dunklen Flächen; Container schneiden ihn nicht ab */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); border-radius: var(--radius-control); }
  @media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; box-shadow: none; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}

@layer components {
  /* Seitenraster */
  /* Seitenrahmen — heißt bewusst nicht „container“: Tailwind 4 erzeugt für diesen Namen eine eigene Utility im
     höheren Layer, die die Breite überstimmen würde (Review 15.09.2026, H1) */
  .rahmen { width: 100%; max-width: var(--width-page); margin-inline: auto; padding-inline: var(--gutter); }
  .lesespalte { max-width: var(--width-reading); }
  .abschnitt { padding-block: var(--section); }
  .abschnitt-kompakt { padding-block: calc(var(--section) * 0.6); }
  /* Zwei reine Textabschnitte hintereinander: ohne Bild, Karten oder Farbwechsel
     addieren sich zwei volle Sektionsabstände zu einer Lücke, die wie ein Seitenende wirkt
     (Review Finance-Seite, 20.09.2026). Abschnitte mit Bild oder Karten behalten ihre Luft. */
  .abschnitt-text + .abschnitt-text { padding-block-start: calc(var(--section) * 0.5); }

  /* Dunkle Fläche: setzt Text-, Link- und Fokusfarben für alles darin um */
  .band-strong { background: var(--surface-strong); color: var(--on-strong); --text: var(--on-strong); --text-2: var(--on-strong-2); --heading: var(--on-strong); --border: var(--border-on-strong); --focus: var(--focus-on-strong); --focus-inner: var(--focus-inner-on-strong); }
  .band-strong a { color: var(--on-strong); }
  .band-strong a:hover { color: var(--brand-sky); }
  /* Buttons behalten auf Dunkel ihre eigene Textfarbe (die Link-Hover-Regel oben ist spezifischer als .btn-primary:hover) */
  .band-strong .btn-primary, .band-strong .btn-primary:hover { color: var(--on-action); }
  .band-canvas { background: var(--surface-canvas); }

  /* Vorzeile über Überschriften */
  .eyebrow { display: block; font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-3); }
  .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); max-width: var(--width-reading); }
  .meta { font-size: var(--fs-meta); color: var(--text-2); }

  /* Verlaufslinie der Bildmarke — dekorativ, 3 px */
  .verlaufslinie { display: block; height: 3px; width: 4rem; border-radius: 3px; background: var(--gradient-brand); }

  /* Bogen-Signatur: Bildmaske mit einseitig großer Rundung, Verlaufskante darunter */
  .bogen { position: relative; overflow: hidden; border-radius: var(--radius-arc) var(--radius-card) var(--radius-arc) var(--radius-card) / var(--radius-arc) var(--radius-card) var(--radius-arc) var(--radius-card); background: var(--surface-canvas); }
  .bogen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .bogen-halb { border-radius: var(--radius-arc) var(--radius-card) var(--radius-card) var(--radius-card) / var(--radius-arc) var(--radius-card) var(--radius-card) var(--radius-card); }
  .bogen-rahmen { position: relative; }
  .bogen-rahmen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: var(--gradient-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
  /* Auf dunkler Fläche heller Rahmen statt Verlauf, damit sich das Bild absetzt (DESIGN.md 5, Bildrahmen) */
  .band-strong .bogen-rahmen::after { background: var(--on-strong-2); }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--control-height); padding: var(--control-pad); border-radius: var(--radius-control); border: 1px solid transparent; font-family: var(--font-text); font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-control); text-decoration: none; text-align: center; cursor: pointer; appearance: none; transition: background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
  .btn-primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
  .btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
  .btn-secondary { background: transparent; border-color: var(--border-control); color: var(--heading); }
  .btn-secondary:hover { border-color: var(--heading); color: var(--heading); background: var(--surface-canvas); }
  .band-strong .btn-secondary { border-color: var(--border-control-on-strong); color: var(--on-strong); }
  .band-strong .btn-secondary:hover { border-color: var(--on-strong); background: var(--surface-hover-on-strong); color: var(--on-strong); }
  .btn:active { transform: translateY(1px); }
  .btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
  .btn .icon { width: 1.1em; height: 1.1em; }

  /* Textlink mit Pfeil (Abschnittslinks, Karten) */
  .link-pfeil { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; text-decoration: none; color: var(--action); min-height: 1.5rem; }
  .link-pfeil::after { content: "→"; transition: transform var(--motion-fast) var(--ease); }
  .link-pfeil:hover { text-decoration: underline; text-underline-offset: 0.18em; }
  .link-pfeil:hover::after { transform: translateX(3px); }
  .band-strong .link-pfeil { color: var(--on-strong); }

  /* Chips (Kategorien) */
  .chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2em 0.75em; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--heading); font-size: var(--fs-meta); font-weight: 600; text-decoration: none; transition: border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease); }
  .chip:hover { border-color: var(--action); color: var(--action); }
  .chip[aria-current="page"] { background: var(--surface-violet-soft); border-color: var(--action); color: var(--action); }
  .chip-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }

  /* Karten */
  .karte { position: relative; display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-5); transition: box-shadow var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
  /* Hover-Affordanz nur für Karten, die als Ganzes verlinkt sind (Review 15.09.2026, M7) */
  .karte:has(.karte-link):hover, .karte:focus-within { box-shadow: var(--shadow-card-hover); border-color: var(--border-control); }
  .karte-akzent::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--gradient-brand); }
  .karte h3 { margin: 0; }
  .karte .bild { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--surface-canvas); }
  .karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .karte .link-pfeil { margin-top: auto; }
  /* Ganze Karte klickbar über den Titel-Link (sprechender Linktext); der Pfeil darunter ist nur Dekoration */
  .karte-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .karte:has(.karte-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
  .karte-link:focus-visible { outline: none; box-shadow: none; }
  .karte:has(.karte-link:hover) .link-pfeil::after { transform: translateX(3px); }
  .karte .icon { width: 2rem; height: 2rem; color: var(--action); }
  /* Kartenraster: Spaltenzahl folgt der Kartenzahl (--spalten, DESIGN.md 4): 2 → 2, 4 → 2×2, sonst 3 */
  .karten-raster { --spalten: 3; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  .karten-raster-2 { --spalten: 2; }
  @media (min-width: 40rem) { .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .karten-raster { grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); } }
  /* Fünf Karten: keine Lücke — 2 + 2 + 1 zentriert (ab 40 rem) bzw. 3 + 2 zentriert (ab 64 rem) */
  @media (min-width: 40rem) {
    .karten-raster-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .karten-raster-5 > * { grid-column: span 2; }
    .karten-raster-5 > :nth-child(5) { grid-column: 2 / span 2; }
  }
  @media (min-width: 64rem) {
    .karten-raster-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .karten-raster-5 > :nth-child(4) { grid-column: 2 / span 2; }
    .karten-raster-5 > :nth-child(5) { grid-column: 4 / span 2; }
  }

  /* Gemeinsame Layoutbausteine der Seitenvorlagen (einmal hier, nicht je Komponente — Review 15.09.2026, N1) */
  .abschnitt-kopf { max-width: var(--width-reading); margin-bottom: var(--space-6); }
  .abschnitt-kopf h2, .abschnitt-kopf h3 { margin: 0 0 var(--space-3); }
  .abschnitt-kopf .lead { margin: 0; }
  .abschnitt-link { margin: var(--space-6) 0 0; }
  .aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
  /* Split: Text 7 : Bild 5; mit .bild-links Bild 5 : Text 7 und das Bild wandert per order nach links.
     Ohne .bild-links bleibt die DOM-Reihenfolge (Text, Bild) — nur so steht das Bild wirklich rechts (Review M1). */
  .split { display: grid; gap: var(--space-6); align-items: center; }
  .split h2 { margin: 0 0 var(--space-4); }
  .split .lead { margin: 0 0 var(--space-3); }
  .split-bild { aspect-ratio: 4 / 3; margin: 0; }
  .split-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
    .split.bild-links { grid-template-columns: 5fr 7fr; }
    .split.bild-links > .split-bild { order: -1; }
  }
  .zeile-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
  .zeile-kopf h2 { margin: 0; }
  /* Systemseiten (404, Danke) */
  .system-seite { min-height: 40vh; }
  .system-innen { max-width: var(--width-reading); }
  .system-icon .icon { width: 3rem; height: 3rem; margin-bottom: var(--space-4); }

  /* Fließtext aus Markdown */
  .prosa { max-width: var(--width-reading); }
  .prosa p { margin-block: 0 1em; }
  .prosa > :last-child { margin-bottom: 0; }
  .prosa ul, .prosa ol { padding-left: 1.3em; margin-block: 0 1em; }
  .prosa ul { list-style: disc; }
  .prosa ol { list-style: decimal; }
  .prosa li { margin-bottom: 0.35em; }
  .prosa li::marker { color: var(--action); }
  .prosa h3 { margin: 1.6em 0 0.5em; }
  .prosa h4 { margin: 1.3em 0 0.4em; }
  .prosa > h3:first-child, .prosa > h4:first-child { margin-top: 0; }
  .prosa blockquote { border-left: 3px solid var(--brand-sky); padding-left: 1em; margin: 1em 0; color: var(--text-2); }
  .prosa img { margin: 1.25em 0; border-radius: var(--radius-card); }
  .prosa table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0; font-size: var(--fs-small); }
  .prosa th, .prosa td { text-align: left; padding: 0.5em 0.75em; border-bottom: 1px solid var(--border); vertical-align: top; }
  .prosa th { color: var(--heading); font-weight: 600; }
  .prosa .tabelle { overflow-x: auto; }
  .prosa hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
  .prosa-gross { font-size: var(--fs-lead); }
  .prosa-weit { max-width: none; }
  .prosa .aktion { margin-top: 1.25em; }
  .beitrag h2 { font-family: var(--font-display); font-size: var(--fs-h2-artikel); margin: 1.8em 0 0.6em; }
  .beitrag h2:first-child { margin-top: 0; }
  .beitrag h3 { margin: 1.5em 0 0.5em; }

  /* Formular */
  .feld { display: block; width: 100%; min-height: var(--control-height); padding: var(--field-pad); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-control); transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
  .feld:hover { border-color: var(--heading); }
  .feld:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: none; border-color: var(--focus); }
  .feld[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
  .feld-label { display: block; font-weight: 600; margin-bottom: var(--space-1); color: var(--heading); }
  .feld-hinweis { font-size: var(--fs-meta); color: var(--text-2); }
  .meldung { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); border: 1px solid; font-weight: 500; }
  .meldung .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15em; }
  .meldung-fehler { color: var(--error); border-color: var(--error); background: var(--error-soft); }
  .meldung-erfolg { color: var(--success); border-color: var(--success); background: var(--success-soft); }
  /* Hinweis, kein Fehler: Formular braucht JavaScript / ist noch nicht bereit (19.09.2026) */
  .meldung-hinweis { color: var(--text); border-color: var(--brand-sky); background: var(--surface-sky-soft); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Zugänglichkeit */
  .skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 100; padding: 0.6em 1em; background: var(--action); color: var(--on-action); border-radius: var(--radius-control); font-weight: 600; text-decoration: none; }
  .skip-link:focus { left: 0.5rem; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  /* Icon-Grundmaß */
  .icon { display: inline-block; flex: none; }
}