/* ============================================================
   tokens/colors.css
   ============================================================ */
/* Design tokens: colors
   1) Foundations (raw primitives from export.json, only used ones)
   2) Semantic tokens (theme-aware)
   3) Alias tokens (document-facing names) */

:root {
  /* Foundations */
  --foundation-brand-050: #f8f9fb;
  --foundation-brand-100: #e7ecf0;
  --foundation-brand-200: #cfd8e1;
  --foundation-brand-300: #c7d1dc;
  --foundation-brand-400: #96aabe;
  --foundation-brand-500: #6884a1;
  --foundation-brand-600: #567596;
  --foundation-brand-700: #406488;
  --foundation-brand-800: #18416b;
  --foundation-brand-900: #0f2842;
  --foundation-brand-950: #081624;

  --foundation-beige-050: #fbf9f4;
  --foundation-beige-100: #efebd9;
  --foundation-beige-200: #dfd8b3;
  --foundation-beige-300: #dad1a5;
  --foundation-beige-400: #b8a85c;
  --foundation-beige-500: #8e8247;
  --foundation-beige-600: #7e733f;
  --foundation-beige-700: #6b6135;
  --foundation-beige-800: #453f23;
  --foundation-beige-900: #2a2715;
  --foundation-beige-950: #17150c;

  --foundation-neutral-000: #ffffff;
  --foundation-neutral-050: #f9f9f9;
  --foundation-neutral-100: #ebebeb;
  --foundation-neutral-200: #d7d7d7;
  --foundation-neutral-300: #d0d0d0;
  --foundation-neutral-400: #a8a8a8;
  --foundation-neutral-500: #818181;
  --foundation-neutral-600: #737373;
  --foundation-neutral-700: #616161;
  --foundation-neutral-800: #3f3f3f;
  --foundation-neutral-900: #272727;
  --foundation-neutral-950: #151515;

  --foundation-green-050: #fbfbe8;
  --foundation-green-100: #efefaa;
  --foundation-green-200: #dede4d;
  --foundation-green-300: #d7d729;
  --foundation-green-400: #adad11;
  --foundation-green-500: #86860d;
  --foundation-green-600: #77770c;
  --foundation-green-700: #65650a;
  --foundation-green-800: #424207;
  --foundation-green-900: #282804;
  --foundation-green-950: #161602;

  --foundation-red-050: #fdf8f7;
  --foundation-red-100: #f7e8e4;
  --foundation-red-200: #efd1c8;
  --foundation-red-300: #ecc8be;
  --foundation-red-400: #db9784;
  --foundation-red-500: #ca6447;
  --foundation-red-600: #c24d2d;
  --foundation-red-700: #b62f0a;
  --foundation-red-800: #781f07;
  --foundation-red-900: #4b1404;
  --foundation-red-950: #2b0b02;

  --foundation-blue-050: #f9f9fe;
  --foundation-blue-100: #e8eafb;
  --foundation-blue-200: #d2d5f7;
  --foundation-blue-300: #cacdf6;
  --foundation-blue-400: #9ba2ee;
  --foundation-blue-500: #6c76e7;
  --foundation-blue-600: #5a65e3;
  --foundation-blue-700: #424edf;
  --foundation-blue-800: #2a3395;
  --foundation-blue-900: #1a1f5c;
  --foundation-blue-950: #0e1133;
}

/* Semantic: light mode */
:root,
:root[data-theme="light"] {
  --semantic-bg-base: var(--foundation-beige-100);
  --semantic-bg-primary: var(--foundation-neutral-000);
  --semantic-bg-secondary: var(--foundation-brand-200);
  --semantic-bg-inverted: var(--foundation-brand-800);

  --semantic-content-base: var(--foundation-brand-800);
  --semantic-content-inverted: var(--foundation-brand-200);

  /* Links: blue-800 (#2a3395) delivers >=7:1 on every light surface,
     blue-700 (#424edf) dropped to ~4.37:1 on beige-200 / brand-200. */
  --semantic-action-base: var(--foundation-blue-800);
  --semantic-action-hover: var(--foundation-blue-900);

  --semantic-stroke-base: var(--foundation-brand-800);
  --semantic-stroke-inverted: var(--foundation-brand-200);
  --semantic-stroke-strong: var(--foundation-neutral-000);
  --semantic-stroke-divider: var(--foundation-brand-400);

  --semantic-state-secondary-hover: var(--foundation-brand-300);
  --semantic-state-secondary-pressed: var(--foundation-brand-200);
  --semantic-state-inverted-hover: var(--foundation-brand-700);
  --semantic-state-inverted-pressed: var(--foundation-brand-800);

  --semantic-control-surface: var(--semantic-bg-primary);
  --semantic-control-surface-hover: var(--semantic-state-secondary-hover);
  --semantic-control-surface-pressed: var(--semantic-state-secondary-pressed);
  --semantic-control-border: var(--semantic-stroke-base);
  --semantic-control-icon: var(--semantic-content-base);
  --semantic-focus-ring: var(--semantic-action-base);
  --semantic-media-placeholder-bg: var(--foundation-neutral-100);
  --semantic-media-placeholder-stroke: var(--foundation-neutral-400);
}

/* Semantic: dark mode (future-ready) */
:root[data-theme="dark"] {
  --semantic-bg-base: var(--foundation-brand-950);
  --semantic-bg-primary: var(--foundation-brand-900);
  --semantic-bg-secondary: var(--foundation-brand-800);
  --semantic-bg-inverted: var(--foundation-brand-100);

  --semantic-content-base: var(--foundation-brand-100);
  --semantic-content-inverted: var(--foundation-brand-900);

  /* On dark ground, the lighter blue carries enough luminance:
     blue-400 (#9ba2ee) on brand-900 (#0f2842) is ~8.2:1. */
  --semantic-action-base: var(--foundation-blue-400);
  --semantic-action-hover: var(--foundation-blue-300);

  --semantic-stroke-base: var(--foundation-brand-200);
  --semantic-stroke-inverted: var(--foundation-brand-900);
  --semantic-stroke-strong: var(--foundation-neutral-000);
  --semantic-stroke-divider: var(--foundation-brand-400);

  --semantic-state-secondary-hover: var(--foundation-brand-700);
  --semantic-state-secondary-pressed: var(--foundation-brand-800);
  --semantic-state-inverted-hover: var(--foundation-brand-200);
  --semantic-state-inverted-pressed: var(--foundation-brand-100);

  --semantic-control-surface: var(--semantic-bg-primary);
  --semantic-control-surface-hover: var(--semantic-state-secondary-hover);
  --semantic-control-surface-pressed: var(--semantic-state-secondary-pressed);
  --semantic-control-border: var(--semantic-stroke-base);
  --semantic-control-icon: var(--semantic-content-base);
  --semantic-focus-ring: var(--semantic-action-base);
  --semantic-media-placeholder-bg: var(--foundation-brand-900);
  --semantic-media-placeholder-stroke: var(--foundation-brand-500);
}

/* Alias layer: use these in stylesheets */
:root {
  --color-bg: var(--semantic-bg-base);
  --color-text: var(--semantic-content-base);

  /* Secondary text (captions, excerpts, meta, hints):
     brand-700 (#406488) → 6.18:1 on white, 5.17:1 on beige-100 — besteht WCAG AA.
     REGEL: --color-text-secondary für alle lesbaren Sekundärtexte verwenden.
            --color-text-muted NUR für dekorative Elemente (Icons, Placeholder). */
  --color-text-secondary: var(--foundation-brand-700);

  /* Muted: NUR für dekorative Elemente (Icons, Placeholder) — KEIN Fließtext!
     brand-800@75% transparent → ~4.87:1 auf weiß, ~5.94:1 auf beige-100 → besteht AA.
     Vorher @70% → ~4.47:1 auf weiß (knapp unter AA). */
  --color-text-muted: color-mix(in srgb, var(--semantic-content-base) 75%, transparent);
  --color-surface-primary: var(--semantic-bg-primary);
  --color-surface-secondary: var(--semantic-bg-secondary);
  --color-surface-inverted: var(--semantic-bg-inverted);
  --color-content-on-inverted: var(--semantic-content-inverted);
  --color-header-bg: var(--semantic-bg-inverted);
  --color-header-text: var(--semantic-content-inverted);
  --color-main-bg: var(--semantic-bg-base);
  --color-main-text: var(--semantic-content-base);
  --color-section-surface-base: var(--semantic-bg-base);
  --color-section-surface-primary: var(--semantic-bg-primary);
  --color-section-surface-secondary: var(--semantic-bg-secondary);
  --color-section-surface-inverted: var(--semantic-bg-inverted);
  --color-footer-bg: var(--semantic-bg-secondary);
  --color-footer-text: var(--semantic-content-base);
  --color-outline: var(--semantic-stroke-base);
  --color-outline-soft: color-mix(in srgb, var(--semantic-stroke-base) 40%, transparent);
  --color-grid-cell: color-mix(in srgb, var(--semantic-bg-primary) 65%, transparent);

  --color-button-bg: var(--semantic-control-surface);
  --color-button-bg-active: var(--semantic-bg-secondary);
  --color-button-bg-hover: var(--semantic-control-surface-hover);
  --color-button-bg-pressed: var(--semantic-control-surface-pressed);
  --color-button-border: var(--semantic-control-border);
  --color-button-icon: var(--semantic-control-icon);
  --color-button-text: var(--semantic-content-base);
  --color-button-text-disabled: color-mix(in srgb, var(--color-text) 38%, transparent);
  --color-button-border-disabled: color-mix(in srgb, var(--color-outline) 45%, transparent);
  --color-focus-ring: var(--semantic-focus-ring);
  --color-link: var(--semantic-action-base);
  --color-link-hover: var(--semantic-action-hover);
  --color-shadow-interactive: color-mix(in srgb, var(--semantic-stroke-base) 25%, transparent);
  --color-shadow-interactive-inset: color-mix(in srgb, var(--semantic-stroke-base) 20%, transparent);
  --color-media-placeholder-bg: var(--semantic-media-placeholder-bg);
  --color-media-placeholder-stroke: var(--semantic-media-placeholder-stroke);
}

/* ── Dark-mode override ────────────────────────────────────────────────────
   brand-700 (#406488) fällt auf dunklen Hintergründen unter AA (2.95:1 auf brand-950).
   brand-400 (#96aabe) → 7.65:1 auf brand-950, 6.27:1 auf brand-900 ✓
   ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --color-text-secondary: var(--foundation-brand-400);
}

/* ── Surface-spezifische Overrides ────────────────────────────────────────
   Auf bg-secondary (brand-200 #cfd8e1) reicht brand-700 nicht für AA.
   brand-800 (#18416b) → 7.25:1 auf brand-200 ✓
   ──────────────────────────────────────────────────────────────────────── */
.section--surface-secondary {
  --color-text-secondary: var(--color-text);
}

/* ============================================================
   tokens/typography.css
   ============================================================ */
/* Design tokens: font import, axes, size scale, line-heights, letter spacing
   Self-hosted Open Sans Variable (latin + latin-ext) — DSGVO-konform, kein Google CDN. */

/* latin-ext (Umlaute, diakritische Zeichen) */
@font-face {
  font-family: "Open Sans Variable";
  src: url("../Fonts/OpenSans-Variable-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  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;
}

/* latin */
@font-face {
  font-family: "Open Sans Variable";
  src: url("../Fonts/OpenSans-Variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  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;
}

:root {
  /* "Open Sans Variable" stays first so the chain is ready for the
     self-hosted face. Today only "Open Sans" (from the CDN) actually
     resolves, which is fine because the CDN variant is the same
     variable font. */
  --font-family-main: "Open Sans Variable", "Open Sans", sans-serif;

  /* Foundation weight scale — four named tiers.
       body-default  (500) -> running text, descriptions, card copy
       body-semibold (600) -> interactive labels: buttons, menu items,
                              anything that reads as an action and needs
                              slightly more presence than body text
       body-strong   (700) -> emphasis inside body text (<strong>)
       headline      (750) -> titles, display text, hero typography */
  --weight-headline: 750;
  --weight-body-strong: 700;
  --weight-body-semibold: 600;
  --weight-body-default: 500;
  --width-condensed: 75%;

  /* Component typography tokens.
     Interactive labels share a single semibold weight so primary
     buttons, secondary card-controls and navigation menu items all
     read at the same visual hierarchy. */
  --component-button-label-font-size: var(--font-step-1);
  --component-button-label-line-height: var(--line-height-150);
  --component-button-label-letter-spacing: var(--letter-spacing-100);
  --component-button-label-font-weight: var(--weight-body-semibold);
  --component-button-label-font-stretch: var(--width-condensed);
  --component-button-label-font-variation: "wght" var(--weight-body-semibold), "wdth" 75;
  --component-button-label-font-size-compact: var(--font-step-0);
  --component-button-label-line-height-compact: var(--line-height-150);
  --component-button-label-letter-spacing-compact: var(--letter-spacing-050);
  --component-button-label-font-weight-compact: var(--weight-body-semibold);
  --component-button-label-font-stretch-compact: var(--width-condensed);
  --component-button-label-font-variation-compact: "wght" var(--weight-body-semibold), "wdth" 75;

  /* Dropdown labels intentionally match the compact control language,
     but live on their own tokens so the component can evolve without
     being coupled to button variants. */
  --component-dropdown-label-font-size: var(--font-step-0);
  --component-dropdown-label-line-height: var(--line-height-150);
  --component-dropdown-label-letter-spacing: var(--letter-spacing-050);
  --component-dropdown-label-font-weight: var(--weight-body-semibold);
  --component-dropdown-label-font-stretch: var(--width-condensed);
  --component-dropdown-label-font-variation: "wght" var(--weight-body-semibold), "wdth" 75;

  /* Menu-Link-Typographie — primäre Items (uppercase, kondensiert) und Submenü-Items */
  --component-menu-link-font-size: var(--font-step-1);          /* fluid: 1.13 → 1.56rem */
  --component-menu-link-line-height: var(--line-height-130);    /* 1.3 — tight für Großbuchstaben */
  --component-menu-link-font-weight: var(--weight-body-semibold);
  --component-menu-link-font-stretch: var(--width-condensed);
  --component-menu-link-font-variation: "wght" var(--weight-body-semibold), "wdth" 75;
  --component-menu-link-font-size-submenu: var(--font-step-0);  /* fluid: 1 → 1.25rem */
  --component-menu-link-line-height-submenu: var(--line-height-135);

  --font-step--2: clamp(0.75rem, calc(0.07vw + 0.74rem), 0.81rem);
  --font-step--1: clamp(0.88rem, calc(0.15vw + 0.85rem), 1rem);
  --font-step-0: clamp(1rem, calc(0.29vw + 0.94rem), 1.25rem);
  --font-step-1: clamp(1.13rem, calc(0.51vw + 1.02rem), 1.56rem);
  --font-step-2: clamp(1.31rem, calc(0.81vw + 1.15rem), 2rem);
  --font-step-3: clamp(1.5rem, calc(1.18vw + 1.26rem), 2.5rem);
  --font-step-4: clamp(1.69rem, calc(1.80vw + 1.32rem), 3.19rem);
  --font-step-5: clamp(1.88rem, calc(2.43vw + 1.39rem), 3.94rem);
  --font-step-6: clamp(2.19rem, calc(3.31vw + 1.53rem), 5rem);

  --line-height-130: 1.3;
  --line-height-135: 1.35;
  --line-height-150: 1.5;
  --line-height-160: 1.6;

  --letter-spacing-100: 0.01em;
  --letter-spacing-050: 0.005em;
}

/* ============================================================
   tokens/spacing.css
   ============================================================ */
/* Design tokens: layout, pattern, and component spacing
   Dependency direction:
   foundation -> semantic -> layout -> pattern -> component
   Legacy aliases stay in place while downstream files migrate. */
:root {
  /* Foundation spacing scale
     Use rem so spacing scales with user font settings and page zoom. */
  --space-0: 0rem;
  --space-025: 0.125rem;
  --space-050: 0.25rem;
  --space-100: 0.5rem;
  --space-150: 0.75rem;
  --space-200: 1rem;
  --space-250: 1.25rem;
  --space-300: 1.5rem;
  --space-350: 1.75rem;
  --space-400: 2rem;
  --space-450: 2.25rem;
  --space-500: 2.5rem;
  --space-550: 2.75rem;
  --space-600: 3rem;
  --space-700: 3.5rem;
  --space-800: 4rem;
  --space-900: 5rem;
  --space-1000: 6rem;
  --space-1100: 7rem;
  --space-1200: 8rem;
  --space-1400: 9rem;

  /* Layout tokens */
  --layout-max-inline-size: 96rem;
  --layout-grid-columns: 2;
  --layout-page-padding-inline: var(--space-300);
  --layout-page-space-block: var(--space-900);
  --layout-section-padding-block-start: var(--space-600);
  --layout-section-padding-block-end: var(--space-600);
  --layout-section-hero-padding-block-start: var(--space-900);
  --layout-section-hero-padding-block-end: var(--space-500);
  --layout-section-padding-block: var(--layout-section-padding-block-start);
  --layout-section-content-gap: var(--space-400);
  --layout-section-header-gap: var(--space-500);
  --layout-header-block-size: clamp(3.5rem, calc(2.63vw + 2.97rem), 5.5rem);

  /* Pattern tokens */
  --pattern-showcase-gap: var(--layout-section-content-gap);
  --pattern-card-gap: var(--space-200); /* gap between cards in grids and carousels */
  --pattern-disclosure-glyph-size: var(--space-400);
  --pattern-disclosure-dot-size: var(--space-050);
  --pattern-disclosure-dot-offset: var(--space-100);
  --pattern-disclosure-line-inline-size: 1.125rem;
  --pattern-disclosure-line-block-size: var(--space-025);

  /* Component tokens */
  --component-control-block-size: var(--space-500);
  --component-icon-control-block-size: var(--space-600);
  --component-nav-toggle-size: 2.75rem;                 /* 44px — WCAG 2.5.5 minimum touch target */
  --component-nav-toggle-icon-size: var(--space-350);  /* mobile: 28px / 1.75rem */
  --component-button-block-size: var(--space-550);              /* 44px */
  --component-button-icon-only-size: var(--component-icon-control-block-size); /* 48px */
  --component-input-block-size: var(--component-control-block-size);
  --component-button-padding-inline: var(--space-200);          /* legacy — nicht mehr für btn verwendet */
  --component-button-padding-inline-start: var(--space-300);    /* 24px — alle Text-Buttons links */
  --component-button-padding-inline-end: var(--space-200);      /* 16px — alle Text-Buttons rechts */
  --component-button-padding-inline-icon-start: var(--component-button-padding-inline-start);
  --component-button-padding-inline-icon-end: var(--component-button-padding-inline-end);
  --component-button-gap: var(--space-100);
  --component-button-slot-size: var(--space-300);
  --component-dropdown-trigger-gap: var(--space-100); /* 8px — war --space-125 (inexistent) */
  --component-dropdown-panel-offset: var(--space-050);
  --component-dropdown-panel-padding: var(--space-100);
  --component-dropdown-option-min-block-size: var(--space-450);
  --component-dropdown-option-padding-inline: var(--space-150);
  --component-dropdown-option-padding-block: var(--space-100);

  /* Badge size tiers
       sm -> in-card pills (e.g. .card__badge), smallest readable footprint
       md -> category badges in hero/filter bars (.badge--category)
       lg -> tap-target sized filter/toggle buttons (.badge--button)
     Tiers are also reflected in the inline padding below so badge growth
     scales proportionally to block height. */
  --component-badge-sm-block-size: var(--space-300);
  --component-badge-md-block-size: clamp(1.75rem, calc(0.33vw + 1.67rem), 2.375rem);
  --component-badge-lg-block-size: clamp(1.8125rem, calc(0.55vw + 1.68rem), 2.875rem);
  --component-badge-sm-padding-inline: var(--space-150);
  --component-badge-md-padding-inline: var(--space-150);
  --component-badge-lg-padding-inline: clamp(var(--space-150), calc(0.53vw + 0.62rem), var(--space-300));

  /* Legacy aliases for migration */
  --grid-cols: var(--layout-grid-columns);
  --content-gap: var(--pattern-showcase-gap);
  --section-padding-y: var(--layout-section-padding-block);
  --page-padding-x: var(--layout-page-padding-inline);
  --page-space-y: var(--layout-page-space-block);
  --header-height: var(--layout-header-block-size);
  --menu-btn-size: var(--component-nav-toggle-size);
  --menu-icon-size: var(--component-nav-toggle-icon-size);
  --control-height: var(--component-control-block-size);
  --control-icon-height: var(--component-icon-control-block-size);
  --button-height: var(--component-button-block-size);
  --button-icon-only-size: var(--component-button-icon-only-size);
  --input-height: var(--component-input-block-size);
  --button-padding-inline: var(--component-button-padding-inline);
  --button-padding-inline-icon-start: var(--component-button-padding-inline-icon-start);
  --button-padding-inline-icon-end: var(--component-button-padding-inline-icon-end);
  --button-gap: var(--component-button-gap);
  --button-slot-size: var(--component-button-slot-size);
}

/* ============================================================
   tokens/breakpoints.css
   ============================================================ */
/* Design tokens: grid + breakpoint overrides */
:root {
  --layout-grid-columns: 2;
}

@media (min-width: 640px) {
  :root {
    --layout-grid-columns: 6;
    --layout-section-padding-block-start: var(--space-700);
    --layout-section-padding-block-end: var(--space-700);
    --layout-section-hero-padding-block-start: var(--space-1000);
    --layout-section-hero-padding-block-end: var(--space-600);
    --layout-section-content-gap: var(--space-450);
    --layout-section-header-gap: var(--space-550);
    --layout-page-space-block: var(--space-1000);
    --component-button-padding-inline: var(--space-300);
    --component-button-padding-inline-icon-start: var(--space-300);
    --component-button-padding-inline-icon-end: var(--space-250);
  }
}

@media (min-width: 768px) {
  :root {
    --layout-grid-columns: 6;
    --layout-page-space-block: var(--space-1000);
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-grid-columns: 12;
    --layout-section-padding-block-start: var(--space-800);
    --layout-section-padding-block-end: var(--space-800);
    --layout-section-hero-padding-block-start: var(--space-1200);
    --layout-section-hero-padding-block-end: var(--space-1000); /* 96 px */
    --layout-section-content-gap: var(--space-500);
    --layout-section-header-gap: var(--space-600);
    --pattern-card-gap: var(--space-250);
    --layout-page-padding-inline: var(--space-400);
    --layout-page-space-block: var(--space-1100);
    --component-nav-toggle-size: var(--space-600);      /* desktop: 48px */
    --component-nav-toggle-icon-size: var(--space-400); /* desktop: 32px */
    --component-button-slot-size: var(--space-400);
  }
}

@media (min-width: 1280px) {
  :root {
    --layout-grid-columns: 12;
    --layout-section-content-gap: var(--space-500);
    --layout-page-padding-inline: var(--space-800);
    --layout-page-space-block: var(--space-1100);
  }
}

@media (min-width: 1536px) {
  :root {
    --layout-section-padding-block-start: var(--space-1000);
    --layout-section-padding-block-end: var(--space-1000);
    --layout-section-hero-padding-block-start: var(--space-1400);
    --layout-section-hero-padding-block-end: var(--space-1000); /* 96 px */
    --layout-section-content-gap: var(--space-600);
    --layout-section-header-gap: var(--space-800);
    --layout-page-space-block: var(--space-1400);
  }
}

/* ============================================================
   tokens/radius.css
   ============================================================ */
/* Design tokens: border-radius scale
   Dependency direction: foundation scale -> semantic aliases used by components.
   Usage guidance:
     --radius-none : no rounding (sharp)
     --radius-sm   : small UI such as badges, inputs, inline tags
     --radius-md   : cards, menu panels, search field
     --radius-lg   : larger cards and surface containers
     --radius-pill : fully-rounded buttons, chips, search-pill */

:root {
  /* Foundation scale */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Component-facing aliases (optional but useful for future overrides) */
  --radius-button: var(--radius-pill);
  --radius-badge: var(--radius-sm);
  --radius-card: var(--radius-sm);
  --radius-card-lg: var(--radius-md);
  --radius-surface: var(--radius-md);
  --radius-input: var(--radius-md);
}

/* ============================================================
   tokens/effects.css
   ============================================================ */
/* Design tokens: effects (shadows + focus ring)
   Dependency direction: color + spacing tokens -> effect tokens -> components.
   Components must consume these aliases, never the raw values. */

:root {
  /* Shadow scale — hard-edge block shadows in three tiers.
     Offset grows with the size of the interactive surface so feedback
     reads as proportional to the element.
       sm       -> reserved (compact chips, future use)
       default  -> buttons, icon buttons, badge buttons, card controls,
                   menu cards, search field, and every other small /
                   medium interactive surface
       lg       -> content cards, carousel items, large interactive tiles;
                   additionally offset 2px to the right so the drop
                   reads as directional light from the top-left and
                   reinforces the tactile feel on big surfaces */
  --shadow-none: 0 0 0 0 transparent;

  --shadow-interactive-bottom-sm: 0        0.125rem 0 var(--color-shadow-interactive);
  --shadow-interactive-bottom:    0        0.25rem  0 var(--color-shadow-interactive);
  --shadow-interactive-bottom-lg: 0.25rem  0.5rem   0 var(--color-shadow-interactive);

  --shadow-interactive-inset-sm:  inset 0        0.125rem 0 var(--color-shadow-interactive-inset);
  --shadow-interactive-inset:     inset 0        0.25rem  0 var(--color-shadow-interactive-inset);
  --shadow-interactive-inset-lg:  inset 0.125rem 0.5rem   0 var(--color-shadow-interactive-inset);

  /* Lift on hover (paired with -lg shadows for a tactile feel on big surfaces) */
  --lift-none: 0;
  --lift-sm:   -0.0625rem;
  --lift-md:   -0.125rem;
  --lift-lg:   -0.1875rem;

  /* Focus treatment
     --shadow-focus-inner : compact 2px ring (used on menu/search where outline isn't possible)
     --focus-ring-*       : outline-based ring for standard interactive controls */
  --shadow-focus-inner: 0 0 0 2px var(--color-focus-ring);
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.125rem;
}

@media (forced-colors: active) {
  :root {
    /* Block shadows are invisible in high-contrast modes; the lift tokens
       would only introduce jank without visual payoff. */
    --lift-sm: 0;
    --lift-md: 0;
    --lift-lg: 0;
  }
}

/* ============================================================
   foundations/reset.css
   ============================================================ */
/* Foundation: reset */
* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
}

/* Form controls don't inherit font from parent in all browsers by default
   (Firefox uses -moz-button, older Safari uses system UI).
   This is the standard CSS reset to make all form controls consistent
   and ensures font-family/font-variation-settings work as expected. */
button,
input,
select,
textarea {
  font: inherit;
}

/* ============================================================
   foundations/base.css
   ============================================================ */
/* Foundation: base document styles */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-main);
  overflow-x: clip;
}

