/* ============================================================
   reDim Brand Tokens v1.0.0
   Basis: reDim CD-Styleguide 12.2021
   reDim GmbH, Nußallee 7 F, 63450 Hanau

   GENERIERT AUS tokens/tokens.json. NICHT VON HAND EDITIEREN.
   Neu erzeugen mit:  python3 build/build_css.py
   ============================================================ */

/* ─────────────────────────────────────────────
   Schriften: self-hosted, kein CDN (reDim-Standard)
   Dateien erwartet unter ../assets/fonts/
   ───────────────────────────────────────────── */
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/rubik-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/rubik-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {

  /* ──────────────────────────
     Marke, Primärfarben [CD]
     ────────────────────────── */

  --rd-orange: #FF7A00;
  --rd-blau: #113F57;

  /* ────────────────────────────
     Marke, Sekundärfarben [CD]
     ──────────────────────────── */

  --rd-blaugrau-hell: #F2F5F6;
  --rd-blau-hell: #CDDAE2;
  --rd-blau-nacht: #092636;
  --rd-grau-hell: #C2C2C2;
  --rd-grau-mittel: #4B4B4B;
  --rd-grau-dunkel: #202020;

  /* ────────────────────────────────────
     Funktionale Ableitungen [A11Y/NEU]
     ──────────────────────────────────── */

  --rd-orange-text: #AD5300;  /* Orange Text und Links auf hellem Grund */
  --rd-orange-hell: #FF9533;  /* Orange Text und Links auf dunklem Grund */
  --rd-orange-hover: #E66E00;  /* Hover-Zustand oranger Flächen */
  --rd-orange-flaeche: #FFF2E5;  /* Sehr helle Orange-Tönung, Hinweisboxen */
  --rd-blau-linie: #1B5069;  /* Linien im Dark Mode */
  --rd-grau-text: #6B6B6B;  /* Sekundärtext, ersetzt grau-hell für Text */

  /* ──────────────────────────
     Semantische Farben [NEU]
     ────────────────────────── */

  --rd-success: #1C7C54;
  --rd-error: #C0392B;
  --rd-warning: #8A6100;
  --rd-info: #113F57;

  /* ───────────────────────────
     Farbrollen hell (Default)
     ─────────────────────────── */

  --rd-bg: #FFFFFF;
  --rd-bg-alt: #F2F5F6;
  --rd-bg-invers: #092636;
  --rd-text: #4B4B4B;
  --rd-text-stark: #202020;
  --rd-text-schwach: #6B6B6B;
  --rd-text-invers: #FFFFFF;
  --rd-linie: #CDDAE2;
  --rd-linie-stark: #C2C2C2;
  --rd-akzent: #FF7A00;
  --rd-akzent-text: #AD5300;
  --rd-akzent-hover: #E66E00;
  --rd-link-hover: #113F57;
  --rd-btn-sekundaer: #113F57;

  /* ───────────────────────────
     Typografie: Familien [CD]
     ─────────────────────────── */

  --rd-font-headline: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rd-font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rd-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* ───────────────────────
     Typografie: Web-Skala
     ─────────────────────── */

  --rd-fs-display: 4.5rem;
  --rd-lh-display: 1.05;
  --rd-fs-h1: clamp(2.25rem, 6vw, 3.75rem);
  --rd-lh-h1: 1.1;
  --rd-fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --rd-lh-h2: 1.15;
  --rd-fs-h3: 1.75rem;
  --rd-lh-h3: 1.25;
  --rd-fs-h4: 1.375rem;
  --rd-lh-h4: 1.35;
  --rd-fs-subheadline: 1.25rem;
  --rd-lh-subheadline: 1.4;
  --rd-fs-lead: 1.25rem;
  --rd-lh-lead: 1.6;
  --rd-fs-body: 1.125rem;
  --rd-lh-body: 1.65;
  --rd-fs-small: 1rem;
  --rd-lh-small: 1.6;
  --rd-fs-caption: 0.875rem;
  --rd-lh-caption: 1.5;
  --rd-fs-label: 0.875rem;
  --rd-lh-label: 1.3;

  /* ────────────────────────────────────────────────────
     Typografie: Dokument-Skala in pt für Print und PDF
     ──────────────────────────────────────────────────── */

  --rd-doc-fs-titel: 32pt;
  --rd-doc-fs-h1: 20pt;
  --rd-doc-fs-h2: 15pt;
  --rd-doc-fs-h3: 12pt;
  --rd-doc-fs-lead: 12pt;
  --rd-doc-fs-body: 10.5pt;
  --rd-doc-fs-tabelle: 9.5pt;
  --rd-doc-fs-caption: 8pt;
  --rd-doc-fs-kopfzeile: 8pt;

  /* ─────────
     Spacing
     ───────── */

  --rd-space-1: 0.25rem;
  --rd-space-2: 0.5rem;
  --rd-space-3: 0.75rem;
  --rd-space-4: 1rem;
  --rd-space-5: 1.5rem;
  --rd-space-6: 2rem;
  --rd-space-8: 3rem;
  --rd-space-10: 4rem;
  --rd-space-12: 6rem;
  --rd-space-16: 8rem;

  /* ────────
     Radius
     ──────── */

  --rd-radius-sm: 4px;
  --rd-radius-md: 8px;
  --rd-radius-lg: 16px;
  --rd-radius-xl: 24px;
  --rd-radius-pill: 999px;

  /* ──────────
     Schatten
     ────────── */

  --rd-shadow-sm: 0 1px 2px rgba(9,38,54,.06), 0 1px 3px rgba(9,38,54,.10);
  --rd-shadow-md: 0 4px 8px rgba(9,38,54,.06), 0 8px 24px rgba(9,38,54,.08);
  --rd-shadow-lg: 0 12px 24px rgba(9,38,54,.08), 0 24px 48px rgba(9,38,54,.12);

  /* ────────
     Motion
     ──────── */

  --rd-dur-schnell: 120ms;
  --rd-dur-standard: 200ms;
  --rd-dur-langsam: 320ms;
  --rd-ease: cubic-bezier(.4,0,.2,1);

  /* ────────
     Layout
     ──────── */

  --rd-container: 1200px;
  --rd-lesebreite: 720px;
  --rd-gutter: 24px;
  --rd-seitenrand: 24px;
}

