/* layout.css – gebündelt aus den Teildateien (ehem. main.css @imports).
   Einzige geladene CSS-Datei (analog sitepackage_bbn_se). Direkt hier editieren.
   Remote-@import(s) stehen ganz oben (CSS-Vorgabe: @import vor allen Regeln). */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800&display=swap");

/* ==================== 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

   TEMPORARY font source: Google Fonts CDN.
   The CDN delivers Open Sans as a variable font with both axes
   (wdth 75..100, wght 300..800) under the family name "Open Sans",
   so the fallback chain below still resolves and every
   font-variation-settings rule in the system keeps working.

   The self-hosted @font-face block is parked directly underneath as
   a comment. Once the .woff2 file is dropped into /assets/fonts/,
   delete the @import above and uncomment the @font-face block to
   finish the migration. */


/*
@font-face {
  font-family: "Open Sans Variable";
  src:
    url("../fonts/OpenSans-VariableFont_wdth_wght.woff2") format("woff2-variations"),
    url("../fonts/OpenSans-VariableFont_wdth_wght.ttf")   format("truetype-variations");
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
*/

: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;
}

/* Tailwind-Erbe aus vkevents: GetDateTimeViewHelper gibt das Datum als
   <span class="font-bold"> aus (die Vorlage nutzt dort <strong>). vkevents wird
   auch von sitepackage_bbn_se genutzt, deshalb hier die Utility nachziehen
   statt den ViewHelper zu ändern — gleiche Werte wie :where(strong, b). */
.font-bold {
  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-end: var(--layout-section-padding-block-end);
}

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

/* Kinder von .shell-inner spannen standardmäßig die volle Grid-Breite.
   Nötig für CE-Wrapper ohne eigenes Grid-Wissen (ce-header, Dritt-Plugins
   wie tx-maps2) — sonst landen sie per Auto-Placement in einer einzelnen
   Spalte. Pattern-Regeln (site-nav, section__stack--wide, …) werden später
   importiert und überschreiben diese Platzierung bei Bedarf. */
.shell-inner > * {
  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);
}

/* vkevents_pi1list (template=101) wird nackt gerendert (kein umschließendes .section mehr,
   siehe ContentElements/Layouts/Default.html) — sein Top-Level-Output ist entweder
   [data-offers-page] (Treffer vorhanden) oder .noEvents (keine Treffer). Beide haben keine
   eigene .section-Klasse, daher greift obige Surface-Übergang-Regel hier nicht automatisch;
   ohne diese Ergänzung fehlt der Innenabstand einer direkt folgenden --surface-Section
   (z. B. exmt_textbild mit Hintergrund) komplett. */
[data-offers-page] + .section--surface,
.noEvents + .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 */
}

/* ── RTE-Wrapper ───────────────────────────────────────────────────────────
   Die Vorlage setzt Fließtext als mehrere gleichrangige <p class="body-text">;
   jeder Absatz trägt damit die 16 px selbst. Aus dem RTE kommt der Text
   dagegen als ein <div class="body-text …"> mit klassenlosen <p> darin — die
   16 px säßen dann nur einmal am Wrapper und mehrere Absätze stünden ohne
   Abstand aufeinander.

   Konvention im Sitepackage (siehe Templates): <div class="body-text …"> ist
   immer RTE-Ausgabe, <p class="body-text …"> immer ein einzelner Absatz.
   Deshalb genügt die Elementunterscheidung — Wrapper neutralisieren, Absätze
   tragen den Abstand. Gilt für Hero-Lead, Split-Section und Accordion
   gleichermaßen; Sonderfälle (letzter Absatz vor Buttons/Badges) stehen bei
   den jeweiligen Patterns weiter unten. */
div.body-text {
  padding-block-end: 0;
}

/* Bewusst inklusive letztem Absatz: in der Vorlage trägt auch der letzte
   <p class="body-text"> seine 16 px, sie sind dort der Abstand des Textblocks
   nach unten. Ein :last-child-Reset würde ihn schlucken. */
div.body-text > p {
  padding-block-end: var(--space-200);
}

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

/* Sekundärtext (Hinweise, Statusmeldungen) — z. B. die Mapbox-Einwilligungs-
   texte im exmt_kurskarte. Die Klasse wurde dort schon verwendet, war aber
   nirgends definiert. Bewusst --color-text-secondary statt --color-text-muted:
   letzteres ist laut Token-Regel oben ausschließlich für dekorative Elemente. */
.body-muted {
  color: var(--color-text-secondary);
}

/* 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, direkt als
                                     card__meta-copy (kein card__address-Wrapper)
   --cost         icon-ticket        Eintrittspreis (card__address)
   --registration icon-check         Anmeldestatus (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;
  border: 1px solid var(--color-media-placeholder-stroke);
  background: var(--color-media-placeholder-bg);
}

.card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}


/* 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;
  max-block-size: none; /* Kein Höhen-Cap — langer Titel drückt Copy nach unten */
  hyphens: auto;
}