.site-main {
  flex: 1;
}

/* Bold inline-Elemente: font-variation-settings muss beide Achsen des
   Variable Fonts setzen — sonst fällt wdth auf den Browser-Default zurück.
   wdth 100 = normale Breite (Fließtext-Kontext). */
:where(strong, b) {
  font-weight: var(--weight-body-strong);
  font-variation-settings: "wght" var(--weight-body-strong), "wdth" 100;
}

:where(a) {
  color: var(--color-link);
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
  transition: color 120ms ease;
}

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

@media (prefers-reduced-motion: reduce) {
  :where(a) { transition: none; }
}

:where(svg) {
  color: inherit;
}

:where(svg [stroke]) {
  stroke: currentColor;
}

/* ============================================================
   foundations/grid.css
   ============================================================ */
/* Foundation: core layout grid */
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  row-gap: 0;
  padding-inline: var(--layout-page-padding-inline);
}

.section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  row-gap: 0;
  padding-block-start: var(--layout-section-padding-block-start);
  padding-block-end: var(--layout-section-padding-block-end);
}

/* Keep all samples stacked vertically */
.section > * {
  grid-column: 1 / -1;
}

/* Pendant für .page-grid: direkte Kinder spannen standardmäßig die volle
   Rasterbreite. Nötig für nackt gerenderte Plugins (vkevents, ke_search, siehe
   ContentElements/Layouts/Default.html), deren Top-Level-Element keine eigene
   .section-Klasse trägt — ohne diese Regel landen sie per Auto-Placement in
   einer einzelnen Rasterspalte. Pattern-Regeln werden später importiert und
   überschreiben die Platzierung bei Bedarf. */
.page-grid > * {
  grid-column: 1 / -1;
}

/* ── Section-Abstand: gleicher Hintergrund ──────────────────────────────────
   Aufeinanderfolgende Sections mit gleichem Hintergrund bekommen kein
   doppeltes padding. Die folgende Section verliert padding-block-start;
   ihr Inhalt rückt direkt an das padding-block-end der vorherigen ran.

   Ausnahme: Hintergrundwechsel (section--surface-*) → padding wiederherstellen,
   damit die visuelle Trennung erhalten bleibt. */

.section + .section {
  padding-block-start: 0;
}

/* Kein padding-block-end (z.B. wenn Inhalt bündig zum unteren Rand gehen soll) */
.section--flush-end {
  padding-block-end: 0;
}

.section--surface + .section,
.section + .section--surface {
  padding-block-start: var(--layout-section-padding-block-start);
}

@media (min-width: 1536px) {
  .page-grid {
    max-width: var(--layout-max-inline-size);
    margin-inline: auto;
  }
}

/* ============================================================
   foundations/interaction.css
   ============================================================ */
/* Foundation: shared interactive behavior */

/* Pointer cursor — Element und alle Kinder explizit gesetzt,
   da macOS Chrome/Safari cursor: auto auf Kind-Elemente anwenden
   und damit das geerbte pointer vom Elternteil überschreiben. */
a[href], a[href] *,
button:not(:disabled), button:not(:disabled) *,
[role="button"], [role="button"] *,
.card--interactive, .card--interactive *,
summary, summary *,
select {
  cursor: pointer;
}

:where(button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================================
   components/type-scale.css
   ============================================================ */
/* Component: semantic type classes mapped to mathematical step tokens */
.type-hl-4xl {
  font-size: var(--font-step-5);
  line-height: var(--line-height-130);
}

.type-hl-3xl {
  font-size: var(--font-step-4);
  line-height: var(--line-height-130);
}

.type-hl-2xl {
  font-size: var(--font-step-3);
  line-height: var(--line-height-135);
}

.type-hl-xl {
  font-size: var(--font-step-2);
  line-height: var(--line-height-135);
  letter-spacing: var(--letter-spacing-050);
}

.type-hl-lg {
  font-size: var(--font-step-1);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
}

.type-hl-base {
  font-size: var(--font-step-0);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
}

.type-body-lg {
  font-size: var(--font-step-1);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
}

.type-body-base {
  font-size: var(--font-step-0);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.type-body-sm {
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.type-body-xs {
  font-size: var(--font-step--2);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

/* ============================================================
   components/headline.css
   ============================================================ */
/* Component: headline */
.headline {
  font-weight: var(--weight-headline);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-headline), "wdth" 75;
}

/* ── Vertikaler Rhythmus (global)
   Gilt seitenweit für alle h1/h2/h3 — Komponenten können überschreiben.

   H1                  → 32 px unten
   H2 visuell groß     → 24 px unten  (type-hl-2xl, type-hl-xl, type-hl-3xl)
   H3                  → 16 px unten
   H2, H3 mid-Stack    → 24 px oben (wenn nicht erstes Kind) */

h1 {
  padding-block-end: var(--space-400); /* 32 px */
}

:is(h2, h3):not(:first-child) {
  padding-block-start: var(--space-300); /* 24 px */
}

h2.type-hl-2xl,
h2.type-hl-xl,
h2.type-hl-3xl {
  padding-block-end: var(--space-300); /* 24 px — visuell groß */
}

h2.type-hl-lg,
h2.type-hl-md,
h2.type-hl-sm,
h3 {
  padding-block-end: var(--space-200); /* 16 px — visuell klein (wie h3) */
}

/* ============================================================
   components/paragraph.css
   ============================================================ */
/* Component: paragraph */
.text-block {
  display: grid;
  row-gap: 1lh;
}

.body-text {
  font-stretch: normal;
  padding-block-end: var(--space-200); /* 16 px — globaler Standard-Abstand nach unten */
}

.body-default {
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default);
}

/* Lists
   display:block statt grid — display:grid/flex unterdrückt ::marker
   in vielen Browsern (Nummern/Bullets verschwinden). Gap via li-Margin. */
.body-unordered-list,
.body-ordered-list {
  margin: 0;
  padding-inline-start: var(--space-500); /* 40 px — Marker + Einzug */
  display: block;
  font-stretch: normal;
  font-size: var(--font-step-0);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default);
}

.body-unordered-list > li + li,
.body-ordered-list > li + li {
  margin-block-start: var(--space-100); /* 8 px Abstand zwischen Items */
}

.body-unordered-list {
  list-style-type: disc;
}

.body-ordered-list {
  list-style-type: decimal;
}

/* ============================================================
   components/detail.css
   ============================================================ */
/* Component: detail
   Group labels use the system headline class: .headline.type-hl-lg */

.type-detail-default-lg,
.type-detail-default-base,
.type-detail-default-sm,
.type-detail-default-xs,
.type-detail-semibold-lg,
.type-detail-semibold-base,
.type-detail-semibold-sm,
.type-detail-semibold-xs,
.type-detail-strong-lg,
.type-detail-strong-base,
.type-detail-strong-sm,
.type-detail-strong-xs {
  max-width: 70ch;
  font-stretch: var(--width-condensed);
}

.type-detail-default-lg,
.type-detail-semibold-lg,
.type-detail-strong-lg {
  font-size: var(--font-step-1);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
}

.type-detail-default-base,
.type-detail-semibold-base,
.type-detail-strong-base {
  font-size: var(--font-step-0);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
}

.type-detail-default-sm,
.type-detail-semibold-sm,
.type-detail-strong-sm {
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.type-detail-default-xs,
.type-detail-semibold-xs,
.type-detail-strong-xs {
  font-size: var(--font-step--2);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.type-detail-default-lg,
.type-detail-default-base,
.type-detail-default-sm,
.type-detail-default-xs {
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 75;
}

.type-detail-semibold-lg,
.type-detail-semibold-base,
.type-detail-semibold-sm,
.type-detail-semibold-xs {
  font-weight: var(--weight-body-semibold);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
}

.type-detail-strong-lg,
.type-detail-strong-base,
.type-detail-strong-sm,
.type-detail-strong-xs {
  font-weight: var(--weight-body-strong);
  font-variation-settings: "wght" var(--weight-body-strong), "wdth" 75;
}

/* ============================================================
   components/button.css
   ============================================================ */
/* Component: button primitives and variants */
:where(.btn, .btn-icon) {
  --btn-border-width: 1px;

  appearance: none;
  border-radius: var(--radius-button);
  border: var(--btn-border-width) solid var(--color-button-border);
  background: var(--color-button-bg);
  color: var(--color-button-text, var(--color-button-icon));
  box-shadow: none;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease,
    transform 80ms ease;
}

:where(.btn, .btn-icon):where(:hover, .is-hover):not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-button-bg);
  box-shadow: var(--shadow-interactive-bottom);
}

:where(.btn, .btn-icon):where(:active, .is-pressed):not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-button-bg);
  box-shadow: var(--shadow-interactive-inset);
  transform: none;
}

:where(.btn, .btn-icon).is-focus {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

:where(.btn, .btn-icon):focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

:where(.btn, .btn-icon):disabled,
:where(.btn, .btn-icon)[aria-disabled="true"] {
  border-color: var(--color-button-border-disabled);
  color: var(--color-button-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

:where(.btn, .btn-icon):disabled img,
:where(.btn, .btn-icon)[aria-disabled="true"] img,
:where(.btn, .btn-icon):disabled .btn__asset,
:where(.btn, .btn-icon)[aria-disabled="true"] .btn__asset,
:where(.btn, .btn-icon):disabled .btn-icon__asset,
:where(.btn, .btn-icon)[aria-disabled="true"] .btn-icon__asset {
  opacity: 0.35;
}

.btn {
  /* Padding: 24 px links, 16 px rechts — einheitlich für alle Text-Buttons */
  --btn-inline-start: var(--button-padding-inline-start, var(--component-button-padding-inline-start));
  --btn-inline-end: var(--button-padding-inline-end, var(--component-button-padding-inline-end));

  min-inline-size: 0;
  inline-size: auto; /* Hug — kein Full-width-Override */
  block-size: var(--button-height, var(--component-button-block-size)); /* 44 px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  padding-block: 0;
  padding-inline: var(--btn-inline-start) var(--btn-inline-end);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  color: var(--color-button-text, var(--color-button-icon));
  white-space: nowrap;
}

.btn--icon-only {
  inline-size: var(--button-icon-only-size, var(--component-button-icon-only-size)); /* 48 px */
  block-size: var(--button-icon-only-size, var(--component-button-icon-only-size));
  padding: 0;
  gap: 0;
}

/* btn--text-icon: padding-Override entfernt — verwendet jetzt dieselben
   start/end-Tokens wie alle anderen Text-Buttons (24 px / 16 px). */

.btn--text-icon {
  --button-gap: var(--space-150);
}

.btn--text-icon,
.btn--text-only,
.btn--primary {
  --button-label-font-size: var(--component-button-label-font-size);
  --button-label-line-height: var(--component-button-label-line-height);
  --button-label-letter-spacing: var(--component-button-label-letter-spacing);
  --button-label-font-weight: var(--component-button-label-font-weight);
  --button-label-font-stretch: var(--component-button-label-font-stretch);
  --button-label-font-variation: var(--component-button-label-font-variation);
}

.btn--compact {
  --button-label-font-size: var(--component-button-label-font-size-compact);
  --button-label-line-height: var(--component-button-label-line-height-compact);
  --button-label-letter-spacing: var(--component-button-label-letter-spacing-compact);
  --button-label-font-weight: var(--component-button-label-font-weight-compact);
  --button-label-font-stretch: var(--component-button-label-font-stretch-compact);
  --button-label-font-variation: var(--component-button-label-font-variation-compact);
}

/* ── Variant: btn--outline ──────────────────────────────────────────────────
   Explizite sekundäre Variante mit sichtbarem Rahmen.
   Visuell identisch mit dem Base-Button — die Klasse gibt dem Markup
   semantische Klarheit und erlaubt Theming-Overrides. */
.btn--outline {
  /* Border kommt aus dem Token --color-button-border — kein Override nötig. */
}

/* ── Variant: btn--primary ──────────────────────────────────────────────────
   Gefüllter Button für die stärkste CTA-Hierarchiestufe.
   Light: dunkle Fläche + heller Text  →  Dark: helle Fläche + dunkler Text.
   Beide Richtungen über --color-surface-inverted / --color-content-on-inverted. */
.btn--primary {
  --color-button-bg: var(--color-surface-inverted);
  --color-button-border: transparent;
  --color-button-text: var(--color-content-on-inverted);
  --color-button-icon: var(--color-content-on-inverted);
}

/* Hover: Hintergrund leicht aufhellen (light) bzw. abdunkeln (dark).
   box-shadow kommt aus der Base-Regel — wird hier nicht überschrieben,
   damit der Schatten sichtbar bleibt (filter + shadow zusammen). */
.btn--primary:where(:hover, .is-hover):not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.15);
}

.btn--primary:where(:active, .is-pressed):not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.9);
}

/* Disabled: heller Text auf dunklem Hintergrund (invertiertes Farbschema),
   gedämpft auf 50 % damit der inaktive Zustand klar erkennbar bleibt. */
.btn--primary:is(:disabled, [aria-disabled="true"]) {
  color: color-mix(in srgb, var(--color-content-on-inverted) 50%, transparent);
}

/* ── Ghost: btn--text-only ohne btn--outline und ohne btn--primary ──────────
   Niedrigste Gewichtung — kein Rahmen, kein Hintergrund.
   Einsatz: nebensächliche Aktionen wie "Filter zurücksetzen".
   Mit btn--outline kombiniert → Outline-Look.
   Mit btn--primary kombiniert → Primary-Look gewinnt. */
.btn--text-only:not(.btn--outline):not(.btn--primary) {
  --color-button-border: transparent;
  --color-button-bg: transparent;
}

/* Ghost-Hover und -Active nutzen dieselbe Shadow-Logik wie alle anderen
   Buttons — kein Sonderfall, einheitliches Hover-Verhalten. */

.btn__label {
  color: inherit;
  white-space: nowrap;
  font-size: var(--button-label-font-size, inherit);
  line-height: var(--button-label-line-height, inherit);
  letter-spacing: var(--button-label-letter-spacing, inherit);
  font-weight: var(--button-label-font-weight, inherit);
  font-stretch: var(--button-label-font-stretch, inherit);
  font-variation-settings: var(--button-label-font-variation, inherit);
}

.btn__slot {
  inline-size: var(--button-slot-size, var(--component-button-slot-size));
  block-size: var(--button-slot-size, var(--component-button-slot-size));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.btn__slot > svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  color: currentColor;
  fill: currentColor;
}

.btn__slot > svg path {
  fill: currentColor;
}

.btn__slot > svg [stroke] {
  stroke: currentColor;
}

.btn__slot > img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: contain;
}

.btn__asset {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.btn-icon {
  --btn-icon-size: var(--menu-icon-size, var(--component-nav-toggle-icon-size));
  --btn-size: var(--menu-btn-size, calc(var(--btn-icon-size) * 2));
  --btn-icon-stroke-width: 2;

  inline-size: var(--btn-size);
  block-size: var(--btn-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-button-icon);
}

.btn-icon > svg {
  inline-size: var(--btn-icon-size);
  block-size: var(--btn-icon-size);
  display: block;
  color: currentColor;
  fill: currentColor;
}

.btn-icon > svg path {
  fill: currentColor;
}

.btn-icon > svg [stroke] {
  stroke: currentColor;
}

.btn-icon > img {
  inline-size: var(--btn-icon-size);
  block-size: var(--btn-icon-size);
  display: block;
}

.btn-icon__asset {
  inline-size: var(--btn-icon-size);
  block-size: var(--btn-icon-size);
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.btn__asset--menu,
.btn-icon__asset--menu {
  -webkit-mask-image: url("../../icons/menu-bar-open.svg");
  mask-image: url("../../icons/menu-bar-open.svg");
}

.btn__asset--close,
.btn-icon__asset--close {
  -webkit-mask-image: url("../../icons/xmark.svg");
  mask-image: url("../../icons/xmark.svg");
}

.btn__asset--search,
.btn-icon__asset--search {
  -webkit-mask-image: url("../../icons/magnifying-glass.svg");
  mask-image: url("../../icons/magnifying-glass.svg");
}

.btn__asset--xmark {
  -webkit-mask-image: url("../../icons/xmark.svg");
  mask-image: url("../../icons/xmark.svg");
}

.btn__asset--arrow-left {
  -webkit-mask-image: url("../../icons/arrow-left.svg");
  mask-image: url("../../icons/arrow-left.svg");
}

.btn__asset--arrow-right {
  -webkit-mask-image: url("../../icons/arrow-right.svg");
  mask-image: url("../../icons/arrow-right.svg");
}

/* Menu icon toggle (hamburger <-> close) */
.btn-icon--menu .icon-close {
  display: none;
}

.btn-icon--menu[aria-pressed="true"] .icon-burger,
.btn-icon--menu.is-open .icon-burger {
  display: none;
}

.btn-icon--menu[aria-pressed="true"] .icon-close,
.btn-icon--menu.is-open .icon-close {
  display: block;
}

/* Active/open menu state uses a different base surface color */
.btn-icon--menu[aria-pressed="true"],
.btn-icon--menu.is-open,
.btn-icon--search[aria-expanded="true"] {
  background: var(--color-button-bg-active);
}

.btn-icon--menu[aria-pressed="true"]:hover,
.btn-icon--menu[aria-pressed="true"].is-hover,
.btn-icon--menu.is-open:hover,
.btn-icon--menu.is-open.is-hover,
.btn-icon--search[aria-expanded="true"]:hover {
  background: var(--color-button-bg-active);
}

.btn-icon--menu[aria-pressed="true"]:active,
.btn-icon--menu[aria-pressed="true"].is-pressed,
.btn-icon--menu.is-open:active,
.btn-icon--menu.is-open.is-pressed,
.btn-icon--search[aria-expanded="true"]:active {
  background: var(--color-button-bg-active);
}

/* Buttons hugen ihren Inhalt — kein responsiver Full-width-Override.
   Volle Breite bei Bedarf über Layout-Klassen oder btn--full steuern. */

@media (prefers-reduced-motion: reduce) {
  :where(.btn, .btn-icon) {
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(.btn, .btn-icon) {
    border-color: ButtonText;
  }

  :where(.btn, .btn-icon):disabled,
  :where(.btn, .btn-icon)[aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

/* ============================================================
   components/badge.css
   ============================================================ */
/* Component: badge labels and interactive badge buttons */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  --badge-bg: var(--color-surface-primary);
  --badge-color: var(--color-text);
  --badge-border: var(--color-outline);
  --badge-inline: var(--component-badge-md-padding-inline);
  --badge-block-start: var(--space-0);
  --badge-block-end: var(--space-025);

  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  padding: var(--badge-block-start) var(--badge-inline) var(--badge-block-end);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-badge);
  background: var(--badge-bg);
  color: var(--badge-color);
  font: inherit;
  text-decoration: none;
}

.badge__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-050);
  white-space: nowrap;
}

.badge--category {
  /* Medium badge tier — see --component-badge-md-* tokens.
     Semibold weight matches .tag (sm tier) for visual consistency. */
  min-block-size: var(--component-badge-md-block-size);
  font-size: var(--font-step-0);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-050);
  font-weight: var(--weight-body-semibold);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 100;
}

