/* ===== 1. Tokens (src/styles/tokens.css) ===== */
/* ============================================================
   Design-Tokens „Grünes Licht“ — sicher-mit-mir.de
   Farbdramaturgie: Anthrazit → Oxblut (Rot) → Bernstein (Gelb)
   → Feldgrün (Grün). Das Grün des S-Logos ist der Markenkern.
   ============================================================ */
:root {
  /* Marke */
  --brand: #7dbd2c;          /* Logo-Grün (aus Original gemessen) */
  --lime: #a9e24e;           /* helles Akzent-Grün auf dunklem Grund */
  --wald: #1e3d14;           /* tiefes Grün — Finale-Blöcke, Text auf Hellgrün */

  /* Zonen-Hintergründe (Scroll-Reise dunkel → hell) */
  --zone-hero: #171a16;      /* Anthrazit, warm, grüner Unterton */
  --zone-rot: #2a1216;       /* gedecktes Oxblut */
  --zone-gelb: #f0e2c0;      /* warmes Bernstein-Papier */
  --zone-gruen: #e3f0d3;     /* helles Feldgrün */

  /* Signalfarben der Ampel (gedeckt, kein Kirmes-Neon) */
  --signal-rot: #d95349;
  --signal-gelb: #dfa51f;
  --signal-gruen: var(--brand);

  /* Text */
  --paper: #f7f4ec;          /* helle Schrift auf dunklen Zonen */
  --paper-dim: #c9c6bb;
  --ink: #1b1e18;            /* dunkle Schrift auf hellen Zonen */
  --ink-warm: #2b2313;       /* Text in der Gelb-Zone */
  --ink-dim: #55584f;

  /* Typografie: Archivo Variable (wdth 62–125) */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.4rem, 4.6vw, 4.5rem);
  --fs-h2: clamp(2.1rem, 5.5vw, 4.25rem);
  --fs-h3: clamp(1.3rem, 2.6vw, 1.9rem);
  --fs-lead: clamp(1.125rem, 1.8vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: clamp(0.8rem, 1.3vw, 0.95rem);

  /* Raum & Raster */
  --space-section: clamp(5rem, 12vh, 9rem);
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
}

/* ===== 2. Global (src/styles/global.css) ===== */
/* ---------- Schrift: Archivo Variable, selbst gehostet ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Das hidden-Attribut gewinnt immer — auch gegen Klassen, die display
   setzen (Autoren-Styles überschreiben sonst die UA-Regel). */
[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
  background: var(--zone-hero);
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

::selection {
  background: var(--brand);
  color: #10130d;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typo-Rollen ---------- */
.display {
  font-stretch: 118%;
  font-weight: 830;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-wrap: balance;
}

.eyebrow {
  font-stretch: 63%; /* Condensed — Erbe der alten Marke */
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-eyebrow);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

/* Zonen: Eigenfarben als No-JS-/Reduced-Motion-Fallback.
   Mit aktiver Motion (body.motion) werden sie transparent,
   dahinter morpht #zone-canvas die Farbe beim Scrollen. */
.zone--hero { background: var(--zone-hero); color: var(--paper); }
.zone--rot { background: var(--zone-rot); color: var(--paper); }
.zone--gelb { background: var(--zone-gelb); color: var(--ink-warm); }
.zone--gruen { background: var(--zone-gruen); color: var(--wald); }

body.motion .zone--hero,
body.motion .zone--rot,
body.motion .zone--gelb,
body.motion .zone--gruen {
  background: transparent;
}

#zone-canvas {
  display: none;
}

body.motion #zone-canvas {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--zone-hero);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  font-stretch: 80%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}

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

.btn--primary {
  background: var(--brand);
  color: #10130d;
}

.btn--primary:hover {
  background: var(--lime);
}

.btn--ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

/* ---------- Reveal-Vorbereitung (Motion setzt Startzustand) ---------- */
[data-reveal] > .reveal-mask {
  display: block;
  overflow: hidden;
}

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== 3.1 Komponente: Header (src/components/Header.astro) ===== */
  .header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-block: 0.9rem;
    transition: background 0.4s, backdrop-filter 0.4s;
  }

  .header.is-scrolled {
    background: color-mix(in srgb, var(--zone-hero) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .header__brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
  }

  .header__brand .header__logo {
    width: 26px;
    --logo-contrast: var(--paper);
  }

  .header__wordmark {
    font-stretch: 63%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1rem;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .header__nav a {
    text-decoration: none;
    font-stretch: 80%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    opacity: 0.85;
    transition: opacity 0.2s;
  }

  .header__nav a:hover {
    opacity: 1;
  }

  .header__cta {
    padding: 0.45em 1.1em;
    border-radius: 999px;
    background: var(--brand);
    color: #10130d !important;
    opacity: 1 !important;
  }

  .header__cta:hover {
    background: var(--lime);
  }

  .header__burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    position: relative;
    z-index: 70;
  }

  .header__burger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--paper);
    transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
  }

  .header__burger span:nth-child(1) { top: 18px; }
  .header__burger span:nth-child(2) { top: 26px; }
  .header__burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
  .header__burger.is-open span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--zone-hero) 96%, transparent);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s, visibility 0s linear 0.35s;
  }

  .menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s;
  }

  .menu-overlay nav {
    display: grid;
    gap: 1.4rem;
    text-align: center;
  }

  .menu-overlay a {
    color: var(--paper);
    text-decoration: none;
    font-stretch: 118%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    line-height: 1;
  }

  .menu-overlay__cta {
    color: var(--brand) !important;
  }

  @media (max-width: 860px) {
    .header__nav {
      display: none;
    }
    .header__burger {
      display: block;
    }
  }