.card--content .card__body {
  gap: var(--space-100); /* Titel → Copy: 8 px Abstand damit Überlapp unmöglich ist */
}

.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__media {
    border-color: CanvasText;
    background: Canvas;
  }

  .card__media::before,
  .card__media::after {
    background: CanvasText;
  }

  .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;
}

/* Die Vorlage setzt im Panel je Absatz ein <p class="body-text …"> und damit
   16 px padding-block-end. Der Panel-Inhalt kommt hier aus dem RTE, dessen
   <p>-Tags keine Klassen tragen können — deshalb dieselbe Regel elementbasiert. */
.accordion__panel-inner > p {
  padding-block-end: var(--space-200);
}

@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 {
  /* Sichtbares Label eines bedienbaren Controls → muss 4.5:1 erfüllen (WCAG 1.4.3).
     60% lag darunter; 78% bleibt sichtbar "platzhalterig", erreicht aber den Kontrast. */
  color: color-mix(in srgb, var(--color-text) 78%, 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: 999px;
  background: color-mix(in srgb, var(--color-text) 22%, 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;
  }
}

/* ==================== components/map.css ==================== */
/* Component: map (maps2 / Leaflet)
   Karten-CE aus EXT:maps2 — Wrapper .tx-maps2, Karten-Div .maps2
   (Breite/Höhe des Karten-Divs setzt maps2 per Inline-Style aus dem
   Plugin-FlexForm: mapWidth/mapHeight). */

.tx-maps2 {
  /* Volle Grid-Breite in .shell-inner — explizit, auch wenn die generische
     Regel in grid.css (.shell-inner > *) das bereits abdeckt. */
  grid-column: 1 / -1;
}
form.txMaps2Form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
label.flex.items-center.gap-2.cursor-pointer.select-none.group {
    display: flex;
    padding-right: 1rem;
    padding-top: 1rem;
}
.w-6.h-6.flex.items-center.justify-center.transition-all {
    padding-right: .5rem;
}

/* ==================== 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);
}

/* Innerhalb von .page-grid (CE-Layout-Wrapper): padding-inline liefert
   bereits .page-grid — sonst doppelter Einzug der Inhalte. */
.page-grid .shell-inner {
  padding-inline: 0;
}

.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 {
    /* inline-size: 100% ist nötig: als Grid-Item (in .section) würden die
       Auto-Margins das Element sonst auf Inhaltsbreite schrumpfen lassen
       (sichtbar z.B. bei tx-maps2 — Karte klein und zentriert). */
    inline-size: 100%;
    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-s);
  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-200);
  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, direkt nach Nav-Links */
.site-header--inline-nav .header-search {
  flex: none;
  min-block-size: 0;
}

/* 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;
  }

  /* Gleiches Styling wie Burger-Menü — Basis-Tokens geteilt */
  .inline-nav__link {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-150);
    padding-inline: var(--space-150);
    color: var(--color-text);
    text-decoration: none;
    /* Fluid Typo — gleiche Skala wie Burger-Items */
    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: uppercase;
    /* Aktiv-Indikator (Unterstrich an Divider-Linie) */
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    border-radius: 0;
    transition: text-decoration 120ms ease, border-color 120ms ease;
  }

  /* Hover: Unterstreichen wie Burger-Menu */
  .inline-nav__link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.12em;
  }

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

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

}

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

@media (min-width: 1024px) and (forced-colors: active) {
  .inline-nav__link {
    color: LinkText;
  }

  .inline-nav__link[aria-current="page"] {
    color: LinkText;
    border-block-end-color: Highlight;
  }
}

/* ==================== 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;
  overflow: hidden;
  color: var(--color-text);
}

.site-footer__partner img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

.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::before,
  .site-footer__partner::after {
    background: CanvasText;
  }

  .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;
}

/* Badge-Liste (z. B. exmt_hero Zielgruppen-Filter) direkt nach Titel/Lead: 24 px Abstand,
   analog .landing-hero__copy .badge-list. */
.content-page__intro .badge-list {
  padding-block-start: var(--space-300);
}

/* 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; }

/* Button-Zeile in einem Prose-Abschnitt (exmt_textbild, Layout "Fließtext").
   Spiegelt .split-section__actions — dieselben 24 px sind auch hier die einzige
   Quelle für den Abstand Text → Button. Eigener Name statt Wiederverwendung der
   split-section-Klasse, weil die Klassennamen im System pattern-gebunden sind. */
.content-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-150);
  justify-content: flex-start;
  padding-block-start: var(--space-300);
}