.badge--button {
  /* Large badge tier — see --component-badge-lg-* tokens. Sized for
     comfortable touch targets when used as a filter/toggle control. */
  --badge-inline: var(--component-badge-lg-padding-inline);
  --badge-block-start: var(--space-050);
  --badge-block-end: var(--space-050);

  min-block-size: var(--component-badge-lg-block-size);
  font-size: var(--font-step-0);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-100);
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
}

.badge--solid {
  --badge-bg: var(--color-surface-inverted);
  --badge-color: var(--color-content-on-inverted);
  --badge-border: transparent;
}

.badge--outline {
  --badge-bg: var(--color-surface-primary);
  --badge-color: var(--color-text);
  --badge-border: var(--color-outline);
}

.badge--transparent {
  --badge-bg: transparent;
}

.badge-button {
  appearance: none;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.badge-button:hover,
.badge-button:focus-visible {
  box-shadow: var(--shadow-interactive-bottom);
}

.badge-button:hover .badge__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.badge-button:active {
  box-shadow: var(--shadow-interactive-inset);
}

.badge-button[aria-pressed="true"] {
  --badge-bg: var(--color-surface-inverted);
  --badge-color: var(--color-content-on-inverted);
  box-shadow: none;
}

.badge-button[aria-pressed="true"]:hover,
.badge-button[aria-pressed="true"]:active {
  background: var(--color-surface-inverted);
  box-shadow: none;
}

.badge-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.badge-button:disabled,
.badge-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Small tag utility — canonical class: .tag ── */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start; /* verhindert Stretch in grid-Eltern (card__header etc.) */
  padding-block: var(--space-025);
  padding-inline: var(--component-badge-sm-padding-inline);
  border-radius: var(--radius-badge);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-050);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 100;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .badge-list--categories {
    gap: var(--space-200);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .badge {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .badge--solid {
    background: CanvasText;
    color: Canvas;
    border-color: CanvasText;
  }

  .badge-button {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }

  .badge-button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .badge-button:disabled,
  .badge-button[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}

/* ============================================================
   components/card.css
   ============================================================ */
/* Component: cards, carousels, and interactive map demo */
.card-showcase,
.card-carousel {
  display: grid;
  column-gap: var(--pattern-showcase-gap);
  row-gap: 0;
}

.card-grid {
  display: grid;
  gap: var(--pattern-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* Variant: 1 → 2 → 3 columns for content-card sections */
.card-grid--content {
  grid-template-columns: 1fr;
}

.card-grid > .card-showcase {
  gap: var(--space-200);
  align-content: start;
}

.card {
  --card-padding: var(--space-200);
  --card-gap: var(--space-200);
  --card-radius: var(--radius-card);
  --card-bg: var(--color-surface-primary);
  --card-bg-hover: var(--foundation-neutral-050);
  display: grid;
  gap: 0;
  min-inline-size: 0;
  padding: var(--card-padding);
  border: 1px solid var(--color-outline);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--color-text);
}

.card--quartier {
  align-content: start;
}

.card--event,
.card--map {
  /* Two-zone layout: body (header + meta) fills top, media sits at bottom.
     Inside the body the header is at the top and the meta-list is pushed
     to the bottom via space-between, so every card in a carousel shows
     title at top and date/location flush to the image edge. */
  --card-bg: var(--color-surface-secondary);
  --card-bg-hover: var(--foundation-brand-300);
  background: var(--card-bg);
  grid-template-rows: 1fr auto;
}

.card--event .card__body,
.card--map .card__body {
  display: flex;
  flex-direction: column;
}

/* Map-Card: Meta-Liste ans untere Ende schieben */
.card--map .card__body {
  justify-content: space-between;
}

/* Event-Card: Titel immer 2 Zeilen hoch → Meta-Liste startet am gleichen Punkt */
.card--event .card__title {
  min-block-size: 2lh;
}

/* Abstand zwischen Headline und Details */
.card--event .card__body > .card__meta-list {
  margin-block-start: var(--card-gap);
}

.card--interactive {
  /* Cards are the largest interactive surface — use the lg shadow tier
     with a small lift on hover for a more pronounced tactile feedback. */
  --card-interactive-shadow-hover: var(--shadow-interactive-bottom-lg);
  --card-interactive-shadow-active: var(--shadow-interactive-inset-lg);
  --card-interactive-lift: var(--lift-md);

  text-decoration: none;
  transform: translateY(0);
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.card--interactive:hover {
  background: var(--card-bg-hover);
  box-shadow: var(--card-interactive-shadow-hover);
  transform: translateY(var(--card-interactive-lift));
}

.card--interactive:focus-visible {
  /* Focus is its own accessibility state, not a hover variant:
     no lift, no hover shadow, just a clear external ring. */
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  transform: translateY(0);
  box-shadow: none;
}

.card--interactive:active {
  box-shadow: var(--card-interactive-shadow-active);
  transform: translateY(0);
}

.card__header,
.card__body,
.card__copy-group,
.card__meta-list,
.card__actions,
.card__shell {
  display: grid;
}

.card__header {
  gap: var(--space-100);
}

.card__header > * {
  margin: 0;
}

/* Globale Rhythmus-Regel :is(h2,h3):not(:first-child) hat Spezifität (0,1,1) —
   dieser Selektor matcht gleichauf, gewinnt aber durch spätere Position. */
.card__header > :is(h2, h3) {
  padding-block-start: 0;
}

.card__body,
.card__copy-group,
.card__actions {
  gap: 0;
  align-content: start;
}

/* ── Meta-Listen — Abstands-Regel ───────────────────────────────────────
   Item-gap:     Karten sehr eng  →  spacious-Felder luftig
   Icon-gap:     default > sm  (column-gap skaliert mit der Schriftgröße)
   ──────────────────────────────────────────────────────────────────── */
.card__meta-list {
  gap: var(--space-025);          /* 0.125 rem — sehr eng, für Event-Cards */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Variante: Kontakt / Öffnungszeiten auf Inhaltsseiten (Basis-Größe, luftig) ── */
.card__meta-list--spacious {
  gap: var(--space-200);          /* 1 rem — Platz zwischen den Info-Blöcken */
  font-size: var(--font-step-0);
  line-height: var(--line-height-150);
}

/* ── Variante: Kompakt (Map-Popup, enge Räume) ── */
.card__meta-list--sm {
  gap: var(--space-100);          /* 0.5 rem — kompakt, aber lesbar */
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
}

.card__meta-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-200);   /* 1 rem — Icon → Text, Default */
  row-gap: var(--space-100);
  align-items: start;
}

.card__meta-list--sm .card__meta-item {
  column-gap: var(--space-100);   /* 0.5 rem — Icon → Text, SM (kleiner als Default) */
}

/* ── Meta-Item Typen — Icon-Konvention ──────────────────────────────────
   Jedes card__meta-item trägt exakt einen Typ-Modifier und immer das
   zugehörige Icon. card__address bündelt mehrzeilige Texte (Straße,
   PLZ/Ort, Zeiten) im selben grid-cell ohne zusätzliche Wrapper.

   --address      icon-location      Straße + PLZ/Ort (card__address)
   --hours        icon-calendar      Öffnungszeiten / Termine (card__address)
   --tel          icon-phone         <a href="tel:"> Format: 0911&#8239;/&#8239;000&#8239;00&#8239;00
   --email        icon-nav-envelope  <a href="mailto:">
   --web          icon-arrow-right   <a href="https://...">
   --contact      icon-nav-users     Ansprechpersonen (card__address)
   --provider     icon-nav-users     Träger / Organisation (card__address)
                                     Adresszeilen direkt darunter im selben
                                     card__address — kein extra --address-Item.
   ──────────────────────────────────────────────────────────────────── */

.card__meta-item--tel a,
.card__meta-item--email a,
.card__meta-item--web a {
  text-decoration: none;
  color: inherit;
}

.card__meta-item--tel a:hover,
.card__meta-item--email a:hover,
.card__meta-item--web a:hover {
  text-decoration: underline;
}

.card__meta-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-top: 0.25rem;
  color: currentColor;
  flex-shrink: 0;
}

.card__meta-asset {
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.card__meta-asset--calendar {
  -webkit-mask-image: url("../../icons/calendar-clock.svg");
  mask-image: url("../../icons/calendar-clock.svg");
}

.card__meta-asset--location {
  -webkit-mask-image: url("../../icons/location-dot.svg");
  mask-image: url("../../icons/location-dot.svg");
}

.card__badge {
  /* Visual style lives in badge.css (.card__badge, .tag shared rule) */
  justify-self: start;
}

.card__title {
  margin: 0;
  font-size: var(--font-step-1);
  font-weight: var(--weight-headline);
  line-height: var(--line-height-135);
  letter-spacing: -0.01em;
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-headline), "wdth" 75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Verhindert, dass Grid/Flex den -webkit-box-Container auf die ungekürzte
     Texthöhe streckt: ohne max-block-size liegt Zeile 3 noch in der Box
     und overflow:hidden schneidet sie nicht ab. */
  max-block-size: 2lh;
}


.card__copy {
  margin: 0;
  max-inline-size: 32ch;
  font-size: var(--font-step--1);
  font-weight: var(--weight-body-default);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-050);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
}

.card__meta-copy,
.card__address {
  margin: 0;
  min-inline-size: 0;
  font-size: var(--font-step-0);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-150);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
}

.card__meta-list--sm .card__meta-copy,
.card__meta-list--sm .card__address {
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
}

.card__meta-copy strong {
  font-weight: var(--weight-headline);
  font-variation-settings: "wght" var(--weight-headline), "wdth" 75;
}

.card__address {
  display: grid;
  gap: 0;
}

.card__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-150);
  align-items: start;
}

.card__control {
  /* Secondary button used inside cards — consumes the same
     button-label tokens as .btn so every button label in the system
     renders at one consistent weight. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-button);
  background: var(--color-button-bg);
  color: var(--color-button-icon);
  font-size: var(--component-button-label-font-size-compact);
  font-weight: var(--component-button-label-font-weight);
  line-height: var(--component-button-label-line-height);
  letter-spacing: var(--component-button-label-letter-spacing);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-stretch: var(--component-button-label-font-stretch);
  font-variation-settings: var(--component-button-label-font-variation);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.card__control:hover {
  background: var(--color-button-bg-hover);
  box-shadow: var(--shadow-interactive-bottom);
}

.card__control:active {
  background: var(--color-button-bg-pressed);
  box-shadow: var(--shadow-interactive-inset);
}

.card__control--full {
  inline-size: 100%;
}

.card__control[hidden] {
  display: none;
}

.card__dismiss {
  --button-icon-only-size: 2rem;
  --button-slot-size: 1.25rem;
  --btn-border-width: 1px;
  flex-shrink: 0;
}

/* ── Abstand zwischen Content und Media ────────────────────────────────
   Bild unten (Event, Map):    body → media  → margin oben am Bild
   Bild oben  (Quartier):      media → content → margin oben am Content  */
.card__body + .card__media,
.card__copy-group + .card__media {
  margin-block-start: var(--card-gap);
}

.card__media + .card__body,
.card__media + .card__copy-group {
  margin-block-start: var(--card-gap);
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

/* Image inside card__media: fills the aspect-ratio container */
.card__media > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ── Variante: Bild in seinen eigenen Proportionen ─────────────────────────
   .card__media zwingt jedes Bild in ein 3:2-Fenster und schneidet den Rest
   per object-fit: cover ab. Für Kachelraster ist das richtig — dort sollen
   alle Kacheln gleich hoch sein. Für Hero und Bild-Text ist es falsch:
   dort steht ein einzelnes Motiv, und ein Hochformat (z. B. das A4-
   Förderlogo auf /foerderhinweis) verliert dabei Kopf und Fuß.

   Der Modifier hebt das Fenster auf, statt ein anderes Verhältnis zu
   erzwingen. Ein 3:2-Bild sieht damit exakt aus wie vorher; nur Bilder mit
   abweichendem Verhältnis ändern sich — genau die, um die es geht.

   Hinweis: Ohne feste aspect-ratio reserviert der Browser die Bildhöhe erst,
   wenn er die Datei kennt. Das <img> trägt bislang nur ein width-Attribut,
   ein Layout-Shift beim Laden ist also möglich. */
.card__media--natural {
  aspect-ratio: auto;
}

.card__media--natural > img {
  position: static;
  inline-size: 100%;
  block-size: auto;
  object-fit: initial;
}

/* Media figure wrapper: pairs a .card__media tile with its caption.
   Caption consumes the same typography spec as the system's
   detail-default-xs style (see components/detail.css) so image credits
   and captions stay consistent with the rest of the small-annotation
   text in the DS — condensed width, xs step, body-default weight. */
.card__media-figure {
  margin: 0;
  display: grid;
  gap: var(--space-100);
  align-content: start;
}

.card__media-caption {
  margin: 0;
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-default);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 75;
  color: var(--color-text-secondary);
}

.card__shell {
  gap: var(--space-200);
}

.card__shell[data-map-state="closed"] .card[data-map-card] {
  display: none;
}

.card__shell[data-map-state="open"] [data-map-open] {
  display: none;
}

.card-carousel {
  column-gap: var(--layout-section-header-gap);
  row-gap: var(--layout-section-header-gap); /* 40 px — Header → Karten */
  min-inline-size: 0;
}

/* Heading-Padding im Carousel-Header neutralisieren:
   Der Abstand kommt hier vom grid row-gap, nicht vom typografischen Rhythmus.
   (Die Headline ist in einer Flex-Zeile neben den Nav-Buttons — ihr
   padding-block-end würde sich sonst mit dem row-gap addieren.) */
.card-carousel__header :is(h1, h2, h3, h4) {
  padding-block-end: 0;
}

.card-carousel__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-200);
  min-inline-size: 0;
}

.card-carousel__nav {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  flex-shrink: 0;
}

/* Hide the nav arrows whenever everything fits into the viewport.
   The controller sets data-overflow="false" on .card-carousel when
   scrollWidth <= clientWidth, so there is nothing to navigate to. */
.card-carousel[data-overflow="false"] .card-carousel__nav {
  display: none;
}

.card-carousel__button {
  --button-icon-only-size: 3rem;
  --button-slot-size: 2.5rem;
  --btn-border-width: 1px;
}


.card-carousel__button:disabled {
  opacity: 1;
  cursor: default;
  border-color: var(--semantic-stroke-inverted);
  color: var(--semantic-stroke-inverted);
  box-shadow: none;
}

.card-carousel__button:disabled:hover,
.card-carousel__button:disabled:active {
  background: var(--color-button-bg);
  box-shadow: none;
}

.card-carousel__viewport {
  --card-carousel-focus-bleed: calc(var(--focus-ring-width) + var(--focus-ring-offset));
  --card-carousel-shadow-bleed: 0.5rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-block-start: var(--card-carousel-focus-bleed);
  padding-block-end: 0.5rem;
  padding-inline-end: var(--card-carousel-shadow-bleed);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.card-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.card-carousel__list {
  display: flex;
  gap: var(--pattern-card-gap);
}

.card-carousel__item {
  /* Default item sizing; variants below override min/max widths only */
  --card-carousel-item-min: 15rem;
  --card-carousel-item-max: 20rem;
  --card-carousel-item-preferred: 72vw;

  flex: 0 0 min(100%, clamp(var(--card-carousel-item-min), var(--card-carousel-item-preferred), var(--card-carousel-item-max)));
  min-inline-size: 0;
  scroll-snap-align: start;
}

.card-carousel__item .card {
  block-size: 100%;
}

/* Variant: only differs by card width */
.card-carousel--event .card-carousel__item {
  --card-carousel-item-preferred: 75vw;
}

@media (max-width: 639px) {
  .card-carousel--event .card-carousel__item {
    flex: 0 0 240px;
  }
}

.card-carousel--quartier .card-carousel__item {
  --card-carousel-item-min: 16rem;
  --card-carousel-item-max: 22rem;
  --card-carousel-item-preferred: 72vw;
}

/* Full-bleed viewport: shared by every carousel-hosting section */
.section-card-events .card-carousel,
.section-card-quartiers .card-carousel {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: visible;
}

.section-card-events .card-carousel__header,
.section-card-quartiers .card-carousel__header {
  inline-size: 100%;
  max-inline-size: 100%;
}

.section-card-events .card-carousel__viewport,
.section-card-quartiers .card-carousel__viewport {
  box-sizing: border-box;
  justify-self: stretch;
  margin-inline-start: calc(50% - 50vw);
  inline-size: 100vw;
  max-inline-size: 100vw;
  padding-inline: calc(((100vw - min(var(--layout-max-inline-size), 100vw)) / 2) + var(--layout-page-padding-inline));
  scroll-padding-inline: calc(((100vw - min(var(--layout-max-inline-size), 100vw)) / 2) + var(--layout-page-padding-inline));
}

/* Variant: text-only content card — no image, copy fills full width,
   title has no line-clamp (longer headings are expected here).
   Arrow icon sits in the bottom-right corner (purely visual, aria-hidden). */
.card--content {
  position: relative;
  align-content: start;
  padding-block-end: calc(var(--card-padding) + 2rem + var(--space-100));
}

.card--content .card__title {
  -webkit-line-clamp: unset;
  overflow: visible;
  hyphens: auto;
}

.card--content .card__copy {
  max-inline-size: none;
  hyphens: auto;
}

.card__arrow {
  position: absolute;
  inset-block-end: var(--card-padding);
  inset-inline-end: var(--card-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.card__arrow svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.card--interactive:hover .card__arrow {
  background: var(--color-button-bg);
  border-color: var(--color-button-border);
}

@media (min-width: 640px) {
  .card-grid--content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card {
    --card-padding: var(--space-200);
    --card-radius: var(--radius-card-lg);
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-carousel--event .card-carousel__item {
    flex-basis: 20rem;
  }

  .card-carousel--quartier .card-carousel__item {
    flex-basis: 22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--interactive,
  .card__control {
    transition: none;
  }

  .card--interactive {
    /* Don't lift — shadow still swaps, avoiding position jumps */
    --card-interactive-lift: 0;
  }

  .card-carousel__viewport {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .card {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .card--interactive {
    color: LinkText;
  }

  .card--interactive:hover,
  .card--interactive:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .card__badge {
    background: CanvasText;
    color: Canvas;
    border: 1px solid CanvasText;
  }

  .card__control {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }

  .card__control:hover,
  .card__control:focus-visible {
    background: ButtonFace;
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .card-carousel__button:disabled {
    color: GrayText;
    border-color: GrayText;
  }
}

/* ── Infofelder: Schlüssel-Wert-Paare (dl-Pattern) ─────────────────────
   Alternative zu card__meta-list wenn ausgeschriebene Text-Labels statt
   Icons gewünscht sind (z. B. „Niveau:", „Kosten:", „Anmeldung:").
   card__meta-list  = Icon-Modus  (visuell, platzsparend)
   card__info-list  = Label-Modus (verbal, tabellarisch)
   Beide leben innerhalb card__body — nie gemischt im selben Kontext.
   ──────────────────────────────────────────────────────────────────── */
.card__info-list {
  display: grid;
  gap: var(--space-100);
  margin: 0;
  padding: 0;
}

.card__info-item {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  column-gap: var(--space-200);
  align-items: baseline;
}

.card__info-label {
  margin: 0;
  font-size: var(--font-step--1);
  font-weight: var(--weight-body-default);
  line-height: var(--line-height-150);
  color: var(--color-text-muted);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 75;
}

.card__info-value {
  margin: 0;
  font-size: var(--font-step-0);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-150);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
}

/* Kompakte Variante (z.B. in Map-Popup) */
.card__info-list--sm .card__info-label,
.card__info-list--sm .card__info-value {
  font-size: var(--font-step--1);
}

/* ============================================================
   components/accordion.css
   ============================================================ */
/* Component: accordion */
.accordion-showcase {
  display: grid;
  gap: var(--pattern-showcase-gap);
}

.accordion-block {
  display: grid;
  inline-size: 100%;
}

.accordion-list {
  display: grid;
  inline-size: 100%;
}

.accordion {
  border-block-start: 1px solid var(--color-outline);
}

.accordion:last-child {
  border-block-end: 1px solid var(--color-outline);
}

.accordion__heading {
  margin: 0;
  /* Globalen Rhythmus-Abstand aufheben — Spacing übernimmt der Trigger */
  padding-block: 0;
}

.accordion__trigger {
  appearance: none;
  inline-size: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: clamp(1rem, calc(1.29vw + 0.74rem), 2rem);
  padding: var(--space-200) 0 var(--space-200) var(--space-150);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, padding-inline-start 120ms ease;
}

.accordion__trigger:hover,
.accordion__trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--color-surface-primary) 55%, transparent);
  padding-inline-start: var(--space-250);
}

.accordion__trigger:active {
  background: color-mix(in srgb, var(--color-surface-secondary) 45%, transparent);
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.accordion__title {
  display: block;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.accordion__indicator {
  position: relative;
  flex: 0 0 auto;
  inline-size: var(--pattern-disclosure-glyph-size);
  block-size: var(--pattern-disclosure-glyph-size);
  color: currentColor;
}

.accordion__dots,
.accordion__minus {
  position: absolute;
  inset: 0;
  display: block;
}

.accordion__dots::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--pattern-disclosure-dot-size);
  block-size: var(--pattern-disclosure-dot-size);
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow:
    calc(var(--pattern-disclosure-dot-offset) * -1) 0 0 currentColor,
    var(--pattern-disclosure-dot-offset) 0 0 currentColor;
}

.accordion__minus::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--pattern-disclosure-line-inline-size);
  block-size: var(--pattern-disclosure-line-block-size);
  background: currentColor;
  transform: translate(-50%, -50%);
}

.accordion__trigger[aria-expanded="true"] .accordion__dots,
.accordion__trigger[aria-expanded="false"] .accordion__minus {
  display: none;
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__panel-inner {
  display: grid;
  gap: var(--space-150);
  max-inline-size: 100%;
  padding: var(--space-200) var(--space-300) var(--space-300);
}

.accordion__panel-inner > * {
  margin: 0;
}

.accordion__panel-inner p {
  font-stretch: normal;
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default);
  font-size: var(--font-step-0);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.accordion__panel-inner ul {
  padding-inline-start: var(--space-500);
  display: block;
  list-style-type: disc;
  font-stretch: normal;
  font-size: var(--font-step-0);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default);
}

.accordion__panel-inner ul > li + li {
  margin-block-start: var(--space-100);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__trigger {
    transition: none;
  }
}

@media (forced-colors: active) {
  .accordion {
    border-block-start-color: CanvasText;
  }

  .accordion:last-child {
    border-block-end-color: CanvasText;
  }

  .accordion__trigger {
    color: ButtonText;
    background: Canvas;
  }

  .accordion__trigger:hover {
    background: Canvas;
  }

  .accordion__trigger:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .accordion__dots::before,
  .accordion__minus::before {
    background: ButtonText;
  }
}

/* ============================================================
   components/menu.css
   ============================================================ */
/* Component: menu, submenu and utility navigation */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.menu-panel {
  grid-column: 1 / -1;
  inline-size: 100%;
  display: grid;
  gap: var(--space-100);
  justify-items: start;
}

.menu-card {
  inline-size: 100%;
  display: grid;
  gap: 0;
  padding: var(--space-200) var(--space-200) var(--space-200) var(--space-300);
  background: var(--color-button-bg);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-interactive-bottom);
}

.menu-list,
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list {
  display: grid;
  gap: var(--space-100);
  inline-size: 100%;
}

.menu-list__item {
  display: grid;
  gap: 0;
}

.menu-list__item--has-submenu {
  gap: var(--space-050);
}

.menu-item {
  inline-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-050);
  align-items: start;
}

