/* ==========================================================================
   Fahrschule-Veser – Stylesheet
   Methodik: BEM (block__element--modifier), Zustände: .is-*, Hilfsklassen: .u-*
   Aufbau:   @layer reset, tokens, base, layout, components, utilities
   Farben:   oklch; Primärfarbe #007cba → oklch(56.08% 0.1315 241.32)
   ========================================================================== */

/* Inter (Variable, Latin) – lokal gehostet, keine externe Verbindung (DSGVO). Lizenz: assets/fonts/OFL.txt */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metrisch angepasster Ersatz bis Inter geladen ist (verhindert Layout-Sprünge) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, svg, video { display: block; max-inline-size: 100%; }
  input, button, select, textarea { font: inherit; }
  hgroup { display: block; }
}

/* ==========================================================================
   DESIGN-TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Farben */
    --primary-h: 241.32;
    --primary: oklch(56.08% 0.1315 var(--primary-h));
    --primary-dark: oklch(42% 0.11 var(--primary-h));
    --primary-darker: oklch(28% 0.08 var(--primary-h));
    --primary-light: oklch(93% 0.035 var(--primary-h));
    --primary-ultra-light: oklch(97.5% 0.012 var(--primary-h));

    --accent: oklch(55.33% 0.2171 24.2);        /* Logo-Rot #d4122a */
    --accent-dark: oklch(46% 0.19 24.2);
    --accent-light: oklch(78% 0.12 24.2);       /* Text-Akzent auf dunklem Grund */
    --star: oklch(80% 0.16 75);
    --note: oklch(80% 0.16 75);
    --note-border: oklch(62% 0.14 70);
    --danger: oklch(55% 0.2 25);

    --cat-pkw: var(--primary);
    --cat-moto: oklch(64% 0.17 45);
    --cat-lkw: oklch(55% 0.12 160);
    --cat-bus: oklch(52% 0.15 300);
    --cat-bkf: oklch(50% 0.06 250);

    --text: oklch(24% 0.02 var(--primary-h));
    --text-muted: oklch(48% 0.02 var(--primary-h));
    --nav-ink: oklch(0% 0 0 / 0.8);
    --header-bg: oklch(95% 0 0);
    --primary-on: oklch(95% 0.029 var(--primary-h));   /* heller Ton auf Primärfläche (Trennlinien, CTA-Text) */
    --bg: oklch(100% 0 0);
    --bg-alt: var(--primary-ultra-light);
    --bg-soft: oklch(97.3% 0.004 250);
    --bg-hover: oklch(97.5% 0.005 260);
    --border: oklch(90% 0.01 var(--primary-h));
    --border-light: oklch(92.5% 0.008 260);
    --white: oklch(100% 0 0);

    /* Typografie */
    --font: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
    --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

    /* Abstände */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: clamp(3rem, 2rem + 4vw, 6rem);

    /* Formen & Ebenen */
    --container: 80rem;  /* gemeinsame Inhaltsbreite für Header und Seiteninhalt */
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
    --radius: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --shadow: 0 1px 2px color-mix(in oklch, var(--primary-darker) 8%, transparent),
              0 8px 24px color-mix(in oklch, var(--primary-darker) 8%, transparent);
    --shadow-lg: 0 20px 48px color-mix(in oklch, var(--primary-darker) 16%, transparent);
    --shadow-panel: 0 18px 48px color-mix(in oklch, oklch(22% 0.04 255) 16%, transparent);
    --header-h: 5.125rem;
    --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   BASIS (Elemente)
   ========================================================================== */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  body { overflow-x: clip; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); }
  h1, h2, h3, h4 { line-height: 1.15; margin-block-end: var(--space-m); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  p { margin-block-end: var(--space-m); text-wrap: pretty; }
  ul, ol { margin-block-end: var(--space-m); padding-inline-start: 1.25rem; }
  a { color: var(--primary); text-underline-offset: 0.2em; }
  a:hover { color: var(--primary-dark); }
  address { font-style: normal; }
  :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
  main:focus { outline: none; }
  table { inline-size: 100%; border-collapse: collapse; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

  .section { padding-block: var(--space-2xl); }
  .section--alt { background: var(--bg-alt); }
  .section--soft { background: var(--bg-soft); }
  .section--dark { background: var(--primary-darker); color: var(--white); }

  .grid { display: grid; gap: var(--space-l); }
  /* Responsive Spalten mit Obergrenze: --cols = maximale Spaltenzahl, --min = Mindestbreite einer Spalte */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--min)), calc((100% - (var(--cols) - 1) * var(--space-l)) / var(--cols))), 1fr)); }
  .grid--2 { --cols: 2; --min: 22rem; }
  .grid--3 { --cols: 3; --min: 17rem; }
  .grid--4 { --cols: 4; --min: 13rem; }
  .grid--gap-2xl { gap: var(--space-2xl); }
  .grid--start { align-items: start; }

  .split { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse > :first-child { order: 2; }
  }

  .stack { display: grid; gap: var(--space-l); }

  .layout-aside { display: grid; gap: var(--space-xl); }
  @media (min-width: 62rem) {
    .layout-aside { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .layout-aside__aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
  }
}

/* ==========================================================================
   KOMPONENTEN
   ========================================================================== */