:root {
  --rd-swoosh-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.094 48.379" preserveAspectRatio="none"><g transform="translate%28-757.906 -680.324%29"><path fill="black" d="M57.748,326.419a13.435,13.435,0,0,0,1.765.606,44.352,44.352,0,0,0,5.989.771q3.281.379,6.569.687c6.986.655,13.992,1.077,21,1.322s14.049.313,21.074.26,14.063-.228,21.092-.468q6.164-.211,12.326-.477,92.586-3.927,184.649-15.367c32.134-3.994,64.252-8.687,95.644-16.629,4.632-1.172,10.177-2.2,13.659,1.07-4.13,4.775-10.726,6.429-16.9,7.742C369.7,317.614,313.57,322.342,257.575,326.454q-10.557.775-21.116,1.511-10.618.734-21.241,1.4t-21.253,1.206q-10.627.543-21.26.948t-21.262.624q-10.627.22-21.258.233t-21.248-.225c-13.026-.292-26.1-.533-39.087-1.6-3.667-.3-11.683-1.051-13.424-4.46A2.21,2.21,0,0,1,57.748,326.419Z" transform="translate%28707.48 390.333%29"/><path fill="black" d="M129.482,338.371q-10.341,0-20.68-.226l-2.335-.052c-12.154-.27-24.722-.549-37.107-1.564-7.4-.607-15.36-2-18.278-7.712a6,6,0,0,1,4.421-8.657,9.369,9.369,0,0,1,1.153-.09,7.672,7.672,0,0,1,3.278.758,7.7,7.7,0,0,0,1.064.384,19.867,19.867,0,0,0,3.246.436l1.948.189q3.216.372,6.44.673c6.869.644,13.758,1.058,20.653,1.3q8.22.287,16.449.273l4.371-.017c6.979-.053,13.957-.226,20.933-.464q6.139-.21,12.276-.476c61.308-2.6,123.27-7.757,184.163-15.327,30.353-3.773,62.86-8.383,94.913-16.492a35.921,35.921,0,0,1,8.7-1.314,14.834,14.834,0,0,1,10.54,3.829,6,6,0,0,1,.429,8.3c-5.274,6.1-12.866,8.128-20.191,9.685-55.1,11.719-110.841,16.447-167.852,20.634l-21.142,1.513q-10.64.736-21.285,1.4t-21.316,1.209q-10.668.546-21.343.952t-21.363.627q-10.687.221-21.378.234Z" transform="translate%28707.48 390.333%29"/></g></svg>');
}