/* ===== 3.2 Komponente: AmpelIndicator (src/components/AmpelIndicator.astro) ===== */
  .ampel {
    position: fixed;
    right: clamp(0.9rem, 2.5vw, 2rem);
    top: 50%;
    translate: 0 -50%;
    z-index: 40;
    display: grid;
    gap: 0.9rem;
    padding: 0.85rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, #141613 55%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    translate: 12px -50%;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  }

  .ampel.is-visible {
    opacity: 1;
    translate: 0 -50%;
    pointer-events: auto;
  }

  .ampel__dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #3a3d38;
    transition: background 0.4s, box-shadow 0.4s, transform 0.3s;
  }

  .ampel__dot:hover {
    transform: scale(1.25);
  }

  .ampel__dot.is-active.ampel__dot--rot {
    background: var(--signal-rot);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--signal-rot) 65%, transparent);
  }

  .ampel__dot.is-active.ampel__dot--gelb {
    background: var(--signal-gelb);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--signal-gelb) 65%, transparent);
  }

  .ampel__dot.is-active.ampel__dot--gruen {
    background: var(--signal-gruen);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--signal-gruen) 65%, transparent);
  }

  .ampel__label {
    position: absolute;
    right: calc(100% + 0.9rem);
    top: 50%;
    translate: 0 -50%;
    white-space: nowrap;
    font-stretch: 70%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--paper);
    background: color-mix(in srgb, #141613 82%, transparent);
    padding: 0.35em 0.8em;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .ampel__dot:hover .ampel__label,
  .ampel__dot:focus-visible .ampel__label {
    opacity: 1;
  }

  @media (max-width: 700px) {
    .ampel {
      display: none;
    }
  }

/* ===== 3.3 Komponente: Hero (src/components/Hero.astro) ===== */
  .hero {
    min-height: 100svh;
    display: grid;
    align-items: center;
    overflow: clip;
    position: relative;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding-top: 5rem;
    width: 100%;
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
  }

  .hero__logo-wrap {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: min(38vw, 300px);
    position: relative;
    z-index: 1;
  }

  .hero__logo-wrap .hero__logo {
    width: 100%;
    --logo-contrast: var(--paper);
    filter: drop-shadow(0 0 60px color-mix(in srgb, var(--brand) 22%, transparent));
  }

  .hero__eyebrow {
    color: var(--brand);
    margin-bottom: 1.4rem;
  }

  .hero__title {
    font-size: var(--fs-hero);
    color: var(--paper);
  }

  .hero__line {
    display: block;
    overflow: hidden;
  }

  .hero__line > span {
    display: block;
  }

  .hero__line--accent {
    color: var(--brand);
  }

  .hero__lead {
    margin-top: 1.6rem;
    max-width: 34rem;
    color: var(--paper-dim);
  }

  .hero__actions {
    margin-top: 2.2rem;
    display: grid;
    gap: 1.2rem;
    justify-items: start;
  }

  .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.65em 1.3em;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--lime);
    text-decoration: none;
    font-stretch: 75%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    transition: background 0.25s, transform 0.25s var(--ease-out);
  }

  .hero__badge:hover {
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    transform: translateY(-2px);
  }

  .hero__badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 10px 1px var(--brand);
    animation: badge-pulse 2.4s ease-in-out infinite;
  }

  @keyframes badge-pulse {
    50% {
      box-shadow: 0 0 2px 0 var(--brand);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__badge-dot {
      animation: none;
    }
  }

  .hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .hero__scrollhint {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    translate: -50% 0;
    width: 26px;
    height: 42px;
    border: 2px solid color-mix(in srgb, var(--paper) 40%, transparent);
    border-radius: 999px;
    display: grid;
    justify-items: center;
    padding-top: 7px;
  }

  .hero__scrollhint span {
    width: 4px;
    height: 9px;
    border-radius: 2px;
    background: var(--brand);
    animation: scrollhint 1.8s ease-in-out infinite;
  }

  @keyframes scrollhint {
    55% {
      transform: translateY(12px);
      opacity: 0;
    }
    70% {
      transform: translateY(0);
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__scrollhint span {
      animation: none;
    }
  }

  @media (max-width: 860px) {
    .hero__inner {
      grid-template-columns: 1fr;
      padding-top: 6rem;
      gap: 1rem;
    }

    .hero__logo-wrap {
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
      width: min(34vw, 150px);
      opacity: 0.9;
    }

    .hero__copy {
      grid-row: 2;
    }

    .hero__scrollhint {
      display: none;
    }
  }

/* ===== 3.4 Komponente: LogoS (src/components/LogoS.astro) ===== */
  .logo-s .seg--green {
    fill: var(--brand);
  }
  .logo-s .seg--contrast {
    fill: var(--logo-contrast, var(--paper));
  }

/* ===== 3.5 Komponente: ZoneErkennen (src/components/ZoneErkennen.astro) ===== */
  .erkennen__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8em;
    color: var(--signal-rot);
    margin-bottom: 1.6rem;
  }

  .zone-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
  }

  .zone-dot--rot {
    background: var(--signal-rot);
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--signal-rot) 70%, transparent);
  }

  .erkennen__title {
    font-size: var(--fs-h2);
    max-width: 22ch;
  }

  .erkennen__title em {
    font-style: normal;
    color: var(--signal-rot);
  }

  .erkennen__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
    align-items: start;
  }

  .erkennen__copy p {
    margin-bottom: 1.2rem;
    color: var(--paper-dim);
  }

  .erkennen__copy .lead {
    color: var(--paper);
  }

  .erkennen__ehrlich {
    margin: 1.8rem 0 0;
    padding: 1.4rem 1.6rem;
    border-left: 3px solid var(--signal-rot);
    background: color-mix(in srgb, var(--signal-rot) 9%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--paper);
    font-size: 1.05rem;
    text-wrap: pretty;
  }

  .erkennen__werte {
    display: grid;
    gap: 1.1rem;
  }

  .erkennen__wert {
    padding: 1.4rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper) 4%, transparent);
  }

  .erkennen__wert-nr {
    font-stretch: 63%;
    font-weight: 650;
    letter-spacing: 0.14em;
    color: var(--signal-rot);
    font-size: 0.85rem;
  }

  .erkennen__wert h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.15rem;
    margin: 0.4rem 0 0.5rem;
  }

  .erkennen__wert p {
    color: var(--paper-dim);
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .erkennen__trust {
    margin-top: clamp(3rem, 8vh, 5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding-top: 2.2rem;
    border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  }

  .erkennen__trust-item {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.3rem;
  }

  .erkennen__trust-item img {
    width: clamp(90px, 11vw, 150px);
    height: auto;
    flex: none;
    background: var(--paper);
    border-radius: 10px;
    padding: 8px;
  }

  .erkennen__trust-item figcaption {
    font-size: 0.92rem;
    color: var(--paper-dim);
    line-height: 1.5;
    max-width: 34ch;
  }

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

/* ===== 3.6 Komponente: ZoneKonzept (src/components/ZoneKonzept.astro) ===== */
  .konzept__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8em;
    color: #a8790e;
    margin-bottom: 1.6rem;
  }

  .zone-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
  }

  .zone-dot--gelb {
    background: var(--signal-gelb);
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--signal-gelb) 70%, transparent);
  }

  .konzept__title {
    font-size: var(--fs-h2);
  }

  .konzept__title-sub {
    color: #a8790e;
    font-stretch: 90%;
    font-weight: 600;
    font-size: 0.55em;
    letter-spacing: 0.02em;
  }

  .konzept__lead {
    max-width: 56rem;
    margin-top: 1.8rem;
    color: color-mix(in srgb, var(--ink-warm) 82%, transparent);
  }

  .konzept__ampel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }

  .konzept__stufe {
    background: color-mix(in srgb, #fff 55%, var(--zone-gelb));
    border: 1px solid color-mix(in srgb, var(--ink-warm) 10%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.7rem 1.6rem;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
  }

  .konzept__stufe:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink-warm) 35%, transparent);
  }

  .konzept__lampe {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: 1.1rem;
  }

  .konzept__stufe--rot .konzept__lampe {
    background: var(--signal-rot);
    box-shadow: 0 0 18px 2px color-mix(in srgb, var(--signal-rot) 55%, transparent);
  }

  .konzept__stufe--gelb .konzept__lampe {
    background: var(--signal-gelb);
    box-shadow: 0 0 18px 2px color-mix(in srgb, var(--signal-gelb) 55%, transparent);
  }

  .konzept__stufe--gruen .konzept__lampe {
    background: var(--signal-gruen);
    box-shadow: 0 0 18px 2px color-mix(in srgb, var(--signal-gruen) 55%, transparent);
  }

  .konzept__stufe h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .konzept__stufe p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink-warm) 78%, transparent);
  }

  .konzept__merke {
    margin-top: 2.6rem;
    font-size: var(--fs-lead);
    max-width: 44ch;
    text-wrap: pretty;
  }

  .konzept__merke strong {
    color: #3e7b1f;
  }

  .konzept__fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 2.2rem;
    border-top: 1px solid color-mix(in srgb, var(--ink-warm) 14%, transparent);
  }

  .konzept__fakt-wert {
    display: block;
    font-stretch: 118%;
    font-weight: 830;
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    line-height: 1;
    color: var(--ink-warm);
  }

  .konzept__fakt p {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--ink-warm) 72%, transparent);
    max-width: 30ch;
  }

  .konzept__schutz {
    margin-top: 2.4rem;
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--ink-warm) 65%, transparent);
    max-width: 62ch;
  }