@layer components {

  /* ---------- Skip-Link ---------- */
  .skip-link { position: absolute; inset-inline-start: var(--space-m); inset-block-start: -100px; z-index: 1000; padding: var(--space-s) var(--space-m); border-radius: var(--radius); background: var(--primary-darker); color: var(--white); }
  .skip-link:focus { inset-block-start: var(--space-m); color: var(--white); }

  /* ---------- Icon ---------- */
  .icon--inline { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }

  /* ---------- Button ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 0.8em 1.5em; border: 2px solid transparent; border-radius: var(--radius-pill); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
  .btn:hover { transform: translateY(-1px); }
  .btn__icon { inline-size: 1.1em; block-size: 1.1em; }
  .btn--primary { background: var(--primary); color: var(--white); }
  .btn--primary:hover { background: var(--primary-dark); color: var(--white); }
  .btn--accent { background: var(--accent); color: var(--white); }
  .btn--accent:hover { background: var(--accent-dark); color: var(--white); }
  .btn--outline { border-color: currentColor; background: transparent; color: var(--primary); }
  .btn--outline:hover { border-color: var(--primary); background: var(--primary); color: var(--white); }
  .btn--ghost-light { border-color: color-mix(in oklch, var(--white) 60%, transparent); color: var(--white); }
  .btn--ghost-light:hover { background: var(--white); color: var(--primary-darker); }
  .btn--glow { padding: 12px 22px; font-size: 0.9375rem; font-weight: 800; box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--primary) 55%, transparent); }
  .btn--lg { padding: 1em 1.8em; font-size: var(--fs-lg); }

  .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .btn-group--center { justify-content: center; }

  .text-link { font-weight: 400; }
  .text-link__icon { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }

  /* ---------- Abschnittskopf ---------- */
  .section-head { max-inline-size: 46rem; margin-block-end: var(--space-xl); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head--flush { margin-block-end: 0; }
  .section-head__eyebrow { display: inline-block; margin-block-end: var(--space-xs); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
  .section-head__title { margin-block-end: var(--space-m); }
  .section-head__title--xl { font-size: var(--fs-h1); }
  .section-head__lead { font-size: var(--fs-lg); color: var(--text-muted); }
  /* Textmarker-Effekt (Pseudo-Element hinter dem unteren Drittel des Wortes) */
  .section-head__highlight { --marker: color-mix(in oklch, var(--primary) 28%, white); position: relative; z-index: 0; isolation: isolate; font-style: normal; white-space: nowrap; }
  .section-head__highlight::before { content: ""; position: absolute; inset-inline: -0.12em; inset-block-end: 0.24em; z-index: -1; block-size: 0.4em; border-radius: 0.08em; background: var(--marker); }
  .section--dark .section-head__highlight { --marker: color-mix(in oklch, var(--primary) 70%, transparent); }
  .section--dark .section-head__eyebrow { color: var(--accent-light); }
  .section--dark .section-head__lead { color: color-mix(in oklch, var(--white) 80%, transparent); }

  /* ---------- Textblock (Text neben Bild) ---------- */
  .text-block__eyebrow { display: inline-block; margin-block-end: var(--space-xs); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
  .text-block__lead { font-size: var(--fs-lg); color: var(--text-muted); }
  .text-block__actions { margin-block-start: var(--space-l); }

  /* ---------- Header (Stil nach dev.fahrschule-veser.de) ---------- */
  .header { position: sticky; inset-block-start: 0; z-index: 100; background: var(--header-bg); }
  .header__inner { position: relative; display: flex; align-items: center; gap: 0.625rem; inline-size: min(100% - 2 * var(--gutter), var(--container)); min-block-size: var(--header-h); margin-inline: auto; padding-block: 1rem; }
  .header__logo { flex: none; display: flex; align-items: center; text-decoration: none; }
  .header__logo-img { block-size: 3.06rem; inline-size: auto; }
  .header__burger { display: none; }

  /* ---------- Hauptnavigation (Desktop) ---------- */
  .nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
  .nav__list { display: flex; align-items: center; gap: 0.2rem; margin: 0 auto; padding: 0; list-style: none; }
  .nav__item { position: relative; }
  .nav__item--mega { position: static; }
  .nav__link, .nav__toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.625rem 1rem; border: 0; border-radius: var(--radius); background: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--nav-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; }
  .nav__link[aria-current="page"], .nav__toggle.is-current { color: var(--primary); }
  .nav__link:hover, .nav__toggle:hover,
  .nav__item--has-sub:hover > .nav__toggle, .nav__item--has-sub.is-open > .nav__toggle { background: var(--primary); color: var(--white); }
  .nav__chevron { flex: none; inline-size: 0.85em; block-size: 0.85em; stroke-width: 2.5; transition: transform .2s; }
  @media (min-width: 68.01rem) and (max-width: 82rem) { .nav__link, .nav__toggle { gap: 0.25rem; padding-inline: 0.6rem; } .nav__cta-link { padding-inline: 1rem; } }
  .nav__item--has-sub:hover > .nav__toggle > .nav__chevron, .nav__item--has-sub.is-open > .nav__toggle > .nav__chevron { transform: rotate(180deg); }

  .nav__panel { position: absolute; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0; z-index: 10; min-inline-size: 15rem; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--primary); color: var(--white); box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1), visibility .15s; }
  .nav__panel::before { content: ""; position: absolute; inset: -0.5rem 0 auto; block-size: 0.5rem; } /* Hover-Brücke */
  .nav__item--has-sub:hover > .nav__panel, .nav__item--has-sub.is-open > .nav__panel { opacity: 1; visibility: visible; transform: none; }
  .nav__panel--mega { inset-block-start: calc(100% - 0.75rem); inset-inline: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 1.25rem; }
  .nav__panel--mega::before { inset-block-start: -1.25rem; block-size: 1.25rem; }

  .nav__sublist { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
  .nav__sublink { display: block; padding: 0.45rem 0.75rem; border-radius: var(--radius); font-size: 0.9375rem; color: var(--white); text-decoration: none; white-space: nowrap; text-underline-offset: 0.25em; }
  .nav__sublink:hover { text-decoration: underline; color: var(--white); }

  .nav__cta { flex: none; }
  .nav__cta-link { display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; border: 1.5px solid var(--primary); border-radius: var(--radius); background: var(--primary); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--primary-on); text-decoration: none; white-space: nowrap; transition: background-color .3s ease-in-out, color .3s ease-in-out; }
  .nav__cta-link:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }

  /* ---------- Mega-Menü (Spalten) ---------- */
  .mega__col { padding: 1.25rem; }
  .mega__col + .mega__col { border-inline-start: 1px solid var(--primary-on); }
  .mega__heading { margin: 0; }
  .mega__heading-link { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); text-decoration: underline; text-underline-offset: 0.3em; }
  .mega__heading-link:hover { color: var(--white); text-decoration-thickness: 2px; }
  .mega__list { display: grid; gap: 0.85rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
  .mega__link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; color: var(--white); text-decoration: none; text-underline-offset: 0.25em; }
  .mega__item { display: flex; }
  .mega__vehicle { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 1.25rem; overflow: hidden; }
  .mega__vehicle-icon { display: block; inline-size: 100%; block-size: 100%; color: var(--white); opacity: .9; }
  .mega__link:hover { color: var(--white); text-decoration: underline; }

  /* ---------- Mobile Navigation ---------- */
  @media (max-width: 68rem) {
    .header__inner { justify-content: space-between; }
    .header__logo-img { block-size: 2.75rem; }
    .header__burger { display: inline-flex; align-items: center; gap: 0; margin-inline-end: -0.5rem; padding: 0.25rem 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--nav-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
    /* Hamburger-Animation „Flippin' burgers“ #6 (Mikael Ainalem, CodePen LJYRxz) */
    .header__burger-icon { flex: none; inline-size: 3rem; block-size: 3rem; overflow: visible; color: var(--primary); }
    .header__burger-line { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; transition: stroke-dasharray .4s, stroke-dashoffset .4s; }
    /* Striche enden 0,5 Einheiten vor/nach den Pfad-Knoten – sonst zeichnet Safari/iOS dort Kappen-Artefakte */
    .header__burger-line--top, .header__burger-line--bottom { stroke-dasharray: 39 173; }
    .header__burger-line--middle { stroke-dasharray: 39 112; }
    .header__burger[aria-expanded="true"] .header__burger-line--top,
    .header__burger[aria-expanded="true"] .header__burger-line--bottom { stroke-dashoffset: -132.73px; }
    .header__burger[aria-expanded="true"] .header__burger-line--middle { stroke-dashoffset: -71.53px; }
    @media (prefers-reduced-motion: reduce) { .header__burger-line { transition: none; } }
    .nav { position: absolute; inset-block-start: 100%; inset-inline: calc(var(--gutter) * -1); block-size: calc(100dvh - var(--header-h)); flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; padding: var(--space-m) var(--gutter) var(--space-xl); background: var(--primary); color: var(--white); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
    .nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; inline-size: 100%; }
    .nav__link, .nav__toggle { inline-size: 100%; justify-content: space-between; padding: 0.75rem 0; font-size: 1.25rem; font-weight: 500; color: var(--white); }
    .nav__link[aria-current="page"], .nav__toggle.is-current { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }
    .nav__link:hover, .nav__toggle:hover,
    .nav__item--has-sub:hover > .nav__toggle, .nav__item--has-sub.is-open > .nav__toggle { background: none; color: var(--white); }
    .nav__chevron { inline-size: 1.1em; block-size: 1.1em; }
    .nav__item--has-sub:hover > .nav__toggle > .nav__chevron { transform: none; }
    .nav__item--has-sub.is-open > .nav__toggle > .nav__chevron { transform: rotate(180deg); }
    .nav__panel, .nav__panel--mega { position: static; display: none; min-inline-size: 0; padding: 0 0 0.75rem 1rem; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
    .nav__panel::before { content: none; }
    .nav__item--has-sub:hover > .nav__panel { display: none; }
    .nav__item--has-sub.is-open > .nav__panel { display: block; }
    .nav__sublink { padding: 0.5rem 0; font-size: 1.0625rem; }
    .mega__col { padding: 1rem 0; }
    .mega__col + .mega__col { border-inline-start: 0; border-block-start: 1px solid var(--primary-on); }
    .mega__list { gap: 0.9rem; margin-block-start: 1rem; }
    .mega__link { font-size: 1.0625rem; }
    .nav__cta { margin: var(--space-l) 0 0; }
    .nav__cta-link { inline-size: 100%; justify-content: center; padding: 0.9rem 1.25rem; border-color: var(--white); background: var(--white); font-size: 1.0625rem; color: var(--primary); }
    .nav__cta-link:hover { border-color: var(--white); background: var(--primary-ultra-light); color: var(--primary-dark); }
    body.is-nav-open { overflow: hidden; }
  }

  /* ---------- Hero (Startseite) ---------- */
  .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 2.5rem + 8vw, 9rem) clamp(5rem, 3rem + 8vw, 10rem); background: var(--primary-darker); color: var(--white); }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, color-mix(in oklch, var(--primary-darker) 92%, transparent) 0%, color-mix(in oklch, var(--primary-darker) 78%, transparent) 40%, color-mix(in oklch, var(--primary-darker) 15%, transparent) 75%, transparent 100%); }
  .hero__bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% center; }
  .hero__inner { position: relative; z-index: 1; }
  /* DEKRA-/AZAV-Siegel oben rechts im Hero */
  .hero__cta { display: flex; align-items: center; gap: var(--space-m); }
  .hero__actions { flex: 0 1 auto; min-inline-size: 0; }
  .hero__seal { flex: none; inline-size: clamp(4.25rem, 3rem + 3vw, 5.5rem); block-size: auto; filter: drop-shadow(0 8px 14px oklch(0% 0 0 / .35)); }
  .hero__content { max-inline-size: 40rem; }
  .hero__eyebrow { display: inline-block; margin-block-end: var(--space-xs); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); }
  .hero__title { margin-block-end: var(--space-m); text-shadow: 0 2px 24px color-mix(in oklch, black 35%, transparent); }
  .hero__lead { max-inline-size: 36rem; margin-block-end: var(--space-l); font-size: var(--fs-lg); color: color-mix(in oklch, var(--white) 85%, transparent); }
  .hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-l) 0 var(--space-m); padding: 0; list-style: none; }
  .hero__badge { display: flex; align-items: center; gap: 0.4em; padding: 0.4em 0.85em; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--white) 12%, transparent); font-size: var(--fs-sm); font-weight: 600; }
  .hero__badge-icon { inline-size: 1em; block-size: 1em; color: var(--accent-light); }
  @media (max-width: 48rem) {
    .hero__bg { object-position: 75% center; }
    .hero::before { background: linear-gradient(180deg, color-mix(in oklch, var(--primary-darker) 70%, transparent), color-mix(in oklch, var(--primary-darker) 88%, transparent)); }
  }

  /* ---------- Seitenkopf ---------- */
  .page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark)); color: var(--white); }
  .page-hero--media .page-hero__inner { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 56rem) { .page-hero--media .page-hero__inner { grid-template-columns: 1.3fr 1fr; } }
  .page-hero__eyebrow { display: inline-block; margin-block-end: var(--space-xs); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); }
  .page-hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .page-hero__lead { max-inline-size: 44rem; margin: 0; font-size: var(--fs-lg); color: color-mix(in oklch, var(--white) 82%, transparent); }
  .page-hero__actions { margin-block-start: var(--space-l); }
  .page-hero__img { inline-size: 100%; max-inline-size: 30rem; block-size: auto; margin-inline: auto; filter: drop-shadow(0 20px 28px color-mix(in oklch, black 30%, transparent)); }
  @media (max-width: 55.99rem) { .page-hero__media { display: none; } }

  /* ---------- Brotkrumen ---------- */
  .breadcrumb { margin-block-end: var(--space-m); font-size: var(--fs-sm); }
  .breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; list-style: none; }
  .breadcrumb__item + .breadcrumb__item::before { content: "›"; margin-inline-end: 0.4em; opacity: .6; }
  .breadcrumb__link { color: color-mix(in oklch, var(--white) 80%, transparent); text-decoration: none; }
  .breadcrumb__link:hover { color: var(--white); }

  /* ---------- Bild-Platzhalter ---------- */
  .photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .photo--cutout { aspect-ratio: auto; max-inline-size: 28rem; margin-inline: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 24px oklch(0% 0 0 / .14)); }
  .placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--space-m); border: 2px dashed color-mix(in oklch, var(--primary) 35%, transparent); border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, var(--primary-ultra-light) 0 12px, var(--white) 12px 24px); font-size: var(--fs-sm); font-weight: 600; text-align: center; color: var(--text-muted); }
  .placeholder--square { aspect-ratio: 1; }
  .placeholder--wide { aspect-ratio: 16 / 10; }
  .placeholder__icon { inline-size: 2.25rem; block-size: 2.25rem; margin-inline: auto; opacity: .6; }

  /* ---------- Kennzahlen ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-l); }
  .stats--floating { position: relative; z-index: 2; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-m); margin-block-start: calc(var(--space-xl) * -1); }
  .stats--floating .stats__item { padding: var(--space-l) var(--space-s); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
  .stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; text-align: center; }
  .stats__value { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--primary); }
  .stats__label { font-weight: 600; color: var(--text-muted); }
  .stats--floating .stats__label { font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }

  /* ---------- Karte (allgemein) ---------- */
  .card { --cat: var(--primary); position: relative; display: flex; flex-direction: column; padding: var(--space-l); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
  .card:has(.card__link--stretched):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  /* Farbiger Akzent oben: 4 px oben, läuft um die Ecken auf 1 px aus und blendet an den Seiten
     weich in den grauen Rahmen über (Pseudo-Element liegt exakt auf dem Rahmen) */
  .card--lkw::before, .card--bus::before, .card--bkf::before { content: ""; position: absolute; inset: -1px; z-index: 1; border: 1px solid var(--cat); border-block-start-width: 4px; border-block-end: 0; border-radius: inherit; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 calc(var(--radius-lg) + 0.25rem), transparent calc(var(--radius-lg) + 1.75rem));
    mask: linear-gradient(#000 0 calc(var(--radius-lg) + 0.25rem), transparent calc(var(--radius-lg) + 1.75rem)); }
  .card--lkw { --cat: var(--cat-lkw); }
  .card--bus { --cat: var(--cat-bus); }
  .card--bkf { --cat: var(--cat-bkf); }
  .card__icon { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; margin-block-end: var(--space-m); border-radius: 0.9rem; background: color-mix(in oklch, var(--cat) 14%, transparent); color: var(--cat); }
  .card__icon-svg { inline-size: 1.8rem; block-size: 1.8rem; }
  .card__tag { display: inline-block; align-self: flex-start; margin-block-end: var(--space-s); padding: 0.25em 0.7em; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--cat) 12%, transparent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; color: var(--cat); }
  .card__title { margin-block-end: var(--space-xs); }
  .card__text { color: var(--text-muted); }
  .card__links { margin: 0; }
  .card__link { display: inline-flex; align-items: center; gap: 0.35em; margin-block-start: auto; font-weight: 700; text-decoration: none; }
  .card__link + .card__link { margin-block-start: var(--space-xs); }
  .card__link--stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card__link-icon { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }
  .card__actions { margin-block-start: var(--space-l); }

  /* ---------- Führerschein-Kachel (Startseite) ---------- */
  .cat-grid { display: grid; gap: var(--space-l); }
  @media (min-width: 40rem) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Gestapelte Karte: farbige Hülle (Kategorie-Ton) + weiße Innenkarte + Fußleiste */
  .cat-card { --cat: var(--primary); position: relative; display: flex; flex-direction: column; padding: 0.4rem; border: 1px solid color-mix(in oklch, var(--cat) 22%, white); border-radius: calc(var(--radius-lg) + 0.4rem); background: linear-gradient(160deg, color-mix(in oklch, var(--cat) 8%, white), color-mix(in oklch, var(--cat) 20%, white)); box-shadow: 0 1px 2px color-mix(in oklch, var(--cat) 10%, transparent), 0 18px 40px -18px color-mix(in oklch, var(--cat) 45%, transparent); transition: transform .25s, box-shadow .25s; }
  .cat-card:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 1px 2px color-mix(in oklch, var(--cat) 10%, transparent), 0 26px 50px -18px color-mix(in oklch, var(--cat) 55%, transparent); }
  @media (prefers-reduced-motion: reduce) { .cat-card, .cat-card:hover { transform: none; transition: none; } }
  .cat-card--pkw { --cat: var(--cat-pkw); }
  .cat-card--moto { --cat: var(--cat-moto); }
  .cat-card--lkw { --cat: var(--cat-lkw); }
  .cat-card--bus { --cat: var(--cat-bus); }
  .cat-card--bkf { --cat: var(--cat-bkf); }
  .cat-card__icon { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; margin-block-end: var(--space-m); border-radius: var(--radius); background: color-mix(in oklch, var(--cat) 14%, transparent); color: var(--cat); }
  .cat-card__icon-svg { inline-size: 1.6rem; block-size: 1.6rem; }
  .cat-card__footer { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--space-xl); }
  .cat-card__link--secondary { position: relative; z-index: 2; }
  .cat-card__link--secondary::after { content: none; }
  .cat-card--wide .cat-card__inner { display: flex; }
  .cat-card--plain .cat-card__inner { display: flex; }
  .cat-card--plain .cat-card__body { padding: var(--space-l); }
  .cat-card--plain .checklist { margin: 0; }
  .cat-card .checklist__item::before { background-color: var(--cat); }
  .cat-card__label { margin: 0; padding: 0.85rem var(--space-m) 0.6rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: color-mix(in oklch, var(--cat) 80%, black); }
  .cat-card--wide .cat-card__body { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
  .cat-card--wide .split { align-items: center; }
  .cat-card__inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--white); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 8px 20px -10px color-mix(in oklch, var(--cat) 40%, transparent); }
  .cat-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(180deg, color-mix(in oklch, var(--cat) 8%, white), var(--white)); }
  .cat-card__img { position: absolute; inset: var(--space-l); inline-size: calc(100% - 2 * var(--space-l)); block-size: calc(100% - 2 * var(--space-l)); object-fit: contain; }
  .cat-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--space-m); }
  .cat-card__tag { align-self: flex-start; inline-size: fit-content; margin-block-end: var(--space-s); padding: 0.25em 0.7em; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--cat) 12%, transparent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; color: var(--cat); }
  .cat-card__title { margin-block-end: var(--space-s); }
  .cat-card__chips { margin-block-end: var(--space-m); }
  .cat-card__text { margin: 0; color: var(--text-muted); }
  .cat-card__link { display: flex; align-items: center; justify-content: center; gap: 0.45em; padding: 0.85rem var(--space-m) 0.6rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklch, var(--cat) 80%, black); text-decoration: none; }
  .cat-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .cat-card__link-icon { flex: none; inline-size: 1.1em; block-size: 1.1em; transition: transform .2s; }
  .cat-card:hover .cat-card__link-icon, .cat-card__link:hover .cat-card__link-icon { transform: translateX(3px); }
  @media (min-width: 66rem) {
    .cat-card__inner { display: grid; grid-template-columns: 44% 1fr; }
    .cat-card__media { aspect-ratio: auto; min-block-size: 15rem; background: linear-gradient(135deg, color-mix(in oklch, var(--cat) 10%, white), var(--white) 85%); }
    .cat-card__img { inset: var(--space-m); inline-size: calc(100% - 2 * var(--space-m)); block-size: calc(100% - 2 * var(--space-m)); }
    .cat-card__body { padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-l); }
  }

  /* ---------- Chips ---------- */
  .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--space-m); padding: 0; list-style: none; }
  .chips__item { padding: 0.15em 0.65em; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--bg-alt); font-size: var(--fs-sm); font-weight: 700; }
  .chips--card .chips__item { border-color: color-mix(in oklch, var(--cat, var(--primary)) 25%, white); background: var(--white); box-shadow: 0 2px 4px -2px color-mix(in oklch, var(--cat, var(--primary)) 35%, transparent); letter-spacing: 0.03em; color: color-mix(in oklch, var(--cat, var(--primary)) 85%, black); }

  /* ---------- Checkliste ---------- */
  .checklist { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
  .checklist--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); column-gap: var(--space-l); }
  .checklist__item { position: relative; padding-inline-start: 1.9rem; }
  .checklist__item::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--primary) var(--check-icon) center / 0.8rem no-repeat; }

  /* ---------- Vorteile ---------- */
  .feature-list { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
  .feature { display: flex; gap: var(--space-m); }
  .feature__icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.75rem; background: var(--primary-light); color: var(--primary-dark); }
  .feature__icon-svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .feature__title { margin-block-end: var(--space-2xs); font-size: var(--fs-lg); }
  .feature__text { margin: 0; color: var(--text-muted); }

  /* ---------- Bewertung ---------- */
  .rating__head { display: flex; align-items: center; gap: var(--space-m); margin: 0; }
  .rating__stars { display: flex; gap: 2px; color: var(--star); }
  .rating__star { inline-size: 1.25rem; block-size: 1.25rem; }
  .rating__text { margin: var(--space-l) 0 0; }

  /* ---------- Schritte ---------- */
  /* Schritte: gestapelte Karten wie cat-card (Primärton), Nummer als Fußleiste */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
  .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } /* 4 Schritte: 4 / 2×2 / 1, nie 3+1 */
  /* 5 Schritte: Desktop 3 + 2, Tablet 2 + 2 + 1 (jeweils zentriert), Handy 1 Spalte */
  @media (min-width: 40rem) and (max-width: 61.99rem) {
    .steps:has(> :nth-child(5):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .steps:has(> :nth-child(5):last-child) > .steps__item { grid-column: span 2; }
    .steps:has(> :nth-child(5):last-child) > .steps__item:nth-child(5) { grid-column: 2 / span 2; }
  }
  @media (min-width: 62rem) {
    .steps:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .steps:has(> :nth-child(5):last-child) > .steps__item { grid-column: span 2; }
    .steps:has(> :nth-child(5):last-child) > .steps__item:nth-child(4) { grid-column: 2 / span 2; }
  }
  .steps__item { --cat: var(--primary); display: flex; flex-direction: column; padding: 0.4rem; border: 1px solid color-mix(in oklch, var(--cat) 22%, white); border-radius: calc(var(--radius-lg) + 0.4rem); background: linear-gradient(160deg, color-mix(in oklch, var(--cat) 8%, white), color-mix(in oklch, var(--cat) 20%, white)); box-shadow: 0 18px 40px -22px color-mix(in oklch, var(--cat) 45%, transparent); }
  .steps__card { flex: 1; display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 8px 20px -10px color-mix(in oklch, var(--cat) 40%, transparent); }
  .steps__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--space-xs); border-radius: var(--radius); background: color-mix(in oklch, var(--cat) 12%, transparent); color: var(--cat); }
  .steps__icon-svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .steps__title { margin: 0; font-size: var(--fs-lg); line-height: 1.25; }
  .steps__list { margin: 0; font-size: var(--fs-sm); }
  .steps__text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }
  .steps__label { margin: 0; padding: 0.75rem var(--space-m) 0.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; color: color-mix(in oklch, var(--cat) 80%, black); }

  /* ---------- Angebote (dunkle Section) ---------- */
  .offer__title { font-size: var(--fs-h3); }
  .offer__icon { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }
  .offer__text { font-size: var(--fs-base); color: color-mix(in oklch, var(--white) 80%, transparent); }
  .offer__link { color: var(--white); }
  .offer__link:hover { color: var(--white); }

  /* ---------- Fakten ---------- */
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-s); margin-block-end: var(--space-l); }
  .facts__item { padding: var(--space-s) var(--space-m); border-inline-start: 4px solid var(--cat, var(--primary)); border-radius: var(--radius); background: var(--bg-alt); }
  .facts__term { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
  .facts__value { margin: 0; font-weight: 800; }

  /* ---------- Themenblock (BKF-Seite) ---------- */
  .topic { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  .topic--bkf { --cat: var(--cat-bkf); }
  .topic + .topic { margin-block-start: var(--space-xl); padding-block-start: var(--space-xl); border-block-start: 1px solid var(--border); }
  .topic__head { display: flex; align-items: center; gap: var(--space-m); margin-block-end: var(--space-m); }
  .topic__badge { flex: none; display: grid; place-items: center; min-inline-size: 3.5rem; block-size: 3.5rem; padding-inline: 0.5rem; border-radius: 0.9rem; background: var(--cat, var(--primary)); color: var(--white); }
  .topic__badge-icon { inline-size: 2.5rem; block-size: 2.5rem; }
  .topic__title--compact { margin: 0; font-size: var(--fs-h3); }
  .topic__subtitle { margin: 0; color: var(--text-muted); }

  /* ---------- Tabelle ---------- */
  .data-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .data-table__table { font-size: var(--fs-sm); }
  .data-table__cell { padding: 0.75em 1em; border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; font-weight: 400; }
  .data-table__cell--head { font-weight: 400; }
  .data-table__head .data-table__cell { background: var(--bg-alt); font-weight: 700; }
  .data-table__row:last-child > .data-table__cell { border-block-end: 0; }
  .data-table__head .data-table__row:last-child > .data-table__cell { border-block-end: 1px solid var(--border); }

  /* ---------- Hinweis ---------- */
  .note { padding: var(--space-m) var(--space-l); border-inline-start: 4px solid var(--note-border); border-radius: var(--radius); background: color-mix(in oklch, var(--note) 18%, white); }
  .note__text { margin: 0; }

  /* ---------- Seitenleiste ---------- */
  .aside-box { padding: var(--space-l); border-radius: var(--radius-lg); background: var(--primary-darker); color: var(--white); }
  .aside-box__title { font-size: var(--fs-lg); }
  .aside-box__text { font-size: var(--fs-sm); color: color-mix(in oklch, var(--white) 80%, transparent); }
  .aside-box__link { font-weight: 700; color: var(--white); }
  .aside-box__link:hover { color: var(--white); }
  .aside-box__btn { inline-size: 100%; margin-block-start: var(--space-xs); }

  /* ---------- Team ---------- */
  .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
  .team__item { display: grid; }
  .member { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
  .member__media { border-width: 0 0 2px; border-radius: 0; }
  .member__body { padding: var(--space-m) var(--space-l) var(--space-l); }
  .member__name { margin-block-end: var(--space-2xs); font-size: var(--fs-lg); }
  .member__classes { margin-block-end: var(--space-2xs); font-size: var(--fs-sm); font-weight: 700; color: var(--primary); }
  .member__vehicle { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

  /* ---------- Standort ---------- */
  .location { gap: var(--space-xs); }
  .location__title { margin-block-end: var(--space-xs); }
  .location__hours { display: grid; grid-template-columns: auto 1fr; gap: 0.2em var(--space-m); margin-block-end: var(--space-m); font-size: var(--fs-sm); }
  .location__hours-term { font-weight: 700; }
  .location__hours-value { margin: 0; color: var(--text-muted); }
  .location__note { color: var(--text-muted); }
  .location__note--small { font-size: var(--fs-sm); }
  .location__actions { margin-block-start: auto; }
  /* Kartenausschnitt (OpenStreetMap, lokal gespeichert) */
  .location__map { position: relative; margin: calc(var(--space-l) * -1) calc(var(--space-l) * -1) var(--space-s); overflow: hidden; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: var(--bg-soft); }
  .location__map-link { position: relative; display: block; }
  .location__map-img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.85); transition: transform .4s, filter .4s; }
  .location__map-link:hover .location__map-img { transform: scale(1.04); filter: none; }
  .location__map-link:focus-visible { outline-offset: -4px; }
  .location__pin { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1.75rem; block-size: auto; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 4px oklch(0% 0 0 / .35)); }
  .location__pin path { fill: var(--accent); stroke: var(--white); stroke-width: 2; }
  .location__pin circle { fill: var(--white); }
  .location__attribution { position: absolute; inset-block-end: 0; inset-inline-end: 0; padding: 0.1rem 0.4rem; border-start-start-radius: 0.35rem; background: oklch(100% 0 0 / .85); font-size: 0.6875rem; line-height: 1.4; color: var(--text-muted); }
  .location__attribution-link { color: inherit; }
  @media (prefers-reduced-motion: reduce) { .location__map-img { transition: none; } }
  .pill { align-self: flex-start; margin: 0; padding: 0.2em 0.7em; border-radius: var(--radius-pill); background: var(--primary-light); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; color: var(--primary-dark); }

  /* ---------- FAQ ---------- */
  .faq { display: grid; gap: var(--space-s); max-inline-size: 50rem; }
  .faq--center { margin-inline: auto; }
  .faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
  .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-m) var(--space-l); font-weight: 700; list-style: none; cursor: pointer; }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__question::after { content: ""; flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; transition: transform .2s;
    background:
      linear-gradient(var(--primary-dark), var(--primary-dark)) center / 0.75rem 2px no-repeat,
      linear-gradient(var(--primary-dark), var(--primary-dark)) center / 2px 0.75rem no-repeat,
      var(--primary-light); }
  .faq__item[open] > .faq__question::after { transform: rotate(45deg); }
  .faq__answer { padding: 0 var(--space-l) var(--space-m); color: var(--text-muted); }
  .faq__text { margin: 0; }

  /* ---------- Call-to-Action ---------- */
  .cta { display: grid; align-items: center; gap: var(--space-l); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary), var(--primary-dark)); color: var(--white); }
  @media (min-width: 52rem) { .cta { grid-template-columns: 1fr auto; } }
  .cta__title { margin-block-end: var(--space-xs); }
  .cta__text { margin: 0; color: color-mix(in oklch, var(--white) 85%, transparent); }

  /* ---------- Formular ---------- */
  .form { display: grid; gap: var(--space-m); }
  .form__fieldset { display: grid; gap: var(--space-m); margin: 0; padding: var(--space-l); border: 1px solid var(--border); border-radius: var(--radius); }
  .form__legend { padding-inline: var(--space-xs); font-weight: 800; }
  .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-m); }
  .form__hp { position: absolute; inset-inline-start: -9999px; }
  .form__note { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
  .form__status { padding: var(--space-m); border-radius: var(--radius); font-weight: 600; }
  .form__status--ok { background: oklch(94% 0.06 150); color: oklch(35% 0.1 150); }
  .form__status--error { background: oklch(94% 0.05 25); color: oklch(40% 0.15 25); }

  .field { display: grid; gap: var(--space-2xs); }
  .field[hidden] { display: none; }
  .field__label { font-size: var(--fs-sm); font-weight: 600; }
  .field__required { color: var(--danger); }
  .field__control { inline-size: 100%; padding: 0.7em 0.9em; border: 1px solid color-mix(in oklch, var(--text) 25%, transparent); border-radius: 0.6rem; background: var(--white); color: var(--text); }
  .field__control:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent); }
  .field__control--textarea { min-block-size: 8rem; resize: vertical; }

  .check { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--fs-sm); }
  .check__input { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.3em; accent-color: var(--primary); }

  /* ---------- Footer ---------- */
  .footer { padding-block-start: var(--space-2xl); background: var(--primary-darker); font-size: var(--fs-sm); color: color-mix(in oklch, var(--white) 78%, transparent); }
  .footer__partner { display: block; inline-size: 100%; max-inline-size: 15rem; block-size: auto; margin-block-start: var(--space-m); padding: var(--space-xs); background: var(--white); border-radius: var(--radius); }
  .footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-xl); padding-block-end: var(--space-xl); }
  .footer__brand { grid-column: span 2; max-inline-size: 22rem; }
  @media (max-width: 40rem) { .footer__brand { grid-column: auto; } }
  .footer__logo { display: flex; margin-block-end: var(--space-m); }
  .footer__logo-img { block-size: 3.5rem; inline-size: auto; }
  .footer__title { margin-block-end: var(--space-s); font-size: 1rem; color: var(--white); }
  .footer__list, .footer__legal { display: grid; gap: 0.45em; margin: 0; padding: 0; list-style: none; }
  .footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-l); }
  .footer__link { color: inherit; text-decoration: none; }
  .footer__link:hover { color: var(--white); text-decoration: underline; }
  .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-l); border-block-start: 1px solid color-mix(in oklch, var(--white) 14%, transparent); }
  .footer__copy { margin: 0; }

  .social { display: flex; gap: var(--space-xs); margin: var(--space-m) 0 0; padding: 0; list-style: none; }
  .social__link { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: color-mix(in oklch, var(--white) 10%, transparent); color: inherit; }
  .social__link:hover { background: var(--primary); color: var(--white); }
  .social__icon { inline-size: 1.1rem; block-size: 1.1rem; }

  /* ---------- Bildrahmen ---------- */
  .media-frame { padding: var(--space-l); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 60%, var(--primary-light), var(--primary-ultra-light) 70%); }
  .media-frame__img { inline-size: 100%; block-size: auto; }

  /* ---------- Rechtstexte (Fließtext aus Redaktion → Element-Selektoren bewusst erlaubt) ---------- */
  .prose { max-inline-size: 48rem; }
  .prose :where(h2) { margin-block-start: var(--space-xl); font-size: var(--fs-h3); }
  .prose :where(h3) { margin-block-start: var(--space-l); font-size: var(--fs-lg); }

  /* ---------- BKF-Terminkalender ---------- */
  .kal { container-type: inline-size; }
  .kal__filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-l); }
  .kal__chip { padding: 0.4em 1em; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-sm); font-weight: 700; color: var(--text); cursor: pointer; }
  .kal__chip:hover { border-color: var(--primary); color: var(--primary); }
  .kal__chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--white); }
  .kal__head { display: none; }
  .kal__month { margin: var(--space-l) 0 var(--space-xs); font-size: var(--fs-base); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
  .kal__list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
  .kal__item { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: var(--space-2xs) var(--space-m); padding: var(--space-m); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: var(--radius); background: var(--white); }
  .kal__item.is-full { border-inline-start-color: var(--border); opacity: .75; }
  .kal__date { grid-row: span 4; align-self: start; display: grid; justify-items: center; padding: var(--space-xs) 0; border-radius: 0.6rem; background: var(--primary-ultra-light); line-height: 1.1; }
  .kal__wd, .kal__mon { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
  .kal__day { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); }
  .kal__title { display: grid; gap: 0.1rem; }
  .kal__name { font-weight: 700; }
  .kal__sub { font-size: var(--fs-sm); color: var(--text-muted); }
  .kal__modul { justify-self: start; padding: 0.1em 0.55em; border-radius: 0.3rem; background: var(--primary-light); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark); }
  .kal__time, .kal__place { font-size: var(--fs-sm); color: var(--text-muted); }
  .kal__action { margin-block-start: var(--space-xs); }
  .kal__btn { padding: 0.55em 1.2em; font-size: var(--fs-sm); }
  .kal__badge { display: inline-block; padding: 0.35em 0.9em; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; }
  .kal__badge--full { background: color-mix(in oklch, var(--accent) 12%, white); color: var(--accent-dark); }
  .kal__empty { color: var(--text-muted); }
  .kal__more { margin-block-start: var(--space-l); text-align: center; }
  .kal__stand { margin-block-start: var(--space-m); font-size: 0.8rem; text-align: end; color: var(--text-muted); }
  @container (min-width: 40rem) {
    .kal__head, .kal__item { grid-template-columns: 4.5rem minmax(0, 1fr) 9.5rem 8rem 8.5rem; }
    .kal__head { display: grid; gap: var(--space-m); padding: 0 var(--space-m) 0 calc(var(--space-m) + 4px); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
    .kal__date { grid-row: auto; }
    .kal__action { justify-self: end; margin: 0; }
  }

  /* ---------- Klassen-Tabs ---------- */
  .ctabs { --cat: var(--primary); display: grid; align-items: start; gap: var(--space-l); }
  @media (min-width: 56rem) { .ctabs { grid-template-columns: minmax(18rem, 0.85fr) 1.15fr; gap: var(--space-xl); } }
  .ctabs__list { display: grid; gap: 0.9rem; }
  .ctabs__tab { display: flex; align-items: center; gap: 1rem; inline-size: 100%; padding: 0.85rem 1.1rem 0.85rem 0.85rem; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--white); box-shadow: 0 1px 2px color-mix(in oklch, var(--primary-darker) 6%, transparent); text-align: start; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
  .ctabs__tab:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); transform: translateX(2px); }
  .ctabs__tab[aria-selected="true"] { padding: calc(0.85rem - 1px) calc(1.1rem - 1px) calc(0.85rem - 1px) calc(0.85rem - 1px); border: 2px solid var(--primary); box-shadow: 0 8px 24px -10px color-mix(in oklch, var(--primary) 45%, transparent); }
  .ctabs__tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
  .ctabs__badge { flex: none; display: grid; place-items: center; align-content: center; gap: 0.3rem; inline-size: 6.25rem; min-block-size: 3.75rem; padding: 0.5rem 0.6rem; border-radius: 0.65rem; background: var(--primary-darker); font-size: 1.15rem; font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: var(--white); transition: background-color .15s; }
  .ctabs__badge-icon { display: block; inline-size: auto; max-inline-size: 100%; block-size: 1.5rem; }
  .ctabs__badge-icon + .ctabs__badge-code { font-size: 0.8rem; line-height: 1; letter-spacing: 0.02em; }
  .ctabs__tab[aria-selected="true"] > .ctabs__badge { background: var(--primary); }
  .ctabs__label { flex: 1; font-weight: 800; }
  .ctabs__chevron { flex: none; inline-size: 1.1rem; block-size: 1.1rem; transform: rotate(-90deg); color: var(--text-muted); }
  .ctabs__tab[aria-selected="true"] > .ctabs__chevron { color: var(--primary); }
  .ctabs__panels { display: grid; gap: var(--space-l); }
  @media (min-width: 56rem) { .ctabs__panels { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); } }
  .ctabs__panel { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border: 1px solid var(--border); border-radius: 1.5rem; background: var(--white); box-shadow: var(--shadow); scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  .ctabs__panel:focus { outline: none; }
  .ctabs__panel[hidden] { display: none; }
  .ctabs__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-m); }
  .ctabs__panel-icon { flex: none; inline-size: auto; max-inline-size: 40%; block-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: var(--primary); opacity: .9; }
  .ctabs__panel-eyebrow { display: inline-block; margin-block-end: var(--space-2xs); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
  .ctabs__panel-title { margin-block-end: var(--space-2xs); font-size: var(--fs-h3); }
  .ctabs__panel-sub { margin-block-end: var(--space-l); color: var(--text-muted); }
  .ctabs__facts { margin-block-end: var(--space-l); }
  .ctabs__text { color: var(--text-muted); }
  .ctabs__footnote { color: var(--text-muted); }
  .ctabs__actions { margin-block-start: var(--space-l); }

  /* ---------- Bildungsgutschein: Schritte ---------- */

  /* ---------- Karussell ---------- */
  .carousel { --per-view: 1.15; --gap: var(--space-l); position: relative; }
  @media (min-width: 40rem) { .carousel { --per-view: 2; } }
  @media (min-width: 64rem) { .carousel { --per-view: 3; } }
  .carousel__track { display: flex; gap: var(--gap); margin: 0; padding: var(--space-s) 1px var(--space-l); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; scrollbar-width: none; list-style: none; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__slide { flex: 0 0 calc((100% - 2px - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); display: flex; scroll-snap-align: start; }
  .carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-block-start: var(--space-xs); }
  .carousel__dots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .carousel__dot { inline-size: 0.55rem; block-size: 0.55rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: oklch(85% 0.01 250); cursor: pointer; transition: inline-size .25s, background-color .25s; }
  .carousel__dot[aria-current="true"] { inline-size: 1.75rem; background: var(--primary); }
  .carousel__dot:focus-visible, .carousel__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .carousel__nav { display: flex; gap: var(--space-xs); }
  .carousel__btn { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--text); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
  .carousel__btn:hover { border-color: var(--primary); background: var(--primary); color: var(--white); }
  .carousel__chevron { inline-size: 1.1rem; block-size: 1.1rem; }
  .carousel__chevron--prev { transform: rotate(90deg); }
  .carousel__chevron--next { transform: rotate(-90deg); }
  .carousel.is-static .carousel__controls { display: none; }
  .carousel:not(.is-ready) .carousel__controls { visibility: hidden; }

  /* ---------- News-Karte ---------- */
  .news-card { --cat: var(--primary); position: relative; display: flex; flex-direction: column; inline-size: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
  .news-card--pkw { --cat: var(--cat-pkw); }
  .news-card--moto { --cat: var(--cat-moto); }
  .news-card--lkw { --cat: var(--cat-lkw); }
  .news-card--bus { --cat: var(--cat-bus); }
  .news-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, color-mix(in oklch, var(--cat) 14%, white), var(--primary-ultra-light)); }
  .news-card__img { position: absolute; inset: 10% 15% 16%; inline-size: 70%; block-size: 74%; object-fit: contain; }
  .news-card__media--photo > .news-card__img { inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .news-card__date { position: absolute; inset-block-start: var(--space-s); inset-inline-start: var(--space-s); padding: 0.3em 0.75em; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--white) 92%, transparent); box-shadow: 0 2px 8px color-mix(in oklch, black 12%, transparent); font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
  .news-card__avatar { position: absolute; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 50%; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 3px solid var(--white); border-radius: 50%; background: var(--white); box-shadow: 0 4px 12px color-mix(in oklch, var(--primary-darker) 18%, transparent); }
  .news-card__avatar-img { inline-size: 100%; block-size: 100%; padding: 0.35rem; border-radius: 50%; object-fit: contain; }
  .news-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(1.375rem + var(--space-s)) var(--space-l) var(--space-l); text-align: center; }
  .news-card__title { margin-block-end: var(--space-xs); font-size: var(--fs-lg); }
  .news-card__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-size: var(--fs-sm); color: var(--text-muted); }
  .news-card__btn { inline-size: 100%; margin-block-start: auto; padding-block: 0.7em; border-radius: var(--radius); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
}

/* ==========================================================================
   HILFSKLASSEN
   ========================================================================== */
@layer utilities {
  .u-mt-l { margin-block-start: var(--space-l); }
  .u-mt-xl { margin-block-start: var(--space-xl); }
  .u-text-center { text-align: center; }
  .u-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}