.menu-item--toggle {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.menu-item--toggle:focus-visible {
  outline: 0;
}

.menu-item--toggle:hover .menu-link__label {
  text-decoration: underline;
}

.menu-item--toggle:focus-visible .menu-link,
.menu-item--toggle:focus-visible .menu-toggle {
  box-shadow: var(--shadow-focus-inner);
}

.menu-link {
  min-inline-size: 0;
  min-block-size: var(--space-500);
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-050) var(--space-150) var(--space-050) var(--space-025);
  background: var(--color-button-bg);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-main);
  font-weight: var(--component-menu-link-font-weight);
  font-stretch: var(--component-menu-link-font-stretch);
  font-variation-settings: var(--component-menu-link-font-variation);
  letter-spacing: var(--letter-spacing-050);
  text-transform: uppercase;
  box-shadow: var(--shadow-none);
  cursor: pointer;
}

.menu-link__label {
  text-decoration: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.12em;
  text-decoration-color: currentColor;
}

.menu-link:hover .menu-link__label,
.menu-link[aria-current="page"] .menu-link__label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.12em;
}

.menu-link:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus-inner);
}

.menu-link--primary,
.menu-link--service {
  font-size: var(--component-menu-link-font-size);       /* fluid: 1.13 → 1.56rem */
  line-height: var(--component-menu-link-line-height);   /* 1.3 */
}

.menu-link--submenu {
  min-block-size: var(--space-400);
  font-size: var(--component-menu-link-font-size-submenu);      /* fluid: 1 → 1.25rem */
  line-height: var(--component-menu-link-line-height-submenu);  /* 1.35 */
}

.menu-link__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: inherit;
}

.menu-link__icon > svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  color: inherit;
  fill: currentColor;
}

.menu-link__icon > svg path {
  stroke: currentColor;
}

.menu-link__asset {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.menu-link__asset--users {
  -webkit-mask-image: url("../../icons/user-group.svg");
  mask-image: url("../../icons/user-group.svg");
}

.menu-link__asset--envelope {
  -webkit-mask-image: url("../../icons/envelope.svg");
  mask-image: url("../../icons/envelope.svg");
}

.menu-link__asset--help {
  -webkit-mask-image: url("../../icons/comments-question.svg");
  mask-image: url("../../icons/comments-question.svg");
}

.menu-toggle {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--color-button-bg);
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-none);
}

.menu-toggle__dots,
.menu-toggle__minus {
  position: relative;
  display: block;
  inline-size: var(--pattern-disclosure-glyph-size);
  block-size: var(--pattern-disclosure-glyph-size);
}

.menu-toggle__dots::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--pattern-disclosure-dot-size);
  block-size: var(--pattern-disclosure-dot-size);
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow:
    calc(var(--pattern-disclosure-dot-offset) * -1) 0 0 currentColor,
    var(--pattern-disclosure-dot-offset) 0 0 currentColor;
}

.menu-toggle__minus::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--pattern-disclosure-line-inline-size);
  block-size: var(--pattern-disclosure-line-block-size);
  background: currentColor;
  transform: translate(-50%, -50%);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__dots,
.menu-toggle[aria-expanded="false"] .menu-toggle__minus,
.menu-item--toggle[aria-expanded="true"] .menu-toggle__dots,
.menu-item--toggle[aria-expanded="false"] .menu-toggle__minus {
  display: none;
}

.submenu {
  display: grid;
  gap: var(--space-100);
}

.submenu[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .menu-panel {
    max-inline-size: 20rem;
  }
}

@media (forced-colors: active) {
  .menu-card {
    border-color: CanvasText;
    background: Canvas;
  }

  .menu-link {
    color: LinkText;
    background: Canvas;
  }

  .menu-link:hover .menu-link__label,
  .menu-item--toggle:hover .menu-link__label {
    text-decoration: underline;
  }

  .menu-link:focus-visible,
  .menu-item--toggle:focus-visible .menu-link,
  .menu-item--toggle:focus-visible .menu-toggle {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .menu-toggle {
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonText;
  }

  .menu-toggle__dots::before,
  .menu-toggle__minus::before {
    background: ButtonText;
  }
}

/* ============================================================
   components/dropdown.css
   ============================================================ */
/* Component: dropdown (select-only combobox)

   Structure:
     .dropdown                -> positioning wrapper
       .dropdown__trigger     -> inherits from .btn.btn--text-icon, so the
                                 trigger picks up the full button token
                                 chain (block-size, padding, radius,
                                 shadow, label typography) and only
                                 overrides what is dropdown-specific.
       .dropdown__panel       -> absolutely positioned popup surface
         .dropdown__list      -> role="listbox"
           .dropdown__option  -> role="option"

   The trigger carries role="combobox" + aria-haspopup="listbox" +
   aria-expanded, following the APG "select-only combobox" pattern. */

.dropdown {
  position: relative;
  display: inline-flex;
  min-inline-size: 0;
  inline-size: auto; /* Hug — Stretch via Kontext (fieldset, filter-group) */
  z-index: 0;
  isolation: isolate;
  --dropdown-trigger-gap: var(--component-dropdown-trigger-gap);
  --dropdown-panel-offset: var(--component-dropdown-panel-offset);
  --dropdown-panel-padding: var(--component-dropdown-panel-padding);
  --dropdown-option-padding-inline: var(--component-dropdown-option-padding-inline);
  --dropdown-option-padding-block: var(--component-dropdown-option-padding-block);
  --dropdown-option-min-block-size: var(--component-dropdown-option-min-block-size);
  --dropdown-label-font-size: var(--component-dropdown-label-font-size);
  --dropdown-label-line-height: var(--component-dropdown-label-line-height);
  --dropdown-label-letter-spacing: var(--component-dropdown-label-letter-spacing);
  --dropdown-label-font-weight: var(--component-dropdown-label-font-weight);
  --dropdown-label-font-stretch: var(--component-dropdown-label-font-stretch);
  --dropdown-label-font-variation: var(--component-dropdown-label-font-variation);
}

.dropdown:has(.dropdown__trigger[aria-expanded="true"]) {
  z-index: 40;
}

.dropdown__trigger {
  /* The trigger is always text+icon (label + chevron), so we pin the
     icon-start/icon-end padding here. The .btn base class already
     contributes the rest of the button sizing and shadow chain. */
  --button-height: var(--component-button-block-size); /* 44 px — wie alle Text-Buttons */
  --btn-inline-start: var(--component-button-padding-inline-start); /* 24 px */
  --btn-inline-end: var(--component-button-padding-inline-end);     /* 16 px */
  --button-label-font-size: var(--dropdown-label-font-size);
  --button-label-line-height: var(--dropdown-label-line-height);
  --button-label-letter-spacing: var(--dropdown-label-letter-spacing);
  --button-label-font-weight: var(--dropdown-label-font-weight);
  --button-label-font-stretch: var(--dropdown-label-font-stretch);
  --button-label-font-variation: var(--dropdown-label-font-variation);

  inline-size: 100%; /* füllt immer den .dropdown-Wrapper */
  block-size: var(--component-button-block-size);
  min-block-size: var(--component-button-block-size);
  padding-block: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--dropdown-trigger-gap);
  text-align: start;
  overflow: hidden;
}

.dropdown__trigger .btn__label {
  /* Placeholder-style label when no option is selected. The JS toggles
     the is-placeholder class on the trigger when user hasn't picked
     anything yet — the token still keeps weight/width, only color
     softens so the state reads as "empty".
     Breite: JS setzt min-inline-size auf .dropdown (= längste Option),
     daher kein Ellipsis nötig — der Trigger ist immer breit genug. */
  min-inline-size: 0;
  display: block;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* kein Ellipsis — JS sichert ausreichende Breite */
  color: inherit;
}

.dropdown__trigger.is-placeholder .btn__label {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ── Aktiver Filter-State: Wert gewählt ──
   Nur der Rahmen wechselt auf --color-link (visuelles Feedback dass
   ein Wert gesetzt ist). Das Label bleibt in --color-text, damit alle
   interaktiven Elemente (Button, Input, Dropdown) dieselbe Textfarbe
   haben. */
.dropdown__trigger:not(.is-placeholder) {
  --color-button-border: var(--color-link);
  border-color: var(--color-link);
}

.dropdown__trigger .btn__slot {
  margin-inline-start: auto;
  flex: none;
  inline-size: var(--component-button-slot-size);
  block-size: var(--component-button-slot-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}

.dropdown__trigger .btn__slot > svg {
  inline-size: 100%;
  block-size: 100%;
}

.dropdown__trigger[aria-expanded="true"] .btn__slot {
  transform: rotate(180deg);
}

.dropdown__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--dropdown-panel-offset));
  inset-inline-start: 0;
  z-index: 50;
  inline-size: 100%;
  min-inline-size: 100%;
  padding: var(--dropdown-panel-padding);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-interactive-bottom);
  overflow: hidden;
}

.dropdown__panel[hidden] {
  display: none;
}

.dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-050);
  min-inline-size: 0;
}

.dropdown__option {
  /* Options reuse the button-label typography tokens so they read at
     the same weight/width as the trigger label — keeps the component
     visually cohesive with the rest of the button family. */
  min-block-size: var(--dropdown-option-min-block-size);
  display: flex;
  align-items: center;
  gap: var(--space-100);
  padding-block: var(--dropdown-option-padding-block);
  padding-inline: var(--dropdown-option-padding-inline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  font-size: var(--dropdown-label-font-size);
  line-height: var(--dropdown-label-line-height);
  letter-spacing: var(--dropdown-label-letter-spacing);
  font-weight: var(--dropdown-label-font-weight);
  font-stretch: var(--dropdown-label-font-stretch);
  font-variation-settings: var(--dropdown-label-font-variation);
  white-space: normal;
  overflow-wrap: break-word;
}

.dropdown__option:hover,
.dropdown__option.is-active {
  background: color-mix(in srgb, var(--color-surface-secondary) 72%, var(--color-surface-primary));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.dropdown__option[data-dropdown-value=""],
.dropdown__option[hidden] {
  display: none;
}

.dropdown__option[aria-selected="true"] {
  background: var(--color-surface-inverted);
  color: var(--color-content-on-inverted);
  font-weight: var(--weight-body-semibold);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
  text-decoration: none;
}

.dropdown__option[aria-disabled="true"] {
  color: var(--color-button-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown__trigger .btn__slot {
    transition: none;
  }
}

@media (forced-colors: active) {
  .dropdown__panel {
    border-color: CanvasText;
    background: Canvas;
  }

  .dropdown__option {
    color: CanvasText;
    background: Canvas;
  }

  .dropdown__option:hover,
  .dropdown__option.is-active {
    background: Highlight;
    color: HighlightText;
  }

  .dropdown__option[aria-selected="true"] {
    background: Highlight;
    color: HighlightText;
  }

  .dropdown__option[aria-disabled="true"] {
    color: GrayText;
  }
}

/* ============================================================
   components/toggle-switch.css
   ============================================================ */
/* Component: toggle-switch
   Sliding switch with aria-checked state and animated thumb.
   Structure:
     button.toggle-switch[role="switch"][aria-checked="false|true"]
       span.toggle-switch__track   (aria-hidden)
         span.toggle-switch__thumb
       span.toggle-switch__label
   ─────────────────────────────────────────────────────────────── */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-150);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-main);
  font-size: var(--font-step-0);
  font-weight: var(--weight-body-default);
  line-height: var(--line-height-140);
  color: var(--color-text);
  text-align: start;
  white-space: nowrap;
  flex: none;
  /* WCAG 2.5.5: Minimum touch target 44 × 44 px */
  min-block-size: 2.75rem;
}

/* ── Track (Pill) ── */
.toggle-switch__track {
  position: relative;
  display: block;
  inline-size: 2.75rem;   /* 44 px */
  block-size: 1.5rem;     /* 24 px */
  border-radius: var(--radius-pill);
  /* Off-Track: 40% → Umriss der UI-Komponente erreicht ~3:1 (WCAG 1.4.11) */
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
  flex: none;
  transition: background 200ms ease;
}

/* ── Thumb (Punkt) ── */
/* Startposition: 2 px vom linken Rand
   Endposition:   44 − 20 − 2 = 22 px → Versatz 20 px = 1.25rem */
.toggle-switch__thumb {
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  inline-size: 1.25rem;   /* 20 px */
  block-size: 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 200ms ease;
}

/* ── Aktiver Zustand ── */
.toggle-switch[aria-checked="true"] .toggle-switch__track {
  background: var(--color-link);
}

.toggle-switch[aria-checked="true"] .toggle-switch__thumb {
  transform: translateX(1.25rem);
}

/* ── Hover ── */
.toggle-switch:hover .toggle-switch__track {
  background: color-mix(in srgb, var(--color-text) 36%, transparent);
}

.toggle-switch[aria-checked="true"]:hover .toggle-switch__track {
  background: color-mix(in srgb, var(--color-link) 82%, transparent);
}

/* ── Focus ── */
.toggle-switch:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring, currentColor);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .toggle-switch__track,
  .toggle-switch__thumb { transition: none; }
}

/* ── Forced colors ── */
@media (forced-colors: active) {
  .toggle-switch__track {
    border: 2px solid ButtonText;
    background: ButtonFace;
  }
  .toggle-switch__thumb { background: ButtonText; }

  .toggle-switch[aria-checked="true"] .toggle-switch__track {
    background: Highlight;
  }
  .toggle-switch[aria-checked="true"] .toggle-switch__thumb {
    background: HighlightText;
  }
}

/* ============================================================
   patterns/layout-shell.css
   ============================================================ */
/* Pattern: classic page shell (header / main / footer) */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-100);
  inset-inline-start: var(--space-100);
  z-index: 100;
  padding: var(--space-100) var(--space-200);
  background: var(--color-button-bg);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-interactive-bottom);
}

.skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus-inner);
}

.site-main:focus {
  outline: 0;
}

.site-header,
.site-footer {
  position: static;
}

.site-header {
  min-height: var(--header-height);
  background: var(--color-header-bg);
  color: var(--color-header-text);
}

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-main {
  background: var(--color-main-bg);
  color: var(--color-main-text);
}

/* Landmark content follows the same horizontal grid logic */
.shell-inner {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  padding-inline: var(--layout-page-padding-inline);
}

.landmark-content {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 100%;
  font-weight: 700;
  letter-spacing: 0.01em;
  outline: 2px solid var(--color-outline);
  outline-offset: 0;
}

.site-header .shell-inner {
  min-height: var(--layout-header-block-size);
  align-items: center;
}

@media (min-width: 1536px) {
  .shell-inner {
    max-width: var(--layout-max-inline-size);
    margin-inline: auto;
  }
}

@media (forced-colors: active) {
  .skip-link {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }

  .skip-link:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .site-header,
  .site-footer {
    background: Canvas;
    color: CanvasText;
  }

  .site-main {
    background: Canvas;
    color: CanvasText;
  }

  .landmark-content {
    outline-color: CanvasText;
  }
}

/* ============================================================
   patterns/site-navigation.css
   ============================================================ */
/* Pattern: responsive site header with menu panel and search
   --_brand-w: steuert Logo-Breite UND Linienlänge (::after) auf beiden Varianten.
   Fluid abgeleitet aus --layout-header-block-size × Logo-Ratio. */

.site-header--nav {
  --_brand-w: calc((var(--layout-header-block-size) - var(--space-200)) * 207 / 72);
  position: relative;
  z-index: 40;
  background: var(--color-bg);
  color: var(--color-text);
  isolation: isolate;
}

/* Beide Header-Varianten: Shell dehnt sich, kein Layout-Shell-Gap */
.site-header--nav .shell-inner,
.site-header--inline-nav .shell-inner {
  align-items: stretch;
  min-height: 0;
}

.shell-inner--nav {
  position: relative;
}

.site-nav,
.site-search-shell__inner,
.site-menu-shell .menu-panel {
  grid-column: 1 / -1;
}

.site-nav {
  display: flex;
  align-items: flex-end;       /* mobil < 640px: Buttons unten */
  justify-content: space-between;
  gap: var(--space-200);
}

.site-nav__left {
  flex: 1 1 auto;
  min-inline-size: 10rem;
  display: flex;
  align-items: center;
  padding-block: 0;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-150), calc(0.53vw + 0.64rem), var(--space-200));
}

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-150);
  min-inline-size: 0;
  min-block-size: var(--component-nav-toggle-size);
}

.header-search__inline {
  display: none;
}

/* Search toggle icon swap — mirrors burger menu pattern */
.btn-icon--search .icon-close {
  display: none;
}

.btn-icon--search[aria-expanded="true"] .icon-search {
  display: none;
}

.btn-icon--search[aria-expanded="true"] .icon-close {
  display: block;
}

.site-brand {
  flex: none;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  padding-block-start: var(--space-200);
  color: var(--color-text);
  text-decoration: none;
}

.site-brand__logo {
  inline-size: var(--_brand-w);
  block-size: auto;
  aspect-ratio: 207 / 72;        /* BBN-Ratio; Spracherwerb überschreibt auf 128/80 */
  display: block;
  color: inherit;
  overflow: visible;
}

.site-brand__logo > svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  color: inherit;
  overflow: visible;
}

.site-brand__logo > svg path {
  fill: currentColor;
}

.site-brand__logo > img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: contain;
}

/* Beide Panels: immer absolut positioniert — kein Layout-Shift auf keinem Breakpoint */
.site-search-shell,
.site-menu-shell {
  position: absolute;
  top: calc(100% + var(--space-150));
  left: 0;
  right: 0;
  z-index: 20;
  padding-block-start: 0;
  pointer-events: none;
}

.site-search-shell > *,
.site-menu-shell > * {
  pointer-events: auto;
}

.site-search-shell[hidden],
.site-menu-shell[hidden] {
  display: none !important;
}

.site-search-shell__inner,
.site-search-form {
  display: grid;
}

/* Gemeinsame Box — expandiert nach unten wenn Ergebnisse erscheinen */
.site-search-shell__inner {
  gap: 0;
  background: var(--color-button-bg);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-interactive-bottom);
  overflow: hidden;
}

/* Form: transparent, Box liegt auf dem Wrapper */
/* Feld links, Submit-Button immer rechts */
.site-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-150);
  align-items: center;
  padding: var(--space-200);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Suchfeld: rund, mind. 48 px hoch, 24 px Innenabstand links/rechts */
.search-field {
  min-block-size: 3rem;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--space-100);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-primary);
  padding-inline-start: 1.5rem;
  padding-inline-end: var(--space-100);
}