/* ===== 3.7 Komponente: KurseSection (src/components/KurseSection.astro) ===== */
  .kurse__eyebrow {
    color: #a8790e;
    margin-bottom: 1.6rem;
  }

  .kurse__title {
    font-size: var(--fs-h2);
  }

  .kurse__lead {
    max-width: 50rem;
    margin-top: 1.6rem;
    color: color-mix(in srgb, var(--ink-warm) 82%, transparent);
  }

  .kurse__motto {
    font-style: normal;
    font-stretch: 105%;
    font-weight: 740;
    color: #a8790e;
  }

  .kurse__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem;
    margin-top: clamp(2.2rem, 5vh, 3.5rem);
  }

  .kurse__card {
    background: color-mix(in srgb, #fff 55%, var(--zone-gelb));
    border: 1px solid color-mix(in srgb, var(--ink-warm) 10%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
  }

  .kurse__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink-warm) 35%, transparent);
  }

  .kurse__card h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .kurse__card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink-warm) 76%, transparent);
  }

  .kurse__inhalte {
    margin-top: clamp(3rem, 7vh, 4.5rem);
  }

  .kurse__inhalte-titel {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: var(--fs-h3);
  }

  .kurse__inhalte-hinweis {
    margin-top: 0.5rem;
    color: color-mix(in srgb, var(--ink-warm) 70%, transparent);
    font-size: 0.95rem;
  }

  .kurse__accordion {
    margin-top: 1.6rem;
    border-top: 1px solid color-mix(in srgb, var(--ink-warm) 16%, transparent);
  }

  .kurse__tag {
    border-bottom: 1px solid color-mix(in srgb, var(--ink-warm) 16%, transparent);
  }

  .kurse__tag summary {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    padding: 1.1rem 0.4rem;
    cursor: pointer;
    list-style: none;
  }

  .kurse__tag summary::-webkit-details-marker {
    display: none;
  }

  .kurse__tag-nr {
    font-stretch: 63%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    color: #a8790e;
    flex: none;
    width: 5.5rem;
  }

  .kurse__tag-thema {
    font-stretch: 105%;
    font-weight: 740;
    text-transform: uppercase;
    font-size: 1.05rem;
    flex: 1;
  }

  .kurse__tag-icon {
    align-self: center;
    width: 12px;
    height: 12px;
    flex: none;
    position: relative;
  }

  .kurse__tag-icon::before,
  .kurse__tag-icon::after {
    content: "";
    position: absolute;
    inset: 5px 0;
    background: var(--ink-warm);
    transition: transform 0.3s var(--ease-out);
  }

  .kurse__tag-icon::after {
    transform: rotate(90deg);
  }

  .kurse__tag[open] .kurse__tag-icon::after {
    transform: rotate(0deg);
  }

  .kurse__tag ul {
    margin: 0;
    padding: 0 0.4rem 1.4rem calc(5.5rem + 1.2rem);
    display: grid;
    gap: 0.45rem;
    color: color-mix(in srgb, var(--ink-warm) 78%, transparent);
    font-size: 0.98rem;
  }

  .kurse__tag li {
    list-style: none;
    padding-left: 1.1rem;
    position: relative;
  }

  .kurse__tag li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--signal-gelb);
    border-radius: 2px;
  }

  .kurse__downloads {
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }

  .kurse__downloads h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.15rem;
  }

  .kurse__download-links {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .kurse__download-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.8em 1.3em;
    border-radius: var(--radius);
    background: color-mix(in srgb, #fff 55%, var(--zone-gelb));
    border: 1px solid color-mix(in srgb, var(--ink-warm) 14%, transparent);
    text-decoration: none;
    font-weight: 620;
    font-size: 0.95rem;
    color: var(--ink-warm);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  }

  .kurse__download-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ink-warm) 40%, transparent);
  }

  .kurse__download-links small {
    color: color-mix(in srgb, var(--ink-warm) 60%, transparent);
    font-size: 0.8rem;
  }

  .kurse__download-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink-warm);
    color: var(--zone-gelb);
    font-weight: 700;
  }

  @media (max-width: 640px) {
    .kurse__tag summary {
      flex-wrap: wrap;
      gap: 0.3rem 1.2rem;
    }

    .kurse__tag ul {
      padding-left: 0.4rem;
    }
  }

/* ===== 3.8 Komponente: GanztagSection (src/components/GanztagSection.astro) ===== */
  .ganztag__panel {
    background: var(--zone-hero);
    color: var(--paper);
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 5vw, 3.5rem);
    box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink-warm) 55%, transparent);
    position: relative;
    overflow: clip;
  }

  .ganztag__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      70% 90% at 85% 0%,
      color-mix(in srgb, var(--brand) 16%, transparent),
      transparent 60%
    );
  }

  .ganztag__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7em;
    color: var(--lime);
  }

  .ganztag__blitz {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    color: var(--lime);
  }

  .ganztag__title {
    margin-top: 1.2rem;
    font-size: var(--fs-h2);
  }

  .ganztag__title em {
    font-style: normal;
    color: var(--lime);
  }

  .ganztag__lead {
    margin-top: 1.4rem;
    max-width: 54rem;
    color: color-mix(in srgb, var(--paper) 80%, transparent);
  }

  .ganztag__argumente {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    position: relative;
  }

  .ganztag__karte {
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  }

  .ganztag__karte h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--lime);
  }

  .ganztag__karte p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--paper) 78%, transparent);
  }

  .ganztag__karte a {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--lime);
    text-underline-offset: 3px;
  }

  .ganztag__cta {
    margin-top: 2rem;
    position: relative;
  }

/* ===== 3.9 Komponente: TrainerSection (src/components/TrainerSection.astro) ===== */
  .trainer__eyebrow {
    color: #a8790e;
    margin-bottom: 1.6rem;
  }

  .trainer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  .trainer__title {
    font-size: var(--fs-h2);
  }

  .trainer__rolle {
    font-stretch: 63%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0.7rem 0 1.8rem;
    color: #a8790e;
  }

  .trainer__copy p {
    margin-bottom: 1.2rem;
    color: color-mix(in srgb, var(--ink-warm) 80%, transparent);
  }

  .trainer__copy .lead {
    color: var(--ink-warm);
  }

  .trainer__staatlich {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1.8rem;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid #a8790e;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, #fff 60%, var(--zone-gelb));
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ink-warm) 45%, transparent);
  }

  .trainer__siegel {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #a8790e;
    color: #fff8ea;
  }

  .trainer__staatlich p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-warm);
  }

  .trainer__staatlich strong {
    font-stretch: 105%;
    font-weight: 760;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: #a8790e;
  }

  .trainer__badges {
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .trainer__badges li {
    list-style: none;
    padding: 0.45em 1em;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--ink-warm) 28%, transparent);
    font-stretch: 75%;
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.8rem;
  }

  .trainer__media {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    align-self: end;
  }

  /* Freisteller: Figur verschmilzt mit dem Zonen-Hintergrund — nur ein
     weicher, transparent auslaufender Glow bleibt hinter der Person */
  .trainer__foto {
    margin: 0;
    position: relative;
    padding-top: clamp(2rem, 5vw, 3.5rem);
  }

  .trainer__foto-flaeche {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      55% 48% at 50% 58%,
      color-mix(in srgb, var(--brand) 22%, transparent),
      color-mix(in srgb, var(--brand) 8%, transparent) 55%,
      transparent 78%
    );
  }

  .trainer__foto img {
    position: relative;
    width: min(100%, 430px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--ink-warm) 22%, transparent));
  }

  .trainer__erfolge {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: clamp(3.5rem, 9vh, 6rem);
    padding-top: 2.2rem;
    border-top: 1px solid color-mix(in srgb, var(--ink-warm) 14%, transparent);
  }

  .trainer__erfolg-jahr {
    font-stretch: 118%;
    font-weight: 830;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    color: #a8790e;
  }

  .trainer__erfolg h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-top: 0.5rem;
  }

  .trainer__erfolg p {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--ink-warm) 70%, transparent);
    max-width: 32ch;
  }

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

    .trainer__media {
      max-width: 420px;
    }
  }

