/* Website R-A „Materialkiste“ (06 Kap. 2/3) auf dem Raster aus 01 Kap. 4.3 / 05 Kap. 5. Nur --color-* aus dem Theme .site, nur hell (D13).
   Container-Queries (cqi), damit die Handy-Vorschau im Editor (390 px) genauso umbricht wie ein echtes Handy.
   Raster ab 62rem Container (992 px): 12 Spalten, Spaltenabstand 24, feste Containerbreiten wie Bootstrap (960 · 1140).
   Eine linke Kante für Kopf, Inhalt und Fuß: Text in Spalte 1–8 (höchstens die Lesespalte, ≈ 680 px), Randspalte = 9–12
   für Notizen und Downloads. Jede Seite beginnt mit einem Seitenkopf (.site-page-head), auf Inhaltsseiten als Farbfläche.
   Rhythmus in zwei Stufen (site-tokens.css): Kapitel 96 · Unterkapitel 72 · Absatz 16 (mobil 48 · 36 · 16).
   Schrift, Gewichte, Zeilenhöhen, Rundungen und Abstände kommen nur aus --site-* und --sp-* – keine freien Werte.
   Keine Schatten. Blau ist die einzige Aktionsfarbe (Links, Fokus, höchstens eine gefüllte Hauptaktion je Bildschirm).
   Gold, Turmrosa und Himmel sind nur helle Kapitelflächen (.site-field) mit Tinte darauf; Logo-Magenta nur als Grafik.
   Listen sind Flächen und Chips statt Haarlinien; Formen rund (Karten 20/24, Flächen 28/36, Knöpfe als Pille). */