/* Fokusring außen auf dem Wrapper, nicht auf dem Input */
.search-field:focus-within {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.search-field input:focus-visible {
  outline: none;
}

.search-field input {
  flex: 1 1 auto;
  block-size: 100%;
}

.site-search-form input,
.header-search__inline input {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
}

.site-search-form input::placeholder,
.header-search__inline input::placeholder {
  color: var(--color-text-secondary);
}

.site-search-form input[type="search"]::-webkit-search-decoration,
.site-search-form input[type="search"]::-webkit-search-cancel-button,
.site-search-form input[type="search"]::-webkit-search-results-button,
.site-search-form input[type="search"]::-webkit-search-results-decoration,
.header-search__inline input[type="search"]::-webkit-search-decoration,
.header-search__inline input[type="search"]::-webkit-search-cancel-button,
.header-search__inline input[type="search"]::-webkit-search-results-button,
.header-search__inline input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-search-form input[type="search"]::-ms-clear,
.site-search-form input[type="search"]::-ms-reveal,
.header-search__inline input[type="search"]::-ms-clear,
.header-search__inline input[type="search"]::-ms-reveal {
  display: none;
  inline-size: 0;
  block-size: 0;
}

.search-clear-button {
  --button-icon-only-size: 1.5rem;
  --button-slot-size: 1.5rem;
  --btn-border-width: 0;
  flex: none;
  background: transparent;
  box-shadow: none;
}

.search-clear-button:hover {
  background: transparent;
  box-shadow: none;
}

.search-clear-button[hidden] {
  display: none;
}

.site-search-submit {
  /* Sizing wird per Breakpoint gesetzt — kein globales padding-Override */
}

/* Mobil (< 640 px): nur Lupe sichtbar — Label per sr-only ausblenden */
.site-search-submit .btn__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-menu-shell .menu-panel {
  justify-self: start;
}

/* Mobile (< 480 px): Suchfeld + Ergebnisse nutzen nur verfügbaren Platz */
@media (max-width: 479px) {
  .site-search-form {
    min-inline-size: 0;
  }

  .search-field {
    min-inline-size: 0;
    flex-shrink: 1;
  }

  /* Submit: icon-only — quadratisch, kein Padding */
  .site-search-submit {
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
  }

  /* Ergebnis-Items: Meta unter dem Body stapeln statt rechts daneben */
  .search-result-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .search-result-item__body {
    flex: 1 1 100%;
  }

  .search-result-item__meta {
    flex: 0 0 auto;
    padding-block-start: 0;
  }

  /* Pfeil auf mobile ausblenden — spart 3rem, verhindert Clipping */
  .search-result-item__arrow {
    display: none;
  }
}

@media (min-width: 640px) {
  /* Ab 640px: Buttons zentriert (wie vorher) — flex-end nur mobil */
  .site-nav {
    align-items: center;
    position: relative;   /* ::after-Anker für die Divider-Linie */
  }

  .site-nav::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: calc(100% - var(--_brand-w) - var(--space-200));
    border-block-end: 2px solid var(--semantic-stroke-divider);
  }

  /* Ab 640 px: btn--text-icon liefert Padding + Typographie vollständig via Token */
  .site-search-submit {
    inline-size: auto;
    block-size: var(--component-button-block-size);
  }

  .site-search-submit .btn__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }

}


@media (prefers-reduced-motion: reduce) {
  .header-search {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-header--nav {
    background: Canvas;
    color: CanvasText;
  }

  /* Linie läuft jetzt via .site-nav::after — forced-colors greift automatisch */
  .site-nav::after {
    border-block-end-color: CanvasText;
  }

  .site-brand {
    color: CanvasText;
  }

  /* Box liegt jetzt auf dem Wrapper, nicht mehr auf der Form */
  .site-search-shell__inner {
    background: Canvas;
    border-color: CanvasText;
  }

  .search-field {
    border-color: CanvasText;
    background: Canvas;
  }

  .site-search-form input,
  .header-search__inline input {
    color: CanvasText;
  }

  .site-search-form input::placeholder,
  .header-search__inline input::placeholder {
    color: GrayText;
  }

}

/* ── Search Results Panel (Sketch) ─────────────────────────── */

.search-results {
  padding-block: var(--space-200);
  padding-inline: 1.5rem;
  border-block-start: 1px solid var(--color-outline);
  display: grid;
  gap: var(--space-200);
}

.search-results[hidden] {
  display: none;
}

.search-results__intro {
  display: grid;
  gap: var(--space-050);
}

.search-results__headline {
  margin: 0;
  font-size: var(--font-step-1);
  font-weight: var(--weight-headline);
  line-height: var(--line-height-135);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-headline), "wdth" 75;
}

.search-results__hint {
  margin: 0;
  font-size: var(--font-step--1);
  color: var(--color-text-secondary);
}

/* ── Tabs ── */
.search-results__tablist {
  display: flex;
  gap: 0;
  border-block-end: 1px solid var(--color-outline);
}

.search-tab {
  padding-block: var(--space-100);
  padding-inline: var(--space-150);
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  background: transparent;
  color: var(--color-text-secondary);
  /* Button-Compact-Typographie — font: inherit in reset.css stellt sicher,
     dass das variable Font auf <button>-Elementen greift. */
  font-size: var(--component-button-label-font-size-compact);
  font-weight: var(--component-button-label-font-weight-compact); /* Fallback für non-variable */
  line-height: var(--component-button-label-line-height-compact);
  letter-spacing: var(--component-button-label-letter-spacing-compact);
  /* Condensed: Literalwerte statt var() in den Achsen — keine nested-var() Fallstricke */
  font-stretch: 75%;
  font-variation-settings: "wght" 600, "wdth" 75;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.search-tab:hover {
  color: var(--color-text);
}

.search-tab[aria-selected="true"] {
  color: var(--color-text);
  border-block-end-color: var(--color-text);
}

.search-tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Tab Panels ── */
.search-results__panel {
  display: grid;
  padding-inline-start: var(--space-150);
}

.search-results__panel[hidden] {
  display: none;
}

.search-results__placeholder {
  margin: 0;
  padding-block: var(--space-300);
  font-size: var(--font-step--1);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ── Result list ── */
.search-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-200);
  padding-block: var(--space-150);
  padding-inline: var(--space-050);
  border-block-end: 1px solid var(--color-outline);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 120ms ease;
  border-radius: var(--radius-sm);
  margin-inline: calc(var(--space-050) * -1);
}

.search-result-list li:last-child .search-result-item {
  border-block-end: none;
}

.search-result-item:hover {
  background: var(--color-surface-secondary, color-mix(in srgb, var(--color-text) 5%, transparent));
}

.search-result-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.search-result-item__body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  gap: var(--space-050);
}

.search-result-item__title {
  display: block;
  font-size: var(--font-step-0);
  font-weight: var(--weight-headline);
  line-height: var(--line-height-135);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-headline), "wdth" 75;
}

.search-result-item__arrow {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--color-button-bg);
  border: 1px solid var(--color-button-border);
  color: var(--color-button-icon);
  border-radius: var(--radius-pill);
}

.search-result-item__arrow > svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: block;
  flex: none;
}

.search-result-item__excerpt {
  font-size: var(--font-step--1);
  color: var(--color-text-secondary);
  line-height: var(--line-height-150);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-item__meta {
  flex: none;
  font-size: var(--font-step--1);
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding-block-start: 0.15em;
}

/* ── Search highlight (matched text) ── */
.search-result-item__title mark,
.search-result-item__excerpt mark {
  background: var(--foundation-red-100);
  color: inherit;
  font-style: normal;
  border-radius: 2px;
  padding-inline: 0.1em;
}

@media (forced-colors: active) {
  .search-result-item__title mark,
  .search-result-item__excerpt mark {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-tab {
    transition: none;
  }
}

@media (forced-colors: active) {
  .search-results {
    border-block-start-color: CanvasText;
  }

  .search-results__tablist {
    border-block-end-color: CanvasText;
  }

  .search-tab[aria-selected="true"] {
    border-block-end-color: Highlight;
    color: Highlight;
  }
}


/* ── Inline Nav Variant (.site-header--inline-nav) ──────────────
   DOM: [burger] [nav-links] [search] [logo]
   Logo in-flow, margin-inline-start:auto → rechts.
   --_brand-w: fluid aus (Header-Höhe + 24px Überhang) × Ratio 128:80. */
.site-header--inline-nav {
  --_brand-w: calc((var(--layout-header-block-size) + 24px) * 128 / 80);
}

.site-header--inline-nav .site-nav {
  justify-content: flex-start;
  gap: var(--space-100);   /* Icon-Buttons (Home/Suche) enger zusammen */
  min-block-size: var(--layout-header-block-size);
  max-block-size: var(--layout-header-block-size);
  overflow: visible;   /* Logo-Überhang; Safari ≥ 15 verarbeitet overflow:visible auf Flex-Container korrekt */
  padding-block: 0;
}

/* Burger: flex-none, ganz links */
.inline-nav__burger {
  flex: none;
}

/* Inline nav links: mobil ausgeblendet */
.inline-nav__links {
  display: none;
}

/* Search: flex-none, ganz links */
.site-header--inline-nav .header-search {
  flex: none;
  min-block-size: 0;
}

/* Home-Button (Iconbutton wie die Suche), direkt neben der Suche */
.site-header--inline-nav .inline-nav__home {
  flex: none;
}

/* Brand: letztes Item, margin-auto → rechts; align-self:flex-start → oben bündig */
.site-header--inline-nav .site-brand {
  flex: none;
  margin-inline-start: auto;
  inline-size: var(--_brand-w);
  align-self: flex-start;
  block-size: calc(var(--layout-header-block-size) + 24px); /* 24px Überhang */
  padding-block-start: 0;
}

/* Logo-Ratio 128:80 (Spracherwerb SVG) — überschreibt BBN 207:72 */
.site-header--inline-nav .site-brand__logo {
  aspect-ratio: 128 / 80;
}

/* Logo-Farben: Globalregel setzt fill:currentColor — hier explizit überschreiben */
.site-header--inline-nav .site-brand__logo > svg > path:first-child {
  fill: #E20020;
}
.site-header--inline-nav .site-brand__logo > svg > path:last-child {
  fill: #ffffff;
}

/* ≥1024px: show nav links, hide burger */
@media (min-width: 1024px) {
  /* Burger hidden — nav links take over */
  .inline-nav__burger {
    display: none;
  }

  /* Nav links: zentriert wie der Suchbutton */
  .inline-nav__links {
    display: flex;
    flex: none;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
  }

  .inline-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
  }


  /* Suche, Home-Button und Menü vertikal auf die Mitte des Logos ausrichten.
     Das Logo hängt 24px unter die Leiste (siehe .site-brand block-size),
     seine Mitte liegt also 12px tiefer als die Leistenmitte. */
  .site-header--inline-nav .header-search,
  .site-header--inline-nav .inline-nav__home,
  .site-header--inline-nav .inline-nav__links {
    align-self: center;
    transform: translateY(var(--space-150)); /* halber Logo-Überhang (24px) → Logomitte */
  }

  /* Größerer Abstand von den Icon-Buttons zu den Menüpunkten */
  .site-header--inline-nav .inline-nav__links {
    margin-inline-start: var(--space-300);
  }

  /* ── Zwei-Ebenen-Navigation: Hauptpunkte mit Chevron ── */
  .inline-nav__item { display: flex; }

  .inline-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-100);
    padding-block: var(--space-150);
    padding-inline: var(--space-150);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-family-main);
    font-size: var(--component-menu-link-font-size);
    font-weight: var(--component-menu-link-font-weight);
    font-stretch: var(--component-menu-link-font-stretch);
    font-variation-settings: var(--component-menu-link-font-variation);
    letter-spacing: var(--letter-spacing-050);
    /* Kundenwunsch: keine Großbuchstaben im Menü */
    text-transform: none;
  }

  .inline-nav__toggle:hover .inline-nav__toggle-label {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.12em;
  }

  .inline-nav__toggle:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus-inner);
  }

  .inline-nav__chevron {
    display: inline-flex;
    inline-size: 0.8em;
    block-size: 0.8em;
    transition: transform 150ms ease;
  }

  .inline-nav__chevron svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .inline-nav__toggle[aria-expanded="true"] .inline-nav__chevron {
    transform: rotate(180deg);
  }

  /* ── Aufgeklappte Unterpunkte: absolute Zeile unter der Nav-Leiste ── */
  .site-header--inline-nav .inline-subnav {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 20;
    padding-inline-start: var(--layout-page-padding-inline);
    /* rechts Platz fürs Logo reservieren → Unterpunkte brechen in eine 2. Zeile
       um, statt das Logo zu überlagern (Problem ab ~1333px) */
    padding-inline-end: calc(var(--layout-page-padding-inline) + var(--_brand-w) + var(--space-200));
    pointer-events: none;
  }

  .inline-subnav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-100) var(--space-300);
    list-style: none;
    margin: 0;
    padding-block: var(--space-100);
    /* space-150 vorne → Unterpunkte linksbündig mit dem Hauptmenü-Label */
    padding-inline: var(--space-150) 0;
    /* Liste nur sichtbar wenn geöffnet (sonst [hidden]) → darf Hover/Klicks fangen,
       damit das Untermenü bei Hover offen bleibt. Kein Hintergrund → Logo frei. */
    pointer-events: auto;
  }

  .inline-subnav__link {
    color: var(--color-text);
    text-decoration: none;
    pointer-events: auto;
    /* gleiche Typografie wie die Hauptmenüpunkte, nur nicht in Großbuchstaben */
    font-family: var(--font-family-main);
    font-size: var(--component-menu-link-font-size);
    font-weight: var(--component-menu-link-font-weight);
    font-stretch: var(--component-menu-link-font-stretch);
    font-variation-settings: var(--component-menu-link-font-variation);
    letter-spacing: var(--letter-spacing-050);
    text-transform: none;
    padding-block: var(--space-050);
  }

  .inline-subnav__link:hover,
  .inline-subnav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.12em;
  }

  .inline-subnav__link:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus-inner);
  }
}

/* Divider-Linie unter der Navi nur auf der Spracherwerb-Variante entfernen */
.site-header--inline-nav .site-nav::after {
  display: none;
}

/* Kundenwunsch: keine Großbuchstaben im Menü (Spracherwerb, mobiles Burger-Menü) */
.site-header--inline-nav .menu-link {
  text-transform: none;
}

/* Subnav-Container + einzelne Listen: standardmäßig aus (Mobile / geschlossen) */
.inline-subnav {
  display: none;
}

.inline-subnav__list[hidden] {
  display: none;
}

/* Ab 1536px zentriert sich die Shell (max-width + margin:auto) — die Subnav
   muss dieselbe Zentrierung übernehmen, sonst startet sie nicht unter dem Menü. */
@media (min-width: 1536px) {
  .site-header--inline-nav .inline-subnav {
    max-width: var(--layout-max-inline-size);
    margin-inline: auto;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .inline-nav__chevron {
    transition: none;
  }
}

/* TYPO3-Ergänzung (nicht in der Vorlage): Hauptpunkte ohne Unterseiten werden
   als <a class="inline-nav__toggle"> ohne Chevron gerendert. */
@media (min-width: 1024px) {
  a.inline-nav__toggle {
    text-decoration: none;
  }
}

/* ============================================================
   patterns/site-footer.css
   ============================================================ */
/* Pattern: site-wide footer

   Mirrors the shell-inner grid logic used by the header so the three
   content blocks (link list / legal list / partner logos) align to the
   same outer padding, then separates columns at md+ using the existing
   layout grid. The bottom copyright line sits on its own row so it can
   hold up regardless of how much content lands in the columns.

   Structure (see index.html):
     footer.site-footer
       .shell-inner
         .site-footer__inner
           .site-footer__block--links     -> link list (utility nav)
           .site-footer__block--legal     -> legal link list
           .site-footer__block--partners  -> partner logo strip
         .site-footer__meta
           .site-footer__copyright        -> small legal line */

.site-footer {
  margin-block-start: var(--space-600);
  padding-block: var(--space-600) var(--space-400);
  background: var(--color-surface-inverted);
  color: var(--color-content-on-inverted);

  /* Token-Overrides für invertierte Oberfläche — nur Systemfarben, kein color-mix.
     Kontraste gegen brand-800 (#18416b, L=0.0505):
     --color-text        brand-200  #cfd8e1  7.24:1 ✓
     --color-text-muted  brand-200  #cfd8e1  7.24:1 ✓  (kein inverted-muted-Token vorhanden)
     --color-link        blue-300   #cacdf6  6.76:1 ✓
     --color-link-hover  blue-200   #d2d5f7  7.23:1 ✓
     --color-outline-soft brand-600 #567596  dekorativ (Trennlinie, kein Text) */
  --color-text:         var(--semantic-content-inverted);
  --color-text-muted:   var(--semantic-content-inverted);
  --color-link:         var(--foundation-blue-300);
  --color-link-hover:   var(--foundation-blue-200);
  --color-outline-soft: var(--foundation-brand-600);
  --color-media-placeholder-bg:     var(--foundation-brand-900);
  --color-media-placeholder-stroke: var(--foundation-brand-600);
}

.site-footer .shell-inner {
  row-gap: var(--space-500);
}

.site-footer__inner {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-500);
}

.site-footer__block {
  display: grid;
  gap: var(--space-200);
  min-inline-size: 0;
}

.site-footer__eyebrow {
  margin: 0;
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-150);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 100;
  color: var(--color-text-muted);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-200);
}

.site-footer__link {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-step-0);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-050);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
  transition: color 120ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* Partner logo strip: each tile reuses the media-placeholder visual
   language (1px outline + diagonal crosses) so partner art blocks read
   as "asset slot" until real SVGs replace them. The label inside each
   tile is a sr-only text so the component is accessible without
   requiring external image assets. */
.site-footer__partners {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  align-items: center;
}

.site-footer__partner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(7rem, 18vw, 11rem);
  aspect-ratio: 16 / 9;
  padding: var(--space-150);
  border: 1px solid var(--color-media-placeholder-stroke);
  background: var(--color-media-placeholder-bg);
  overflow: hidden;
  color: var(--color-text);
}

.site-footer__partner img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  display: block;
}

.site-footer__partner-label {
  position: relative;
  z-index: 1;
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-semibold);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-050);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-semibold), "wdth" 75;
  text-align: center;
  padding-inline: var(--space-100);
  background: var(--color-media-placeholder-bg);
}

.site-footer__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  align-items: baseline;
  justify-content: space-between;
  padding-block-start: var(--space-300);
  border-block-start: 1px solid var(--color-outline-soft);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--font-step--1);
  font-weight: var(--weight-body-default);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-050);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
}

/* Mobile: Links + Rechtliches nebeneinander, Partners darunter */
.site-footer__inner {
  grid-template-columns: auto auto;
}

.site-footer__block--partners {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: auto auto 1fr;
    row-gap: var(--space-600);
    column-gap: var(--space-1000);
    align-items: start;
  }

  .site-footer__block--partners {
    grid-column: auto;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__link {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-footer {
    background: Canvas;
    color: CanvasText;
  }

  .site-footer__link {
    color: LinkText;
  }

  .site-footer__link:hover,
  .site-footer__link:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .site-footer__partner {
    border-color: CanvasText;
    background: Canvas;
  }

  .site-footer__partner-label {
    background: Canvas;
    color: CanvasText;
  }

  .site-footer__meta {
    border-block-start-color: CanvasText;
  }
}

/* ============================================================
   patterns/section.css
   ============================================================ */
/* Pattern: main sections */
.section {
  position: relative;
  isolation: isolate;
}

.section--hero {
  padding-block-start: var(--layout-section-hero-padding-block-start);
  padding-block-end: var(--layout-section-hero-padding-block-end);
  min-block-size: 320px;
}

.section--surface {
  --section-surface-bg: transparent;
}

.section--surface::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 100vw;
  transform: translateX(-50%);
  background: var(--section-surface-bg);
  z-index: -1;
}

.section--surface-base {
  --section-surface-bg: var(--color-section-surface-base);
}

.section--surface-primary {
  --section-surface-bg: var(--color-section-surface-primary);
}

.section--surface-secondary {
  --section-surface-bg: var(--color-section-surface-secondary);
}

.section--surface-inverted {
  --section-surface-bg: var(--color-section-surface-inverted);
}

.section__stack {
  display: grid;
  row-gap: var(--layout-section-content-gap);
}

.section__stack--wide,
.section__stack--offset {
  grid-column: 1 / -1;
}

/* Event-Carousel: kein outline-clip, overflow sichtbar für Scroll-Shadow */
.section-card-events {
  outline: 0;
  overflow: visible;
}

@media (min-width: 1024px) {
  .section__stack--wide {
    grid-column: 1 / span 9;
  }

  .section__stack--offset {
    grid-column: 4 / -1;
  }
}

@media (forced-colors: active) {
  .section--surface::before {
    background: Canvas;
  }
}

/* ============================================================
   patterns/content-pages.css
   ============================================================ */
/* Pattern: editorial content pages
   Base classes:       content-page__*   (Über uns, Kontakt, FAQ, Quartier)
   Quartier-extras:    quarter-page__*   (Karte, Orte, Angebote-Grid, Actions)
   Accordion section:  content-page__accordion-section / __accordion-title
   ─────────────────────────────────────────────────────────────────────────
   Alle redaktionellen Seiten nutzen dieselbe Basis. Nur quartier-spezifische
   Layout-Elemente (Karte, Orts-Liste, Angebots-Grid) tragen den quarter-page
   Präfix. */

/* ── Sections: volle Grid-Breite ── */
.content-page__hero,
.content-page__section {
  grid-column: 1 / -1;
}

/* ── Content-Block: leichter Container ohne Section-Padding ── */
.content-block {
  grid-column: 1 / -1;
  padding-block-start: var(--layout-section-content-gap);
}


/* ── Section-Inner: vertikaler Stack mit Gap ── */
.content-page__hero-inner {
  display: grid;
  gap: var(--layout-section-content-gap);
  align-content: start;
}

.content-page__section-inner {
  display: grid;
  gap: 0;
  align-content: start;
}

/* ── Text-Stacks ── */
.content-page__intro,
.content-page__prose,
.content-page__copy {
  display: grid;
  /* gap: var(--space-250); — temporär entfernt, Rhythmus nur über heading padding */
  align-content: start;
}

.content-page__eyebrow { margin: 0; }

.content-page__title,
.content-page__section-title { margin: 0; }

/* Vertikaler Rhythmus: → headline.css (global) */

.content-page__lead {
  margin: 0;
}

.content-page__intro p,
.content-page__prose p,
.content-page__copy p {
  margin: 0;
}

/* Listen nach einem Absatz: 40 px Einrückung links */
.content-page__prose p + ul,
.content-page__prose p + ol,
.content-page__copy p + ul,
.content-page__copy p + ol {
  padding-inline-start: var(--space-500); /* 40 px */
}

/* Link-Farbe und Underline-Offset: global in base.css */

/* strong/b: Basis-Regel in foundations/base.css — kein Override nötig. */

/* ── Split-Layout (Sidebar + Content) ── */
.content-page__split {
  display: grid;
  gap: 0;
  align-items: start;
}

.content-page__sidebar,
.content-page__content {
  display: grid;
  /* gap: var(--space-250); — temporär entfernt, Rhythmus nur über heading padding */
  align-content: start;
}

/* ── Media / Bild-Platzhalter ── */
.content-page__media-figure {
  display: grid;
  gap: var(--space-100);
  margin: 0;
}

.content-page__media { min-block-size: 20rem; }
.content-page__caption { margin: 0; }

