/* AUTO-GENERATED by build-css.ts - DO NOT EDIT */
/* Regenerate: npx tsx content-elements/generators/build-css.ts reehuis */
/* Kunde: reehuis */

/* === Layer-Deklaration === */
/* --- ../../../../content-elements/css/layers.css --- */
/* content-elements/css/layers.css
 * CSS Layer-Hierarchie fuer das minCore Framework
 * Spaetere Layers gewinnen bei gleicher Spezifitaet
 *
 * reset     → Browser-Normalisierung
 * tokens    → Design Tokens (--min-*, Fallbacks)
 * base      → Typografie, grundlegende Elemente
 * layout    → Container, Grid, Section-Spacing
 * components → Content-Element CSS (ce-*)
 * modules   → Feature-Module (A11y, Extensions, Chat etc.)
 * utilities → Hilfsklassen (Spacing, Visibility)
 * mandant   → Kunden-Overrides (gewinnt IMMER)
 */
@layer reset, tokens, base, layout, components, modules, utilities, mandant;


/* === Framework === */
/* --- ../../../../content-elements/css/_reset.css --- */
/* content-elements/css/_reset.css
 * Minimaler Reset - nur was noetig ist
 * Kein normalize.css, kein opinionated Reset
 */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

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

  /* SVG separat: height: auto NICHT setzen - SVG soll eigene Dimensionen behalten */
  svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration-skip-ink: auto;
  }

  ul, ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
  }

  /* Barrierefreiheit */
  :focus-visible {
    outline: 2px solid var(--min-color-accent);
    outline-offset: 2px;
  }

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

/* --- ../../../../content-elements/css/_tokens.css --- */
/* content-elements/css/_tokens.css
 * Design Token Template
 * --min-*    = Framework-Tokens (nutzen --mandant-* mit Fallbacks)
 * --mandant-* = Kunden-Werte (definiert in mandant.css)
 * --ce-*     = Element-spezifische Properties (definiert in components/*.css)
 */