@layer site {
  .site {
    container-type: inline-size; position: relative; min-height: 100%; overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text); font-size: var(--site-fs-body); font-weight: var(--site-fw-regular); line-height: var(--site-lh-text);
    font-variant-numeric: lining-nums; font-kerning: normal;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .site ::selection { background: var(--color-field-sky); color: var(--color-text); }
  .site :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  /* Überschriften: eine Schrift, ein Gewicht, feste Größen je Rang (site-tokens.css „Typografie der Website“) */
  .site :is(h1, h2, h3) {
    font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch);
    font-optical-sizing: auto; letter-spacing: var(--site-heading-tracking); hyphens: manual; text-wrap: balance; color: var(--color-text);
  }
  .site h1 { font-size: var(--site-fs-h1); line-height: var(--site-lh-display); }
  .site h2 { font-size: var(--site-fs-h2); line-height: var(--site-lh-heading); }
  .site h3 { font-size: var(--site-fs-h4); line-height: var(--site-lh-snug); }
  .site a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-skip-ink: auto; transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease); }
  @media (hover: hover) { .site a:hover { color: var(--color-accent-strong); text-decoration-thickness: 2px; } }
  .site .icon { display: inline-block; vertical-align: -0.125em; flex: none; }
  .site .tnum, .site .time, .site .date { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
  .site .nowrap, .site .ext { white-space: nowrap; }
  /* <time> trägt nur die Maschinenlesbarkeit; Ziffern wie der umgebende Text */
  .site time { font-variant-numeric: inherit; }
  /* Sprunglink „Zum Inhalt“: erstes Element der Seite, sichtbar erst mit Tastaturfokus */
  .site .site-skip-link {
    position: absolute; top: var(--sp-2); left: var(--site-pad); z-index: 30; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--sp-5);
    border-radius: var(--site-radius-btn); background: var(--color-text); color: var(--color-bg); font-weight: var(--site-fw-strong); text-decoration: none;
  }
  .site .site-skip-link:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Ziel des Sprunglinks und – nach einem Seitenwechsel – die Überschrift bekommen den Fokus per Skript: kein Rahmen um den ganzen Inhalt */
  /* Ziele, die nur per Skript Fokus bekommen (Seitenwechsel: h1, Sprunglink: main) – für Screenreader, ohne sichtbaren Rahmen */
  .site-main:focus, .site [tabindex='-1']:focus { outline: none; }
  .site-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

  /* ---- Kopf ------------------------------------------------------------------------------- */
  /* Kopf: auf der echten Website klebt er oben (auch mobil), bekommt beim Scrollen eine feine Linie,
     weicht beim Weiterlesen aus und kommt beim Zurückscrollen wieder (SiteChrome useHeaderOnScroll). */
  .site-header {
    position: relative; z-index: 5; background: var(--color-bg); border-bottom: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out-soft);
  }
  /* Normalfall ist die Website. In der Vorschau der Redaktion (data-mode="preview": Handy-Rahmen, mehrere Vorschauen
     auf einer Seite) klebt nichts und nichts bewegt sich beim Scrollen – dort greifen die Regeln mit
     :not([data-mode='preview']) nicht. Die PHP-Vorlage gibt das Attribut nie aus. */
  .site:not([data-mode='preview']) .site-header { position: sticky; top: 0; }
  .site-header[data-scrolled='true'] { border-bottom-color: var(--color-line); }
  .site:not([data-mode='preview']) .site-header[data-hidden='true'] { transform: translateY(-100%); transition-timing-function: ease, var(--ease-exit); transition-duration: var(--dur-2), var(--dur-2); }
  .site-header-inner {
    display: flex; align-items: center; gap: var(--sp-4);
    max-width: calc(var(--site-max) + 2 * var(--site-pad)); min-height: var(--site-header-h); margin: 0 auto; padding: 0 var(--site-pad);
  }
  /* Lockup (10 Kap. 2): Symbolhöhe = Höhe des zweizeiligen Textpakets, Abstand ≈ 14/64 der Symbolhöhe … optisch 10 px */
  .site .wordmark {
    display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--target); margin-right: auto;
    color: var(--color-text); text-decoration: none; font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch);
    font-size: var(--site-fs-body); line-height: var(--site-lh-display); letter-spacing: var(--site-heading-tracking); hyphens: manual;
  }
  .site .wordmark > span { white-space: nowrap; }
  .site .wordmark > span > span { display: block; font-weight: var(--site-fw-medium); color: var(--color-text); }
  .site-mark { flex: none; overflow: visible; }
  /* Sehr schmale Handys (unter 352 px): Wortmarke und Bildmarke schrumpfen, damit der Menü-Knopf ganz im Bild bleibt */
  @container (max-width: 21.99rem) {
    .site-header-inner, .site-menu-head { gap: var(--sp-2); }
    .site .wordmark { gap: var(--sp-2); min-width: 0; font-size: var(--site-fs-micro); }
    .site .wordmark .site-mark { width: 1.75rem; height: 1.75rem; }
    .site-menu-btn { flex: none; padding-inline: var(--sp-2); margin-right: calc(-1 * var(--sp-2)); }
  }
  /* Bildmarke: die Würfel setzen sich beim Laden nacheinander ab; bei Mouse-over hüpft der Turm von unten nach oben
     einmal durch (obere Würfel höher) und steht wieder. */
  /* Aufbau liegt auf der äußeren, Hüpfen auf der inneren Gruppe: sonst begänne der Aufbau nach jedem Mouse-over neu. */
  .site .bm-cube, .site .bm-hop { transform-box: fill-box; transform-origin: 50% 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .site-header .bm-cube { animation: bm-set 420ms cubic-bezier(0.3, 0, 0.4, 1) both; animation-delay: calc(80ms + var(--i) * 70ms); }
    @media (hover: hover) {
      .site .wordmark:hover .bm-hop { animation: bm-hop 620ms cubic-bezier(0.3, 0, 0.3, 1) both; animation-delay: calc(var(--i) * 55ms); }
    }
  }
  @keyframes bm-set { 0% { opacity: 0; transform: translateY(-14px) rotate(-10deg); } 30% { opacity: 1; } 70% { transform: translateY(0) rotate(2deg); } 85% { transform: translateY(-1.5px); } 100% { transform: none; } }
  @keyframes bm-hop { 0%, 100% { transform: none; } 35% { transform: translateY(calc(-2px - var(--i) * 1.4px)) rotate(calc(-3deg + var(--i) * 2deg)); } 70% { transform: translateY(0) rotate(1deg); } 85% { transform: translateY(-1px); } }
  .site-nav, .site-call { display: none; }
  .site-menu-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target); padding: 0 var(--sp-3); margin-right: calc(-1 * var(--sp-3));
    border: 0; border-radius: var(--site-radius-btn); background: transparent; color: var(--color-text); font: var(--site-fw-strong) var(--site-fs-small)/var(--site-lh-snug) var(--font-text); cursor: pointer;
    transition: background-color var(--dur-1) var(--ease);
  }
  @media (hover: hover) { .site-menu-btn:hover { background: var(--color-surface); } }
  .site-menu-btn:active { background: var(--color-line); }
  .site-banner { padding: var(--sp-2) var(--site-pad); background: var(--color-accent-tint); font-size: var(--site-fs-small); text-align: center; }

  /* Menü (mobil): vollflächig im Grundton, Einträge in der Überschriftenschrift, aktive Seite mit Turmwürfel.
     Öffnen: Fläche blendet ein (200), Einträge folgen leicht gestaffelt (je 30 ms) mit 8 px Weg. */
  .site-menu {
    position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: var(--sp-5);
    padding: 0 var(--site-pad) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg);
    animation: site-fade-in var(--dur-2) var(--ease-out-soft) both;
  }
  .site:not([data-mode='preview']) .site-menu { position: fixed; overflow-y: auto; overscroll-behavior: contain; }
  .site-menu-head { display: flex; align-items: center; min-height: var(--site-header-h); }
  .site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
  /* Die Einträge stapeln sich von unten nach oben wie ein Turm: der unterste zuerst, jeder setzt sich mit kleinem Federn */
  .site-menu nav li { animation: menu-stack 420ms cubic-bezier(0.3, 0, 0.4, 1) both; animation-delay: calc(90ms + (var(--n, 5) - 1 - var(--i, 0)) * 55ms); }
  .site-menu nav a[aria-current='page'] > span::before { animation: menu-cube 520ms cubic-bezier(0.3, 0, 0.3, 1) 380ms both; }
  .site-menu nav a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--site-row); padding-block: var(--sp-1);
    color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-line);
    font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking);
    font-size: var(--site-fs-h3); line-height: var(--site-lh-heading); hyphens: manual;
  }
  .site-menu nav a .icon { color: var(--color-accent); transition: transform var(--dur-2) var(--ease-out-soft); }
  .site-menu nav a:active .icon { transform: translateX(4px); }
  .site-menu nav a[aria-current='page'] > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .site-menu nav a[aria-current='page'] > span::before { content: ''; flex: none; width: 0.75rem; height: 0.75rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: rotate(-4deg); }
  /* Unterseite eingerückt unter ihrer Hauptseite; Platz & Anmeldung als Knopf über der Liste (gefüllt, auf der Seite selbst mit Rand) */
  .site-menu nav a.site-menu-sub { min-height: var(--target); padding-left: var(--sp-5); font-family: var(--font-text); font-stretch: normal; font-weight: var(--site-fw-strong); letter-spacing: 0; font-size: var(--site-fs-body); }
  .site-menu-contact { display: grid; gap: var(--sp-1); margin-top: auto; padding: var(--sp-4) var(--sp-5); border-radius: var(--site-radius-card); background: var(--color-field-sun); font-size: var(--site-fs-small); color: var(--color-text); }
  .site-menu-contact a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target); font-size: var(--site-fs-body); font-weight: var(--site-fw-strong); color: var(--color-text); text-decoration: none; }
  @keyframes site-fade-in { from { opacity: 0; } }
  @keyframes menu-stack { 0% { opacity: 0; transform: translateY(-22px) rotate(-1.4deg); } 30% { opacity: 1; } 70% { transform: translateY(0) rotate(0.4deg); } 85% { transform: translateY(-2px); } 100% { transform: none; } }
  @keyframes menu-cube { from { opacity: 0; transform: translateX(-1.4rem) rotate(-184deg); } to { transform: rotate(-4deg); } }
  @keyframes site-rise { from { opacity: 0; transform: translateY(8px); } }

  /* Container-Queries wirken nur auf Nachfahren des Containers, daher .site > * statt .site. */
  /* Container wie bei Bootstrap: feste Breiten je Stufe, 12 Spalten, 24 px Spaltenabstand, 12 px Rand.
       sm ≥ 576 → 540 · md ≥ 768 → 720 · lg ≥ 992 → 960 · xl ≥ 1200 → 1140   (xxl 1320 bewusst nicht: zu breit)
     --site-max ist die Inhaltsbreite (Containerbreite minus 2 × 12 px Rand). Layoutwechsel liegen auf denselben Stufen. */
  @container (min-width: 36rem) { .site > * { --site-pad: 0.75rem; --site-max: 32.25rem; } }
  @container (min-width: 48rem) { .site > * { --site-max: 43.5rem; --site-date-mark: 4.5rem; } }
  @container (min-width: 62rem) { .site > * { --site-max: 58.5rem; --site-radius-card: 24px; --site-radius-field: 36px; } }
  @container (min-width: 75rem) { .site > * { --site-max: 69.75rem; } }
  @container (min-width: 75rem) {
    .site > * { --site-header-h: 5rem; }
    .site-header-inner { gap: var(--sp-6); }
    .site-menu-btn { display: none; }
    .site-nav { display: block; min-inline-size: 0; }
    .site-nav > ul {
      list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
      gap: 0 var(--sp-5); margin: 0; padding: 0;
    }
    .site-nav-entry { position: relative; display: flex; align-items: center; gap: var(--sp-1); min-inline-size: 0; }
    /* Unterstreichung wächst von links (Hover), aktive Seite trägt sie dauerhaft in 3 px */
    .site-nav a {
      position: relative; display: inline-flex; align-items: center; min-height: var(--target); max-inline-size: 15rem;
      color: var(--color-text); text-decoration: none; font-size: var(--site-fs-body); font-weight: var(--site-fw-medium); overflow-wrap: anywhere;
    }
    .site-nav a::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: var(--site-label-gap); height: 2px; border-radius: var(--site-radius-cube); background: var(--color-accent);
      transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out-soft);
    }
    @media (hover: hover) { .site-nav a:hover::after { transform: scaleX(1); } }
    .site-nav :is(a[aria-current='page'], [data-current] > a) { font-weight: var(--site-fw-strong); }
    .site-nav :is(a[aria-current='page'], [data-current] > a)::after { height: 3px; transform: none; background: var(--color-brand); }
    .site-nav-submenu summary {
      display: grid; place-items: center; width: 1.75rem; height: var(--target); list-style: none;
      border-radius: var(--site-radius-btn); color: var(--color-text); cursor: pointer;
    }
    .site-nav-submenu summary::-webkit-details-marker { display: none; }
    .site-nav-submenu summary svg { rotate: 90deg; }
    .site-nav-submenu[open] summary svg { rotate: -90deg; }
    .site-nav-submenu[open] summary, .site-nav-submenu summary:hover { background: var(--color-surface); }
    .site-nav-children {
      position: absolute; z-index: 1; inset-inline-end: 0; inset-block-start: 100%;
      inline-size: max-content; min-inline-size: 12rem; max-inline-size: 19rem; max-block-size: min(60vh, 24rem);
      overflow: auto; list-style: none; margin: 0; padding: var(--sp-2);
      background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--site-radius-card);
      box-shadow: 0 6px 16px rgb(43 42 51 / 10%);
    }
    .site-nav-children a { display: flex; max-inline-size: none; padding-inline: var(--sp-3); border-radius: var(--site-radius-btn); }
    .site-nav-children a:hover { background: var(--color-surface); }
    .site-nav-children a::after { inset-inline: var(--sp-3); }
    /* Telefon als runder Icon-Knopf rechts neben dem Menü: die Nummer selbst steht in Fuß, Menü und Kontakt */
    .site .site-call { display: inline-grid; place-items: center; flex: none; width: var(--target); height: var(--target); border-radius: 50%; background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
    @media (hover: hover) { .site .site-call:hover { background: var(--color-accent-tint); color: var(--color-accent-strong); } }
  }

  /* ---- Inhalt: Grundraster ------------------------------------------------------------------ */
  .site-main { max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: var(--sp-6) var(--site-pad) var(--site-chapter); }
  .site-main > .breadcrumb + h1 { margin-top: var(--sp-5); }
  .site-main > h1 + .intro { margin-top: var(--sp-4); }
  /* Fehlerseite: die nächsten Wege als Liste ruhiger Weiter-Links */
  .next-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; justify-items: start; }
  .next-steps .more-link { margin-top: 0; }
  .site-main:has(> .site-page-head.site-field) { padding-top: var(--sp-2); }
  .site-main > .site-page-head + * { margin-top: var(--site-sub); }
  .site-main > .site-page-head + .jump-nav { margin-top: var(--sp-3); }
  .site-main > .chapter + .chapter { margin-top: var(--site-chapter); }
  .site-main > .chapter[data-gap='sub'] { margin-top: var(--site-sub); }
  .site .breadcrumb { font-size: var(--site-fs-meta); }
  .site .breadcrumb a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--target); color: var(--color-text-muted); text-decoration: none; }
  .site .intro { font-size: var(--site-fs-lead); line-height: var(--site-lh-text); max-width: var(--site-measure-intro); color: var(--color-text); text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
  .site .prose { max-width: var(--site-measure); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; text-wrap: pretty; }
  .site .prose strong { font-weight: var(--site-fw-strong); }
  /* E-Mail-Adressen und Telefonnummern bekommen nie einen Trennstrich (der sähe aus wie ein Teil der Adresse);
     eine zu lange Adresse bricht notfalls ohne Strich um, eine Nummer gar nicht. */
  .site a[href^='mailto:'] { hyphens: none; -webkit-hyphens: none; overflow-wrap: anywhere; }
  .site a[href^='tel:'] { hyphens: none; -webkit-hyphens: none; white-space: nowrap; }
  /* Rechtsseiten: keine automatische Silbentrennung (Namen, Paragrafen, Adressen) */
  .site-main[data-compact] .prose { hyphens: manual; -webkit-hyphens: manual; }
  /* Absatz, der nur aus einem Link besteht: Trefferfläche 44 px */
  .site .prose .solo-link > a { display: inline-flex; align-items: center; min-height: var(--target); }
  .site .prose > * + * { margin-top: var(--site-para); }
  .site .prose h2 { margin-bottom: var(--sp-5); }
  .site .prose h2 + *, .site .prose h3 + * { margin-top: 0; }
  .site .prose h3 { margin-bottom: var(--sp-2); }
  .site .prose > h2:not(:first-child) { margin-top: var(--site-sub); }
  .site .prose ul, .site .prose ol { padding-left: var(--site-list-indent); margin: 0; }
  .site .prose li + li { margin-top: var(--sp-1); }
  /* Aufzählungen: der Turmwürfel ist das einzige Markierungszeichen der Website (Fakten, Listen, Navigation) */
  .site .prose ul:not(.keyword-list) { list-style: none; }
  .site .prose ul:not(.keyword-list) > li { position: relative; }
  .site .prose ul:not(.keyword-list) > li::before { content: ''; position: absolute; left: calc(-1 * var(--site-list-indent) + 0.15em); top: 0.58em; width: 0.5rem; height: 0.5rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: rotate(-4deg); }
  .site .chapter > h2, .site .site-block > h2, .site .mt-text > h2 { margin-bottom: var(--sp-5); }
  /* Rang = Größe (site-tokens.css „Rollen“): Kapitel <h2> in h2, Karte <h3> in h4. Zwei benannte Ausnahmen:
     Rechtsseiten setzen ihre Kapitel kompakt, und die Monate der Terminliste sind Unterkapitel (<h3> in h3). */
  .site-main[data-compact] > .chapter h2, .site .dates > h3 { font-size: var(--site-fs-h3); line-height: var(--site-lh-heading); }
  .site .dates > h3 { margin-bottom: var(--sp-5); }

  /* ---- Seitenkopf ----------------------------------------------------------------------------
     Inhaltsseiten: Farbfläche über die volle Breite, links Titel und Einleitung, rechts die Illustration
     (mobil als Akzent neben dem Titel). Rechtsseiten: schlicht, ohne Fläche. */
  .site-page-head { display: grid; margin-bottom: var(--sp-6); }
  .site-page-head.site-field { padding-block: var(--site-field-pad-compact); min-height: var(--site-head-min); align-content: center; }
  .site-page-head .breadcrumb + h1 { margin-top: var(--sp-1); }
  .site-page-head h1 + .intro { margin-top: var(--sp-4); }
  /* Illustration: eine Zielhöhe für alle Motive; die Breite folgt dem Seitenverhältnis des Motivs (--illu-ar aus
     Illustration.tsx). So ist der Seitenkopf auf allen Unterseiten gleich hoch – egal ob das Motiv quadratisch oder breit ist. */
  .site-page-head-figure .illu { aspect-ratio: var(--illu-ar, 3 / 2); }
  /* Handy (unter 576 px): die Illustration steht groß und mittig unter der Einleitung, als Abschluss der Fläche –
     jede Seite behält ihr Motiv, der Titel bleibt die erste Zeile. */
  @container (max-width: 35.99rem) {
    .site-page-head[data-has-figure] { --site-head-min: 24.25rem; }
    .site-page-head-figure { justify-self: center; margin-top: var(--sp-4); }
    .site-page-head-figure .illu { height: var(--site-head-figure-m); }
  }
  /* 576–767 px: klein rechts neben Titel und Einleitung (eine Zielhöhe für alle Motive) */
  @container (min-width: 36rem) and (max-width: 47.99rem) {
    .site-page-head[data-has-figure] { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--site-gutter); align-items: center; }
    .site-page-head-figure .illu { height: var(--site-head-figure-s); }
  }
  /* Ab Tablet: Text und Illustration nebeneinander, die Illustration in ihrer Zielhöhe */
  @container (min-width: 48rem) {
    .site > * { --site-head-min: 20rem; }
    .site-page-head-figure { margin-block: calc(-1 * var(--sp-5)); }
    .site-page-head-figure .illu { height: var(--site-head-figure); width: auto; max-width: 100%; margin-inline: auto; }
    /* Quadratische Motive (ein Gegenstand mit Luft ringsum) etwas größer, damit sie neben den breiten Szenen gleich viel Gewicht haben */
    .site-page-head-figure .illu[data-shape='square'] .illu-art { scale: 1.2; }
  }
  @container (min-width: 48rem) and (max-width: 61.99rem) {
    .site-page-head[data-has-figure] { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); column-gap: var(--site-gutter); align-items: center; }
  }

  /* Weiter-Link: Pfeil rückt bei Hover/Fokus 3 px nach (Bewegung folgt der Ursache) */
  .more-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--target); margin-top: var(--sp-3); font-size: var(--site-fs-body); font-weight: var(--site-fw-strong); text-decoration: none; }
  .more-link > span, .site .more-link { text-decoration-line: none; }
  .more-link .icon { transition: transform var(--dur-2) var(--ease-out-soft); }
  @media (hover: hover) { .site .more-link:hover { text-decoration-line: underline; } .more-link:hover .icon { transform: translateX(3px); } }
  .more-link:focus-visible .icon, .more-link:active .icon { transform: translateX(3px); }
  /* ---- Knopf ----------------------------------------------------------------------------------
     Ein Baustein für alle Knöpfe der Website. Varianten: .primary (gefüllt, die Hauptaktion) und .secondary
     (Rand). Größen: Standard 48 px, data-size="s" 44 px (Kopfzeile). Abstände setzt der Ort, nie der Knopf.
     Der Knopf „Platz & Anmeldung“ in Kopf und Menü ist auf seiner eigenen Seite .secondary (SiteChrome). */
  .site .site-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--sp-7); padding: var(--sp-1) var(--sp-5);
    border: 2px solid transparent; border-radius: var(--site-radius-btn); background: none; color: var(--color-text);
    font-family: var(--font-text); font-stretch: normal; letter-spacing: 0; font-size: var(--site-fs-body); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug);
    text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .site .site-btn[data-size='s'] { min-height: var(--target); padding-inline: var(--sp-5); }
  .site .site-btn:active { transform: scale(0.98); }
  .site .site-btn.primary { background: var(--color-accent); color: var(--color-on-accent); }
  .site .site-btn.secondary { border-color: currentColor; }
  @media (hover: hover) {
    .site .site-btn.primary:hover { background: var(--color-accent-strong); color: var(--color-on-accent); }
    .site .site-btn.secondary:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent-tint) 55%, transparent); }
  }

  /* ---- Chip ------------------------------------------------------------------------------------
     Ein Baustein für alle kleinen Pillen: Sprungleiste, Filter, „Weiterlesen“, Uhrzeit. Gewählt = Tinte.
     Auf Farbflächen warmweiß statt Ahorn. Die Uhrzeit ist nur Anzeige (kleiner, kein Zeiger). */
  .site :is(.jump-nav a, .chip-btn, .more-toggle, .time-chip) {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target); padding: 0 var(--sp-4);
    border: 0; border-radius: var(--site-radius-btn); background: var(--color-surface); color: var(--color-text);
    font-family: var(--font-text); font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug);
    text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .site .site-field :is(.chip-btn, .more-toggle, .time-chip) { background: var(--color-chip); }
  /* (span davor: die Sammelregel oben zählt wie ihr stärkster Eintrag, „.jump-nav a“) */
  .site span.time-chip { justify-self: start; min-height: var(--sp-6); padding-inline: var(--sp-3); cursor: default; }
  .site :is(.jump-nav a[aria-current], .chip-btn[aria-pressed='true']) { background: var(--color-text); color: var(--color-bg); }
  @media (hover: hover) { .site :is(.jump-nav a:not([aria-current]), .chip-btn:not([aria-pressed='true']), .more-toggle):hover { background: var(--color-accent-tint); color: var(--color-accent-strong); } }
  .site :is(.jump-nav a, .chip-btn, .more-toggle):active { background: var(--color-accent-tint); }

  /* ---- Sprunglinks „Auf dieser Seite“ (SiteChrome PageJumpNav) ------------------------------------
     Mobil eine wischbare Chip-Zeile (randlos bis an den Bildschirmrand), am Desktop umbrechend. */
  .jump-nav { margin: var(--sp-5) calc(-1 * var(--site-pad)) 0; padding-block: var(--sp-2); background: var(--color-bg); }
  .jump-nav[hidden] { display: none; }
  /* Beschriftung „Auf dieser Seite“: nur sichtbar, wenn die Leiste als Verzeichnis links steht (ab 1200 px) */
  .jump-nav-label { display: none; }
  /* Echte Website: die Leiste bleibt beim Lesen oben stehen (unter dem Kopf, solange er sichtbar ist). */
  .site:not([data-mode='preview']) .jump-nav {
    position: sticky; top: var(--site-header-h); z-index: 4; transition: top var(--dur-2) var(--ease);
    box-shadow: -50vw 0 0 var(--color-bg), 50vw 0 0 var(--color-bg);
  }
  .site:not([data-mode='preview']):has(.site-header[data-hidden='true']) .jump-nav { top: 0; }
  .site:not([data-mode='preview']) .site-main [id] { scroll-margin-top: 7.5rem; }
  .jump-nav ul {
    list-style: none; margin: 0; padding: var(--site-nudge) var(--site-pad); display: flex; gap: var(--sp-2);
    /* rechte Kante blendet aus: zeigt, dass die Zeile weiterläuft (liegt sonst im leeren Rand) */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--site-pad); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .jump-nav ul::-webkit-scrollbar { display: none; }
  .jump-nav li { flex: none; scroll-snap-align: start; }
  .site-main > .jump-nav + * { margin-top: var(--site-sub); }

  /* Randnotizen: mobil direkt nach dem Bezugsinhalt, am Desktop in Spalte 10–12 */
  .marginal { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); font-size: var(--site-fs-small); line-height: var(--site-lh-text); }

  @container (min-width: 62rem) {
    .site-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--site-gutter); padding-top: var(--sp-9); }
    .site-main > * { grid-column: 1 / 8; min-width: 0; }
    .site-main > h1 { grid-column: 1 / 11; }
    .site-main:has(> .site-page-head.site-field) { padding-top: var(--sp-5); }
    .site-main > .jump-nav { grid-column: 1 / 13; }
    .site-main > .site-page-head, .site-main > .chapter { grid-column: 1 / 13; display: grid; grid-template-columns: subgrid; align-items: start; }
    .site-main > .site-page-head { align-items: center; }
    .site-page-head > .site-page-head-text { grid-column: 1 / 11; }
    .site-page-head[data-has-figure] > .site-page-head-text { grid-column: 1 / 8; }
    .site-page-head > .site-page-head-figure { grid-column: 8 / 13; }
    .site-main > .chapter > * { grid-column: 1 / 9; min-width: 0; }
    .site-main > .chapter > .marginal { grid-column: 9 / 13; grid-row: 1 / span 3; margin: 0; padding-top: var(--sp-2); }
    .chapter.timeline > h2 { grid-row: 1; }
    .chapter.timeline > .tl { grid-row: 2; }
  }

  /* ---- Kapitelflächen (06 Kap. 3.1) --------------------------------------------------------------
     Eine helle Fläche je Kapitel, mit Tinte darauf. Mobil ragt sie leicht in den Rand, am Desktop so weit,
     dass ihr Innenabstand die Rasterspalten genau wieder ausgleicht (subgrid bleibt bündig). */
  .site-field {
    --field-bleed: calc(var(--site-pad) - var(--sp-2));
    display: grid; gap: var(--sp-2); min-width: 0;
    margin-inline: calc(-1 * var(--field-bleed));
    padding: var(--site-field-pad) calc(var(--field-bleed) + var(--sp-3));
    border-radius: var(--site-radius-field); background: var(--field-bg, var(--color-surface));
  }
  .site-field[data-field='sun'] { --field-bg: var(--color-field-sun); }
  /* Auf Rosa und Himmel bekommt die Illustration einen Grund im kräftigeren Ton derselben Farbe –
     das Holz-Beige der Illustrationen hebt sich dort sonst kaum ab und beißt sich mit dem Gold der Bodenlinie. */
  .site-field[data-field='rose'] { --field-bg: var(--color-field-rose); --illu-field: var(--p-pink-200); }
  .site-field[data-field='sky'] { --field-bg: var(--color-field-sky); --illu-field: var(--p-sky-200); }
  /* Ab der ersten festen Containerstufe schließen Flächen bündig mit dem Container ab (kein Überstand ins Raster
     hinaus); ihr Inhalt ist um den Innenabstand eingerückt. */
  .site > * { --field-pad-x: clamp(1.5rem, 0.5rem + 3cqi, 3rem); }
  @container (min-width: 36rem) { .site-field { --field-bleed: 0px; margin-inline: 0; padding-inline: var(--field-pad-x); } }
  /* Eine Textkante für die ganze Seite (ab 576 px): Farbflächen reichen bis an die Containerkante, ihr Text ist um
     den Innenabstand eingerückt – und alles andere beginnt an genau dieser eingerückten Kante: Kopfzeile,
     Seitentitel ohne Fläche, Kapitel, Sprungleiste und Fuß. */
  @container (min-width: 36rem) {
    .site-header-inner { padding-inline: calc(var(--site-pad) + var(--field-pad-x)); }
    .site-menu { padding-inline: calc(var(--site-pad) + var(--field-pad-x)); }
    .site-main > :not(.site-field):not(.jump-nav) { padding-inline: var(--field-pad-x); }
    .footer-inner { padding-inline: var(--field-pad-x); box-sizing: border-box; }
    .jump-nav ul { padding-inline: calc(var(--site-pad) + var(--field-pad-x)); scroll-padding-inline: calc(var(--site-pad) + var(--field-pad-x)); }
  }

  /* ---- Stimmungsbild (Platzhalter) und Bilder ---------------------------------------------- */
  .illu { position: relative; overflow: hidden; border-radius: var(--site-radius-card); }
  .illu svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  .site figcaption, .gallery-caption { font-size: var(--site-fs-meta); line-height: var(--site-lh-text); color: var(--color-text-muted); }
  /* Alle Bilder (Fotos, Zeichnungen, Teamporträts): organische Maske (wie mit der Schere ausgeschnitten) statt Rechteck, dahinter eine leicht verdrehte
     Farbform. Drei Masken und drei Farben wechseln je Bild (SitePage maskOf). Die Maske dehnt sich auf jedes Format. */
  .site-figure {
    --img-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 14C4 5 22 2 50 3C78 2 96 4 96 16C99 40 98 70 95 86C93 97 72 98 50 97C26 99 6 97 4 84C1 62 3 34 6 14Z'/%3E%3C/svg%3E"); --img-back: var(--color-field-wood); --img-turn: -2.5deg;
    margin: 0; display: grid; gap: var(--sp-3);
  }
  .site-figure[data-mask='2'] { --img-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 5C34 1 70 3 90 6C99 9 98 30 97 52C99 74 97 93 86 96C62 99 30 98 12 95C2 92 3 70 4 50C2 28 3 8 12 5Z'/%3E%3C/svg%3E"); --img-back: var(--color-field-rose); --img-turn: 2deg; }
  .site-figure[data-mask='3'] { --img-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5 20C3 6 30 4 52 5C74 2 97 8 96 24C98 48 99 72 94 88C88 98 60 96 46 97C24 99 5 96 4 80C2 58 6 40 5 20Z'/%3E%3C/svg%3E"); --img-back: var(--color-field-sky); --img-turn: -1.5deg; }
  .site-figure[data-mask-color='wood'] { --img-back: var(--color-field-wood); }
  .site-figure[data-mask-color='rose'] { --img-back: var(--color-field-rose); }
  .site-figure[data-mask-color='sky'] { --img-back: var(--color-field-sky); }
  .site-figure[data-mask-color='sun'] { --img-back: var(--color-field-sun); }
  .site-img-box { position: relative; isolation: isolate; }
  .site-img-box::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--img-back); transform: translate(2%, 2.5%) rotate(var(--img-turn)) scale(1.02);
    -webkit-mask: var(--img-mask) center / 100% 100% no-repeat; mask: var(--img-mask) center / 100% 100% no-repeat;
  }
  .site-figure[data-ratio='landscape'] .site-img-box { aspect-ratio: 3 / 2; }
  .site-figure[data-ratio='portrait'] .site-img-box { aspect-ratio: 4 / 5; }
  .site-figure[data-ratio='square'] .site-img-box { aspect-ratio: 1; }
  .site-img-box img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask: var(--img-mask) center / 100% 100% no-repeat; mask: var(--img-mask) center / 100% 100% no-repeat;
  }
  /* Bildunterschrift: eingerückt unter der Form, mit Würfel davor; der Bildnachweis bleibt in einer Zeile */
  .site-figure figcaption { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; padding-inline: 4% 6%; max-width: var(--site-measure-narrow); text-wrap: pretty; }
  .site-figure figcaption::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: translateY(-0.05em) rotate(-4deg); }
  .site-figure figcaption .credit { white-space: nowrap; }
  /* In der Galerie stehen die Unterschriften zeilenweise auf gleicher Höhe (jede Zelle: Bild oben, Text darunter) */
  .gallery-grid > li { display: grid; align-content: start; }
  .site-hidden-img {
    display: grid; place-items: center; min-height: 6rem; padding: var(--sp-3);
    border: 1.5px dashed var(--color-wood-text); border-radius: var(--site-radius-card); background: var(--color-surface);
    color: var(--color-wood-text); font-family: var(--font-text); font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); text-align: center; hyphens: manual;
  }

  /* Text + Bild: mobil immer Text → Bild; Desktop Bild in Spalte 1–5, Text 7–11, gespiegelt möglich.
     Mit Verzeichnis links (ab 1200 px) ist das Kapitel schmaler: Bild 4, Text 7 Spalten (weiter unten). */
  .media-text { display: grid; gap: var(--sp-6); }
  .media-text .mt-text > .prose { max-width: var(--site-measure-narrow); }
  @container (min-width: 48rem) and (max-width: 61.99rem) {
    .media-text.has-img { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--site-gutter); }
    .media-text.has-img[data-image='start'] .site-figure { order: -1; }
  }
  @container (min-width: 62rem) {
    .site-main > .chapter > .media-text.has-img { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
    .media-text.has-img[data-image='start'] .site-figure { grid-column: 1 / 6; grid-row: 1; }
    .media-text.has-img[data-image='start'] .mt-text { grid-column: 7 / 12; grid-row: 1; }
    .media-text.has-img[data-image='end'] .mt-text { grid-column: 1 / 6; grid-row: 1; }
    .media-text.has-img[data-image='end'] .site-figure { grid-column: 7 / 12; grid-row: 1; }
    .site-main > .chapter > .gallery { grid-column: 1 / -1; }
  }

  .gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @container (min-width: 48rem) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } }
  @container (min-width: 62rem) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
  .gallery-single { display: grid; gap: var(--sp-4); max-width: var(--site-measure); }
  /* Zwei Motive stehen nebeneinander, sobald Platz ist (untereinander wirkten sie wie zwei getrennte Abschnitte) */
  @container (min-width: 36rem) { .gallery-single:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gutter); max-width: none; align-items: start; } }
  .gallery-caption { margin-top: var(--sp-3); }
  .gallery .site-hidden-img { margin-top: var(--sp-3); }

  /* ---- Hinweis: ruhige Fläche statt Linie (06 Kap. 1 Nr. 5) -------------------------------------- */
  .site .notice { padding: var(--sp-5); border-radius: var(--site-radius-card); background: var(--color-surface); font-size: var(--site-fs-small); line-height: var(--site-lh-text); }
  /* „Wichtig“: gleiche Fläche, Würfel vor dem Etikett (Himmelblau bleibt der Zeit vorbehalten) */
  /* „Nur für die Redaktion“ (nur Vorschau): gestrichelter Rand, damit niemand es für Website-Inhalt hält */
  .site .notice[data-tone='internal'] { background: none; outline: 1.5px dashed var(--color-wood-text); outline-offset: -1.5px; color: var(--color-wood-text); }
  .site .notice-label { display: flex; align-items: center; gap: var(--site-label-gap); }
  .site .notice[data-tone='important'] .notice-label .icon { color: var(--color-brand); }
  .site .notice .site-btn { margin-top: var(--sp-3); }
  .notice-label { margin-bottom: var(--sp-1); font-size: var(--site-fs-micro); font-weight: var(--site-fw-strong); letter-spacing: var(--site-label-tracking); color: var(--color-text); }
  .site .notice h3 { margin-bottom: var(--sp-1); }
  .site .notice .prose { hyphens: manual; }
  .site-main > .chapter > .notice { max-width: var(--site-measure-narrow); }

  /* ---- Platzstatus: kräftige Fläche, Aussage als Überschrift, eine Hauptaktion ------------------- */
  .platz { --field-bg: var(--color-field-strong); color: var(--color-on-strong); display: grid; gap: var(--sp-5); padding-block: var(--site-field-pad-compact); }
  .platz h2 { margin-top: var(--sp-2); }
  .platz-meta { margin-top: var(--sp-3); max-width: var(--site-measure-narrow); }
  .site .platz-meta a { color: inherit; font-weight: var(--site-fw-strong); }
  .platz-stand { display: block; margin-top: var(--sp-1); font-size: var(--site-fs-meta); }
  .platz-actions { display: grid; justify-items: start; gap: var(--sp-1); }
  .platz-actions .site-btn { width: 100%; }
  .platz-actions .more-link { margin-top: 0; }
  .site-main[data-layout='start'] > .facts + .platz { margin-top: var(--site-sub); }
  .site-main > .platz + .chapter { margin-top: var(--site-chapter); }
  @container (min-width: 48rem) { .platz-actions .site-btn { width: auto; } }
  @container (min-width: 62rem) {
    .site-main > .platz { grid-column: 1 / 13; grid-template-columns: subgrid; align-items: center; }
    .site-main > .platz > .platz-text { grid-column: 1 / 8; }
    .site-main > .platz > .platz-actions { grid-column: 8 / 13; justify-items: end; text-align: right; }
    .platz-actions .site-btn { white-space: nowrap; }
  }

  /* ---- Gestaltete Textformen (SitePage RichNodeView): Zitat, Schritte, Stichwort-Raster ----------- */
  .site .pull-quote { margin: 0; }
  .site .pull-quote p {
    font-family: var(--font-heading); font-weight: var(--site-fw-strong); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking);
    font-size: var(--site-fs-h3); line-height: var(--site-lh-snug); hyphens: manual; text-wrap: pretty;
  }
  .site .prose > .pull-quote + p { margin-top: var(--sp-4); font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); color: var(--color-text-muted); }
  .site .prose > .pull-quote + p::before { content: '– '; }

  .site .prose ol.steps { list-style: none; padding: 0; display: grid; gap: var(--sp-6); counter-reset: step; }
  .site .prose ol.steps > li { position: relative; counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--sp-3); align-content: start; margin: 0; }
  .site .prose ol.steps > li::before {
    content: counter(step); grid-row: 1 / span 9; font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch);
    font-size: var(--site-fs-figure); line-height: var(--site-lh-display); color: var(--color-brand); font-variant-numeric: lining-nums;
  }
  .site .prose ol.steps > li > * { grid-column: 2; }
  /* Verbindungslinie von Ziffer zu Ziffer, solange die Schritte untereinander stehen */
  .site .prose ol.steps > li:not(:last-child)::after { content: ''; position: absolute; left: 1.15rem; top: 3.1rem; bottom: calc(-1 * var(--sp-6) + var(--sp-1)); width: 3px; border-radius: var(--site-radius-cube); background: color-mix(in srgb, var(--color-brand) 28%, transparent); transform-origin: top; }
  .step-title { display: block; margin-bottom: var(--sp-1); font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-h4); line-height: var(--site-lh-heading); }

  .site .prose ul.keyword-list { list-style: none; padding: 0; margin-block: var(--sp-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  /* Stichworte werden nicht automatisch getrennt (kurze Begriffe; ein Trennstrich mitten im Wort stört mehr als eine kurze Zeile) */
  .site .prose ul.keyword-list > li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; margin: 0; font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
  .site .prose ul.keyword-list > li::before { content: ''; width: 0.6875rem; height: 0.6875rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: translateY(-0.05em) rotate(-4deg); }
  .site .prose ul.keyword-list > li:nth-child(even)::before { transform: translateY(-0.05em) rotate(6deg); }
  @container (min-width: 48rem) { .site .prose ul.keyword-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* Am Desktop gehört einem Kapitel ohne Randnotiz die volle Breite: Die Überschrift läuft durch (kein unnötiger
     Umbruch), Fließtext bleibt in der Lesespalte, gestaltete Formen dürfen breiter werden. */
  @container (min-width: 62rem) {
    .site-main > .chapter:not([data-has-aside]) > :is(.text-block, .faq, .downloads) { grid-column: 1 / 13; }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose { max-width: none; }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose > :not(h2, .steps, .keyword-list, .pull-quote),
    .site-main > .chapter:not([data-has-aside]) > :is(.faq, .downloads) > :not(h2) { max-width: var(--site-measure); }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose > .pull-quote { max-width: var(--site-measure-wide); }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose > ol.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) calc(2 * var(--site-gutter)); margin-top: var(--sp-6); }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose > ul.keyword-list { gap: var(--sp-4) var(--site-gutter); margin-block: var(--sp-5); }
    .site .prose ol.steps > li { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .site-main > .chapter:not([data-has-aside]) > .text-block > .prose > ol.steps > li::after { display: none; }
    .site .prose ol.steps > li:not(:last-child)::after { left: 1.5rem; top: 4rem; }
  }

  /* ---- Kontakt: große Telefonnummer und Aktionen links, Adresse als Karte rechts ------------------ */
  .contact { display: grid; gap: var(--sp-6); }
  .contact > h2 { margin: 0; }
  .contact-label { display: flex; align-items: center; gap: var(--site-label-gap); font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); letter-spacing: var(--site-label-tracking); color: var(--color-text-muted); }
  .contact-main { display: grid; justify-items: start; }
  .site .contact-phone { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-figure); line-height: var(--site-lh-heading); color: var(--color-text); text-decoration: none; }
  @media (hover: hover) { .site .contact-phone:hover { color: var(--color-accent); } }
  .contact-hours { margin-top: var(--sp-1); }
  .contact-hours + .contact-label, .contact-phone + .contact-label { margin-top: var(--sp-5); }
  .site .contact-mail { display: inline-flex; align-items: center; min-height: var(--target); font-size: var(--site-fs-h4); font-weight: var(--site-fw-strong); }
  .contact-actions { display: grid; gap: var(--sp-2); width: 100%; margin-top: var(--sp-5); }
  .contact-place { display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--site-radius-card); background: var(--color-field-sun); }
  .contact-place address { font-style: normal; font-size: var(--site-fs-h4); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); }
  .contact-note { font-size: var(--site-fs-small); }
  .contact-place .site-btn { margin-top: var(--sp-3); }
  @container (min-width: 48rem) { .contact-actions { display: none; } }
  @container (min-width: 62rem) {
    .site-main > .contact > h2 { grid-column: 1 / 13; }
    .site-main > .contact > .contact-main { grid-column: 1 / 7; }
    .site-main > .contact > .contact-place { grid-column: 8 / 13; padding: var(--sp-6); }
  }

  /* ---- Weiterlesen: lange Textkapitel klappen auf Handy und Tablet ein (SitePage TextBlockView) ---- */
  .more-rest { margin-top: var(--site-para); }
  /* „Weiterlesen“ gibt es nur, solange die Seite einspaltig ist */
  @container (min-width: 62rem) { .site button.more-toggle { display: none; } }
  .site .more-toggle { margin-top: var(--sp-3); gap: var(--sp-3); }
  .site .tl-toggle { justify-self: start; margin-top: var(--sp-4); }
  /* Eingeklappt wird nur, wenn Skripte laufen (.site.js, gesetzt von site.js): ohne JavaScript steht alles da
     und die Knöpfe entfallen. */
  .site:not(.js) .more-toggle { display: none; }
  @container (max-width: 61.99rem) {
    .site.js .text-block[data-open='false'] > .more-rest { display: none; }
    .site.js .tl[data-open='false'] > li:not([data-key]) { display: none; }
    .more-toggle .faq-icon { width: 0.75rem; height: 0.75rem; }
    .more-toggle[aria-expanded='true'] .faq-icon::after { transform: rotate(0deg); }
  }

  /* ---- Termine: Filter-Chips, Schließzeiten mit eigener Marke, Kennenlern-Karte ------------------- */
  .ev-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .site-main > .ev-head + .chapter { margin-top: var(--sp-5); }
  .site .empty-next { margin-top: var(--sp-2); }
  /* Farbe eines Termins = seine Art (D18): Gold lädt ein (Fest, offen für Gäste), Himmel heißt geschlossen,
     Holz ist Elterndienst und alles ohne Art. In Listen trägt der Datumskreis die Farbe, auf Karten (Startseite,
     Desktop) die Karte – der Kreis ist dort warmweiß. So steht nie Farbe auf fremder Farbe. */
  .dates li { --ev-tone: var(--color-field-wood); }
  .dates li[data-type='fest'], .dates li[data-type='gaeste'] { --ev-tone: var(--color-field-sun); }
  .dates li[data-type='schliesszeit'] { --ev-tone: var(--color-field-sky); }

  .open-day-card { display: grid; justify-items: start; max-width: var(--site-measure-narrow); padding: var(--sp-5); border-radius: var(--site-radius-card); background: var(--color-field-sun); }
  .site .open-day-card h3 { margin-top: var(--sp-2); }
  .open-day-call { margin-top: var(--sp-2); }
  .site .open-day-call a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--color-text); font-weight: var(--site-fw-strong); }
  .open-day-hours { font-size: var(--site-fs-small); }
  .open-day-when { margin-top: var(--sp-1); font-size: var(--site-fs-lead); font-weight: var(--site-fw-strong); }
  .open-day-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-3); }
  .site .open-day-actions .cal-link { color: var(--color-text); font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); }

  /* ---- Zahlen & Fakten: große Werte in der Überschriftenschrift, Erklärung klein darunter ------------ */
  .figures dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  /* Turmwürfel über jeder Zahl (wie bei den Fakten der Startseite) statt einer Magenta-Linie: Magenta bleibt Marke */
  .figures dl > div { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--sp-1); padding-top: var(--sp-5); }
  .figures dl > div::before { content: ''; position: absolute; top: 0; left: 0; width: 0.75rem; height: 0.75rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: rotate(-4deg); }
  .figures dl > div:nth-child(even)::before { transform: rotate(6deg); }
  .figures dd { margin: 0; font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-figure); line-height: var(--site-lh-display); font-variant-numeric: lining-nums; white-space: nowrap; }
  .figures dt { font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); text-wrap: balance; }
  .figures-note { margin-top: var(--sp-4); font-size: var(--site-fs-meta); color: var(--color-text-muted); }
  /* 2 × 2 bis 991 px (vier Kacheln brächen sonst 3 + 1), ab Desktop eine Zeile */
  @container (min-width: 48rem) { .figures dl { gap: var(--sp-6) var(--site-gutter); } }
  @container (min-width: 62rem) {
    .site-main > .chapter > .figures { grid-column: 1 / 13; }
    .figures dl { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  }

  /* ---- Team: Porträt in der Bildmaske (oder Anfangsbuchstabe auf Farbform), Name als Kartentitel, Rolle, ein Satz ---- */
  .team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
  .team-card { display: grid; align-content: start; justify-items: start; gap: 0; min-width: 0; }
  .team-photo { width: 100%; max-width: 13rem; aspect-ratio: 1; margin-bottom: var(--sp-3); }
  .team-initial {
    display: grid; place-items: center; width: 100%; height: 100%; background: var(--img-back); color: var(--color-text);
    font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); font-size: var(--site-fs-figure); line-height: var(--site-lh-display);
    -webkit-mask: var(--img-mask) center / 100% 100% no-repeat; mask: var(--img-mask) center / 100% 100% no-repeat;
  }
  /* Ohne Foto trägt die vordere Form die Farbe; die hintere wird zur Markenfarbe-Kante */
  .team-photo:has(.team-initial)::before { background: var(--color-surface); }
  .team-role { margin-top: var(--site-nudge); font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); color: var(--color-text-muted); }
  .team-line { margin-top: var(--sp-2); font-size: var(--site-fs-small); line-height: var(--site-lh-text); max-width: 16rem; text-wrap: pretty; }
  /* Sehr schmale Handys: eine Spalte, damit Porträt und Text nicht bis an den Rand reichen */
  @container (max-width: 21.99rem) { .team-grid { grid-template-columns: minmax(0, 1fr); } }
  /* Drei Spalten ab Tablet – auch am Desktop (drei Karten im Vierer-Raster ließen rechts ein Loch) */
  @container (min-width: 48rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--site-gutter); } }
  @container (min-width: 62rem) { .site-main > .team > .team-grid { grid-column: 1 / 13; } }
  /* Team mit Werdegang (sobald eine Person Angaben unter „Ausbildung und Werdegang“ hat): je Person eine Zeile –
     Porträt links, daneben Name, Aufgabe und die Stationen als ruhige Liste an einer Linie. */
  .team-grid[data-detail] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .team-grid[data-detail] .team-photo { max-width: 9rem; }
  .team-grid[data-detail] .team-line { max-width: 34rem; }
  .team-body { min-width: 0; justify-self: stretch; }
  .team-quals-label { margin-top: var(--sp-4); font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); color: var(--color-text-muted); }
  .team-quals { list-style: none; margin: var(--sp-3) 0 0; padding: 0 0 0 var(--sp-4); display: grid; gap: var(--sp-3); border-left: 2px solid var(--color-line); max-width: 38rem; }
  .team-quals li { display: grid; gap: var(--site-nudge); }
  .team-qual { font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); line-height: var(--site-lh-text); text-wrap: pretty; }
  .team-qual-meta { font-size: var(--site-fs-meta); line-height: var(--site-lh-text); color: var(--color-text-muted); }
  @container (min-width: 36rem) {
    .team-grid[data-detail] .team-card { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--site-gutter); }
    .team-grid[data-detail] .team-photo { margin-bottom: 0; }
  }
  @container (min-width: 48rem) {
    .team-grid[data-detail] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8, var(--sp-7)); }
    .team-grid[data-detail] .team-card { grid-template-columns: 13rem minmax(0, 1fr); }
    .team-grid[data-detail] .team-photo { max-width: 13rem; }
  }

  /* ---- Fragen: weiche Aufklapper (src/lib/smoothDetails.ts, 11-feinschliff „Bewegung“) ----------- */
  .site .faq details { border-radius: var(--site-radius-card); background: var(--color-surface); transition: background-color var(--dur-2) var(--ease); }
  .site .faq details + details { margin-top: var(--sp-2); }
  .site .faq details[open] { background: var(--color-field-sky); }
  .site .faq summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: var(--site-row);
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-radius: var(--site-radius-card); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .site .faq summary::-webkit-details-marker { display: none; }
  .site .faq summary h3 { text-wrap: balance; }
  @media (hover: hover) { .site .faq details:not([open]):hover { background: color-mix(in srgb, var(--color-field-sky) 45%, var(--color-surface)); } }
  .faq-icon { position: relative; flex: none; width: 1rem; height: 1rem; color: var(--color-accent); }
  .faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--site-radius-cube); background: currentColor; }
  .faq-icon::after { transform: rotate(90deg); transition: transform var(--dur-3) var(--ease-out-soft); }
  .site-faq-item[data-closing] .faq-icon::after { transition-duration: var(--dur-2); transition-timing-function: var(--ease-exit); }
  .site .faq .faq-body > .prose { padding: 0 var(--sp-5) var(--sp-5); }
  /* Inhalt erscheint kurz nach dem Behälter (60 ms) mit 6 px Weg */
  @media (prefers-reduced-motion: no-preference) {
    .site-faq-item[open] > .faq-body { animation: site-content-in var(--dur-3) var(--ease-out-soft) 60ms both; }
    .site-faq-item[data-closing] > .faq-body { animation: site-content-out var(--dur-1) var(--ease-exit) both; }
  }
  @media (prefers-reduced-motion: reduce) { .site-faq-item[open] > .faq-body { animation: site-fade-in var(--dur-1) linear both !important; } }
  @keyframes site-content-in { from { opacity: 0; transform: translateY(-6px); } }
  @keyframes site-content-out { to { opacity: 0; } }
  /* Chromium: Höhe rein in CSS (interpolate-size); andere Browser: smoothDetails.ts */
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    @media (prefers-reduced-motion: no-preference) {
      .site-faq-item { interpolate-size: allow-keywords; }
      .site-faq-item::details-content {
        block-size: 0; overflow: clip;
        transition: block-size var(--dur-2) var(--ease-exit), content-visibility var(--dur-2) allow-discrete;
      }
      .site-faq-item[open]::details-content { block-size: auto; transition-duration: var(--dur-3); transition-timing-function: var(--ease-out-soft); }
    }
  }

  /* ---- Downloads: Zeile 56, Icon 20, Titel 17/600, Meta 14 ------------------------------------ */
  .site .downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .site .downloads li { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--sp-3); align-content: center; min-height: var(--site-row); padding: var(--sp-3) var(--sp-4); border-radius: var(--site-radius-card); background: var(--color-surface); }
  .file-link { display: contents; }
  .file-link .icon { grid-column: 1; align-self: center; color: var(--color-wood-text); }
  .file-title { grid-column: 2; font-weight: var(--site-fw-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .file-meta, .file-desc { grid-column: 2; font-size: var(--site-fs-meta); line-height: var(--site-lh-text); color: var(--color-text-muted); }
  /* Etikett-Rolle: kleine Spaltenüberschrift in der Textschrift (Randnotiz, Fuß) */
  .site :is(.downloads[data-aside], .site-footer) h3 { font-family: var(--font-text); font-stretch: normal; font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); letter-spacing: var(--site-label-tracking); line-height: var(--site-lh-snug); }
  .site .downloads[data-aside] h3 { margin-bottom: var(--sp-2); }
  .site .downloads[data-aside] .file-title { font-size: var(--site-fs-small); }
  .site .downloads[data-aside] li { padding: var(--sp-2) var(--sp-3); }

  /* ---- Zeitleiste (Alltag): Himmel-Fläche, Uhrzeiten als Chips, keine Linien ------------------- */
  .tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
  /* Zeitspalte so breit wie die längste Uhrzeit („10:00–10:30“) plus Luft – der Chip darf den Text nie berühren */
  .tl li { display: grid; grid-template-columns: var(--site-time-col) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .tl .time { justify-self: start; }
  .tl strong { display: block; font-weight: var(--site-fw-strong); font-size: var(--site-fs-body); line-height: var(--site-lh-text); padding-top: var(--site-nudge); }
  .tl-text { display: block; margin-top: var(--site-nudge); font-size: var(--site-fs-body); line-height: var(--site-lh-text); color: var(--color-text); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
  /* Sehr schmal: Uhrzeit über dem Text; größerer Abstand zwischen den Stationen als innerhalb, damit Paare erkennbar bleiben */
  @container (max-width: 22rem) { .tl li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } .tl li + li { margin-top: var(--sp-3); } }
  @container (min-width: 48rem) { .tl li { grid-template-columns: calc(var(--site-time-col) + var(--sp-3)) minmax(0, 1fr); } }

  /* Bring- und Abholzeit: Karte in Himmel (Zeit); auf der Himmel-Fläche des Tagesablaufs warmweiß */
  .times { padding: var(--sp-4); border-radius: var(--site-radius-card); background: var(--color-field-sky); }
  .site-field .times { background: var(--color-chip); }
  .times dl { margin: 0; display: grid; gap: var(--sp-3); }
  .times dt { display: flex; align-items: center; gap: var(--site-label-gap); font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); color: var(--color-text-muted); }
  .times dd { margin: var(--site-nudge) 0 0; font-family: var(--font-heading); font-weight: var(--site-fw-strong); font-stretch: var(--site-heading-stretch); font-size: var(--site-fs-h4); line-height: var(--site-lh-snug); color: var(--color-text); }
  .board-role { display: block; margin-top: var(--site-nudge); font-family: var(--font-text); font-size: var(--site-fs-meta); font-weight: var(--site-fw-regular); color: var(--color-text-muted); }
  @container (min-width: 48rem) and (max-width: 61.99rem) {
    .times dl { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: var(--sp-7); }
  }
  .chapter.timeline.site-field > .marginal { margin: 0 0 var(--sp-6); }

  /* Unsere Woche: wie eine Terminliste – links die runde Marke mit dem Kürzel des Tages (wie die Datumsmarken),
     rechts der Wochentag als kleine Überschrift und darunter, was an dem Tag ansteht. */
  .week dl { margin: 0; display: grid; gap: var(--sp-5); max-width: var(--site-measure); }
  .week dl > div { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
  .week dt { display: contents; }
  .week-mark { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-field-sky); font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); font-size: var(--site-fs-body); }
  .week-day { grid-column: 2; align-self: end; padding-top: var(--site-nudge); font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-h4); line-height: var(--site-lh-heading); }
  .week dd { grid-column: 2; margin: var(--site-nudge) 0 0; }
  @container (min-width: 48rem) { .week dl > div { grid-template-columns: 3.75rem minmax(0, 1fr); } .week-mark { width: 3.75rem; height: 3.75rem; } }

  /* ==== Startseite =============================================================================
     Mobil-Ziel (Auftraggeber): Hero inkl. Hauptaktion und Anfang der Fakten in einem Bildschirm (390×664),
     Illustrationen als Akzent neben dem Text statt in voller Breite, Fakten 2×2, Startseite ≈ 4 Bildschirme. */
  .site-main[data-layout='start'] { padding-top: var(--sp-2); }
  /* Hero auf dem warmweißen Grund (keine Farbfläche): Gold bleibt dem Platzstatus und dem Fuß. Die Illustration
     bringt ihre eigene Großform mit, der Hero wirkt dadurch nicht leer. */
  .hero { display: grid; padding-block: var(--sp-4) var(--sp-2); }
  .site-eyebrow .icon { margin-right: var(--site-label-gap); vertical-align: -0.2em; }
  .site-eyebrow { font-size: var(--site-fs-small); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); color: var(--color-text); text-wrap: balance; }
  .hero h1 { margin-top: var(--sp-3); max-width: 12ch; font-size: var(--site-fs-display); line-height: var(--site-lh-display); letter-spacing: var(--site-heading-tracking); text-wrap: balance; }
  /* Das öffnende „ steht auf der Rasterkante wie jede andere Zeile (kein Hängen in den Rand). */
  .hero-quote-source { margin-top: var(--sp-3); font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); color: var(--color-text-muted); }
  .hero-quote-source::before { content: '– '; }
  .hero-facts { margin-top: var(--sp-4); max-width: 30rem; font-size: var(--site-fs-lead); line-height: var(--site-lh-text); color: var(--color-text); text-wrap: pretty; }
  .hero-actions { display: grid; justify-items: start; gap: var(--sp-1); margin-top: var(--sp-5); }
  .hero-actions .site-btn { width: 100%; }
  .hero-actions .more-link { margin-top: 0; }
  /* Die organische Großform (Kiesel) bringt die Illustration selbst mit; hier nur Format und Größe. */
  .hero-figure .illu { aspect-ratio: 4 / 5; max-width: 26rem; margin-inline: auto; }

  /* Fakten: Tinte statt Grau, Turmwürfel als einheitliches Zeichen. Mobil 2×2, Zeichen vor dem Titel. */
  .facts { margin-top: var(--sp-6); }
  .facts dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); row-gap: var(--sp-5); }
  .facts dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); align-content: start; align-items: center; }
  .facts dl > div::before { content: ''; grid-row: 1; width: 0.9375rem; height: 0.9375rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: rotate(-4deg); }
  .facts dl > div:nth-child(even)::before { transform: rotate(6deg); }
  /* Drei Fakten: mobil untereinander statt 2 + 1 */
  @container (max-width: 47.99rem) { .facts dl:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); } }
  /* Mit Icon (StartPage factIcon) entfällt der Würfel; das Icon steht in Markenfarbe vor bzw. über dem Titel */
  .facts dl > div[data-icon]::before { display: none; }
  .facts dl > div[data-icon] { grid-template-columns: minmax(0, 1fr); }
  .facts dt .icon { color: var(--color-brand); }
  .facts dt { display: flex; align-items: center; gap: var(--sp-2); grid-row: 1; font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); font-size: var(--site-fs-h4); line-height: var(--site-lh-heading); letter-spacing: var(--site-heading-tracking); hyphens: manual; }
  .facts dd { grid-column: 1 / -1; margin: var(--sp-1) 0 0; font-size: var(--site-fs-small); line-height: var(--site-lh-text); color: var(--color-text); text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }

  .site-main[data-layout='start'] > .facts + .chapter { margin-top: var(--site-chapter); }
  .split { display: grid; }
  .split .prose { max-width: var(--site-measure-narrow); }
  .split-figure .illu { aspect-ratio: 3 / 2; }

  @container (max-width: 61.99rem) {
    /* Hero: Turm als Akzent rechts neben dem Zitat (Raster mit display: contents, Markup bleibt Text → Bild) */
    .hero { grid-template-columns: minmax(0, 1fr) clamp(6rem, 31cqi, 11rem); column-gap: var(--sp-3); align-items: start; }
    .hero-text { display: contents; }
    .hero .site-eyebrow { grid-column: 1 / -1; grid-row: 1; }
    .hero h1 { grid-column: 1; grid-row: 2; }
    .hero-quote-source { grid-column: 1; grid-row: 3; }
    .hero-figure { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
    .hero-figure .illu { max-width: none; }
    .hero-facts, .hero-actions { grid-column: 1 / -1; }
    /* Als Überschrift (ohne Zitat) braucht die Zeile die volle Breite; der Turm steht dann neben der Faktenzeile */
    .hero h1:not([data-quote]) { grid-column: 1 / -1; max-width: none; }
    .hero:has(h1:not([data-quote])) .hero-facts { grid-column: 1; grid-row: 3; align-self: center; }
    .hero:has(h1:not([data-quote])) .hero-figure { grid-row: 3; align-self: center; }
    .hero:not(:has(.hero-figure)) :is(h1, .hero-quote-source, .hero-facts) { grid-column: 1 / -1; }
    .hero:not(:has(.hero-figure)) h1 { max-width: 18ch; }
    /* Das sind wir: Überschrift, darunter das Bild groß in eigener Zeile, dann der Text */
    .split { grid-template-columns: minmax(0, 1fr); }
    .split-text { display: contents; }
    .split-text > h2 { grid-row: 1; margin: 0; }
    .split-figure { grid-row: 2; justify-self: center; width: min(100%, 26rem); margin-top: var(--sp-3); }
    .split .prose, .split .more-link { grid-column: 1 / -1; }
    .split .prose { margin-top: var(--sp-4); font-size: var(--site-fs-body); line-height: var(--site-lh-text); }
    .split .prose > * + * { margin-top: var(--sp-3); }
    .split .more-link { justify-self: start; }
  }

  /* Ein Tag bei uns: Himmel-Fläche, Uhrzeiten als Chips */
  .day > h2 { margin-bottom: var(--sp-4); }
  .day ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .day li { display: grid; grid-template-columns: var(--site-time-col) minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
  /* Sehr schmale Handys: Uhrzeit und Station bleiben nebeneinander (Zeile = ein Paar), die Zeitspalte wird nur schmaler */
  @container (max-width: 22rem) {
    .day li { grid-template-columns: var(--site-time-col-narrow) minmax(0, 1fr); gap: var(--sp-2); }
    .site .day span.time-chip { padding-inline: var(--sp-2); font-size: var(--site-fs-meta); }
    .day-title { font-size: var(--site-fs-small); }
  }
  .day-title { font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); }
  .day > .more-link { margin-top: var(--sp-3); }

  /* Nächste Termine: runde Datumsmarke in der Farbe der Terminart statt Tabellenzeile */
  .dates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
  .dates li { display: grid; grid-template-columns: var(--site-date-mark) minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
  .date-mark {
    display: grid; place-content: center; width: var(--site-date-mark); height: var(--site-date-mark); border-radius: 50%; background: var(--ev-tone, var(--color-field-wood));
    color: var(--color-text); text-align: center; line-height: var(--site-lh-display);
  }
  .date-mark .wd { font-size: var(--site-fs-micro); font-weight: var(--site-fw-strong); letter-spacing: var(--site-label-tracking); color: var(--color-text-muted); }
  .date-mark .dm { font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); font-size: var(--site-fs-small); letter-spacing: var(--site-heading-tracking); white-space: nowrap; }
  .dates strong { display: block; font-weight: var(--site-fw-strong); font-size: var(--site-fs-body); line-height: var(--site-lh-snug); text-wrap: balance; }
  .ev-meta .icon { margin-right: var(--site-label-gap); vertical-align: -0.15em; }
  .ev-meta { display: block; margin-top: var(--site-nudge); font-size: var(--site-fs-small); line-height: var(--site-lh-text); color: var(--color-text-muted); }
  .dates li[data-highlight] strong { font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-h4); line-height: var(--site-lh-heading); }
  /* Hervorgehobener Termin: kleiner Turmwürfel an der Datumsmarke (Marke, kein Text) – keine zweite Farbe */
  .dates li[data-highlight] .date-mark { position: relative; }
  .dates li[data-highlight] .date-mark::after { content: ''; position: absolute; top: var(--site-nudge); right: var(--site-nudge); width: 0.625rem; height: 0.625rem; border-radius: var(--site-radius-cube); background: var(--color-brand); transform: rotate(8deg); }
  .dates .site-empty { color: var(--color-text-muted); }
  .dates > .more-link { margin-top: var(--sp-3); }

  /* Kalenderdatei je Termin: ruhige Zweitaktion in Meta-Größe; Touch-Ziel 44 px über unsichtbare Fläche (::after) */
  .site .cal-link {
    position: relative; display: inline-flex; align-items: baseline; gap: var(--site-label-gap); margin-top: var(--sp-1);
    font-size: var(--site-fs-meta); font-weight: var(--site-fw-medium); line-height: var(--site-lh-snug); color: var(--color-text-muted); text-decoration: none;
  }
  .site .cal-link .icon { align-self: center; position: relative; top: -0.5px; }
  .site .cal-link::after { content: ''; position: absolute; inset: 50% calc(-1 * var(--sp-2)) auto calc(-1 * var(--sp-2)); height: var(--target); transform: translateY(-50%); }
  @media (hover: hover) { .site .cal-link:hover { color: var(--color-accent); text-decoration: underline; } }
  .site .cal-link:focus-visible { color: var(--color-accent); text-decoration: underline; }
  .dates .cal-link { justify-self: start; }
  .ev { display: grid; justify-items: start; }
  .cal-all { display: grid; justify-items: start; gap: var(--sp-2); }
  .cal-help { font-size: var(--site-fs-meta); color: var(--color-text-muted); }

  @container (min-width: 48rem) {
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-5); }
    .hero-actions .site-btn { width: auto; }
    .facts dl { column-gap: var(--site-gutter); row-gap: var(--sp-6); }
    .facts dl:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .facts dd { font-size: var(--site-fs-body); }
    .day ol { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-3); }
    .date-mark .dm { font-size: var(--site-fs-body); }
  }

  @container (min-width: 62rem) {
    .site-main[data-layout='start'] { padding-top: var(--sp-5); }
    .site-main[data-layout='start'] > * { grid-column: 1 / 13; }
    /* Hero: die Fläche richtet sich nach dem Text; der Turm ist größer als sie hoch wäre und reicht fast von Kante zu Kante */
    .hero { grid-template-columns: subgrid; align-items: center; gap: 0 var(--site-gutter); padding-block: var(--sp-5); }
    .hero-text { grid-column: 1 / 7; }
    .hero:not(:has(.hero-figure)) .hero-text { grid-column: 1 / -1; }
    .hero:not(:has(.hero-figure)) h1 { max-width: 18ch; }
    .hero-figure { grid-column: 7 / 13; }
    .hero-figure .illu { max-width: none; max-height: min(74vh, 40rem); margin-inline: auto 0; }
    .hero-facts { margin-top: var(--sp-5); }
    .hero-actions { margin-top: var(--sp-6); }

    .facts { margin-top: var(--site-sub); }
    .facts dl { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .facts dl > div { grid-template-columns: minmax(0, 1fr); }
    .facts dl > div::before { grid-row: auto; width: 1.375rem; height: 1.375rem; margin: 0 0 var(--sp-4); }
    .facts dt { grid-row: auto; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .facts dt .icon { width: 2rem; height: 2rem; }
    .facts dd { grid-column: auto; }

    /* Das sind wir: ohne Fläche, Bild links und Text rechts (Gegenrhythmus zum Hero) */
    .site-main[data-layout='start'] > .split { grid-template-columns: subgrid; align-items: center; }
    .site-main[data-layout='start'] > .split > .split-figure { grid-column: 1 / 7; grid-row: 1; }
    .site-main[data-layout='start'] > .split > .split-text { grid-column: 8 / 13; grid-row: 1; }
    .split-text > h2 { margin-bottom: var(--sp-5); }

    .site-main[data-layout='start'] > :is(.day, .dates) { display: grid; grid-template-columns: subgrid; align-items: start; }
    /* Überschrift links, Weiter-Link rechts auf derselben Zeile; der Inhalt darunter nutzt die volle Breite */
    .site-main[data-layout='start'] > :is(.day, .dates) > h2 { grid-column: 1 / 9; grid-row: 1; margin: 0 0 var(--sp-6); }
    .site-main[data-layout='start'] > :is(.day, .dates) > .more-link { grid-column: 9 / 13; grid-row: 1; justify-self: end; align-self: end; margin: 0 0 var(--sp-6); }
    .site-main[data-layout='start'] > :is(.day, .dates) > :is(ol, ul, .site-empty) { grid-column: 1 / 13; grid-row: 2; }

    /* Ein Tag bei uns: Zeitachse – Punkt je Station, verbunden durch eine Linie */
    .site-main[data-layout='start'] > .day > ol { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--site-gutter); align-items: start; }
    .day li { position: relative; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-top: var(--sp-6); }
    .day li::before { content: ''; position: absolute; top: 0; left: 0; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--color-text); }
    .day li::after { content: ''; position: absolute; top: calc(0.4375rem - 1px); left: 0.875rem; width: calc(100% + var(--site-gutter) - 0.875rem); height: 2px; background: color-mix(in srgb, var(--color-text) 24%, transparent); }
    .day li:last-child::after { display: none; }
    .day-title { font-size: var(--site-fs-h4); font-weight: var(--site-fw-strong); }

    /* Nächste Termine: drei Karten nebeneinander in der Farbe ihrer Terminart, Datumskreis warmweiß */
    .site-main[data-layout='start'] > .dates > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gutter); align-items: stretch; }
    .site-main[data-layout='start'] > .dates li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--site-radius-card); background: var(--ev-tone); }
    .site-main[data-layout='start'] > .dates li .date-mark { background: var(--color-chip); }
    .site-main[data-layout='start'] > .dates li strong { font-family: var(--font-heading); font-weight: var(--site-fw-heading); font-stretch: var(--site-heading-stretch); letter-spacing: var(--site-heading-tracking); font-size: var(--site-fs-h4); line-height: var(--site-lh-heading); }
  }

  /* ==== Desktop-Raster der Unterseiten ============================================================
     12 Spalten im Container (lg 960, xl 1140). Der Seitenkopf läuft über alle 12.
     lg (ab 992):  Inhalt über alle 12 Spalten, die Sprungleiste liegt quer wie auf dem Tablet.
     xl (ab 1200): Spalte 1–3 „Auf dieser Seite“ (bleibt stehen), Spalte 4–12 Inhalt.
                   Seiten ohne Inhaltsverzeichnis: Inhalt über alle 12 Spalten, bündig mit dem Seitenkopf.
     Jedes Kapitel teilt seine Breite selbst in 12 Teile (Spaltenabstand wie im Seitenraster):
     Text 1–8 · Randnotiz 9–12 · breite Bausteine 1–12.
     Eine Textkante: Farbflächen sind um ihren Innenabstand eingerückt wie alles andere (.site-field, ab 576 px);
     neben dem Verzeichnis ragen sie um genau diesen Abstand nach links heraus, ihr Text bleibt auf der Kante.
     Die Startseite hat ihre eigene Komposition und ist ausgenommen. */
  @container (min-width: 62rem) {
    .site-main[data-layout='page'] > .chapter { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--site-gutter); }
  }
  @container (min-width: 75rem) {
    /* Mit Inhaltsverzeichnis links: das Verzeichnis steht an der Containerkante, der Inhalt in Spalte 4–12 */
    .site-main[data-layout='page']:has(> .jump-nav:not([hidden])) > .chapter { grid-column: 4 / 13; }
    .site .site-main[data-layout='page']:has(> .jump-nav:not([hidden])) > .chapter:not(.site-field) { padding-inline: 0 var(--field-pad-x); }
    .site .site-main[data-layout='page']:has(> .jump-nav:not([hidden])) > .chapter.site-field { margin-left: calc(-1 * var(--site-gutter)); padding-inline: var(--site-gutter) var(--field-pad-x); }
    /* Text + Bild neben dem Verzeichnis: Bild 4, Text 7 Spalten (bei 5 + 5 blieben dem Text nur rund 290 px) */
    .site-main:has(> .jump-nav:not([hidden])) .media-text.has-img[data-image='start'] .site-figure { grid-column: 1 / 5; }
    .site-main:has(> .jump-nav:not([hidden])) .media-text.has-img[data-image='start'] .mt-text { grid-column: 6 / 13; }
    .site-main:has(> .jump-nav:not([hidden])) .media-text.has-img[data-image='end'] .mt-text { grid-column: 1 / 8; }
    .site-main:has(> .jump-nav:not([hidden])) .media-text.has-img[data-image='end'] .site-figure { grid-column: 9 / 13; }

    .site .site-main[data-layout='page'] > .jump-nav {
      grid-column: 1 / 4; grid-row: 2 / span 400; align-self: start; z-index: 1;
      margin: var(--site-sub) 0 0; padding: 0; background: none; box-shadow: none;
    }
    /* Auch das Verzeichnis beginnt an der Textkante */
    .site .site-main[data-layout='page'] > .jump-nav { padding-left: var(--field-pad-x); }
    .site:not([data-mode='preview']) .site-main[data-layout='page'] > .jump-nav { top: calc(var(--site-header-h) + var(--sp-5)); }
    .site:not([data-mode='preview']):has(.site-header[data-hidden='true']) .site-main[data-layout='page'] > .jump-nav { top: var(--sp-5); }
    .site-main[data-layout='page'] > .jump-nav > .jump-nav-label { display: block; margin-bottom: var(--sp-3); font-size: var(--site-fs-meta); font-weight: var(--site-fw-strong); letter-spacing: var(--site-label-tracking); color: var(--color-text-muted); }
    .site-main[data-layout='page'] > .jump-nav ul { flex-direction: column; gap: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .site .site-main[data-layout='page'] > .jump-nav a {
      display: flex; min-height: var(--target); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-radius: 0; border-left: 2px solid var(--color-line);
      background: none; color: var(--color-text-muted); font-weight: var(--site-fw-medium); white-space: normal; line-height: var(--site-lh-snug); text-wrap: balance;
    }
    @media (hover: hover) { .site .site-main[data-layout='page'] > .jump-nav a:hover { background: none; color: var(--color-accent); border-left-color: var(--color-accent); } }
    .site .site-main[data-layout='page'] > .jump-nav a[aria-current] { background: none; color: var(--color-text); font-weight: var(--site-fw-strong); border-left-color: var(--color-brand); border-left-width: 3px; padding-left: calc(var(--sp-4) - 1px); }
    .site-main[data-layout='page'] > .jump-nav + * { margin-top: var(--site-sub); }
  }
  @container (min-width: 62rem) {
    /* Termine: Monatslisten zweispaltig */
    .site-main[data-layout='page'] > .dates > ul { grid-column: 1 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--site-gutter); }
  }

  /* ==== Fuß: heller Gold-Footer, Tinte, Links blau (06 Kap. 3.1) ==================================
     Mobil kompakt: Kontakt volle Breite, darunter Adresse | Dokumente nebeneinander (unter 352 px untereinander),
     Rechtliches in einer Zeile. Jeder Link ist eine eigene 44 px hohe Zeile (Trefferfläche).
     Rechtsseiten (data-compact): ohne Einladung, nur Kontaktspalten und Rechtliches. */
  .site-footer {
    padding: var(--sp-6) var(--site-pad) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--site-radius-field) var(--site-radius-field) 0 0;
    background: var(--color-footer-bg); color: var(--color-footer-text); font-size: var(--site-fs-small); line-height: var(--site-lh-text);
  }
  .site-footer a { color: var(--color-footer-accent); }
  .site-footer :is(p, li) > a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--target); }
  @media (hover: hover) { .site .site-footer a:hover { color: var(--color-accent-strong); } }
  .site-footer :focus-visible { outline-color: var(--color-footer-accent); }
  .site-footer h2 { color: var(--color-footer-text); font-size: var(--site-fs-h2); }
  .site-footer h3 { display: flex; align-items: center; gap: var(--site-label-gap); margin-bottom: var(--sp-1); color: var(--color-footer-text); }
  .footer-inner { max-width: var(--site-max); margin: 0 auto; }
  .footer-next { margin-top: var(--sp-3); font-size: var(--site-fs-body); font-weight: var(--site-fw-strong); line-height: var(--site-lh-snug); text-wrap: balance; }
  .footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); }
  .site .site-footer .site-btn { color: var(--color-footer-text); }
  @media (hover: hover) { .site .site-footer .site-btn.secondary:hover { color: var(--color-footer-accent); background: var(--color-footer-hover); } }
  .site .site-footer .footer-cal { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--target); font-weight: var(--site-fw-strong); color: var(--color-footer-text); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  .footer-cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-5);
    margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-footer-line);
  }
  .footer-col[data-col='reach'] { grid-column: 1 / -1; }
  .footer-cols p + p, .footer-cols address + p { margin-top: var(--site-nudge); }
  @container (max-width: 21.99rem) { .footer-cols { grid-template-columns: minmax(0, 1fr); } }
  .site-footer[data-compact] .footer-cols { margin-top: 0; padding-top: 0; border-top: 0; }
  .footer-cols address { font-style: normal; }
  .footer-quiet { color: var(--color-footer-muted); }
  /* Dokument-Link: „(PDF)“ gehört zur Trefferfläche, unterstrichen ist nur der Titel */
  .site .site-footer .footer-doc { text-decoration: none; }
  .footer-doc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .footer-col[data-col='find'] .footer-quiet { hyphens: auto; -webkit-hyphens: auto; }
  .footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .footer-cols li { hyphens: manual; text-wrap: pretty; }
  .footer-sub {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--color-footer-line); font-size: var(--site-fs-meta); color: var(--color-footer-muted);
  }
  .footer-sub > p { margin: 0; }
  .footer-mark { flex: none; }
  /* Reihe mit Trennpunkten: Der Punkt gehört als ::before zum folgenden Eintrag und steht in dessen linkem
     Innenabstand. Jeder Eintrag ist um genau diesen Abstand nach links gezogen – am Zeilenanfang liegt der Punkt
     damit außerhalb und wird abgeschnitten. So beginnt nach einem Umbruch nie eine Zeile mit „·“. */
  .dot-list { --dot-w: 1.2em; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--dot-w); margin: 0; padding: 0; list-style: none; clip-path: inset(-0.5rem -0.5rem -0.5rem -0.4em); }
  .dot-list > * { position: relative; margin-left: calc(-1 * var(--dot-w)); padding-left: var(--dot-w); }
  .dot-list > *::before { content: '·'; position: absolute; left: 0; top: 50%; width: var(--dot-w); text-align: center; transform: translateY(-50%); }
  .footer-legal { flex-basis: 100%; }
  .footer-legal a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  .site-main > .legal-note { margin-top: var(--sp-5); }
  @container (min-width: 48rem) {
    .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
    .footer-col[data-col='reach'] { grid-column: auto; }
    .footer-legal { flex-basis: auto; margin-left: auto; }
  }
  @container (min-width: 62rem) {
    .site-footer { padding: var(--sp-9) var(--site-pad) var(--sp-6); font-size: var(--site-fs-body); }
    .site-footer[data-compact] { padding-top: var(--sp-7); }
    .footer-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--site-gutter); }
    .footer-invite { grid-column: 1 / 8; }
    .footer-next { font-size: var(--site-fs-lead); }
    .footer-cols { grid-column: 1 / 13; grid-template-columns: subgrid; margin-top: var(--sp-8); padding-top: var(--sp-7); }
    .footer-cols > :nth-child(1) { grid-column: 1 / 5; }
    .footer-cols > :nth-child(2) { grid-column: 6 / 9; }
    .footer-cols > :nth-child(3) { grid-column: 10 / 13; }
    .site-footer h3 { margin-bottom: var(--sp-2); }
    .footer-sub { grid-column: 1 / 13; margin-top: var(--sp-8); }
  }

  /* ==== Bewegung (11-feinschliff Kap. „Bewegung“) ================================================
     Kapitel heben sich beim Hereinscrollen 20 px an – nur wo der Browser
     scroll-getriebene Animationen kann (sonst stehen sie einfach da), nie über dem ersten Bildschirm hinaus
     verzögert: die Animation ist nach 140 px Weg fertig. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .site:not([data-mode='preview']) :is(.site-main > .chapter, .site-main > .facts, .footer-inner) {
        animation: site-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 140px;
      }
    }
  }
  /* Würfel rollen beim Hereinscrollen an ihren Platz (und beim Zurückscrollen wieder hinaus); die Zeitachse
     „Ein Tag bei uns“ zeichnet sich Station für Station. Beides hängt direkt an der Scroll-Position und beginnt
     erst, wenn das Element ein gutes Stück im Blickfeld ist (ab etwa 18 % des Wegs durch den Bildschirm). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .site:not([data-mode='preview']) .facts dl > div::before {
        --rest: -4deg; animation: cube-roll linear both; animation-timeline: view(); animation-range: cover 18% cover 38%;
      }
      .site:not([data-mode='preview']) .facts dl > div:nth-child(even)::before { --rest: 6deg; }
      .site:not([data-mode='preview']) .prose ol.steps > li::before { animation: step-in linear both; animation-timeline: view(); animation-range: cover 18% cover 40%; }
      .site:not([data-mode='preview']) .prose ol.steps > li:not(:last-child)::after { animation: step-line linear both; animation-timeline: view(); animation-range: cover 28% cover 56%; }
      @container (min-width: 62rem) {
        .site:not([data-mode='preview']) .day li::after { transform-origin: left; animation: axis-grow linear both; animation-timeline: view(); animation-range: cover calc(24% + var(--n, 0) * 6%) cover calc(32% + var(--n, 0) * 6%); }
        .site:not([data-mode='preview']) .day li::before { animation: dot-pop linear both; animation-timeline: view(); animation-range: cover calc(20% + var(--n, 0) * 6%) cover calc(25% + var(--n, 0) * 6%); }
        .day li:nth-child(2) { --n: 1; } .day li:nth-child(3) { --n: 2; } .day li:nth-child(4) { --n: 3; } .day li:nth-child(5) { --n: 4; }
      }
    }
  }
  @keyframes cube-roll { from { transform: rotate(calc(var(--rest) - 180deg)) scale(0.7); } to { transform: rotate(var(--rest)); } }
  /* Ziffern fallen wie Bauklötze von oben, kippen dabei leicht und setzen sich */
  @keyframes step-in { 0% { transform: translateY(-2.5rem) rotate(-14deg); opacity: 0; } 35% { opacity: 1; } 72% { transform: translateY(0) rotate(2deg); } 86% { transform: translateY(-0.2rem); } 100% { transform: none; } }
  @keyframes step-line { from { transform: scaleY(0); } }
  @keyframes axis-grow { from { transform: scaleX(0); } }
  @keyframes dot-pop { from { transform: scale(0); } }
  /* Nur Weg, keine Deckkraft: Text ist jederzeit voll lesbar (Kontrast, Suchmaschinen, Prüfwerkzeuge). */
  @keyframes site-reveal { from { transform: translateY(20px); } }

  /* FAQ-Icon dreht synchron zum Aufklappen (gleiche Kurve); beim Schließen (data-closing) schon zurück */
  .site-faq-item[open]:not([data-closing]) .faq-icon::after { transform: rotate(0deg); }

  @media (prefers-reduced-motion: reduce) {
    .site *, .site *::before, .site *::after { animation: none !important; transition-duration: 0.01ms !important; }
    .site-header[data-hidden='true'] { transform: none !important; }
  }
}