/* Dark Mode, automatisch nach Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
  --rd-bg: #092636;
  --rd-bg-alt: #113F57;
  --rd-bg-invers: #FFFFFF;
  --rd-text: #F2F5F6;
  --rd-text-stark: #FFFFFF;
  --rd-text-schwach: #CDDAE2;
  --rd-text-invers: #202020;
  --rd-linie: #1B5069;
  --rd-linie-stark: #2A6885;
  --rd-akzent: #FF7A00;
  --rd-akzent-text: #FF9533;
  --rd-akzent-hover: #FF9533;
  --rd-link-hover: #CDDAE2;
  --rd-btn-sekundaer: #F2F5F6;
  --rd-success: #4ECB8D;
  --rd-error: #FF8A7A;
  --rd-warning: #F0B429;
  --rd-info: #7FB3CC;
  }
}

/* Dark Mode, manuell erzwungen */
:root[data-theme="dunkel"] {
  --rd-bg: #092636;
  --rd-bg-alt: #113F57;
  --rd-bg-invers: #FFFFFF;
  --rd-text: #F2F5F6;
  --rd-text-stark: #FFFFFF;
  --rd-text-schwach: #CDDAE2;
  --rd-text-invers: #202020;
  --rd-linie: #1B5069;
  --rd-linie-stark: #2A6885;
  --rd-akzent: #FF7A00;
  --rd-akzent-text: #FF9533;
  --rd-akzent-hover: #FF9533;
  --rd-link-hover: #CDDAE2;
  --rd-btn-sekundaer: #F2F5F6;
  --rd-success: #4ECB8D;
  --rd-error: #FF8A7A;
  --rd-warning: #F0B429;
  --rd-info: #7FB3CC;
}

/* ─────────────────────────────────────────────
   Reset & Basis
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--rd-font-body);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  font-weight: 400;
  color: var(--rd-text);
  background: var(--rd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────
   Typografie
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rd-font-headline);
  font-weight: 700;
  color: var(--rd-text-stark);
  text-wrap: balance;
}
h1 { font-size: var(--rd-fs-h1); line-height: var(--rd-lh-h1); }
h2 { font-size: var(--rd-fs-h2); line-height: var(--rd-lh-h2); }
h3 { font-size: var(--rd-fs-h3); line-height: var(--rd-lh-h3); }
h4 { font-size: var(--rd-fs-h4); line-height: var(--rd-lh-h4); }

h1 + *, h2 + *, h3 + * { margin-top: var(--rd-space-4); }
* + h2 { margin-top: var(--rd-space-8); }
* + h3 { margin-top: var(--rd-space-6); }

p { max-width: 68ch; text-wrap: pretty; }
p + p { margin-top: var(--rd-space-4); }

.rd-display     { font-family: var(--rd-font-headline); font-weight: 700;
                  font-size: var(--rd-fs-display); line-height: var(--rd-lh-display);
                  color: var(--rd-text-stark); }
.rd-subheadline { font-family: var(--rd-font-headline); font-weight: 400;
                  font-size: var(--rd-fs-subheadline); line-height: var(--rd-lh-subheadline);
                  color: var(--rd-text); }
.rd-lead        { font-family: var(--rd-font-body); font-weight: 300;
                  font-size: var(--rd-fs-lead); line-height: var(--rd-lh-lead); }
.rd-small       { font-size: var(--rd-fs-small); line-height: var(--rd-lh-small); }
.rd-caption     { font-size: var(--rd-fs-caption); line-height: var(--rd-lh-caption);
                  color: var(--rd-text-schwach); }
.rd-label       { font-family: var(--rd-font-headline); font-weight: 700;
                  font-size: var(--rd-fs-label); line-height: var(--rd-lh-label);
                  letter-spacing: .06em; text-transform: uppercase;
                  color: var(--rd-text-stark); }

code, kbd, pre, samp { font-family: var(--rd-font-mono); font-size: .9em; }

/* ─────────────────────────────────────────────
   Links
   ───────────────────────────────────────────── */