/* ===== 3.10 Komponente: FoerderSection (src/components/FoerderSection.astro) ===== */
  .foerder__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8em;
    color: #3e7b1f;
    margin-bottom: 1.6rem;
  }

  .zone-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
  }

  .zone-dot--gruen {
    background: var(--signal-gruen);
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--signal-gruen) 70%, transparent);
  }

  .foerder__title {
    font-size: clamp(2.4rem, 6.5vw, 5.2rem);
    max-width: 16ch;
  }

  .foerder__title em {
    font-style: normal;
    color: #3e7b1f;
  }

  .foerder__lead {
    max-width: 52rem;
    margin-top: 1.8rem;
    color: color-mix(in srgb, var(--wald) 85%, transparent);
  }

  .foerder__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }

  .foerder__stat-wert {
    font-stretch: 118%;
    font-weight: 830;
    font-size: clamp(3rem, 6.5vw, 5rem);
    line-height: 1;
    color: var(--wald);
  }

  .foerder__stat p {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--wald) 75%, transparent);
    max-width: 28ch;
  }

  /* ---------- Rechner ---------- */
  .rechner {
    margin-top: clamp(3rem, 7vh, 5rem);
    background: var(--wald);
    color: var(--paper);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(1.8rem, 4vw, 3rem);
    box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--wald) 60%, transparent);
  }

  .rechner__kopf {
    grid-column: 1 / -1;
  }

  .rechner__kopf h3 {
    font-stretch: 118%;
    font-weight: 830;
    text-transform: uppercase;
    font-size: var(--fs-h3);
    color: var(--lime);
  }

  .rechner__kopf p {
    margin-top: 0.4rem;
    color: color-mix(in srgb, var(--paper) 75%, transparent);
  }

  .rechner__form {
    display: grid;
    gap: 1.6rem;
    align-content: start;
  }

  .rechner__feld {
    border: 0;
    padding: 0;
    margin: 0;
  }

  .rechner__feld legend {
    font-stretch: 63%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    color: var(--lime);
    margin-bottom: 0.7rem;
    padding: 0;
  }

  .rechner__optionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .rechner__option {
    position: relative;
  }

  .rechner__option input {
    position: absolute;
    opacity: 0;
    inset: 0;
  }

  .rechner__option span {
    display: block;
    padding: 0.55em 1.1em;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--paper) 25%, transparent);
    font-size: 0.92rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    line-height: 1.3;
  }

  .rechner__option small {
    display: block;
    font-size: 0.78rem;
    opacity: 0.7;
  }

  .rechner__option input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: #10130d;
  }

  .rechner__option input:focus-visible + span {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
  }

  .rechner__optionen--klassen {
    gap: 0.4rem;
  }

  .rechner__option--klein span {
    min-width: 2.6em;
    text-align: center;
    padding: 0.5em 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .rechner__gruppenhinweis {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--paper) 62%, transparent);
  }

  .rechner__kinder {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .rechner__kinder input[type="range"] {
    flex: 1;
    accent-color: var(--brand);
    min-height: 28px;
  }

  .rechner__kinder output {
    font-stretch: 118%;
    font-weight: 830;
    font-size: 1.8rem;
    min-width: 2.2ch;
    text-align: right;
    color: var(--lime);
  }

  /* Ergebnis */
  .rechner__ergebnis {
    background: color-mix(in srgb, #000 22%, transparent);
    border-radius: var(--radius);
    padding: clamp(1.3rem, 3vw, 2rem);
    display: grid;
    align-content: start;
    gap: 1rem;
  }

  .rechner__zeilen {
    display: grid;
    gap: 0.55rem;
  }

  .rechner__zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.98rem;
    color: color-mix(in srgb, var(--paper) 80%, transparent);
  }

  .rechner__zeile strong {
    font-stretch: 105%;
    font-weight: 760;
    font-size: 1.15rem;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
  }

  .rechner__zeile--zuschuss strong {
    color: var(--lime);
  }

  .rechner__zeile--rest {
    border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
    padding-top: 0.7rem;
    margin-top: 0.3rem;
  }

  .rechner__zeile--rest strong {
    font-size: 1.6rem;
  }

  .rechner__prokind {
    margin-top: 0.4rem;
    font-size: 1.02rem;
  }

  .rechner__prokind strong {
    color: var(--lime);
    font-variant-numeric: tabular-nums;
  }

  .rechner__deckel,
  .rechner__disclaimer {
    font-size: 0.83rem;
    color: color-mix(in srgb, var(--paper) 62%, transparent);
    line-height: 1.5;
  }

  .rechner__qualitativ p {
    font-size: 1.02rem;
    line-height: 1.6;
  }

  .rechner__qualitativ strong {
    color: var(--lime);
  }

  .rechner__partner {
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--paper) 70%, transparent);
  }

  .rechner__partner a {
    color: var(--lime);
    text-underline-offset: 3px;
  }

  .rechner__cta {
    justify-self: start;
  }

  /* ---------- Partner-Karten ---------- */
  .foerder__partner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.2rem;
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }

  .foerder__partner-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.3rem 1.4rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, #fff 60%, var(--zone-gruen));
    border: 1px solid color-mix(in srgb, var(--wald) 12%, transparent);
    text-decoration: none;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
  }

  .foerder__partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--wald) 40%, transparent);
  }

  .foerder__partner-logo {
    flex: none;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
  }

  .foerder__partner-logo img {
    max-width: 100%;
    max-height: 68px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .foerder__partner-text {
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--wald) 78%, transparent);
    line-height: 1.45;
  }

  .foerder__partner-text strong {
    display: block;
    font-stretch: 105%;
    font-weight: 760;
    text-transform: uppercase;
    font-size: 0.98rem;
    color: var(--wald);
    margin-bottom: 0.2rem;
  }

  /* ---------- Kooperation ---------- */
  .foerder__koop {
    margin-top: clamp(2rem, 5vh, 3rem);
    padding: 1.6rem 1.8rem;
    border-left: 3px solid var(--brand);
    background: color-mix(in srgb, #fff 45%, var(--zone-gruen));
    border-radius: 0 var(--radius) var(--radius) 0;
    max-width: 56rem;
  }

  .foerder__koop h3 {
    font-stretch: 105%;
    font-weight: 760;
    text-transform: uppercase;
    font-size: 1.05rem;
  }

  .foerder__koop p {
    margin-top: 0.6rem;
    font-size: 0.98rem;
    color: color-mix(in srgb, var(--wald) 80%, transparent);
  }

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

/* ===== 3.11 Komponente: PreiseSection (src/components/PreiseSection.astro) ===== */
  .preise__eyebrow {
    color: #3e7b1f;
    margin-bottom: 1.6rem;
  }

  .preise__title {
    font-size: var(--fs-h2);
  }

  .preise__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2.2rem, 5vh, 3.5rem);
    align-items: start;
  }

  .preise__haupt {
    display: grid;
    gap: 1.4rem;
  }

  .preise__card {
    padding: 2.2rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--wald);
    color: var(--paper);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--wald) 60%, transparent);
  }

  .preise__preis {
    font-stretch: 118%;
    font-weight: 830;
    font-size: clamp(3.2rem, 7vw, 4.8rem);
    line-height: 1;
    color: var(--lime);
  }

  .preise__preis span {
    font-size: 0.35em;
    font-weight: 600;
    font-stretch: 90%;
    color: color-mix(in srgb, var(--paper) 70%, transparent);
  }

  .preise__card h3 {
    margin-top: 0.9rem;
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.15rem;
  }

  .preise__card-text {
    margin-top: 0.5rem;
    font-size: 0.98rem;
    color: color-mix(in srgb, var(--paper) 75%, transparent);
  }

  .preise__fakten {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }

  .preise__fakten li {
    list-style: none;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, #fff 60%, var(--zone-gruen));
    border: 1px solid color-mix(in srgb, var(--wald) 12%, transparent);
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--wald) 88%, transparent);
  }

  .preise__fakten a {
    color: #3e7b1f;
    font-weight: 650;
    text-underline-offset: 3px;
  }

  .preise__inklusiv {
    background: color-mix(in srgb, #fff 60%, var(--zone-gruen));
    border: 1px solid color-mix(in srgb, var(--wald) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.8rem;
  }

  .preise__inklusiv h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.15rem;
  }

  .preise__inklusiv ul {
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

  .preise__inklusiv li {
    list-style: none;
    padding-left: 1.7rem;
    position: relative;
    font-size: 0.98rem;
  }

  .preise__inklusiv li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--brand);
    border-bottom: 3px solid var(--brand);
    transform: rotate(-45deg);
  }

  .preise__detail {
    margin-top: 1.3rem;
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--wald) 70%, transparent);
    line-height: 1.6;
  }

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