@layer tokens {
  :root {
    /* === Farben === */
    --min-color-primary: var(--mandant-primary, #333);
    --min-color-secondary: var(--mandant-secondary, #666);
    --min-color-accent: var(--mandant-accent, var(--min-color-primary));
    --min-color-bg: var(--mandant-bg, #fff);
    --min-color-text: var(--mandant-text, #1a1a1a);
    --min-color-muted: var(--mandant-muted, #666);
    --min-color-surface: var(--mandant-surface, #f5f5f5);
    --min-color-border: var(--mandant-border, #e0e0e0);

    /* === Typografie === */
    --min-font-heading: var(--mandant-font-heading, system-ui, -apple-system, sans-serif);
    --min-font-body: var(--mandant-font-body, system-ui, -apple-system, sans-serif);
    --min-font-mono: var(--mandant-font-mono, 'SF Mono', 'Fira Code', monospace);
    --min-font-size-base: var(--mandant-font-size, 1rem);
    --min-h1-size: var(--mandant-h1-size, clamp(2rem, 4vw + 1rem, 3.5rem));
    --min-h2-size: var(--mandant-h2-size, clamp(1.5rem, 3vw + 0.5rem, 2.5rem));
    --min-h3-size: var(--mandant-h3-size, clamp(1.25rem, 2vw + 0.5rem, 2rem));
    --min-h4-size: var(--mandant-h4-size, clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem));
    --min-body-size: var(--mandant-body-size, 1rem);
    --min-font-weight-normal: 400;
    --min-font-weight-medium: 500;
    --min-font-weight-bold: 700;
    --min-line-height: 1.6;
    --min-line-height-heading: 1.2;

    /* === Spacing (8px Grid) === */
    --min-space-xs: var(--mandant-space-xs, 0.25rem);
    --min-space-sm: var(--mandant-space-sm, 0.5rem);
    --min-space-md: var(--mandant-space-md, 1rem);
    --min-space-lg: var(--mandant-space-lg, 2rem);
    --min-space-xl: var(--mandant-space-xl, 4rem);
    --min-space-2xl: var(--mandant-space-2xl, 6rem);
    --min-space-3xl: var(--mandant-space-3xl, 8rem);
    --min-space-section: var(--mandant-space-section, 4rem);

    /* === Radius === */
    --min-radius-sm: var(--mandant-radius-sm, var(--mandant-radius, 0.25rem));
    --min-radius-md: var(--mandant-radius-md, calc(var(--min-radius-sm) * 2));
    --min-radius-lg: var(--mandant-radius-lg, calc(var(--min-radius-sm) * 4));
    --min-radius-full: var(--mandant-radius-round, 9999px);

    /* === Transitions === */
    --min-transition: var(--mandant-transition, 200ms ease);
    --min-transition-slow: 400ms ease;
    --min-transition-fast: 100ms ease;

    /* === Shadows === */
    --min-shadow-sm: var(--mandant-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    --min-shadow-md: var(--mandant-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
    --min-shadow-lg: var(--mandant-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
    --min-shadow-xl: var(--mandant-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));

    /* === Container === */
    --min-container-max: var(--mandant-container-max, 1280px);
    --min-container-padding: var(--mandant-container-padding, 1.5rem);

    /* === Spacing Aliases (components use --min-spacing-*) === */
    --min-spacing-xs: var(--min-space-xs);
    --min-spacing-sm: var(--min-space-sm);
    --min-spacing-md: var(--min-space-md);
    --min-spacing-lg: var(--min-space-lg);
    --min-spacing-xl: var(--min-space-xl);
    --min-spacing-2xl: var(--min-space-2xl);
    --min-spacing-3xl: var(--min-space-3xl);

    /* === Color Aliases (components use semantic names) === */
    --min-color-primary-hover: var(--mandant-primary-hover, color-mix(in srgb, var(--min-color-primary) 85%, black));
    --min-color-accent-hover: var(--mandant-accent-hover, color-mix(in srgb, var(--min-color-accent) 85%, black));
    --min-text-primary: var(--min-color-text);
    --min-text-secondary: var(--min-color-secondary);
    --min-text-muted: var(--min-color-muted);
    --min-text-on-dark: #ffffff;
    --min-bg-primary: var(--min-color-bg);
    --min-bg-secondary: var(--min-color-surface);
    --min-bg-dark: var(--mandant-bg-dark, #1a1a1a);
    --min-bg-darker: var(--mandant-bg-darker, #111);
    --min-border: var(--min-color-border);
    --min-border-strong: var(--mandant-border-strong, color-mix(in srgb, var(--min-color-border) 60%, var(--min-color-text)));

    /* === Font Weight Aliases === */
    --min-weight-normal: var(--min-font-weight-normal);
    --min-weight-medium: var(--min-font-weight-medium);
    --min-weight-semibold: 600;
    --min-weight-bold: var(--min-font-weight-bold);

    /* === Line Height Aliases === */
    --min-line-tight: 1.25;
    --min-line-normal: 1.5;

    /* === Font Size Aliases === */
    --min-font-base: var(--min-font-size-base);
    --min-font-sm: 0.875rem;
    --min-font-lg: 1.125rem;
    --min-font-xl: 1.25rem;

    /* === Hero === */
    --min-hero-height: var(--mandant-hero-height, 80vh);
    --min-hero-align: var(--mandant-hero-align, center);
    --min-hero-overlay-from: var(--mandant-hero-overlay-from, 0.6);
    --min-hero-overlay-mid: var(--mandant-hero-overlay-mid, 0.2);
    --min-hero-title-size: var(--mandant-hero-title-size, clamp(2rem, 5vw, 4rem));

    /* === Cards === */
    --min-card-overlay-opacity: var(--mandant-card-overlay-opacity, 0.6);

    /* === Navigation === */
    --min-nav-height: var(--mandant-nav-height, 4rem);
    --min-logo-height: var(--mandant-logo-height, calc(var(--min-nav-height) - 1rem));

    /* === Focus === */
    --min-focus: var(--mandant-focus, var(--min-color-accent));

    /* === Accessibility Toolbar === */
    --min-a11y-tb-bg: var(--mandant-a11y-tb-bg, var(--min-color-surface));
    --min-a11y-tb-border: var(--mandant-a11y-tb-border, var(--min-color-border));
    --min-a11y-tb-shadow: var(--mandant-a11y-tb-shadow, var(--min-shadow-md));

    /* === Z-Index Scale === */
    --min-z-dropdown: 100;
    --min-z-sticky: 200;
    --min-z-overlay: 300;
    --min-z-modal: 400;
    --min-z-toast: 500;
  }

  /* === Dark Mode === */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --min-color-bg: var(--mandant-bg-dark, #1a1a1a);
      --min-color-text: var(--mandant-text-dark, #e5e5e5);
      --min-color-surface: var(--mandant-surface-dark, #2a2a2a);
      --min-color-border: var(--mandant-border-dark, #404040);
      --min-color-muted: var(--mandant-muted-dark, #999);
      --min-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
      --min-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
      --min-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    }
  }

  [data-theme="dark"] {
    --min-color-bg: var(--mandant-bg-dark, #1a1a1a);
    --min-color-text: var(--mandant-text-dark, #e5e5e5);
    --min-color-surface: var(--mandant-surface-dark, #2a2a2a);
    --min-color-border: var(--mandant-border-dark, #404040);
    --min-color-muted: var(--mandant-muted-dark, #999);
  }
}

/* --- ../../../../content-elements/css/_typography.css --- */
/* content-elements/css/_typography.css
 * Typografie-System
 * Fluid Type Scale mit clamp()
 */
@layer base {
  body {
    font-family: var(--min-font-body);
    font-size: var(--min-body-size, var(--min-font-size-base));
    line-height: var(--min-line-height);
    color: var(--min-color-text);
    background-color: var(--min-color-bg);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    line-height: var(--min-line-height-heading);
    /* color: inherit - Headings erben Farbe vom Kontext (Body=dunkel, Hero/Overlay=weiss) */
    text-wrap: balance;
  }

  h1 { font-size: var(--min-h1-size); }
  h2 { font-size: var(--min-h2-size); }
  h3 { font-size: var(--min-h3-size); }
  h4 { font-size: var(--min-h4-size); }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }

  p {
    max-width: 70ch;
    margin-block-end: var(--min-space-md);
  }

  a {
    color: var(--min-color-accent);
    transition: color var(--min-transition);
  }

  a:hover {
    color: var(--min-color-primary);
  }

  strong, b { font-weight: var(--min-font-weight-bold); }

  small { font-size: 0.875em; }

  blockquote {
    border-inline-start: 4px solid var(--min-color-primary);
    padding: var(--min-space-md) var(--min-space-lg);
    font-style: italic;
    color: var(--min-color-muted);
  }

  code {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.9em;
    background: var(--min-color-surface);
    padding: 0.15em 0.4em;
    border-radius: var(--min-radius-sm);
  }

  pre code {
    display: block;
    padding: var(--min-space-md);
    overflow-x: auto;
  }

  hr {
    border: none;
    border-block-start: 1px solid var(--min-color-border);
    margin-block: var(--min-space-xl);
  }

  /* === Lead / Intro Text === */
  .lead,
  .ce-lead {
    font-size: clamp(1.05rem, 1vw + 0.5rem, 1.2rem);
    line-height: 1.75;
    color: var(--min-text-secondary, #4a4a4a);
    max-width: 65ch;
    margin-block-end: var(--min-space-lg, 2rem);
  }

  .text-center .lead,
  .text-center .ce-lead {
    margin-inline: auto;
  }

  /* === Section Title === */
  /* Compat: .section-title, .section__title = legacy prototypes */
  .ce-section-title,
  .section-title,
  .section__title {
    text-align: center;
    margin-block-end: var(--min-space-lg, 2rem);
  }

  /* === Feature List (styled list with spacing) === */
  .feature-list,
  .ce-feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--min-space-sm, 0.75rem);
  }

  .feature-list li::before,
  .ce-feature-list li::before {
    content: '\2713';
    margin-inline-end: 0.5em;
    color: var(--min-color-accent, #2a7f3b);
    font-weight: var(--min-font-weight-bold, 700);
  }

  /* === Info Box === */
  .ce-info-box {
    background: var(--min-color-surface, #f5f5f5);
    border-radius: var(--min-radius-md, 0.5rem);
    padding: var(--min-space-xl, 2rem);
    max-width: 800px;
    margin-inline: auto;
  }

  .ce-info-box h2 {
    margin-block-end: var(--min-space-sm, 0.5rem);
  }

  /* === Badge === */
  .ce-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--min-color-primary, #333);
    background-color: color-mix(in srgb, var(--min-color-primary, #333) 10%, transparent);
    border-radius: var(--min-radius-lg, 0.75rem);
    margin-block-end: 0.5rem;
  }

  /* === Section Text (companion to ce-section-title) === */
  .ce-section-text {
    font-family: var(--min-font-body, inherit);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    color: var(--min-color-muted, #666);
    max-width: 48rem;
    margin-inline: auto;
  }

  /* === Table (Basis-Styles) === */
  .table,
  .ce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }

  .table th,
  .ce-table th {
    text-align: start;
    font-weight: var(--min-font-weight-bold, 700);
    padding: 0.5rem 0.75rem;
    border-block-end: 2px solid var(--min-color-border, #ddd);
  }

  .table td,
  .ce-table td {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--min-color-border, #eee);
  }

  .table tr:hover,
  .ce-table tr:hover {
    background-color: var(--min-color-surface, #f8f8f8);
  }
}

/* --- ../../../../content-elements/css/_layout.css --- */
/* content-elements/css/_layout.css
 * Container, Grid, Section-Spacing
 *
 * Compat: Legacy Prototypen verwenden .grid, .section, .two-col etc.
 */
@layer layout {
  /* === Container === */
  .container,
  .ce-container {
    width: 100%;
    max-width: var(--min-container-max);
    margin-inline: auto;
    padding-inline: var(--min-container-padding);
  }

  .container--narrow { max-width: 800px; }
  .container--wide { max-width: 1440px; }
  .container--full { max-width: none; padding-inline: 0; }

  /* === Section === */
  .ce-section,
  .section,
  section[data-ce-type] {
    padding-block: var(--min-space-section);
  }

  .ce-section--compact,
  .section--compact { padding-block: var(--min-space-lg); }
  .ce-section--spacious,
  .section--spacious { padding-block: var(--min-space-2xl); }

  /* === Grid === */
  .ce-grid,
  .grid {
    display: grid;
    gap: var(--ce-grid-gap, var(--min-space-lg));
  }

  .ce-grid--2,
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ce-grid--3,
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ce-grid--4,
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 1024px) {
    .ce-grid--4,
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .ce-grid--2,
    .ce-grid--3,
    .ce-grid--4,
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }

  /* === Flex Layouts === */
  .ce-flex {
    display: flex;
    gap: var(--ce-flex-gap, var(--min-space-md));
  }

  .ce-flex--center { align-items: center; justify-content: center; }
  .ce-flex--between { justify-content: space-between; }
  .ce-flex--wrap { flex-wrap: wrap; }
  .ce-flex--col { flex-direction: column; }

  /* === Two-Column (TextMedia etc.) === */
  .ce-two-col,
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--min-space-xl);
    align-items: center;
  }

  .ce-two-col--reverse,
  .two-col--reverse { direction: rtl; }
  .ce-two-col--reverse > *,
  .two-col--reverse > * { direction: ltr; }

  @media (max-width: 768px) {
    .ce-two-col,
    .two-col {
      grid-template-columns: 1fr;
    }
    .ce-two-col--reverse,
    .two-col--reverse { direction: ltr; }
  }

  /* === Content Section (generic wrapper for text/content blocks) === */
  .content-section,
  .ce-content-section {
    padding-block: var(--min-space-section, clamp(2rem, 5vw, 4rem));
  }

  .content-section--alt,
  .ce-content-section--alt {
    background-color: var(--min-color-surface, #f5f5f5);
  }

  .content-section__container,
  .ce-content-section__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  /* === Text Alignment Helpers === */
  .text-center { text-align: center; }
  .text-start  { text-align: start; }
  .text-end    { text-align: end; }

  /* -- Figure / Content Image ----------------------------------------------- */
  /* Compat: .content-image = legacy figure with rounded image */

  .ce-figure,
  .content-image {
    margin: 0;
  }

  .content-image {
    margin-block: var(--min-space-lg, 2rem);
  }

  .content-image img {
    width: 100%;
    border-radius: var(--min-radius-md, 0.5rem);
  }

  .content-image figcaption {
    margin-block-start: var(--min-space-sm, 0.5rem);
    font-size: 0.875rem;
    color: var(--min-text-muted, #666);
    text-align: center;
  }

  .ce-figure--wide {
    width: 100%;
    margin-block: var(--min-space-section, 4rem);
  }

  .ce-figure--wide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* === Content Grid with Sidebar =========================================== */
  /* Pattern: .content-grid.content-grid--sidebar > .content-main + .content-sidebar
   * Used on detail pages (ueber-uns, eier, fleisch etc.) with article + aside
   */

  .content-grid {
    display: grid;
    gap: var(--min-space-xl, 3rem);
  }

  .content-grid--sidebar {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }

  .content-main {
    min-width: 0;
  }

  .content-main p {
    font-size: clamp(1rem, 0.5vw + 0.875rem, 1.0625rem);
    line-height: var(--min-line-height, 1.7);
    color: var(--min-color-text, #1a1a1a);
  }

  .content-main h2 {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.35rem, 2vw + 0.5rem, 1.85rem);
    margin-block: var(--min-space-xl, 2.5rem) var(--min-space-sm, 0.5rem);
  }

  .content-main h2:first-child {
    margin-block-start: 0;
  }

  .content-main h3 {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.4rem);
    margin-block: var(--min-space-lg, 1.5rem) var(--min-space-xs, 0.25rem);
  }

  .content-main ul,
  .content-main ol {
    padding-inline-start: 1.5rem;
    margin-block-end: var(--min-space-md, 1rem);
  }

  .content-main li {
    margin-block-end: 0.25rem;
    line-height: var(--min-line-height, 1.6);
  }

  .content-main figure,
  .content-main .ce-gallery__item {
    margin-block: var(--min-space-lg, 2rem);
  }

  .content-main figure img,
  .content-main .ce-gallery__item img {
    width: 100%;
    height: auto;
    border-radius: var(--min-radius-md, 4px);
    display: block;
  }

  .content-main figcaption,
  .content-main .ce-gallery__caption {
    font-size: 0.875rem;
    color: var(--min-color-muted, #666);
    margin-block-start: var(--min-space-xs, 0.5rem);
    line-height: 1.5;
  }

  .content-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--min-space-md, 1rem);
    position: sticky;
    top: calc(var(--min-nav-height, 5rem) + var(--min-space-md, 1rem));
  }

  @media (max-width: 1024px) {
    .content-grid--sidebar {
      grid-template-columns: 1fr 280px;
    }
  }

  @media (max-width: 768px) {
    .content-grid--sidebar {
      grid-template-columns: 1fr;
    }

    .content-sidebar {
      position: static;
    }
  }

  /* -- Styleguide / Generic Section Container ------------------------------- */

  .styleguide-section {
    padding: var(--min-space-section, 4rem) 0;
  }

  .styleguide-section__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .styleguide-section__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-text-primary, #1e1e1e);
    margin-block-end: var(--min-spacing-lg, 2rem);
  }

  .styleguide-preview {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }
}


/* === Components (auto-discovered) === */
/* --- ../../../../content-elements/css/components/accordion.css --- */
@layer components {
  /* ==========================================================================
   * CE Accordion - Aufklappbare Inhaltsabschnitte
   * Base class: :is(.ce-accordion, .min-accordion)
   * Modifiers: --bordered, --compact, --cards
   * Dependencies: _tokens, _typography
   *
   * Compat: Legacy Prototypen verwenden .accordion, .faq
   * ========================================================================== */

  :is(.ce-accordion, .min-accordion),
  .accordion,
  .faq {
    --ce-accordion-gap: 0.5rem;
    --ce-accordion-border-color: var(--min-border, #dadce0);
    --ce-accordion-radius: var(--min-radius-md, 0.5rem);
    --ce-accordion-padding: var(--min-spacing-md, 1rem);
    --ce-accordion-icon-size: 1.25rem;
    --ce-accordion-transition: 0.3s ease;

    display: flex;
    flex-direction: column;
    gap: var(--ce-accordion-gap);
  }

  /* .faq uses section-level padding + inner container */
  .faq__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .ce-accordion__heading,
  .accordion__heading,
  .faq__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    margin-block-end: var(--min-spacing-md, 1rem);
    color: var(--min-text-primary, #1e1e1e);
  }

  /* -- Item ----------------------------------------------------------------- */

  .ce-accordion__item,
  .accordion__item,
  .faq__item {
    border: 1px solid var(--ce-accordion-border-color);
    border-radius: var(--ce-accordion-radius);
    overflow: hidden;
  }

  .ce-accordion__item summary,
  .accordion__item summary,
  .faq__item summary,
  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--min-spacing-sm, 0.5rem);
    padding: var(--ce-accordion-padding);
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-lg, 1.125rem);
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-text-primary, #1e1e1e);
    background-color: var(--min-bg-primary, #ffffff);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color var(--ce-accordion-transition);
  }

  .ce-accordion__item summary::-webkit-details-marker,
  .accordion__item summary::-webkit-details-marker,
  .faq__item summary::-webkit-details-marker,
  .faq__question::-webkit-details-marker {
    display: none;
  }

  .ce-accordion__item summary::marker,
  .accordion__item summary::marker,
  .faq__item summary::marker,
  .faq__question::marker {
    content: "";
  }

  .ce-accordion__item summary:hover,
  .accordion__item summary:hover,
  .faq__item summary:hover,
  .faq__question:hover {
    background-color: var(--min-bg-secondary, #f8f9fa);
  }

  .ce-accordion__item summary:focus-visible,
  .accordion__item summary:focus-visible,
  .faq__item summary:focus-visible,
  .faq__question:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: -3px;
  }

  /* -- Icon ----------------------------------------------------------------- */

  .ce-accordion__icon,
  .accordion__icon {
    flex-shrink: 0;
    width: var(--ce-accordion-icon-size);
    height: var(--ce-accordion-icon-size);
    transition: transform var(--ce-accordion-transition);
  }

  .ce-accordion__icon--chevron,
  .accordion__icon--chevron {
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    width: 0.625rem;
    height: 0.625rem;
    transform: rotate(45deg);
  }

  .ce-accordion__item[open] .ce-accordion__icon--chevron,
  .accordion__item[open] .accordion__icon--chevron {
    transform: rotate(-135deg);
  }

  .ce-accordion__icon--plus::before,
  .ce-accordion__icon--plus::after,
  .accordion__icon--plus::before,
  .accordion__icon--plus::after {
    content: "";
    position: absolute;
    background-color: currentColor;
  }

  .ce-accordion__icon--plus,
  .accordion__icon--plus {
    position: relative;
  }

  .ce-accordion__icon--plus::before,
  .accordion__icon--plus::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .ce-accordion__icon--plus::after,
  .accordion__icon--plus::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    transition: transform var(--ce-accordion-transition);
  }

  .ce-accordion__item[open] .ce-accordion__icon--plus::after,
  .accordion__item[open] .accordion__icon--plus::after {
    transform: translateX(-50%) scaleY(0);
  }

  /* -- Content -------------------------------------------------------------- */

  .ce-accordion__content,
  .accordion__content,
  .faq__answer {
    padding: 0 var(--ce-accordion-padding) var(--ce-accordion-padding);
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    line-height: var(--min-line-normal, 1.5);
    color: var(--min-text-secondary, #4a4a4a);
  }

  .ce-accordion__content > *:last-child,
  .accordion__content > *:last-child,
  .faq__answer > *:last-child {
    margin-block-end: 0;
  }

  /* -- Style Modifiers ------------------------------------------------------ */

  .ce-accordion--bordered .ce-accordion__item,
  .accordion--bordered .accordion__item {
    border: 2px solid var(--ce-accordion-border-color);
  }

  .ce-accordion--compact,
  .accordion--compact {
    --ce-accordion-gap: 0;
    --ce-accordion-padding: 0.75rem 1rem;
  }

  .ce-accordion--compact .ce-accordion__item,
  .accordion--compact .accordion__item {
    border-radius: 0;
  }

  .ce-accordion--compact .ce-accordion__item + .ce-accordion__item,
  .accordion--compact .accordion__item + .accordion__item {
    border-top: none;
  }

  .ce-accordion--compact .ce-accordion__item:first-of-type,
  .accordion--compact .accordion__item:first-of-type {
    border-radius: var(--ce-accordion-radius) var(--ce-accordion-radius) 0 0;
  }

  .ce-accordion--compact .ce-accordion__item:last-of-type,
  .accordion--compact .accordion__item:last-of-type {
    border-radius: 0 0 var(--ce-accordion-radius) var(--ce-accordion-radius);
  }

  .ce-accordion--cards .ce-accordion__item,
  .accordion--cards .accordion__item {
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
    border-radius: var(--ce-accordion-radius);
  }

  .ce-accordion--cards,
  .accordion--cards {
    --ce-accordion-gap: 0.75rem;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    :is(.ce-accordion, .min-accordion),
    .accordion,
    .faq {
      --ce-accordion-padding: 0.75rem;
    }

    .ce-accordion__item summary,
    .accordion__item summary,
    .faq__item summary,
    .faq__question {
      font-size: var(--min-font-base, 1rem);
    }
  }

  @media (min-width: 768px) {
    :is(.ce-accordion, .min-accordion),
    .accordion,
    .faq {
      --ce-accordion-padding: 1.25rem;
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-accordion__icon,
    .ce-accordion__icon--plus::after,
    .ce-accordion__item summary,
    .accordion__icon,
    .accordion__icon--plus::after,
    .accordion__item summary,
    .faq__item summary,
    .faq__question {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/animated-section.css --- */
/* content-elements/css/components/animated-section.css
 * GSAP-animierte Inhaltssektion mit ScrollTrigger
 * Minimal CSS - GSAP handles animation via JS
 */
@layer components {

  /* === Custom Properties === */
  .ce-animated-section {
    --ce-animated-section-duration: 1s;
    --ce-animated-section-delay: 0s;
    --ce-animated-section-ease: power2.out;
    --ce-animated-section-stagger: 0;
  }

  /* === Base Block === */
  .ce-animated-section {
    position: relative;
    padding-block: var(--min-space-section);
    overflow: hidden;
  }

  /* === Inner Container === */
  .ce-animated-section__inner {
    max-width: var(--min-container-max);
    margin-inline: auto;
    padding-inline: var(--min-container-padding);
  }

  /* === Header === */
  .ce-animated-section__header {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: var(--min-line-height-heading);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-sm);
  }

  /* === Subheader === */
  .ce-animated-section__subheader {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-medium);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: var(--min-line-height);
    color: var(--min-color-muted);
    margin-block-end: var(--min-space-md);
  }

  /* === Body Text === */
  .ce-animated-section__body {
    font-family: var(--min-font-body);
    font-size: var(--min-font-size-base);
    line-height: var(--min-line-height);
    color: var(--min-color-text);
  }

  /* === Children (stagger targets) === */
  .ce-animated-section__child {
    /* GSAP will set initial state via JS */
  }

  /* === Reduced Motion === */
  @media (prefers-reduced-motion: reduce) {
    .ce-animated-section,
    .ce-animated-section__child {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* === Responsive === */
  @media (max-width: 768px) {
    .ce-animated-section {
      padding-block: var(--min-space-lg);
    }
  }
}

/* --- ../../../../content-elements/css/components/article.css --- */
@layer components {
  /* ==========================================================================
   * CE Article - Artikel-Content-Layout
   * Base class: .ce-article
   * Modifiers: keine
   * Dependencies: tokens, typography
   *
   * Compat: Unterstützt alte Klassennamen (.article) für bestehende Prototypen
   * ========================================================================== */

  .ce-article,
  .article {
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
  }

  .ce-article__container,
  .article__container {
    max-width: 900px;
    margin: 0 auto;
  }

  /* -- Lead ----------------------------------------------------------------- */

  .ce-article__lead,
  .article__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--min-spacing-lg, 2rem);
    padding-bottom: var(--min-spacing-lg, 2rem);
    border-bottom: 1px solid var(--min-color-border, #e0e0e0);
  }

  /* -- Header --------------------------------------------------------------- */

  .ce-article__header,
  .article__header {
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .ce-article__label,
  .article__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--min-color-accent, #cd1719);
    margin-bottom: var(--min-spacing-xs, 0.5rem);
    display: block;
  }

  .ce-article__title,
  .article__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.3;
  }

  /* -- Content -------------------------------------------------------------- */

  .ce-article__content,
  .article__content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--min-color-muted, #555);
  }

  .ce-article__content h2,
  .article__content h2 {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.75rem;
    font-weight: 400;
    margin: var(--min-spacing-lg, 2rem) 0 var(--min-spacing-sm, 1rem);
    color: var(--min-color-primary, #333);
  }

  .ce-article__content h2:first-child,
  .article__content h2:first-child {
    margin-top: 0;
  }

  .ce-article__content h3,
  .article__content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: var(--min-spacing-md, 1rem) 0 var(--min-spacing-xs, 0.5rem);
    color: var(--min-color-primary, #777);
  }

  .ce-article__content p,
  .article__content p {
    margin-bottom: var(--min-spacing-md, 1rem);
  }

  .ce-article__content ul,
  .ce-article__content ol,
  .article__content ul,
  .article__content ol {
    margin: 0 0 var(--min-spacing-md, 1rem) 1.5rem;
  }

  .ce-article__content li,
  .article__content li {
    margin-bottom: 0.5rem;
  }

  .ce-article__content blockquote,
  .article__content blockquote,
  .article__quote {
    border-left: 3px solid var(--min-color-accent, #cd1719);
    padding: var(--min-spacing-md, 1rem);
    margin: var(--min-spacing-lg, 2rem) 0;
    background: var(--min-color-surface, #f8f9fa);
  }

  .article__quote p {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.25rem;
    font-style: italic;
    margin: 0;
  }

  .ce-article__content a,
  .article__content a {
    color: var(--min-color-accent, #cd1719);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--min-transition-fast, 100ms ease);
  }

  .ce-article__content a:hover,
  .article__content a:hover {
    border-bottom-color: var(--min-color-accent, #cd1719);
  }

  /* -- Figure --------------------------------------------------------------- */

  .ce-article__figure,
  .article__figure {
    margin: var(--min-spacing-lg, 2rem) 0;
  }

  .ce-article__figure--wide,
  .article__figure--wide {
    margin-left: calc(-1 * var(--min-container-padding, 1.5rem));
    margin-right: calc(-1 * var(--min-container-padding, 1.5rem));
  }

  .ce-article__figure img,
  .article__figure img {
    width: 100%;
    height: auto;
  }

  .ce-article__figure figcaption,
  .article__figure figcaption {
    padding: var(--min-spacing-sm, 1rem) var(--min-container-padding, 1.5rem);
    font-size: 0.85rem;
    color: var(--min-color-muted, #555);
  }

  /* -- CTA Button ----------------------------------------------------------- */

  .ce-article__cta,
  .article__cta {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--min-color-accent, #CD1719);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-top: var(--min-spacing-sm, 0.5rem);
    border-radius: var(--min-radius-sm, 2px);
    transition: background-color var(--min-transition-fast, 100ms ease);
  }

  .ce-article__cta:hover,
  .article__cta:hover {
    background: #a51214;
    color: #fff;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-article,
    .article {
      padding: var(--min-spacing-lg, 2rem) var(--min-container-padding, 1rem);
    }

    .ce-article__content,
    .article__content {
      font-size: 1rem;
    }
  }

  @media (min-width: 768px) {
    .ce-article__header,
    .article__header {
      margin-bottom: var(--min-spacing-xl, 4rem);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-article__content a,
    .article__content a {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/back-to-top.css --- */
/* components/back-to-top.css
 * Scroll-to-Top Button Component
 * BEM: .ce-back-to-top
 */
@layer components {
  .ce-back-to-top,
  .back-to-top {
    --ce-btt-size: 3rem;
    --ce-btt-bg: var(--min-color-primary, #333);
    --ce-btt-color: var(--min-color-bg, #fff);
    --ce-btt-offset: var(--min-space-lg, 2rem);
    position: fixed;
    inset-block-end: var(--ce-btt-offset);
    inset-inline-end: var(--ce-btt-offset);
    z-index: var(--min-z-sticky, 99);
    width: var(--ce-btt-size);
    height: var(--ce-btt-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ce-btt-bg);
    color: var(--ce-btt-color);
    border: none;
    border-radius: var(--min-radius-full, 50%);
    cursor: pointer;
    box-shadow: var(--min-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition:
      opacity var(--min-transition, 0.3s ease),
      visibility var(--min-transition, 0.3s ease),
      transform var(--min-transition, 0.3s ease),
      background-color var(--min-transition, 0.3s ease);
  }

  .ce-back-to-top[data-visible="true"],
  .ce-back-to-top--visible,
  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .ce-back-to-top:hover,
  .back-to-top:hover {
    background-color: var(--min-color-accent, #555);
    box-shadow: var(--min-shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
    transform: translateY(-3px);
  }

  .ce-back-to-top:focus-visible,
  .back-to-top:focus-visible {
    outline: 2px solid var(--min-color-accent, #333);
    outline-offset: 2px;
  }
}

/* --- ../../../../content-elements/css/components/breadcrumb.css --- */
@layer components {
  /* ==========================================================================
   * CE Breadcrumb - Navigation Trail
   * Base class: .ce-breadcrumb (or .breadcrumb for compat)
   * Dependencies: _tokens
   * ========================================================================== */

  .ce-breadcrumb,
  .breadcrumb {
    padding-block: var(--min-spacing-sm, 0.75rem);
    font-size: 0.875rem;
  }

  .ce-breadcrumb__container,
  .breadcrumb__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .ce-breadcrumb__list,
  .breadcrumb__list {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }

  .ce-breadcrumb__item,
  .breadcrumb__item {
    color: var(--min-text-secondary, #666);
  }

  .ce-breadcrumb__item + .ce-breadcrumb__item::before,
  .breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-inline-end: 0.5rem;
    color: var(--min-color-border, #ccc);
  }

  .ce-breadcrumb__item a,
  .breadcrumb__item a {
    color: var(--min-color-primary, #333);
    text-decoration: none;
  }

  .ce-breadcrumb__item a:hover,
  .breadcrumb__item a:hover {
    text-decoration: underline;
  }

  .ce-breadcrumb__item[aria-current],
  .breadcrumb__item[aria-current] {
    color: var(--min-color-text, #1e1e1e);
    font-weight: 500;
  }
}

/* --- ../../../../content-elements/css/components/buttons.css --- */
@layer components {
  /* ==========================================================================
   * CE Buttons - Universelle Button-Komponente
   * Base class: .ce-btn
   * Modifiers: --primary, --secondary, --accent, --sm, --lg, --block
   * Dependencies: _tokens
   *
   * Compat: Unterstützt alte Klassennamen (.btn) für bestehende Prototypen
   * ========================================================================== */

  .ce-btn,
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-family: var(--min-font-body, inherit);
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--min-radius-md, 0.5rem);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--min-transition, 0.3s ease),
                color var(--min-transition, 0.3s ease),
                transform var(--min-transition, 0.3s ease),
                border-color var(--min-transition, 0.3s ease);
    line-height: 1.4;
  }

  .ce-btn:hover,
  .btn:hover {
    transform: translateY(-2px);
  }

  .ce-btn:focus-visible,
  .btn:focus-visible {
    outline: 3px solid var(--min-color-primary, #333);
    outline-offset: 2px;
  }

  /* -- Primary (filled) */
  .ce-btn--primary,
  .btn--primary {
    background-color: var(--min-color-primary, #2a7f3b);
    color: var(--min-color-bg, #fff);
    border-color: var(--min-color-primary, #2a7f3b);
  }

  .ce-btn--primary:hover,
  .btn--primary:hover {
    background-color: color-mix(in srgb, var(--min-color-primary, #2a7f3b) 85%, black);
  }

  /* -- Secondary (outlined) */
  .ce-btn--secondary,
  .btn--secondary {
    background-color: transparent;
    color: var(--min-color-primary, #2a7f3b);
    border-color: var(--min-color-primary, #2a7f3b);
  }

  .ce-btn--secondary:hover,
  .btn--secondary:hover {
    background-color: var(--min-color-primary, #2a7f3b);
    color: var(--min-color-bg, #fff);
  }

  /* -- Accent */
  .ce-btn--accent,
  .btn--accent {
    background-color: var(--min-color-accent, #d4c94a);
    color: var(--min-color-text, #1e1e1e);
    border-color: var(--min-color-accent, #d4c94a);
  }

  .ce-btn--accent:hover,
  .btn--accent:hover {
    background-color: color-mix(in srgb, var(--min-color-accent, #d4c94a) 85%, black);
  }

  /* -- Size Modifiers */
  .ce-btn--sm,
  .btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
  }

  .ce-btn--lg,
  .btn--lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
  }

  .ce-btn--block,
  .btn--block {
    width: 100%;
    justify-content: center;
  }

  /* -- Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .ce-btn,
    .btn {
      transition: none;
    }

    .ce-btn:hover,
    .btn:hover {
      transform: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/cards.css --- */
@layer components {
  /* ==========================================================================
   * CE Cards - Karten-Layout
   * Base class: :is(.ce-cards, .min-cards)
   * Modifiers: --shadow, --bordered, --gradient, --minimal
   * Dependencies: _tokens, _typography
   *
   * Compat: Unterstützt alte Klassennamen (.card, .cards, .features-grid) für bestehende Prototypen
   * ========================================================================== */

  :is(.ce-cards, .min-cards),
  .cards,
  .features-grid {
    --ce-cards-columns: 3;
    --ce-cards-gap: var(--min-spacing-lg, 2rem);
    --ce-cards-radius: var(--min-radius-sm, 2px);
    --ce-cards-padding: var(--min-spacing-lg, 1.5rem);
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  /* features-grid__container: inner wrapper, max-width already on .features-grid/:is(.ce-cards, .min-cards) */
  .features-grid__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .ce-cards__header,
  .cards__header {
    text-align: center;
    margin-block-end: var(--min-spacing-xl, 3rem);
  }

  .ce-cards__title,
  .cards__title,
  .features-grid__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    /* color: inherit - erbt vom Kontext */
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-cards__subtitle,
  .cards__subtitle {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-lg, 1.125rem);
    /* color: inherit - erbt vom Kontext */
    line-height: var(--min-line-normal, 1.5);
  }

  /* -- Grid ----------------------------------------------------------------- */

  .ce-cards__grid,
  .cards__grid,
  .features-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--ce-cards-columns), 1fr);
    gap: var(--ce-cards-gap);
  }

  /* -- Card ----------------------------------------------------------------- */

  .ce-cards__card,
  .card,
  .feature-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--ce-cards-radius);
    background-color: var(--min-bg-primary, #ffffff);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .ce-cards__card:hover,
  .card:hover,
  .feature-card:hover {
    transform: translateY(-4px);
  }

  .ce-cards__card-image,
  .card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
  }

  .ce-cards__card-image img,
  .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .ce-cards__card:hover .ce-cards__card-image img,
  .card:hover .card__image img {
    transform: scale(1.05);
  }

  .ce-cards__card-body,
  .card__body,
  .feature-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--ce-cards-padding);
  }

  .ce-cards__card-icon,
  .card__icon,
  .feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    margin-block-end: var(--min-spacing-md, 1rem);
    font-size: 1.5rem;
    color: var(--min-color-primary);
  }

  /* SVG-Kind innerhalb Icon-Container fixieren */
  .ce-cards__card-icon svg,
  .card__icon svg,
  .feature-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .ce-cards__card-icon--circle,
  .card__icon--circle {
    border-radius: 50%;
    background-color: var(--min-bg-secondary, #f8f9fa);
  }

  .ce-cards__card-icon--square,
  .card__icon--square {
    border-radius: var(--min-radius-sm, 0.25rem);
    background-color: var(--min-bg-secondary, #f8f9fa);
  }

  .ce-cards__card-icon--rounded,
  .card__icon--rounded {
    border-radius: var(--min-radius-md, 0.5rem);
    background-color: var(--min-bg-secondary, #f8f9fa);
  }

  .ce-cards__card-title,
  .card__title,
  .feature-card__title {
    font-family: var(--min-font-heading, inherit);
    font-size: var(--min-font-xl, 1.25rem);
    font-weight: var(--min-weight-semibold, 600);
    line-height: var(--min-line-tight, 1.25);
    /* color: inherit - erbt dunkel (Body) oder weiss (Overlay-Kontext) */
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-cards__card-text,
  .card__text,
  .feature-card__text {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    line-height: var(--min-line-normal, 1.5);
    /* color: inherit - erbt vom Eltern-Kontext */
    flex: 1;
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  /* Full-card clickable wrapper (link wraps image + body) */
  .ce-cards__card > .ce-cards__card-link,
  .card > .card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  /* CTA link inside card body */
  .ce-cards__card-body .ce-cards__card-link,
  .card__body .card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--min-spacing-xs, 0.25rem);
    font-size: var(--min-font-base, 1rem);
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-color-primary);
    text-decoration: none;
    margin-block-start: auto;
    transition: color 0.2s ease;
  }

  .ce-cards__card-body .ce-cards__card-link:hover,
  .card__body .card__link:hover {
    color: color-mix(in srgb, var(--min-color-primary) 80%, black);
  }

  .ce-cards__card-link:focus-visible,
  .card__link:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* -- Alignment ------------------------------------------------------------ */

  .ce-cards--left .ce-cards__card-body,
  .cards--left .card__body {
    text-align: left;
  }

  .ce-cards--center .ce-cards__card-body,
  .cards--center .card__body {
    text-align: center;
    align-items: center;
  }

  .ce-cards--right .ce-cards__card-body,
  .cards--right .card__body {
    text-align: right;
    align-items: flex-end;
  }

  /* -- Style Modifiers ------------------------------------------------------ */

  .ce-cards--shadow .ce-cards__card,
  .cards--shadow .card {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  .ce-cards--shadow .ce-cards__card:hover,
  .cards--shadow .card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  .ce-cards--bordered .ce-cards__card,
  .cards--bordered .card {
    border: 1px solid var(--min-border, #dadce0);
  }

  .ce-cards--bordered .ce-cards__card:hover,
  .cards--bordered .card:hover {
    border-color: var(--min-border-strong, #80868b);
  }

  .ce-cards--gradient .ce-cards__card,
  .cards--gradient .card {
    background: linear-gradient(
      135deg,
      var(--min-bg-primary, #ffffff) 0%,
      var(--min-bg-secondary, #f8f9fa) 100%
    );
  }

  .ce-cards--minimal .ce-cards__card,
  .cards--minimal .card {
    background: transparent;
    border-radius: 0;
  }

  .ce-cards--minimal .ce-cards__card:hover,
  .cards--minimal .card:hover {
    transform: none;
  }

  .ce-cards--minimal .ce-cards__card-body,
  .cards--minimal .card__body {
    padding-inline: 0;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-cards__grid,
    .cards__grid,
    .features-grid__items {
      --ce-cards-columns: 1;
    }
  }

  @media (min-width: 480px) and (max-width: 767px) {
    .ce-cards__grid,
    .cards__grid,
    .features-grid__items {
      --ce-cards-columns: 2;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .ce-cards__grid,
    .cards__grid,
    .features-grid__items {
      --ce-cards-columns: min(var(--ce-cards-columns), 2);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-cards__card,
    .card,
    .feature-card,
    .ce-cards__card-image img,
    .card__image img,
    .ce-cards__card-link,
    .card__link {
      transition: none;
    }

    .ce-cards__card:hover,
    .card:hover,
    .feature-card:hover {
      transform: none;
    }

    .ce-cards__card:hover .ce-cards__card-image img,
    .card:hover .card__image img {
      transform: none;
    }
  }

  /* ==========================================================================
   * Categories Grid - Image Overlay Cards
   * Compat: .categories = overlay card variant
   * ========================================================================== */

  .ce-cards--overlay,
  .categories {
    padding: var(--min-space-section, 4rem) 0;
  }

  .categories__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .categories__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-text-primary, #1e1e1e);
    margin-block-end: var(--min-spacing-lg, 2rem);
  }

  .categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-md, 1rem);
  }

  .categories__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--min-radius-sm, 2px);
    aspect-ratio: 4 / 3;
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .categories__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .categories__item:hover img {
    transform: scale(1.05);
  }

  .categories__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--min-spacing-md, 1rem);
    /* No gradient — text-shadow handles readability */
    color: var(--min-text-on-dark, #ffffff);
    z-index: 1;
  }

  .categories__number {
    font-family: var(--min-font-heading, inherit);
    font-size: 0.75rem;
    font-weight: var(--min-weight-bold, 700);
    opacity: 0.7;
    margin-block-end: var(--min-spacing-xs, 0.25rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .categories__name {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .categories__item:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  @media (max-width: 767px) {
    .categories__grid {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .categories__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

    .categories__item:hover img {
      transform: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/contact.css --- */
@layer components {
  /* ========================================
     CONTACT
     ======================================== */

  .ce-contact,
  .contact {
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
  }

  .ce-contact__container,
  .contact__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--min-space-section, 4rem);
  }

  .ce-contact__heading,
  .contact__heading {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--min-spacing-xl, 4rem);
    color: var(--min-color-primary, #777);
  }

  .ce-contact__block,
  .contact__block {
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .ce-contact__block h3,
  .contact__block h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    color: var(--min-color-muted, #555);
  }

  .ce-contact__block p,
  .ce-contact__block address,
  .contact__block p,
  .contact__block address {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--min-color-primary, #777);
  }

  .ce-contact__block a,
  .contact__block a {
    color: var(--min-color-accent, #CD1719);
    text-decoration: none;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .ce-contact__block a:hover,
  .contact__block a:hover {
    opacity: 0.7;
  }

  .ce-contact__note,
  .contact__note {
    font-size: 0.8rem;
    /* Fixed: opacity:0.8 on #555 yields effective #777 on white = 4.48:1 FAIL. Removed. */
    color: var(--min-color-muted, #555);
    margin-top: 0.35rem;
  }

  .ce-contact__social,
  .contact__social {
    list-style: none;
  }

  .ce-contact__social li,
  .contact__social li {
    margin-bottom: 0.5rem;
  }

  .ce-contact__social a,
  .contact__social a {
    color: var(--min-color-accent, #CD1719);
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .ce-contact__social a:hover,
  .contact__social a:hover {
    opacity: 0.7;
  }

  address {
    font-style: normal;
    line-height: 1.6;
  }

  @media (max-width: 900px) {
    .ce-contact__container,
    .contact__container {
      grid-template-columns: 1fr;
    }
  }
}

/* --- ../../../../content-elements/css/components/counter-stats.css --- */
/* content-elements/css/components/counter-stats.css
 * Animierte Zahlenzaehler mit GSAP ScrollTrigger
 * Layout/grid structure - GSAP handles counter animation via JS
 */
@layer components {

  /* === Custom Properties === */
  .ce-counter-stats {
    --ce-counter-stats-columns: 4;
    --ce-counter-stats-value-size: clamp(2rem, 5vw, 3.5rem);
    --ce-counter-stats-primary: var(--min-color-accent);
    --ce-counter-stats-text: var(--min-color-text);
    --ce-counter-stats-gap: var(--min-space-lg);
    --ce-counter-stats-label-size: clamp(0.875rem, 1.5vw, 1rem);
  }

  /* === Base Block === */
  .ce-counter-stats {
    position: relative;
    padding-block: var(--min-space-section);
  }

  /* === Inner Container === */
  .ce-counter-stats__inner {
    max-width: var(--min-container-max);
    margin-inline: auto;
    padding-inline: var(--min-container-padding);
  }

  /* === Header Area === */
  .ce-counter-stats__header {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: var(--min-line-height-heading);
    color: var(--ce-counter-stats-text);
    text-align: center;
    margin-block-end: var(--min-space-sm);
  }

  .ce-counter-stats__subheader {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-medium);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--min-color-muted);
    text-align: center;
    margin-block-end: var(--min-space-xl);
  }

  /* === Grid === */
  .ce-counter-stats__grid {
    display: grid;
    grid-template-columns: repeat(var(--ce-counter-stats-columns), 1fr);
    gap: var(--ce-counter-stats-gap);
    text-align: center;
  }

  /* === Column Modifiers === */
  .ce-counter-stats--cols-2 { --ce-counter-stats-columns: 2; }
  .ce-counter-stats--cols-3 { --ce-counter-stats-columns: 3; }
  .ce-counter-stats--cols-4 { --ce-counter-stats-columns: 4; }

  /* === Single Counter Item === */
  .ce-counter-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--min-space-sm);
    position: relative;
  }

  /* === Separator (vertical line between items) === */
  .ce-counter-stats--with-separator .ce-counter-stats__item + .ce-counter-stats__item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1 * var(--ce-counter-stats-gap) / 2);
    inset-block-start: 10%;
    block-size: 80%;
    inline-size: 1px;
    background-color: var(--min-color-border);
  }

  /* === Icon === */
  .ce-counter-stats__icon {
    font-size: 1.5rem;
    color: var(--ce-counter-stats-primary);
    margin-block-end: var(--min-space-xs);
  }

  /* === Value (the animated number) === */
  .ce-counter-stats__value {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: var(--ce-counter-stats-value-size);
    line-height: 1;
    color: var(--ce-counter-stats-primary);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1em;
  }

  .ce-counter-stats__prefix,
  .ce-counter-stats__suffix {
    font-size: 0.6em;
    font-weight: var(--min-font-weight-medium);
    opacity: 0.8;
  }

  /* === Label === */
  .ce-counter-stats__label {
    font-family: var(--min-font-body);
    font-size: var(--ce-counter-stats-label-size);
    font-weight: var(--min-font-weight-medium);
    color: var(--ce-counter-stats-text);
    line-height: var(--min-line-height);
  }

  /* === Reduced Motion === */
  @media (prefers-reduced-motion: reduce) {
    .ce-counter-stats__value {
      transition: none !important;
    }
  }

  /* === Responsive === */
  @media (max-width: 1024px) {
    .ce-counter-stats--cols-4 .ce-counter-stats__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .ce-counter-stats {
      padding-block: var(--min-space-lg);
    }

    .ce-counter-stats__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Hide vertical separator on mobile (wraps awkwardly) */
    .ce-counter-stats--with-separator .ce-counter-stats__item + .ce-counter-stats__item::before {
      display: none;
    }

    .ce-counter-stats__value {
      --ce-counter-stats-value-size: 2rem;
    }
  }

  @media (max-width: 480px) {
    .ce-counter-stats__grid {
      grid-template-columns: 1fr;
    }
  }
}

/* --- ../../../../content-elements/css/components/cta.css --- */
@layer components {
  /* ==========================================================================
   * CE CTA - Call-to-Action Block
   * Base class: :is(.ce-cta, .min-cta)
   * Modifiers: --primary, --dark, --light, --gradient
   * Dependencies: _tokens, _typography
   * ========================================================================== */

  /* Compat: .cta, .cta-box, .cta-section, .mission = :is(.ce-cta, .min-cta) (legacy prototype support) */

  :is(.ce-cta, .min-cta),
  .cta,
  .cta-box,
  .cta-section,
  .mission {
    --ce-cta-padding: var(--min-spacing-2xl, 4rem);
    --ce-cta-radius: var(--min-radius-sm, 2px);
    --ce-cta-max-width: 48rem;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ce-cta-padding);
    border-radius: var(--ce-cta-radius);
    overflow: hidden;
  }

  .ce-cta__container,
  .cta__container,
  .cta-box__container,
  .cta-section__container {
    max-width: 900px;
    margin-inline: auto;
  }

  /* -- Background Image ----------------------------------------------------- */

  .ce-cta__bg,
  .cta__bg,
  .cta-box__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ce-cta__bg img,
  .cta__bg img,
  .cta-box__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ce-cta__bg::after,
  .cta__bg::after,
  .cta-box__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
  }

  /* -- Content -------------------------------------------------------------- */

  .ce-cta__content,
  .cta__content,
  .cta-box__content,
  .cta-section__content {
    position: relative;
    z-index: 1;
    max-width: var(--ce-cta-max-width);
  }

  .ce-cta__title,
  .cta__title,
  .cta-box__title,
  .cta-section__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: var(--min-line-tight, 1.25);
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  .ce-cta__text,
  .cta__text,
  .cta-box__text,
  .cta-section__text {
    font-family: var(--min-font-body, inherit);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: var(--min-line-normal, 1.5);
    margin-block-end: var(--min-spacing-xl, 2rem);
    opacity: 0.9;
  }

  .ce-cta__text > *:last-child,
  .cta__text > *:last-child,
  .cta-box__text > *:last-child,
  .cta-section__text > *:last-child {
    margin-block-end: 0;
  }

  /* -- Buttons -------------------------------------------------------------- */

  .ce-cta__buttons,
  .cta__buttons,
  .cta-box__buttons,
  .cta-section__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--min-spacing-md, 1rem);
    justify-content: center;
  }

  .ce-cta__button,
  .cta__button,
  .cta-box__button {
    display: inline-flex;
    align-items: center;
    gap: var(--min-spacing-xs, 0.25rem);
    padding: 1rem 2.5rem;
    font-family: var(--min-font-body, inherit);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--min-radius-md, 0.5rem);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 2px solid transparent;
    background-color: var(--min-color-primary, #777);
    color: #fff;
  }

  .ce-cta__button:hover,
  .cta__button:hover,
  .cta-box__button:hover {
    transform: translateY(-2px);
    background-color: var(--min-color-accent);
  }

  .ce-cta__button:focus-visible,
  .cta__button:focus-visible,
  .cta-box__button:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  .ce-cta__button--primary,
  .cta__button--primary,
  .cta-box__button--primary {
    background-color: var(--min-color-accent);
    color: #fff;
  }

  .ce-cta__button--primary:hover,
  .cta__button--primary:hover,
  .cta-box__button--primary:hover {
    background-color: color-mix(in srgb, var(--min-color-accent) 80%, black);
  }

  .ce-cta__button--secondary,
  .cta__button--secondary,
  .cta-box__button--secondary {
    background-color: transparent;
    color: inherit;
    border-color: currentColor;
  }

  .ce-cta__button--secondary:hover,
  .cta__button--secondary:hover,
  .cta-box__button--secondary:hover {
    background-color: rgb(255 255 255 / 0.1);
  }

  /* -- Style Modifiers ------------------------------------------------------ */

  .ce-cta--primary,
  .cta--primary,
  .cta-box--primary {
    background-color: var(--min-color-primary);
    color: var(--min-text-on-dark, #ffffff);
  }

  .ce-cta--dark,
  .cta--dark,
  .cta-box--dark {
    background-color: var(--min-bg-dark, #1e1e1e);
    color: var(--min-text-on-dark, #ffffff);
  }

  .ce-cta--light,
  .cta--light,
  .cta-box--light {
    background-color: var(--min-bg-secondary, #f8f9fa);
    color: var(--min-text-primary, #1e1e1e);
  }

  .ce-cta--light .ce-cta__button--primary,
  .cta--light .cta__button--primary,
  .cta-box--light .cta-box__button--primary {
    background-color: var(--min-color-primary);
    color: var(--min-text-on-dark, #ffffff);
  }

  .ce-cta--light .ce-cta__button--primary:hover,
  .cta--light .cta__button--primary:hover,
  .cta-box--light .cta-box__button--primary:hover {
    background-color: color-mix(in srgb, var(--min-color-primary) 80%, black);
  }

  .ce-cta--light .ce-cta__button--secondary,
  .cta--light .cta__button--secondary,
  .cta-box--light .cta-box__button--secondary {
    border-color: var(--min-color-primary);
    color: var(--min-color-primary);
  }

  .ce-cta--gradient,
  .cta--gradient,
  .cta-box--gradient {
    background: linear-gradient(
      135deg,
      var(--min-color-primary) 0%,
      color-mix(in srgb, var(--min-color-primary) 80%, black) 100%
    );
    color: var(--min-text-on-dark, #ffffff);
  }

  /* -- Responsive ----------------------------------------------------------- */

  /* cta-section, .mission: default = primary background (legacy Neyer etc.) */
  .cta-section,
  .mission {
    background-color: var(--min-color-primary);
    color: var(--min-text-on-dark, #ffffff);
  }

  .mission__container {
    max-width: var(--ce-cta-max-width);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .mission__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: var(--min-line-tight, 1.25);
    color: inherit;
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  .mission__text {
    font-family: var(--min-font-body, inherit);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    max-width: 800px;
    margin-inline: auto;
    opacity: 0.95;
  }

  @media (max-width: 479px) {
    :is(.ce-cta, .min-cta),
    .cta,
    .cta-box,
    .cta-section,
    .mission {
      --ce-cta-padding: var(--min-spacing-xl, 2rem) var(--min-spacing-md, 1rem);
    }

    .ce-cta__buttons,
    .cta__buttons,
    .cta-box__buttons,
    .cta-section__buttons {
      flex-direction: column;
      width: 100%;
    }

    .ce-cta__button,
    .cta__button,
    .cta-box__button {
      width: 100%;
      justify-content: center;
    }
  }

  @media (min-width: 768px) {
    :is(.ce-cta, .min-cta),
    .cta,
    .cta-box,
    .cta-section,
    .mission {
      --ce-cta-padding: var(--min-spacing-3xl, 6rem) var(--min-spacing-xl, 3rem);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-cta__button,
    .cta__button,
    .cta-box__button {
      transition: none;
    }

    .ce-cta__button:hover,
    .cta__button:hover,
    .cta-box__button:hover {
      transform: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/filter.css --- */
@layer components {
  /* ========================================
     FILTER
     ======================================== */

  .ce-filter,
  .filter {
    padding: var(--min-spacing-lg, 2rem) var(--min-container-padding, 1.5rem);
    border-bottom: 1px solid var(--min-color-border, #e0e0e0);
  }

  .ce-filter__container,
  .filter__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    display: flex;
    gap: var(--min-spacing-md, 1rem);
    flex-wrap: wrap;
  }

  .ce-filter__container--preview,
  .filter__container--preview {
    max-width: 600px;
  }

  .ce-filter__btn,
  .filter__btn {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid var(--min-color-border, #e0e0e0);
    font-family: var(--min-font-body, inherit);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--min-transition-fast, 100ms ease);
  }

  .ce-filter__btn:hover,
  .ce-filter__btn.is-active,
  .filter__btn:hover,
  .filter__btn.is-active {
    background: var(--min-color-primary, #777);
    border-color: var(--min-color-primary, #777);
    color: var(--min-color-bg, #fff);
  }
}

/* --- ../../../../content-elements/css/components/footer.css --- */
@layer components {
  /* ==========================================================================
   * CE Footer - Footer Navigation (Token-Driven)
   * Base class: .ce-footer
   * Modifiers: --dark, --light, --minimal
   * Dependencies: _tokens, _typography
   *
   * Token-Steuerung via design-tokens.json > footer:
   *   --mandant-footer-bg          Hintergrundfarbe (default: primary)
   *   --mandant-footer-text        Textfarbe (default: #fff)
   *   --mandant-footer-link-hover  Link-Hover-Farbe
   *   --mandant-footer-bottom-bg   Bottom-Bar Hintergrund (default: transparent)
   *   --mandant-footer-bottom-text Bottom-Bar Textfarbe
   *   --mandant-footer-columns     Grid-Columns (default: repeat(4, 1fr))
   *   --mandant-footer-logo-filter Logo-Filter (default: brightness(0) invert(1))
   *
   * COMPAT: Alte Prototyp-Klassen (.site-footer, .footer) werden parallel unterstuetzt
   * ========================================================================== */

  .ce-footer,
  .site-footer,
  .footer {
    --ce-footer-bg: var(--mandant-footer-bg, var(--min-color-primary, #777));
    --ce-footer-text: var(--mandant-footer-text, #fff);
    --ce-footer-padding: var(--min-spacing-2xl, 4rem);
    --ce-footer-muted: color-mix(in srgb, var(--ce-footer-text) 80%, transparent);
    --ce-footer-link-hover: var(--mandant-footer-link-hover, var(--min-color-primary));
    --ce-footer-border: color-mix(in srgb, var(--ce-footer-text) 10%, transparent);

    background-color: var(--ce-footer-bg);
    color: var(--ce-footer-text);
    padding: var(--ce-footer-padding) var(--min-spacing-lg, 2rem);
    border-top: 1px solid var(--ce-footer-border);
  }

  .ce-footer__inner,
  .footer__inner,
  .footer__container {
    max-width: var(--min-container-max, 80rem);
    margin-inline: auto;
  }

  /* -- Columns -------------------------------------------------------------- */

  .ce-footer__columns,
  .footer__columns,
  .footer__grid {
    display: grid;
    grid-template-columns: var(--mandant-footer-columns, repeat(4, 1fr));
    gap: var(--min-spacing-xl, 2rem);
    margin-block-end: var(--min-spacing-xl, 3rem);
  }

  .ce-footer__column-title,
  .footer__column-title,
  .footer__title,
  .footer__heading {
    font-family: var(--min-font-heading, inherit);
    font-size: 1rem;
    font-weight: 500;
    margin-block-end: var(--min-spacing-md, 1rem);
    color: var(--ce-footer-text);
  }

  .ce-footer__links,
  .footer__links,
  .footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ce-footer__links li,
  .footer__links li,
  .footer__list li {
    margin-bottom: 0.6rem;
  }

  .ce-footer__link,
  .footer__link {
    font-family: var(--min-font-body, inherit);
    font-size: 1rem;
    color: var(--ce-footer-muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .ce-footer__link:hover,
  .footer__link:hover {
    color: var(--ce-footer-link-hover);
  }

  .ce-footer__link:focus-visible,
  .footer__link:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* -- Social Links --------------------------------------------------------- */

  .ce-footer__social,
  .footer__social {
    display: flex;
    gap: var(--min-spacing-md, 1rem);
    flex-wrap: wrap;
    padding-block: var(--min-spacing-lg, 2rem);
    border-top: 1px solid var(--ce-footer-border);
    justify-content: center;
  }

  .ce-footer__social-link,
  .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--ce-footer-muted);
    background-color: color-mix(in srgb, var(--ce-footer-text) 5%, transparent);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .ce-footer__social-link:hover,
  .footer__social-link:hover {
    color: var(--ce-footer-text);
    background-color: color-mix(in srgb, var(--ce-footer-text) 15%, transparent);
  }

  .ce-footer__social-link:focus-visible,
  .footer__social-link:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  .ce-footer__social-link svg,
  .footer__social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }

  /* -- Bottom Bar ----------------------------------------------------------- */
  /* When --mandant-footer-bottom-bg is set, the bottom bar gets its own
   * background and bleeds full-width. Otherwise, just a subtle border-top. */

  .ce-footer__bottom,
  .footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--min-spacing-md, 1rem);
    padding-block: var(--min-spacing-md, 1rem);
    margin-block-start: var(--min-spacing-lg, 2rem);
    border-top: 1px solid var(--ce-footer-border);
    font-size: 1rem;
    background: var(--mandant-footer-bottom-bg, transparent);
    color: var(--mandant-footer-bottom-text, var(--ce-footer-muted));
  }

  /* Full-width bleed when bottom-bg is set (via mandant token) */
  .ce-footer:has(.ce-footer__bottom[style]),
  .ce-footer .ce-footer__bottom--bleed,
  .footer .footer__bottom--bleed {
    margin-inline: calc(-50vw + 50%);
    width: 100vw;
    padding-inline: calc((100vw - var(--min-container-max, 80rem)) / 2 + var(--min-container-padding, 1.5rem));
    border-top: none;
  }

  .ce-footer__copyright,
  .footer__copyright {
    font-family: var(--min-font-body, inherit);
    font-size: 1rem;
  }

  .ce-footer__legal,
  .footer__legal {
    display: flex;
    gap: 1.5rem;
  }

  .ce-footer__legal a,
  .footer__legal a {
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .ce-footer__legal a:hover,
  .footer__legal a:hover {
    opacity: 1;
  }

  /* -- Logo & Tagline ------------------------------------------------------- */

  .ce-footer__logo,
  .footer__logo {
    display: block;
    margin-block-end: 1rem;
  }

  .ce-footer__logo img,
  .footer__logo img {
    width: auto;
    height: auto;
    max-height: 60px;
    filter: var(--mandant-footer-logo-filter, brightness(0) invert(1));
  }

  .ce-footer__tagline,
  .footer__tagline {
    font-family: var(--min-font-heading, inherit);
    font-style: italic;
    color: var(--ce-footer-muted);
  }

  .ce-footer__address,
  .footer__address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ce-footer-text);
    opacity: 0.8;
  }

  .ce-footer__address a,
  .footer__address a {
    color: var(--ce-footer-link-hover, var(--ce-footer-text));
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .ce-footer__address a:hover,
  .footer__address a:hover {
    opacity: 0.7;
  }

  .ce-footer__cert,
  .footer__cert {
    font-size: 1rem;
    margin-block-start: 1rem;
    font-weight: 600;
    color: var(--ce-footer-link-hover, var(--ce-footer-muted));
  }

  /* -- Top Section (Logo + Nav) ------------------------------------------- */

  .ce-footer__top,
  .footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--min-spacing-2xl, 4rem);
    padding-block-end: var(--min-spacing-xl, 2rem);
    border-bottom: 1px solid var(--ce-footer-border);
  }

  .ce-footer__nav,
  .footer__nav {
    display: grid;
    grid-template-columns: repeat(var(--ce-footer-columns, 4), 1fr);
    gap: var(--min-spacing-lg, 2rem);
  }

  .ce-footer__min-logo,
  .footer__min-logo {
    margin-block-start: var(--min-spacing-lg, 2rem);
  }

  .ce-footer__min-logo img,
  .footer__min-logo img {
    height: 50px;
    width: auto;
    opacity: 0.8;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .ce-footer__min-logo a:hover img,
  .footer__min-logo a:hover img {
    opacity: 1;
  }

  .ce-footer__agency,
  .footer__agency {
    display: inline-flex;
    align-items: center;
  }

  .ce-footer__agency img,
  .footer__agency img {
    height: 20px;
    width: auto;
    opacity: 0.6;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .ce-footer__agency:hover img,
  .footer__agency:hover img {
    opacity: 1;
  }

  .footer__links a,
  .footer__list a {
    font-size: 1rem;
    color: var(--ce-footer-text, #fff);
    opacity: 0.8;
    text-decoration: none;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .footer__links a:hover,
  .footer__list a:hover {
    opacity: 1;
  }

  .footer__bottom a,
  .footer__bottom nav a {
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .footer__bottom a:hover,
  .footer__bottom nav a:hover {
    opacity: 1;
  }

  /* -- Back to Top ---------------------------------------------------------- */

  .ce-footer__backtotop,
  .footer__backtotop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--ce-footer-border);
    background: none;
    color: var(--ce-footer-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
  }

  .ce-footer__backtotop:hover,
  .footer__backtotop:hover {
    color: var(--ce-footer-text);
    border-color: var(--ce-footer-text);
  }

  .ce-footer__backtotop:focus-visible,
  .footer__backtotop:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  .ce-footer__backtotop::after,
  .footer__backtotop::after {
    content: "";
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(-45deg) translateY(2px);
  }

  /* -- Style Modifiers ------------------------------------------------------ */

  .ce-footer--dark,
  .footer--dark {
    --ce-footer-bg: var(--min-bg-darker, #121212);
  }

  .ce-footer--light,
  .footer--light {
    --ce-footer-bg: var(--min-bg-secondary, #f8f9fa);
    --ce-footer-text: var(--min-text-primary, #1e1e1e);
    --ce-footer-muted: var(--min-text-muted, #6b6b6b);
    --ce-footer-link-hover: var(--min-color-primary);
    --ce-footer-border: var(--min-border, #dadce0);
  }

  .ce-footer--light .ce-footer__social-link,
  .footer--light .footer__social-link {
    background-color: rgb(0 0 0 / 0.05);
  }

  .ce-footer--light .ce-footer__social-link:hover,
  .footer--light .footer__social-link:hover {
    background-color: rgb(0 0 0 / 0.1);
  }

  .ce-footer--minimal,
  .footer--minimal {
    --ce-footer-padding: var(--min-spacing-xl, 2rem);
  }

  .ce-footer--minimal .ce-footer__columns,
  .footer--minimal .footer__columns {
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-footer__columns,
    .footer__columns,
    .footer__grid {
      grid-template-columns: 1fr;
    }

    .ce-footer__bottom,
    .footer__bottom {
      flex-direction: column;
      text-align: center;
    }

    .ce-footer,
    .site-footer,
    .footer {
      --ce-footer-padding: var(--min-spacing-xl, 2rem) var(--min-spacing-md, 1rem);
    }
  }

  @media (min-width: 480px) and (max-width: 767px) {
    .ce-footer__columns,
    .footer__columns,
    .footer__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .ce-footer__columns,
    .footer__columns,
    .footer__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 899px) {
    .ce-footer__top,
    .footer__top {
      grid-template-columns: 1fr;
    }

    .ce-footer__nav,
    .footer__nav {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 599px) {
    .ce-footer__nav,
    .footer__nav {
      grid-template-columns: 1fr;
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-footer__link,
    .ce-footer__social-link,
    .ce-footer__backtotop,
    .footer__link,
    .footer__social-link,
    .footer__backtotop {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/forms.css --- */
@layer components {
  /* ==========================================================================
   * CE Forms - Generische Formular-Styles
   * Base class: .form-group, .ce-form-group
   * Compat: Prototype-Formulare (kontakt, etc.)
   * Dependencies: _tokens
   * ========================================================================== */

  .form-group,
  .ce-form-group,
  .form__group {
    margin-block-end: 1.25rem;
  }

  .form-group label,
  .ce-form-group label {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--min-color-text, #1e1e1e);
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .ce-form-group input,
  .ce-form-group select,
  .ce-form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--min-color-border, #ddd);
    border-radius: var(--min-radius-sm, 0.25rem);
    font-family: var(--min-font-body, inherit);
    font-size: 1rem;
    background: var(--min-color-bg, #fff);
    color: var(--min-color-text, #1e1e1e);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus,
  .ce-form-group input:focus,
  .ce-form-group select:focus,
  .ce-form-group textarea:focus {
    border-color: var(--min-color-primary, #2a7f3b);
    outline: 2px solid color-mix(in srgb, var(--min-color-primary, #2a7f3b) 30%, transparent);
    outline-offset: 1px;
  }

  .form-group textarea,
  .ce-form-group textarea {
    min-height: 8rem;
    resize: vertical;
  }

  /* Checkbox / Radio variant */
  .form-group--checkbox,
  .ce-form-group--checkbox {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .form-group--checkbox input,
  .ce-form-group--checkbox input {
    width: auto;
    margin-block-start: 0.25rem;
  }

  .form-group--checkbox label,
  .ce-form-group--checkbox label {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Compat: BEM-style form selectors */
  .form__label {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--min-color-text, #1e1e1e);
  }

  .form__input,
  .form__select,
  .form__textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--min-color-border, #ddd);
    border-radius: var(--min-radius-sm, 0.25rem);
    font-family: var(--min-font-body, inherit);
    font-size: 1rem;
    background: var(--min-color-bg, #fff);
    color: var(--min-color-text, #1e1e1e);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form__input:focus,
  .form__select:focus,
  .form__textarea:focus {
    border-color: var(--min-color-primary, #333);
    outline: 2px solid color-mix(in srgb, var(--min-color-primary, #333) 30%, transparent);
    outline-offset: 1px;
  }

  .form__textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .form__checkbox {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-block-end: 1.25rem;
  }

  .form__checkbox input {
    width: auto;
    margin-block-start: 0.25rem;
  }

  .form__checkbox label {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .form__submit {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--min-color-primary, #333);
    color: var(--min-color-bg, #fff);
    font-family: var(--min-font-body, inherit);
    font-size: 0.9rem;
    font-weight: var(--min-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--min-radius-sm, 0.25rem);
    cursor: pointer;
    transition: background var(--min-transition-fast, 100ms ease);
  }

  .form__submit:hover {
    background: var(--min-color-accent, #CD1719);
  }
}

/* --- ../../../../content-elements/css/components/gallery.css --- */
@layer components {
  /* ==========================================================================
   * CE Gallery - Bildergalerie
   * Base class: :is(.ce-gallery, .min-gallery)
   * Modifiers: --masonry, --square, --landscape, --portrait
   * Dependencies: _tokens, _typography
   *
   * Compat: Unterstützt alte Klassennamen (.gallery, .gallery-grid) für bestehende Prototypen
   * ========================================================================== */

  :is(.ce-gallery, .min-gallery),
  .gallery,
  .gallery-grid {
    --ce-gallery-columns: 3;
    --ce-gallery-gap: var(--min-spacing-md, 1rem);
    --ce-gallery-radius: var(--min-radius-sm, 2px);
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  /* Kein Doppel-Containment wenn bereits in einem Container */
  .content-section :is(.ce-gallery, .min-gallery),
  .content-section .gallery,
  .content-section .gallery-grid {
    padding: 0;
    max-width: none;
    margin-inline: 0;
  }

  .ce-gallery__title,
  .gallery__title,
  .gallery-grid__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-text-primary, #1e1e1e);
    margin-block-end: var(--min-spacing-lg, 2rem);
  }

  /* -- Grid ----------------------------------------------------------------- */
  /* Flat pattern: .gallery-grid > .gallery-item (kein nested __grid noetig)
   * Nested pattern: :is(.ce-gallery, .min-gallery) > .ce-gallery__grid > .ce-gallery__item */

  .ce-gallery__grid,
  .gallery__grid,
  .gallery-grid__grid,
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--ce-gallery-columns), 1fr);
    gap: var(--ce-gallery-gap);
  }

  /* -- Item ----------------------------------------------------------------- */

  .ce-gallery__item,
  .gallery__item,
  .gallery-grid__item,
  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--ce-gallery-radius);
    cursor: pointer;
    aspect-ratio: 1;
  }

  .ce-gallery__item img,
  .gallery__item img,
  .gallery-grid__item img,
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .ce-gallery__item:hover img,
  .gallery__item:hover img,
  .gallery-grid__item:hover img,
  .gallery-item:hover img {
    transform: scale(1.05);
  }

  .ce-gallery__item:focus-visible,
  .gallery__item:focus-visible,
  .gallery-grid__item:focus-visible,
  .gallery-item:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  /* -- Lightbox overlay ----------------------------------------------------- */

  .ce-gallery__item::after,
  .gallery__item::after,
  .gallery-grid__item::after,
  .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0);
    transition: background-color 0.3s ease;
    pointer-events: none;
  }

  .ce-gallery__item:hover::after,
  .gallery__item:hover::after,
  .gallery-grid__item:hover::after,
  .gallery-item:hover::after {
    background-color: rgb(0 0 0 / 0.15);
  }

  .ce-gallery__caption,
  .gallery__caption,
  .gallery-grid__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--min-spacing-sm, 0.5rem) var(--min-spacing-md, 1rem);
    /* Kein Gradient auf Bildern — Text-Shadow fuer Lesbarkeit */
    background: transparent;
    color: var(--min-text-on-dark, #ffffff);
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-sm, 0.875rem);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  }

  .ce-gallery__item:hover .ce-gallery__caption,
  .gallery__item:hover .gallery__caption,
  .gallery-grid__item:hover .gallery-grid__caption,
  .gallery-item:hover .gallery__caption {
    opacity: 1;
  }

  /* -- Grid Container Wrapper ----------------------------------------------- */

  .ce-gallery__container,
  .gallery-grid__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
    display: grid;
    grid-template-columns: repeat(var(--ce-gallery-columns), 1fr);
    gap: var(--ce-gallery-gap);
  }

  .gallery-grid__container--preview {
    display: grid;
    grid-template-columns: repeat(var(--ce-gallery-columns), 1fr);
    gap: var(--ce-gallery-gap);
  }

  /* -- Column Modifiers (Legacy Compat) ------------------------------------- */

  .ce-gallery__grid--2col,
  .gallery-grid--2col {
    --ce-gallery-columns: 2;
  }

  .ce-gallery__grid--3col,
  .gallery-grid--3col {
    --ce-gallery-columns: 3;
  }

  .ce-gallery__grid--4col,
  .gallery-grid--4col {
    --ce-gallery-columns: 4;
  }

  /* -- Number Overlay ------------------------------------------------------- */

  .ce-gallery__number,
  .gallery-grid__number,
  .gallery-horizontal__number {
    position: absolute;
    top: var(--min-spacing-sm, 0.5rem);
    left: var(--min-spacing-sm, 0.5rem);
    font-family: var(--min-font-heading, inherit);
    font-size: 0.75rem;
    font-weight: var(--min-weight-bold, 700);
    color: rgb(255 255 255 / 0.8);
    z-index: 2;
    pointer-events: none;
  }

  /* Number Badge - hidden by default, visible on hover */
  .gallery-grid__number {
    background: var(--min-color-primary, #777);
    padding: 0.2rem 0.4rem;
    opacity: 0;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .gallery-grid__item:hover .gallery-grid__number,
  .gallery-item:hover .gallery-grid__number {
    opacity: 1;
  }

  /* -- Aspect Ratio Modifiers ----------------------------------------------- */

  .ce-gallery--square .ce-gallery__item,
  .gallery--square .gallery__item,
  .gallery--square .gallery-grid__item,
  .gallery--square .gallery-item {
    aspect-ratio: 1 / 1;
  }

  .ce-gallery--landscape .ce-gallery__item,
  .gallery--landscape .gallery__item,
  .gallery--landscape .gallery-grid__item,
  .gallery--landscape .gallery-item {
    aspect-ratio: 16 / 10;
  }

  .ce-gallery--portrait .ce-gallery__item,
  .gallery--portrait .gallery__item,
  .gallery--portrait .gallery-grid__item,
  .gallery--portrait .gallery-item {
    aspect-ratio: 3 / 4;
  }

  /* -- Masonry Layout ------------------------------------------------------- */

  .ce-gallery--masonry .ce-gallery__grid,
  .gallery--masonry .gallery__grid,
  .gallery--masonry .gallery-grid__grid {
    columns: var(--ce-gallery-columns);
    column-gap: var(--ce-gallery-gap);
    display: block;
  }

  .ce-gallery--masonry .ce-gallery__item,
  .gallery--masonry .gallery__item,
  .gallery--masonry .gallery-grid__item,
  .gallery--masonry .gallery-item {
    break-inside: avoid;
    margin-block-end: var(--ce-gallery-gap);
  }

  .ce-gallery--masonry .ce-gallery__item img,
  .gallery--masonry .gallery__item img,
  .gallery--masonry .gallery-grid__item img,
  .gallery--masonry .gallery-item img {
    height: auto;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-gallery__grid,
    .gallery__grid,
    .gallery-grid__grid,
    .gallery-grid {
      --ce-gallery-columns: 2;
    }

    .ce-gallery--masonry .ce-gallery__grid,
    .gallery--masonry .gallery__grid,
    .gallery--masonry .gallery-grid__grid {
      columns: 2;
    }
  }

  @media (min-width: 480px) and (max-width: 767px) {
    .ce-gallery__grid,
    .gallery__grid,
    .gallery-grid__grid,
    .gallery-grid {
      --ce-gallery-columns: min(var(--ce-gallery-columns), 2);
    }

    .ce-gallery--masonry .ce-gallery__grid,
    .gallery--masonry .gallery__grid,
    .gallery--masonry .gallery-grid__grid {
      columns: 2;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .ce-gallery__grid,
    .gallery__grid,
    .gallery-grid__grid,
    .gallery-grid {
      --ce-gallery-columns: min(var(--ce-gallery-columns), 3);
    }

    .ce-gallery--masonry .ce-gallery__grid,
    .gallery--masonry .gallery__grid,
    .gallery--masonry .gallery-grid__grid {
      columns: min(var(--ce-gallery-columns), 3);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-gallery__item img,
    .gallery__item img,
    .gallery-grid__item img,
    .gallery-item img,
    .ce-gallery__item::after,
    .gallery__item::after,
    .gallery-grid__item::after,
    .gallery-item::after,
    .ce-gallery__caption,
    .gallery__caption,
    .gallery-grid__caption {
      transition: none;
    }

    .ce-gallery__item:hover img,
    .gallery__item:hover img,
    .gallery-grid__item:hover img,
    .gallery-item:hover img {
      transform: none;
    }
  }

  /* ==========================================================================
   * Gallery Horizontal - Horizontal Scroll Gallery
   * Compat: .gallery-horizontal = horizontal scroll variant
   * ========================================================================== */

  /* CE-Compat only — .gallery-horizontal is defined unlayered below */
  .ce-gallery--horizontal {
    --ce-gallery-item-width: min(320px, 80vw);
    padding: var(--min-space-section, 4rem) 0;
  }

  .ce-gallery--horizontal__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--min-spacing-md, 1rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
    margin-block-end: var(--min-spacing-lg, 2rem);
  }

  .ce-gallery--horizontal__track {
    display: flex;
    gap: var(--min-spacing-md, 1rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--min-container-padding, 1.5rem);
    padding-inline: var(--min-container-padding, 1.5rem);
    padding-block-end: var(--min-spacing-md, 1rem);
    -webkit-overflow-scrolling: touch;
  }

  .ce-gallery--horizontal__item {
    position: relative;
    flex: 0 0 var(--ce-gallery-item-width);
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--min-radius-sm, 2px);
    text-decoration: none;
    color: inherit;
  }

  /* Responsive: smaller items on mobile */
  @media (max-width: 479px) {
    .ce-gallery--horizontal {
      --ce-gallery-item-width: 75vw;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ce-gallery--horizontal__item img {
      transition: none;
    }

    .ce-gallery--horizontal__item:hover img {
      transform: none;
    }
  }

  /* ==========================================================================
   * Gallery Masonry - Grid mit variablen Höhen
   * ========================================================================== */

  .ce-gallery-masonry,
  .gallery-masonry {
    padding: var(--min-spacing-xl, 4rem) 0;
  }

  .ce-gallery-masonry__container,
  .gallery-masonry__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--min-spacing-md, 1rem);
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--min-container-padding, 1.5rem);
  }

  .ce-gallery-masonry__item,
  .gallery-masonry__item {
    position: relative;
    overflow: hidden;
    display: block;
  }

  .ce-gallery-masonry__item img,
  .gallery-masonry__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-transition-slow, 400ms ease);
  }

  .ce-gallery-masonry__item:hover img,
  .gallery-masonry__item:hover img {
    transform: scale(1.05);
  }

  .ce-gallery-masonry__item--tall,
  .gallery-masonry__item--tall {
    grid-row: span 2;
  }

  .ce-gallery-masonry__item--wide,
  .gallery-masonry__item--wide {
    grid-column: span 2;
  }

  .ce-gallery-masonry__overlay,
  .gallery-masonry__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--min-spacing-lg, 1.5rem);
    /* Kein Gradient auf Bildern — solider Text-Block */
    background: var(--min-color-text, #1e1e1e);
    color: var(--min-text-on-dark, #fff);
    transform: translateY(100%);
    transition: transform var(--min-transition, 200ms ease);
  }

  .ce-gallery-masonry__item:hover .ce-gallery-masonry__overlay,
  .gallery-masonry__item:hover .gallery-masonry__overlay {
    transform: translateY(0);
  }

  .ce-gallery-masonry__title,
  .gallery-masonry__title {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.25rem;
    font-weight: var(--min-weight-medium, 500);
    margin-block-end: 0.25rem;
  }

  .ce-gallery-masonry__subtitle,
  .gallery-masonry__subtitle {
    font-size: var(--min-font-sm, 0.875rem);
    opacity: 0.8;
  }

  @media (max-width: 1023px) {
    .ce-gallery-masonry__container,
    .gallery-masonry__container {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 767px) {
    .ce-gallery-masonry__container,
    .gallery-masonry__container {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 150px;
    }

    .ce-gallery-masonry__item--wide,
    .gallery-masonry__item--wide {
      grid-column: span 1;
    }
  }

  /* ==========================================================================
   * Gallery Fullscreen - Vollbild-Slideshow
   * ========================================================================== */

  .ce-gallery-fullscreen,
  .gallery-fullscreen {
    position: relative;
    height: 80vh;
    min-height: 500px;
    overflow: hidden;
  }

  .ce-gallery-fullscreen__slide,
  .gallery-fullscreen__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--min-transition-slow, 400ms ease);
  }

  .ce-gallery-fullscreen__slide.is-active,
  .gallery-fullscreen__slide.is-active {
    opacity: 1;
  }

  .ce-gallery-fullscreen__slide img,
  .gallery-fullscreen__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ce-gallery-fullscreen__content,
  .gallery-fullscreen__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--min-spacing-2xl, 6rem) var(--min-spacing-lg, 2rem);
    /* Kein Gradient auf Bildern — Text-Shadow fuer Lesbarkeit */
    background: transparent;
    color: var(--min-text-on-dark, #fff);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  }

  .ce-gallery-fullscreen__number,
  .gallery-fullscreen__number {
    display: block;
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-block-end: 0.5rem;
  }

  .ce-gallery-fullscreen__title,
  .gallery-fullscreen__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: var(--min-weight-medium, 500);
    margin-block-end: 0.5rem;
  }

  .ce-gallery-fullscreen__desc,
  .gallery-fullscreen__desc {
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-block-end: 1rem;
  }

  .ce-gallery-fullscreen__zoom,
  .gallery-fullscreen__zoom {
    display: inline-block;
    font-size: var(--min-font-sm, 0.875rem);
    color: var(--min-text-on-dark, #fff);
    text-decoration: none;
    border-bottom: 1px solid rgb(255 255 255 / 0.5);
    transition: border-color var(--min-transition, 200ms ease);
  }

  .ce-gallery-fullscreen__zoom:hover,
  .gallery-fullscreen__zoom:hover {
    border-bottom-color: rgb(255 255 255 / 1);
  }

  .ce-gallery-fullscreen__nav,
  .gallery-fullscreen__nav {
    position: absolute;
    bottom: var(--min-spacing-lg, 2rem);
    right: var(--min-spacing-lg, 2rem);
    z-index: 2;
    display: flex;
    gap: var(--min-spacing-sm, 0.5rem);
  }

  .ce-gallery-fullscreen__btn,
  .gallery-fullscreen__btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 0.1);
    color: var(--min-text-on-dark, #fff);
    border: 1px solid rgb(255 255 255 / 0.3);
    cursor: pointer;
    transition: background var(--min-transition, 200ms ease);
  }

  .ce-gallery-fullscreen__btn:hover,
  .gallery-fullscreen__btn:hover {
    background: rgb(255 255 255 / 0.2);
  }

  /* ==========================================================================
   * Gallery Filmstrip - Auto-Scroll Band
   * ========================================================================== */

  .ce-gallery-filmstrip,
  .gallery-filmstrip {
    overflow: hidden;
    padding: var(--min-spacing-md, 1rem) 0;
    background: var(--min-color-primary, #777);
  }

  .ce-gallery-filmstrip__track,
  .gallery-filmstrip__track {
    display: flex;
    gap: var(--min-spacing-xs, 0.25rem);
    animation: ce-filmstrip-scroll 30s linear infinite;
  }

  .ce-gallery-filmstrip__track img,
  .gallery-filmstrip__track img {
    height: 200px;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
  }

  @keyframes ce-filmstrip-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .ce-gallery-filmstrip:hover .ce-gallery-filmstrip__track,
  .gallery-filmstrip:hover .gallery-filmstrip__track {
    animation-play-state: paused;
  }

  /* ==========================================================================
   * Gallery Lightbox - Grid mit Zoom-Overlay
   * ========================================================================== */

  .ce-gallery-lightbox,
  .gallery-lightbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-md, 1rem);
    margin-block-start: var(--min-spacing-lg, 2rem);
  }

  @media (max-width: 767px) {
    .ce-gallery-lightbox,
    .gallery-lightbox {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .ce-gallery-lightbox__item,
  .gallery-lightbox__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
  }

  .ce-gallery-lightbox__item img,
  .gallery-lightbox__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-transition, 200ms ease);
  }

  .ce-gallery-lightbox__item:hover img,
  .gallery-lightbox__item:hover img {
    transform: scale(1.05);
  }

  .ce-gallery-lightbox__zoom,
  .gallery-lightbox__zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 3rem;
    height: 3rem;
    background: rgb(255 255 255 / 0.95);
    border-radius: var(--min-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--min-transition, 200ms ease);
  }

  .ce-gallery-lightbox__item:hover .ce-gallery-lightbox__zoom,
  .gallery-lightbox__item:hover .gallery-lightbox__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .ce-gallery-lightbox__zoom svg,
  .gallery-lightbox__zoom svg {
    color: var(--min-color-primary, #333);
  }
}

/* --- ../../../../content-elements/css/components/hero.css --- */
@layer components {
  /* ==========================================================================
   * CE Hero - Vollbreiter Hero-Bereich
   * Base class: :is(.ce-hero, .min-hero)
   * Modifiers: --slim, --large, --full, --center, --left, --right
   * Dependencies: _tokens, _typography
   * ========================================================================== */

  /* Compat: .hero, .page-hero = :is(.ce-hero, .min-hero) (legacy prototype support) */

  :is(.ce-hero, .min-hero),
  .hero,
  .page-hero {
    --ce-hero-height: var(--min-hero-height, 80vh);
    --ce-hero-overlay-opacity: 0.5;
    --ce-hero-content-max-width: 48rem;
    --ce-hero-padding-x: var(--min-spacing-lg, 2rem);
    --ce-hero-padding-y: var(--min-spacing-xl, 4rem);

    position: relative;
    display: flex;
    align-items: var(--min-hero-align, center);
    justify-content: center;
    min-height: max(var(--ce-hero-height), 600px);
    overflow: hidden;
    color: var(--min-text-on-dark, #ffffff);
  }

  .ce-hero__media,
  .hero__media,
  .hero__image,
  .hero__bg,
  .page-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ce-hero__media img,
  .hero__media img,
  .hero__image img,
  .hero__bg img,
  .page-hero__background img,
  .ce-hero__media video,
  .hero__media video,
  .hero__image video,
  .hero__bg video,
  .page-hero__background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Gradient overlay removed per design rules (no gradients on images) */

  .ce-hero__overlay,
  .hero__overlay,
  .page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ce-hero__overlay--dark,
  .hero__overlay--dark,
  .page-hero__overlay--dark {
    background-color: rgb(0 0 0 / var(--ce-hero-overlay-opacity));
  }

  .ce-hero__overlay--light,
  .hero__overlay--light,
  .page-hero__overlay--light {
    background-color: rgb(255 255 255 / var(--ce-hero-overlay-opacity));
  }

  /* Gradient overlay removed per design rules (no gradients on images) */

  /* Suppress block removed — ::after overlays no longer exist */

  .ce-hero__content,
  .hero__content,
  .page-hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--ce-hero-content-max-width);
    padding: var(--ce-hero-padding-y) var(--ce-hero-padding-x);
    text-align: center;
  }

  .ce-hero__title,
  .hero__title,
  .page-hero__title {
    font-family: var(--min-font-heading, inherit);
    font-size: var(--min-hero-title-size, clamp(2rem, 5vw, 4rem));
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-hero__subtitle,
  .hero__subtitle,
  .hero__text,
  .page-hero__subtitle {
    font-family: var(--min-font-body, inherit);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: var(--min-weight-normal, 400);
    line-height: var(--min-line-normal, 1.5);
    margin-block-end: var(--min-spacing-lg, 2rem);
    opacity: 0.9;
  }

  .ce-hero__cta,
  .hero__cta,
  .hero__button,
  .page-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--min-spacing-xs, 0.5rem);
    padding: var(--min-spacing-sm, 0.75rem) var(--min-spacing-lg, 2rem);
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-text-primary, #1e1e1e);
    background-color: var(--min-bg-primary, #ffffff);
    border: none;
    border-radius: var(--min-radius-md, 0.5rem);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .ce-hero__cta:hover,
  .hero__cta:hover,
  .hero__button:hover,
  .page-hero__cta:hover {
    background-color: var(--min-bg-secondary, #f8f9fa);
    transform: translateY(-2px);
  }

  .ce-hero__cta:focus-visible,
  .hero__cta:focus-visible,
  .hero__button:focus-visible,
  .page-hero__cta:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  /* -- Decorative Elements ------------------------------------------------- */

  .ce-hero__number,
  .hero__number,
  .page-hero__number {
    position: absolute;
    top: var(--min-spacing-lg, 2rem);
    right: var(--min-spacing-lg, 2rem);
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: 1;
    color: rgb(255 255 255 / 0.15);
    z-index: 1;
    pointer-events: none;
  }

  .ce-hero__scroll,
  .hero__scroll,
  .page-hero__scroll {
    position: absolute;
    bottom: var(--min-spacing-lg, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--min-text-on-dark, #ffffff);
    background: none;
    border: 2px solid rgb(255 255 255 / 0.4);
    border-radius: var(--min-radius-full, 9999px);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
  }

  .ce-hero__scroll:hover,
  .hero__scroll:hover,
  .page-hero__scroll:hover {
    border-color: rgb(255 255 255 / 0.8);
    transform: translateX(-50%) translateY(4px);
  }

  .ce-hero__scroll svg,
  .hero__scroll svg,
  .page-hero__scroll svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* -- Position Modifiers --------------------------------------------------- */

  .ce-hero--left .ce-hero__content,
  .hero--left .hero__content,
  .page-hero--left .page-hero__content {
    text-align: left;
    margin-inline-end: auto;
  }

  .ce-hero--right .ce-hero__content,
  .hero--right .hero__content,
  .page-hero--right .page-hero__content {
    text-align: right;
    margin-inline-start: auto;
  }

  .ce-hero--center .ce-hero__content,
  .hero--center .hero__content,
  .page-hero--center .page-hero__content {
    text-align: center;
    margin-inline: auto;
  }

  /* -- Height Modifiers ----------------------------------------------------- */

  .ce-hero--slim,
  .hero--slim,
  .hero--sm,
  .page-hero--slim {
    --ce-hero-height: 40vh;
  }

  .ce-hero--large,
  .hero--large,
  .page-hero--large {
    --ce-hero-height: 80vh;
  }

  .ce-hero--full,
  .hero--full,
  .page-hero--full {
    --ce-hero-height: 100vh;
  }

  .ce-hero--medium,
  .hero--medium,
  .page-hero--medium {
    --ce-hero-height: 60vh;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    :is(.ce-hero, .min-hero),
    .hero,
    .page-hero {
      --ce-hero-height: 50vh;
      --ce-hero-padding-x: var(--min-spacing-md, 1rem);
    }

    .ce-hero--full,
    .hero--full,
    .page-hero--full {
      --ce-hero-height: 100vh;
    }

    .ce-hero__cta,
    .hero__cta,
    .hero__button,
    .page-hero__cta {
      width: 100%;
      justify-content: center;
    }
  }

  @media (min-width: 480px) {
    .ce-hero__content,
    .hero__content,
    .page-hero__content {
      padding: var(--min-spacing-xl, 4rem) var(--min-spacing-lg, 2rem);
    }
  }

  @media (min-width: 768px) {
    .ce-hero__content,
    .hero__content,
    .page-hero__content {
      padding: var(--min-spacing-2xl, 6rem) var(--min-spacing-xl, 4rem);
    }
  }

  @media (min-width: 1024px) {
    .ce-hero--left .ce-hero__content,
    .hero--left .hero__content,
    .page-hero--left .page-hero__content,
    .ce-hero--right .ce-hero__content,
    .hero--right .hero__content,
    .page-hero--right .page-hero__content {
      max-width: calc(var(--ce-hero-content-max-width) * 0.75);
    }
  }

  /* -- Compact Hero (Unterseiten) ----------------------------------------- */

  .ce-hero--compact,
  .hero--compact,
  .page-hero--compact {
    --ce-hero-height: 50vh;
    min-height: 400px;
  }

  .ce-hero--compact .ce-hero__content,
  .hero--compact .hero__content,
  .page-hero--compact .page-hero__content {
    padding-block-end: var(--min-spacing-lg, 2rem);
  }

  /* -- Bottom-aligned Content --------------------------------------------- */

  .ce-hero--bottom,
  .hero--bottom,
  .page-hero--bottom {
    align-items: flex-end;
  }

  .ce-hero--bottom .ce-hero__content,
  .hero--bottom .hero__content,
  .page-hero--bottom .page-hero__content {
    text-align: left;
    max-width: var(--min-container-max, 1280px);
    width: 100%;
    margin-inline: auto;
  }

  /* -- Hero Slider -------------------------------------------------------- */

  .ce-hero-slider,
  .hero-slider {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
  }

  .ce-hero-slider__track,
  .hero-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ce-hero-slider__slide,
  .hero-slider__slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
  }

  .ce-hero-slider__image,
  .hero-slider__image {
    position: absolute;
    inset: 0;
  }

  .ce-hero-slider__image img,
  .hero-slider__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Gradient overlay removed per design rules (no gradients on images) */

  .ce-hero-slider__content,
  .hero-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--min-spacing-2xl, 6rem) var(--min-container-padding, 1.5rem);
    color: var(--min-text-on-dark, #fff);
  }

  .ce-hero-slider__content-inner,
  .hero-slider__content-inner {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  .ce-hero-slider__dots,
  .hero-slider__dots {
    position: absolute;
    bottom: var(--min-spacing-lg, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: var(--min-spacing-sm, 0.5rem);
  }

  .ce-hero-slider__dot,
  .hero-slider__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--min-radius-full, 9999px);
    background: rgb(255 255 255 / 0.4);
    border: none;
    cursor: pointer;
    transition: background var(--min-transition, 200ms ease);
  }

  .ce-hero-slider__dot.is-active,
  .hero-slider__dot.is-active {
    background: rgb(255 255 255 / 1);
  }

  .ce-hero-slider__nav,
  .hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.3);
    color: var(--min-text-on-dark, #fff);
    border: none;
    cursor: pointer;
    transition: background var(--min-transition, 200ms ease);
  }

  .ce-hero-slider__nav:hover,
  .hero-slider__nav:hover {
    background: rgb(0 0 0 / 0.6);
  }

  .ce-hero-slider__nav--prev,
  .hero-slider__nav--prev {
    left: var(--min-spacing-md, 1rem);
  }

  .ce-hero-slider__nav--next,
  .hero-slider__nav--next {
    right: var(--min-spacing-md, 1rem);
  }

  /* -- Hero Video --------------------------------------------------------- */

  .ce-hero--video .ce-hero__video,
  .hero--video .hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .ce-hero--video .ce-hero__video video,
  .hero--video .hero__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ce-hero--video .ce-hero__video::after,
  .hero--video .hero__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-hero__cta,
    .hero__cta,
    .hero__button,
    .page-hero__cta {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/image-effects.css --- */
/* components/image-effects.css
 * Hover Effects on Images
 * BEM: .ce-img-fx, .ce-img-fx--zoom, etc.
 */
@layer components {
  .ce-img-fx {
    overflow: hidden;
    border-radius: var(--min-radius-md);
  }

  .ce-img-fx img {
    transition: transform var(--min-transition-slow), filter var(--min-transition-slow);
    will-change: transform;
  }

  /* Zoom on hover */
  .ce-img-fx--zoom:hover img {
    transform: scale(1.08);
  }

  /* Brightness lift */
  .ce-img-fx--brighten:hover img {
    filter: brightness(1.1);
  }

  /* Grayscale to color */
  .ce-img-fx--grayscale img {
    filter: grayscale(100%);
  }

  .ce-img-fx--grayscale:hover img {
    filter: grayscale(0%);
  }

  /* Overlay fade */
  .ce-img-fx--overlay {
    position: relative;
  }

  .ce-img-fx--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--min-color-primary);
    opacity: 0;
    transition: opacity var(--min-transition-slow);
    pointer-events: none;
  }

  .ce-img-fx--overlay:hover::after {
    opacity: 0.15;
  }

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

/* --- ../../../../content-elements/css/components/info-box.css --- */
/* components/info-box.css
 * Info / Fact Box Component
 * BEM: .info-box, .info-box__grid, .info-box__item, .info-box__note
 * Used for: opening hours, quick facts, key info sections
 */
@layer components {
  .info-box {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
  }

  .info-box h2 {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    margin-block-end: var(--min-spacing-lg, 1.5rem);
  }

  .info-box__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--min-spacing-lg, 1.5rem);
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  .info-box__item {
    display: flex;
    flex-direction: column;
    gap: var(--min-spacing-xs, 0.25rem);
    padding: var(--min-spacing-md, 1rem);
    background-color: var(--min-bg-primary, #ffffff);
    border-radius: var(--min-radius-sm, 2px);
    box-shadow: var(--min-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  }

  .info-box__item strong {
    font-family: var(--min-font-heading, inherit);
    font-size: 1rem;
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-color-primary, #333);
  }

  .info-box__item span {
    font-size: 1.125rem;
    font-weight: var(--min-weight-bold, 700);
  }

  .info-box__note {
    font-size: 0.9375rem;
    color: var(--min-color-muted, #666);
    margin-block: var(--min-spacing-sm, 0.75rem);
  }

  .info-box .ce-btn {
    margin-block-start: var(--min-spacing-md, 1rem);
  }
}

/* --- ../../../../content-elements/css/components/map.css --- */
/**
 * Map Component
 * CE-Framework: Karten-Darstellung mit Platzhalter und Overlay
 */

@layer components {
  .ce-map,
  .map {
    padding: 0;
  }

  .ce-map__container,
  .map__container {
    max-width: 100%;
  }

  .ce-map__placeholder,
  .map__placeholder {
    position: relative;
    height: 400px;
    overflow: hidden;
  }

  .ce-map__placeholder img,
  .map__placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
  }

  .ce-map__overlay,
  .map__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--min-spacing-lg, 2rem);
    /* Kein Gradient auf Bildern — solider Text-Block */
    background: var(--min-color-text, #1e1e1e);
    color: var(--min-text-on-dark, #ffffff);
    text-align: center;
  }
}

/* --- ../../../../content-elements/css/components/navigation.css --- */
/* content-elements/css/components/navigation.css
 * Unified Navigation Module - alle Nav-Varianten
 * Ersetzt: min_core Navigation/ (6 Dateien, ~100kb)
 *
 * COMPAT: Alte Prototypen-Klassen (.site-header, .header) werden parallel unterstützt
 */
@layer components {
  /* === Custom Properties === */
  .ce-nav,
  .site-header,
  .header {
    --ce-nav-height: var(--min-nav-height, 4rem);
    --ce-nav-bg: var(--min-color-bg);
    --ce-nav-text: var(--min-color-text);
    --ce-nav-hover: var(--min-color-primary);
    --ce-nav-mobile-bp: 768px;
    --ce-nav-z: 1000;
  }

  /* === Base Navigation === */
  .ce-nav,
  .site-header,
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--ce-nav-z);
    background-color: var(--ce-nav-bg);
    color: var(--ce-nav-text);
    min-height: var(--ce-nav-height);
  }

  .ce-nav__inner,
  .header__inner,
  .header__container,
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    padding-inline: var(--min-container-padding);
    min-height: var(--ce-nav-height);
  }

  /* === Logo === */
  .ce-nav__logo,
  .header__logo,
  .site-header__logo,
  .site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
  }

  .ce-nav__logo img,
  .header__logo img,
  .site-header__logo img,
  .site-logo img {
    height: var(--min-logo-height, calc(var(--ce-nav-height) - 1rem));
    width: auto;
  }

  /* === Desktop Menu === */
  .ce-nav__menu,
  .header__nav,
  .header__menu,
  .site-nav,
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--min-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ce-nav__link,
  .header__link,
  .header__menu > li > a,
  .site-nav__link {
    display: flex;
    align-items: center;
    padding: var(--min-space-xs) var(--min-space-sm);
    text-decoration: none;
    color: var(--ce-nav-text);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--min-radius-sm);
    transition: color var(--min-transition), background-color var(--min-transition);
  }

  .ce-nav__link:hover,
  .ce-nav__link[aria-current="page"],
  .ce-nav__link.is-active,
  .header__link:hover,
  .header__link[aria-current="page"],
  .header__link.is-active,
  .header__menu > li > a:hover,
  .header__menu > li > a[aria-current="page"],
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"],
  .site-nav__link.is-active {
    color: var(--ce-nav-hover);
    background-color: color-mix(in srgb, var(--ce-nav-hover) 8%, transparent);
  }

  .ce-nav__link:focus-visible,
  .header__link:focus-visible,
  .header__menu > li > a:focus-visible,
  .site-nav__link:focus-visible {
    outline: 2px solid var(--ce-nav-hover);
    outline-offset: 2px;
  }

  /* === Dropdown/Submenu === */
  .ce-nav__item,
  .header__item,
  .site-nav__item { position: relative; }

  .ce-nav__sub,
  .header__sub,
  .header__submenu,
  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background-color: var(--ce-nav-bg);
    border: 1px solid var(--min-color-border, #e0e0e0);
    border-radius: var(--min-radius-md);
    box-shadow: var(--min-shadow-md, 0 4px 16px rgba(0,0,0,0.1));
    padding: var(--min-space-xs) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--min-transition), transform var(--min-transition), visibility var(--min-transition);
    list-style: none;
  }

  .ce-nav__item:hover > .ce-nav__sub,
  .ce-nav__item:focus-within > .ce-nav__sub,
  .header__item:hover > .header__sub,
  .header__item:focus-within > .header__sub,
  .header__item:hover > .header__submenu,
  .header__item:focus-within > .header__submenu,
  .site-nav__item:hover > .site-nav__sub,
  .site-nav__item:focus-within > .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .ce-nav__sub .ce-nav__link,
  .header__sub .header__link,
  .header__submenu a,
  .site-nav__sub .site-nav__link {
    padding: var(--min-space-xs) var(--min-space-md);
    width: 100%;
    border-radius: 0;
  }

  /* === Hamburger Toggle === */
  .ce-nav__toggle,
  .header__toggle,
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
  }

  .ce-nav__toggle-bar,
  .header__toggle-bar,
  .nav-toggle__bar {
    display: block;
    width: 1.5rem;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--min-transition);
    position: relative;
  }

  .ce-nav__toggle-bar::before,
  .ce-nav__toggle-bar::after,
  .header__toggle-bar::before,
  .header__toggle-bar::after,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--min-transition);
  }

  .ce-nav__toggle-bar::before,
  .header__toggle-bar::before,
  .nav-toggle__bar::before { top: -0.5rem; }
  .ce-nav__toggle-bar::after,
  .header__toggle-bar::after,
  .nav-toggle__bar::after { top: 0.5rem; }

  /* Hamburger open state */
  [aria-expanded="true"] .ce-nav__toggle-bar,
  [aria-expanded="true"] .header__toggle-bar,
  [aria-expanded="true"] .nav-toggle__bar {
    background-color: transparent;
  }
  [aria-expanded="true"] .ce-nav__toggle-bar::before,
  [aria-expanded="true"] .header__toggle-bar::before,
  [aria-expanded="true"] .nav-toggle__bar::before {
    top: 0;
    transform: rotate(45deg);
  }
  [aria-expanded="true"] .ce-nav__toggle-bar::after,
  [aria-expanded="true"] .header__toggle-bar::after,
  [aria-expanded="true"] .nav-toggle__bar::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* === Sticky Scrolled === */
  .ce-nav--scrolled,
  .header--scrolled,
  .site-header--scrolled,
  .ce-nav.is-scrolled,
  .header.is-scrolled,
  .site-header.is-scrolled {
    box-shadow: var(--min-shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
  }

  /* === Transparent Variant === */
  .ce-nav--transparent,
  .header--transparent,
  .site-header--transparent {
    position: absolute;
    width: 100%;
    background-color: transparent;
    color: var(--min-color-bg);
    /* Custom Properties ueberschreiben damit Links weiss werden */
    --ce-nav-text: var(--min-color-bg);
    --ce-nav-hover: var(--min-color-bg);
  }

  .ce-nav--transparent.ce-nav--scrolled,
  .header--transparent.header--scrolled,
  .site-header--transparent.site-header--scrolled {
    position: sticky;
    background-color: var(--ce-nav-bg);
    color: var(--min-color-text);
    /* Custom Properties zuruecksetzen fuer normalen Zustand */
    --ce-nav-text: var(--min-color-text);
    --ce-nav-hover: var(--min-color-primary);
  }

  /* === Mobile === */
  @media (max-width: 768px) {
    .ce-nav__toggle,
    .header__toggle,
    .nav-toggle { display: flex; }

    .ce-nav__menu,
    .header__nav,
    .header__menu,
    .site-nav,
    .site-nav__list {
      position: fixed;
      inset: var(--ce-nav-height) 0 0 0;
      flex-direction: column;
      background-color: var(--ce-nav-bg);
      padding: var(--min-space-md);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: calc(var(--ce-nav-z) - 1);
    }

    .ce-nav__menu[data-open="true"],
    .ce-nav[data-mobile-open="true"] .ce-nav__menu,
    .header__nav[data-open="true"],
    .header[data-mobile-open="true"] .header__nav,
    .header__menu[data-open="true"],
    .header[data-mobile-open="true"] .header__menu,
    .site-nav[data-open="true"],
    .site-header[data-mobile-open="true"] .site-nav,
    .site-nav__list[data-open="true"],
    .site-header[data-mobile-open="true"] .site-nav__list {
      transform: translateX(0);
    }

    .ce-nav__menu.is-open,
    .header__nav.is-open,
    .header__menu.is-open,
    .site-nav.is-open {
      transform: translateX(0);
    }

    .ce-nav__link,
    .header__link,
    .header__menu > li > a,
    .site-nav__link {
      padding: var(--min-space-sm) var(--min-space-md);
      font-size: 1rem;
      width: 100%;
    }

    .ce-nav__sub,
    .header__sub,
    .header__submenu,
    .site-nav__sub {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      padding-left: var(--min-space-md);
    }

    .ce-nav__sub[hidden],
    .header__sub[hidden],
    .header__submenu[hidden],
    .site-nav__sub[hidden] { display: none; }
  }

  /* === Fullscreen Overlay Nav === */
  .ce-nav--fullscreen .ce-nav__menu,
  .header--fullscreen .header__nav,
  .header--fullscreen .header__menu {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--min-space-md);
    background-color: var(--ce-nav-bg);
    transform: translateY(-100%);
    transition: transform 0.4s ease;
  }

  .ce-nav--fullscreen[data-mobile-open="true"] .ce-nav__menu,
  .header--fullscreen[data-mobile-open="true"] .header__nav,
  .header--fullscreen[data-mobile-open="true"] .header__menu {
    transform: translateY(0);
  }

  .ce-nav--fullscreen .ce-nav__link,
  .header--fullscreen .header__link {
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-family: var(--min-font-heading);
  }

  /* === A11y: Skip Navigation handled by modules/a11y/skip-links.css === */

  /* === Reduced Motion === */
  @media (prefers-reduced-motion: reduce) {
    .ce-nav__menu,
    .ce-nav__sub,
    .ce-nav__toggle-bar,
    .ce-nav__toggle-bar::before,
    .ce-nav__toggle-bar::after,
    .ce-nav--fullscreen .ce-nav__menu,
    .header__nav,
    .header__menu,
    .header__sub,
    .header__toggle-bar,
    .header__toggle-bar::before,
    .header__toggle-bar::after,
    .header--fullscreen .header__nav,
    .header--fullscreen .header__menu,
    .site-nav,
    .site-nav__list,
    .site-nav__sub,
    .nav-toggle__bar,
    .nav-toggle__bar::before,
    .nav-toggle__bar::after {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/page-header.css --- */
@layer components {
  /* ==========================================================================
   * CE Page Header - Unterseiten-Header
   * Base class: .ce-page-header
   * Modifiers: --image
   * Dependencies: tokens, typography
   *
   * Compat: Unterstützt alte Klassennamen (.page-header) für bestehende Prototypen
   * ========================================================================== */

  .ce-page-header,
  .page-header {
    padding: calc(var(--ce-nav-height, 5rem) + var(--min-space-section, 4rem))
      var(--min-container-padding, 1.5rem) var(--min-space-section, 4rem);
    background: var(--min-color-surface, #f5f5f5);
    /* Override :is(.ce-hero, .min-hero) when used as page-header (not hero) */
    min-height: auto;
    display: block;
    overflow: visible;
    color: inherit;
  }

  .ce-page-header__container,
  .page-header__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
  }

  .ce-page-header__eyebrow,
  .page-header__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--min-color-accent, #cd1719);
    margin-bottom: var(--min-spacing-sm, 1rem);
  }

  .ce-page-header__title,
  .page-header__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
  }

  .ce-page-header__number,
  .page-header__number {
    display: block;
    font-family: var(--min-font-body, monospace);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--min-color-accent, #CD1719);
    margin-bottom: var(--min-spacing-sm, 0.5rem);
  }

  .ce-page-header--image .ce-page-header__number,
  .ce-page-header--image .page-header__number,
  .page-header--image .page-header__number {
    color: #fff;
    opacity: 0.8;
  }

  .ce-page-header__intro,
  .page-header__intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--min-color-text, #555);
    opacity: 0.7;
    max-width: 700px;
    margin-top: var(--min-spacing-lg, 2rem);
  }

  /* -- Image Variant -------------------------------------------------------- */

  .ce-page-header--image,
  .page-header--image {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--ce-nav-height, 5rem) + var(--min-space-section, 4rem));
    padding-bottom: var(--min-space-section, 4rem);
    padding-inline: var(--min-container-padding, 1.5rem);
    background: transparent;
    color: #fff;
  }

  /* Graceful degradation: ohne Bild-Element -> Standard page-header Stil */
  .ce-page-header--image:not(:has(.ce-page-header__bg, .page-header__bg, .page-header__background)),
  .page-header--image:not(:has(.ce-page-header__bg, .page-header__bg, .page-header__background)) {
    background: var(--min-color-surface, #f5f5f5);
    color: inherit;
    min-height: auto;
    display: block;
  }

  .ce-page-header--image .ce-page-header__bg,
  .ce-page-header--image .page-header__bg,
  .ce-page-header--image .page-header__background,
  .page-header--image .page-header__bg,
  .page-header--image .page-header__background {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ce-page-header--image .ce-page-header__bg img,
  .ce-page-header--image .page-header__bg img,
  .ce-page-header--image .page-header__background img,
  .page-header--image .page-header__bg img,
  .page-header--image .page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Gradient overlay removed per design rules (no gradients on images) */

  .ce-page-header--image .ce-page-header__container,
  .ce-page-header--image .page-header__container,
  .page-header--image .page-header__container {
    position: relative;
    z-index: 1;
  }

  .ce-page-header--image .ce-page-header__eyebrow,
  .ce-page-header--image .page-header__eyebrow,
  .page-header--image .page-header__eyebrow {
    color: rgb(255 255 255 / 0.8);
  }

  .ce-page-header--image .ce-page-header__intro,
  .ce-page-header--image .page-header__intro,
  .page-header--image .page-header__intro {
    color: rgb(255 255 255 / 0.85);
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-page-header,
    .page-header {
      padding-top: calc(var(--ce-nav-height, 5rem) + var(--min-spacing-lg, 2rem));
      padding-bottom: var(--min-spacing-lg, 2rem);
    }

    .ce-page-header--image,
    .page-header--image {
      padding-top: calc(var(--ce-nav-height, 5rem) + var(--min-spacing-lg, 2rem));
      padding-bottom: var(--min-spacing-lg, 2rem);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-page-header,
    .page-header {
      animation: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/pagination.css --- */
@layer components {
  /* ========================================
     PAGINATION
     ======================================== */

  .ce-pagination,
  .pagination {
    padding: var(--min-spacing-xl, 4rem) var(--min-container-padding, 1.5rem);
    border-top: 1px solid var(--min-color-border, #e0e0e0);
  }

  .ce-pagination__container,
  .pagination__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--min-spacing-lg, 2rem);
  }

  .ce-pagination__prev,
  .ce-pagination__next,
  .pagination__prev,
  .pagination__next {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--min-color-accent, #CD1719);
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .ce-pagination__prev:hover,
  .ce-pagination__next:hover,
  .pagination__prev:hover,
  .pagination__next:hover {
    opacity: 0.7;
  }

  .ce-pagination__current,
  .pagination__current {
    font-size: 0.9rem;
    color: var(--min-color-muted, #555);
  }
}

/* --- ../../../../content-elements/css/components/parallax-container.css --- */
/* content-elements/css/components/parallax-container.css
 * Container mit Parallax-Hintergrundbild und GSAP ScrollTrigger
 * Layout/structure - GSAP handles parallax movement via JS
 *
 * Compat: .scene-break, .parallax-section = Legacy-Prototypen (Neyer etc.)
 */
@layer components {

  /* === Custom Properties === */
  .ce-parallax-container,
  .scene-break,
  .parallax-section {
    --ce-parallax-min-height: 60vh;
    --ce-parallax-overlay-opacity: 0.5;
    --ce-parallax-overlay-color: #000;
    --ce-parallax-speed: 0.5;
  }

  /* === Base Block === */
  .ce-parallax-container,
  .scene-break,
  .parallax-section {
    position: relative;
    min-block-size: var(--ce-parallax-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
  }

  /* === Height Modifiers === */
  .ce-parallax-container--height-40 { --ce-parallax-min-height: 40vh; }
  .ce-parallax-container--height-60 { --ce-parallax-min-height: 60vh; }
  .ce-parallax-container--height-80 { --ce-parallax-min-height: 80vh; }
  .ce-parallax-container--height-100 { --ce-parallax-min-height: 100vh; }

  /* === Background Image Layer === */
  .ce-parallax-container__bg,
  .scene-break__background,
  .parallax-section__background {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Extra height for parallax movement range */
    block-size: calc(100% + 20vh);
    inset-block-start: -10vh;
  }

  .ce-parallax-container__bg img,
  .scene-break__background img,
  .parallax-section__background img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* === Overlay Layer === */
  .ce-parallax-container__overlay,
  .scene-break__overlay,
  .parallax-section__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--ce-parallax-overlay-color);
    opacity: var(--ce-parallax-overlay-opacity);
    pointer-events: none;
  }

  /* === Content Layer === */
  .ce-parallax-container__content,
  .scene-break__content,
  .parallax-section__content {
    position: relative;
    z-index: 1;
    max-width: var(--min-container-max);
    inline-size: 100%;
    padding-inline: var(--min-container-padding);
    padding-block: var(--min-space-xl);
  }

  /* === Content Position Modifiers === */
  .ce-parallax-container--top {
    align-items: flex-start;
  }

  .ce-parallax-container--top .ce-parallax-container__content {
    padding-block-start: var(--min-space-2xl);
  }

  .ce-parallax-container--center {
    align-items: center;
  }

  .ce-parallax-container--bottom {
    align-items: flex-end;
  }

  .ce-parallax-container--bottom .ce-parallax-container__content {
    padding-block-end: var(--min-space-2xl);
  }

  /* === Typography inside parallax (on dark bg) === */
  .ce-parallax-container__header,
  .scene-break__title {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    line-height: var(--min-line-height-heading);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-sm);
  }

  .ce-parallax-container__subheader {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-medium);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--min-color-text);
    opacity: 0.85;
    margin-block-end: var(--min-space-md);
  }

  .ce-parallax-container__body,
  .scene-break__text {
    font-family: var(--min-font-body);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: var(--min-line-height);
    color: var(--min-color-text);
    opacity: 0.9;
    max-inline-size: 48rem;
  }

  /* === Scene-break Button (inline CTA) === */
  .scene-break__btn {
    display: inline-block;
    margin-block-start: var(--min-space-md, 1rem);
    padding: var(--min-space-sm, 0.75rem) var(--min-space-lg, 1.5rem);
    background-color: var(--min-color-primary, #777);
    color: #fff;
    font-weight: 600;
    border-radius: var(--min-radius-md, 0.5rem);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .scene-break__btn:hover {
    background-color: var(--min-color-accent, var(--min-color-primary));
    transform: translateY(-2px);
  }

  /* === Parallax-section dark modifier === */
  .parallax-section--dark {
    color: var(--min-text-on-dark, #fff);
  }

  .parallax-section--dark .parallax-section__overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* === Reduced Motion: disable parallax, show static bg === */
  @media (prefers-reduced-motion: reduce) {
    .ce-parallax-container__bg,
    .scene-break__background,
    .parallax-section__background {
      block-size: 100%;
      inset-block-start: 0;
      animation: none !important;
      transition: none !important;
      transform: none !important;
    }
  }

  /* === Responsive === */
  @media (max-width: 768px) {
    .ce-parallax-container,
    .scene-break,
    .parallax-section {
      --ce-parallax-min-height: 40vh;
    }

    .ce-parallax-container--height-80 { --ce-parallax-min-height: 50vh; }
    .ce-parallax-container--height-100 { --ce-parallax-min-height: 60vh; }

    .ce-parallax-container__content,
    .scene-break__content,
    .parallax-section__content {
      padding-block: var(--min-space-lg);
      text-align: center;
    }

    .ce-parallax-container__body,
    .scene-break__text {
      margin-inline: auto;
    }

    .ce-parallax-container__bg,
    .scene-break__background,
    .parallax-section__background {
      block-size: calc(100% + 10vh);
      inset-block-start: -5vh;
    }
  }
}

/* --- ../../../../content-elements/css/components/parallax.css --- */
/* components/parallax.css
 * Pure CSS Parallax Scrolling Backgrounds
 * BEM: .ce-parallax, .ce-parallax__bg, .ce-parallax__content
 * Uses CSS perspective transform (no JS/GSAP required)
 */
@layer components {
  .ce-parallax {
    --ce-parallax-height: 60vh;
    --ce-parallax-speed: -0.3;
    --ce-parallax-overlay: var(--min-color-primary);
    position: relative;
    min-height: var(--ce-parallax-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ce-parallax__bg {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -2;
  }

  .ce-parallax__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--ce-parallax-overlay);
    opacity: 0.5;
    z-index: -1;
  }

  .ce-parallax__content {
    position: relative;
    z-index: 1;
    padding: var(--min-space-xl) var(--min-container-padding);
    max-width: var(--min-container-max);
    width: 100%;
    color: var(--min-color-bg);
    text-align: center;
  }

  .ce-parallax__content h2,
  .ce-parallax__content h3 {
    color: inherit;
  }

  /* Gentle scale variant (no background-attachment) */
  .ce-parallax--scale .ce-parallax__bg {
    background-attachment: scroll;
    transition: transform 0.1s linear;
  }

  @media (max-width: 768px) {
    .ce-parallax {
      --ce-parallax-height: 40vh;
    }

    /* Mobile: disable fixed attachment (poor iOS support) */
    .ce-parallax__bg {
      background-attachment: scroll;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ce-parallax__bg {
      background-attachment: scroll;
    }
  }
}

/* --- ../../../../content-elements/css/components/project-detail.css --- */
/**
 * Project Detail Components
 * CE-Framework: project-hero, project-intro, project-gallery, project-cta, more-projects
 */

@layer components {
  /* ===== PROJECT HERO ===== */
  .ce-project-hero,
  .project-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding: var(--min-spacing-2xl, 6rem) var(--min-container-padding, 1.5rem) var(--min-spacing-lg, 2rem);
  }

  .ce-project-hero--preview,
  .project-hero--preview {
    height: 50vh;
    min-height: 350px;
  }

  .ce-project-hero__image,
  .project-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .ce-project-hero__image img,
  .project-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Gradient overlay removed per design rules (no gradients on images) */

  .ce-project-hero__content,
  .project-hero__content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    width: 100%;
  }

  .ce-project-hero__label,
  .project-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--min-color-accent, #CD1719);
    color: white;
    padding: 0.5rem 1rem;
    margin-bottom: var(--min-spacing-md, 1rem);
  }

  .ce-project-hero__title,
  .project-hero__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--min-spacing-md, 1rem);
  }

  .ce-project-hero__meta,
  .project-hero__meta {
    font-size: 1rem;
    opacity: 0.8;
  }

  /* ===== PROJECT INTRO ===== */
  .ce-project-intro,
  .project-intro {
    padding: var(--min-spacing-2xl, 6rem) var(--min-container-padding, 1.5rem);
  }

  .ce-project-intro__container,
  .project-intro__container {
    max-width: 900px;
    margin: 0 auto;
  }

  .ce-project-intro__title,
  .project-intro__title {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--min-spacing-md, 1rem);
  }

  .ce-project-intro__text,
  .project-intro__text {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--min-color-muted, #555);
  }

  /* ===== PROJECT GALLERY ===== */
  .ce-project-gallery,
  .project-gallery {
    padding: 0 var(--min-container-padding, 1.5rem) var(--min-spacing-2xl, 6rem);
  }

  .ce-project-gallery__container,
  .project-gallery__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
  }

  .ce-project-gallery__item,
  .project-gallery__item {
    margin-bottom: var(--min-spacing-xl, 4rem);
  }

  .ce-project-gallery__item a,
  .project-gallery__item a {
    display: block;
  }

  .ce-project-gallery__item img,
  .project-gallery__item img {
    width: 100%;
    height: auto;
  }

  .ce-project-gallery__item figcaption,
  .project-gallery__item figcaption {
    display: flex;
    gap: var(--min-spacing-md, 1rem);
    margin-top: var(--min-spacing-md, 1rem);
    font-size: 0.9rem;
    color: var(--min-color-muted, #555);
  }

  .ce-project-gallery__number,
  .project-gallery__number {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--min-color-accent, #CD1719);
  }

  .ce-project-gallery__row,
  .project-gallery__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-lg, 2rem);
  }

  @media (max-width: 768px) {
    .ce-project-gallery__row,
    .project-gallery__row {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ===== PROJECT CTA ===== */
  .ce-project-cta,
  .project-cta {
    padding: var(--min-spacing-2xl, 6rem) var(--min-container-padding, 1.5rem);
    background: var(--min-color-surface, #f5f5f5);
    text-align: center;
  }

  .ce-project-cta__container,
  .project-cta__container {
    max-width: 900px;
    margin: 0 auto;
  }

  .ce-project-cta__title,
  .project-cta__title {
    font-family: var(--min-font-heading, inherit);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: var(--min-spacing-md, 1rem);
  }

  .ce-project-cta__text,
  .project-cta__text {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--min-color-muted, #555);
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .ce-project-cta__buttons,
  .project-cta__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--min-spacing-md, 1rem);
    flex-wrap: wrap;
  }

  .ce-project-cta__button,
  .project-cta__button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 1px solid var(--min-color-primary, #777);
    background: transparent;
    color: var(--min-color-primary, #777);
    transition: var(--min-transition, 200ms ease);
  }

  .ce-project-cta__button--primary,
  .project-cta__button--primary {
    background: var(--min-color-accent, #CD1719);
    border-color: var(--min-color-accent, #CD1719);
    color: white;
  }

  .ce-project-cta__button:hover,
  .project-cta__button:hover {
    background: var(--min-color-primary, #777);
    border-color: var(--min-color-primary, #777);
    color: white;
  }

  .ce-project-cta__button--primary:hover,
  .project-cta__button--primary:hover {
    opacity: 0.9;
  }

  /* ===== MORE PROJECTS ===== */
  .ce-more-projects,
  .more-projects {
    padding: var(--min-spacing-2xl, 6rem) var(--min-container-padding, 1.5rem);
  }

  .ce-more-projects__container,
  .more-projects__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
  }

  .ce-more-projects__title,
  .more-projects__title {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .ce-more-projects__grid,
  .more-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-lg, 2rem);
  }

  .ce-more-projects__item,
  .more-projects__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .ce-more-projects__item img,
  .more-projects__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-transition-slow, 400ms ease);
  }

  .ce-more-projects__item:hover img,
  .more-projects__item:hover img {
    transform: scale(1.05);
  }

  .ce-more-projects__overlay,
  .more-projects__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--min-spacing-lg, 2rem);
    /* Kein Gradient auf Bildern — solider Text-Block */
    background: var(--min-color-text, #1e1e1e);
    color: var(--min-text-on-dark, #ffffff);
    transform: translateY(100%);
    transition: transform var(--min-transition, 200ms ease);
  }

  .ce-more-projects__item:hover .ce-more-projects__overlay,
  .more-projects__item:hover .more-projects__overlay {
    transform: translateY(0);
  }

  @media (max-width: 768px) {
    .ce-more-projects__grid,
    .more-projects__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .ce-more-projects__grid,
    .more-projects__grid {
      grid-template-columns: 1fr;
    }
  }
}

/* --- ../../../../content-elements/css/components/quote.css --- */
/* components/quote.css
 * Blockquote / Testimonial Component
 * BEM: .ce-quote, .ce-quote__text, .ce-quote__author
 */
@layer components {
  .ce-quote {
    --ce-quote-border: var(--min-color-primary);
    --ce-quote-bg: var(--min-color-surface);
    --ce-quote-icon-size: 2.5rem;
    position: relative;
    padding: var(--min-space-lg) var(--min-space-xl);
    border-inline-start: 4px solid var(--ce-quote-border);
    background-color: var(--ce-quote-bg);
    border-radius: 0 var(--min-radius-md) var(--min-radius-md) 0;
  }

  .ce-quote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: var(--min-space-sm);
    inset-inline-start: var(--min-space-md);
    font-size: var(--ce-quote-icon-size);
    line-height: 1;
    color: var(--ce-quote-border);
    opacity: 0.3;
    font-family: Georgia, serif;
  }

  .ce-quote__text {
    font-size: clamp(1.05rem, 1vw + 0.75rem, 1.25rem);
    font-style: italic;
    line-height: var(--min-line-height);
    color: var(--min-color-text);
    max-width: 65ch;
  }

  .ce-quote__author {
    margin-block-start: var(--min-space-md);
    font-style: normal;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-muted);
  }

  .ce-quote__role {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-normal);
    color: var(--min-color-muted);
  }

  .ce-quote--centered {
    text-align: center;
    border-inline-start: none;
    border-radius: var(--min-radius-md);
    border-block-start: 4px solid var(--ce-quote-border);
  }
}

/* --- ../../../../content-elements/css/components/scroll-timeline.css --- */
/* content-elements/css/components/scroll-timeline.css
 * Horizontale oder vertikale Timeline mit scroll-getriggerten Animationen
 * Layout/structure only - GSAP handles scroll animation via JS
 */
@layer components {

  /* === Custom Properties === */
  .ce-scroll-timeline {
    --ce-scroll-timeline-line-color: var(--min-color-accent);
    --ce-scroll-timeline-dot-size: 1rem;
    --ce-scroll-timeline-line-width: 2px;
    --ce-scroll-timeline-gap: var(--min-space-lg);
    --ce-scroll-timeline-stagger: 0.2;
    --ce-scroll-timeline-content-max: 28rem;
  }

  /* === Base Block === */
  .ce-scroll-timeline {
    position: relative;
    padding-block: var(--min-space-section);
  }

  /* === Inner Container === */
  .ce-scroll-timeline__inner {
    max-width: var(--min-container-max);
    margin-inline: auto;
    padding-inline: var(--min-container-padding);
  }

  /* === Header Area === */
  .ce-scroll-timeline__header {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: var(--min-line-height-heading);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-sm);
    text-align: center;
  }

  .ce-scroll-timeline__subheader {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-medium);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--min-color-muted);
    text-align: center;
    margin-block-end: var(--min-space-xl);
  }

  /* === Track (line container) === */
  .ce-scroll-timeline__track {
    position: relative;
  }

  /* === Vertical Layout (default) === */
  .ce-scroll-timeline--vertical .ce-scroll-timeline__track {
    display: flex;
    flex-direction: column;
    gap: var(--ce-scroll-timeline-gap);
    padding-inline-start: calc(var(--ce-scroll-timeline-dot-size) + var(--min-space-lg));
  }

  /* Vertical connector line */
  .ce-scroll-timeline--vertical .ce-scroll-timeline__track::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--ce-scroll-timeline-dot-size) / 2);
    inset-block-start: 0;
    inset-block-end: 0;
    inline-size: var(--ce-scroll-timeline-line-width);
    background-color: var(--ce-scroll-timeline-line-color);
    transform-origin: top;
  }

  /* === Horizontal Layout === */
  .ce-scroll-timeline--horizontal .ce-scroll-timeline__track {
    display: flex;
    flex-direction: row;
    gap: var(--ce-scroll-timeline-gap);
    overflow-x: auto;
    padding-block-end: var(--min-space-lg);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ce-scroll-timeline--horizontal .ce-scroll-timeline__track::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--ce-scroll-timeline-dot-size) / 2);
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: var(--ce-scroll-timeline-line-width);
    background-color: var(--ce-scroll-timeline-line-color);
  }

  /* === Timeline Item === */
  .ce-scroll-timeline__item {
    position: relative;
    flex-shrink: 0;
  }

  .ce-scroll-timeline--horizontal .ce-scroll-timeline__item {
    max-inline-size: var(--ce-scroll-timeline-content-max);
    min-inline-size: 16rem;
    padding-block-start: calc(var(--ce-scroll-timeline-dot-size) + var(--min-space-md));
    scroll-snap-align: start;
  }

  /* === Dot / Icon === */
  .ce-scroll-timeline__dot {
    position: absolute;
    inline-size: var(--ce-scroll-timeline-dot-size);
    block-size: var(--ce-scroll-timeline-dot-size);
    border-radius: var(--min-radius-full);
    background-color: var(--ce-scroll-timeline-line-color);
    border: var(--ce-scroll-timeline-line-width) solid var(--min-color-bg);
    box-shadow: 0 0 0 var(--ce-scroll-timeline-line-width) var(--ce-scroll-timeline-line-color);
    z-index: 1;
  }

  .ce-scroll-timeline--vertical .ce-scroll-timeline__dot {
    inset-inline-start: calc(-1 * (var(--ce-scroll-timeline-dot-size) + var(--min-space-lg)));
    inset-block-start: 0;
  }

  .ce-scroll-timeline--horizontal .ce-scroll-timeline__dot {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  /* === Item Content === */
  .ce-scroll-timeline__title {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-xs);
  }

  .ce-scroll-timeline__date {
    font-family: var(--min-font-body);
    font-size: 0.875rem;
    color: var(--ce-scroll-timeline-line-color);
    font-weight: var(--min-font-weight-medium);
    margin-block-end: var(--min-space-sm);
  }

  .ce-scroll-timeline__description {
    font-family: var(--min-font-body);
    font-size: var(--min-font-size-base);
    line-height: var(--min-line-height);
    color: var(--min-color-muted);
  }

  .ce-scroll-timeline__image {
    margin-block-start: var(--min-space-sm);
    border-radius: var(--min-radius-md);
    overflow: hidden;
  }

  .ce-scroll-timeline__image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
  }

  /* === Alternating Layout === */
  .ce-scroll-timeline--alternating .ce-scroll-timeline__track {
    padding-inline-start: 0;
    align-items: center;
  }

  .ce-scroll-timeline--alternating .ce-scroll-timeline__track::before {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .ce-scroll-timeline--alternating .ce-scroll-timeline__item {
    max-inline-size: 45%;
  }

  .ce-scroll-timeline--alternating .ce-scroll-timeline__item:nth-child(odd) {
    align-self: flex-start;
    text-align: end;
    padding-inline-end: var(--min-space-xl);
  }

  .ce-scroll-timeline--alternating .ce-scroll-timeline__item:nth-child(even) {
    align-self: flex-end;
    padding-inline-start: var(--min-space-xl);
  }

  .ce-scroll-timeline--alternating .ce-scroll-timeline__dot {
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* === Reduced Motion === */
  @media (prefers-reduced-motion: reduce) {
    .ce-scroll-timeline__item,
    .ce-scroll-timeline__dot,
    .ce-scroll-timeline__track::before {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .ce-scroll-timeline--alternating .ce-scroll-timeline__dot {
      transform: translateX(-50%) !important;
    }
  }

  /* === Responsive === */
  @media (max-width: 768px) {
    .ce-scroll-timeline {
      padding-block: var(--min-space-lg);
    }

    /* Alternating collapses to single column on mobile */
    .ce-scroll-timeline--alternating .ce-scroll-timeline__track {
      padding-inline-start: calc(var(--ce-scroll-timeline-dot-size) + var(--min-space-lg));
    }

    .ce-scroll-timeline--alternating .ce-scroll-timeline__track::before {
      inset-inline-start: calc(var(--ce-scroll-timeline-dot-size) / 2);
      transform: none;
    }

    .ce-scroll-timeline--alternating .ce-scroll-timeline__item {
      max-inline-size: 100%;
      align-self: stretch;
      text-align: start;
      padding-inline-start: 0;
      padding-inline-end: 0;
    }

    .ce-scroll-timeline--alternating .ce-scroll-timeline__dot {
      left: auto;
      transform: none;
      inset-inline-start: calc(-1 * (var(--ce-scroll-timeline-dot-size) + var(--min-space-lg)));
    }

    /* Horizontal becomes vertical on mobile */
    .ce-scroll-timeline--horizontal .ce-scroll-timeline__track {
      flex-direction: column;
      overflow-x: visible;
      padding-inline-start: calc(var(--ce-scroll-timeline-dot-size) + var(--min-space-lg));
      padding-block-end: 0;
    }

    .ce-scroll-timeline--horizontal .ce-scroll-timeline__track::before {
      inset-block-start: 0;
      inset-block-end: 0;
      inset-inline-start: calc(var(--ce-scroll-timeline-dot-size) / 2);
      inset-inline-end: auto;
      inline-size: var(--ce-scroll-timeline-line-width);
      block-size: auto;
    }

    .ce-scroll-timeline--horizontal .ce-scroll-timeline__item {
      max-inline-size: 100%;
      min-inline-size: 0;
      padding-block-start: 0;
    }

    .ce-scroll-timeline--horizontal .ce-scroll-timeline__dot {
      inset-block-start: 0;
      inset-inline-start: calc(-1 * (var(--ce-scroll-timeline-dot-size) + var(--min-space-lg)));
    }
  }
}

/* --- ../../../../content-elements/css/components/showroom.css --- */
/* components/showroom.css
 * Showroom / Styleguide Documentation Component
 * BEM: .ce-showroom, .ce-showroom__preview, .ce-showroom__code
 * Modifiers: --with-code, --with-preview, --bordered
 */
@layer components {
  .ce-showroom {
    --ce-showroom-bg: var(--min-color-surface, #f5f5f5);
    --ce-showroom-border: var(--min-color-border, #e0e0e0);
    --ce-showroom-gap: var(--min-spacing-lg, 2rem);
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  .ce-showroom__content {
    margin-block-end: var(--ce-showroom-gap);
  }

  .ce-showroom__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-showroom__text {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-lg, 1.125rem);
    color: var(--min-color-muted, #666);
    line-height: var(--min-line-normal, 1.5);
  }

  /* -- Preview Area --------------------------------------------------------- */

  .ce-showroom__preview {
    background-color: var(--ce-showroom-bg);
    border: 1px solid var(--ce-showroom-border);
    border-radius: var(--min-radius-md, 4px);
    padding: var(--min-spacing-xl, 2rem);
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  /* -- Code Area ------------------------------------------------------------ */

  .ce-showroom__code {
    background-color: var(--min-color-text, #1a1a1a);
    color: var(--min-text-on-dark, #ffffff);
    border-radius: var(--min-radius-md, 4px);
    padding: var(--min-spacing-md, 1rem) var(--min-spacing-lg, 1.5rem);
    overflow-x: auto;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .ce-showroom__code pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* -- Modifier: with-code -------------------------------------------------- */

  .ce-showroom--with-code {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ce-showroom-gap);
  }

  /* -- Modifier: with-preview ----------------------------------------------- */

  .ce-showroom--with-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ce-showroom-gap);
    align-items: start;
  }

  /* -- Modifier: bordered --------------------------------------------------- */

  .ce-showroom--bordered {
    border: 1px solid var(--ce-showroom-border);
    border-radius: var(--min-radius-md, 4px);
    padding: var(--min-spacing-xl, 2rem);
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 767px) {
    .ce-showroom--with-preview {
      grid-template-columns: 1fr;
    }
  }
}

/* --- ../../../../content-elements/css/components/sidebar-card.css --- */
/* components/sidebar-card.css
 * Sidebar Info Card Component
 * BEM: .sidebar-card, .sidebar-card__title
 * Modifiers: --highlight
 * Used in: content-grid--sidebar layouts (detail pages)
 */
@layer components {
  .sidebar-card {
    padding: var(--min-space-lg, 1.5rem);
    background-color: var(--min-color-surface, #f5f5f5);
    border-radius: var(--min-radius-md, 4px);
  }

  .sidebar-card + .sidebar-card {
    margin-block-start: var(--min-space-md, 1rem);
  }

  .sidebar-card__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.15rem, 1vw + 0.5rem, 1.35rem);
    font-weight: var(--min-font-weight-bold, 700);
    color: var(--min-color-primary, #333);
    margin-block-end: var(--min-space-sm, 0.75rem);
    line-height: var(--min-line-height-heading, 1.25);
  }

  .sidebar-card p {
    font-size: 0.9375rem;
    line-height: var(--min-line-height, 1.6);
    margin-block-end: var(--min-space-xs, 0.5rem);
  }

  .sidebar-card p:last-of-type {
    margin-block-end: 0;
  }

  .sidebar-card address {
    font-style: normal;
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .sidebar-card a:not([class]) {
    color: var(--min-color-primary, #333);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--min-color-primary, #333) 30%, transparent);
  }

  .sidebar-card a:not([class]):hover {
    text-decoration-color: var(--min-color-primary, #333);
  }

  .sidebar-card .ce-btn {
    margin-block-start: var(--min-space-md, 1rem);
  }

  /* -- Highlight Modifier --------------------------------------------------- */

  .sidebar-card--highlight {
    border-inline-start: 3px solid var(--min-color-primary, #333);
    background-color: color-mix(in srgb, var(--min-color-primary, #333) 5%, var(--min-color-surface, #f5f5f5));
  }
}

/* --- ../../../../content-elements/css/components/stats.css --- */
/**
 * Stats Component
 * CE-Framework: Statistik-Grid mit animierten Zahlen
 */

@layer components {
  .ce-stats,
  .stats {
    padding: var(--min-spacing-2xl, 6rem) 0;
    background: var(--min-color-surface, #f5f5f5);
  }

  .ce-stats__container,
  .stats__container {
    max-width: var(--min-container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--min-container-padding, 1.5rem);
  }

  .ce-stats__grid,
  .stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--min-spacing-xl, 4rem);
    text-align: center;
  }

  .ce-stats__item,
  .stats__item {
    padding: var(--min-spacing-lg, 2rem);
  }

  .ce-stats__number,
  .stats__number {
    display: block;
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--min-color-accent, #CD1719);
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  .ce-stats__label,
  .stats__label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--min-color-muted, #555);
  }

  @media (max-width: 768px) {
    .ce-stats__grid,
    .stats__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--min-spacing-lg, 2rem);
    }
  }
}

/* --- ../../../../content-elements/css/components/tabs.css --- */
/* components/tabs.css
 * Tab-Navigation Component
 * BEM: .ce-tabs, .ce-tabs__nav, .ce-tabs__panel
 */
@layer components {
  .ce-tabs {
    --ce-tabs-border: var(--min-color-border);
    --ce-tabs-active: var(--min-color-accent);
    --ce-tabs-bg: var(--min-color-bg);
    --ce-tabs-hover: var(--min-color-surface);
  }

  .ce-tabs__nav {
    display: flex;
    gap: var(--min-space-xs);
    border-block-end: 2px solid var(--ce-tabs-border);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .ce-tabs__trigger {
    padding: var(--min-space-sm) var(--min-space-lg);
    border: none;
    background: transparent;
    font-family: var(--min-font-body);
    font-size: var(--min-font-size-base);
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-muted);
    cursor: pointer;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    transition: color var(--min-transition), border-color var(--min-transition);
  }

  .ce-tabs__trigger:hover {
    color: var(--min-color-text);
    background-color: var(--ce-tabs-hover);
  }

  .ce-tabs__trigger[aria-selected="true"],
  .ce-tabs__trigger--active {
    color: var(--ce-tabs-active);
    border-block-end-color: var(--ce-tabs-active);
    font-weight: var(--min-font-weight-bold);
  }

  .ce-tabs__panel {
    padding: var(--min-space-lg) 0;
  }

  .ce-tabs__panel[hidden] {
    display: none;
  }

  @media (max-width: 768px) {
    .ce-tabs__nav {
      gap: 0;
    }

    .ce-tabs__trigger {
      padding: var(--min-space-sm) var(--min-space-md);
      font-size: 0.875rem;
    }
  }
}

/* --- ../../../../content-elements/css/components/team.css --- */
/* components/team.css
 * Team Member Grid Component
 * BEM: .ce-team, .ce-team__member, .ce-team__photo
 */
@layer components {
  .ce-team {
    --ce-team-gap: var(--min-space-lg);
    --ce-team-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--ce-team-cols), 1fr);
    gap: var(--ce-team-gap);
  }

  .ce-team__member {
    text-align: center;
  }

  .ce-team__photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--min-radius-md);
    aspect-ratio: 3 / 4;
    margin-block-end: var(--min-space-md);
  }

  .ce-team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-transition-slow);
  }

  .ce-team__member:hover .ce-team__photo {
    transform: scale(1.05);
  }

  .ce-team__name {
    font-family: var(--min-font-heading);
    font-size: 1.125rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-xs);
  }

  .ce-team__role {
    font-size: 0.875rem;
    color: var(--min-color-accent);
    font-weight: var(--min-font-weight-medium);
    margin-block-end: var(--min-space-sm);
  }

  .ce-team__bio {
    font-size: 0.875rem;
    color: var(--min-color-muted);
    line-height: var(--min-line-height);
    max-width: 40ch;
    margin-inline: auto;
  }

  .ce-team__social {
    display: flex;
    justify-content: center;
    gap: var(--min-space-sm);
    margin-block-start: var(--min-space-sm);
  }

  .ce-team__social a {
    color: var(--min-color-muted);
    transition: color var(--min-transition);
  }

  .ce-team__social a:hover {
    color: var(--min-color-accent);
  }

  @media (max-width: 1024px) {
    .ce-team { --ce-team-cols: 2; }
  }

  @media (max-width: 768px) {
    .ce-team { --ce-team-cols: 1; max-width: 24rem; margin-inline: auto; }
  }
}

/* --- ../../../../content-elements/css/components/teasers.css --- */
@layer components {
  /* ==========================================================================
   * CE Teasers - Linked Preview Cards with Image + Text
   * Base class: .ce-teasers (or .teaser-grid for compat)
   * Modifiers: --2col, --3col, --4col
   * Child: .ce-teasers__card (or .teaser-card for compat)
   * Dependencies: _tokens, _typography
   * ========================================================================== */

  .ce-teasers,
  .teaser-grid {
    display: grid;
    gap: var(--ce-teasers-gap, var(--min-spacing-lg, 1.5rem));
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .ce-teasers--2col,
  .teaser-grid--2col {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .ce-teasers--3col,
  .teaser-grid--3col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .ce-teasers--4col,
  .teaser-grid--4col {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* -- Card ----------------------------------------------------------------- */

  .ce-teasers__card,
  .teaser-card {
    display: flex;
    flex-direction: column;
    background: var(--min-color-bg, #fff);
    border-radius: var(--min-radius-md, 0.5rem);
    overflow: hidden;
    box-shadow: var(--min-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    transition: transform var(--min-transition, 0.3s ease), box-shadow var(--min-transition, 0.3s ease);
  }

  .ce-teasers__card:hover,
  .teaser-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--min-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  }

  /* -- Card Link (full-card clickable) -------------------------------------- */

  .ce-teasers__link,
  .teaser-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  /* -- Card Image ----------------------------------------------------------- */

  .ce-teasers__image,
  .teaser-card__image {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }

  .ce-teasers__image img,
  .teaser-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .ce-teasers__card:hover .ce-teasers__image img,
  .teaser-card:hover .teaser-card__image img {
    transform: scale(1.05);
  }

  /* -- Card Content --------------------------------------------------------- */

  .ce-teasers__content,
  .teaser-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--min-spacing-sm, 0.5rem);
    padding: var(--min-spacing-lg, 1.25rem);
    flex: 1;
  }

  .ce-teasers__title,
  .teaser-card__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: var(--min-font-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-color-text, #1e1e1e);
    margin: 0;
  }

  .ce-teasers__text,
  .teaser-card__text {
    font-size: var(--min-font-sm, 0.9rem);
    line-height: 1.6;
    color: var(--min-text-secondary, #4a4a4a);
    flex: 1;
  }

  .ce-teasers__cta,
  .teaser-card__cta {
    display: inline-block;
    margin-block-start: auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--min-color-primary, #333);
    transition: color var(--min-transition, 0.3s ease);
  }

  .ce-teasers__card:hover .ce-teasers__cta,
  .teaser-card:hover .teaser-card__cta {
    color: var(--min-color-accent, #000);
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 639px) {
    .ce-teasers,
    .teaser-grid,
    .ce-teasers--3col,
    .teaser-grid--3col,
    .ce-teasers--4col,
    .teaser-grid--4col {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ce-teasers__card,
    .teaser-card {
      transition: none;
    }

    .ce-teasers__image img,
    .teaser-card__image img {
      transition: none;
    }
  }
}

/* --- ../../../../content-elements/css/components/testimonial.css --- */
/* components/testimonial.css
 * Testimonial / Kundenstimmen Component
 * BEM: .ce-testimonial, .ce-testimonial__item, .ce-testimonial__quote
 * Modifiers: --grid, --single, --slider, --with-image
 */
@layer components {
  .ce-testimonial {
    --ce-testimonial-columns: 3;
    --ce-testimonial-gap: var(--min-spacing-lg, 2rem);
    --ce-testimonial-quote-color: var(--min-color-accent);
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  .ce-testimonial__content {
    text-align: center;
    margin-block-end: var(--min-spacing-xl, 3rem);
  }

  .ce-testimonial__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-testimonial__text {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-lg, 1.125rem);
    color: var(--min-color-muted, #666);
    line-height: var(--min-line-normal, 1.5);
  }

  /* -- Grid ----------------------------------------------------------------- */

  .ce-testimonial__grid {
    display: grid;
    grid-template-columns: repeat(var(--ce-testimonial-columns), 1fr);
    gap: var(--ce-testimonial-gap);
  }

  /* -- Item ----------------------------------------------------------------- */

  .ce-testimonial__item {
    display: flex;
    flex-direction: column;
    padding: var(--min-spacing-lg, 1.5rem);
    background-color: var(--min-bg-primary, #ffffff);
    border-radius: var(--min-radius-sm, 2px);
    position: relative;
  }

  .ce-testimonial__item::before {
    content: "\201C";
    font-size: 4rem;
    line-height: 1;
    color: var(--ce-testimonial-quote-color);
    font-family: Georgia, serif;
    opacity: 0.4;
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 1rem;
  }

  .ce-testimonial__quote {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    font-style: italic;
    line-height: var(--min-line-normal, 1.6);
    color: var(--min-color-text, #1a1a1a);
    flex: 1;
    margin-block-end: var(--min-spacing-md, 1rem);
    padding-block-start: var(--min-spacing-lg, 2rem);
  }

  .ce-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--min-spacing-sm, 0.75rem);
    margin-block-start: auto;
  }

  .ce-testimonial__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .ce-testimonial__author-info {
    display: flex;
    flex-direction: column;
  }

  .ce-testimonial__name {
    font-family: var(--min-font-heading, inherit);
    font-size: 0.95rem;
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-color-text, #1a1a1a);
  }

  .ce-testimonial__position {
    font-size: 0.8125rem;
    color: var(--min-color-muted, #666);
  }

  /* -- Modifier: Shadow ----------------------------------------------------- */

  .ce-testimonial--grid .ce-testimonial__item {
    box-shadow: var(--min-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  }

  /* -- Modifier: Single ----------------------------------------------------- */

  .ce-testimonial--single {
    text-align: center;
  }

  .ce-testimonial--single .ce-testimonial__grid {
    grid-template-columns: 1fr;
    max-width: 42rem;
    margin-inline: auto;
  }

  .ce-testimonial--single .ce-testimonial__item::before {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .ce-testimonial--single .ce-testimonial__quote {
    font-size: var(--min-font-lg, 1.125rem);
  }

  .ce-testimonial--single .ce-testimonial__author {
    justify-content: center;
  }

  /* -- Modifier: Slider ----------------------------------------------------- */

  .ce-testimonial--slider .ce-testimonial__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--ce-testimonial-gap);
    padding-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .ce-testimonial--slider .ce-testimonial__item {
    min-width: min(100%, 24rem);
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-testimonial__grid {
      --ce-testimonial-columns: 1;
    }
  }

  @media (min-width: 480px) and (max-width: 767px) {
    .ce-testimonial__grid {
      --ce-testimonial-columns: 1;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .ce-testimonial__grid {
      --ce-testimonial-columns: min(var(--ce-testimonial-columns), 2);
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-testimonial--slider .ce-testimonial__grid {
      scroll-behavior: auto;
    }
  }
}

/* --- ../../../../content-elements/css/components/text-reveal.css --- */
/* content-elements/css/components/text-reveal.css
 * Animierte Textenthuellungen mit verschiedenen Effekten
 * Layout/typography structure - GSAP + SplitText handles animation via JS
 */
@layer components {

  /* === Custom Properties === */
  .ce-text-reveal {
    --ce-text-reveal-color: var(--min-color-text);
    --ce-text-reveal-highlight: var(--min-color-accent);
    --ce-text-reveal-duration: 1.5s;
    --ce-text-reveal-stagger: 0.03;
    --ce-text-reveal-font-size: clamp(1.5rem, 4vw, 3rem);
  }

  /* === Base Block === */
  .ce-text-reveal {
    position: relative;
    padding-block: var(--min-space-section);
    overflow: hidden;
  }

  /* === Inner Container === */
  .ce-text-reveal__inner {
    max-width: var(--min-container-max);
    margin-inline: auto;
    padding-inline: var(--min-container-padding);
  }

  /* === Header === */
  .ce-text-reveal__header {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-bold);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: var(--min-line-height-heading);
    color: var(--min-color-muted);
    margin-block-end: var(--min-space-md);
  }

  .ce-text-reveal__subheader {
    font-family: var(--min-font-heading);
    font-weight: var(--min-font-weight-medium);
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    color: var(--min-color-muted);
    margin-block-end: var(--min-space-sm);
  }

  /* === Reveal Text (main animated element) === */
  .ce-text-reveal__text {
    font-family: var(--min-font-heading);
    font-size: var(--ce-text-reveal-font-size);
    line-height: var(--min-line-height-heading);
    color: var(--ce-text-reveal-color);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* GSAP SplitText sets overflow:hidden on line wrappers */
  .ce-text-reveal__text .line {
    overflow: hidden;
  }

  /* === Text Style Modifiers === */
  .ce-text-reveal--headline .ce-text-reveal__text {
    --ce-text-reveal-font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: var(--min-font-weight-bold);
  }

  .ce-text-reveal--display .ce-text-reveal__text {
    --ce-text-reveal-font-size: clamp(2rem, 6vw, 5rem);
    font-weight: var(--min-font-weight-bold);
    letter-spacing: -0.02em;
  }

  .ce-text-reveal--paragraph .ce-text-reveal__text {
    --ce-text-reveal-font-size: clamp(1rem, 2vw, 1.25rem);
    font-family: var(--min-font-body);
    font-weight: var(--min-font-weight-normal);
    line-height: var(--min-line-height);
  }

  .ce-text-reveal--quote .ce-text-reveal__text {
    --ce-text-reveal-font-size: clamp(1.25rem, 3vw, 2rem);
    font-style: italic;
    font-weight: var(--min-font-weight-medium);
    border-inline-start: 3px solid var(--ce-text-reveal-highlight);
    padding-inline-start: var(--min-space-md);
  }

  /* === Highlight Modifier === */
  .ce-text-reveal--highlight .ce-text-reveal__text mark,
  .ce-text-reveal--highlight .ce-text-reveal__text .highlight {
    background: transparent;
    color: var(--ce-text-reveal-highlight);
  }

  /* === Typewriter cursor (visual hint, GSAP controls actual animation) === */
  .ce-text-reveal--typewriter .ce-text-reveal__text::after {
    content: "|";
    color: var(--ce-text-reveal-highlight);
    font-weight: var(--min-font-weight-normal);
    margin-inline-start: 0.05em;
  }

  /* === Reduced Motion === */
  @media (prefers-reduced-motion: reduce) {
    .ce-text-reveal__text,
    .ce-text-reveal__text .char,
    .ce-text-reveal__text .word,
    .ce-text-reveal__text .line {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .ce-text-reveal--typewriter .ce-text-reveal__text::after {
      display: none;
    }
  }

  /* === Responsive === */
  @media (max-width: 768px) {
    .ce-text-reveal {
      padding-block: var(--min-space-lg);
    }

    .ce-text-reveal--display .ce-text-reveal__text {
      letter-spacing: -0.01em;
    }

    .ce-text-reveal--quote .ce-text-reveal__text {
      padding-inline-start: var(--min-space-sm);
    }
  }
}

/* --- ../../../../content-elements/css/components/textmedia.css --- */
@layer components {
  /* ==========================================================================
   * CE Text Media - Text mit Medien
   * Base class: :is(.ce-textmedia, .ce-textpic, .min-textmedia)
   * Modifiers: --media-left, --media-right, --media-top, --media-bottom
   * Dependencies: _tokens, _typography
   *
   * Compat: Legacy Prototypen verwenden .split, .split-section, .text-media
   * ========================================================================== */

  :is(.ce-textmedia, .ce-textpic, .min-textmedia),
  .split,
  .split-section,
  .text-media {
    --ce-textmedia-media-width: 55%;
    --ce-textmedia-gap: 0;

    display: grid;
    gap: var(--ce-textmedia-gap);
    align-items: center;
  }

  .split,
  .split-section {
    min-height: 70vh;
    align-items: stretch;
  }

  /* Container constraint when used as standalone section */
  :is(.ce-textmedia, .ce-textpic, .min-textmedia)[data-ce-type],
  .split[data-ce-type],
  .split-section[data-ce-type],
  .text-media[data-ce-type] {
    padding: var(--min-space-section, 4rem) var(--min-container-padding, 1.5rem);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  /* Kein Doppel-Containment wenn bereits in einem Container */
  .content-section :is(.ce-textmedia, .ce-textpic, .min-textmedia)[data-ce-type],
  .content-section .split[data-ce-type],
  .content-section .split-section[data-ce-type],
  .content-section .text-media[data-ce-type] {
    padding: 0;
    max-width: none;
    margin-inline: 0;
  }

  /* -- Layout: Side-by-side (left/right) ------------------------------------ */

  .ce-textmedia--media-left,
  .ce-textmedia--media-right,
  .text-media--left {
    grid-template-columns: var(--ce-textmedia-media-width) 1fr;
  }

  .split,
  .split-section {
    grid-template-columns: 45% 55%;
  }

  .ce-textmedia--media-right,
  .text-media--right {
    grid-template-columns: 1fr var(--ce-textmedia-media-width);
  }

  .split--reverse,
  .split-section--reverse {
    grid-template-columns: 55% 45%;
  }

  .ce-textmedia--media-right .ce-textmedia__media,
  .split--reverse .split__image,
  .split--reverse .split__media,
  .split-section--reverse .split-section__image,
  .split-section--reverse .split-section__media,
  .text-media--right .text-media__media {
    order: 2;
  }

  .ce-textmedia--media-right .ce-textmedia__content,
  .split--reverse .split__content,
  .split-section--reverse .split-section__content,
  .text-media--right .text-media__content {
    order: 1;
  }

  /* -- Layout: Stacked (top/bottom) ----------------------------------------- */

  .ce-textmedia--media-top,
  .ce-textmedia--media-bottom,
  .text-media--top,
  .text-media--bottom {
    grid-template-columns: 1fr;
  }

  .ce-textmedia--media-bottom .ce-textmedia__media,
  .text-media--bottom .text-media__media {
    order: 2;
  }

  .ce-textmedia--media-bottom .ce-textmedia__content,
  .text-media--bottom .text-media__content {
    order: 1;
  }

  /* -- Width Variants ------------------------------------------------------- */

  .ce-textmedia--w25,
  .split--w25,
  .split-section--w25 {
    --ce-textmedia-media-width: 25%;
  }

  .ce-textmedia--w33,
  .split--w33,
  .split-section--w33 {
    --ce-textmedia-media-width: 33.333%;
  }

  .ce-textmedia--w50,
  .split--w50,
  .split-section--w50 {
    --ce-textmedia-media-width: 50%;
  }

  .ce-textmedia--w67,
  .split--w67,
  .split-section--w67 {
    --ce-textmedia-media-width: 66.666%;
  }

  /* -- Media ---------------------------------------------------------------- */

  .ce-textmedia__media,
  .split__image,
  .split__media,
  .split-section__image,
  .split-section__media,
  .text-media__media {
    overflow: hidden;
    border-radius: var(--min-radius-md, 0.5rem);
  }

  .split__image,
  .split-section__image {
    border-radius: 0;
  }

  .ce-textmedia__media img,
  .ce-textmedia__media video,
  .split__image img,
  .split__image video,
  .split__media img,
  .split__media video,
  .split-section__image img,
  .split-section__image video,
  .split-section__media img,
  .split-section__media video,
  .text-media__media img,
  .text-media__media video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--min-radius-md, 0.5rem);
  }

  .split__image img,
  .split-section__image img {
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* -- Content -------------------------------------------------------------- */

  .ce-textmedia__content,
  .split__content,
  .split-section__content,
  .text-media__content {
    display: flex;
    flex-direction: column;
    gap: var(--min-spacing-md, 1rem);
  }

  .split__content,
  .split-section__content {
    justify-content: center;
    padding: var(--min-spacing-2xl, 6rem) var(--min-spacing-xl, 4rem);
  }

  .ce-textmedia__title,
  .split__title,
  .split-section__title,
  .text-media__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-color-primary, #333);
  }

  .ce-textmedia__text,
  .split__text,
  .split-section__text,
  .text-media__text {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    line-height: 1.8;
    color: var(--min-color-muted, #555);
  }

  .split__text,
  .split-section__text {
    max-width: 480px;
  }

  .ce-textmedia__text > *:last-child,
  .split__text > *:last-child,
  .split-section__text > *:last-child,
  .text-media__text > *:last-child {
    margin-block-end: 0;
  }

  /* -- Decorative Elements ------------------------------------------------- */

  .ce-textmedia__number,
  .split__number,
  .split-section__number {
    font-family: var(--min-font-body, monospace);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--min-color-accent, #CD1719);
    opacity: 0.9;
    margin-block-end: var(--min-spacing-xs, 0.25rem);
  }

  .ce-textmedia__cta,
  .split__cta,
  .split-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: var(--min-spacing-sm, 0.5rem);
    padding: 0.875rem 1.5rem;
    font-family: var(--min-font-body, inherit);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--min-color-bg, #ffffff);
    background-color: var(--min-color-accent, #CD1719);
    border: none;
    border-radius: var(--min-radius-sm, 2px);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .ce-textmedia__cta:hover,
  .split__cta:hover,
  .split-section__cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .split__cta::after,
  .split-section__cta::after {
    content: '\2192';
    font-size: 1rem;
    transition: transform var(--min-transition-fast, 100ms ease);
  }

  .split__cta:hover::after,
  .split-section__cta:hover::after {
    transform: translateX(3px);
  }

  /* -- Split List (elegant no-bullet) --------------------------------------- */

  .ce-textmedia__list,
  .split__list,
  .split-section__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--min-spacing-md, 1rem) 0;
  }

  .ce-textmedia__list li,
  .split__list li,
  .split-section__list li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.5rem;
    font-size: 0.95rem;
    color: var(--min-color-muted, #444);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .ce-textmedia__list li:last-child,
  .split__list li:last-child,
  .split-section__list li:last-child {
    border-bottom: none;
  }

  .ce-textmedia__list li::before,
  .split__list li::before,
  .split-section__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--min-color-accent, #CD1719);
    border-radius: 50%;
  }

  /* -- Statement / Blockquote Variant --------------------------------------- */

  .statement {
    padding: var(--min-space-section, 4rem) var(--min-spacing-lg, 2rem);
    background: var(--min-color-surface, #f8f9fa);
    text-align: center;
  }

  .statement__container {
    max-width: 48rem;
    margin-inline: auto;
  }

  .statement__quote {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-style: italic;
    line-height: var(--min-line-normal, 1.5);
    color: var(--min-color-text, #555);
    border: none;
    padding: 0;
    margin: 0;
  }

  .statement__quote p {
    margin: 0;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 767px) {
    .ce-textmedia--media-left,
    .ce-textmedia--media-right,
    .split,
    .split--reverse,
    .split-section,
    .split-section--reverse,
    .text-media--left,
    .text-media--right {
      grid-template-columns: 1fr;
    }

    .ce-textmedia--media-right .ce-textmedia__media,
    .split--reverse .split__image,
    .split--reverse .split__media,
    .split-section--reverse .split-section__image,
    .split-section--reverse .split-section__media,
    .text-media--right .text-media__media {
      order: -1;
    }

    .ce-textmedia--media-right .ce-textmedia__content,
    .split--reverse .split__content,
    .split-section--reverse .split-section__content,
    .text-media--right .text-media__content {
      order: unset;
    }

    :is(.ce-textmedia, .ce-textpic, .min-textmedia),
    .split,
    .split-section,
    .text-media {
      --ce-textmedia-gap: var(--min-spacing-lg, 2rem);
    }
  }

  @media (min-width: 1024px) {
    :is(.ce-textmedia, .ce-textpic, .min-textmedia),
    .split,
    .split-section,
    .text-media {
      --ce-textmedia-gap: var(--min-spacing-2xl, 4rem);
    }
  }
}

/* --- ../../../../content-elements/css/components/timeline.css --- */
/* components/timeline.css
 * Timeline / History Component
 * BEM: .ce-timeline, .ce-timeline__item, .ce-timeline__content
 */
@layer components {
  .ce-timeline {
    --ce-timeline-line: var(--min-color-border);
    --ce-timeline-dot: var(--min-color-accent);
    --ce-timeline-dot-size: 1rem;
    position: relative;
    padding-inline-start: var(--min-space-xl);
  }

  .ce-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--ce-timeline-dot-size) / 2 - 1px);
    inset-block: 0;
    width: 2px;
    background-color: var(--ce-timeline-line);
  }

  .ce-timeline__item {
    position: relative;
    padding-block-end: var(--min-space-xl);
  }

  .ce-timeline__item:last-child {
    padding-block-end: 0;
  }

  .ce-timeline__dot {
    position: absolute;
    inset-inline-start: calc(-1 * var(--min-space-xl) + (var(--ce-timeline-dot-size) / 2 - var(--ce-timeline-dot-size) / 2));
    inset-inline-start: calc(-1 * var(--min-space-xl));
    inset-block-start: 0.25rem;
    width: var(--ce-timeline-dot-size);
    height: var(--ce-timeline-dot-size);
    border-radius: var(--min-radius-full);
    background-color: var(--ce-timeline-dot);
    border: 2px solid var(--min-color-bg);
    box-shadow: 0 0 0 2px var(--ce-timeline-dot);
  }

  .ce-timeline__date {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--ce-timeline-dot);
    margin-block-end: var(--min-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .ce-timeline__title {
    font-family: var(--min-font-heading);
    font-size: 1.25rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-sm);
  }

  .ce-timeline__text {
    color: var(--min-color-muted);
    line-height: var(--min-line-height);
    max-width: 60ch;
  }

  @media (min-width: 768px) {
    .ce-timeline--centered {
      padding-inline-start: 0;
    }

    .ce-timeline--centered::before {
      inset-inline-start: 50%;
    }

    .ce-timeline--centered .ce-timeline__item:nth-child(odd) {
      padding-inline-end: calc(50% + var(--min-space-xl));
      text-align: end;
    }

    .ce-timeline--centered .ce-timeline__item:nth-child(even) {
      padding-inline-start: calc(50% + var(--min-space-xl));
    }

    .ce-timeline--centered .ce-timeline__dot {
      inset-inline-start: calc(50% - var(--ce-timeline-dot-size) / 2);
    }
  }
}

/* --- ../../../../content-elements/css/components/video-background.css --- */
/* components/video-background.css
 * Full-Width Video Background Component
 * BEM: .ce-video-bg, .ce-video-bg__video, .ce-video-bg__content
 */
@layer components {
  .ce-video-bg {
    --ce-video-bg-height: 70vh;
    --ce-video-bg-overlay: var(--min-color-primary);
    --ce-video-bg-overlay-opacity: 0.55;
    position: relative;
    min-height: var(--ce-video-bg-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ce-video-bg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }

  .ce-video-bg__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--ce-video-bg-overlay);
    opacity: var(--ce-video-bg-overlay-opacity);
    z-index: -1;
  }

  .ce-video-bg__content {
    position: relative;
    z-index: 1;
    padding: var(--min-space-xl) var(--min-container-padding);
    max-width: var(--min-container-max);
    width: 100%;
    color: var(--min-color-bg);
    text-align: center;
  }

  .ce-video-bg__content h1,
  .ce-video-bg__content h2 {
    color: inherit;
  }

  .ce-video-bg__fallback {
    display: none;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
  }

  @media (max-width: 768px) {
    .ce-video-bg {
      --ce-video-bg-height: 50vh;
    }

    /* Mobile: show poster image, hide video */
    .ce-video-bg__video {
      display: none;
    }

    .ce-video-bg__fallback {
      display: block;
    }
  }
}

/* --- ../../../../content-elements/css/components/video.css --- */
@layer components {
  /* ==========================================================================
   * CE Video - DSGVO-konformer Video-Embed
   * Base class: .ce-video
   * Modifiers: --fullwidth, --contained, --rounded
   * Dependencies: _tokens, _typography
   * ========================================================================== */

  .ce-video {
    --ce-video-aspect-ratio: 16 / 9;
    --ce-video-max-width: 100%;
    --ce-video-radius: var(--min-radius-md, 0.5rem);
  }

  .ce-video__title {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--min-weight-bold, 700);
    line-height: var(--min-line-tight, 1.25);
    color: var(--min-text-primary, #1e1e1e);
    margin-block-end: var(--min-spacing-lg, 2rem);
  }

  /* -- Wrapper -------------------------------------------------------------- */

  .ce-video__wrapper {
    position: relative;
    max-width: var(--ce-video-max-width);
    aspect-ratio: var(--ce-video-aspect-ratio);
    overflow: hidden;
    border-radius: var(--ce-video-radius);
    background-color: var(--min-bg-dark, #1e1e1e);
  }

  .ce-video__wrapper video,
  .ce-video__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  .ce-video__wrapper video {
    object-fit: cover;
  }

  /* -- Poster / Consent Overlay --------------------------------------------- */

  .ce-video__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ce-video__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ce-video__play-button {
    position: absolute;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    border: none;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.9);
    color: var(--min-text-primary, #1e1e1e);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .ce-video__play-button:hover {
    background-color: var(--min-bg-primary, #ffffff);
    transform: scale(1.1);
  }

  .ce-video__play-button:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  .ce-video__play-button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.75rem 0 0.75rem 1.25rem;
    border-color: transparent transparent transparent currentColor;
    margin-inline-start: 0.25rem;
  }

  /* -- Consent (DSGVO) ------------------------------------------------------ */

  .ce-video__consent {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--min-spacing-md, 1rem);
    padding: var(--min-spacing-lg, 2rem);
    background-color: var(--min-bg-secondary, #f8f9fa);
    text-align: center;
  }

  .ce-video__consent-text {
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    color: var(--min-text-secondary, #4a4a4a);
    line-height: var(--min-line-normal, 1.5);
    max-width: 30rem;
  }

  .ce-video__consent-button {
    padding: var(--min-spacing-sm, 0.75rem) var(--min-spacing-lg, 2rem);
    font-family: var(--min-font-body, inherit);
    font-size: var(--min-font-base, 1rem);
    font-weight: var(--min-weight-semibold, 600);
    color: var(--min-text-on-dark, #ffffff);
    background-color: var(--min-color-primary);
    border: none;
    border-radius: var(--min-radius-md, 0.5rem);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .ce-video__consent-button:hover {
    background-color: color-mix(in srgb, var(--min-color-primary) 80%, black);
  }

  .ce-video__consent-button:focus-visible {
    outline: 3px solid var(--min-focus);
    outline-offset: 2px;
  }

  /* -- Modifiers ------------------------------------------------------------ */

  .ce-video--fullwidth {
    --ce-video-max-width: 100%;
    --ce-video-radius: 0;
  }

  .ce-video--contained {
    --ce-video-max-width: 48rem;
    margin-inline: auto;
  }

  .ce-video--rounded {
    --ce-video-radius: var(--min-radius-lg, 0.75rem);
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 479px) {
    .ce-video__play-button {
      width: 3rem;
      height: 3rem;
    }

    .ce-video__play-button::after {
      border-width: 0.5rem 0 0.5rem 0.875rem;
    }

    .ce-video__consent {
      padding: var(--min-spacing-md, 1rem);
    }
  }

  @media (min-width: 768px) {
    .ce-video__play-button {
      width: 5rem;
      height: 5rem;
    }

    .ce-video__play-button::after {
      border-width: 1rem 0 1rem 1.625rem;
    }
  }

  /* -- Reduced Motion ------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .ce-video__play-button,
    .ce-video__consent-button {
      transition: none;
    }

    .ce-video__play-button:hover {
      transform: none;
    }
  }
}


/* === Modules (auto-discovered) === */
/* --- ../../../../content-elements/css/modules/a11y/contrast.css --- */
/* modules/a11y/contrast.css
 * High Contrast Modes
 * Data-attribute driven: [data-a11y-contrast="high|inverted"]
 */
@layer modules {
  /* === High Contrast Mode === */
  [data-a11y-contrast="high"] {
    --min-color-text: #000;
    --min-color-bg: #fff;
    --min-color-muted: #333;
    --min-color-surface: #f0f0f0;
    --min-color-border: #000;
    --min-color-primary: #000;
    --min-color-accent: #0000cc;
  }

  [data-a11y-contrast="high"] a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  [data-a11y-contrast="high"] button,
  [data-a11y-contrast="high"] [role="button"] {
    border: 2px solid currentColor;
  }

  [data-a11y-contrast="high"] img {
    filter: contrast(1.1);
  }

  /* === Inverted Mode === */
  [data-a11y-contrast="inverted"] {
    --min-color-text: #e5e5e5;
    --min-color-bg: #111;
    --min-color-muted: #aaa;
    --min-color-surface: #222;
    --min-color-border: #555;
    --min-color-primary: #e5e5e5;
    --min-color-accent: #6699ff;
  }

  [data-a11y-contrast="inverted"] img {
    filter: brightness(0.9);
  }

  /* === Windows High Contrast (forced-colors) === */
  @media (forced-colors: active) {
    .min-a11y-contrast-toggle {
      border: 1px solid ButtonText;
    }

    a {
      text-decoration: underline;
    }
  }

  /* Toggle button styling */
  .min-a11y-contrast-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--min-transition);
  }

  .min-a11y-contrast-toggle:hover {
    background-color: var(--min-color-border);
  }

  .min-a11y-contrast-toggle[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border-color: var(--min-color-accent);
  }
}

/* --- ../../../../content-elements/css/modules/a11y/focus.css --- */
/* modules/a11y/focus.css
 * Enhanced Focus Management / Indicators
 * Data-attribute: [data-a11y-focus="enhanced"]
 */
@layer modules {
  /* === Enhanced focus indicators === */
  [data-a11y-focus="enhanced"] :focus-visible {
    outline: 3px solid var(--min-color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  [data-a11y-focus="enhanced"] a:focus-visible {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    outline: none;
    padding-inline: 0.15em;
    border-radius: var(--min-radius-sm);
    text-decoration: none;
  }

  [data-a11y-focus="enhanced"] button:focus-visible,
  [data-a11y-focus="enhanced"] [role="button"]:focus-visible {
    outline-width: 3px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--min-color-accent) 25%, transparent);
  }

  [data-a11y-focus="enhanced"] input:focus-visible,
  [data-a11y-focus="enhanced"] textarea:focus-visible,
  [data-a11y-focus="enhanced"] select:focus-visible {
    outline: 3px solid var(--min-color-accent);
    outline-offset: 0;
    border-color: var(--min-color-accent);
  }

  /* === Focus trap indicator (modal context) === */
  .min-a11y-focus-trap {
    position: relative;
  }

  .min-a11y-focus-trap::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px dashed var(--min-color-accent);
    border-radius: var(--min-radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--min-transition);
  }

  .min-a11y-focus-trap:focus-within::before {
    opacity: 0.5;
  }
}

/* --- ../../../../content-elements/css/modules/a11y/reduced-motion.css --- */
/* modules/a11y/reduced-motion.css
 * Reduced Motion Preferences
 * System + manual toggle via [data-a11y-motion="reduced"]
 */
@layer modules {
  /* === Manual toggle override === */
  [data-a11y-motion="reduced"] *,
  [data-a11y-motion="reduced"] *::before,
  [data-a11y-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-a11y-motion="reduced"] {
    scroll-behavior: auto;
  }

  /* Disable parallax/video in reduced motion */
  [data-a11y-motion="reduced"] .ce-parallax__bg {
    background-attachment: scroll;
  }

  [data-a11y-motion="reduced"] .ce-video-bg__video {
    display: none;
  }

  [data-a11y-motion="reduced"] .ce-video-bg__fallback {
    display: block;
  }

  /* Motion toggle button */
  .min-a11y-motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.01ms;
  }

  .min-a11y-motion-toggle[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border-color: var(--min-color-accent);
  }
}

/* --- ../../../../content-elements/css/modules/a11y/skip-links.css --- */
/* modules/a11y/skip-links.css
 * Skip Navigation Links
 * BEM: .min-skip-links, .min-skip-links__link
 */
@layer modules {
  .min-skip-links {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--min-z-modal);
    display: flex;
    gap: var(--min-space-xs);
    padding: var(--min-space-sm);
  }

  .min-skip-links__link,
  .skip-link {
    position: absolute;
    transform: translateY(-200%);
    padding: var(--min-space-sm, 0.5rem) var(--min-space-lg, 1.25rem);
    background-color: var(--min-color-accent, #333);
    color: var(--min-color-bg, #fff);
    font-weight: var(--min-font-weight-bold, 700);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 var(--min-radius-md, 0.5rem) var(--min-radius-md, 0.5rem);
    white-space: nowrap;
    transition: transform var(--min-transition-fast, 0.15s ease);
    z-index: 9999;
  }

  .min-skip-links__link:focus,
  .skip-link:focus {
    position: relative;
    transform: translateY(0);
    outline: 2px solid var(--min-color-text, #1e1e1e);
    outline-offset: 2px;
  }

  /* Target highlight when skip link activates */
  :target {
    scroll-margin-block-start: var(--min-space-xl);
  }

  :target::before {
    content: "";
    display: block;
    height: 0;
  }
}

/* --- ../../../../content-elements/css/modules/a11y/style-switcher.css --- */
/* modules/a11y/style-switcher.css
 * Font Size / Style Switcher
 * Data-attributes: [data-a11y-fontsize], [data-a11y-font], [data-a11y-spacing]
 */
@layer modules {
  /* === Font Size Steps === */
  [data-a11y-fontsize="large"] {
    --min-font-size-base: 1.15rem;
  }

  [data-a11y-fontsize="xlarge"] {
    --min-font-size-base: 1.3rem;
  }

  [data-a11y-fontsize="xxlarge"] {
    --min-font-size-base: 1.5rem;
  }

  /* === Readable Font (Dyslexia-friendly) === */
  [data-a11y-font="readable"] {
    --min-font-body: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif;
    --min-line-height: 1.8;
  }

  /* === Monospace Mode === */
  [data-a11y-font="mono"] {
    --min-font-body: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  }

  /* === Wide Spacing Mode === */
  [data-a11y-spacing="wide"] {
    --min-line-height: 2;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
  }

  /* === Style Switcher UI === */
  .min-a11y-style-switcher {
    display: flex;
    align-items: center;
    gap: var(--min-space-sm);
    flex-wrap: wrap;
  }

  .min-a11y-style-switcher__label {
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-text);
  }

  .min-a11y-style-switcher__btn {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--min-space-xs) var(--min-space-sm);
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--min-transition);
  }

  .min-a11y-style-switcher__btn:hover {
    background-color: var(--min-color-border);
  }

  .min-a11y-style-switcher__btn[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border-color: var(--min-color-accent);
  }
}

/* --- ../../../../content-elements/css/modules/a11y/toolbar.css --- */
/* modules/a11y/toolbar.css
 * Accessibility Toolbar - Floating A11y Controls
 * BEM: 

  

  .min-a11y-toolbar__btn:hover {
    background-color: var(--min-color-surface);
    color: var(--min-color-accent);
  }

  .min-a11y-toolbar__btn[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
  }

  .min-a11y-toolbar__btn svg,
  .min-a11y-toolbar__btn img {
    width: 1.25rem;
    height: 1.25rem;
  }

  

  .min-a11y-toolbar__btn:hover 

  /* Collapsed / toggle state */
  .min-a11y-toolbar--collapsed .min-a11y-toolbar__btn:not(.min-a11y-toolbar__toggle) {
    display: none;
  }

  @media (max-width: 768px) {
    

    
  }
}

/* --- ../../../../content-elements/css/modules/a11y/voice-reader.css --- */
/* modules/a11y/voice-reader.css
 * Screen Reader Helpers & Voice Reader Highlights
 * BEM: .min-a11y-voice-*, utility classes
 */
@layer modules {
  /* === Reading highlight (active sentence/word) === */
  .min-a11y-voice-highlight {
    background-color: color-mix(in srgb, var(--min-color-accent) 20%, transparent);
    outline: 2px solid var(--min-color-accent);
    outline-offset: 2px;
    border-radius: var(--min-radius-sm);
  }

  .min-a11y-voice-word {
    background-color: color-mix(in srgb, var(--min-color-accent) 35%, transparent);
    border-radius: 2px;
    padding-inline: 0.1em;
  }

  /* === Voice reader control bar === */
  .min-a11y-voice-controls {
    position: fixed;
    inset-block-end: var(--min-space-lg);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: var(--min-z-overlay);
    display: flex;
    align-items: center;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: var(--min-color-bg);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-full);
    box-shadow: var(--min-shadow-lg);
  }

  .min-a11y-voice-controls__btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--min-radius-full);
    color: var(--min-color-text);
    cursor: pointer;
    transition: background-color var(--min-transition), color var(--min-transition);
  }

  .min-a11y-voice-controls__btn:hover {
    background-color: var(--min-color-surface);
    color: var(--min-color-accent);
  }

  .min-a11y-voice-controls__btn[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
  }

  .min-a11y-voice-controls__speed {
    font-size: 0.75rem;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-muted);
    min-width: 3rem;
    text-align: center;
  }
}

/* --- ../../../../content-elements/css/modules/accessible-video.css --- */
/* modules/accessible-video.css
 * Accessible Video Player
 * BEM: .min-video, .min-video__player, .min-video__controls
 */
@layer modules {
  .min-video {
    position: relative;
    background-color: var(--min-color-text);
    border-radius: var(--min-radius-md);
    overflow: hidden;
  }

  .min-video__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
  }

  /* === Custom Controls === */
  .min-video__controls {
    display: flex;
    align-items: center;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: color-mix(in srgb, var(--min-color-text) 85%, transparent);
    color: var(--min-color-bg);
  }

  .min-video__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: none;
    border-radius: var(--min-radius-sm);
    color: inherit;
    cursor: pointer;
    transition: background-color var(--min-transition);
  }

  .min-video__btn:hover {
    background-color: color-mix(in srgb, var(--min-color-bg) 15%, transparent);
  }

  .min-video__btn:focus-visible {
    outline: 2px solid var(--min-color-accent);
    outline-offset: 2px;
  }

  /* === Progress Bar === */
  .min-video__progress {
    flex: 1;
    height: 0.375rem;
    appearance: none;
    background-color: color-mix(in srgb, var(--min-color-bg) 25%, transparent);
    border-radius: var(--min-radius-full);
    cursor: pointer;
  }

  .min-video__progress::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--min-color-accent);
    border-radius: var(--min-radius-full);
    border: 2px solid var(--min-color-bg);
  }

  .min-video__time {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    min-width: 5rem;
    text-align: center;
  }

  /* === Captions === */
  .min-video__captions {
    position: absolute;
    inset-block-end: 4rem;
    inset-inline: var(--min-space-lg);
    text-align: center;
    pointer-events: none;
  }

  .min-video__caption-text {
    display: inline;
    padding: var(--min-space-xs) var(--min-space-sm);
    background-color: color-mix(in srgb, var(--min-color-text) 80%, transparent);
    color: var(--min-color-bg);
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    border-radius: var(--min-radius-sm);
    box-decoration-break: clone;
  }

  /* === Transcript Toggle === */
  .min-video__transcript {
    padding: var(--min-space-md);
    background-color: var(--min-color-surface);
    border-block-start: 1px solid var(--min-color-border);
    max-height: 12rem;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: var(--min-line-height);
    color: var(--min-color-text);
  }

  .min-video__transcript[hidden] {
    display: none;
  }

  .min-video__transcript-line {
    padding: var(--min-space-xs) 0;
    border-block-end: 1px solid var(--min-color-border);
  }

  .min-video__transcript-time {
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-accent);
    margin-inline-end: var(--min-space-sm);
    font-variant-numeric: tabular-nums;
  }
}

/* --- ../../../../content-elements/css/modules/chat-widget.css --- */
/* modules/chat-widget.css
 * Chat Widget Overlay
 * BEM: .min-chat, .min-chat__window, .min-chat__messages
 */
@layer modules {
  /* === Trigger Button === */
  .min-chat__trigger {
    position: fixed;
    inset-block-end: var(--min-space-lg);
    inset-inline-end: var(--min-space-lg);
    z-index: var(--min-z-overlay);
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border: none;
    border-radius: var(--min-radius-full);
    cursor: pointer;
    box-shadow: var(--min-shadow-lg);
    transition: background-color var(--min-transition), transform var(--min-transition);
  }

  .min-chat__trigger:hover {
    background-color: var(--min-color-primary);
    transform: scale(1.05);
  }

  .min-chat__badge {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--min-color-primary);
    color: var(--min-color-bg);
    font-size: 0.625rem;
    font-weight: var(--min-font-weight-bold);
    border-radius: var(--min-radius-full);
  }

  /* === Chat Window === */
  .min-chat__window {
    position: fixed;
    inset-block-end: calc(var(--min-space-lg) + 4.5rem);
    inset-inline-end: var(--min-space-lg);
    z-index: var(--min-z-overlay);
    width: min(24rem, calc(100vw - 2 * var(--min-space-lg)));
    max-height: 32rem;
    display: flex;
    flex-direction: column;
    background-color: var(--min-color-bg);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-lg);
    box-shadow: var(--min-shadow-xl);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem) scale(0.95);
    transition:
      opacity var(--min-transition),
      visibility var(--min-transition),
      transform var(--min-transition);
  }

  .min-chat__window[data-open="true"],
  .min-chat__window--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .min-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--min-space-md);
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
  }

  .min-chat__title {
    font-weight: var(--min-font-weight-bold);
    font-size: 0.875rem;
  }

  .min-chat__close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--min-space-xs);
  }

  /* === Messages === */
  .min-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--min-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--min-space-sm);
  }

  .min-chat__msg {
    max-width: 80%;
    padding: var(--min-space-sm) var(--min-space-md);
    border-radius: var(--min-radius-md);
    font-size: 0.875rem;
    line-height: var(--min-line-height);
  }

  .min-chat__msg--incoming {
    align-self: flex-start;
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
  }

  .min-chat__msg--outgoing {
    align-self: flex-end;
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
  }

  /* === Input === */
  .min-chat__input-wrap {
    display: flex;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    border-block-start: 1px solid var(--min-color-border);
  }

  .min-chat__input {
    flex: 1;
    padding: var(--min-space-sm);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    font-size: 0.875rem;
    background-color: var(--min-color-bg);
    color: var(--min-color-text);
  }

  .min-chat__send {
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border: none;
    border-radius: var(--min-radius-sm);
    cursor: pointer;
    font-weight: var(--min-font-weight-medium);
    transition: background-color var(--min-transition);
  }

  .min-chat__send:hover {
    background-color: var(--min-color-primary);
  }
}

/* --- ../../../../content-elements/css/modules/easytext.css --- */
/* modules/easytext.css
 * Easy Language / Simple Text Mode
 * Data-attribute: [data-a11y-easytext="active"]
 * BEM: .min-easytext, .min-easytext__toggle
 */
@layer modules {
  /* === Easy text mode active === */
  [data-a11y-easytext="active"] {
    --min-font-size-base: 1.2rem;
    --min-line-height: 2;
  }

  [data-a11y-easytext="active"] p,
  [data-a11y-easytext="active"] li,
  [data-a11y-easytext="active"] td {
    max-width: 55ch;
    word-spacing: 0.1em;
  }

  [data-a11y-easytext="active"] h1,
  [data-a11y-easytext="active"] h2,
  [data-a11y-easytext="active"] h3 {
    margin-block-end: var(--min-space-md);
  }

  /* Hide complex content in easy mode */
  [data-a11y-easytext="active"] [data-complexity="high"] {
    display: none;
  }

  /* Show simplified alternatives */
  [data-easytext-alt] {
    display: none;
  }

  [data-a11y-easytext="active"] [data-easytext-alt] {
    display: block;
  }

  [data-a11y-easytext="active"] [data-easytext-original] {
    display: none;
  }

  /* === Easy Language Badge === */
  .min-easytext__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--min-space-xs);
    padding: var(--min-space-xs) var(--min-space-sm);
    background-color: var(--min-color-surface);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-full);
    font-size: 0.75rem;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-muted);
  }

  /* === Toggle Button === */
  .min-easytext__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--min-space-sm);
    padding: var(--min-space-sm) var(--min-space-md);
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--min-transition);
  }

  .min-easytext__toggle:hover {
    background-color: var(--min-color-border);
  }

  .min-easytext__toggle[aria-pressed="true"] {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border-color: var(--min-color-accent);
  }
}

/* --- ../../../../content-elements/css/modules/extensions/ke-search.css --- */
/* modules/extensions/ke-search.css
 * ke_search Styling
 * BEM: .min-search, .min-search__form, .min-search__results
 */
@layer modules {
  /* === Search Form === */
  .min-search__form {
    display: flex;
    gap: var(--min-space-sm);
    max-width: 40rem;
    margin-block-end: var(--min-space-xl);
  }

  .min-search__input {
    flex: 1;
    padding: var(--min-space-sm) var(--min-space-md);
    font-size: var(--min-font-size-base);
    border: 2px solid var(--min-color-border);
    border-radius: var(--min-radius-md);
    background-color: var(--min-color-bg);
    color: var(--min-color-text);
    transition: border-color var(--min-transition);
  }

  .min-search__input:focus {
    border-color: var(--min-color-accent);
    outline: none;
  }

  .min-search__input::placeholder {
    color: var(--min-color-muted);
  }

  .min-search__submit {
    padding: var(--min-space-sm) var(--min-space-lg);
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border: none;
    border-radius: var(--min-radius-md);
    font-weight: var(--min-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--min-transition);
  }

  .min-search__submit:hover {
    background-color: var(--min-color-primary);
  }

  /* === Filters === */
  .min-search__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--min-space-sm);
    margin-block-end: var(--min-space-lg);
  }

  .min-search__filter-btn {
    padding: var(--min-space-xs) var(--min-space-md);
    background-color: var(--min-color-surface);
    color: var(--min-color-text);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-full);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--min-transition), border-color var(--min-transition);
  }

  .min-search__filter-btn:hover,
  .min-search__filter-btn--active {
    background-color: var(--min-color-accent);
    color: var(--min-color-bg);
    border-color: var(--min-color-accent);
  }

  /* === Results === */
  .min-search__results {
    display: flex;
    flex-direction: column;
    gap: var(--min-space-lg);
  }

  .min-search__result-item {
    padding-block-end: var(--min-space-lg);
    border-block-end: 1px solid var(--min-color-border);
  }

  .min-search__result-title {
    font-size: 1.125rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--min-color-accent);
    margin-block-end: var(--min-space-xs);
  }

  .min-search__result-snippet {
    font-size: 0.875rem;
    color: var(--min-color-muted);
    line-height: var(--min-line-height);
  }

  .min-search__result-snippet mark {
    background-color: color-mix(in srgb, var(--min-color-accent) 20%, transparent);
    color: var(--min-color-text);
    padding-inline: 0.1em;
    border-radius: 2px;
  }

  .min-search__no-results {
    text-align: center;
    padding: var(--min-space-xl);
    color: var(--min-color-muted);
  }
}

/* --- ../../../../content-elements/css/modules/extensions/news.css --- */
/* modules/extensions/news.css
 * TYPO3 ext:news Styling
 * BEM: .min-news-list, .min-news-detail, .min-news-card
 */
@layer modules {
  /* === News List View === */
  .min-news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-space-lg);
  }

  .min-news-card {
    display: flex;
    flex-direction: column;
    background-color: var(--min-color-bg);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-md);
    overflow: hidden;
    transition: box-shadow var(--min-transition), transform var(--min-transition);
  }

  .min-news-card:hover {
    box-shadow: var(--min-shadow-md);
    transform: translateY(-2px);
  }

  .min-news-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .min-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .min-news-card__body {
    padding: var(--min-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .min-news-card__date {
    font-size: 0.75rem;
    color: var(--min-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--min-space-xs);
  }

  .min-news-card__title {
    font-family: var(--min-font-heading);
    font-size: 1.125rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-sm);
  }

  .min-news-card__teaser {
    font-size: 0.875rem;
    color: var(--min-color-muted);
    line-height: var(--min-line-height);
    flex: 1;
  }

  .min-news-card__link {
    margin-block-start: var(--min-space-md);
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-accent);
  }

  /* === Detail View === */
  .min-news-detail__header {
    margin-block-end: var(--min-space-xl);
  }

  .min-news-detail__meta {
    display: flex;
    gap: var(--min-space-md);
    font-size: 0.875rem;
    color: var(--min-color-muted);
    margin-block-end: var(--min-space-md);
  }

  .min-news-detail__category {
    color: var(--min-color-accent);
    font-weight: var(--min-font-weight-medium);
  }

  @media (max-width: 1024px) {
    .min-news-list { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .min-news-list { grid-template-columns: 1fr; }
  }
}

/* --- ../../../../content-elements/css/modules/extensions/powermail.css --- */
/* modules/extensions/powermail.css
 * Powermail Form Styling
 * BEM: .min-form, .min-form__field, .min-form__label
 */
@layer modules {
  .min-form {
    max-width: 40rem;
  }

  .min-form__fieldset {
    border: none;
    padding: 0;
    margin-block-end: var(--min-space-lg);
  }

  .min-form__legend {
    font-family: var(--min-font-heading);
    font-size: 1.25rem;
    font-weight: var(--min-font-weight-bold);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-md);
    padding-block-end: var(--min-space-sm);
    border-block-end: 2px solid var(--min-color-border);
    width: 100%;
  }

  .min-form__field {
    margin-block-end: var(--min-space-md);
  }

  .min-form__label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-medium);
    color: var(--min-color-text);
    margin-block-end: var(--min-space-xs);
  }

  .min-form__required {
    color: var(--min-color-accent);
  }

  .min-form__input,
  .min-form__textarea,
  .min-form__select {
    width: 100%;
    padding: var(--min-space-sm) var(--min-space-md);
    font-size: var(--min-font-size-base);
    border: 1px solid var(--min-color-border);
    border-radius: var(--min-radius-sm);
    background-color: var(--min-color-bg);
    color: var(--min-color-text);
    transition: border-color var(--min-transition), box-shadow var(--min-transition);
  }

  .min-form__input:focus,
  .min-form__textarea:focus,
  .min-form__select:focus {
    border-color: var(--min-color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--min-color-accent) 15%, transparent);
    outline: none;
  }

  .min-form__textarea {
    min-height: 8rem;
    resize: vertical;
  }

  /* Checkbox / Radio */
  .min-form__check {
    display: flex;
    align-items: flex-start;
    gap: var(--min-space-sm);
    margin-block-end: var(--min-space-sm);
  }

  .min-form__check input {
    margin-block-start: 0.25em;
    accent-color: var(--min-color-accent);
  }

  /* Validation */
  .min-form__error {
    font-size: 0.8rem;
    color: var(--min-color-accent);
    margin-block-start: var(--min-space-xs);
  }

  .min-form__input--invalid {
    border-color: var(--min-color-accent);
  }

  /* Submit */
  .min-form__submit {
    padding: var(--min-space-sm) var(--min-space-xl);
    background-color: var(--min-color-primary);
    color: var(--min-color-bg);
    border: none;
    border-radius: var(--min-radius-md);
    font-weight: var(--min-font-weight-bold);
    font-size: var(--min-font-size-base);
    cursor: pointer;
    transition: background-color var(--min-transition);
  }

  .min-form__submit:hover {
    background-color: var(--min-color-accent);
  }

  .min-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* --- ../../../../content-elements/css/modules/style-switcher.css --- */
@layer modules {
  /* ==========================================================================
   * Style Switcher - Font-Size + Dark Mode Toggle
   * Position: Fixed, left side
   * ========================================================================== */

  .style-switcher {
    position: fixed;
    top: 100px;
    left: 1rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .style-switcher__btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--min-color-bg, #fff);
    border: 1px solid var(--min-color-border, #e0e0e0);
    cursor: pointer;
    color: var(--min-color-text, #333);
    transition: all var(--min-transition-fast, 100ms ease);
  }

  .style-switcher__btn:hover {
    background: var(--min-color-surface, #f5f5f5);
  }

  .style-switcher__btn.is-active {
    background: var(--min-color-primary, #777);
    border-color: var(--min-color-primary, #777);
    color: var(--min-color-bg, #fff);
  }

  .style-switcher__btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* -- Font Scale Variants ------------------------------------------------ */

  [data-font-size="normal"] {
    --font-scale: 1;
  }

  [data-font-size="large"] {
    --font-scale: 1.125;
  }

  [data-font-size="xlarge"] {
    --font-scale: 1.25;
  }

  /* Apply font-scale to html for prototypes that use it */
  html[data-font-size] {
    font-size: calc(var(--min-font-size-base, 16px) * var(--font-scale, 1));
    transition: font-size var(--min-transition, 200ms ease);
  }

  /* -- Skip Link ---------------------------------------------------------- */

  .skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--min-color-primary, #333);
    color: var(--min-color-bg, #fff);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    text-decoration: none;
    transition: top var(--min-transition-fast, 100ms ease);
  }

  .skip-link:focus {
    top: 1rem;
  }

  /* -- Address Reset ------------------------------------------------------ */

  address {
    font-style: normal;
    line-height: 1.6;
  }
}

/* --- ../../../../content-elements/css/modules/styleguide.css --- */
@layer modules {
  /* ==========================================================================
   * Styleguide-spezifische Styles
   * Fuer Prototype-Styleguide-Seiten aller Kunden
   * ========================================================================== */

  .styleguide-section {
    margin-block-end: 3rem;
    padding-block-end: 3rem;
    border-block-end: 1px solid var(--min-color-border, #eee);
  }

  .styleguide-section__title {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.5rem;
    margin-block-end: 0.75rem;
  }

  .styleguide-section__subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-block: 1.5rem 0.5rem;
    color: var(--min-color-primary, #333);
  }

  .preview-box {
    border: 1px solid var(--min-color-border, #ddd);
    border-radius: var(--min-radius-md, 0.5rem);
    padding: 1.5rem;
    margin-block: 1rem;
    background: var(--min-color-bg, #fff);
  }

  .specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.9rem;
  }

  .specs-table td {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--min-color-border, #eee);
  }

  .specs-table td:first-child {
    font-weight: 600;
    width: 40%;
  }

  .code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1.25rem;
    border-radius: var(--min-radius-md, 0.5rem);
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-x: auto;
    margin-block: 1rem;
    white-space: pre;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  }

  /* -- Styleguide Navigation ---------------------------------------------- */

  .styleguide-nav {
    padding: var(--min-spacing-xl, 4rem) var(--min-container-padding, 1.5rem);
  }

  .styleguide-nav__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-lg, 2rem);
  }

  .styleguide-nav__container--preview {
    max-width: 700px;
  }

  .styleguide-nav__item {
    display: block;
    padding: var(--min-spacing-lg, 2rem);
    background: var(--min-color-surface, #f5f5f5);
    text-decoration: none;
    color: inherit;
    transition: background var(--min-transition-fast, 100ms ease);
  }

  .styleguide-nav__item:hover {
    background: var(--min-color-border, #e0e0e0);
  }

  .styleguide-nav__number {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--min-color-accent, #CD1719);
    margin-block-end: var(--min-spacing-xs, 0.25rem);
    display: block;
  }

  .styleguide-nav__item h2,
  .styleguide-nav__item h3 {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.25rem;
    font-weight: 400;
    margin-block-end: 0.25rem;
  }

  .styleguide-nav__item p {
    font-size: 0.85rem;
    color: var(--min-color-muted, #666);
    margin: 0;
  }

  @media (max-width: 767px) {
    .styleguide-nav__container {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* -- Styleguide Section (Container) ------------------------------------- */

  .styleguide-section--alt {
    background: var(--min-color-surface, #f5f5f5);
  }

  .styleguide-section__container {
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  .styleguide-section__intro {
    font-size: 1.0625rem;
    color: var(--min-color-muted, #666);
    margin-block-end: var(--min-spacing-xl, 4rem);
    max-width: 700px;
  }

  /* -- Color Swatches ----------------------------------------------------- */

  .color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--min-spacing-md, 1rem);
  }

  .color-swatches--large {
    grid-template-columns: repeat(3, 1fr);
    margin-block-end: var(--min-spacing-xl, 4rem);
  }

  .color-swatch {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--min-spacing-sm, 0.5rem);
    color: var(--min-text-on-dark, #fff);
  }

  .color-swatch--light {
    color: var(--min-color-text, #1e1e1e);
    border: 1px solid var(--min-color-border, #e0e0e0);
  }

  .color-swatch__name {
    font-size: 0.8rem;
    font-weight: var(--min-weight-medium, 500);
  }

  .color-swatch__var,
  .color-swatch__value {
    font-family: monospace;
    font-size: 0.7rem;
    opacity: 0.8;
  }

  @media (max-width: 767px) {
    .color-swatches {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* -- Type Specimens ----------------------------------------------------- */

  .type-specimens {
    display: grid;
    gap: var(--min-spacing-lg, 2rem);
  }

  .type-specimen__label {
    font-size: 0.75rem;
    font-weight: var(--min-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--min-color-accent, #CD1719);
    margin-block-end: 0.5rem;
    display: block;
  }

  .type-specimen__sample--headline {
    font-family: var(--min-font-heading, inherit);
    font-size: 2.5rem;
  }

  .type-specimen__sample--body {
    font-family: var(--min-font-body, inherit);
    font-size: 1.125rem;
  }

  .type-specimen__sample--mono {
    font-family: monospace;
    font-size: 1rem;
  }

  /* -- Type Families ------------------------------------------------------ */

  .type-families {
    display: grid;
    gap: var(--min-spacing-xl, 4rem);
    margin-block-end: var(--min-spacing-xl, 4rem);
  }

  .type-family__sample {
    margin-block-end: 0.5rem;
  }

  .type-family__desc {
    font-size: 0.9rem;
    color: var(--min-color-muted, #666);
  }

  /* -- Type Scale --------------------------------------------------------- */

  .type-scale {
    display: grid;
    gap: var(--min-spacing-lg, 2rem);
  }

  .type-scale__item {
    display: flex;
    align-items: baseline;
    gap: var(--min-spacing-lg, 2rem);
    padding-block-end: var(--min-spacing-lg, 2rem);
    border-bottom: 1px solid var(--min-color-border, #e0e0e0);
  }

  .type-scale__label {
    flex: 0 0 60px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--min-color-accent, #CD1719);
  }

  /* -- Spacing Scale ------------------------------------------------------ */

  .spacing-scale {
    display: grid;
    gap: var(--min-spacing-sm, 0.5rem);
  }

  .spacing-item {
    display: flex;
    align-items: center;
    gap: var(--min-spacing-lg, 2rem);
  }

  .spacing-box {
    background: var(--min-color-accent, #CD1719);
    flex-shrink: 0;
  }

  .spacing-item span {
    font-family: monospace;
    font-size: 0.85rem;
  }

  .spacing-item span:last-child {
    color: var(--min-color-muted, #666);
  }

  /* -- Styleguide Examples ------------------------------------------------ */

  .styleguide-example {
    padding: var(--min-spacing-lg, 2rem);
    background: var(--min-color-bg, #fff);
    border: 1px solid var(--min-color-border, #e0e0e0);
  }

  .styleguide-example--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--min-spacing-xl, 4rem);
  }

  .styleguide-example--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--min-spacing-md, 1rem);
    align-items: center;
  }

  .styleguide-form {
    max-width: 500px;
  }

  .styleguide-preview {
    padding: var(--min-spacing-xl, 4rem) var(--min-container-padding, 1.5rem);
  }

  .styleguide-preview--dark {
    background: var(--min-color-primary, #777);
  }

  .styleguide-preview--fullwidth {
    padding: 0;
    max-width: 100%;
  }

  /* -- Styleguide Pagination ---------------------------------------------- */

  .styleguide-pagination {
    display: flex;
    justify-content: space-between;
    padding: var(--min-spacing-xl, 4rem) var(--min-container-padding, 1.5rem);
    border-top: 1px solid var(--min-color-border, #e0e0e0);
    max-width: var(--min-container-max, 1280px);
    margin-inline: auto;
  }

  .styleguide-pagination__prev,
  .styleguide-pagination__next {
    font-size: 0.9rem;
    font-weight: var(--min-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: inherit;
  }

  .styleguide-pagination__prev::before {
    content: '\2190 ';
  }

  .styleguide-pagination__next::after {
    content: ' \2192';
  }

  /* -- Styleguide Rules --------------------------------------------------- */

  .styleguide-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--min-spacing-lg, 2rem);
    margin-block-start: var(--min-spacing-lg, 2rem);
  }

  .styleguide-rule {
    padding: var(--min-spacing-lg, 2rem);
    border-radius: var(--min-radius-md, 4px);
  }

  .styleguide-rule--do {
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4CAF50;
  }

  .styleguide-rule--dont {
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid #F44336;
  }

  .styleguide-rule h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-block-end: var(--min-spacing-sm, 0.5rem);
  }

  .styleguide-rule ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .styleguide-rule li {
    padding: 0.375rem 0;
    font-size: 0.9rem;
    color: var(--min-color-muted, #555);
  }

  .styleguide-note {
    padding: var(--min-spacing-lg, 2rem);
    background: var(--min-color-surface, #f5f5f5);
    border-radius: var(--min-radius-md, 4px);
    font-size: 0.9rem;
    margin-block-start: var(--min-spacing-lg, 2rem);
  }

  .styleguide-code {
    margin-block-start: var(--min-spacing-lg, 2rem);
    background: #1a1a2e;
    border-radius: var(--min-radius-md, 4px);
    overflow: hidden;
  }

  .styleguide-code pre {
    margin: 0;
    padding: var(--min-spacing-lg, 2rem);
    overflow-x: auto;
  }

  .styleguide-code code {
    font-family: monospace;
    font-size: 0.8rem;
    color: #e4e4e7;
    line-height: 1.6;
  }

  /* -- Image Compare (Before/After) --------------------------------------- */

  .image-compare {
    max-width: 800px;
    margin-inline: auto;
  }

  .image-compare__container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }

  .image-compare__before,
  .image-compare__after {
    position: absolute;
    inset: 0;
  }

  .image-compare__before img,
  .image-compare__after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-compare__before {
    clip-path: inset(0 50% 0 0);
  }

  .image-compare__label {
    position: absolute;
    bottom: var(--min-spacing-sm, 0.5rem);
    padding: 0.5rem 1rem;
    background: rgb(0 0 0 / 0.7);
    color: var(--min-text-on-dark, #fff);
    font-size: var(--min-font-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .image-compare__before .image-compare__label {
    left: var(--min-spacing-sm, 0.5rem);
  }

  .image-compare__after .image-compare__label {
    right: var(--min-spacing-sm, 0.5rem);
  }

  .image-compare__slider {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 4px;
    background: var(--min-text-on-dark, #fff);
    cursor: ew-resize;
    z-index: 10;
  }

  .image-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    background: var(--min-text-on-dark, #fff);
    border-radius: var(--min-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--min-shadow-lg);
  }

  .image-compare__handle svg {
    color: var(--min-color-primary, #333);
  }

  /* -- Animation Demo Components ------------------------------------------ */

  .gsap-demo {
    display: flex;
    gap: var(--min-spacing-lg, 2rem);
    flex-wrap: wrap;
  }

  .gsap-demo__box {
    width: 120px;
    height: 120px;
    background: var(--min-color-accent, #CD1719);
    color: var(--min-text-on-dark, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--min-font-sm, 0.875rem);
    font-weight: var(--min-weight-medium, 500);
    border-radius: var(--min-radius-md, 4px);
  }

  .gsap-demo__item {
    width: 80px;
    height: 80px;
    background: var(--min-color-surface, #f5f5f5);
    border: 1px solid rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: var(--min-font-sm, 0.875rem);
    border-radius: var(--min-radius-sm, 2px);
  }

  .gsap-demo__card {
    width: 200px;
    position: relative;
    overflow: hidden;
    border-radius: var(--min-radius-md, 4px);
  }

  .gsap-demo__card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
  }

  /* -- Hover Demo --------------------------------------------------------- */

  .hover-demo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
  }

  .hover-demo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-transition, 200ms ease);
  }

  .hover-demo:hover img {
    transform: scale(1.05);
  }

  .hover-demo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.7);
    color: var(--min-text-on-dark, #fff);
    opacity: 0;
    transition: opacity var(--min-transition, 200ms ease);
  }

  .hover-demo--overlay:hover .hover-demo__overlay {
    opacity: 1;
  }

  .hover-demo__overlay span:first-child {
    font-family: var(--min-font-heading, inherit);
    font-size: 1.25rem;
    margin-block-end: 0.25rem;
  }

  .hover-demo__overlay span:last-child {
    font-size: var(--min-font-sm, 0.875rem);
    opacity: 0.8;
  }

  .hover-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--min-spacing-lg, 2rem);
  }

  @media (max-width: 767px) {
    .hover-demo-grid {
      grid-template-columns: 1fr;
    }
  }

  /* -- Parallax Demo ------------------------------------------------------ */

  .parallax-demo {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .parallax-demo__image {
    position: absolute;
    top: -20%;
    left: 0;
    right: 0;
    bottom: -20%;
    z-index: 0;
  }

  .parallax-demo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .parallax-demo__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
  }

  .parallax-demo__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--min-text-on-dark, #fff);
    max-width: 600px;
    padding: var(--min-spacing-lg, 2rem);
  }

  .parallax-demo__content h3 {
    font-family: var(--min-font-heading, inherit);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-block-end: var(--min-spacing-md, 1rem);
  }

  .parallax-demo__content p {
    font-size: 1.125rem;
    opacity: 0.9;
  }

  /* -- Scroll Progress Demo ----------------------------------------------- */

  .scroll-progress-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--min-spacing-sm, 0.5rem);
  }

  .scroll-progress-demo__bar {
    width: 100%;
    max-width: 400px;
    height: 4px;
    background: var(--min-color-surface, #f5f5f5);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
  }

  .scroll-progress-demo__bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background: var(--min-color-accent, #CD1719);
    border-radius: 2px;
  }

  /* -- Animation Demo (Interactive) --------------------------------------- */

  .anim-demo {
    display: flex;
    flex-direction: column;
    gap: var(--min-spacing-lg, 2rem);
  }

  .anim-demo__stage {
    min-height: 150px;
    padding: var(--min-spacing-lg, 2rem);
    background: var(--min-color-surface, #f5f5f5);
    border-radius: var(--min-radius-md, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .anim-demo__box {
    width: 120px;
    height: 80px;
    background: var(--min-color-accent, #CD1719);
    color: var(--min-text-on-dark, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--min-weight-medium, 500);
    border-radius: var(--min-radius-sm, 2px);
  }

  .anim-demo__list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 300px;
  }

  .anim-demo__list li {
    padding: 0.75rem 1rem;
    margin-block-end: 0.5rem;
    background: var(--min-color-bg, #fff);
    border-radius: var(--min-radius-sm, 2px);
    border-left: 3px solid var(--min-color-accent, #CD1719);
  }

  .anim-demo__cards {
    display: flex;
    gap: var(--min-spacing-md, 1rem);
  }

  .anim-demo__card {
    width: 80px;
    height: 80px;
    background: var(--min-color-accent, #CD1719);
    color: var(--min-text-on-dark, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 1.25rem;
    border-radius: var(--min-radius-sm, 2px);
  }

  .anim-demo__play {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background: var(--min-color-accent, #CD1719);
    color: var(--min-text-on-dark, #fff);
    border: none;
    border-radius: var(--min-radius-sm, 2px);
    font-size: var(--min-font-sm, 0.875rem);
    font-weight: var(--min-weight-medium, 500);
    cursor: pointer;
    transition: background var(--min-transition-fast, 100ms ease);
  }

  .anim-demo__play:hover {
    background: #a51214;
  }

  .anim-demo__play:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ==========================================================================
   * Styleguide UI Shell (sg-* Klassen)
   * Layout-Container fuer Styleguide-Seiten: Navigation, Element-Vorschau,
   * Code-Beispiele und Property-Tabellen.
   * ========================================================================== */

  /* -- Styleguide Navigation ------------------------------------------------ */

  .sg-nav {
    display: flex;
    gap: var(--min-spacing-sm, 0.5rem);
    padding: var(--min-spacing-sm, 0.5rem) var(--min-spacing-md, 1rem);
    background: var(--min-color-surface, #f8f8f8);
    border-bottom: 1px solid var(--min-color-border, #ddd);
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .sg-nav__brand {
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    margin-right: var(--min-spacing-md, 1rem);
  }

  .sg-nav__link {
    text-decoration: none;
    color: var(--min-color-muted, #666);
    padding: 0.25rem 0.5rem;
    border-radius: var(--min-radius-sm, 4px);
    font-size: var(--min-font-sm, 0.875rem);
    transition: background var(--min-transition-fast, 100ms ease),
                color var(--min-transition-fast, 100ms ease);
  }

  .sg-nav__link:hover {
    background: var(--min-color-border, #e0e0e0);
    color: var(--min-color-text, #333);
  }

  .sg-nav__link--active {
    background: var(--min-color-primary, #333);
    color: var(--min-text-on-dark, #fff);
  }

  /* -- Styleguide Main Container -------------------------------------------- */

  .sg-main {
    max-width: var(--min-container-max, 1200px);
    margin: var(--min-spacing-lg, 2rem) auto;
    padding: 0 var(--min-container-padding, 1.5rem);
  }

  .sg-main section {
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .sg-main h2 a {
    text-decoration: none;
    color: inherit;
  }

  .sg-main ul {
    padding-left: 1.5rem;
    list-style: disc;
  }

  .sg-main li {
    margin-bottom: 0.25rem;
  }

  /* -- Element Block -------------------------------------------------------- */

  .sg-element {
    margin-bottom: var(--min-spacing-xl, 4rem);
    border-bottom: 1px solid var(--min-color-border, #eee);
    padding-bottom: var(--min-spacing-lg, 2rem);
  }

  .sg-description {
    color: var(--min-color-muted, #666);
    margin-bottom: var(--min-spacing-md, 1.5rem);
  }

  /* -- Variant -------------------------------------------------------------- */

  .sg-variant {
    margin-bottom: var(--min-spacing-lg, 2rem);
  }

  .sg-variant h3 {
    font-size: 1rem;
    color: var(--min-color-muted, #999);
    margin-bottom: var(--min-spacing-sm, 0.5rem);
  }

  /* -- Preview -------------------------------------------------------------- */

  .sg-preview {
    border: 1px solid var(--min-color-border, #eee);
    border-radius: var(--min-radius-md, 8px);
    overflow: hidden;
    margin-bottom: var(--min-spacing-sm, 0.5rem);
  }

  /* -- Code ----------------------------------------------------------------- */

  .sg-code {
    margin-top: var(--min-spacing-sm, 0.5rem);
  }

  .sg-code summary {
    cursor: pointer;
    font-size: var(--min-font-sm, 0.875rem);
    color: var(--min-color-muted, #666);
  }

  .sg-code pre {
    background: var(--min-color-surface, #f5f5f5);
    padding: var(--min-spacing-md, 1rem);
    overflow-x: auto;
    font-size: 0.8rem;
    margin-top: var(--min-spacing-sm, 0.5rem);
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  }

  /* -- Properties Table ----------------------------------------------------- */

  .sg-props {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: var(--min-spacing-sm, 0.5rem);
  }

  .sg-props th,
  .sg-props td {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--min-color-border, #eee);
    text-align: left;
  }

  .sg-props th {
    background: var(--min-color-surface, #f8f8f8);
  }

  /* ==========================================================================
   * Fehlende Grundlagen-Klassen (styleguide-grundlagen.php etc.)
   * color-preview, type-sample, code-inline, spacing-item Details
   * ========================================================================== */

  /* -- Color Preview (Alias fuer Farbpaletten-Darstellung) ------------------ */

  .color-preview {
    display: grid;
    gap: var(--min-spacing-md, 1rem);
    margin-block: var(--min-spacing-md, 1rem);
  }

  .color-preview__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--min-spacing-sm, 0.5rem);
    border-radius: var(--min-radius-sm, 4px);
    color: var(--min-text-on-dark, #fff);
    min-height: 80px;
  }

  .color-preview__label {
    font-size: 0.8rem;
    font-weight: var(--min-weight-medium, 500);
    line-height: 1.4;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  }

  /* -- Type Sample ---------------------------------------------------------- */

  .type-sample {
    margin-block-end: var(--min-spacing-lg, 2rem);
    padding-block-end: var(--min-spacing-lg, 2rem);
    border-bottom: 1px solid var(--min-color-border, #eee);
  }

  .type-sample__label {
    font-size: 0.75rem;
    font-weight: var(--min-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--min-color-accent, var(--min-color-primary, #CD1719));
    margin-block-end: 0.5rem;
    display: block;
  }

  /* -- Code Inline ---------------------------------------------------------- */

  .code-inline {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85em;
    background: var(--min-color-surface, #f5f5f5);
    padding: 0.15em 0.4em;
    border-radius: var(--min-radius-sm, 3px);
    border: 1px solid var(--min-color-border, #e0e0e0);
  }

  /* -- Spacing Item Details ------------------------------------------------- */

  .spacing-item__label {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: var(--min-weight-medium, 500);
    min-width: 100px;
  }

  .spacing-item__value {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--min-color-muted, #666);
  }

  .spacing-item__visual {
    background: var(--min-color-accent, var(--min-color-primary, #CD1719));
    flex-shrink: 0;
    border-radius: var(--min-radius-sm, 2px);
  }
}


/* === Utilities === */
/* --- ../../../../content-elements/css/_utilities.css --- */
/* content-elements/css/_utilities.css
 * Hilfsklassen - Spacing, Visibility, A11y
 */
@layer utilities {
  /* === Spacing === */
  .mt-0 { margin-block-start: 0; }
  .mt-sm { margin-block-start: var(--min-space-sm); }
  .mt-md { margin-block-start: var(--min-space-md); }
  .mt-lg { margin-block-start: var(--min-space-lg); }
  .mt-xl { margin-block-start: var(--min-space-xl); }

  .mb-0 { margin-block-end: 0; }
  .mb-sm { margin-block-end: var(--min-space-sm); }
  .mb-md { margin-block-end: var(--min-space-md); }
  .mb-lg { margin-block-end: var(--min-space-lg); }
  .mb-xl { margin-block-end: var(--min-space-xl); }

  .pt-0 { padding-block-start: 0; }
  .pb-0 { padding-block-end: 0; }

  /* === Text === */
  .text-center { text-align: center; }
  .text-left { text-align: start; }
  .text-right { text-align: end; }
  .text-muted { color: var(--min-color-muted); }
  .text-primary { color: var(--min-color-primary); }

  /* === Background === */
  .bg-primary { background-color: var(--min-color-primary); color: var(--min-color-bg); }
  .bg-secondary { background-color: var(--min-color-secondary); color: var(--min-color-bg); }
  .bg-accent { background-color: var(--min-color-accent); }
  .bg-surface,
  .bg-light { background-color: var(--min-color-surface); }

  /* === Visibility === */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sr-only:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .hidden { display: none !important; }
  .visible { visibility: visible; }
  .invisible { visibility: hidden; }

  @media (max-width: 768px) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 769px) {
    .hide-desktop { display: none !important; }
  }

  /* Prototype Variant Notice */
  .variant-notice {
    position: fixed;
    top: 70px;
    right: 1rem;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--min-color-secondary);
    color: var(--min-text-on-dark, #fff);
    font-size: 0.75rem;
    box-shadow: var(--min-shadow-md);
  }

  .variant-notice__label {
    background: rgb(255 255 255 / 0.2);
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .variant-notice__text {
    font-weight: 400;
  }

  .variant-notice__link {
    color: var(--min-text-on-dark, #fff);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--min-transition-fast, 100ms ease);
  }

  .variant-notice__link:hover {
    opacity: 1;
  }

  @media (max-width: 767px) {
    .variant-notice {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      justify-content: center;
    }
  }
}


/* === Fonts (kundenspezifisch) === */

/* === Kunden-Komponenten (unlayered = hoechste Prioritaet) === */
/* --- ./custom.css --- */
/**
 * REEHUIS HAUSBAU Theme - Hochwertiger regionaler Hausbauer
 * Stil: Professionell, vertrauenswürdig, modern
 *
 * Includes: minpurecss variable mapping, Dark Mode, Style-Switcher
 */

/* ========================================
   CSS VARIABLES (minpurecss compatible)
   ======================================== */
:root {
    /* minpurecss 6-Color System */
    --cone: #777777;    /* Grau - Text */
    --ctwo: #337AB7;    /* Blau - Vertrauen */
    --cthree: #CD1719;  /* Rot - Akzent/CTA */
    --cfour: #555555;   /* Dunkelgrau */
    --cfive: #ffffff;   /* Weiß - Hintergrund */
    --csix: #f8f9fa;    /* Hellgrau - Sections */

    /* Extended */
    --accent: #CD1719;
    --accent-hover: #a51214;
    --line: rgba(0, 0, 0, 0.08);
    --overlay: rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-headline: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Font Size (Style-Switcher) */
    --font-size-base: 16px;
    --font-scale: 1;

    /* Line Heights */
    --line-hero: 1.1;
    --line-heading: 1.2;
    --line-body: 1.7;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-2xl: 8rem;
    --space-3xl: 12rem;

    /* Section Spacing */
    --section-default: 6rem;
    --section-tight: 4rem;
    --section-wide: 8rem;

    /* Container */
    --container-max: 1400px;
    --container-padding: 2rem;
    --container-narrow: 900px;
    --container-wide: 1600px;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-round: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"] {
    /* --cone elevated for dark mode: #777 on #121212 = 4.18:1 FAIL -> #999 = 6.58:1 AA */
    --cone: #999999;
    --ctwo: #337AB7;
    --cthree: #CD1719;
    --cfour: #a0a0a0;
    --cfive: #121212;
    --csix: #1e1e1e;

    --accent: #e85a73;
    --accent-hover: #ff7a8f;
    --line: rgba(255, 255, 255, 0.1);
    --overlay: rgba(0, 0, 0, 0.7);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ========================================
   FONT SIZE VARIANTS (Style-Switcher)
   ======================================== */
[data-font-size="normal"] {
    --font-scale: 1;
}

[data-font-size="large"] {
    --font-scale: 1.125;
}

[data-font-size="xlarge"] {
    --font-scale: 1.25;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(var(--font-size-base) * var(--font-scale, 1));
    scroll-behavior: smooth;
    transition: font-size var(--transition-base);
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-body);
    color: var(--cone);
    background: var(--cfive);
    -webkit-font-smoothing: antialiased;
    transition: color var(--transition-base), background var(--transition-base);
}

/* ========================================
   STYLE-SWITCHER
   ======================================== */
.style-switcher {
    position: fixed;
    top: 100px;
    left: 1rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--cfive);
    border: 1px solid var(--line);
    padding: 0.5rem;
    box-shadow: var(--shadow-md);
}

.style-switcher__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--cfour);
    transition: all var(--transition-fast);
}

.style-switcher__btn svg {
    width: 20px;
    height: 20px;
}

.style-switcher__btn:hover {
    color: var(--cone);
    background: var(--csix);
}

.style-switcher__btn.is-active {
    color: var(--cthree);
    border-color: var(--cthree);
}

.style-switcher__btn[data-dark-mode] {
    border-top: 1px solid var(--line);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.style-switcher__btn[data-dark-mode][aria-pressed="true"] {
    color: var(--cthree);
}

/* Hide on mobile - show on larger screens */
@media (max-width: 768px) {
    .style-switcher {
        top: auto;
        bottom: 5rem;
        left: 1rem;
    }
}

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

a {
    color: var(--cone);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--cthree);
}

/* ========================================
   SKIP LINK
   ======================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cone);
    color: var(--cfive);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 1rem;
    color: var(--cfive);
}

/* ========================================
   HEADER
   ======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--cfive);
    border-bottom: 1px solid var(--line);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

.header__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1rem var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: flex;
    align-items: center;
}

.header__logo svg {
    display: block;
}

/* Logo-Höhe: unlayered img{height:auto} schlägt @layer mandant.
   Hier Wiederherstellung mit Klassen-Spezifität im unlayered Scope. */
.header__logo img,
.ce-nav__logo img,
.site-header__logo img,
.site-logo img {
    height: var(--mandant-logo-height, 3.5rem);
    width: auto;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header__menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.header__menu > li {
    position: relative;
}

.header__menu > li > a {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.5rem 0;
}

.header__menu > li > a[aria-current="page"] {
    color: var(--cthree);
}

/* Submenu */
.header__submenu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 200px;
    background: var(--cfive);
    border: 1px solid var(--line);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
}

.has-submenu:hover .header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header__submenu li a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.header__submenu li:last-child a {
    border-bottom: none;
}

.header__submenu li a:hover {
    background: var(--csix);
}

/* Mobile Toggle */
.header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.header__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cone);
    transition: all var(--transition-fast);
}

@media (max-width: 900px) {
    .header__toggle {
        display: flex;
    }

    .header__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        flex-direction: column;
        background: var(--cfive);
        padding: 5rem 2rem 2rem;
        gap: 0;
        transform: translateX(100%);
        transition: transform var(--transition-base);
    }

    .header__menu.is-open {
        transform: translateX(0);
    }

    .header__menu > li > a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    .header__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        padding-left: 1rem;
    }
}

/* ========================================
   HERO
   ======================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl) var(--container-padding);
    overflow: hidden;
}

.hero__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay removed per design rules (no gradients on images) */

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    color: var(--cfive);
}

.hero__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

.hero__title {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.hero__subtitle {
    font-size: 1.125rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 500px;
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--cfive);
    opacity: 0.6;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* Hero Preview (Styleguide) */
.hero--preview {
    height: 60vh;
    min-height: 400px;
}

/* Hero Compact */
.hero--compact {
    height: 50vh;
    min-height: 350px;
    align-items: center;
}

.hero--compact .hero__content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero Centered */
.hero--centered {
    align-items: center;
    justify-content: center;
}

.hero--centered .hero__content {
    text-align: center;
    max-width: 900px;
}

.hero--centered .hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
}

/* Hero Split (Text + Bild nebeneinander) */
.hero--split {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.hero--split .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--cone);
    background: var(--cfive);
}

.hero--split .hero__image {
    position: relative;
}

.hero--split .hero__image::after {
    display: none;
}

@media (max-width: 900px) {
    .hero--split {
        grid-template-columns: 1fr;
        height: auto;
    }
    .hero--split .hero__image {
        height: 50vh;
    }
}

/* ========================================
   HERO SLIDER
   ======================================== */
.hero-slider {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.hero-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slider__slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
}

.hero-slider__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-slider__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay removed per design rules (no gradients on images) */

.hero-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl) var(--container-padding);
    color: var(--cfive);
    z-index: 2;
}

.hero-slider__content-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero-slider__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

.hero-slider__title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.hero-slider__subtitle {
    font-size: 1.125rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 500px;
}

/* Slider Navigation */
.hero-slider__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-md);
    z-index: 10;
    pointer-events: none;
}

.hero-slider__prev,
.hero-slider__next {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--cfive);
    cursor: pointer;
    transition: all var(--transition-base);
    pointer-events: auto;
}

.hero-slider__prev:hover,
.hero-slider__next:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Slider Dots */
.hero-slider__dots {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.hero-slider__dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.hero-slider__dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.hero-slider__dot.is-active {
    background: var(--cfive);
    border-color: var(--cfive);
    transform: scale(1.2);
}

/* Slider Progress Bar */
.hero-slider__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 10;
}

.hero-slider__progress-bar {
    height: 100%;
    background: var(--cthree);
    width: 0%;
    transition: width 0.1s linear;
}

/* Hero Slider Preview */
.hero-slider--preview {
    height: 70vh;
    min-height: 500px;
}

/* ========================================
   HERO VIDEO
   ======================================== */
.hero--video .hero__video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.hero--video .hero__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--video .hero__video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* ========================================
   STATEMENT
   ======================================== */
.statement {
    padding: var(--space-3xl) var(--container-padding);
    background: var(--cfive);
}

.statement__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
}

.statement__quote {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--cone);
}

/* ========================================
   HORIZONTAL GALLERY
   ======================================== */
.gallery-horizontal {
    /* scroll-margin-top = nav height (design-tokens.json layout.nav.height = 5rem)
       ensures #projekte anchor lands below the fixed header */
    scroll-margin-top: 5rem;
    padding: var(--space-xl) 0;
    /* overflow: hidden would clip the fullbleed track breakout — use clip instead */
    overflow-x: clip;
}

.gallery-horizontal__header {
    max-width: var(--container-max);
    margin: 0 auto var(--space-lg);
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-horizontal__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 400;
}

.gallery-horizontal__link {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cfour);
}

.gallery-horizontal__link:hover {
    color: var(--cthree);
}

.gallery-horizontal__track {
    display: flex;
    gap: var(--space-md);
    /* Fullbleed breakout: track escapes container, header stays inside */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Align item-01 left edge with container edge at any viewport width:
       At viewports <= container-max: padding = container-padding (2rem)
       At viewports > container-max: padding = (100vw - container-max) / 2 + container-padding */
    padding-inline: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
    scroll-padding-inline-start: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.gallery-horizontal__track::-webkit-scrollbar {
    display: none;
}

.gallery-horizontal__item {
    flex: 0 0 auto;
    width: 400px;
    position: relative;
    scroll-snap-align: start;
}

.gallery-horizontal__item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.gallery-horizontal__item:hover img {
    transform: scale(1.02);
}

.gallery-horizontal__number {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cfive);
    background: var(--cone);
    padding: 0.25rem 0.5rem;
}

.gallery-horizontal__caption {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--cfour);
}

/* ========================================
   COMPAT CENTERING RESTORE
   @layer components setzt margin-inline: auto auf Section-Klassen.
   Das unlayered *{margin:0} Reset schlägt @layer immer — unabhängig
   von Spezifität. Hier Wiederherstellung mit Klassen-Spezifität (> *).
   ======================================== */

/* Page-Header-Container zentrieren */
.page-header__container,
.ce-page-header__container {
    margin-inline: auto;
}

/* Textmedia-Sektionen zentrieren (max-width aus @layer COMPAT bleibt) */
:is(.ce-textmedia, .ce-textpic, .min-textmedia)[data-ce-type] {
    margin-inline: auto;
}

/* Cards-Sektionen zentrieren */
:is(.ce-cards, .min-cards)[data-ce-type],
:is(.ce-cards, .min-cards),
.cards,
.features-grid {
    margin-inline: auto;
}

/* ========================================
   SPLIT SECTION - Elegantes Service-Layout
   ======================================== */

/* Override: COMPAT-Layer fügt max-width + padding an [data-ce-type]-Sektionen.
   Split-Sections sind Full-Bleed und brauchen das nicht. */
.split[data-ce-type] {
    padding: 0;
    max-width: none;
    margin-inline: 0;
}

.split {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 70vh;
    background: var(--cfive);
}

.split--reverse {
    direction: rtl;
}

.split--reverse > * {
    direction: ltr;
}

.split--preview {
    min-height: 50vh;
}

.split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    background: var(--cfive);
}

.split__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--cthree);
    margin-bottom: var(--space-xs);
    opacity: 0.9;
}

.split__title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: var(--cone);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.split__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cfour);
    margin-bottom: var(--space-md);
    max-width: 480px;
}

/* Elegante Liste ohne Bullets */
.split__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}

.split__list li {
    position: relative;
    padding: 0.6rem 0;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    color: var(--cfour);
    border-bottom: 1px solid var(--line);
}

.split__list li:last-child {
    border-bottom: none;
}

.split__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--cthree);
    border-radius: 50%;
}

/* CTA Button */
.split__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--space-sm);
    padding: 0.875rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--cfive);
    background: var(--cthree);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.split__cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.split__cta::after {
    content: '\2192';
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.split__cta:hover::after {
    transform: translateX(3px);
}

/* Bild-Container */
.split__image {
    position: relative;
    overflow: hidden;
}

.split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.split:hover .split__image img {
    transform: scale(1.02);
}

/* Map Variante */
.split__image--map {
    min-height: 400px;
}

.split__image--map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

@media (max-width: 900px) {
    .split {
        grid-template-columns: 1fr;
    }

    .split--reverse {
        direction: ltr;
    }

    .split__content {
        padding: var(--space-lg) var(--container-padding);
        order: 2;
    }

    .split__image {
        order: 1;
        aspect-ratio: 16/10;
    }

    .split__text {
        max-width: none;
    }
}

/* ========================================
   CATEGORIES
   ======================================== */
.categories {
    padding: var(--space-xl) var(--container-padding);
    background: var(--cfive);
}

.categories__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.categories__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--space-lg);
}

.categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.categories__grid--preview {
    max-width: 900px;
}

.categories__item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.categories__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.categories__item:hover img {
    transform: scale(1.05);
}

.categories__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    /* No gradient — text-shadow handles readability */
    color: var(--cfive);
}

.categories__number {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 300;
    display: block;
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.categories__name {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Team Grid Variante */
.categories__grid--team {
    grid-template-columns: repeat(4, 1fr);
}

.categories__item--team {
    aspect-ratio: 3/4;
}

.categories__overlay--team {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.categories__role {
    font-family: var(--font-body);
    font-size: 0.875rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

.categories__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-lg);
    color: var(--cone);
}

@media (max-width: 1024px) {
    .categories__grid--team {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .categories__grid {
        grid-template-columns: 1fr;
    }

    .categories__grid--team {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .categories__grid--team {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CTA SECTION
   ======================================== */
.cta {
    padding: var(--space-xl) var(--container-padding);
    background: var(--csix);
    text-align: center;
}

.cta__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.cta__title {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.cta__text {
    font-size: 1.125rem;
    color: var(--cfour);
    margin-bottom: var(--space-md);
}

.cta__button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--cone);
    color: var(--cfive);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition-fast);
}

.cta__button:hover {
    background: var(--cthree);
    color: var(--cfive);
}

.cta__button--primary {
    background: var(--cthree);
}

.cta__button--primary:hover {
    background: var(--accent-hover);
}

/* ========================================
   PAGE HEADER
   ======================================== */
.page-header {
    padding: calc(80px + var(--space-xl)) var(--container-padding) var(--space-xl);
    background: var(--csix);
}

.page-header--preview {
    padding: var(--space-lg) var(--container-padding);
}

.page-header__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.page-header__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--cthree);
    margin-bottom: var(--space-sm);
}

.page-header__title {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.page-header__intro {
    font-size: 1.125rem;
    color: var(--cfour);
    max-width: 600px;
}

/* Page Header with Image */
.page-header--image {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    background: transparent;
}

.page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.page-header__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay removed per design rules (no gradients on images) */

.page-header--image .page-header__container {
    position: relative;
    z-index: 1;
    color: var(--cfive);
}

.page-header--image .page-header__number {
    color: var(--cfive);
    opacity: 0.8;
}

/* ========================================
   GALLERY GRID
   ======================================== */
.gallery-grid {
    padding: var(--space-lg) var(--container-padding);
}

.gallery-grid__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.gallery-grid__container--preview {
    grid-template-columns: repeat(4, 1fr);
    max-width: 800px;
}

.gallery-grid__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.gallery-grid__item:hover img {
    transform: scale(1.05);
}

.gallery-grid__number {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--cfive);
    background: var(--cone);
    padding: 0.2rem 0.4rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.gallery-grid__item:hover .gallery-grid__number {
    opacity: 1;
}

@media (max-width: 900px) {
    .gallery-grid__container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .gallery-grid__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   FILTER
   ======================================== */
.filter {
    padding: var(--space-md) var(--container-padding);
    border-bottom: 1px solid var(--line);
}

.filter__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter__container--preview {
    max-width: 600px;
}

.filter__btn {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter__btn:hover,
.filter__btn.is-active {
    background: var(--cone);
    border-color: var(--cone);
    color: var(--cfive);
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
    padding: var(--space-lg) var(--container-padding);
    border-top: 1px solid var(--line);
}

.pagination__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.pagination__prev,
.pagination__next {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cthree);
    transition: opacity var(--transition-fast);
}

.pagination__prev:hover,
.pagination__next:hover {
    opacity: 0.7;
}

.pagination__current {
    font-size: 0.9rem;
    color: var(--cfour);
}

/* ========================================
   ARTICLE
   ======================================== */
.article {
    padding: var(--space-xl) var(--container-padding);
}

.article__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.article__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.article__content h2 {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 400;
    margin: var(--space-lg) 0 var(--space-sm);
}

.article__content h2:first-child {
    margin-top: 0;
}

.article__content p {
    margin-bottom: var(--space-sm);
}

.article__content ul,
.article__content ol {
    margin: var(--space-sm) 0 var(--space-md);
    padding-left: 1.5rem;
}

.article__content li {
    margin-bottom: 0.5rem;
}

.article__figure {
    margin: var(--space-lg) 0;
}

.article__figure img {
    width: 100%;
}

.article__figure figcaption {
    margin-top: var(--space-xs);
    font-size: 0.85rem;
    color: var(--cfour);
}

.article__figure--wide {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
}

.article__quote {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--csix);
    border-left: 3px solid var(--cthree);
}

.article__quote p {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-style: italic;
    margin: 0;
}

.article__cta {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--cthree);
    color: var(--cfive);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-sm);
}

.article__cta:hover {
    background: var(--accent-hover);
    color: var(--cfive);
}

/* ========================================
   CONTACT
   ======================================== */
.contact {
    padding: var(--space-xl) var(--container-padding);
}

.contact__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-xl);
}

.contact__heading {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-lg);
    color: var(--cone);
}

.contact__block {
    margin-bottom: var(--space-md);
}

.contact__block h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    color: var(--cfour);
}

.contact__block p,
.contact__block address {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--cone);
}

.contact__block a {
    color: var(--cthree);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.contact__block a:hover {
    opacity: 0.7;
}

.contact__note {
    font-size: 0.8rem;
    color: var(--cfour);
    margin-top: 0.35rem;
    opacity: 0.8;
}

.contact__social {
    list-style: none;
}

.contact__social li {
    margin-bottom: 0.5rem;
}

.contact__social a {
    color: var(--cthree);
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity var(--transition-fast);
}

.contact__social a:hover {
    opacity: 0.7;
}

address {
    font-style: normal;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .contact__container {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   FORMS
   ======================================== */
.form__group {
    margin-bottom: var(--space-md);
}

.form__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 1px solid var(--line);
    background: var(--cfive);
    transition: border-color var(--transition-fast);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--cone);
}

.form__textarea {
    resize: vertical;
    min-height: 150px;
}

.form__group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.form__checkbox {
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
}

.form__label--checkbox {
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0;
}

.form__submit {
    padding: 1rem 2.5rem;
    background: var(--cone);
    color: var(--cfive);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.form__submit:hover {
    background: var(--cthree);
}

.form__submit:disabled {
    background: var(--cfour);
    cursor: not-allowed;
}

/* ========================================
   MAP
   ======================================== */
.map {
    padding: 0;
}

.map__container {
    max-width: 100%;
}

.map__placeholder {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.map__placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.map__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    /* Kein Gradient auf Bildern — solider Text-Block */
    background: var(--ctext);
    color: var(--cfive);
    text-align: center;
}

/* ========================================
   PROJECT HERO
   ======================================== */
.project-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl) var(--container-padding);
}

.project-hero--preview {
    height: 50vh;
    min-height: 350px;
}

.project-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.project-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay removed per design rules (no gradients on images) */

.project-hero__content {
    position: relative;
    z-index: 1;
    color: var(--cfive);
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
}

.project-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    background: var(--cthree);
    margin-bottom: var(--space-sm);
}

.project-hero__title {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    margin-bottom: var(--space-xs);
}

.project-hero__meta {
    font-size: 1rem;
    opacity: 0.8;
}

/* ========================================
   PROJECT INTRO
   ======================================== */
.project-intro {
    padding: var(--space-xl) var(--container-padding);
}

.project-intro__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.project-intro__text {
    font-size: 1.0625rem;
}

.project-intro__lead {
    font-size: 1.375rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.project-intro__text p {
    margin-bottom: var(--space-sm);
}

/* ========================================
   PROJECT GALLERY
   ======================================== */
.project-gallery {
    padding: 0 var(--container-padding) var(--space-xl);
}

.project-gallery__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.project-gallery__item {
    margin-bottom: var(--space-lg);
}

.project-gallery__item a {
    display: block;
}

.project-gallery__item img {
    width: 100%;
}

.project-gallery__item figcaption {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--cfour);
}

.project-gallery__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cthree);
}

.project-gallery__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
    .project-gallery__row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   PROJECT CTA
   ======================================== */
.project-cta {
    padding: var(--space-xl) var(--container-padding);
    background: var(--csix);
    text-align: center;
}

.project-cta__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.project-cta__title {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.project-cta__text {
    font-size: 1.0625rem;
    color: var(--cfour);
    margin-bottom: var(--space-md);
}

.project-cta__buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.project-cta__button {
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--cone);
    transition: all var(--transition-fast);
}

.project-cta__button--primary {
    background: var(--cthree);
    border-color: var(--cthree);
    color: var(--cfive);
}

.project-cta__button--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--cfive);
}

.project-cta__button:not(.project-cta__button--primary):hover {
    background: var(--cone);
    color: var(--cfive);
}

/* ========================================
   MORE PROJECTS
   ======================================== */
.more-projects {
    padding: var(--space-xl) var(--container-padding);
}

.more-projects__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.more-projects__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--space-lg);
}

.more-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.more-projects__grid--preview {
    max-width: 900px;
}

.more-projects__item {
    display: block;
}

.more-projects__item img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-base);
}

.more-projects__item:hover img {
    transform: scale(1.02);
}

.more-projects__item h3 {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.more-projects__item span {
    font-size: 0.85rem;
    color: var(--cfour);
}

@media (max-width: 768px) {
    .more-projects__grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   STYLEGUIDE
   ======================================== */
.styleguide-nav {
    padding: var(--space-lg) var(--container-padding);
}

.styleguide-nav__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.styleguide-nav__container--preview {
    max-width: 700px;
}

.styleguide-nav__item {
    display: block;
    padding: var(--space-md);
    background: var(--csix);
    transition: background var(--transition-fast);
}

.styleguide-nav__item:hover {
    background: var(--line);
}

.styleguide-nav__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cthree);
    margin-bottom: var(--space-xs);
    display: block;
}

.styleguide-nav__item h2,
.styleguide-nav__item h3 {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.styleguide-nav__item p {
    font-size: 0.85rem;
    color: var(--cfour);
    margin: 0;
}

@media (max-width: 768px) {
    .styleguide-nav__container {
        grid-template-columns: 1fr 1fr;
    }
}

.styleguide-section {
    padding: var(--space-xl) var(--container-padding);
}

.styleguide-section--alt {
    background: var(--csix);
}

.styleguide-section__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.styleguide-section__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.styleguide-section__intro {
    font-size: 1.0625rem;
    color: var(--cfour);
    margin-bottom: var(--space-lg);
    max-width: 700px;
}

/* Color Swatches */
.color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
}

.color-swatches--large {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--space-lg);
}

.color-swatch {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-sm);
    color: var(--cfive);
}

.color-swatch--light {
    color: var(--cone);
    border: 1px solid var(--line);
}

.color-swatch__name {
    font-size: 0.8rem;
    font-weight: 500;
}

.color-swatch__var {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    opacity: 0.8;
}

.color-swatch__value {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .color-swatches {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Type Specimens */
.type-specimens {
    display: grid;
    gap: var(--space-md);
}

.type-specimen__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cthree);
    margin-bottom: 0.5rem;
    display: block;
}

.type-specimen__sample--headline {
    font-family: var(--font-headline);
    font-size: 2.5rem;
}

.type-specimen__sample--body {
    font-family: var(--font-body);
    font-size: 1.125rem;
}

.type-specimen__sample--mono {
    font-family: var(--font-mono);
    font-size: 1rem;
}

/* Type Families */
.type-families {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.type-family__sample {
    margin-bottom: 0.5rem;
}

.type-family__desc {
    font-size: 0.9rem;
    color: var(--cfour);
}

/* Type Scale */
.type-scale {
    display: grid;
    gap: var(--space-md);
}

.type-scale__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
}

.type-scale__label {
    flex: 0 0 60px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cthree);
}

/* Spacing Scale */
.spacing-scale {
    display: grid;
    gap: var(--space-sm);
}

.spacing-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.spacing-box {
    background: var(--cthree);
    flex-shrink: 0;
}

.spacing-item span {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.spacing-item span:last-child {
    color: var(--cfour);
}

/* Styleguide Examples */
.styleguide-example {
    padding: var(--space-md);
    background: var(--cfive);
    border: 1px solid var(--line);
}

.styleguide-example--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.styleguide-example--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.styleguide-form {
    max-width: 500px;
}

.styleguide-preview {
    padding: var(--space-lg) var(--container-padding);
}

.styleguide-preview--dark {
    background: var(--cone);
}

.styleguide-preview--fullwidth {
    padding: 0;
    max-width: 100%;
}

/* Styleguide Pagination */
.styleguide-pagination {
    display: flex;
    justify-content: space-between;
    padding: var(--space-lg) var(--container-padding);
    border-top: 1px solid var(--line);
    max-width: var(--container-max);
    margin: 0 auto;
}

.styleguide-pagination__prev,
.styleguide-pagination__next {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.styleguide-pagination__prev::before {
    content: '\2190 ';
}

.styleguide-pagination__next::after {
    content: ' \2192';
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: var(--mandant-footer-bg, var(--cone));
    color: var(--mandant-footer-text, var(--cfive));
    padding: var(--space-xl) var(--container-padding) var(--space-md);
}

.footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer__logo {
    display: block;
    margin-bottom: var(--mandant-footer-logo-margin-bottom, 1.5rem);
}

.footer__logo img {
    width: var(--mandant-footer-logo-width, 280px);
    height: auto;
    filter: brightness(0) invert(1);
}

.footer__tagline {
    font-size: 1.1rem;
    font-style: italic;
    /* Fixed: removed opacity:0.9 — color from token chain, no opacity dimming */
    color: var(--mandant-footer-text, var(--cfive));
    margin-top: var(--space-sm);
}

.footer__min-logo {
    margin-top: var(--space-md);
}

.footer__min-logo img {
    height: 50px;
    width: auto;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.footer__min-logo a:hover img {
    opacity: 1;
}

.footer__social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.footer__social a {
    /* Fixed: use footer text token for consistent color */
    color: var(--mandant-footer-text, var(--cfive));
    opacity: 1;
    transition: color var(--transition-fast);
}

.footer__social a:hover {
    color: var(--mandant-footer-link-hover, var(--mandant-accent));
}

.footer__nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.footer__heading {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: 0.6rem;
}

.footer__links a {
    font-size: 1rem;
    color: var(--mandant-footer-text, var(--cfive));
    /* Fixed: removed opacity:0.9 — solid color from token chain ensures WCAG AA */
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--mandant-footer-link-hover, var(--cfive));
}

.footer__address {
    font-size: 1rem;
    /* Fixed: removed opacity:0.9 */
    line-height: 1.8;
}

.footer__address a {
    color: var(--mandant-footer-link-hover, var(--cfive));
}

.footer__bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-inline: calc(-1 * var(--container-padding));
    padding: var(--space-sm) var(--container-padding);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    background: var(--mandant-footer-bottom-bg, transparent);
    color: var(--mandant-footer-bottom-text, inherit);
}

.footer__agency img {
    height: 20px;
    width: auto;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.footer__agency:hover img {
    opacity: 1;
}

@media (max-width: 900px) {
    .footer__top {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .footer__nav {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

/* ========================================
   STANDORT-KARTE (DSGVO-konform)
   ======================================== */
.map-section {
    width: 100%;
    position: relative;
}

.map-section__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    min-height: 480px;
}

.map-section__info {
    /* Fixed: #777 bg + white text = 4.48:1 (AA-Large only). Use #555 for AA normal text. */
    background: #555555;
    color: #ffffff;
    padding: var(--space-xl) var(--container-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-section__title {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.map-section__address {
    font-style: normal;
    line-height: 1.8;
    font-size: 1.05rem;
    /* Fixed: removed opacity:0.9 — would yield 3.96:1 FAIL on #555 bg -> use solid #e8e8e8 */
    color: #e8e8e8;
}

.map-section__phone {
    display: inline-block;
    margin-top: var(--space-sm);
    /* Fixed: removed opacity:0.9 -> solid white #fff on #555 = 7.46:1 AA */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color var(--transition-fast);
}

.map-section__phone:hover {
    color: #e8e8e8;
}

.map-section__map {
    position: relative;
    min-height: 480px;
    background: var(--csix);
}

.map-section__consent {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--csix);
    text-align: center;
    padding: var(--space-md);
    z-index: 10;
}

.map-section__consent p {
    color: var(--cfour);
    font-size: 0.95rem;
    max-width: 360px;
}

.map-section__consent-btn {
    /* Fixed: --cone=#777 + white = 4.48:1 (AA-Large only). Use #555 for AA normal text. */
    background: #555555;
    color: #ffffff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.map-section__consent-btn:hover {
    background: var(--cthree);
}

/* Leaflet Container */
.map-section__map .leaflet-container {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
}

@media (max-width: 768px) {
    .map-section__inner {
        grid-template-columns: 1fr;
    }

    .map-section__info {
        padding: var(--space-lg) var(--container-padding);
    }

    .map-section__map {
        min-height: 360px;
    }
}

/* ========================================
   BACK TO TOP
   ======================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cone);
    color: var(--cfive);
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 100;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--cthree);
}

.back-to-top--preview {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   UTILITIES
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* ========================================
   GSAP ANIMATIONS
   ======================================== */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
}

body.gsap-ready .reveal-up,
body.gsap-ready .reveal-left,
body.gsap-ready .reveal-right {
    opacity: 1;
    transform: none;
}

/* Fallback ohne GSAP */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}

/* GSAP Fallback Animation */
@keyframes reveal-fallback {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body:not(.gsap-ready) .reveal-up,
body:not(.gsap-ready) .reveal-left,
body:not(.gsap-ready) .reveal-right {
    animation: reveal-fallback 0.6s ease forwards;
    animation-delay: 0.2s;
}

/* ========================================
   VARIANTEN-HINWEIS (für Prototyp-Navigation)
   ======================================== */
.variant-notice {
    position: fixed;
    top: 70px;
    right: 1rem;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--ctwo);
    color: white;
    font-size: 0.75rem;
    box-shadow: var(--shadow-md);
}

.variant-notice__label {
    background: rgba(255,255,255,0.2);
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.variant-notice__text {
    font-weight: 400;
}

.variant-notice__link {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.variant-notice__link:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .variant-notice {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        border-radius: 0;
    }
}

/* ========================================
   MASONRY GALLERY (Variante B)
   ======================================== */
.gallery-masonry {
    padding: var(--space-lg) 0;
}

.gallery-masonry__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.gallery-masonry__item {
    position: relative;
    overflow: hidden;
    display: block;
}

.gallery-masonry__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-masonry__item:hover img {
    transform: scale(1.05);
}

.gallery-masonry__item--tall {
    grid-row: span 2;
}

.gallery-masonry__item--wide {
    grid-column: span 2;
}

.gallery-masonry__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    /* Kein Gradient auf Bildern — solider Text-Block */
    background: var(--ctext);
    color: var(--cfive);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.gallery-masonry__item:hover .gallery-masonry__overlay {
    transform: translateY(0);
}

.gallery-masonry__title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.gallery-masonry__subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .gallery-masonry__container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-masonry__container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }
    .gallery-masonry__item--wide {
        grid-column: span 1;
    }
}

/* ========================================
   FULLSCREEN GALLERY (Variante C)
   ======================================== */
.gallery-fullscreen {
    position: relative;
    height: 80vh;
    min-height: 500px;
    overflow: hidden;
}

.gallery-fullscreen__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.gallery-fullscreen__slide.is-active {
    opacity: 1;
}

.gallery-fullscreen__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-fullscreen__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl) var(--space-lg);
    /* Kein Gradient auf Bildern — Text-Shadow fuer Lesbarkeit */
    background: transparent;
    color: var(--cfive);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.gallery-fullscreen__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.gallery-fullscreen__title {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.gallery-fullscreen__desc {
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.gallery-fullscreen__zoom {
    display: inline-block;
    color: white;
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: border-color var(--transition-fast);
}

.gallery-fullscreen__zoom:hover {
    border-color: white;
}

.gallery-fullscreen__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
}

.gallery-fullscreen__prev,
.gallery-fullscreen__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: all var(--transition-fast);
}

.gallery-fullscreen__prev:hover,
.gallery-fullscreen__next:hover {
    background: white;
}

.gallery-fullscreen__thumbs {
    position: absolute;
    bottom: 1rem;
    right: var(--space-lg);
    display: flex;
    gap: 0.5rem;
}

.gallery-fullscreen__thumb {
    width: 60px;
    height: 40px;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: all var(--transition-fast);
    overflow: hidden;
}

.gallery-fullscreen__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-fullscreen__thumb:hover,
.gallery-fullscreen__thumb.is-active {
    opacity: 1;
    border-color: white;
}

@media (max-width: 768px) {
    .gallery-fullscreen {
        height: 70vh;
    }
    .gallery-fullscreen__thumbs {
        display: none;
    }
    .gallery-fullscreen__content {
        padding: var(--space-lg) var(--space-md);
    }
}

/* ========================================
   IMAGE COMPARE (Before/After)
   ======================================== */
.image-compare {
    max-width: 800px;
    margin: 0 auto;
}

.image-compare__container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.image-compare__before,
.image-compare__after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.image-compare__before img,
.image-compare__after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-compare__before {
    clip-path: inset(0 50% 0 0);
}

.image-compare__label {
    position: absolute;
    bottom: var(--space-sm);
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-compare__before .image-compare__label {
    left: var(--space-sm);
}

.image-compare__after .image-compare__label {
    right: var(--space-sm);
}

.image-compare__slider {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 4px;
    background: white;
    cursor: ew-resize;
    z-index: 10;
}

.image-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.image-compare__handle svg {
    color: var(--cone);
}

/* ========================================
   FILMSTRIP GALLERY
   ======================================== */
.gallery-filmstrip {
    overflow: hidden;
    padding: var(--space-md) 0;
    background: var(--cone);
}

.gallery-filmstrip__track {
    display: flex;
    gap: var(--space-xs);
    animation: filmstrip-scroll 30s linear infinite;
}

.gallery-filmstrip__track img {
    height: 200px;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes filmstrip-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.gallery-filmstrip:hover .gallery-filmstrip__track {
    animation-play-state: paused;
}

/* ========================================
   LIGHTBOX GALLERY
   ======================================== */
.gallery-lightbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

@media (max-width: 768px) {
    .gallery-lightbox {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gallery-lightbox__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
}

.gallery-lightbox__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.gallery-lightbox__item:hover img {
    transform: scale(1.05);
}

.gallery-lightbox__zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-base);
}

.gallery-lightbox__item:hover .gallery-lightbox__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-lightbox__zoom svg {
    color: var(--cone);
}

/* ========================================
   SERVICES TILES (Leistungen Variante B)
   ======================================== */
.services-tiles {
    padding: var(--space-xl) 0;
}

.services-tiles__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 50vh;
    text-decoration: none;
    color: inherit;
}

.services-tiles__item--reverse {
    direction: rtl;
}

.services-tiles__item--reverse > * {
    direction: ltr;
}

.services-tiles__image {
    position: relative;
    overflow: hidden;
}

.services-tiles__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.services-tiles__item:hover .services-tiles__image img {
    transform: scale(1.05);
}

.services-tiles__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl);
    background: var(--csix);
}

.services-tiles__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cthree);
    margin-bottom: 1rem;
}

.services-tiles__title {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    margin-bottom: 1rem;
}

.services-tiles__text {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.services-tiles__link {
    font-size: 0.875rem;
    color: var(--cthree);
    transition: color var(--transition-fast);
}

.services-tiles__item:hover .services-tiles__link {
    color: var(--accent-hover);
}

@media (max-width: 768px) {
    .services-tiles__item {
        grid-template-columns: 1fr;
    }
    .services-tiles__item--reverse {
        direction: ltr;
    }
    .services-tiles__image {
        height: 250px;
    }
    .services-tiles__content {
        padding: var(--space-lg);
    }
}

/* ========================================
   TIMELINE (Über uns Variante B)
   ======================================== */
.timeline {
    padding: var(--space-xl) 0;
}

.timeline__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.timeline__item {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--line);
}

.timeline__item--reverse {
    grid-template-columns: 100px 1fr 1fr;
}

.timeline__item--reverse .timeline__content {
    order: 2;
}

.timeline__item--reverse .timeline__image {
    order: 1;
}

.timeline__year {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cthree);
}

.timeline__content {
    padding-right: var(--space-lg);
}

.timeline__title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.timeline__text {
    font-size: 1rem;
    line-height: 1.7;
}

.timeline__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.timeline__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .timeline__item {
        grid-template-columns: 80px 1fr;
    }
    .timeline__item--reverse .timeline__content,
    .timeline__item--reverse .timeline__image {
        order: unset;
    }
    .timeline__image {
        grid-column: 2;
        margin-top: var(--space-md);
    }
}

@media (max-width: 768px) {
    .timeline__item {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .timeline__year {
        font-size: 1.25rem;
    }
    .timeline__content {
        padding-right: 0;
    }
}

/* ========================================
   STATS SECTION (Zahlen)
   ======================================== */
.stats {
    padding: var(--space-xl) 0;
    background: var(--csix);
}

.stats__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.stats__title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--cone);
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    text-align: center;
}

.stats__item {
    padding: var(--space-md);
}

.stats__number {
    display: block;
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--cthree);
    margin-bottom: 0.5rem;
}

.stats__label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 768px) {
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* ========================================
   HERO COMPACT (für Unterseiten)
   ======================================== */
.hero--compact {
    height: 50vh;
    min-height: 400px;
}

.hero--compact .hero__content {
    padding-bottom: var(--space-lg);
}

/* ========================================
   ANIMATION DEMOS (Styleguide)
   ======================================== */

/* GSAP Demo Boxes */
.gsap-demo {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.gsap-demo__box {
    width: 120px;
    height: 120px;
    background: var(--cthree);
    color: var(--cfive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
}

.gsap-demo__item {
    width: 80px;
    height: 80px;
    background: var(--csix);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.gsap-demo__card {
    width: 200px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.gsap-demo__card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.gsap-demo__card span {
    display: block;
    padding: var(--space-sm);
    font-size: 0.875rem;
    background: var(--csix);
}

/* Text Reveal Demo */
.gsap-demo--text h3 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-xs);
    overflow: hidden;
}

/* Parallax Demo */
.parallax-demo {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.parallax-demo__bg {
    position: absolute;
    inset: -50px;
}

.parallax-demo__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parallax-demo__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--cfive);
    background: rgba(0, 0, 0, 0.4);
}

.parallax-demo__content h3 {
    font-family: var(--font-headline);
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

/* Hover Demos */
.hover-demo {
    position: relative;
    width: 300px;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.hover-demo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hover-demo--zoom:hover img {
    transform: scale(1.1);
}

.hover-demo__label {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    padding: 0.5rem 1rem;
    background: var(--cfive);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.hover-demo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: var(--cfive);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hover-demo--overlay:hover .hover-demo__overlay {
    opacity: 1;
}

.hover-demo__overlay span {
    display: block;
}

.hover-demo__overlay span:first-child {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.hover-demo__overlay span:last-child {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Hover Demo Grid */
.hover-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

@media (max-width: 768px) {
    .hover-demo-grid {
        grid-template-columns: 1fr;
    }
}

/* Parallax Demo */
.parallax-demo {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-demo__image {
    position: absolute;
    top: -20%;
    left: 0;
    right: 0;
    bottom: -20%;
    z-index: 0;
}

.parallax-demo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parallax-demo__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.parallax-demo__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--cfive);
    max-width: 600px;
    padding: var(--space-md);
}

.parallax-demo__content h3 {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-sm);
}

.parallax-demo__content p {
    font-size: 1.125rem;
    opacity: 0.9;
}

/* Scroll Progress Demo */
.scroll-progress-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.scroll-progress-demo__bar {
    width: 100%;
    max-width: 400px;
    height: 4px;
    background: var(--csix);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.scroll-progress-demo__bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background: var(--cthree);
    border-radius: 2px;
}

/* Styleguide Rules */
.styleguide-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.styleguide-rule {
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.styleguide-rule--do {
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid rgba(76, 175, 80, 1);
}

.styleguide-rule--dont {
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid rgba(244, 67, 54, 1);
}

.styleguide-rule h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.styleguide-rule ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styleguide-rule li {
    padding: 0.375rem 0;
    font-size: 0.9rem;
    color: var(--cfour);
}

.styleguide-note {
    padding: var(--space-md);
    background: var(--csix);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin-top: var(--space-md);
}

.styleguide-code {
    margin-top: var(--space-md);
    background: hsl(233, 33%, 14%);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.styleguide-code pre {
    margin: 0;
    padding: var(--space-md);
    overflow-x: auto;
}

.styleguide-code code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: hsl(240, 5%, 91%);
    line-height: 1.6;
}

/* ========================================
   ANIMATION DEMOS (Interactive)
   ======================================== */
.anim-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.anim-demo__stage {
    min-height: 150px;
    padding: var(--space-md);
    background: var(--csix);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.anim-demo__box {
    width: 120px;
    height: 80px;
    background: var(--cthree);
    color: var(--cfive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.anim-demo__list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 300px;
}

.anim-demo__list li {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--cfive);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--cthree);
}

.anim-demo__cards {
    display: flex;
    gap: var(--space-sm);
}

.anim-demo__card {
    width: 80px;
    height: 80px;
    background: var(--cthree);
    color: var(--cfive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    border-radius: var(--radius-sm);
}

.anim-demo__play {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background: var(--cthree);
    color: var(--cfive);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.anim-demo__play:hover {
    background: var(--accent-hover);
}

.anim-demo__play:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ========================================
   REFERENZ-DETAILSEITE (referenz-dankbar.php + Schablone)
   Inspiration: cvb-meinhaus.de — adaptiert für Reehuis-Stil
   ======================================== */

/* --- Hero --- */
.referenz-hero {
    position: relative;
    height: 75vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
}

.referenz-hero__image {
    position: absolute;
    inset: 0;
}

.referenz-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.referenz-hero__overlay {
    display: none;
}

.referenz-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 3rem var(--container-padding);
    max-width: var(--container-max);
    margin: 0 auto;
    gap: 0;
}

.referenz-hero__textbox {
    background: rgba(0, 0, 0, 0.65);
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.referenz-hero__back {
    margin-bottom: 0.75rem;
}

.referenz-back-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.875rem;
    font-family: var(--font-body);
    letter-spacing: 0.03em;
    transition: color var(--transition-fast), background var(--transition-fast);
    background: rgba(0, 0, 0, 0.45);
    padding: 0.4rem 0.75rem;
}

.referenz-back-link:hover {
    color: #fff;
}

.referenz-hero__badge {
    color: var(--cthree);
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
}

.referenz-hero__category {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.referenz-hero__title {
    font-family: var(--font-headline);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    color: #fff;
    line-height: var(--line-hero);
    margin: 0;
}

.referenz-hero__location {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* --- Info-Split --- */
.referenz-info {
    padding: var(--section-default) var(--container-padding);
    background: var(--cfive);
}

.referenz-info__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.referenz-info__title {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #333;
    line-height: var(--line-heading);
    margin-bottom: var(--space-md);
}

.referenz-info__body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-body);
    color: var(--cfour);
}

.referenz-info__body p {
    margin-bottom: 1.25rem;
}

.referenz-info__body p:last-child {
    margin-bottom: 0;
}

/* --- Projektdaten-Kacheln 2×2 --- */
.projekt-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.projekt-data__item {
    background: var(--csix);
    border: 1px solid var(--line);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.projekt-data__item:hover {
    border-color: var(--cthree);
    box-shadow: var(--shadow-md);
}

.projekt-data__icon {
    width: 32px;
    height: 32px;
    color: var(--cthree);
    flex-shrink: 0;
}

.projekt-data__icon svg {
    width: 100%;
    height: 100%;
}

.projekt-data__value {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.projekt-data__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cone);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Dunkle Datentafel --- */
.projekt-stats {
    background: #1a1a1a;
    padding: var(--space-xl) var(--container-padding);
    position: relative;
    overflow: hidden;
}

/* Subtiles Plan-Hintergrundbild — dezente Textur, Opacity 0.10 */
.projekt-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/fileadmin/fotos/reehuis_freepik_office-architecture-and-person-with-blueprint-for_04-03-2026.jpeg');
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

.projekt-stats__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr 2fr;
    gap: var(--space-2xl);
    align-items: start;
    position: relative;
    z-index: 1;
}

.projekt-stats__icon {
    width: 64px;
    height: 64px;
    background: var(--cthree);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    padding: 12px;
}

.projekt-stats__icon svg {
    width: 100%;
    height: 100%;
}

.projekt-stats__table {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.projekt-stats__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.projekt-stats__label {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.65);
}

.projekt-stats__value {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.projekt-stats__divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 0.375rem 0;
}

.projekt-stats__row--total .projekt-stats__label,
.projekt-stats__row--total .projekt-stats__value {
    font-weight: 700;
    color: #fff;
    font-size: 1.0625rem;
}

.projekt-stats__besonderheit {
    display: flex;
    align-items: center;
}

.projekt-stats__highlight {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.55);
    border-left: 3px solid var(--cthree);
    padding-left: 1.25rem;
}

/* --- Planung-Split (Text links, Bild rechts) — kompakt --- */
.referenz-planung {
    background: var(--csix);
    padding: var(--space-xl) var(--container-padding);
}

.referenz-planung__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.referenz-planung__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.referenz-planung__title {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #333;
    line-height: var(--line-heading);
    margin: 0;
}

.referenz-planung__body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-body);
    color: var(--cfour);
}

.referenz-planung__body p {
    margin-bottom: 1.25rem;
}

.referenz-planung__body p:last-child {
    margin-bottom: 0;
}

.referenz-planung__image-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.referenz-planung__image-wrap img,
.referenz-planung__image img {
    width: 100%;
    display: block;
    max-height: 350px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.referenz-planung__image-wrap:hover img {
    transform: scale(1.02);
}

@media (max-width: 767px) {
    .referenz-planung__container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .referenz-planung__image-wrap {
        order: -1;
    }
}

/* --- Grundriss-Grid (2er-Raster mit Captions) --- */
.referenz-grundriss {
    background: var(--cfive);
    padding: var(--section-default) var(--container-padding);
}

.referenz-grundriss__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.referenz-grundriss__header {
    margin-bottom: var(--space-xl);
}

.referenz-grundriss__title {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #333;
    line-height: var(--line-heading);
    margin: 0;
}

.referenz-grundriss__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.referenz-grundriss__item {
    display: flex;
    flex-direction: column;
}

.referenz-grundriss__image-wrap {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.referenz-grundriss__image-wrap img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.referenz-grundriss__item:hover .referenz-grundriss__image-wrap img {
    transform: scale(1.02);
}

.referenz-grundriss__caption {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--cone);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

@media (max-width: 767px) {
    .referenz-grundriss__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Parallax-Trenner: entfernt (2026-03-12) */

/* --- Referenz Summary (einfache Sprache) ---
   Visuell an Info-Split angebunden: gleicher Background,
   gleicher Container, fungiert als Einleitung zum Content.
   padding-bottom bewusst kleiner — nahtloser Uebergang zu .referenz-info */
.referenz-summary {
    padding: var(--space-2xl) var(--container-padding) 0;
    background: var(--cfive);
}

.referenz-summary__container {
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: center;
}

.referenz-summary__text {
    font-family: var(--font-body);
    font-size: var(--font-size-body, 1rem);
    line-height: var(--line-height-body, 1.7);
    color: var(--cfour);
    max-width: 38em;
    margin-inline: auto;
}

[data-theme="dark"] .referenz-summary {
    background: #111;
}

[data-theme="dark"] .referenz-summary__text {
    color: var(--cfive);
}

/* --- Gallery Fullwidth (Referenz-Detail) --- */
/* Override: globale ce-gallery Regel begrenzt auf max-width: 1400px --
   gallery-fullwidth muss 100vw breit sein, kein Container-Constraint */
.gallery-fullwidth {
    padding: var(--space-xl) 0;
    max-width: none;
    margin-inline: 0;
    width: 100%;
}

.gallery-fullwidth__header {
    max-width: var(--container-max);
    margin: 0 auto var(--space-md);
    padding: 0 var(--container-padding);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.gallery-fullwidth__title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.gallery-fullwidth__hint {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--cone);
    letter-spacing: 0.04em;
}

.gallery-fullwidth__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-fullwidth__track {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 0 var(--container-padding);
}

.gallery-fullwidth__track::-webkit-scrollbar {
    display: none;
}

.gallery-fullwidth__item {
    flex: 0 0 clamp(280px, 80vw, 450px);
    position: relative;
    scroll-snap-align: start;
    display: block;
    overflow: hidden;
}

@media (min-width: 640px) {
    .gallery-fullwidth__item {
        flex: 0 0 clamp(280px, 45vw, 450px);
    }
}

@media (min-width: 1024px) {
    .gallery-fullwidth__item {
        flex: 0 0 clamp(320px, 33vw, 450px);
    }
}

.gallery-fullwidth__item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.gallery-fullwidth__item:hover img {
    transform: scale(1.01);
}

.gallery-fullwidth__number {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.35rem 0.65rem;
    z-index: 1;
}

.gallery-fullwidth__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gallery-fullwidth__arrow:hover {
    background: #fff;
    color: var(--cthree);
}

.gallery-fullwidth__arrow svg {
    width: 20px;
    height: 20px;
}

.gallery-fullwidth__arrow--prev {
    left: var(--space-md);
}

.gallery-fullwidth__arrow--next {
    right: var(--space-md);
}

/* Dark mode */
[data-theme="dark"] .gallery-fullwidth__title {
    color: #f0f0f0;
}

[data-theme="dark"] .gallery-fullwidth__hint {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .gallery-fullwidth__arrow {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .gallery-fullwidth__arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    color: var(--cthree);
}

[data-theme="dark"] .gallery-fullwidth__number {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Referenz Back-Navigation --- */
.referenz-nav {
    background: var(--csix);
    border-top: 1px solid var(--line);
    padding: var(--space-md) var(--container-padding);
}

.referenz-nav__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.referenz-nav__back {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cfour);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.referenz-nav__back svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.referenz-nav__back:hover {
    color: var(--cthree);
}

.referenz-nav__current {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--cone);
}

/* ========================================
   REFERENZEN-ÜBERSICHT: Kachel-Grid
   (referenzen.php — neue Version)
   ======================================== */

/* --- Filter --- */
.referenz-filter {
    padding: var(--space-lg) var(--container-padding) var(--space-md);
    background: var(--cfive);
    border-bottom: 1px solid var(--line);
}

.referenz-filter__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.referenz-filter__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cone);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 0.5rem;
}

.filter__btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--cfour);
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.02em;
}

.filter__btn:hover {
    border-color: var(--cthree);
    color: var(--cthree);
}

.filter__btn.is-active {
    background: var(--cthree);
    border-color: var(--cthree);
    color: #fff;
}

/* --- Kachel-Grid --- */
.referenz-grid {
    padding: var(--section-default) var(--container-padding);
    background: var(--cfive);
}

.referenz-grid__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.referenz-grid__header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.referenz-grid__statement {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--line-heading);
}

.referenz-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* --- Referenz-Kachel --- */
.referenz-card {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.referenz-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-3px);
}

.referenz-card__image-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}

.referenz-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.referenz-card:hover .referenz-card__image-wrap img {
    transform: scale(1.04);
}

.referenz-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    background: var(--cthree);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.referenz-card__body {
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: none;
}

.referenz-card__name {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem;
}

.referenz-card__desc {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--cone);
    margin: 0 0 0.875rem;
}

.referenz-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--cfour);
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.referenz-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.referenz-card__meta-item svg {
    width: 14px;
    height: 14px;
    color: var(--cthree);
    flex-shrink: 0;
}

/* --- Responsive: Referenz-Detailseite --- */
@media (max-width: 1024px) {
    .referenz-info__container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .projekt-stats__container {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .projekt-stats__besonderheit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .referenz-hero {
        height: 60vh;
        min-height: 400px;
    }

    .referenz-hero__title {
        font-size: 2.25rem;
    }

    .projekt-data {
        grid-template-columns: 1fr 1fr;
    }

    .projekt-stats__container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .projekt-stats__icon {
        display: none;
    }

    .referenz-grid__items {
        grid-template-columns: repeat(2, 1fr);
    }

    .referenz-nav__current {
        display: none;
    }
}

@media (max-width: 576px) {
    .referenz-grid__items {
        grid-template-columns: 1fr;
    }

    .projekt-data {
        grid-template-columns: 1fr 1fr;
    }

    .referenz-filter__container {
        gap: 0.5rem;
    }
}

/* ========================================================================
   DARK MODE: Referenz-Komponenten
   WCAG 2.1 AA: min 4.5:1 Kontrast fuer normalen Text, 3:1 fuer grossen Text
   Palette: bg #111, surface #1a1a1a, elevated #222, text #e8e8e8, muted #aaa
   ======================================================================== */

/* --- Info-Split --- */
[data-theme="dark"] .referenz-info {
    background: #111;
}

[data-theme="dark"] .referenz-info__title {
    color: #e8e8e8;
}

[data-theme="dark"] .referenz-info__body {
    color: #b0b0b0;
}

/* --- Projekt-Datenkacheln --- */
[data-theme="dark"] .projekt-data__item {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .projekt-data__value {
    color: #e8e8e8;
}

[data-theme="dark"] .projekt-data__label {
    color: #aaa;
}

[data-theme="dark"] .projekt-data__icon {
    color: #CD1719;
}

/* --- Referenz-Grid (Uebersicht) --- */
[data-theme="dark"] .referenz-grid {
    background: #111;
}

[data-theme="dark"] .referenz-card__body {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .referenz-card__name {
    color: #e8e8e8;
}

[data-theme="dark"] .referenz-card__desc {
    color: #aaa;
}

[data-theme="dark"] .referenz-card__meta {
    color: #999;
}

/* --- Filter --- */
[data-theme="dark"] .referenz-filter {
    background: #111;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .filter__btn {
    color: #b0b0b0;
    border-color: rgba(255,255,255,0.15);
}

[data-theme="dark"] .filter__btn.is-active {
    color: #fff;
}

[data-theme="dark"] .referenz-grid__statement {
    color: #e8e8e8;
}

/* --- Gallery --- */
[data-theme="dark"] .gallery-horizontal__title {
    color: #e8e8e8;
}

/* --- Navigation (Detailseite) --- */
[data-theme="dark"] .referenz-nav {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .referenz-nav__back {
    color: #b0b0b0;
}

[data-theme="dark"] .referenz-nav__link {
    color: #e8e8e8;
}

/* --- Planung-Split --- */
[data-theme="dark"] .referenz-planung {
    background: #141414;
}

[data-theme="dark"] .referenz-planung__title {
    color: #e8e8e8;
}

[data-theme="dark"] .referenz-planung__body {
    color: #b0b0b0;
}

/* --- Grundriss-Grid --- */
[data-theme="dark"] .referenz-grundriss {
    background: #111;
}

[data-theme="dark"] .referenz-grundriss__title {
    color: #e8e8e8;
}

[data-theme="dark"] .referenz-grundriss__caption {
    color: #aaa;
}

/* --- CTA --- */
[data-theme="dark"] .cta {
    background: #111;
}

[data-theme="dark"] .cta__title {
    color: #e8e8e8;
}

[data-theme="dark"] .cta__text {
    color: #b0b0b0;
}

/* --- Projekt-Stats (dunkle Leiste) --- */
[data-theme="dark"] .projekt-stats {
    background: #0d0d0d;
}

[data-theme="dark"] .projekt-stats__label {
    color: #aaa;
}

[data-theme="dark"] .projekt-stats__value {
    color: #e8e8e8;
}

/* --- Footer (Dark Mode) --- */
[data-theme="dark"] .footer,
[data-theme="dark"] .ce-footer {
    --mandant-footer-bg: var(--cfive);
    --mandant-footer-text: var(--min-text-on-dark, #e8e8e8);
    --mandant-footer-bottom-bg: var(--min-bg-darker, #0d0d0d);
    --ce-footer-bg: var(--cfive);
    --ce-footer-text: var(--min-text-on-dark, #e8e8e8);
    --ce-footer-muted: #aaa;
    --ce-footer-link-hover: var(--mandant-accent);
    --ce-footer-border: rgba(255,255,255,0.1);
    background-color: var(--cfive);
    color: var(--min-text-on-dark, #e8e8e8);
}

[data-theme="dark"] .footer__heading {
    color: var(--min-text-on-dark, #e8e8e8);
}

[data-theme="dark"] .footer__links a,
[data-theme="dark"] .footer__list a,
[data-theme="dark"] .footer__address {
    color: #b0b0b0;
    opacity: 1;
}

[data-theme="dark"] .footer__links a:hover,
[data-theme="dark"] .footer__list a:hover,
[data-theme="dark"] .footer__address a:hover {
    color: var(--mandant-accent);
}

[data-theme="dark"] .footer__bottom {
    background: var(--mandant-footer-bottom-bg, #0d0d0d);
    color: #aaa;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .footer__tagline {
    color: #999;
}

[data-theme="dark"] .footer__logo img {
    filter: brightness(0) invert(1);
}

/* --- Footer Accessibility (WCAG 2.1 AA) --- */
/* Solid color from token chain — no opacity dimming */
.footer__links a,
.footer__list a,
.footer__address {
    opacity: 1;
    color: var(--mandant-footer-text, var(--cfive));
}

.footer__links a:hover,
.footer__list a:hover {
    color: var(--mandant-footer-link-hover, var(--mandant-accent));
}

.footer__address a {
    color: var(--mandant-footer-link-hover, var(--mandant-accent));
}

/* Dark mode social icons */
[data-theme="dark"] .footer__social a {
    color: #b0b0b0;
}

[data-theme="dark"] .footer__social a:hover {
    color: var(--mandant-accent);
}

/* Dark mode map section: adapt to dark context */
[data-theme="dark"] .map-section__info {
    /* Slightly darker than light-mode #555 — fits dark palette */
    background: #333333;
    color: #e8e8e8;
}

[data-theme="dark"] .map-section__address {
    color: #cccccc;
}

[data-theme="dark"] .map-section__phone {
    color: #e8e8e8;
}


/* === Kunden-Overrides (gewinnt IMMER via @layer mandant) === */
/* --- ./mandant.css --- */
/* AUTO-GENERATED by build-css.ts - Kunden-Tokens */
/* Kunde: reehuis */
/* Regenerate: npx tsx content-elements/generators/build-css.ts reehuis */
@layer mandant {
  :root {
    /* Farben */
    --mandant-primary: #777777;
    --mandant-secondary: #337AB7;
    --mandant-accent: #CD1719;
    --mandant-bg: #ffffff;
    --mandant-text: #555555;
    --mandant-muted: #777777;
    --mandant-surface: #f8f9fa;
    --mandant-border: rgba(0, 0, 0, 0.08);

    /* Typografie */
    --mandant-font-heading: 'Playfair Display', Georgia, serif;
    --mandant-font-body: 'Inter', -apple-system, sans-serif;
    --mandant-font-size: 1rem;
    --mandant-font-mono: 'JetBrains Mono', SF Mono, monospace;

    /* Spacing */
    --mandant-space-xs: 0.5rem;
    --mandant-space-sm: 1rem;
    --mandant-space-md: 2rem;
    --mandant-space-lg: 4rem;
    --mandant-space-section: 6rem;
    --mandant-space-xl: 6rem;
    --mandant-space-2xl: 8rem;
    --mandant-space-3xl: 12rem;

    /* Layout */
    --mandant-container-max: 1400px;
    --mandant-container-padding: 2rem;
    --mandant-container-narrow: 900px;
    --mandant-container-wide: 1600px;

    /* Radius */
    --mandant-radius-sm: 2px;
    --mandant-radius-md: 4px;
    --mandant-radius-lg: 8px;
    --mandant-radius-round: 9999px;
    --mandant-radius: 4px;
    --mandant-transition: 0.3s ease;

    /* Hero */
    --mandant-hero-height: 100vh;
    --mandant-hero-align: flex-end;
    --mandant-hero-overlay-from: 0.5;
    --mandant-hero-overlay-mid: 0;
    --mandant-hero-title-size: clamp(2.5rem, 6vw, 4.5rem);

    /* Navigation */
    --mandant-nav-height: 5rem;
    --mandant-logo-height: 3.5rem;

    /* Footer — gray bg (primary) with white text, customer-approved */
    --mandant-footer-bg: var(--mandant-primary);
    --mandant-footer-text: #ffffff;
    --mandant-footer-link-hover: #ffcccc;
    --mandant-footer-bottom-bg: var(--mandant-text);
    --mandant-footer-bottom-text: #ffffff;
    --mandant-footer-columns: 2fr 1fr 1fr 1fr;
    --mandant-footer-logo-filter: brightness(10);

    /* Cards */
    --mandant-card-overlay-opacity: 0.7;

    /* Shadows */
    --mandant-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --mandant-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mandant-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --mandant-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);
  }

  /* Logo-Hoehe (schlaegt img { height: auto } per Spezifitaet) */
  .header__logo img,
  .ce-nav__logo img,
  .site-header__logo img,
  .site-logo img {
    height: 3.5rem;
    width: auto;
  }
}

/* ========================================
   FIX 2026-04-30: Hero centering harmony
   - Subtitle (max-width: 500px) blieb links statt zentriert unter
     Headline → margin-inline: auto erzwingt gleiche Mittelachse
   - Content-Block selbst wird auf gleicher Achse wie restliche
     Sektionen ausgerichtet
   ======================================== */
.hero__content {
    margin-inline: auto;
}

.hero__subtitle {
    margin-inline: auto;
}

/* FIX 2026-04-30 Grid-Override removed 2026-05-02:
   The grid override (display:grid, overflow:visible, scroll-snap-type:none)
   broke horizontal scrolling. Correct fix is applied in the HORIZONTAL GALLERY
   block above: max() padding-inline aligns item-01 with container edge. */