/* ── Hero-Media (Bild neben Hero-Intro) ── */
/* Auf Mobile ausgeblendet, ab 1024 px sichtbar (via Desktop-MQ unten) */
.content-page__hero-media {
  display: none;
}

/* ── Kontakt-Grid ── */
.content-page__contact-grid {
  display: grid;
  gap: var(--space-250);
}

.content-page__contact-card { block-size: 100%; }
.content-page__contact-card .card__header { gap: var(--space-150); }
.content-page__contact-card .card__body { gap: var(--space-150); }
.content-page__contact-label { margin: 0; }
.content-page__contact-copy { margin: 0; }

.content-page__contact-stack {
  display: grid;
  gap: var(--space-050);
}

.content-page__contact-stack > * { margin: 0; }

/* ── Accordion-Section: eigene Section mit Headline + gestackten Accordions ── */
.content-page__accordion-section {
  display: grid;
  gap: var(--space-400);
}

/* Accordion-Section innerhalb einer section-inner: 24 px Abstand nach oben */
.content-page__section-inner > .content-page__accordion-section {
  padding-block-start: var(--space-300); /* 24 px */
}

/* 24 px nach unten nur wenn ein p folgt */
.content-page__section-inner > .content-page__accordion-section:has(+ p) {
  padding-block-end: var(--space-300); /* 24 px */
}

.content-page__accordion-title { margin: 0; }

/* ── Quartier-spezifisch: Karte ── */

.quarter-page__map-figure {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-block-start: var(--space-400); /* 32 px Abstand nach oben — alle Breakpoints */
  block-size: 480px;
  position: relative;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (min-width: 480px) {
  .quarter-page__map-figure {
    block-size: 45rem; /* 720px */
  }
}

/* Dropdown-Breite auf Mobile begrenzen */
.quarter-page__map-dropdown {
  max-inline-size: 24rem;
}

/* ── Map-Controls: Fieldset-Reset + untereinander auf Mobile ── */
.content-page__map-section .quarter-page__map-controls {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  align-self: start;
  align-items: stretch;
  inline-size: 100%;
}

@media (min-width: 640px) {
  .content-page__map-section .quarter-page__map-controls {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* Dropdown wächst, kein max-inline-size */
.content-page__map-section .quarter-page__map-controls .quarter-page__map-dropdown {
  flex: 1 1 auto;
  min-inline-size: 10rem;
  max-inline-size: none;
}

/* Dropdown + Trigger füllen volle Breite des Controls-Wrappers */
.quarter-page__map-controls .quarter-page__map-dropdown .dropdown,
.quarter-page__map-controls .quarter-page__map-dropdown .dropdown__trigger {
  inline-size: 100%;
}

/* Toggle-Label: condensed */
.content-page__map-section .toggle-switch__label {
  font-stretch: var(--width-condensed);
  font-variation-settings: "wdth" 75;
}

/* ── Map-Legende: Streifen am unteren Rand der figure ── */
.quarter-page__map-legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-200);
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-100);
  background: transparent;
}

.quarter-page__map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--font-step--1);
  color: var(--color-text);
}

.quarter-page__map-legend-dot {
  display: block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
  flex: none;
}

.quarter-page__map-legend-dot--venue   { background: #18416b; }
.quarter-page__map-legend-dot--internet { background: #c96000; }


@media (min-width: 1024px) {
  /* Karten-Section: section-inner volle Breite mit expliziten 12 Spalten */
  .content-page__map-section > .content-page__section-inner {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-450);
  }

  /* Intro: volle Container-Breite — Headline oben, Text und Controls nebeneinander (50/50) */
  .content-page__map-section .content-page__intro {
    grid-column: 1 / -1;
    grid-template-columns: 2fr 3fr; /* Text 40 %, Controls 60 % */
    column-gap: var(--space-450);
    align-items: start;
  }

  /* Headline überspannt beide Spalten */
  .content-page__map-section .content-page__intro > h2 {
    grid-column: 1 / -1;
  }

  /* Standalone-Dropdown (ohne Controls-Wrapper, z.B. BAMF-Seite) */
  .content-page__map-section .content-page__intro > .quarter-page__map-dropdown,
  .content-page__map-section .content-page__intro > .quarter-page__map-dropdown .dropdown,
  .content-page__map-section .content-page__intro > .quarter-page__map-dropdown .dropdown__trigger {
    inline-size: 100%;
    max-inline-size: none;
    align-self: start;
  }

  /* Karte: alle 12 Spalten */
  .content-page__map-section .quarter-page__map-figure {
    grid-column: 1 / -1;
  }
}

.quarter-page__map {
  flex: 1;
  min-block-size: 0;
  width: 100%;
  display: block;
  border: none;
  background: none;
  aspect-ratio: unset;
  transition: opacity 300ms ease;
}

/* Canvas ausgeblendet, solange Karte noch nicht bereit */
.quarter-page__map-figure.is-consent .quarter-page__map,
.quarter-page__map-figure.is-loading .quarter-page__map {
  opacity: 0;
}

.quarter-page__map::before,
.quarter-page__map::after {
  display: none;
}

/* ── Map-Overlay: Consent / Laden / Fehler ─────────────────────────── */

.quarter-page__map-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.quarter-page__map-figure:is(.is-consent, .is-loading, .is-error) .quarter-page__map-overlay {
  opacity: 1;
  pointer-events: all;
}

/* Panels: per Default unsichtbar */
[data-map-state-el] {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  max-inline-size: 22rem;
  padding: var(--space-400);
  text-align: center;
}

.quarter-page__map-figure.is-consent [data-map-state-el="consent"],
.quarter-page__map-figure.is-loading [data-map-state-el="loading"],
.quarter-page__map-figure.is-error   [data-map-state-el="error"] {
  display: flex;
}

/* Overlay-Icon */
.quarter-page__map-overlay-icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-text-muted, currentColor);
  flex: none;
}

/* Text-Stack im Overlay */
.quarter-page__map-overlay-text {
  display: grid;
  gap: var(--space-100);
}

.quarter-page__map-overlay-text p { margin: 0; }

/* CSS-Spinner */
.quarter-page__map-spinner {
  display: block;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 3px solid var(--color-outline);
  border-block-start-color: var(--color-link, #18416b);
  border-radius: 50%;
  animation: map-spin 0.8s linear infinite;
}

@keyframes map-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .quarter-page__map-spinner {
    animation: none;
    opacity: 0.4;
  }
}

/* ── Karten-Detail-Panel ── */
.quarter-page__map-detail {
  position: absolute;
  inset: 0;
  z-index: 10;
  --card-bg: #fff;
  font-size: var(--font-step--1);
  overflow-y: auto;
  align-content: start;
  border: none;
  border-inline-end: 1px solid var(--color-outline);
  border-block-end: 1px solid var(--color-outline);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: var(--radius-card-lg); /* unten rechts abgerundet */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
  display: none;
  padding: var(--space-400) var(--space-300); /* 32px oben/unten, 24px links/rechts */
}

.quarter-page__map-detail.is-open {
  display: block;
}

/* Close-Button: absolut oben rechts, 4 px Abstand */
.quarter-page__map-detail-close {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-inline-size: 2.75rem; /* 44 px Touch-Target */
  min-block-size: 2.75rem;
  padding: 0;
  color: var(--color-text-muted, currentColor);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quarter-page__map-detail-close svg {
  width: 2rem;
  height: 2rem;
}

.quarter-page__map-detail-close:hover { color: var(--color-text); }

/* ── Rich-Variante: Bild oben, Karte + Meta + Button ── */
.quarter-page__map-detail--rich {
  padding: 0; /* Bild bündig zu den Rändern */
}

.quarter-page__map-detail-media {
  display: none; /* auf Mobile ausgeblendet */
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  margin-block-end: var(--space-200); /* 16 px */
}

@media (min-width: 480px) {
  .quarter-page__map-detail-media {
    display: block;
  }
}

.quarter-page__map-detail--rich .card__header {
  padding: 0.75rem 1rem 0;
}

.quarter-page__map-detail--rich .card__body {
  padding: 0 1rem 1rem;
  gap: var(--space-150);
}

.quarter-page__map-detail-note {
  margin: 0;
  font-size: var(--font-step--2);
  /* WCAG 1.4.3: --color-text-secondary ≥ 5.5:1 auf weißem Hintergrund */
  color: var(--color-text-secondary);
  line-height: var(--line-height-150);
}

.quarter-page__map-detail-address { white-space: pre-line; }

.quarter-page__map-detail-web { overflow-wrap: break-word; }

/* [hidden] durchsetzen: .card__meta-item (display:grid) bzw. .btn (display:inline-flex)
   überschreiben sonst per Spezifität den UA-Stil [hidden]{display:none} → leere
   Web-Zeile / leerer „Mehr erfahren"-Button blieben sichtbar. */
.quarter-page__map-detail-web-row[hidden],
.quarter-page__map-detail-cta[hidden],
.quarter-page__map-detail-media[hidden] { display: none; }

/* Der Detail-Name wird beim Marker-/Options-Klick per JS programmatisch fokussiert
   (tabindex="-1", nur damit Screenreader den Ortsnamen vorlesen). Für Maus-/Touch-
   Nutzer soll dabei kein sichtbarer Fokusrahmen erscheinen. */
.quarter-page__map-detail-name:focus { outline: none; }

/* ── Desktop: Panel links, oben angedockt, Inhalt-Höhe ── */
@media (min-width: 480px) {
  .quarter-page__map-detail {
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    max-block-size: 100%;
    width: 20rem; /* 320 px */
    box-shadow: 2px 0 12px rgba(0,0,0,0.10);
  }
}

/* ── Orts-Seitenleiste ── */
.quarter-page__map-wrapper {
  display: flex;
  block-size: 45rem; /* gleiche Höhe wie .quarter-page__map-figure */
}

.quarter-page__places-sidebar {
  flex: none;
  inline-size: 17.125rem; /* 274 px */
}

/* ── Orts-Liste ── */
.quarter-page__places-card {
  block-size: 100%;
  border-radius: 0;
  border: none;
  border-inline-end: 1px solid var(--color-outline);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.quarter-page__places-card .card__header {
  padding: var(--space-150) var(--space-200);
  border-block-end: 1px solid var(--color-outline);
  flex-shrink: 0;
}

.quarter-page__places-card .card__body {
  padding: var(--space-100) 0;
  flex: 1;
  overflow-y: auto;
}

.quarter-page__places-card .card__footer {
  padding: var(--space-150) var(--space-200);
  border-block-start: 1px solid var(--color-outline);
  flex-shrink: 0;
}

.quarter-page__places-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quarter-page__places-list li { margin: 0; }

/* ── Orts-Button ── */
.quarter-page__place-btn {
  appearance: none;
  display: block;
  inline-size: 100%;
  padding: var(--space-100) var(--space-200);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family-main);
  font-size: var(--font-step--1);
  line-height: var(--line-height-140);
  font-weight: var(--weight-body-default);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.quarter-page__place-btn:hover {
  background: var(--color-surface-secondary);
}

.quarter-page__place-btn:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: -2px;
}

.quarter-page__place-btn.is-active {
  color: var(--color-link);
  background: var(--color-surface-secondary);
  font-weight: var(--weight-body-strong);
}


/* ── Quartier-spezifisch: CTA-Actions ── */
.quarter-page__actions {
  display: grid;
  gap: var(--space-150);
  justify-items: start;
}

/* ── Quartier-spezifisch: Angebote-Grid ── */
.quarter-page__offers-grid {
  display: grid;
  gap: var(--space-250);
}

.quarter-page__offers-grid .card { block-size: 100%; }

/* ── Responsive ── */
@media (min-width: 768px) {
  .content-page__contact-grid,
  .quarter-page__offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  /* ── Grid-Setup: 12-Spalten-Raster ── */
  .content-page__hero-inner,
  .content-page__section-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-450);
  }

  /* ── Inset-Sections: Inhalt ab Spalte 3 (10 von 12) ── */
  .section--inset > .content-page__section-inner,
  .section--inset > .content-page__cta-card {
    grid-column: 3 / -1;
  }

  /* Rechtstexte/Kontakt (content-page--flush): nicht eingerückt, linksbündig ab Spalte 1.
     1:1 aus der Referenz-CSS nachgezogen — die Regel fehlte im Fork. Aktuell noch
     wirkungslos, weil kein Template die Klasse auf <main> setzt (siehe
     PageView/Layouts/Default.html: <main class="site-main">). Die Vorlage nutzt sie
     u. a. auf kontakt.php, damit dort das Kontaktkarten-Raster über die volle
     Rasterbreite läuft statt eingerückt. */
  .content-page--flush .section--inset > .content-page__section-inner,
  .content-page--flush .section--inset > .content-page__cta-card {
    grid-column: 1 / -1;
  }

  /* ── Direkte Kinder von hero-inner / section-inner ── */
  :is(.content-page__hero-inner, .content-page__section-inner) > .content-page__intro {
    grid-column: 1 / -1;
  }

  .content-page__section-inner > .content-page__prose {
    grid-column: 1 / span 8;
  }

  .content-page__section-inner > .contact-card-grid,
  .content-page__section-inner > .vcard-group {
    grid-column: 1 / span 10;
    margin-block-start: var(--space-400);
  }

  .content-page__accordion-section         { grid-column: 1 / span 8; }
  .section--inset .content-page__accordion-section { grid-column: 1 / -1; } /* volle Inset-Breite */

  .quarter-page__actions { grid-column: 1 / span 5; }

  /* ── Hero mit Bild: Intro 7 Spalten, Media 5 Spalten ── */
  .content-page__hero--with-media .content-page__intro {
    grid-column: 1 / span 7;
    align-self: center;
  }

  .content-page__hero--with-media .content-page__hero-media {
    display: grid;
    grid-column: 8 / -1;
    align-self: stretch;
    margin: 0;
    gap: var(--space-100);
  }

  /* Streckt das Hero-Bild auf die Höhe der Textspalte. Das :not() nimmt die
     Variante .card__media--natural aus: sie ist spezifischer als der Modifier
     (0,2,1 gegen 0,1,0) und würde block-size/object-fit sonst zurückdrehen,
     das Bild also doch wieder beschneiden. */
  figure.content-page__hero-media .card__media:not(.card__media--natural),
  figure.content-page__hero-media img.content-page__media {
    block-size: 100%;
    min-block-size: 16rem;
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
  }

  figure.content-page__hero-media .card__media--natural {
    border-radius: var(--radius-card);
  }

  /* ── Split-Layout (Sidebar + Content) ── */
  .content-page__split {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-450);
  }

  .content-page__sidebar { grid-column: 1 / span 4; }
  .content-page__content { grid-column: 5 / -1; }

  /* ── Kontakt- und Angebote-Grid ── */
  .content-page__contact-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quarter-page__offers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   patterns/split-section.css
   ============================================================ */
/* Pattern: split-section — 7-col Text / 5-col Media, umkehrbar
   ─────────────────────────────────────────────────────────────
   Elemente:
     .split-section              Wrapper (section-Element mit .section)
     .split-section__inner       12-col Grid-Container
     .split-section__text        Textblock (Headline, Copy, Actions)
     .split-section__media       Bild oder Info-Block
     .split-section__actions     Button-Zeile im Textblock

   Modifier:
     .split-section--flip        Media links (1–5), Text rechts (6–12)

   Kein Media: Text bleibt bei 7 Spalten, startet immer links.
   Hintergrundwechsel über bestehende .section--surface-* Klassen. */

/* ── Inner: mobil vertikaler Stack ── */
.split-section__inner {
  display: grid;
  gap: var(--layout-section-content-gap);
  align-items: center;
}

/* ── Textblock: vertikaler Stack ── */
.split-section__text {
  display: grid;
  column-gap: var(--layout-section-content-gap);
  row-gap: 0;
  align-content: start;
}

.split-section__text .headline { margin: 0; }

.split-section__text p {
  margin: 0;
}

/* ── Info-Block: kompakte Infogruppe (z.B. Öffnungszeiten) ── */
.split-section__info {
  display: grid;
  gap: var(--space-100);
}

.split-section__info p {
  margin: 0;
}

/* ── Actions: Buttons unter dem Text ── */

/* Letzter Absatz vor den Actions: eigenes Padding neutralisieren —
   der Abstand kommt ausschließlich von .split-section__actions.
   (p:last-of-type lässt p-zu-p-Abstände bei mehreren Absätzen unangetastet.) */
.split-section__text p:last-of-type {
  padding-block-end: 0;
}

.split-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-150);
  justify-content: flex-start;
  padding-block-start: var(--space-300); /* 24 px — einzige Quelle für Text → Button */
}

/* ── Media-Block: Bild, Karte oder sonstiger Infoblock ── */
.split-section__media {
  inline-size: 100%;
  align-self: stretch;
}

/* ── Tablet (768 px): implizites 7/5-Verhältnis ── */
@media (min-width: 768px) {
  .split-section__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-600);
    row-gap: var(--layout-section-content-gap);
  }

  /* flip: Media visuell links (5fr), Text rechts (7fr) — Grid-Spalten umkehren
     damit das Medium immer die kleinere Spalte belegt, unabhängig von der Seite. */
  .split-section--flip .split-section__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .split-section--flip .split-section__media {
    grid-column: 1;
    grid-row: 1;
  }
  .split-section--flip .split-section__text {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ── Desktop (1024 px): explizites 12-col Grid ── */
@media (min-width: 1024px) {
  .split-section__inner,
  .split-section--flip .split-section__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-600);
    row-gap: var(--layout-section-content-gap);
  }

  /* Standard: Text links (1–7), Media rechts (9–12) — Spalte 8 als Luft */
  .split-section__text {
    grid-column: 1 / span 7;
  }

  .split-section__media {
    grid-column: 9 / -1;
  }

  /* Flip: Media links (1–5), Text rechts (6–12) */
  .split-section--flip .split-section__media {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .split-section--flip .split-section__text {
    grid-column: 6 / -1;
    grid-row: 1;
  }

  /* Kein Media: Text läuft breiter — aber nur auf Rechtstext-/Kontaktseiten.
     Die Regel gab es schon, sie war nur wirkungslos, weil bild-text die
     <figure class="split-section__media"> auch ohne Bild ausgab; der Textblock
     war dadurch nie :only-child. Seit das Template die Bildspalte weglässt,
     greift sie — deshalb hier bewusst auf .content-page--flush eingegrenzt:
     ein bildloses bild-text auf einer normalen Inhaltsseite soll weiter bei
     7 Spalten bleiben und nicht nachträglich umbrechen.

     Volle 12 Spalten sind bewusst gewählt: der Text soll auf diesen Seiten
     über die gesamte Rasterbreite laufen. Auf dem 96rem-Grid sind das rund
     1440 px und damit ~200 Zeichen pro Zeile — deutlich über der Empfehlung
     aus WCAG 1.4.8 (max. 80 Zeichen, AAA). Falls das später stört, ist der
     Hebel ein max-inline-size auf .split-section__text .body-text, nicht
     eine engere grid-column. */
  .content-page--flush .split-section__text:only-child {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   patterns/vcard-group.css
   ============================================================ */
/* Pattern: VCard Group — Kontaktkarten-Raster
   ─────────────────────────────────────────────────────────────────────────────
   Verwendung:
     <div class="vcard-group">
       <aside class="card vcard" aria-label="Kontakt …">
         <div class="vcard__identity"> … </div>
         <ul class="card__meta-list vcard__meta"> … </ul>
       </aside>
     </div>

   Rückwärtskompatibel: .contact-card, .contact-card__identity,
   .contact-card__meta, .contact-card-grid funktionieren weiterhin.
   ─────────────────────────────────────────────────────────────────────────────
*/

/* ── Container ──────────────────────────────────────────────────────────────
   Mobile:  1 Spalte
   ≥ 640px: 2 Spalten (auto-fit lässt mehr Karten zu ohne Modifier)         */
.vcard-group,
.contact-card-grid {
  display: grid;
  gap: var(--space-300);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .vcard-group,
  .contact-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
}

/* ── Karte ──────────────────────────────────────────────────────────────────
   Im Grid: einzelne Spalte (Identity oben, Meta unten)                      */
.vcard,
.contact-card {
  display: grid;
  gap: var(--space-200);
  align-content: start;
  --card-bg: transparent;
}

.vcard-group .vcard,
.vcard-group .contact-card,
.contact-card-grid .vcard,
.contact-card-grid .contact-card {
  grid-template-columns: 1fr;
}

/* In split-section: Identity | Meta nebeneinander (Inline-Variante)         */
.split-section__text .vcard,
.split-section__text .contact-card {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-300);
  inline-size: fit-content;
  margin-block-start: var(--space-300);
}

/* ── Identity ───────────────────────────────────────────────────────────────
   Name + Rolle gestapelt                                                     */
.vcard__identity,
.contact-card__identity {
  display: grid;
  gap: var(--space-050);
  align-content: start;
}

.vcard__identity :is(h2, h3, h4, p.card__title),
.contact-card__identity h3 {
  margin: 0;
  padding-block: 0;
}

.vcard__identity p,
.contact-card__identity p {
  margin: 0;
  max-inline-size: none;
}

/* ── Meta ───────────────────────────────────────────────────────────────────
   Kontaktdaten (E-Mail, Telefon …)                                          */
.vcard__meta,
.contact-card__meta {
  align-self: start;
}

/* ============================================================
   patterns/info-panel.css
   ============================================================ */
/* Pattern: info-panel
   ──────────────────────────────────────────────────────────────────────────
   Infofeld mit weißem Hintergrund, Card-Outline, Headline und bis zu drei
   Spalten mit kleinen Überschriften und Icon-Text-Zeilen.
   Padding, Border und Typografie orientieren sich an der .card Komponente.

   Elemente:
     .info-panel              Äußerer Container
     .info-panel__title       Headline (= card__title Stil)
     .info-panel__grid        Internes Spalten-Grid
     .info-panel__group       Eine thematische Spalte
     .info-panel__group-title Kleine Gruppenüberschrift
     .info-panel__item        Icon + Text in einer Zeile
     .info-panel__item-icon   SVG-Icon (aria-hidden)
     .info-panel__item-text   Text neben dem Icon

   Modifier:
     .info-panel__grid--cols-2   Maximal 2 Spalten
     .info-panel__grid--cols-3   Maximal 3 Spalten
*/

/* ── Äußerer Container: identisch zu .card ── */
.info-panel {
  --card-padding: var(--space-200);
  --card-gap: var(--space-200);
  padding: var(--card-padding);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-card);
  display: grid;
  gap: var(--card-gap);
  color: var(--color-text);
}