/* ===== 3.12 Komponente: BuchungSection (src/components/BuchungSection.astro) ===== */
  .buchung__eyebrow {
    color: #3e7b1f;
    margin-bottom: 1.6rem;
  }

  .buchung__title {
    font-size: var(--fs-h2);
  }

  .buchung__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    margin-top: clamp(2.2rem, 5vh, 3.5rem);
    align-items: start;
  }

  /* ---------- Timeline ---------- */
  .timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    display: grid;
    gap: clamp(2rem, 5vh, 3rem);
  }

  .timeline__line {
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: color-mix(in srgb, var(--wald) 18%, transparent);
    border-radius: 2px;
    overflow: hidden;
  }

  .timeline__line-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brand);
  }

  .timeline__step {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    position: relative;
  }

  .timeline__marker {
    flex: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--wald);
    color: var(--lime);
    font-stretch: 118%;
    font-weight: 830;
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
    border: 3px solid var(--zone-gruen);
  }

  .timeline__step h3 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.15rem;
    padding-top: 0.55rem;
  }

  .timeline__step p {
    margin-top: 0.5rem;
    font-size: 0.98rem;
    color: color-mix(in srgb, var(--wald) 78%, transparent);
    max-width: 40ch;
  }

  /* ---------- Formular ---------- */
  .buchung__kontakt {
    background: color-mix(in srgb, #fff 60%, var(--zone-gruen));
    border: 1px solid color-mix(in srgb, var(--wald) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 2.4rem);
    scroll-margin-top: 5rem;
  }

  .buchung__kontakt-titel {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: var(--fs-h3);
  }

  .buchung__kontakt-text {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--wald) 92%, transparent);
  }

  .kontaktform {
    margin-top: 1.6rem;
    display: grid;
    gap: 1.1rem;
  }

  .kontaktform__reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }

  .kontaktform__feld {
    display: grid;
    gap: 0.4rem;
  }

  .kontaktform__feld span {
    font-stretch: 70%;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--wald);
  }

  .kontaktform__feld input,
  .kontaktform__feld textarea {
    font: inherit;
    padding: 0.75em 1em;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--wald) 25%, transparent);
    background: #fff;
    color: var(--ink);
    transition: border-color 0.2s;
    resize: vertical;
  }

  .kontaktform__feld input:focus,
  .kontaktform__feld textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
  }

  .kontaktform__feld ::placeholder {
    color: color-mix(in srgb, var(--ink) 40%, transparent);
  }

  .kontaktform__consent {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--wald) 92%, transparent);
    line-height: 1.5;
  }

  .kontaktform__consent input {
    margin-top: 0.25em;
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--brand);
    flex: none;
  }

  .kontaktform__submit {
    justify-self: start;
    border: 0;
  }

  .kontaktform__status {
    font-size: 0.95rem;
    min-height: 1.4em;
    margin: 0;
  }

  .kontaktform__status--ok {
    color: #2e6212;
    font-weight: 650;
  }

  .kontaktform__status--fehler {
    color: #b23c31;
    font-weight: 650;
  }

  .buchung__direkt {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--wald) 14%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    font-size: 0.98rem;
  }

  .buchung__direkt p {
    color: color-mix(in srgb, var(--wald) 88%, transparent);
  }

  .buchung__direkt a {
    font-weight: 700;
    color: var(--wald);
    text-underline-offset: 3px;
  }

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

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

/* ===== 3.13 Komponente: Footer (src/components/Footer.astro) ===== */
  .footer {
    background: var(--zone-hero);
    color: var(--paper);
    padding: clamp(3rem, 7vh, 5rem) 0 2rem;
  }

  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .footer__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .footer__brand .footer__logo {
    width: 34px;
    --logo-contrast: var(--paper);
  }

  .footer__wordmark {
    font-stretch: 63%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .footer__claim {
    font-size: 0.88rem;
    color: var(--paper-dim);
  }

  .footer__nav {
    display: flex;
    gap: 1.6rem;
  }

  .footer__nav a {
    text-decoration: none;
    font-stretch: 80%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    opacity: 0.8;
  }

  .footer__nav a:hover {
    opacity: 1;
  }

  .footer__social {
    display: flex;
    gap: 1rem;
  }

  .footer__social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--paper) 25%, transparent);
    transition: border-color 0.25s, color 0.25s;
  }

  .footer__social a:hover {
    border-color: var(--brand);
    color: var(--brand);
  }

  .footer__copy {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--paper) 66%, transparent);
    padding-inline: var(--gutter);
  }

/* ===== 4. Legal-Layout (src/layouts/Legal.astro) — gescopter Style-Block ===== */
  .legal {
    background: var(--paper);
    color: var(--ink);
    padding: clamp(8rem, 16vh, 11rem) 0 clamp(4rem, 8vh, 6rem);
  }

  .legal h1 {
    font-size: var(--fs-h2);
    margin-bottom: 2.5rem;
  }

  .legal__content h2 {
    font-stretch: 110%;
    font-weight: 780;
    text-transform: uppercase;
    font-size: 1.25rem;
    margin: 2.2rem 0 0.7rem;
  }

  .legal__content p,
  .legal__content address {
    margin: 0 0 1rem;
    font-style: normal;
    color: color-mix(in srgb, var(--ink) 85%, transparent);
    line-height: 1.7;
  }

  .legal__content a {
    color: #3e7b1f;
    text-underline-offset: 3px;
  }

/* ===== 4. Legal-Layout (src/layouts/Legal.astro) — globaler Style-Block ===== */
  /* Header auf hellen Rechtsseiten dunkel hinterlegen */
  .legal ~ * .header,
  body:has(.legal) .header {
    background: color-mix(in srgb, var(--zone-hero) 92%, transparent);
    backdrop-filter: blur(14px);
  }

/* ===== WP-Adapter: Mappings für Gutenberg/Plugin-Markup — wird in späteren Tasks gefüllt ===== */