/* ── 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), .btn (display:inline-flex) und
   .quarter-page__map-detail-media (display:block ≥480px) überschreiben sonst per Spezifität
   den UA-Stil [hidden]{display:none} → leere Web-Zeile / leerer CTA / leere Foto-Fläche
   blieben sichtbar. Foto/CTA/Web werden von map-controller.js je Ort ein-/ausgeblendet. */
.quarter-page__map-detail-web-row[hidden],
.quarter-page__map-detail-cta[hidden],
.quarter-page__map-detail-events[hidden],
.quarter-page__map-detail-media[hidden] { display: none; }

/* Der Detail-Name wird beim Marker-/Options-Klick per JS programmatisch fokussiert
   (tabindex="-1", nur für Screenreader) – kein sichtbarer Fokusrahmen für Maus/Touch. */
.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;
  }

  /* ── 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);
  }

  figure.content-page__hero-media .card__media,
  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);
  }

  /* ── 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));
  }
}

@media (min-width: 1280px) {
  .quarter-page__offers-grid {
    grid-template-columns: repeat(4, 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 ── */

/* Der RTE-Grundrhythmus (Wrapper neutral, jeder Absatz 16 px) steht global in
   paragraph.css. Hier nur der Sonderfall der Vorlage: der letzte Absatz vor den
   Actions bzw. am Ende des Textblocks gibt sein Padding ab — der Abstand nach
   unten kommt ausschließlich von .split-section__actions bzw. vom Section-
   Padding. p-zu-p-Abstände bleiben unangetastet. */
.split-section__text > div.body-text:last-child > p:last-child,
.split-section__text > div.body-text:has(+ .split-section__actions) > p:last-child,
.split-section__text > p.body-text:last-child {
  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;
  }

  /* Kein Media: Text über beide Spalten. Ohne diese Regel bleibt bei
     --flip die 5fr-Spalte leer und der Text steht im Tablet-Bereich
     unmotiviert eingerückt in der rechten Spalte (392 statt 720 px).
     Pendant zu .split-section__text:only-child im 1024er-Block. */
  .split-section__text:only-child {
    grid-column: 1 / -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 */
  .split-section__text:only-child {
    grid-column: 1 / span 9;
  }
}

/* ==================== 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 und im Prose-Abschnitt: Identity | Meta nebeneinander
   (Inline-Variante)                                                          */
.split-section__text .vcard,
.split-section__text .contact-card,
.content-page__prose .vcard,
.content-page__prose .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 */
}

/* Der Teaser ist hier der RTE-Wrapper: die Absätze tragen den Rhythmus (siehe
   paragraph.css). Für den letzten Absatz gilt dieselbe Regel wie oben für den
   Wrapper — kein eigenes Padding, der Abstand kommt allein von der Badge-Liste
   bzw. den Actions darunter. */
div.landing-hero__teaser > p:last-child {
  padding-block-end: 0;
}

/* 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;
}

.landing-hero__media .card__media {
  aspect-ratio: auto;
  overflow: visible;
  border: none;
  background: transparent;
}

.landing-hero__media .card__media img {
  position: static;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: initial;
}

/* 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/offers-page.css ==================== */
/* Pattern: offers page — filter section + results grid (vkevents template=101) */

/* vkevents_pi1list (template=101) wird seit dem Section-in-Section-Fix nackt gerendert
   (kein umschließendes .section mehr, siehe ContentElements/Layouts/Default.html) — der
   Wrapper-Div landet dadurch direkt im .page-grid und braucht wie jede Top-Level-Section
   selbst grid-column: 1/-1, sonst wird er nur in eine der Grid-Spalten einsortiert.
   padding-block-end fehlt aus demselben Grund (nur .section hat das per Basis-Regel) — bei
   viel Inhalt (Filter+Ergebnis-Grid) fällt das kaum auf, bei .noEvents (kurze Karte als
   einziger Inhalt, siehe unten) klebt ohne diese Ergänzung die Karte direkt an der
   nächsten Section. */
[data-offers-page] {
  grid-column: 1 / -1;
  padding-block-end: var(--layout-section-padding-block-end);
}

/* .noEvents fehlt aus demselben Grund das .section-eigene padding-block-end — aber NUR
   im nackten OfferList-Fall (direktes Kind von .page-grid) nachbilden. In Slider.html
   (Kind von .card-carousel) bringt die umschließende <section> ihr eigenes
   padding-block-end schon mit — ein zusätzliches margin dort verdoppelt den Abstand. */
.page-grid > .noEvents {
  margin-block-end: var(--layout-section-padding-block-end);
}

/* ── Hero: Titel links, Lead rechts, oben ausgerichtet ──
   Portiert aus sitepackage_bbn_se (dort für bbn_se_seitenheader genutzt,
   hier zusätzlich für exmt_hero ohne Bild). */