/* ── Headline: wie card__title ── */
.info-panel__title {
  margin: 0;
  font-size: var(--font-step-1);
  font-weight: var(--weight-headline);
  font-variation-settings: "wght" var(--weight-headline);
  line-height: var(--line-height-135);
  letter-spacing: -0.01em;
}

/* ── Spalten-Grid ── */
.info-panel__grid {
  display: grid;
  gap: var(--card-gap);
}

/* ── Gruppe: thematischer Block innerhalb einer Spalte ── */
.info-panel__group {
  display: grid;
  gap: var(--space-150);
  align-content: start;
}

/* ── Gruppenüberschrift: wie ein starkes card__copy ── */
.info-panel__group-title {
  margin: 0;
  font-size: var(--font-step--1);
  font-weight: var(--weight-body-strong);
  font-variation-settings: "wght" var(--weight-body-strong);
  line-height: var(--line-height-135);
  color: var(--color-text);
}

/* ── Item: Icon + Text in einer Zeile ── */
.info-panel__item {
  display: flex;
  gap: var(--space-150);
  align-items: flex-start;
}

/* ── Icon: dekorativ, gedämpfte Farbe ── */
.info-panel__item-icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex-shrink: 0;
  margin-block-start: 0.2em;
  color: var(--color-text-muted);
}

/* ── Itemtext: wie card__copy ── */
.info-panel__item-text {
  margin: 0;
  font-size: var(--font-step--1);
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default);
  line-height: var(--line-height-160);
  color: var(--color-text-secondary);
}

/* ── Responsive Spalten ── */
@media (min-width: 640px) {
  .info-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .info-panel {
    --card-padding: var(--space-200);
    --card-radius: var(--radius-card-lg);
  }

  .info-panel__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Forced colors ── */
@media (forced-colors: active) {
  .info-panel {
    border-color: CanvasText;
    background: Canvas;
  }

  .info-panel__item-icon {
    color: CanvasText;
  }

  .info-panel__item-text,
  .info-panel__group-title {
    color: CanvasText;
  }
}

}

/* ============================================================
   patterns/page-example.css
   ============================================================ */
/* Pattern: landing hero — Startseiten beider Sites */
.landing-hero {
  row-gap: 0;
}

.landing-hero__inner {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--layout-section-header-gap);
  max-inline-size: none;
}

.landing-hero__copy {
  display: grid;
  column-gap: var(--space-500);
  row-gap: 0;
}

.landing-hero__title {
  margin: 0;
  max-inline-size: none;
}

.landing-hero__teaser {
  /* Layout only. Type tier is carried by the .type-body-lg utility
     class on the element itself. */
  margin: 0;
  max-inline-size: none;
  padding-block-end: 0; /* Abstand nach unten kommt vom nachfolgenden Element */
}

/* Badge-Liste / Actions direkt unter dem Teaser: 24 px Abstand als einzige Quelle */
.landing-hero__copy .badge-list {
  padding-block-start: var(--space-300);
}

.landing-hero__media {
  /* Optional illustrative slot next to the hero copy. */
  inline-size: 100%;
  justify-self: stretch;
}

/* Aspect-ratio placeholder for image slots used inside split-section__media */
.page-example__visual {
  aspect-ratio: 579 / 363;
  inline-size: 100%;
}

@media (min-width: 768px) {
  .landing-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-600);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .landing-hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .landing-hero__copy {
    grid-column: 1 / span 8;
  }

  .landing-hero__media {
    grid-column: 9 / span 4;
  }
}

/* ============================================================
   patterns/offer-detail-page.css
   ============================================================ */
/* Pattern: offer detail page */
.offer-detail__related {
  grid-column: 1 / -1;
}

/* Layout-Container und Card-Stacks: Gap zwischen Blöcken */
.offer-detail__body,
.offer-detail__sidebar {
  display: grid;
  gap: var(--space-250);
  align-content: start;
}

/* Text-Stacks: kein row-gap — Rhythmus über heading padding (headline.css) */
.offer-detail__content,
.offer-detail__notes {
  display: grid;
  row-gap: 0;
  align-content: start;
}

/* Mobile: Text vor den Detail-Cards */
.offer-detail__content { order: -1; }

/* Hero: H1 braucht kein Ende-Padding — kein Lead-Text direkt darunter */
.offer-detail-page .content-page__title {
  padding-block-end: 0;
}

/* Mobile: Hero enthält nur Badge + H1 — min-block-size und Ende-Padding reduzieren */
.offer-detail-page .section--hero {
  min-block-size: 0;
  padding-block-end: var(--space-300);
}

@media (min-width: 1024px) {
  .offer-detail__content { order: 0; }

  .offer-detail-page .section--hero {
    min-block-size: 320px;
    padding-block-end: var(--layout-section-hero-padding-block-end);
  }
}

.offer-detail__actions {
  display: grid;
  row-gap: 0;
  align-content: start;
  justify-items: start;
  padding-block-start: var(--space-300);
}

.offer-detail__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
  align-items: center;
}

.offer-detail__badge {
  justify-self: start;
  font-weight: var(--weight-body-strong);
  font-variation-settings: "wght" var(--weight-body-strong), "wdth" 100;
  margin-block-end: var(--space-200);
}

.offer-detail__description {
  margin: 0;
}

.offer-detail__facts-card,
.offer-detail__contact-card {
  --card-gap: var(--space-200);
}


.offer-detail__related-stack {
  display: grid;
  gap: var(--layout-section-content-gap);
  align-content: start;
}

.offer-detail__related-grid {
  display: grid;
  gap: var(--space-250);
}

.offer-detail__related-grid .card {
  block-size: 100%;
}

@media (min-width: 768px) {
  .offer-detail__related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .offer-detail__body {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-450);
    align-items: start;
  }

  .offer-detail__sidebar {
    grid-column: 1 / span 4;
  }

  .offer-detail__content {
    grid-column: 5 / -1;
  }

  .offer-detail__related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── CTA-Card ── */
.content-page__cta-section {
  padding-block-start: 0;
}

.content-page__cta-card h2,
.content-page__cta-card h3,
.content-page__cta-card p {
  margin: 0;
}

.content-page__cta-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  padding: var(--space-400) var(--space-450);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-card);
}

.content-page__cta-body {
  display: grid;
  gap: var(--space-200);
  align-content: start;
  justify-items: start;
}

.content-page__cta-lead {
  display: grid;
  align-content: start;
}

.content-page__cta-contact {
  justify-self: stretch;
  display: grid;
  row-gap: 0;
}

.content-page__cta-contact .card__meta-list {
  gap: 0;
}


.content-page__cta-contact-cols {
  display: grid;
  row-gap: var(--space-100);
}

@media (min-width: 640px) {
  .content-page__cta-contact-cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }
}

.content-page__cta-contact-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--space-200);
  column-gap: var(--space-300);
}

.content-page__cta-contact-full {
  grid-column: 1 / -1;
}

.content-page__cta-contact-rows .body-text {
  padding: 0;
}

.content-page__cta-card > .btn {
  margin-block-start: var(--space-300);
}

@media (min-width: 1024px) {
  .content-page__cta-card > .btn {
    margin-block-start: 0;
  }
}

@media (min-width: 1024px) {
  .content-page__cta-card {
    grid-template-areas:
      "lead body"
      "btn  body";
    grid-template-columns: 4fr 8fr;
    grid-template-rows: 1fr auto;
    column-gap: var(--space-450);
    row-gap: 0;
    align-items: stretch;
  }

  .content-page__cta-lead { grid-area: lead; }
  .content-page__cta-body { grid-area: body; }

  .content-page__cta-card > .btn {
    grid-area: btn;
    align-self: end;
    justify-self: start;
  }
}

/* ============================================================
   patterns/print.css
   ============================================================ */
/* Pattern: print styles — offer detail page */
@media print {

  /* ── Page setup ─────────────────────────────────────────────────────────── */
  @page {
    size: A4;
    margin: 1.5cm 2cm;
  }

  /* ── Hide non-print elements ─────────────────────────────────────────────── */
  .site-header,
  .site-footer,
  .section-card-events,       /* Weitere Angebote */
  .offer-detail__actions,     /* Drucken-Button */
  .card-carousel {
    display: none !important;
  }

  /* ── Base reset ──────────────────────────────────────────────────────────── */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 10pt;
  }

  /* ── Layout: flatten page-grid and sections ──────────────────────────────── */
  .page-grid {
    display: block;
  }

  .section,
  .section--hero,
  .section--surface {
    padding-block: 0.75rem;
    background: transparent !important;
  }

  .content-page__hero-inner {
    display: block;
  }

  /* ── Hero: badge + title ─────────────────────────────────────────────────── */
  .offer-detail__badge-row {
    margin-block-end: 0.4rem;
  }

  .badge--transparent {
    border-color: #999;
    font-size: 8pt;
    padding-block: 0;
  }

  .content-page__title {
    font-size: 18pt;
    line-height: 1.2;
    margin: 0;
  }

  /* ── Offer body: sidebar left, content right ─────────────────────────────── */
  .offer-detail__section {
    padding-block-start: 0.75rem;
  }

  .offer-detail__body {
    display: grid;
    grid-template-columns: 220pt 1fr;
    grid-template-rows: auto;
    column-gap: 1.5rem;
    align-items: start;
  }

  .offer-detail__sidebar {
    grid-column: 1;
    display: grid;
    gap: 0.75rem;
    align-content: start;
  }

  .offer-detail__content {
    grid-column: 2;
    display: grid;
    row-gap: 0.5rem;
    align-content: start;
  }

  /* ── Cards: no radius, compact ───────────────────────────────────────────── */
  .card {
    border: 1px solid #ccc;
    border-radius: 4pt;
    break-inside: avoid;
  }

  .card__header {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-block-end: 1px solid #eee;
  }

  .card__body {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
  }

  .headline.type-hl-lg {
    font-size: 10pt;
    font-weight: 600;
  }

  /* ── Meta list: compact spacing ──────────────────────────────────────────── */
  .card__meta-list {
    gap: 0.4rem;
  }

  .card__meta-item {
    gap: 0.4rem;
  }

  .card__meta-icon {
    inline-size: 14pt;
    block-size: 14pt;
    flex-shrink: 0;
  }

  /* ── Content: lead + notes ───────────────────────────────────────────────── */
  .content-page__lead {
    font-size: 10pt;
    line-height: 1.5;
  }

  .offer-detail__notes h2 {
    font-size: 10pt;
    font-weight: 600;
    margin-block-end: 0.3rem;
  }

  .body-unordered-list {
    padding-inline-start: 1.2rem;
    margin: 0;
  }

  .body-unordered-list li {
    font-size: 9.5pt;
    line-height: 1.5;
  }

  /* ── Links: show tel as plain text ──────────────────────────────────────── */
  a[href^="tel"] {
    text-decoration: none;
    color: black;
  }

}

/* ============================================================
   themes/theme-default.css
   ============================================================ */

/* Theme: default
   Uses token defaults from tokens/*.css.
   Keep overrides here when additional themes are introduced. */

:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body,
.site-header--nav,
.site-search-form,
.menu-card,
.card,
.card__media,
.badge,
.btn,
.btn-icon,
.menu-link,
.menu-toggle,
.section--surface::before,
.accordion__trigger,
.accordion__panel {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    outline-color 180ms ease;
}

.theme-preview {
  position: fixed;
  right: var(--space-200);
  bottom: var(--space-200);
  z-index: 100;
  display: grid;
  gap: var(--space-100);
  padding: var(--space-150);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--color-surface-primary) 92%, transparent);
  box-shadow: var(--shadow-interactive-bottom);
  backdrop-filter: blur(0.75rem);
}

.theme-preview__label {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.theme-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
}

.theme-preview__button {
  --button-height: 2.25rem;
  --button-padding-inline: var(--space-150);
  --button-label-font-size: var(--component-button-label-font-size-compact);
  --button-label-line-height: var(--line-height-150);

  min-inline-size: 0;
}

.theme-preview__button[aria-pressed="true"] {
  background: var(--color-button-bg-active);
  box-shadow: none;
}

.theme-preview__button[aria-pressed="true"]:hover,
.theme-preview__button[aria-pressed="true"]:active {
  background: var(--color-button-bg-active);
  box-shadow: none;
}

@media (max-width: 767px) {
  .theme-preview {
    right: var(--space-150);
    bottom: var(--space-150);
    left: var(--space-150);
  }

  .theme-preview__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .theme-preview__button {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-header--nav,
  .site-search-form,
  .menu-card,
  .card,
  .card__media,
  .badge,
  .btn,
  .btn-icon,
  .menu-link,
  .menu-toggle,
  .section--surface::before,
  .accordion__trigger,
  .accordion__panel {
    transition: none;
  }
}

/* Component: network-diagram
   Hub-and-spoke overview of the KPDe network.
   Three columns: Angebote | ZamBe (Zentrale) | Orte/Quartiere
   All cards are interactive links. A dashed outer frame groups
   everything under the KPDe label, which visually "breaks" the border. */

/* ── Wrapper ─────────────────────────────────────────────────────────── */

.network-diagram {
  margin-block-start: var(--space-400);
  overflow-x: clip; /* verhindert horizontalen Überlauf; overflow-y bleibt visible
                       damit das KPDe-Label oben aus dem Frame herausragen kann */
}

/* ── Frame: dashed outer border with floating KPDe label ─────────────── */

.network-frame {
  position: relative;
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-lg);
  /* padding-block-start großzügig: Label hängt 50% seiner Höhe in den Frame.
     Bei 3-zeiligem Text (~96px) sind das 48px → space-900 (80px) gibt 32px Puffer. */
  padding: var(--space-900) var(--space-300) var(--space-300);
  margin-block-start: var(--space-400);
  background: var(--color-surface-primary);
}

/* Ab 560px: 2-spaltiges Grid, Label ist kürzer (2 Zeilen) → weniger Puffer nötig */
@media (min-width: 560px) {
  .network-frame {
    padding-block-start: var(--space-700);
  }
}

@media (min-width: 1024px) {
  .network-frame {
    padding: var(--space-800) var(--space-600) var(--space-600);
  }
}

/* Label sits centred on the top border, inverted pill chip */
.network-frame__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface-inverted);
  color: var(--color-content-on-inverted);
  padding-inline: var(--space-400);
  padding-block: var(--space-150);
  border-radius: var(--radius-card-lg);
  /* Absolut positionierte Elemente sind per Default content-sized (shrink-wrap).
     max-inline-size allein streckt das Label NICHT — es begrenzt nur die Obergrenze.
     Unter 560px erzwingen wir die volle erlaubte Breite, damit der Text in
     weniger Zeilen umbricht und das frame padding-block-start kleiner bleiben kann. */
  inline-size: calc(100% - var(--space-600));
  text-align: center;
}

/* Ab 768px: wieder content-sized (auf dieser Breite passt der Text auf 1–2 Zeilen) */
@media (min-width: 768px) {
  .network-frame__label {
    inline-size: auto;
    max-inline-size: calc(100% - var(--space-600));
  }
}

/* ── Kommunal-Karte: zentrierte Zeile unter dem Grid ────────────────── */

.network-kommunal-row {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-200);
}

.network-card--kommunal {
  inline-size: 100%;
  border-style: dashed;
}

@media (min-width: 1024px) {
  .network-card--kommunal {
    /* 2/3 der Frame-Breite, zentriert via justify-content auf dem Elternelement */
    max-inline-size: calc(100% * 2 / 3);
  }
}

/* ── Grid: stacked on mobile, 2-column from 560px, 3-column from 1024px ─ */

.network-grid {
  display: grid;
  gap: var(--space-300);
}

/* Ab 560px: ZAM-Karte oben als volle Breite, Angebote + Orte daneben.
   ZAM erhält order: -1, damit es in der HTML-Reihenfolge (zentrale ist
   Spalte 2) nach oben wandert. grid-column: 1 / -1 = volle Breite.
   Gap etwas kleiner als im 3-Spalten-Layout, damit die Karten im Frame bleiben. */
@media (min-width: 560px) {
  .network-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-200);
  }

  .network-col--zentrale {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (min-width: 1024px) {
  .network-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-400);
    align-items: stretch;
  }

  /* Resets für zentrale (gelten ab 560px, müssen ab 1024px zurückgesetzt werden) */
  .network-col--zentrale {
    grid-column: auto;
    order: 0;
  }

  /* Verbindungslinien: linke Karten → Mitte
     Jede Karte zieht ihren eigenen Connector, genau so breit wie der Gap.
     So trifft jede Linie exakt den linken Rand der Mittelkarte. */
  .network-col--angebote .network-card {
    position: relative;
  }

  .network-col--angebote .network-card::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateX(100%);
    inline-size: var(--space-400);
    block-size: 0;
    border-block-start: 1px dashed var(--color-outline);
    pointer-events: none;
  }

  /* Verbindungslinien: Mitte → rechte Karten */
  .network-col--orte .network-card {
    position: relative;
  }

  .network-col--orte .network-card::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateX(-100%);
    inline-size: var(--space-400);
    block-size: 0;
    border-block-start: 1px dashed var(--color-outline);
    pointer-events: none;
  }
}

/* ── Column ──────────────────────────────────────────────────────────── */

.network-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  min-inline-size: 0; /* Grid-Item darf unter Content-Breite schrumpfen */
}

.network-col__eyebrow {
  margin: 0;
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
}

.network-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-150);
  flex: 1 1 auto;
  min-inline-size: 0; /* flex-item darf unter min-content schrumpfen */
}

/* ── Card base ───────────────────────────────────────────────────────── */

.network-card {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  padding: var(--space-200) var(--space-250);
  min-block-size: 2.75rem; /* touch target ≥ 44px */
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-card-lg);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  transform: translateY(0);
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.network-card:hover {
  border-color: var(--color-link);
  box-shadow: var(--shadow-interactive-bottom);
  transform: translateY(var(--lift-sm));
}

/* Dark mode: Karte hellt auf hover auf (brand-8xx → brand-700), damit die
   Interaktion sichtbar bleibt. Kontrast brand-100 auf brand-700: 5.2:1 ✓ */
:root[data-theme="dark"] .network-card:hover {
  background: var(--foundation-brand-700);
}

.network-card:active {
  box-shadow: var(--shadow-interactive-inset);
  transform: translateY(0);
}

.network-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  transform: translateY(0);
  box-shadow: none;
}

.network-card__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.network-card__eyebrow {
  display: block;
  font-size: var(--font-step--2);
  font-weight: var(--weight-body-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-block-end: var(--space-050);
}

.network-card__title {
  display: block;
  overflow-wrap: break-word; /* lange dt. Komposita im 2-Spalten-Layout abfangen */
}

.network-card__sub {
  display: block;
  font-size: var(--font-step--1);
  color: var(--color-text-secondary);
  line-height: var(--line-height-150, 1.5);
  margin-block-start: var(--space-050);
}

/* Arrow slot: Kreis-Button wie in den Content-Cards */
.network-card__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.network-card__arrow svg {
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
}

.network-card:hover .network-card__arrow {
  background: var(--color-button-bg);
  border-color: var(--color-button-border);
}

/* Down-arrow in der Zentrale-Karte: etwas größer, unter dem Titel */
.network-card__arrow--down {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-start: var(--space-300);
}

.network-card__arrow--down svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* Angebots-Karten (oben + unten): gedämpfter Hintergrund, dark-mode-fähig */
.network-col--angebote .network-col__list li:not(:nth-child(2)) .network-card,
.network-col--orte .network-col__list li:not(:nth-child(2)) .network-card {
  background: var(--color-surface-secondary);
}

/* Mittlere Karten (Beratungsstellen): Seitenfarbe wie ZamBe + solid */
.network-col--angebote .network-col__list li:nth-child(2) .network-card,
.network-col--orte .network-col__list li:nth-child(2) .network-card {
  border-style: solid;
  background: var(--color-bg);
}

/* Kommunal-Karte: gleicher Hintergrund wie reguläre Angebots-Karten */
.network-card--kommunal {
  background: var(--color-surface-secondary);
}

/* Verbindungslinien der mittleren Karten ebenfalls solid */
.network-col--angebote .network-col__list li:nth-child(2) .network-card::after,
.network-col--orte .network-col__list li:nth-child(2) .network-card::after {
  border-block-start-style: solid;
}

/* ── Zentrale card: prominent hub, stretches to full column height ───── */

.network-col--zentrale {
  /* flex column is set on .network-col; let the card grow */
}

.network-card--zentrale {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-150);
  padding: var(--space-400) var(--space-300);
  border: 1px solid var(--color-outline);
  background: var(--color-bg);
  flex: 1 1 auto; /* stretch to column height */
}

.network-card--zentrale .network-card__eyebrow {
  margin-block-end: var(--space-100);
}

.network-card--zentrale .network-card__title {
  font-size: var(--font-step-1);
}

.network-card--zentrale:hover {
  border-color: var(--color-link);
  box-shadow: var(--shadow-interactive-bottom-lg);
  transform: translateY(var(--lift-md));
}

.network-card--zentrale:active {
  background: var(--color-surface-secondary);
  box-shadow: var(--shadow-interactive-inset-lg);
  transform: translateY(0);
}

/* ── Forced colours ──────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .network-frame {
    border-color: CanvasText;
    forced-color-adjust: none;
  }

  .network-frame__label {
    background: Canvas;
    color: CanvasText;
  }

  .network-card {
    border-color: ButtonText;
    color: ButtonText;
    background: Canvas;
  }

  .network-card:hover {
    background: Canvas;
    outline: 2px solid Highlight;
    outline-offset: 0;
  }

  .network-card--zentrale {
    background: Canvas;
    border-color: Highlight;
  }

  .network-card__arrow {
    color: ButtonText;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .network-card {
    transition: none;
  }
}

/* ============================================================
   patterns/offers-page.css
   ============================================================ */
/* Pattern: offers listing page built from dropdowns, cards, badges, and buttons */
.page-grid--offers {
  --layout-page-padding-inline: var(--space-200);
}

/* ── Hero: Titel links, Lead rechts, oben ausgerichtet ── */
.offers-page__header {
  /* section--hero übernimmt padding-block + min-block-size;
     z-index damit Dropdown-Panel über Folge-Section liegt */
  position: relative;
  z-index: 20;
}