/* ---------- Hero: Buttons (core/buttons → .hero__buttons, core/button → btn--primary/btn--ghost) -----------
   .hero__buttons liefert bereits das Flex-Layout der Button-Reihe (siehe
   Abschnitt 3.3, unverändert) — hier nur die Button-Optik selbst
   nachbilden: core/button erzeugt einen eigenen Wrapper (.wp-block-button),
   die btn--primary/btn--ghost-Klasse liegt auf diesem Wrapper, nicht auf
   dem <a>. Die Deklarationen von .btn + .btn--primary/.btn--ghost
   (Abschnitt 2, unverändert) werden hier bewusst dupliziert und auf
   .wp-block-button__link übertragen.

   Der Wrapper selbst soll dabei UNSICHTBAR bleiben — genau das
   verhindern die einfachen Klassenselektoren .btn/.btn--primary/
   .btn--ghost (Abschnitt 2), weil Gutenberg das Block-className
   grundsätzlich auf den Wrapper-<div> statt auf den <a> setzt und diese
   Selektoren ihn dadurch ungewollt mittreffen. Innerhalb einer
   Button-Reihe (.hero__buttons, display:flex) fällt das nicht auf, weil
   Flex-Kinder sich standardmäßig auf ihren Inhalt schrumpfen — bei einem
   alleinstehenden core/button (kein umgebendes core/buttons, z. B.
   .ganztag__cta) ist der Wrapper dagegen ein normaler Block und wurde
   ohne diesen Reset auf volle Breite gestreckt UND farbig hinterlegt
   dargestellt (Regression, siehe Task-11-Screenshot-Diff). Bewusst OHNE
   :where() — der Reset muss die Abschnitt-2-Regeln zuverlässig
   überstimmen, nicht nur bei gleicher Spezifität verlieren. */
.wp-block-button.btn,
.wp-block-button.btn--primary,
.wp-block-button.btn--ghost {
	display: inline-block;
	background: none;
	padding: 0;
	border: 0;
	border-radius: 0;
}

:where(.wp-block-button.btn--primary) .wp-block-button__link,
:where(.wp-block-button.btn--ghost) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9em 1.7em;
	border-radius: 999px;
	border: 2px solid transparent;
	font-stretch: 80%;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}

:where(.wp-block-button.btn--primary) .wp-block-button__link:hover,
:where(.wp-block-button.btn--ghost) .wp-block-button__link:hover {
	transform: translateY(-2px);
}

:where(.wp-block-button.btn--primary) .wp-block-button__link {
	background: var(--brand);
	color: #10130d;
}

:where(.wp-block-button.btn--primary) .wp-block-button__link:hover {
	background: var(--lime);
}

:where(.wp-block-button.btn--ghost) .wp-block-button__link {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

/* ---------- Hero-Badge: Dot vor dem Text -----------
   Original (Hero.astro): <a class="hero__badge"><span class="hero__badge-dot">…
   Im Gutenberg-Pattern ist das Badge ein reiner Text-Absatz (core/paragraph,
   className hero__badge) — der Punkt kommt hier als ::before, mit exakt
   den Deklarationen von .hero__badge-dot (Abschnitt 3.3, unverändert).
   .hero__badge ist bereits display:inline-flex mit gap:0.7em (Abschnitt
   3.3) — dadurch wird der ::before-Pseudo-Flex-Item automatisch mit dem
   richtigen Abstand vor den Text gesetzt, genau wie beim Original-Span. */
:where(.hero__badge)::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 10px 1px var(--brand);
	animation: badge-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	:where(.hero__badge)::before {
		animation: none;
	}
}

/* Der Badge-Text ist im Pattern ein Inline-Link (RichText-<a>) INNERHALB
   des p.hero__badge — im Original lag der Link auf dem Badge selbst
   (a.hero__badge mit color: var(--lime) und text-decoration: none,
   Abschnitt 3.3, unverändert). Farbe erbt der Inline-Link bereits über
   die globale Regel `a { color: inherit }` (Abschnitt 2) vom Badge;
   hier nur die Browser-Standard-Unterstreichung entfernen, damit der
   Text visuell exakt dem Original entspricht. Hover (Hintergrund +
   Anheben) liegt weiterhin auf .hero__badge:hover und greift beim
   Überfahren des Links mit; Fokus-Ring kommt von der globalen
   :focus-visible-Regel (Abschnitt 2) auf dem Inline-Link selbst. */
:where(.hero__badge) a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Trainer-Foto: inneres core/image-figure -----------
   Original (TrainerSection.astro/dist): <figure class="trainer__foto">
   umschließt Freiflächen-Span und <img> direkt; .trainer__foto setzt
   margin: 0 (Abschnitt 3.9). Im Pattern (patterns/trainer.php) ist
   .trainer__foto ein core/group-<div>, und core/image erzeugt darin ein
   eigenes, klassenloses <figure class="wp-block-image">. Da das
   wp-block-library-CSS dequeued ist (inc/assets.php) und site.css keinen
   Reset für <figure> enthält, griffe sonst der Browser-Default
   `figure { margin: 1em 40px }` — das Foto würde gegenüber dem absolut
   positionierten Glow (.trainer__foto-flaeche, inset: 0 relativ zu
   .trainer__foto) verschoben und verschmälert. margin: 0 stellt die
   Original-Geometrie her: Das figure füllt .trainer__foto dann exakt so,
   wie im Original das <img> direkt in figure.trainer__foto lag. */
:where(.trainer__foto) .wp-block-image {
	margin: 0;
}

/* ---------- Kontaktformular: Contact Form 7 (blocks/kontakt/render.php) -----------
   CF7 rendert das Formular NICHT als reines .kontaktform-<form> wie im
   Astro-Original, sondern wickelt es zusätzlich ein: ein äußeres
   <div class="wpcf7" id="…"> um alles, darin zuerst ein
   <div class="screen-reader-response"> (Live-Region + Fehlerliste für
   Screenreader, im Original nicht vorhanden) und danach das eigentliche
   <form class="kontaktform" id="kontaktform">. html_id/html_class
   (Shortcode-Attribute in render.php) landen laut CF7-Dokumentation auf
   dem <form>-Element selbst, nicht auf dem äußeren .wpcf7-Div — dadurch
   bleiben `#kontaktform` (site.min.js) und `.kontaktform` (site.css,
   Abschnitt 3.12) unverändert gültige Selektoren. Das CF7-eigene
   Stylesheet ist dequeued (inc/cf7.php) — alle Regeln hier ersetzen es.

   Innerhalb jedes Feldes wrappt CF7 das Control zusätzlich in
   <span class="wpcf7-form-control-wrap">. .kontaktform__feld input/
   textarea (Abschnitt 3.12, unverändert) matchen als Nachfahren-Selektor
   weiterhin, aber die Grid-Zelle (.kontaktform__feld ist display:grid)
   streckte im Original das direkte <input>/<textarea> automatisch auf
   volle Breite — mit der zusätzlichen Wrapper-Ebene braucht es dafür
   explizites display:block + width:100%.

   Dieser Wrapper-Span bringt noch einen zweiten Effekt mit: Abschnitt
   3.12 stylt JEDEN <span> direkt in .kontaktform__feld als Label-Text
   (".kontaktform__feld span" — im Original genau ein <span> pro Feld,
   nämlich "Name*" & Co.). Der CF7-Wrapper-Span erfüllt denselben
   Selektor mit und übernimmt dadurch ungewollt die kleine
   Versalien-Optik des Labels (u. a. font-size: 0.78rem) — das <input>/
   <textarea> darin (font: inherit, s. u.) fällt dadurch auf diese
   kleinere Schrift zurück, was Zeilenhöhe und Feld-Layout im ganzen
   Formular verschiebt (Regression, siehe Task-11-Screenshot-Diff). Reset
   auf die Werte, die .kontaktform__feld selbst hätte.

   Bewusst OHNE :where(): ".kontaktform__feld span" (Abschnitt 3.12) hat
   Spezifität (0,1,1) — ein :where()-Reset (0,1,0) würde dagegen
   verlieren. Der einfache Selektor ".kontaktform__feld .wpcf7-…-wrap"
   (zwei Klassen, (0,2,0)) gewinnt zuverlässig. */
