/* ============================================================
   OpenKitti — Stilblatt des Webauftritts, fuer den Prototyp

   ERZEUGT von scripts/prototyp-stil-bauen.mjs aus
   src/styles/app.css. Nicht von Hand aendern: den Webauftritt
   aendern und neu erzeugen.

   Diese Datei ist massgeblich fuer die Gestaltung des Prototyps.
   Alles Eigene des Arbeitsbereichs steht in arbeitsbereich.css
   und verwendet ausschliesslich die Rollen von hier.
   ============================================================ */

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-neutral-50: #fbfcfc;
    --color-neutral-100: #dde0e8;
    --color-neutral-200: #c0c5d3;
    --color-neutral-300: #a3aabf;
    --color-neutral-400: #8790aa;
    --color-neutral-500: #6d7796;
    --color-neutral-600: #535e83;
    --color-neutral-700: #3b466f;
    --color-neutral-800: #242f5c;
    --color-neutral-900: #272d34;
    --spacing: 0.25rem;
    --breakpoint-sm: 784px;
    --breakpoint-md: 1144px;
    --breakpoint-lg: 1400px;
    --breakpoint-xl: 1536px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary-50: #f7fdfa;
    --color-primary-100: #c2f2db;
    --color-primary-200: #85e6bc;
    --color-primary-300: #ffd900;
    --color-neutral-1000: #272d34;
    --color-accent-50: #fffafb;
    --color-accent-100: #fed4d9;
    --color-accent-200: #feabb6;
    --color-accent-300: #ff7b94;
    --color-accent-400: #f14f75;
    --color-accent-500: #d9205b;
    --color-accent-600: #b50347;
    --color-accent-700: #8d0235;
    --color-accent-800: #670125;
    --color-accent-900: #430116;
    --color-accent-1000: #230007;
    --color-info-50: #fafcfe;
    --color-info-100: #cde2fe;
    --color-info-200: #9ec8fe;
    --color-info-300: #6cadff;
    --color-info-400: #3c91f6;
    --color-info-500: #0575e2;
    --color-info-600: #015eb7;
    --color-info-700: #00478e;
    --color-info-800: #003267;
    --color-info-900: #001e42;
    --color-info-1000: #000b21;
    --color-vermerk-50: #fcfbfe;
    --color-vermerk-100: #e8d7ff;
    --color-vermerk-200: #d6b3ff;
    --color-vermerk-300: #c18ff8;
    --color-vermerk-400: #ab6ee8;
    --color-vermerk-500: #944fd2;
    --color-vermerk-600: #7b32b8;
    --color-vermerk-700: #621599;
    --color-vermerk-800: #480074;
    --color-vermerk-900: #2d004b;
    --color-vermerk-1000: #140026;
    --color-success-50: #f8fdf8;
    --color-success-100: #c3edc3;
    --color-success-200: #91da93;
    --color-success-300: #60c566;
    --color-success-400: #28ad3c;
    --color-success-500: #019126;
    --color-success-600: #04751e;
    --color-success-700: #015914;
    --color-success-800: #003f0b;
    --color-success-900: #002705;
    --color-success-1000: #001101;
    --color-warning-50: #fefbf9;
    --color-warning-100: #ffd7bd;
    --color-warning-200: #ffb17b;
    --color-warning-300: #fa8927;
    --color-warning-400: #d97106;
    --color-warning-500: #b55c00;
    --color-warning-600: #924a02;
    --color-warning-700: #713700;
    --color-warning-800: #512600;
    --color-warning-900: #331500;
    --color-warning-1000: #180700;
    --color-error-50: #fefbfa;
    --color-error-100: #ffd5cf;
    --color-error-200: #ffada1;
    --color-error-300: #fd8072;
    --color-error-400: #eb5b4e;
    --color-error-500: #d3352d;
    --color-error-600: #b6040c;
    --color-error-700: #8d0107;
    --color-error-800: #660103;
    --color-error-900: #420001;
    --color-error-1000: #210000;
    --color-weiss: #ffffff;
    --ton-licht: 255 255 255;
    --ton-tiefe: 4 0 53;
    --ton-tiefe-hell: 16 24 72;
    --ton-marke: 32 217 158;
    --ton-marke-tief: 32 217 158;
    --color-surface-canvas: var(--color-neutral-1000);
    --color-surface-raised: var(--color-neutral-900);
    --color-surface-sunken: var(--color-neutral-800);
    --color-surface-brand: var(--color-primary-300);
    --color-surface-brand-deep: var(--color-neutral-900);
    --color-surface-inverse: var(--color-primary-300);
    --color-text-primary: var(--color-neutral-50);
    --color-text-muted: var(--color-neutral-300);
    --color-text-accent: var(--color-primary-300);
    --color-text-on-brand: var(--color-neutral-1000);
    --color-text-on-brand-deep: var(--color-neutral-50);
    --color-text-on-interactive: var(--color-neutral-1000);
    --color-text-on-special: var(--color-weiss);
    --color-text-on-inverse: var(--color-neutral-1000);
    --color-text-success: var(--color-success-300);
    --color-text-error: var(--color-error-300);
    --color-interactive: var(--color-primary-300);
    --color-interactive-hover: var(--color-primary-200);
    --color-interactive-active: var(--color-primary-100);
    --color-interactive-disabled: var(--color-neutral-600);
    --color-focus-ring: var(--color-primary-300);
    --color-interactive-special: var(--color-accent-500);
    --color-interactive-special-hover: var(--color-accent-600);
    --color-interactive-special-active: var(--color-accent-700);
    --color-border-hairline: var(--color-neutral-800);
    --color-border-divider: var(--color-neutral-700);
    --color-border-control: var(--color-neutral-500);
    --color-border-brand: var(--color-primary-300);
    --color-border-seam: var(--color-primary-300);
    --color-link-on-brand: var(--color-neutral-1000);
    --color-link-on-brand-deep: var(--color-primary-300);
    --color-surface-info: var(--color-info-300);
    --color-surface-vermerk: var(--color-vermerk-300);
    --color-surface-success: var(--color-success-400);
    --color-surface-warning: var(--color-warning-300);
    --color-surface-error: var(--color-error-300);
    --color-surface-notice: var(--color-warning-900);
    --color-text-on-notice: var(--color-warning-100);
    --ton-schatten: var(--ton-tiefe);
    --ton-aura: var(--ton-marke);
    --ton-glasrand: var(--ton-licht);
    --deckung-umgebung: 0.55;
    --deckung-kontakt: 0.40;
    --deckung-kante: 0.10;
    --deckung-glasrand: 0.14;
    --deckung-rauschen: 0.055;
    --anteil-glas: 85%;
    --aura-spitze: 0.2;
    --flaeche-licht: 8%;
    --flaeche-tiefe: 6%;
    --band-tiefe: 40%;
    --shadow-1: 0 1px 1px rgb(var(--ton-schatten) / calc(var(--deckung-kontakt) * 0.55)),
    0 2px 4px -1px rgb(var(--ton-schatten) / calc(var(--deckung-umgebung) * 0.35));
    --shadow-2: 0 1px 1px rgb(var(--ton-schatten) / calc(var(--deckung-kontakt) * 0.6)),
    0 4px 10px -2px rgb(var(--ton-schatten) / calc(var(--deckung-umgebung) * 0.4)),
    0 12px 24px -8px rgb(var(--ton-schatten) / calc(var(--deckung-umgebung) * 0.45));
    --shadow-3: 0 1px 2px rgb(var(--ton-schatten) / calc(var(--deckung-kontakt) * 0.65)),
    0 8px 18px -4px rgb(var(--ton-schatten) / calc(var(--deckung-umgebung) * 0.45)),
    0 28px 52px -14px rgb(var(--ton-schatten) / calc(var(--deckung-umgebung) * 0.6));
    --breakpoint-xs: 344px;
    --breakpoint-nav: 1144px;
    --breakpoint-divi-tablet: 980px;
    --breakpoint-divi-mobil: 767px;
    --container-schmal: 500px;
    --container-mittel: 872px;
    --container-breit: 1256px;
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --kurve: cubic-bezier(0.16, 1, 0.3, 1);
    --kurve-aus: cubic-bezier(0.4, 0, 0.2, 1);
    --kurve-ein: cubic-bezier(0.32, 0.72, 0, 1);
    --dauer-druck: 90ms;
    --dauer-zustand: 180ms;
    --dauer-weg: 260ms;
    --dauer-auftritt: 520ms;
    --verzug-staffel: 70ms;
    --weg-pfeil: 8px;
    --hub-hover: -2px;
    --hub-hover-gross: -4px;
    --skala-druck: 0.985;
    --weg-auftritt: 16px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities;
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./schriften/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./schriften/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./schriften/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./schriften/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  color-scheme: dark;
}
[data-fassung="dunkel"] {
  --color-surface-canvas: var(--color-neutral-1000);
  --color-surface-raised: var(--color-neutral-900);
  --color-surface-sunken: var(--color-neutral-800);
  --color-surface-brand: var(--color-primary-300);
  --color-surface-brand-deep: var(--color-neutral-900);
  --color-surface-inverse: var(--color-primary-300);
  --color-text-primary: var(--color-neutral-50);
  --color-text-muted: var(--color-neutral-300);
  --color-text-accent: var(--color-primary-300);
  --color-text-on-brand: var(--color-neutral-1000);
  --color-text-on-brand-deep: var(--color-neutral-50);
  --color-text-on-interactive: var(--color-neutral-1000);
  --color-text-on-special: var(--color-weiss);
  --color-text-on-inverse: var(--color-neutral-1000);
  --color-text-success: var(--color-success-300);
  --color-text-error: var(--color-error-300);
  --color-interactive: var(--color-primary-300);
  --color-interactive-hover: var(--color-primary-200);
  --color-interactive-active: var(--color-primary-100);
  --color-interactive-disabled: var(--color-neutral-600);
  --color-focus-ring: var(--color-primary-300);
  --color-interactive-special: var(--color-accent-500);
  --color-interactive-special-hover: var(--color-accent-600);
  --color-interactive-special-active: var(--color-accent-700);
  --color-border-hairline: var(--color-neutral-800);
  --color-border-divider: var(--color-neutral-700);
  --color-border-control: var(--color-neutral-500);
  --color-border-brand: var(--color-primary-300);
  --color-border-seam: var(--color-primary-300);
  --color-link-on-brand: var(--color-neutral-1000);
  --color-link-on-brand-deep: var(--color-primary-300);
  --color-surface-info: var(--color-info-300);
  --color-surface-vermerk: var(--color-vermerk-300);
  --color-surface-success: var(--color-success-400);
  --color-surface-warning: var(--color-warning-300);
  --color-surface-error: var(--color-error-300);
  --color-surface-notice: var(--color-warning-900);
  --color-text-on-notice: var(--color-warning-100);
  --ton-schatten: var(--ton-tiefe);
  --ton-aura: var(--ton-marke);
  --ton-glasrand: var(--ton-licht);
  --deckung-umgebung: 0.55;
  --deckung-kontakt: 0.40;
  --deckung-kante: 0.10;
  --deckung-glasrand: 0.14;
  --deckung-rauschen: 0.055;
  --anteil-glas: 85%;
  --aura-spitze: 0.2;
  --flaeche-licht: 8%;
  --flaeche-tiefe: 6%;
  --band-tiefe: 40%;
  color-scheme: dark;
}
[data-fassung="hell"] {
  --color-surface-canvas: var(--color-neutral-50);
  --color-surface-raised: var(--color-weiss);
  --color-surface-sunken: var(--color-neutral-100);
  --color-surface-brand: var(--color-primary-300);
  --color-surface-brand-deep: var(--color-neutral-1000);
  --color-surface-inverse: var(--color-neutral-1000);
  --color-text-primary: var(--color-neutral-1000);
  --color-text-muted: var(--color-neutral-700);
  --color-text-accent: var(--color-info-700);
  --color-text-on-brand: var(--color-neutral-1000);
  --color-text-on-brand-deep: var(--color-weiss);
  --color-text-on-interactive: var(--color-weiss);
  --color-text-on-special: var(--color-weiss);
  --color-text-on-inverse: var(--color-neutral-50);
  --color-text-success: var(--color-success-700);
  --color-text-error: var(--color-error-700);
  --color-interactive: var(--color-neutral-1000);
  --color-interactive-hover: var(--color-neutral-900);
  --color-interactive-active: var(--color-neutral-800);
  --color-interactive-disabled: var(--color-neutral-400);
  --color-focus-ring: var(--color-neutral-1000);
  --color-interactive-special: var(--color-accent-500);
  --color-interactive-special-hover: var(--color-accent-600);
  --color-interactive-special-active: var(--color-accent-700);
  --color-border-hairline: var(--color-neutral-200);
  --color-border-divider: var(--color-neutral-300);
  --color-border-control: var(--color-neutral-500);
  --color-border-brand: var(--color-neutral-1000);
  --color-border-seam: var(--color-neutral-300);
  --color-link-on-brand: var(--color-neutral-1000);
  --color-link-on-brand-deep: var(--color-primary-300);
  --color-surface-info: var(--color-info-400);
  --color-surface-vermerk: var(--color-vermerk-400);
  --color-surface-success: var(--color-success-400);
  --color-surface-warning: var(--color-warning-400);
  --color-surface-error: var(--color-error-400);
  --color-surface-notice: var(--color-warning-100);
  --color-text-on-notice: var(--color-warning-900);
  --ton-schatten: var(--ton-tiefe-hell);
  --ton-aura: var(--ton-marke-tief);
  --ton-glasrand: var(--ton-tiefe-hell);
  --deckung-umgebung: 0.14;
  --deckung-kontakt: 0.10;
  --deckung-kante: 0.85;
  --deckung-glasrand: 0.08;
  --deckung-rauschen: 0.035;
  --anteil-glas: 90%;
  --aura-spitze: 0.2;
  --flaeche-licht: 8%;
  --flaeche-tiefe: 6%;
  --band-tiefe: 40%;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-fassung="dunkel"]) {
    --color-surface-canvas: var(--color-neutral-50);
    --color-surface-raised: var(--color-weiss);
    --color-surface-sunken: var(--color-neutral-100);
    --color-surface-brand: var(--color-primary-300);
    --color-surface-brand-deep: var(--color-neutral-1000);
    --color-surface-inverse: var(--color-neutral-1000);
    --color-text-primary: var(--color-neutral-1000);
    --color-text-muted: var(--color-neutral-700);
    --color-text-accent: var(--color-info-700);
    --color-text-on-brand: var(--color-neutral-1000);
    --color-text-on-brand-deep: var(--color-weiss);
    --color-text-on-interactive: var(--color-weiss);
    --color-text-on-special: var(--color-weiss);
    --color-text-on-inverse: var(--color-neutral-50);
    --color-text-success: var(--color-success-700);
    --color-text-error: var(--color-error-700);
    --color-interactive: var(--color-neutral-1000);
    --color-interactive-hover: var(--color-neutral-900);
    --color-interactive-active: var(--color-neutral-800);
    --color-interactive-disabled: var(--color-neutral-400);
    --color-focus-ring: var(--color-neutral-1000);
    --color-interactive-special: var(--color-accent-500);
    --color-interactive-special-hover: var(--color-accent-600);
    --color-interactive-special-active: var(--color-accent-700);
    --color-border-hairline: var(--color-neutral-200);
    --color-border-divider: var(--color-neutral-300);
    --color-border-control: var(--color-neutral-500);
    --color-border-brand: var(--color-neutral-1000);
    --color-border-seam: var(--color-neutral-300);
    --color-link-on-brand: var(--color-neutral-1000);
    --color-link-on-brand-deep: var(--color-primary-300);
    --color-surface-info: var(--color-info-400);
    --color-surface-vermerk: var(--color-vermerk-400);
    --color-surface-success: var(--color-success-400);
    --color-surface-warning: var(--color-warning-400);
    --color-surface-error: var(--color-error-400);
    --color-surface-notice: var(--color-warning-100);
    --color-text-on-notice: var(--color-warning-900);
    --ton-schatten: var(--ton-tiefe-hell);
    --ton-aura: var(--ton-marke-tief);
    --ton-glasrand: var(--ton-tiefe-hell);
    --deckung-umgebung: 0.14;
    --deckung-kontakt: 0.10;
    --deckung-kante: 0.85;
    --deckung-glasrand: 0.08;
    --deckung-rauschen: 0.035;
    --anteil-glas: 90%;
    --aura-spitze: 0.2;
    --flaeche-licht: 8%;
    --flaeche-tiefe: 6%;
    --band-tiefe: 40%;
    color-scheme: light;
  }
}
@layer components {
  :root {
    --kante-licht: inset 0 1px 0 rgb(var(--ton-licht) / var(--deckung-kante));
    --kante-licht-rundum: inset 0 1px 0 rgb(var(--ton-licht) / var(--deckung-kante)),
      inset 0 0 0 1px rgb(var(--ton-licht) / calc(var(--deckung-kante) * 0.25));
    --glas-grund: color-mix(in srgb, #272d34 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --glas-grund: color-mix(in srgb, var(--color-surface-raised) var(--anteil-glas), transparent);
    }
    --glas-grund-kopf: color-mix(in srgb, #272d34 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --glas-grund-kopf: color-mix(in srgb, var(--color-surface-canvas) var(--anteil-glas), transparent);
    }
    --glas-unschaerfe: blur(20px) saturate(150%);
    --glas-rand: rgb(var(--ton-glasrand) / var(--deckung-glasrand));
    --glanz-oben: linear-gradient(180deg,
      rgb(var(--ton-licht) / calc(var(--deckung-kante) * 1.2)) 0%,
      rgb(var(--ton-licht) / calc(var(--deckung-kante) * 0.25)) 40%,
      transparent 68%);
    --aura-weich: 0 10px 32px -10px rgb(var(--ton-aura) / 0.3);
    --aura-ring: 0 0 0 1px rgb(var(--ton-aura) / 0.35),
      0 8px 28px -6px rgb(var(--ton-aura) / 0.4);
    --aura-feld: radial-gradient(60% 70% at 50% 0%,
      rgb(var(--ton-aura) / var(--aura-spitze)) 0%,
      rgb(var(--ton-aura) / calc(var(--aura-spitze) * 0.3)) 45%,
      transparent 72%);
    --flaeche-verlauf: linear-gradient(177deg,
      color-mix(in srgb, #272d34 calc(100% - 8%), rgb(255 255 255)) 0%,
      var(--color-surface-raised) 58%,
      color-mix(in srgb, #272d34 calc(100% - 6%), #272d34) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --flaeche-verlauf: linear-gradient(177deg,
      color-mix(in srgb, var(--color-surface-raised) calc(100% - var(--flaeche-licht)), rgb(var(--ton-licht))) 0%,
      var(--color-surface-raised) 58%,
      color-mix(in srgb, var(--color-surface-raised) calc(100% - var(--flaeche-tiefe)), var(--color-surface-canvas)) 100%);
    }
    --band-verlauf: linear-gradient(180deg,
      var(--color-surface-canvas) 0%,
      color-mix(in srgb, #272d34 calc(100% - 40%), #272d34) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --band-verlauf: linear-gradient(180deg,
      var(--color-surface-canvas) 0%,
      color-mix(in srgb, var(--color-surface-canvas) calc(100% - var(--band-tiefe)), var(--color-surface-raised)) 100%);
    }
    --glut: radial-gradient(55% 55% at 40% 40%, rgb(var(--ton-aura) / 0.45) 0%, transparent 70%),
      radial-gradient(45% 45% at 85% 90%, rgb(var(--ton-aura) / 0.25) 0%, transparent 70%);
    --rand-verlauf: linear-gradient(160deg,
      rgb(var(--ton-glasrand) / calc(var(--deckung-glasrand) * 3.2)) 0%,
      rgb(var(--ton-glasrand) / calc(var(--deckung-glasrand) * 1.1)) 38%,
      rgb(var(--ton-glasrand) / calc(var(--deckung-glasrand) * 0.35)) 100%);
    --rand-verlauf-marke: linear-gradient(160deg,
      rgb(var(--ton-aura) / 0.55) 0%,
      rgb(var(--ton-aura) / 0.12) 45%,
      rgb(var(--ton-glasrand) / calc(var(--deckung-glasrand) * 0.4)) 100%);
    --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
  }
  .kante {
    box-shadow: var(--kante-licht);
  }
  .kante-rundum {
    box-shadow: var(--kante-licht-rundum);
  }
  .glas {
    background-color: var(--glas-grund);
    backdrop-filter: var(--glas-unschaerfe);
    border: 1px solid var(--glas-rand);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .glas {
      background-color: var(--color-surface-raised);
    }
  }
  .flaeche {
    background-image: var(--flaeche-verlauf);
    box-shadow: var(--kante-licht);
  }
  .aura-feld {
    background-image: var(--aura-feld);
    background-repeat: no-repeat;
  }
  .aura {
    box-shadow: var(--aura-weich);
  }
  .aura-ring {
    box-shadow: var(--aura-ring);
  }
  .rand-verlauf {
    border: 1px solid transparent;
    background-image: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)), var(--rand-verlauf);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  .rand-verlauf-marke {
    background-image: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)), var(--rand-verlauf-marke);
  }
  .rauschen {
    position: relative;
    isolation: isolate;
  }
  .rauschen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--rauschen);
    opacity: var(--deckung-rauschen);
    pointer-events: none;
    border-radius: inherit;
  }
  @keyframes auftritt {
    from {
      opacity: 0;
      transform: translateY(var(--weg-auftritt));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  [data-auftritt="da"] > * {
    animation: auftritt var(--dauer-auftritt) var(--kurve-ein) both;
  }
  [data-auftritt="da"] > :nth-child(2) {
    animation-delay: calc(var(--verzug-staffel) * 1);
  }
  [data-auftritt="da"] > :nth-child(3) {
    animation-delay: calc(var(--verzug-staffel) * 2);
  }
  [data-auftritt="da"] > :nth-child(4) {
    animation-delay: calc(var(--verzug-staffel) * 3);
  }
  [data-auftritt="da"] > :nth-child(5) {
    animation-delay: calc(var(--verzug-staffel) * 4);
  }
  [data-auftritt="da"] > :nth-child(6) {
    animation-delay: calc(var(--verzug-staffel) * 5);
  }
  [data-auftritt="da"] > :nth-child(7) {
    animation-delay: calc(var(--verzug-staffel) * 6);
  }
  [data-auftritt="da"] > :nth-child(n + 8) {
    animation-delay: calc(var(--verzug-staffel) * 7);
  }
}
@layer base {
  html {
    background-color: var(--color-surface-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--color-surface-canvas);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-text-primary);
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: var(--color-interactive);
  }
  .auf-dunkel a {
    color: var(--color-link-on-brand-deep);
  }
  .auf-marke a {
    color: var(--color-link-on-brand);
  }
  :focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer components {
  .bahn {
    width: 100%;
    max-width: var(--container-breit);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
  }
  .bahn-mittel {
    max-width: var(--container-mittel);
  }
  .bahn-schmal {
    max-width: var(--container-schmal);
  }
  .sprungmarke {
    position: absolute;
    left: calc(var(--spacing) * 4);
    top: calc(var(--spacing) * 4);
    z-index: 60;
    transform: translateY(-200%);
    background-color: var(--color-surface-raised);
    color: var(--color-interactive);
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    font-weight: 700;
  }
  .sprungmarke:focus-visible {
    transform: translateY(0);
  }
  .kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--glas-grund-kopf);
    backdrop-filter: var(--glas-unschaerfe);
    border-bottom: 1px solid var(--color-border-hairline);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .kopf {
      background-color: var(--color-surface-canvas);
    }
  }
  .kopf-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
    min-height: calc(var(--spacing) * 18);
  }
  .wortmarke {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    text-decoration: none;
  }
  .wortmarke b {
    color: var(--color-text-accent);
    font-weight: 700;
  }
  .rubrik {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: var(--color-text-primary);
    border-bottom: 2px solid currentColor;
    padding-bottom: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 9);
  }
  .auf-dunkel .rubrik {
    color: var(--color-text-on-brand-deep);
  }
  .abschnitt {
    padding-block: calc(var(--spacing) * 20);
  }
  .titel-gross {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 calc(var(--spacing) * 6);
  }
  .titel-gross em {
    font-style: normal;
    color: var(--color-interactive);
  }
  .titel-mittel {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 calc(var(--spacing) * 4);
  }
  .titel-klein {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 calc(var(--spacing) * 2);
  }
  .vorspann {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 calc(var(--spacing) * 8);
    max-width: 62ch;
  }
  .kennzahlen > div {
    display: grid;
    grid-template-rows: auto auto;
    gap: calc(var(--spacing) * 2);
    align-content: start;
  }
  .kennzahlen dt {
    grid-row: 2;
  }
  .kennzahlen dd {
    grid-row: 1;
    margin: 0;
  }
  .navliste {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .fliesstext {
    line-height: 1.65;
    color: var(--color-text-primary);
    max-width: 68ch;
  }
  .gedaempft {
    color: var(--color-text-muted);
  }
  .metazeile {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 calc(var(--spacing) * 2);
  }
  .auf-dunkel {
    background-color: var(--color-surface-brand-deep);
    color: var(--color-text-on-brand-deep);
  }
  .auf-dunkel h2, .auf-dunkel h3, .auf-dunkel .titel-mittel, .auf-dunkel .titel-klein {
    color: var(--color-text-on-brand-deep);
  }
  .auf-dunkel .fliesstext, .auf-dunkel .vorspann {
    color: var(--color-text-on-brand-deep);
  }
  .auf-marke {
    background-color: var(--color-surface-brand);
    color: var(--color-text-on-brand);
  }
  .auf-marke h2, .auf-marke h3, .auf-marke .titel-mittel, .auf-marke .titel-klein {
    color: var(--color-text-on-brand);
  }
  .auf-marke .rubrik {
    color: var(--color-text-on-brand);
  }
  .auf-marke .fliesstext, .auf-marke .vorspann, .auf-marke .metazeile {
    color: var(--color-text-on-brand);
  }
  .vertrauensband {
    padding-block: calc(var(--spacing) * 14);
  }
  .kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(var(--spacing) * 8);
    margin: 0;
  }
  .kennzahl-wert {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-link-on-brand-deep);
    margin: 0 0 calc(var(--spacing) * 2);
  }
  .kennzahl-text {
    margin: 0;
    color: var(--color-text-on-brand-deep);
  }
  .fuss {
    padding-block: calc(var(--spacing) * 16) calc(var(--spacing) * 10);
    background-color: var(--color-surface-canvas);
    color: var(--color-text-primary);
  }
  .fuss-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing) * 10);
  }
  .fuss-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: calc(var(--spacing) * 2);
  }
  .fuss-schluss {
    margin-top: calc(var(--spacing) * 12);
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--color-border-divider);
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }
  .rechtliches {
    margin: auto;
    width: min(100% - calc(var(--spacing) * 8), 44rem);
    max-height: calc(100vh - calc(var(--spacing) * 16));
    padding: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-3);
  }
  .rechtliches::backdrop {
    background-color: rgb(var(--ton-schatten) / 0.6);
  }
  .rechtliches:target {
    display: block;
    margin-block: calc(var(--spacing) * 8);
  }
  .rechtliches-innen {
    max-height: inherit;
    padding: calc(var(--spacing) * 7);
    overflow: auto;
  }
  .rechtliches-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 2);
  }
  .rechtliches-kopf .titel-mittel {
    margin: 0;
  }
  .rechtliches .titel-klein {
    margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 2);
  }
  .rechtliches address {
    font-style: normal;
  }
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    min-height: calc(var(--spacing) * 12);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--color-interactive);
    color: var(--color-text-on-interactive);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve), box-shadow var(--dauer-zustand) var(--kurve), transform var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .knopf:hover {
      background-color: var(--color-interactive-hover);
      box-shadow: var(--aura-weich);
      transform: translateY(var(--hub-hover));
    }
  }
  .knopf:active {
    background-color: var(--color-interactive-active);
    transform: scale(var(--skala-druck));
    transition-duration: var(--dauer-druck);
  }
  .knopf:disabled, .knopf[aria-disabled="true"] {
    background-color: var(--color-interactive-disabled);
    color: var(--color-text-on-interactive);
    cursor: not-allowed;
  }
  .knopf-zweit {
    background-color: transparent;
    border-color: var(--color-border-control);
    color: var(--color-interactive);
  }
  @media (hover: hover) {
    .knopf-zweit:hover {
      background-color: var(--color-surface-sunken);
      border-color: var(--color-border-brand);
      color: var(--color-interactive-hover);
    }
  }
  .knopf-zweit:active {
    background-color: var(--color-surface-sunken);
    border-color: var(--color-interactive-active);
    color: var(--color-interactive-active);
  }
  .knopf-zweit:disabled, .knopf-zweit[aria-disabled="true"] {
    background-color: transparent;
    border-color: var(--color-border-hairline);
    color: var(--color-interactive-disabled);
  }
  .knopf-sonder {
    background-color: var(--color-interactive-special);
    color: var(--color-text-on-special);
  }
  @media (hover: hover) {
    .knopf-sonder:hover {
      background-color: var(--color-interactive-special-hover);
    }
  }
  .knopf-sonder:active {
    background-color: var(--color-interactive-special-active);
  }
  .knopf-sonder:disabled, .knopf-sonder[aria-disabled="true"] {
    background-color: var(--color-interactive-disabled);
    color: var(--color-text-on-interactive);
  }
  :root:not([data-fassung="dunkel"]) .auf-dunkel .knopf, :root:not([data-fassung="dunkel"]) .auf-marke .knopf {
    background-color: var(--color-surface-raised);
    color: var(--color-interactive);
  }
  @media (hover: hover) {
    :root:not([data-fassung="dunkel"]) .auf-dunkel .knopf:hover, :root:not([data-fassung="dunkel"]) .auf-marke .knopf:hover {
      background-color: var(--color-surface-sunken);
      color: var(--color-interactive-hover);
    }
  }
  :root:not([data-fassung="dunkel"]) .auf-marke .knopf-sonder {
    background-color: var(--color-interactive-special);
    color: var(--color-text-on-special);
  }
  @media (hover: hover) {
    :root:not([data-fassung="dunkel"]) .auf-marke .knopf-sonder:hover {
      background-color: var(--color-interactive-special-hover);
      color: var(--color-text-on-special);
    }
  }
  .auf-dunkel :focus-visible {
    outline-color: var(--color-link-on-brand-deep);
  }
  .auf-marke :focus-visible {
    outline-color: var(--color-link-on-brand);
  }
  .textlink {
    color: var(--color-interactive);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dauer-zustand) var(--kurve), text-decoration-thickness var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .textlink:hover {
      color: var(--color-interactive-hover);
      text-decoration-thickness: 2px;
    }
  }
  .textlink:active {
    color: var(--color-interactive-active);
  }
  .auf-dunkel .textlink {
    color: var(--color-link-on-brand-deep);
  }
  .auf-marke .textlink {
    color: var(--color-link-on-brand);
  }
  .pfeillink {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-interactive);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--dauer-zustand) var(--kurve);
  }
  .pfeillink::before {
    content: "";
    display: block;
    width: calc(var(--spacing) * 6);
    height: 2px;
    background-color: currentColor;
    transition: width 200ms ease;
  }
  .pfeillink::after {
    content: "\2192";
    display: inline-block;
    transition: transform 200ms ease;
  }
  @media (hover: hover) {
    .pfeillink:hover {
      color: var(--color-interactive-hover);
    }
    .pfeillink:hover::before {
      width: calc(var(--spacing) * 6 + var(--weg-pfeil));
    }
    .pfeillink:hover::after {
      transform: translateX(var(--weg-pfeil));
    }
  }
  .pfeillink:active {
    color: var(--color-interactive-active);
  }
  .auf-dunkel .pfeillink {
    color: var(--color-link-on-brand-deep);
  }
  .auf-marke .pfeillink {
    color: var(--color-link-on-brand);
  }
  @media (prefers-reduced-motion: reduce) {
    .pfeillink::before, .pfeillink::after {
      transition: none;
    }
    .pfeillink:hover::before {
      width: calc(var(--spacing) * 6);
    }
    .pfeillink:hover::after {
      transform: none;
    }
  }
  .navliste a {
    display: inline-block;
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .navliste a:hover {
      color: var(--color-interactive-hover);
      border-bottom-color: var(--color-border-hairline);
    }
  }
  .navliste a:active {
    color: var(--color-interactive-active);
  }
  .navliste a[aria-current="page"] {
    color: var(--color-interactive);
    border-bottom-color: var(--color-border-brand);
  }
  .kopf-menue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
    flex-basis: 100%;
    padding-bottom: calc(var(--spacing) * 4);
  }
  @media (max-width: 1143px) {
    .kopf-menue {
      flex-direction: column;
      align-items: stretch;
    }
    .navliste {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .navliste a {
      display: block;
      padding-block: calc(var(--spacing) * 3);
      border-bottom-color: var(--color-border-hairline);
    }
    .navliste a[aria-current="page"] {
      border-bottom-color: var(--color-border-brand);
    }
    .kopf-cta {
      align-self: start;
      margin-top: calc(var(--spacing) * 3);
    }
    :root[data-klappnav="an"] .kopf .kopf-menue {
      display: none;
    }
    :root[data-klappnav="an"] .kopf[data-offen] .kopf-menue {
      display: flex;
    }
  }
  .klapp-knopf {
    flex: 0 0 auto;
  }
  .klapp-knopf svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    stroke: currentColor;
  }
  .klapp-knopf[aria-expanded="false"] .klapp-zeichen-zu {
    display: none;
  }
  .klapp-knopf[aria-expanded="true"] .klapp-zeichen-auf {
    display: none;
  }
  @media (min-width: 1144px) {
    .kopf-menue {
      display: contents;
    }
    .klapp-knopf {
      display: none;
    }
  }
  .kopf-cta {
    background-color: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
    border-color: transparent;
  }
  @media (hover: hover) {
    .kopf-cta:hover {
      background-color: var(--color-interactive-active);
    }
  }
  .kopf-cta:active {
    background-color: var(--color-interactive-hover);
  }
  .suchfeld {
    display: flex;
    width: 100%;
    max-width: var(--container-mittel);
  }
  .suchfeld input {
    flex: 1 1 auto;
    min-height: calc(var(--spacing) * 12);
    padding-inline: calc(var(--spacing) * 4);
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-control);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font: inherit;
  }
  .suchfeld input::placeholder {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 22px;
  }
  @media (hover: hover) {
    .suchfeld input:hover {
      border-color: var(--color-border-brand);
    }
  }
  .suchfeld input:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-interactive-disabled);
    border-color: var(--color-border-hairline);
    cursor: not-allowed;
  }
  .suchfeld button svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .suchfeld button {
    flex: 0 0 auto;
    width: calc(var(--spacing) * 12);
    min-height: calc(var(--spacing) * 12);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .chipreihe {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
    list-style: none;
    margin: 0 0 calc(var(--spacing) * 10);
    padding: 0;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--spacing) * 10);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve), color var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .chip:hover {
      border-color: var(--color-border-brand);
      color: var(--color-interactive-hover);
    }
  }
  .chip:active {
    background-color: var(--color-surface-sunken);
  }
  .chip[aria-pressed="true"] {
    background-color: var(--color-surface-inverse);
    border-color: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }
  @media (hover: hover) {
    .chip[aria-pressed="true"]:hover {
      background-color: var(--color-interactive-active);
      border-color: var(--color-interactive-active);
      color: var(--color-text-on-interactive);
    }
  }
  .chip:disabled, .chip[aria-disabled="true"] {
    background-color: var(--color-surface-sunken);
    border-color: var(--color-border-hairline);
    color: var(--color-interactive-disabled);
    cursor: not-allowed;
  }
  .akkordeon {
    border-top: 1px solid var(--color-border-control);
  }
  .akkordeon > details {
    border-bottom: 1px solid var(--color-border-control);
  }
  .akkordeon summary {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 10);
    min-height: calc(var(--spacing) * 20);
    padding-block: calc(var(--spacing) * 4);
    cursor: pointer;
    list-style: none;
    transition: color var(--dauer-zustand) var(--kurve);
  }
  .akkordeon summary::-webkit-details-marker {
    display: none;
  }
  @media (hover: hover) {
    .akkordeon summary:hover {
      color: var(--color-interactive-hover);
    }
  }
  .akkordeon summary:active {
    color: var(--color-interactive-active);
  }
  .akkordeon summary .titel-klein {
    margin: 0;
    flex: 1 1 auto;
    color: inherit;
  }
  .akkordeon summary::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-interactive);
  }
  .akkordeon details[open] summary::after {
    content: "−";
  }
  .akkordeon .inhalt {
    padding-bottom: calc(var(--spacing) * 6);
    padding-left: calc(var(--spacing) * 22);
  }
  .piktogramm {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-brand);
    box-shadow: var(--kante-licht);
    color: var(--color-text-on-brand);
    font-family: var(--font-display);
    font-weight: 700;
  }
  .piktogramm svg {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    stroke: currentColor;
  }
  .kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: calc(var(--spacing) * 6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .kachel {
    display: block;
    height: 100%;
    padding: calc(var(--spacing) * 6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1), var(--kante-licht);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: box-shadow var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve), transform var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .kachel:hover {
      border-color: var(--color-border-brand);
      box-shadow: var(--shadow-2), var(--aura-weich), var(--kante-licht);
      transform: translateY(var(--hub-hover-gross));
    }
  }
  .kachel:active {
    box-shadow: var(--shadow-1), var(--kante-licht);
    transform: translateY(0) scale(var(--skala-druck));
    transition-duration: var(--dauer-druck);
  }
  .kachel .piktogramm {
    margin-bottom: calc(var(--spacing) * 4);
    transition: box-shadow var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .kachel:hover .piktogramm {
      box-shadow: var(--aura-ring);
    }
  }
  .abzeichen {
    display: inline-block;
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--color-surface-vermerk);
    color: var(--color-text-on-brand);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .abzeichen-hinweis {
    background-color: var(--color-surface-info);
  }
  .abzeichen-erfolg {
    background-color: var(--color-surface-success);
  }
  .abzeichen-warnung {
    background-color: var(--color-surface-warning);
  }
  .abzeichen-fehler {
    background-color: var(--color-surface-error);
  }
  .abzeichen-rubrik {
    padding: calc(var(--spacing) * 0.5 - 1px) calc(var(--spacing) * 2 - 1px);
    border: 1px solid var(--color-border-control);
    background-color: transparent;
    color: var(--color-text-muted);
    font-weight: 500;
  }
  .reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 8);
  }
  .nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .tabellenrahmen {
    overflow-x: auto;
  }
  .tabellenrahmen:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
  .matrix {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9375rem;
    margin-bottom: calc(var(--spacing) * 6);
  }
  .matrix caption {
    text-align: left;
    color: var(--color-text-muted);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .matrix th, .matrix td {
    border-bottom: 1px solid var(--color-border-hairline);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(var(--spacing) * 2) 0;
    vertical-align: top;
  }
  .matrix thead th {
    border-bottom-color: var(--color-border-divider);
    font-family: var(--font-display);
  }
  .matrix tbody th {
    font-weight: 700;
  }
  code {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.9em;
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.35em;
  }
  .auf-dunkel code {
    background-color: color-mix(in srgb, #fbfcfc 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-text-on-brand-deep) 14%, transparent);
    }
    color: inherit;
  }
  .auf-marke code {
    background-color: color-mix(in srgb, #272d34 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-text-on-brand) 14%, transparent);
    }
    color: inherit;
  }
  .kachel > * {
    display: block;
  }
  .kachel .fliesstext {
    margin: 0;
  }
  .beitragsraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: calc(var(--spacing) * 10);
    row-gap: calc(var(--spacing) * 14);
    margin-top: calc(var(--spacing) * 12);
  }
  .beitrag > p:last-child {
    margin-bottom: 0;
  }
  .abstand-oben {
    margin-top: calc(var(--spacing) * 8);
  }
  .abstand-oben-gross {
    margin-top: calc(var(--spacing) * 20);
  }
  .familie {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .feldreihe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: calc(var(--spacing) * 3);
    list-style: none;
    margin: calc(var(--spacing) * 4) 0 0;
    padding: 0;
  }
  .feld {
    display: grid;
    gap: calc(var(--spacing) * 1);
  }
  .feld-flaeche {
    display: block;
    height: calc(var(--spacing) * 14);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-sm);
  }
  .feld-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
  }
  .feld-wert {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.8125rem;
  }
  .feld-kontrast {
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }
  .tupfen {
    display: inline-block;
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    border: 1px solid var(--color-border-hairline);
    border-radius: 2px;
    vertical-align: -1px;
  }
  .schriftprobe > * + .probe-marke {
    margin-top: calc(var(--spacing) * 10);
  }
  .probe-marke {
    font-size: 0.75rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 calc(var(--spacing) * 2);
  }
  .radiusprobe {
    display: grid;
    place-items: center;
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 16);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-control);
    font-size: 0.875rem;
  }
  .radius-klein {
    border-radius: var(--radius-sm);
  }
  .radius-mittel {
    border-radius: var(--radius-md);
  }
  .schattenreihe {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 10);
    list-style: none;
    margin: calc(var(--spacing) * 6) 0 0;
    padding: 0;
  }
  .schattenreihe li {
    display: grid;
    gap: calc(var(--spacing) * 3);
    justify-items: start;
  }
  .schattenreihe .probe-marke {
    margin: 0;
  }
  .schattenprobe {
    display: block;
    width: calc(var(--spacing) * 32);
    height: calc(var(--spacing) * 20);
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-md);
  }
  .schattenprobe.stufe-1 {
    box-shadow: var(--shadow-1);
  }
  .schattenprobe.stufe-2 {
    box-shadow: var(--shadow-2);
  }
  .schattenprobe.stufe-3 {
    box-shadow: var(--shadow-3);
  }
  .logoraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: calc(var(--spacing) * 4);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .logokachel {
    display: grid;
    place-items: center;
    min-height: calc(var(--spacing) * 28);
    padding: calc(var(--spacing) * 4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
  .beitragsraster-gross {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: calc(var(--spacing) * 10);
    margin-top: calc(var(--spacing) * 8);
  }
  .bildflaeche {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    margin-bottom: calc(var(--spacing) * 4);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
  .hero-raster {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: calc(var(--spacing) * 12);
    align-items: center;
  }
  @media (max-width: 1143px) {
    .hero-raster {
      grid-template-columns: 1fr;
    }
  }
  .hero-grafik {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    margin: 0;
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
  .zweispaltig {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: calc(var(--spacing) * 10);
    align-items: start;
  }
  .bildfeld {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-surface-brand-deep);
    border-radius: var(--radius-md);
  }
  .bildfeld > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: screen;
  }
  .bildfeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-surface-brand);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  .bildfeld:not(:has(img))::after {
    display: none;
  }
  .bildfeld-mint {
    background-color: var(--color-surface-brand);
  }
  .bildfeld-marke {
    position: absolute;
    inset-inline: calc(var(--spacing) * 4);
    bottom: calc(var(--spacing) * 4);
    z-index: 1;
    margin: 0;
    color: var(--color-text-on-brand-deep);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .bildfeld-mint .bildfeld-marke {
    color: var(--color-text-on-brand);
  }
  .block-mint, .block-tief {
    display: grid;
    align-content: end;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    color: var(--color-text-on-brand);
  }
  .block-mint {
    background-color: var(--color-surface-brand);
  }
  .block-tief {
    background-color: var(--color-surface-brand-deep);
    color: var(--color-text-on-brand-deep);
  }
  .block-mint h2, .block-mint h3, .block-mint p {
    color: var(--color-text-on-brand);
  }
  .block-tief h2, .block-tief h3, .block-tief p {
    color: var(--color-text-on-brand-deep);
  }
  .schaubild {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .schaubild > * {
    grid-column: 1 / -1;
    min-height: calc(var(--spacing) * 36);
    max-height: calc(var(--spacing) * 88);
  }
  @media (min-width: 784px) {
    .schaubild > :nth-child(1) {
      grid-column: 1 / span 7;
      aspect-ratio: 16 / 10;
    }
    .schaubild > :nth-child(2) {
      grid-column: 8 / span 5;
      aspect-ratio: 4 / 5;
      align-self: end;
    }
    .schaubild > :nth-child(3) {
      grid-column: 2 / span 4;
      aspect-ratio: 1;
    }
    .schaubild > :nth-child(4) {
      grid-column: 6 / span 7;
      aspect-ratio: 16 / 9;
    }
  }
  .karte-geteilt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  @media (min-width: 784px) {
    .karte-geteilt {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
  }
  .karte-geteilt > .haelfte-farbe {
    display: grid;
    align-content: end;
    gap: calc(var(--spacing) * 2);
    min-height: calc(var(--spacing) * 44);
    padding: calc(var(--spacing) * 7);
    background-color: var(--color-surface-brand);
    color: var(--color-text-on-brand);
  }
  .karte-geteilt-tief > .haelfte-farbe {
    background-color: var(--color-surface-brand-deep);
    color: var(--color-text-on-brand-deep);
  }
  .karte-geteilt > .haelfte-farbe > * {
    color: var(--color-text-on-brand);
    margin: 0;
  }
  .karte-geteilt-tief > .haelfte-farbe > * {
    color: var(--color-text-on-brand-deep);
  }
  .karte-geteilt > .haelfte-text {
    display: grid;
    align-content: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 7);
    background-color: var(--color-surface-raised);
  }
  .karte-geteilt > .haelfte-text > * {
    margin: 0;
  }
  @media (min-width: 1144px) {
    .kopf-innen {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }
    .kopf-innen > .wortmarke {
      justify-self: start;
    }
    .kopf-innen nav {
      justify-self: center;
    }
    .kopf-innen .kopf-cta {
      justify-self: end;
    }
  }
  .sf-zahl-gross {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .beitragsbild {
    aspect-ratio: 16 / 9;
    margin-bottom: calc(var(--spacing) * 4);
  }
  .knopf-gross {
    min-height: calc(var(--spacing) * 14);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
    font-size: 1.0625rem;
  }
  .knopf [data-icon] {
    display: inline-flex;
  }
  .knopf [data-icon] svg {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
  }
  .buehne {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: calc(var(--spacing) * 16) calc(var(--spacing) * 22);
    background-image: var(--aura-feld);
    background-repeat: no-repeat;
  }
  .buehne-raster {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "titel bild" "rest  bild";
    align-content: center;
    gap: 0 calc(var(--spacing) * 14);
  }
  .buehne-titel {
    grid-area: titel;
    align-self: end;
  }
  .buehne-bildseite {
    grid-area: bild;
    align-self: center;
  }
  .buehne-rest {
    grid-area: rest;
    align-self: start;
  }
  @media (max-width: 1143px) {
    .buehne-raster {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "titel" "bild" "rest";
      gap: calc(var(--spacing) * 8);
    }
    .buehne-titel, .buehne-bildseite, .buehne-rest {
      align-self: stretch;
    }
  }
  .buehne-vorzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 6);
  }
  .buehne .titel-gross {
    font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
    letter-spacing: -0.02em;
  }
  .buehne .vorspann {
    font-size: 1.25rem;
  }
  .buehne .reihe {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .buehne-siegel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
    margin: calc(var(--spacing) * 5) 0 0;
  }
  .buehne-siegel span {
    white-space: nowrap;
  }
  .buehne-marke {
    position: absolute;
    left: calc(var(--spacing) * -3);
    bottom: calc(var(--spacing) * 16);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: var(--shadow-2), var(--aura-weich);
    animation: schweben 7s ease-in-out infinite;
  }
  .buehne-marke svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    stroke: currentColor;
    color: var(--color-text-accent);
  }
  @keyframes schweben {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(calc(var(--spacing) * -2));
    }
  }
  @media (max-width: 1143px) {
    .buehne-marke {
      left: calc(var(--spacing) * 2);
      bottom: calc(var(--spacing) * 14);
    }
  }
  .buehne-schlicht {
    padding-block: calc(var(--spacing) * 16) calc(var(--spacing) * 14);
  }
  .buehne-bild {
    position: relative;
    isolation: isolate;
    margin: 0;
  }
  .buehne-bild::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    background-image: var(--glut);
    filter: blur(24px);
    pointer-events: none;
  }
  .buehne-bild img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--glas-rand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3), var(--aura-ring);
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform var(--dauer-auftritt) var(--kurve);
  }
  @media (hover: hover) {
    .buehne-bild:hover img {
      transform: perspective(1400px) rotateY(0) rotateX(0);
    }
  }
  .buehne-illustration {
    position: relative;
    margin: 0;
    padding: calc(var(--spacing) * 4);
  }
  .buehne-illustration img {
    display: block;
    width: 100%;
    height: auto;
  }
  .siegel-marken {
    position: absolute;
    left: calc(var(--spacing) * -3);
    bottom: calc(var(--spacing) * 6);
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: calc(var(--spacing) * 2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .siegel-marken li {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--color-interactive-special);
    color: var(--color-text-on-special);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow-2);
  }
  .siegel-marken li:nth-child(2) {
    margin-left: calc(var(--spacing) * 7);
  }
  .siegel-marken li:nth-child(3) {
    margin-left: calc(var(--spacing) * 14);
  }
  @media (max-width: 767px) {
    .siegel-marken {
      position: static;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--spacing) * 4);
    }
    .siegel-marken li:nth-child(2), .siegel-marken li:nth-child(3) {
      margin-left: 0;
    }
  }
  .kachelraster-drei {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  }
  .band {
    background-image: var(--band-verlauf);
    border-block: 1px solid var(--color-border-hairline);
    box-shadow: var(--kante-licht);
  }
  .zielgruppen {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .zielgruppen-chips {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .zielgruppen-chip {
    position: relative;
    gap: calc(var(--spacing) * 1.5);
    min-height: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    border-color: var(--color-border-hairline);
    border-radius: var(--radius-pill, 999px);
    background-color: transparent;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color var(--dauer-zustand) var(--kurve), color var(--dauer-zustand) var(--kurve);
  }
  .zielgruppen-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .zielgruppen-chip svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    stroke: currentColor;
  }
  @media (hover: hover) {
    .zielgruppen-chip:hover {
      background-color: transparent;
      border-color: var(--color-border-brand);
    }
  }
  .zielgruppen-chip:active {
    background-color: transparent;
  }
  .zielgruppen-chip:has(input:checked) {
    background-color: transparent;
    border-color: var(--color-border-brand);
    color: var(--color-text-accent);
  }
  .zielgruppen-chip:has(input:focus-visible) {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
  .zielgruppen-texte {
    min-height: calc(var(--spacing) * 14);
  }
  .zielgruppen-texte p {
    display: none;
    max-width: 60ch;
    margin: 0;
    font-size: 1.125rem;
    animation: auftritt var(--dauer-auftritt) var(--kurve) both;
  }
  .zielgruppen:has(input[value="verband"]:checked) [data-zielgruppe="verband"], .zielgruppen:has(input[value="initiative"]:checked) [data-zielgruppe="initiative"], .zielgruppen:has(input[value="foerderung"]:checked) [data-zielgruppe="foerderung"], .zielgruppen:has(input[value="betrieb"]:checked) [data-zielgruppe="betrieb"], .zielgruppen:has(input[value="gruendung"]:checked) [data-zielgruppe="gruendung"], .zielgruppen:has(input[value="bildung"]:checked) [data-zielgruppe="bildung"] {
    display: block;
  }
  @supports not selector(:has(*)) {
    .zielgruppen-texte p {
      display: block;
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .kartenraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: calc(var(--spacing) * 6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .karte {
    padding: calc(var(--spacing) * 7);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1), var(--kante-licht);
  }
  .karte .piktogramm {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .karte .fliesstext {
    margin: 0;
  }
  .vergleich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: calc(var(--spacing) * 6);
  }
  .vergleich-seite {
    padding: calc(var(--spacing) * 7);
    border-radius: var(--radius-md);
  }
  .vergleich-heute {
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-hairline);
    color: var(--color-text-muted);
  }
  .vergleich-heute .titel-klein {
    color: var(--color-text-muted);
  }
  .vergleich-kitti {
    box-shadow: var(--shadow-2), var(--kante-licht);
  }
  .merkliste {
    display: grid;
    gap: calc(var(--spacing) * 3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .merkliste li {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    line-height: 1.5;
  }
  .merkliste li::before {
    content: "\2014";
    flex: 0 0 auto;
    color: var(--color-text-muted);
  }
  .merkliste-haken li::before {
    content: "\2713";
    color: var(--color-text-accent);
    font-weight: 700;
  }
  .akkordeon-schlicht .inhalt {
    padding-left: 0;
  }
  .frage-antwort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: calc(var(--spacing) * 4) calc(var(--spacing) * 12);
    padding-block: calc(var(--spacing) * 10);
    border-top: 1px solid var(--color-border-hairline);
  }
  .frage-antwort:first-of-type {
    padding-top: 0;
    border-top: 0;
  }
  .frage-antwort .titel-klein {
    margin: 0;
  }
  .frage-antwort .fliesstext {
    margin: 0;
  }
  .frage-antwort .fliesstext + .fliesstext {
    margin-top: calc(var(--spacing) * 4);
  }
  @media (max-width: 719px) {
    .frage-antwort {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .schritte {
    display: grid;
    gap: calc(var(--spacing) * 8);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .schritte li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--spacing) * 5);
    align-items: start;
    max-width: 68ch;
  }
  .schritte b {
    display: block;
    margin-bottom: calc(var(--spacing) * 1);
  }
  .schritte .fliesstext {
    margin: 0;
  }
  .offen {
    color: var(--color-text-accent);
  }
  .auf-marke .offen {
    color: var(--color-link-on-brand);
  }
  .galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: calc(var(--spacing) * 6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .bild-karte {
    display: block;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1), var(--kante-licht);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: box-shadow var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve), transform var(--dauer-zustand) var(--kurve);
  }
  @media (hover: hover) {
    .bild-karte:hover {
      border-color: var(--color-border-brand);
      box-shadow: var(--shadow-2), var(--aura-weich), var(--kante-licht);
      transform: translateY(var(--hub-hover-gross));
    }
  }
  .bild-karte img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--color-border-hairline);
    transform-origin: center bottom;
    transition: transform var(--dauer-auftritt) var(--kurve);
  }
  @media (hover: hover) {
    .bild-karte:hover img {
      transform: scale(1.03);
    }
  }
  .bild-karte-text {
    display: grid;
    gap: calc(var(--spacing) * 1);
    padding: calc(var(--spacing) * 5);
  }
  .bild-karte-text > * {
    display: block;
    margin: 0;
  }
  .cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--kante-licht);
  }
  .cta-band .vorspann {
    max-width: 52ch;
  }
  .cta-wellen {
    position: absolute;
    inset: auto 0 -2px;
    z-index: -1;
    width: 100%;
    height: clamp(3.5rem, 9vw, 7.5rem);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: 0.22;
    pointer-events: none;
  }
  .cta-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--spacing) * 12);
    align-items: center;
  }
  @media (max-width: 899px) {
    .cta-raster {
      grid-template-columns: 1fr;
    }
    .cta-bullauge {
      justify-self: center;
    }
  }
  .cta-bullauge {
    position: relative;
    display: block;
    width: clamp(13rem, 24vw, 21rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 6px solid color-mix(in srgb, #272d34 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 6px solid color-mix(in srgb, var(--color-text-on-brand) 35%, transparent);
    }
    border-radius: 50%;
    box-shadow: var(--shadow-3), var(--aura-ring);
    transition: transform var(--dauer-zustand) var(--kurve), box-shadow var(--dauer-zustand) var(--kurve);
  }
  .cta-bullauge img {
    display: block;
    width: 300%;
    max-width: none;
    height: auto;
    transform: translate(-67%, -21%);
  }
  .cta-bullauge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: var(--glanz-oben);
    pointer-events: none;
  }
  @media (hover: hover) {
    .cta-bullauge:hover {
      transform: scale(1.03);
      box-shadow: var(--shadow-3), var(--aura-ring), var(--aura-weich);
    }
  }
}