.offers-page__header-inner {
  display: grid;
  gap: var(--layout-section-header-gap);
  align-items: start;
  align-content: start;
}

/* ── Filter + Ergebnisse: zusammengeführte Section ──
   padding-block-end läuft über den Section-Standard.
   z-index damit Dropdown-Panels über Folge-Sections liegen. */
.offers-page__main {
  position: relative;
  z-index: 10;
  padding-block-start: var(--space-500); /* 40px — überschreibt section+section → 0 */
}

/* ── Getrennte Filter-Section (neues Zwei-Sections-Pattern) ──
   Eigener Stacking-Context damit Dropdown-Panels über der
   nachfolgenden Ergebnisse-Section liegen. */
.offers-page__filter-section {
  position: relative;
  z-index: 10;
}

.offers-page__results {
  position: relative;
  z-index: 1;
}

/* Interner Abstand zwischen Filter-Controls und Ergebnisliste */
.offers-page__results-meta {
  padding-block-start: var(--space-500); /* 40px */
}

.offers-page__title {
  margin: 0;
}

.offers-page__title-block {
  align-content: start;
  min-inline-size: 0;
}

.offers-page__lead {
  margin: 0;
  max-inline-size: none;
  align-self: start;
}

.offers-page__filters {
  /* <fieldset>-Reset: Browser-Defaults entfernen */
  display: grid;
  gap: var(--space-150);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.offers-page__filters-label {
  /* <legend>-Reset + Stil */
  margin: 0;
  padding: 0;
  float: left; /* verhindert dass legend Breite des fieldset bricht */
  inline-size: 100%;
}

.offers-page__controls {
  display: grid;
  gap: var(--space-300);
  align-content: start;
  padding: var(--space-300);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
}

.offers-page__filters-label,
.offers-page__selection-label {
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

.offers-page__filters-grid {
  display: grid;
  /* minmax(0, …): Spalten dürfen unter die Inhaltsbreite schrumpfen,
     damit die Dropdowns bei kleinem Fenster nicht überlaufen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-200);
}

.offers-page__filter-group {
  min-inline-size: 0;
}

.offers-page__filter-group .dropdown,
.offers-page__filter-group .dropdown__trigger {
  inline-size: 100%;
}

/* Zweite Filterzeile: Toggle-Switches links, Reset-Button rechts.
   Mobile: gestapelt (Reset unter allen Filtern). */
.offers-page__filters-secondary {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-200);
}

.offers-page__filters-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100) var(--space-400);
}

.offers-page__results-meta,
.offers-page__selection-empty {
  margin: 0;
}

.offers-page__results-meta,
.offers-page__selection-empty {
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.offers-page__results-meta {
  margin-block-end: var(--space-200);
}

.offers-page__selection {
  display: grid;
  gap: var(--space-100);
}

.offers-page__selection-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-150);
  min-block-size: var(--component-badge-lg-block-size);
}

.offers-page__selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
  list-style: none;
  margin: 0;
  padding: 0;
}

.offers-page__selection-list[hidden],
.offers-page__selection-empty[hidden],
.offers-page__empty[hidden] {
  display: none;
}

.offers-page__selection-chip {
  --badge-bg: var(--color-surface-secondary);
  --badge-color: var(--color-text);
  --badge-border: color-mix(in srgb, var(--color-outline) 68%, var(--color-surface-secondary));
  --badge-inline: var(--space-200);
  --badge-block-start: var(--space-050);
  --badge-block-end: var(--space-050);

  min-block-size: var(--component-badge-lg-block-size);
  gap: var(--space-150);
  white-space: nowrap;
  font-size: var(--component-button-label-font-size-compact);
  line-height: var(--line-height-150);
  letter-spacing: var(--component-button-label-letter-spacing-compact);
  font-weight: var(--component-button-label-font-weight-compact);
  font-stretch: var(--component-button-label-font-stretch-compact);
  font-variation-settings: var(--component-button-label-font-variation-compact);
  box-shadow: none;
}

.offers-page__selection-chip .badge__label {
  padding-inline: 0;
  padding-inline-end: var(--space-050);
}

.offers-page__selection-chip .badge__slot {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 999px;
  background: var(--color-surface-inverted);
  color: var(--color-content-on-inverted);
}

.offers-page__selection-chip .badge__slot svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.offers-page__selection-chip:hover,
.offers-page__selection-chip:focus-visible {
  --badge-bg: color-mix(in srgb, var(--color-surface-secondary) 76%, white);
  box-shadow: var(--shadow-interactive-bottom);
}

.offers-page__selection-chip:hover .badge__label,
.offers-page__selection-chip:focus-visible .badge__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.offers-page__selection-chip:active {
  box-shadow: var(--shadow-interactive-inset);
}

/* ── Filter-zurücksetzen: invertierter Button ── */
.offers-page__clear-button {
  --color-button-bg: var(--color-surface-inverted);
  --color-button-border: transparent;
  --color-button-text: #fff;

  align-self: end;   /* bündig mit Unterkante der Dropdowns (Digiquartier-Grid) */
  white-space: nowrap;
}

/* Spracherwerb: Reset-Button sitzt in der Sekundärzeile (Flex), nicht im Grid.
   Mobile: volle Breite (wie die Dropdowns); ab 768 normale Breite in der Reihe. */
.offers-page__filters-secondary .offers-page__clear-button {
  align-self: stretch;
}

.offers-page__clear-button:hover:not(:disabled) {
  --color-button-bg: var(--semantic-state-inverted-hover);
  --color-button-border: transparent;
}

.offers-page__clear-button:disabled {
  background: color-mix(in srgb, var(--color-surface-inverted) 35%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, #fff 45%, transparent);
}

.offers-page__results-grid {
  display: grid;
  gap: var(--space-250);
  list-style: none;
  margin: 0;
  padding: 0;
}

.offers-page__offer-shell {
  min-inline-size: 0;
  display: grid; /* streckt <article> auf volle Zellhöhe */
}

.offers-page__offer-shell[hidden] {
  display: none; /* display:grid überschreibt sonst den UA-Stil für [hidden] */
}

.offers-page__offer-shell .card {
  /* Structural only — all appearance tokens come from card.css */
  block-size: 100%;
}

.offers-page__offer-shell .card__media {
  aspect-ratio: 3 / 2;
}

.offers-page__load-more {
  display: flex;
  justify-content: center;
  padding-block-start: var(--space-300);
}

.offers-page__load-more[hidden],
.offers-page__load-more:has([data-load-more][hidden]) {
  display: none;
}

.offers-page__empty {
  padding: var(--space-300);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
}

.offers-page__empty .card__copy-group,
.offers-page__empty .card__copy {
  max-inline-size: none;
}

/* ── Suchergebnis „Seiten": kein Card-Look, nur unauffälliger Hinweistext ──
   Die Kurs-Suche darunter bringt bereits eigene Treffer — die leere
   Seiten-Meldung soll nicht wie ein zweiter, gleichwertiger Ergebnisblock
   wirken. */
.search-results-block .offers-page__empty {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.search-results-block .offers-page__empty .card__title {
  font-size: var(--font-step-0);
  font-weight: var(--weight-body-default);
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
  letter-spacing: normal;
  color: var(--color-text-secondary);
}

.search-results-block .offers-page__empty .card__copy {
  color: var(--color-text-secondary);
}

/* ── Abstand Suchergebnis (Seiten) → Kurse ──
   Beide Ergebnisblöcke sind auf der Suchseite KEINE echten Geschwister im DOM
   (ke_search und vkevents bringen je einen eigenen .offers-page > .page-grid
   Wrapper mit) — die globale .section + .section-Regel (kein doppeltes
   padding) greift daher nicht. Gleicher Hintergrund → wie dort: padding
   manuell auf einfaches Section-Padding reduzieren. */
.tx-kesearch-pi1.offers-page + .offers-page[data-sprachkurs-page] .section {
  padding-block-start: 0;
}

.offers-page__contact-meta {
  display: grid;
  gap: var(--space-050);
}

.offers-page__contact-meta a {
  color: inherit;
}

@media (min-width: 768px) {
  .page-grid--offers {
    --layout-page-padding-inline: var(--space-250);
  }

  /* Zeile 1: Filter 1 + Filter 2
     Zeile 2: Filter 3 (Digiquartier zusätzlich Button rechts) */
  .offers-page__filters-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  /* Digiquartier: Button im Grid rechts ausgerichtet */
  .offers-page__clear-button {
    justify-self: end;
  }

  /* Spracherwerb: Sekundärzeile — Toggles links, Reset-Button rechts */
  .offers-page__filters-secondary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-300);
  }

  .offers-page__filters-secondary .offers-page__clear-button {
    align-self: auto;   /* Reihe: normale Höhe/Breite */
  }

  .offers-page__results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-grid--offers {
    --layout-page-padding-inline: var(--space-400);
  }


  /* ── Hero: Titel links | Lead rechts, oben ausgerichtet ── */
  .offers-page__header-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-450);
    align-items: start;
  }

  .offers-page__title-block {
    grid-column: 1 / span 5;
  }

  .offers-page__title {
    hyphens: auto;
  }

  .offers-page__lead {
    grid-column: 6 / -1;
    max-inline-size: none;
    align-self: start;
    padding-block-start: 16px;
  }

  /* Digiquartier: 3 Filter + Button in einer Zeile → 4. Spalte (auto) für den Button. */
  .offers-page__filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }

  /* Spracherwerb: Button steht in der Sekundärzeile, also KEINE leere 4. Spalte —
     sonst enden die Dropdowns eine Gap-Breite vor der rechten Kante und der
     Reset-Button ragt darüber hinaus. */
  .offers-page__filters-grid:not(:has(.offers-page__clear-button)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .offers-page__clear-button {
    justify-self: auto;
  }
}

@media (min-width: 1280px) {
  .page-grid--offers {
    --layout-page-padding-inline: var(--space-800);
  }

  .offers-page__results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Kontaktkarten-Styles → patterns/vcard-group.css (global in main.css) */

/* ============================================================
   patterns/course-list.css
   ============================================================ */
/* Pattern: course-list — expandable row list for Spracherwerb Angebote
   Structure:
     .course-list                   → ordered list container
       .course-item                 → single course row (article/li)
         .course-item__row          → flex: main content + action buttons
           .course-item__main       → title, datetime, tags (flex: 1)
             .course-item__body     → headline + tags
             .course-item__datetime → days + time
           .course-item__actions    → wishlist button + chevron button
         .course-item__panel        → expanded details (hidden by default)
           .course-item__panel-columns
             .course-item__info-list (dl × 2) — Beschreibung + Details / Anmerkung + Kontakt
   ─────────────────────────────────────────────────────────────── */

/* ── List container ── */
.course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-outline);
}

/* ── Single item ── */
.course-item {
  border-block-end: 1px solid var(--color-outline);
  min-inline-size: 0;
  /* Touch-Target-Größe der Action-Buttons (44 px / WCAG 2.5.5) */
  --_action-size: var(--component-nav-toggle-size); /* 2.75 rem */
}

.course-item[hidden] { display: none; }

/* ── Summary row ── */
.course-item__row {
  position: relative; /* anchor für abs-positioned actions ab 768 px */
  display: flex;
  gap: var(--space-200);
  align-items: start;
  padding-block: var(--space-250);
  padding-inline-start: var(--space-200);
  cursor: pointer;
  transition: background-color 120ms ease;
}

@media (min-width: 768px) {
  .course-item__row {
    padding-inline-end: calc(var(--_action-size) + var(--space-200)); /* Platz für abs. Buttons */
  }
}

.course-item__row:hover,
.course-item__row:has([aria-expanded="true"]) {
  background: color-mix(in srgb, var(--color-surface-primary) 55%, transparent);
}

.course-item__row:active {
  background: color-mix(in srgb, var(--color-surface-secondary) 45%, transparent);
}

/* ── Main: linker Body + rechtes Datetime ── */
.course-item__main {
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  align-items: start;
  pointer-events: none; /* row click bubbles from parent */
}

@media (min-width: 640px) {
  .course-item__main {
    flex-direction: row;
    gap: var(--space-400);
    align-items: start;
  }
}

/* Linker Block: Headline + Tags */
.course-item__body {
  flex: 1 1 0;
  min-inline-size: 0;
  display: grid;
  gap: var(--space-150);
  align-content: start;
}

.course-item__title {
  margin: 0;
  /* Typografie kommt von .headline.type-hl-xl im HTML */
}

/* Tags: direkt unter der Headline — horizontal, wrappend */
.course-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tags use the shared .tag utility class (badge.css) — no local overrides needed */

/* Rechter Block: Datum + Uhrzeit — im Card-meta-Stil */
.course-item__datetime {
  flex: none;
  inline-size: 13rem; /* feste Breite für ruhige Spalte */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  margin: 0;
  gap: var(--space-025);
}

/* type-detail-semibold-lg: font-step-1, semibold (600), kondensiert */
.course-item__days,
.course-item__time {
  margin: 0;
  white-space: nowrap;
}

/* ── Action buttons: mobile = im Flow oben, ab 768 px absolut positioniert ── */
.course-item__actions {
  flex: none;
  align-self: start; /* oben ausrichten im mobilen Flex-Flow */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-050);
}

@media (min-width: 768px) {
  .course-item__actions {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: calc(var(--_action-size) + var(--space-200));
    align-self: auto;
    justify-content: center; /* vertikal zentriert, kein Einfluss auf Zeilenhöhe */
  }
}

.course-item__wishlist,
.course-item__chevron {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: var(--space-100);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
}

.course-item__wishlist:hover,
.course-item__chevron:hover {
  background: var(--color-surface-secondary);
  color: var(--color-text);
}

.course-item__wishlist:focus-visible,
.course-item__chevron:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.course-item__wishlist,
.course-item__chevron {
  min-inline-size: var(--_action-size); /* 44 px Touch-Target — WCAG 2.5.5 */
  min-block-size: var(--_action-size);
}

.course-item__wishlist svg,
.course-item__chevron svg {
  inline-size: var(--space-350); /* 1.75 rem — passt in 44 px Button mit Padding */
  block-size: var(--space-350);
  flex: none;
}

/* Wishlist icon states: Umriss = nicht gemerkt, gefüllt = gemerkt */
.course-item__wishlist .course-item__wishlist-icon--solid { display: none; }

.course-item__wishlist[aria-pressed="true"] {
  color: var(--color-link);
}

.course-item__wishlist[aria-pressed="true"] .course-item__wishlist-icon--outline { display: none; }
.course-item__wishlist[aria-pressed="true"] .course-item__wishlist-icon--solid { display: block; }

/* Chevron rotation */
.course-item__chevron svg {
  transition: transform 160ms ease;
}

.course-item__chevron[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── Expanded panel ── */
.course-item__panel {
  background: color-mix(in srgb, var(--color-surface-primary) 55%, transparent);
  padding-block-end: var(--space-300);
  padding-inline-start: var(--space-200); /* flush with row content */
  padding-inline-end: var(--space-700);   /* align with left edge of action buttons */
  display: grid;
  gap: var(--space-200);
  /* Basis-Typografie: type-body-sm (eine Stufe unter basis) */
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
  font-weight: var(--weight-body-default);
  font-stretch: normal;
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
}

.course-item__panel[hidden] { display: none; }

/* type-body-base body-default — nur komponentenspezifische Properties hier */
/* ── Zwei-Spalten-Layout: Details + Kontakt ── */
.course-item__panel-columns {
  display: grid;
  gap: var(--space-200);
}

@media (min-width: 640px) {
  .course-item__panel-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-400);
    align-items: start;
  }
}

/* ── Info list (dl) — detail-condensed-sm ── */
.course-item__info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-200);
  row-gap: var(--space-100); /* 0.5 rem — --space-075 existiert nicht im Token-System */
  margin: 0;
}

.course-item__info-label,
.course-item__info-value {
  margin: 0;
  font-size: var(--font-step--1);
  line-height: var(--line-height-160);
  letter-spacing: var(--letter-spacing-100);
}

.course-item__info-label {
  font-weight: var(--weight-body-strong);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wght" var(--weight-body-strong), "wdth" 75;
}

.course-item__info-value {
  min-inline-size: 0;
  font-weight: var(--weight-body-default);
  font-stretch: normal;
  font-variation-settings: "wght" var(--weight-body-default), "wdth" 100;
}

/* ── Contact block — teilt .course-item__info-list styles ── */
.course-item__info-list a {
  color: var(--color-link);
}

/* ── Anmerkung-Liste innerhalb course-item__info-value — nur hier, nicht in den übrigen dt/dd-Zeilen ── */
.course-item__note-list {
  margin: 0;
  padding-inline-start: var(--space-300);
  list-style-type: disc;
}

.course-item__note-list > li + li {
  margin-block-start: var(--space-100);
}

/* ── Wishlist bar (sticky bottom) ── */
.wishlist-bar {
  position: fixed;
  inset-block-end: var(--space-300);
  inset-inline-end: var(--space-300);
  z-index: 30;
  background: var(--color-surface-inverted);
  color: var(--color-content-on-inverted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-raised);
  padding: var(--space-200) var(--space-250);
}

.wishlist-bar[hidden] { display: none; }

.wishlist-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-150);
}

.wishlist-bar__count {
  margin: 0;
  font-size: var(--font-step-1);
  font-weight: var(--weight-body-strong);
  font-variation-settings: "wght" var(--weight-body-strong);
  white-space: nowrap;
}

/* ── Empty state: .offers-page__empty.card (in offers-page.css) ── */

/* ── Responsive ── */
@media (min-width: 640px) {
  /* max-content bleibt auf allen Breakpoints — kein Override nötig */
}

/* ── Print header: nur im Druck sichtbar ── */
.print-header {
  display: none;
}

/* ── Print: nur gemerkete Kurse ── */
@media print {
  @page { margin: 1.2cm; }

  .course-item { break-inside: avoid; }

  body.is-printing-wishlist .offers-page__header { display: none !important; }
  body.is-printing-wishlist .offers-page__filter-section { display: none !important; }
  body.is-printing-wishlist .offers-page__load-more { display: none !important; }
  body.is-printing-wishlist .wishlist-bar { display: none !important; }
  body.is-printing-wishlist .offers-page__empty { display: none !important; }
  body.is-printing-wishlist .offers-page__results-meta { display: none !important; }
  body.is-printing-wishlist .course-item:not(.is-wishlisted) { display: none !important; }
  body.is-printing-wishlist .course-item__panel { display: grid !important; }
  body.is-printing-wishlist .course-item__actions { display: none !important; }

  /* Volle Druckbreite: Seitenraster-Innenabstand und max-width aufheben */
  body.is-printing-wishlist .page-grid {
    max-width: none !important;
    padding-inline: 0 !important;
  }

  /* Kurszeiten-Spalte rechts weglassen → Headline nimmt die ganze Zeile ein
     (Kurszeiten bleiben im aufgeklappten Detail erhalten). */
  body.is-printing-wishlist .course-item__datetime { display: none !important; }
  body.is-printing-wishlist .course-item__row {
    padding-inline-end: var(--space-200) !important; /* reservierter Platz der versteckten Buttons entfällt */
  }

  /* Tags im Druck kompakter: kleinere Schrift + schmalere Innenränder */
  body.is-printing-wishlist .tag {
    font-size: 8pt;
    padding-inline: var(--space-050) !important; /* 0.25rem statt 0.75rem */
    padding-block: 0;
    line-height: 1.3;
  }

  body.is-printing-wishlist .site-header { display: none !important; }
  body.is-printing-wishlist .site-footer { display: none !important; }

  body.is-printing-wishlist .print-header {
    display: flex;
    flex-direction: row-reverse; /* DOM: [svg, h1] → visuell: h1 links, svg rechts */
    justify-content: space-between; /* Headline an linkem, Logo an rechtem Rand */
    align-items: center;
    gap: var(--space-300);
  }

  body.is-printing-wishlist .print-header__title {
    margin: 0;
    font-size: var(--font-step-2);
    line-height: var(--line-height-135);
    font-weight: var(--weight-headline);
    font-variation-settings: "wght" var(--weight-headline), "wdth" 100;
    letter-spacing: var(--letter-spacing-050);
  }

  /* ── Kompakte Zeilenhöhen + Abstände im Druck ── */
  .course-item__row {
    padding-block: var(--space-150);
  }

  .course-item__days,
  .course-item__time {
    line-height: var(--line-height-130);
  }

  .course-item__panel {
    padding-block-end: var(--space-150);
    gap: var(--space-100);
    line-height: var(--line-height-135);
  }

  .course-item__info-label,
  .course-item__info-value {
    line-height: var(--line-height-135);
  }

  .course-item__info-list {
    row-gap: var(--space-050);
  }

  .course-item__panel-columns {
    gap: var(--space-200);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .course-item__row,
  .course-item__chevron svg,
  .course-item__wishlist,
  .course-item__chevron { transition: none; }
}

/* ── Forced colors ── */
@media (forced-colors: active) {
  .course-item { border-color: CanvasText; }
  .course-item__wishlist[aria-pressed="true"] { color: Highlight; }
  .wishlist-bar {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

/* Kurszeiten im Detail: ein Tag-/Zeit-Block pro Zeile (Trennung der einzelnen Tage) */
.course-item__times {
  list-style: none;
  margin: 0;
  padding: 0;
}
.course-item__times > li + li {
  margin-block-start: var(--space-100, 0.25rem);
}


/* ── Suchseite: ke_search-Ergebnisse (Seiten) ──────────────────────────
   Schlanke Trefferliste im bbn_se-Stil; Kurs-Treffer nutzen das
   bestehende course-list/course-item-Pattern. */

.search-results-block {
  display: grid;
  gap: var(--space-300);
}

.search-results-title {
  margin: 0;
}

.search-results-meta {
  margin: 0;
  color: var(--color-text-muted);
}

.search-results {
  margin: 0;
  padding: 2.5rem 0 0;
  list-style: none;
  display: grid;
  gap: var(--space-300);
}

/* card__copy begrenzt auf 32ch (Karten-Raster) — Suchtreffer sind
   volle Breite, daher Lesebreite auf 70ch anheben */
.search-result .card__copy {
  max-inline-size: 70ch;
}

.search-result__title a {
  color: inherit;
  text-decoration: none;
}

.search-result__title a:hover,
.search-result__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.search-pagination__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-150);
  align-items: center;
}