.kontaktform__feld .wpcf7-form-control-wrap {
	display: block;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
}

:where(.kontaktform__feld) .wpcf7-form-control-wrap input,
:where(.kontaktform__feld) .wpcf7-form-control-wrap textarea {
	width: 100%;
	/* input/textarea bleiben (Browser-Default) inline-level Elemente;
	   als einziges Kind im jetzt block-level .wpcf7-form-control-wrap
	   lässt der umschließende Zeilenkasten sonst unterhalb Platz für
	   Zeichen-Unterlängen frei — bei der mehrzeiligen Nachricht-Textarea
	   sichtbar als zusätzliche Höhe gegenüber dem Original, das ohne
	   Wrapper-Span auskommt (Regression, siehe Task-11-Screenshot-Diff,
	   nur bei schmalen Breiten über der 1,5-%-Schwelle aufgefallen). */
	vertical-align: bottom;
}

/* CF7 rendert zusätzlich ein <fieldset class="hidden-fields-container">
   um seine versteckten Meta-Felder (_wpcf7, _wpcf7_version,
   _wpcf7_locale, _wpcf7_unit_tag, _wpcf7_container_post,
   _wpcf7_posted_data_hash) — die einzelnen <input type="hidden"> darin
   sind zwar unsichtbar, das umschließende <fieldset> selbst aber nicht:
   ohne CF7s eigenes (hier dequeued) Stylesheet zeigt der Browser-Default
   für <fieldset> einen Rahmen + Innenabstand, die im Original nicht
   vorkommen und als leere Box vor den Formularfeldern erscheinen. Regel
   1:1 aus CF7s includes/css/styles.css übernommen. */
:where(.wpcf7) .hidden-fields-container {
	display: none;
}

/* CF7 rendert seinen Screenreader-Statusbereich (.screen-reader-response,
   <p role="status"> + <ul></ul>) IMMER, auch initial ohne Inhalt. Normal
   versteckt ihn CF7s eigenes (hier dequeued) Stylesheet visuell, aber
   weiterhin für Screenreader zugänglich. Ohne Gegenmaßnahme würde ihn
   der Browser-Default für <ul> (Vertikal-Margin) als sichtbare Lücke vor
   dem Formular rendern. Deklarationen 1:1 von .visually-hidden
   (Abschnitt 2, unverändert) übernommen — Klasse selbst kann hier nicht
   verwendet werden, weil sie im CF7-Markup nicht vorkommt. */
:where(.wpcf7) .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Feldbezogene Validierungshinweise (erscheinen erst nach einem
   fehlgeschlagenen Sende-Versuch, direkt hinter dem jeweiligen Control) —
   Optik analog .kontaktform__status--fehler (Abschnitt 3.12,
   Farbe/Schriftgewicht), zusätzlich klein und als eigene Zeile, wie es
   sich für einen Feld-Hinweis statt einer Formular-weiten Statuszeile
   gehört. CF7s Default-Rahmen/-Hintergrund wird zurückgesetzt.

   Bewusst OHNE :where(): CF7 rendert den Hinweis als <span
   class="wpcf7-not-valid-tip"> innerhalb von .wpcf7-form-control-wrap,
   also ebenfalls innerhalb von .kontaktform__feld — ".kontaktform__feld
   span" (Abschnitt 3.12, Spezifität (0,1,1)) übernahm dadurch ungewollt
   seine dunkelgrüne Label-Farbe statt der Fehlerfarbe (Regression, siehe
   Task-11-Formular-E2E). ".kontaktform .wpcf7-not-valid-tip" (zwei
   Klassen, (0,2,0)) gewinnt zuverlässig. */
.kontaktform .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35em;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.85rem;
	color: #b23c31;
	font-weight: 650;
}

/* Antwort-/Statuszeile: Optik von .kontaktform__status (Abschnitt 3.12);
   CF7 hängt sie als eigenes <div> ans Formularende — dieselbe Position
   wie im Original das <p id="form-status">. Erfolgs-/Fehlerfarbe kommt
   über die Status-Klassen, die CF7 auf das <form>-Element selbst setzt
   (form.sent = erfolgreich versendet; form.failed/.invalid = Fehler bzw.
   Validierungsfehler) — dieselben Farben wie
   .kontaktform__status--ok/--fehler (Abschnitt 3.12). CF7s
   Default-Rahmen/-Hintergrund/-Padding wird zurückgesetzt. */
:where(.kontaktform) .wpcf7-response-output {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 0.95rem;
	min-height: 1.4em;
}

:where(.kontaktform.sent) .wpcf7-response-output {
	color: #2e6212;
	font-weight: 650;
}

:where(.kontaktform.failed) .wpcf7-response-output,
:where(.kontaktform.invalid) .wpcf7-response-output {
	color: #b23c31;
	font-weight: 650;
}

/* Sende-Spinner: bewusst nicht verstecken (visuelles Feedback während des
   AJAX-Submits) — nur dezent neben den Button einpassen. */
:where(.kontaktform) .wpcf7-spinner {
	margin: 0 0 0 0.6em;
	vertical-align: middle;
}

/* Absende-Button: Original (BuchungSection.astro) nutzt ein <button
   type="submit">, CF7s [submit …]-Tag rendert stattdessen ein
   <input type="submit">. Abschnitt 1 setzt "font: inherit" global nur für
   <button> (Zeile 119) — <input> ist davon nicht erfasst und fällt ohne
   Gegenmaßnahme auf die System-Schrift des Browsers zurück. Dieselbe
   .btn-Deklaration (Abschnitt 2, em-basiertes Padding) berechnet mit der
   System-Schrift eine andere Zeilenhöhe als mit Archivo → der Button (und
   mit ihm jede nachfolgende Zeile im Formular) fiel gegenüber dem
   Original spürbar niedriger aus (Regression, siehe
   Task-11-Screenshot-Diff).

   Bewusst NUR font-family (nicht die Kurzform "font: inherit"): .btn
   (Abschnitt 2) setzt selbst schon font-size/font-weight/font-stretch
   explizit und steht im Stylesheet NACH dieser Adapter-Regel — "font:
   inherit" würde als Kurzform auch font-size zurücksetzen und, weil hier
   :where() genutzt wird, gegen .btns eigene (spätere, aber gleich
   spezifische) font-size-Deklaration bei :where()-Regeln trotzdem
   gewinnen (Regel-Reihenfolge, nicht Spezifität) — <button> bräuchte das
   nicht, weil bei ihm .btn ohnehin nach dem globalen button-Reset aus
   Abschnitt 1 kommt. Nur font-family zu setzen behebt exakt die
   System-Schrift-Abweichung, ohne .btns eigene Font-Size-Kaskade zu
   stören.

   Zusätzlich: Browser-UA-Stylesheets setzen line-height für
   input[type="submit"]/[type="button"] auf "normal" — anders als bei
   <textarea>/<input type="text"> wird die geerbte Zeilenhöhe (body,
   line-height: 1.7) hier NICHT automatisch übernommen, <button> erbt sie
   dagegen korrekt. Ohne explizites Zurücksetzen fiel der Button trotz
   korrekter Schriftart weiterhin niedriger aus als im Original. */