a {
  color: var(--rd-akzent-text);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: from-font;
  transition: color var(--rd-dur-schnell) var(--rd-ease);
}
a:hover { color: var(--rd-link-hover); }

/* Links auf dunklen Flächen (STYLEGUIDE 6.2): helle Orange-Variante.
   #AD5300 erreicht auf Nachtblau nur 2,99:1. */
.rd-bg-invers a, .rd-flaeche--invers a { color: var(--rd-orange-hell); }
.rd-bg-invers a:hover, .rd-flaeche--invers a:hover { color: #fff; }

/* ─────────────────────────────────────────────
   Fokus, nie entfernen (WCAG)
   ───────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rd-orange);
  outline-offset: 2px;
  border-radius: var(--rd-radius-sm);
}

/* ─────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────── */
.rd-container {
  width: 100%;
  max-width: var(--rd-container);
  margin-inline: auto;
  padding-inline: var(--rd-seitenrand);
}
.rd-lesebreite { max-width: var(--rd-lesebreite); }
.rd-section    { padding-block: var(--rd-space-10); }
.rd-stack > * + * { margin-top: var(--rd-space-4); }
.rd-grid {
  display: grid;
  gap: var(--rd-gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (min-width: 768px) { :root { --rd-seitenrand: 48px; } }
@media (min-width: 1280px){ :root { --rd-seitenrand: 64px; } }

/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-2);
  min-height: 48px;
  padding: 12px 28px;
  font-family: var(--rd-font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--rd-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rd-dur-standard) var(--rd-ease),
              color var(--rd-dur-standard) var(--rd-ease),
              border-color var(--rd-dur-standard) var(--rd-ease);
}
.rd-btn--primaer   { background: var(--rd-orange); color: #fff; }
.rd-btn--primaer:hover { background: var(--rd-orange-hover); color: #fff; }

/* AA-strikte Variante: 5,23:1 mit weißer Schrift */
.rd-btn--primaer-aa { background: var(--rd-orange-text); color: #fff; }
.rd-btn--primaer-aa:hover { background: var(--rd-blau); }

.rd-btn--sekundaer { background: transparent; color: var(--rd-btn-sekundaer);
                     border-color: var(--rd-btn-sekundaer); }
.rd-btn--sekundaer:hover { background: var(--rd-btn-sekundaer);
                           color: var(--rd-bg); }

.rd-btn--tertiaer  { background: transparent; color: var(--rd-akzent-text);
                     padding-inline: var(--rd-space-2); min-height: 44px; }
.rd-btn--tertiaer:hover { text-decoration: underline; }

/* Auf dunklem Grund (STYLEGUIDE 6.1): weiße Fläche, blaue Schrift */
.rd-btn--invers { background: #fff; color: var(--rd-blau); }
.rd-btn--invers:hover { background: var(--rd-blau-hell); color: var(--rd-blau); }

.rd-btn:disabled, .rd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ─────────────────────────────────────────────
   Card
   ───────────────────────────────────────────── */
.rd-card {
  background: var(--rd-bg);
  border: 1px solid var(--rd-linie);
  border-radius: var(--rd-radius-md);
  padding: var(--rd-space-5);
  box-shadow: var(--rd-shadow-sm);
}
.rd-card--akzent { border-left: 4px solid var(--rd-orange); }

/* ─────────────────────────────────────────────
   Tabelle
   ───────────────────────────────────────────── */
.rd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rd-fs-small);
}
.rd-table th {
  font-family: var(--rd-font-headline);
  font-weight: 700;
  font-size: var(--rd-fs-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--rd-text-stark);
  background: var(--rd-bg-alt);
  padding: var(--rd-space-3) var(--rd-space-4);
}
.rd-table td {
  padding: var(--rd-space-3) var(--rd-space-4);
  border-top: 1px solid var(--rd-linie);
  vertical-align: top;
}
.rd-table .rd-num { text-align: right; font-variant-numeric: tabular-nums; }
.rd-table tfoot td { font-weight: 700; border-top: 2px solid var(--rd-blau); }

/* ─────────────────────────────────────────────
   Hinweisboxen
   ───────────────────────────────────────────── */
.rd-note {
  border-left: 4px solid var(--rd-info);
  border-radius: var(--rd-radius-md);
  padding: var(--rd-space-4) var(--rd-space-5);
  background: color-mix(in srgb, var(--rd-info) 8%, var(--rd-bg));
}
.rd-note--success { border-color: var(--rd-success);
                    background: color-mix(in srgb, var(--rd-success) 8%, var(--rd-bg)); }
.rd-note--warning { border-color: var(--rd-warning);
                    background: color-mix(in srgb, var(--rd-warning) 8%, var(--rd-bg)); }
.rd-note--error   { border-color: var(--rd-error);
                    background: color-mix(in srgb, var(--rd-error) 8%, var(--rd-bg)); }
.rd-note--marke   { border-color: var(--rd-orange);
                    background: color-mix(in srgb, var(--rd-orange) 10%, var(--rd-bg)); }

/* ─────────────────────────────────────────────
   Zitat
   ───────────────────────────────────────────── */
blockquote, .rd-zitat {
  margin: 0;
  padding: var(--rd-space-4) var(--rd-space-5);
  border-left: 4px solid var(--rd-orange);
  background: var(--rd-bg-alt);
  border-radius: 0 var(--rd-radius-md) var(--rd-radius-md) 0;
  font-family: var(--rd-font-body);
  font-weight: 300;
  font-size: var(--rd-fs-lead);
  line-height: var(--rd-lh-lead);
}
blockquote footer, .rd-zitat footer {
  margin-top: var(--rd-space-2);
  font-size: var(--rd-fs-caption);
  font-weight: 400;
  color: var(--rd-text-schwach);
}

/* ─────────────────────────────────────────────
   Abbildung mit Unterschrift
   ───────────────────────────────────────────── */
figure { margin: 0; }
figure > img { border-radius: var(--rd-radius-lg); }
figcaption {
  margin-top: var(--rd-space-2);
  font-size: var(--rd-fs-caption);
  line-height: var(--rd-lh-caption);
  color: var(--rd-text-schwach);
}

/* ─────────────────────────────────────────────
   Badge
   ───────────────────────────────────────────── */
.rd-badge {
  display: inline-flex; align-items: center; gap: var(--rd-space-1);
  padding: 4px 12px;
  font-family: var(--rd-font-headline); font-weight: 700;
  font-size: var(--rd-fs-caption); letter-spacing: .04em;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-bg-alt); color: var(--rd-text-stark);
}
.rd-badge--akzent { background: var(--rd-orange); color: #fff; }

/* ─────────────────────────────────────────────
   Swoosh: die Formsprache der Marke [CD]
   Der Pfad stammt aus der Original-Datei des CD-Guides
   und wird beim Build als data-URI eingebettet.
   ───────────────────────────────────────────── */

/* Betonung: Swoosh unter einem einzelnen Wort */
.rd-swoosh {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.rd-swoosh::after {
  content: "";
  position: absolute;
  left: -.04em; right: -.06em; bottom: -.24em;
  height: .30em;
  background: var(--rd-orange);
  -webkit-mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
          mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Headline-Akzent: langer Schwung über einer Headline */
.rd-swoosh-bogen {
  display: block;
  width: min(100%, 34rem);
  height: .55rem;
  margin-bottom: var(--rd-space-4);
  background: var(--rd-orange);
  -webkit-mask: var(--rd-swoosh-mask) no-repeat left / 100% 100%;
          mask: var(--rd-swoosh-mask) no-repeat left / 100% 100%;
}

/* Sektionstrenner: schmaler Schwung statt harter Linie */
.rd-swoosh-trenner {
  display: block;
  width: 100%;
  height: .4rem;
  margin-block: var(--rd-space-8);
  background: var(--rd-linie);
  -webkit-mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
          mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
}
.rd-swoosh-trenner--akzent { background: var(--rd-orange); }

/* Bildkante: Swoosh unter einem Bild */
.rd-bild {
  position: relative;
  border-radius: var(--rd-radius-lg);
  overflow: visible;
}
.rd-bild > img { border-radius: var(--rd-radius-lg); }
.rd-bild::after {
  content: "";
  position: absolute;
  left: 8%; right: -3%; bottom: -.7rem;
  height: .55rem;
  background: var(--rd-orange);
  -webkit-mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
          mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
}

/* Listenmarker: kleiner Swoosh statt Punkt */
.rd-liste { list-style: none; padding-left: 0; }
.rd-liste > li {
  position: relative;
  padding-left: var(--rd-space-5);
}
.rd-liste > li + li { margin-top: var(--rd-space-2); }
.rd-liste > li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: var(--rd-space-4); height: .28rem;
  background: var(--rd-orange);
  -webkit-mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
          mask: var(--rd-swoosh-mask) no-repeat center / 100% 100%;
}

/* Flächen: ruhige Rechtecke mit weichem Radius, ersetzen die Pebbles */
.rd-flaeche {
  background: var(--rd-bg-alt);
  border-radius: var(--rd-radius-xl);
  padding: var(--rd-space-8);
}
.rd-flaeche--invers {
  background: var(--rd-blau-nacht);
  color: var(--rd-blau-hell);
}
.rd-flaeche--invers h1, .rd-flaeche--invers h2,
.rd-flaeche--invers h3, .rd-flaeche--invers h4 { color: #fff; }

/* ─────────────────────────────────────────────
   Utilities
   ───────────────────────────────────────────── */
.rd-bg-alt     { background: var(--rd-bg-alt); }
.rd-bg-invers  { background: var(--rd-bg-invers); color: var(--rd-text-invers); }
.rd-bg-invers h1, .rd-bg-invers h2, .rd-bg-invers h3, .rd-bg-invers h4 { color: #fff; }
.rd-text-akzent{ color: var(--rd-akzent-text); }
.rd-hr { border: 0; border-top: 1px solid var(--rd-linie); margin-block: var(--rd-space-6); }
.rd-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────
   Print und PDF, A4
   ───────────────────────────────────────────── */
@page {
  size: A4;
  margin: 25mm 20mm 20mm 25mm;
}
@media print {
  :root { --rd-seitenrand: 0; }
  body {
    font-size: var(--rd-doc-fs-body);
    line-height: 1.45;
    background: #fff;
    color: #202020;
  }
  h1 { font-size: var(--rd-doc-fs-h1); margin-top: 18pt; }
  h2 { font-size: var(--rd-doc-fs-h2); margin-top: 14pt; }
  h3 { font-size: var(--rd-doc-fs-h3); margin-top: 10pt; }
  p  { margin-bottom: 6pt; max-width: none; }
  a  { color: #AD5300; text-decoration: underline; }
  .rd-table { font-size: var(--rd-doc-fs-tabelle); }
  .rd-caption { font-size: var(--rd-doc-fs-caption); }
  .rd-card, .rd-note { box-shadow: none; break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  tr, figure, .rd-card, blockquote { break-inside: avoid; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .rd-no-print { display: none !important; }
  .rd-seitenumbruch { break-before: page; }
}

/* Druck ist immer hell, auch wenn Dark Mode aktiv ist */
@media print {
  :root, :root:not([data-theme="hell"]), :root[data-theme="dunkel"] {
    --rd-bg: #FFFFFF;
    --rd-bg-alt: #F2F5F6;
    --rd-bg-invers: #092636;
    --rd-text: #4B4B4B;
    --rd-text-stark: #202020;
    --rd-text-schwach: #6B6B6B;
    --rd-text-invers: #FFFFFF;
    --rd-linie: #CDDAE2;
    --rd-linie-stark: #C2C2C2;
    --rd-akzent: #FF7A00;
    --rd-akzent-text: #AD5300;
    --rd-akzent-hover: #E66E00;
    --rd-link-hover: #113F57;
    --rd-btn-sekundaer: #113F57;
    --rd-success: #1C7C54;
    --rd-error: #C0392B;
    --rd-warning: #8A6100;
    --rd-info: #113F57;
  }
}