.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;
}

.offers-page__title {
  margin: 0;
}

/* Sichtbare CE-Überschrift von vkevents_pi1list (template=101/102), z. B. „Liste Gostenhof" —
   Abstand nach unten kommt wie bei .content-page__section-title über die Headline-Rhythmus-
   Paddings (type-hl-2xl), kein eigenes margin nötig. grid-column: 1/-1 nötig, weil die
   Überschrift direktes Kind von .page-grid ist (nackt gerendertes CE, siehe
   ContentElements/Layouts/Default.html) und sonst nur eine der beiden Grid-Spalten belegt. */
.offers-page__section-title {
  grid-column: 1 / -1;
  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;
}

/* RTE-Fließtext (z. B. exmt_hero ohne Bild) bringt eigene <p>-Tags mit. */
.offers-page__lead p {
  margin: 0;
}

/* Badge-Liste (z. B. exmt_hero Zielgruppen-Filter) als dritte Zeile im Header:
   volle Breite, 24 px Abstand zur Lead darüber. */
.offers-page__header-inner > .badge-list {
  padding-block-start: var(--space-300);
}

/* 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;
}

.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 {
  display: grid;
  gap: var(--space-150);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.offers-page__filters-label {
  margin: 0;
  padding: 0;
  float: left;
  inline-size: 100%;
}

.offers-page__filters-label,
.offers-page__selection-label {
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

.offers-page__filters-grid {
  display: grid;
  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%;
  min-inline-size: 0 !important; /* überschreibt JS-gesetzten min-inline-size */
}

/* Filter zurücksetzen — invertierter Button */
.offers-page__clear-button {
  --color-button-bg: var(--color-surface-inverted);
  --color-button-border: transparent;
  --color-button-text: var(--color-content-on-inverted);

  align-self: end;
  white-space: nowrap;
}

.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: var(--color-surface-inverted);
  border-color: transparent;
  color: var(--color-content-on-inverted);
  opacity: 0.45;
}

.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__results-meta,
.offers-page__selection-empty {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.offers-page__results-meta {
  margin-block-end: var(--space-200);
  padding-block-start: var(--space-500);
}

.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);
}

.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;
}

.offers-page__offer-shell[hidden] {
  display: none;
}

.offers-page__offer-shell .card {
  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-400);
}

.offers-page__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);
}

/* Server-seitiger Leerzustand (0 Treffer von der VK-API, vor jedem JS-Filtering) —
   OfferList.html (template=101, kein Ergebnis überhaupt) und Slider.html (template=102,
   Karten-Slider), bisher unstyled. Gleiche Optik wie .offers-page__empty (Client-seitiger
   Leerzustand nach Filterung). grid-column: 1/-1 für den OfferList-Fall (direktes Kind von
   .page-grid, s.o. bei .offers-page__section-title) — in Slider.html (Kind von
   .card-carousel, kein Grid-Container) wirkungslos, aber unschädlich. */
.noEvents {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-300);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

@media (min-width: 768px) {
  .offers-page__filters-grid {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .offers-page__clear-button {
    justify-self: end;
  }

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

@media (min-width: 1024px) {
  /* ── 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;
  }

  .offers-page__header-inner > .badge-list {
    grid-column: 1 / -1;
  }

  /* Alle 3 Filter + Button in einer Zeile */
  .offers-page__filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }

  .offers-page__clear-button {
    justify-self: auto;
  }

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

@media (min-width: 1280px) {
  .offers-page__results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==================== patterns/offer-detail-page.css ==================== */
/* Pattern: offer detail page */

/* Hero-Modifier direkt auf der Section (kein body-class nötig) */
.offer-detail__hero {
  min-block-size: 0;
  padding-block-end: var(--space-300);
}

.offer-detail__hero .content-page__title {
  padding-block-end: 0;
}

@media (min-width: 1024px) {
  .offer-detail__hero {
    min-block-size: 320px;
    padding-block-end: var(--layout-section-hero-padding-block-end);
  }
}

/* Sidebar-Karten: Header + Body ohne Trennlinie (Referenz-Design) */
.card--detail {
  --card-gap: 0;
}

.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;
  }
}

/* ── ke_search-Suchergebnisse (portiert aus sitepackage_bbn_se) ──────────
   Trefferliste im bbn_dq-Stil; nutzt das bestehende .page-grid/.section-
   Wrapping (padding-inline) und das .card-Pattern. */
.page-grid--offers {
  --layout-page-padding-inline: var(--space-200);
}

.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);
}

/* Suchtreffer sind volle Breite → Lesebreite anheben (Karten-Raster begrenzt
   .card__copy sonst auf ~32ch) */
.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;
}