:where(.kontaktform) .wpcf7-submit {
	font-family: inherit;
	line-height: inherit;
}

/* Einverständnis-Checkbox (Original: <label class="kontaktform__consent">
   umschließt <input> + <span>-Text direkt, Abschnitt 3.12). CF7 erzeugt
   für [acceptance] mehrere verschachtelte Wrapper-Spans
   (.wpcf7-form-control-wrap > .wpcf7-form-control.wpcf7-acceptance >
   .wpcf7-list-item), bevor das eigentliche <label> mit Checkbox + Text
   folgt. display:contents nimmt diese Wrapper-Spans aus dem Boxbaum
   heraus, ohne den DOM-Knoten selbst zu entfernen — dadurch wird CF7s
   <label> zum direkten (einzigen) Flex-Kind von .kontaktform__consent.
   Die eigentliche Flex-Zeile (Checkbox + Text nebeneinander, wie im
   Original auf .kontaktform__consent selbst) wird deshalb hier auf
   diesem <label> nachgebildet; die Werte sind 1:1 von
   .kontaktform__consent (Abschnitt 3.12) übernommen. */
:where(.kontaktform__consent) .wpcf7-form-control-wrap,
:where(.kontaktform__consent) .wpcf7-form-control.wpcf7-acceptance,
:where(.kontaktform__consent) .wpcf7-list-item {
	display: contents;
}

:where(.kontaktform__consent) label {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	width: 100%;
}

/* Checkbox-Optik 1:1 von .kontaktform__consent input (Abschnitt 3.12,
   unverändert) übernommen. */
:where(.kontaktform__consent) input[type="checkbox"] {
	margin-top: 0.25em;
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--brand);
	flex: none;
}

/* ---------- Konzept: Zahlen-Fakten (core/paragraph statt <span>) -----------
   Original (KonzeptSection.astro): der Zahlenwert ist ein
   <span class="konzept__fakt-wert">, daneben ein eigenständiges <p>
   (Label-Text) — ".konzept__fakt p" (Abschnitt 3.x) trifft dort
   ausschließlich das Label. Das Pattern rendert den Wert als eigenen
   core/paragraph-Block (patterns/konzept.php), also ebenfalls ein <p
   class="konzept__fakt-wert">Wert</p> — ".konzept__fakt p" (Spezifität
   (0,1,1)) überschreibt dadurch ungewollt font-size/color/margin-top
   des eigentlich viel größeren Zahlenwerts (Regression, siehe
   Task-11-Screenshot-Diff: unterschiedlicher Zeilenumbruch im
   Fakten-Grid je nach Item-Höhe). Gleiche Spezifität wie
   ".konzept__fakt p", aber später in der Ladereihenfolge → gewinnt
   zuverlässig. */
p.konzept__fakt-wert {
	margin-top: 0;
	font-size: clamp(2.6rem, 5vw, 3.8rem);
	color: var(--ink-warm);
	max-width: none;
}

/* ---------- Zitat-Box (core/quote statt reinem <blockquote>) -----------
   Original (ZoneErkennen.astro): <blockquote class="erkennen__ehrlich">
   enthält den Text direkt, ohne verschachteltes <p> (Abschnitt "Erkennen"
   oben, unverändert: margin/padding/Optik UND color:var(--paper) sitzen
   direkt auf dem <blockquote>, der Text erbt die helle Farbe also einfach).
   core/quote rendert den Inhalt zwingend als verschachteltes <p> INNERHALB
   des <blockquote class="wp-block-quote erkennen__ehrlich"> — das bringt
   zwei Regressionen mit sich:

   1. Der Browser-Default-Rand für <p> (ohne wp-block-library-CSS, hier
      dequeued) addiert sich zusätzlich zum Padding der Zitat-Box und
      vergrößert sie sichtbar gegenüber dem Original (Regression, siehe
      Task-11-Screenshot-Diff).
   2. Das <p> ist nicht nur Nachfahre von .erkennen__ehrlich, sondern auch
      von .erkennen__copy (der umschließenden Gruppe, Abschnitt 3.5) — dort
      setzt ".erkennen__copy p" (Spezifität (0,1,1)) color:var(--paper-dim)
      für Fließtext-Absätze. Diese Regel trifft das Zitat-<p> ungewollt mit
      und übersteuert die geerbte helle Farbe des Original-<blockquote>: der
      Zitat-Text erschien gedimmt statt in var(--paper) (Regression, siehe
      Final-Review Task 11).

   Bewusst OHNE :where(): ein :where()-Reset hätte hier nur die Spezifität
   des <p>-Typselektors selbst (0,0,1) und würde gegen ".erkennen__copy p"
   (0,1,1) verlieren — die Farbe müsste dann wieder vom Original abweichen.
   ".wp-block-quote.erkennen__ehrlich p" (zwei Klassen + Typselektor,
   (0,2,1)) gewinnt zuverlässig. */
.wp-block-quote.erkennen__ehrlich p {
	margin: 0;
	color: var(--paper);
}

/* ---------- Erkennen: Trust-Badges (core/image mit Bildunterschrift) -----------
   core/image mit Bildunterschrift lädt IMMER WordPress' eigenes
   Block-Stylesheet /wp-includes/blocks/image/style.css — unabhängig vom
   Dequeue des monolithischen "wp-block-library"-Handles (inc/assets.php):
   seit WP 5.8 liefert jeder Core-Block sein Basis-Stylesheet separat aus.
   Darin: ".wp-block-image :where(figcaption) { margin-top: 0.5em;
   margin-bottom: 1em; }". In der Flex-Zeile .erkennen__trust-item
   (Bild + Caption nebeneinander, Abschnitt "Erkennen", unverändert) zählt
   dieser Rand der <figcaption> zur Kreuzachsen-Höhe des Flex-Items dazu
   und machte die Zeile mit der kürzeren Bildunterschrift-Grafik sichtbar
   höher als im Original (Regression, siehe Task-11-Screenshot-Diff).
   Spezifität (0,1,1) schlägt das WP-eigene (0,1,0) zuverlässig. */
.erkennen__trust-item figcaption {
	margin: 0;
}

/* ---------- Ganztag: Link-Absatz in der Förderfähig-Karte -----------
   Original (GanztagSection.astro): der Link "Zum Förder-Rechner" ist ein
   eigenständiges <a>, Geschwister des Beschreibungs-<p> (kein Fließtext-
   Link). core/paragraph kann kein "nacktes" <a> außerhalb eines
   Textblocks abbilden — patterns/ganztag.php steckt den Link deshalb in
   einen eigenen, sonst leeren core/paragraph. ".ganztag__karte p"
   (Abschnitt "Ganztag", unverändert) trifft dadurch AUCH diesen reinen
   Link-Wrapper mit: margin-top/font-size/line-height für Fließtext
   landen so zusätzlich zu ".ganztag__karte a"s eigener margin-top
   (Abschnitt "Ganztag") auf dem Link — die Karte mit Link fiel dadurch
   höher aus als die beiden Karten ohne Link (Regression, siehe
   Task-11-Screenshot-Diff). Reset des reinen Link-Wrappers auf neutral;
   ".ganztag__karte a" allein bestimmt danach wieder Abstand/Optik, genau
   wie beim direkten Geschwister-<a> im Original. */
.ganztag__karte p:has(> a:only-child) {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}