/* =============================================================================
   Wanted Home – Grundstil aller Seiten
   Schriften, CI-Farbwerte, Typografie, Buttons, Kopf mit Navigation, Fuß,
   Inhaltsseiten und die Mechanik für scrollgesteuerte Effekte.
   Seitenspezifische Gestaltung liegt in eigenen Dateien (z. B. start.css).
   Grundlage: Gestaltungsvariante A1 „Raum“ (Entscheidung 02.11.2026).
   ============================================================================= */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@layer schriften, basis, komponenten, seiten;

/* -----------------------------------------------------------------------------
   Schriften
   ----------------------------------------------------------------------------- */
@layer schriften {
  @font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
  }
  @font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
  }
  @font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-extrabold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
  }
  /* WantedChurchFont 2.00: Eigenentwicklung, nur für äußerst seltene Einzelfälle */
  @font-face {
    font-family: "Wanted Church";
    src: url("../fonts/wanted-church-font-2.00.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
}

/* -----------------------------------------------------------------------------
   Basis
   Farbwerte aus dem CI-Handbuch 1.01 (S. 12).
   --rot-tief ist Soft Red mit unverändertem Farbton und unveränderter
   Farbsättigung (OKLCH 20°, Chroma 0,236), nur dunkler (Helligkeit 0,592
   statt 0,650), damit Text und Buttons auf Weiß WCAG AA erreichen:
   4,62 : 1 statt 3,63 : 1 bei #FF304E. Festlegung 02.11.2026 (ersetzt den
   CI-Tonwert „+25 %“ #BF243B). Auf Stein erreicht --rot-tief nur 3,85 : 1;
   roter Text steht deshalb nur auf Weiß.
   ----------------------------------------------------------------------------- */
@layer basis {
  :root {
    --braun: #442F29;
    --braun-75: #73635F;
    --rot: #FF304E;
    --rot-tief: #E9043D;
    --grau: #4E5253;
    --stein: #ECEAE9;
    --stein-tief: #DEDAD8; /* Fuß, oberer Bereich (ab 0.18.1, E57) */
    --papier: #FFFFFF;
    /* Dezente Flächen zur Gliederung (ab 0.12.7, ab 0.12.9 nur Stein): Eine
       Fläche grenzt immer an Weiß. Roter Text erreicht auf Stein mit
       --rot-tief keine 4,5 : 1; in Flächen wird --rot-tief deshalb auf
       --rot-flaeche umgestellt (gleicher Farbton, OKLCH 0,54 statt 0,59;
       4,74 : 1 auf Stein). Buttons bleiben überall in --rot-marke. */
    --rot-flaeche: #CF0035;
    --rot-marke: #E9043D;
    /* Eckenradius für Bilder und Karten (ab 0.12.8); vollflächige Bilder
       über die ganze Breite bleiben eckig. */
    --radius: 0.75rem;

    --schrift: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

    --text-s: 1.0625rem;
    --text-m: clamp(1.25rem, 1.1rem + 0.45vw, 1.4375rem);
    --text-l: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --titel-s: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    --titel-m: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
    --titel-l: clamp(3rem, 1.6rem + 6vw, 7rem);

    --rand: clamp(1.25rem, 4vw, 4rem);
    --abstand-abschnitt: clamp(4rem, 9vw, 9rem);
    --breite: 84rem;
    --breite-text: 38rem;

    --kopf-hoehe: 85px;
    --dauer: 0.35s;
    --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light;
  }

  @media (max-width: 48rem) { :root { --kopf-hoehe: 73px; } }

  @view-transition { navigation: auto; }

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

  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }

  body {
    margin: 0;
    font-family: var(--schrift);
    font-weight: 300;
    font-size: var(--text-m);
    line-height: 1.5;
    color: var(--braun);
    background: var(--papier);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    /* Sicherheitsnetz: Kein Wort darf aus seinem Rahmen laufen (0.10.1). */
    overflow-wrap: break-word;
  }

  h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }

  /* Große Schrift in schmalen Spalten: lange Wörter (z. B. „Hausaufgabenhilfe“)
     werden nach deutschen Regeln getrennt statt über den Rand zu laufen (0.10.1). */
  h1, h2, h3, h4, strong, .zahlenband__liste li > span, .bk-zahlen li > span {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }

  p { margin: 0 0 1em; max-width: var(--breite-text); text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

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

  /* Links ohne Unterstreichung (0.12.0). Links im Fließtext sind rot und kräftiger
     gesetzt; Hover dunkelt ab, Tastaturfokus zeigt den roten Rahmen. */
  a { color: inherit; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; }
  a:hover { color: var(--rot-tief); }
  main :where(p, li, dd, address) > a:not([class]) { color: var(--rot-tief); font-weight: 400; }
  main :where(p, li, dd, address) > a:not([class]):hover { color: var(--braun); }

  :focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 3px; }

  .sprung {
    position: absolute;
    left: var(--rand);
    top: -100px;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--braun);
    color: var(--papier);
  }
  .sprung:focus { top: 1rem; }

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

/* -----------------------------------------------------------------------------
   Komponenten
   ----------------------------------------------------------------------------- */
@layer komponenten {

  /* Buttons ------------------------------------------------------------------ */
  .knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 3rem;
    padding: 0.55em 1.4em 0.6em;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: var(--text-m);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
  }
  .knopf--voll {
    background: var(--rot-marke);
    border-color: var(--rot-marke);
    color: var(--papier);
  }
  .knopf--voll:hover { background: var(--braun); border-color: var(--braun); color: var(--papier); }
  .knopf--rand:hover { background: var(--braun); border-color: var(--braun); color: var(--papier); }
  .knopf--hell { color: var(--papier); }
  .knopf--hell:hover { background: var(--papier); border-color: var(--papier); color: var(--braun); }

  /* Kopf --------------------------------------------------------------------- */
  .kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--papier);
    border-bottom: 1px solid transparent; /* Höhe wie bisher, --kopf-hoehe gilt weiter */
    view-transition-name: kopf;
  }
  /* Unterkante (ab 0.34.2, Entscheidung Martin 05.11.2026, Mockup
     `mockups/kopf-kante/`, Variante D; ab 0.34.3 15 px hoch, ab 0.34.4 an der
     Kante Braun zu 5 %, Wünsche Martin): statt der Linie in Stein ein Verlauf im
     Kopf, nach oben auslaufend */
  .kopf::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 15px;
    background: linear-gradient(to top, rgb(68 47 41 / 0.05), rgb(68 47 41 / 0));
    pointer-events: none;
  }
  /* Milchglas (ab 0.34.1, Wunsch Martin 05.11.2026): Weiß zu 85 % Deckkraft,
     darunter laufender Inhalt 16 px unscharf. Ohne backdrop-filter und bei
     „Transparenz reduzieren“ deckend weiß. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kopf {
      background: rgb(255 255 255 / 0.85);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      backdrop-filter: blur(16px) saturate(1.2);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .kopf { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .kopf__innen {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0.75rem var(--rand);
  }
  .kopf__marke { display: block; flex: none; }
  .kopf__marke .logo { display: block; width: auto; height: 3.75rem; }
  /* Logo mit dem Edding schreiben (ab 0.30.0, E84): logo-vorab.js setzt
     .logo-schreiben, wanted.js zieht die Striche der Masken auf */
  .logo__schreiben { display: none; }
  .logo__strich { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .logo-schreiben .kopf__marke .logo__schreiben { display: inline; }
  .logo-schreiben .kopf__marke .logo__voll { visibility: hidden; }

  .navigation { margin-left: auto; }
  .navigation__liste {
    display: flex;
    align-items: center;
    gap: 0.25rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .navigation__punkt { position: relative; }
  .navigation a {
    display: block;
    padding: 0.5rem 0;
    font-weight: 400;
    text-decoration: none;
  }
  .navigation a[aria-current] { color: var(--rot-tief); }

  .navigation__unter {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 12rem;
    margin: 0;
    padding: 0.5rem 1rem 0.75rem;
    list-style: none;
    background: var(--papier);
    border: 1px solid var(--stein);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem -1rem rgb(68 47 41 / 0.25);
    opacity: 0;
    visibility: hidden;
    translate: 0 -0.25rem;
    transition: opacity 0.2s, translate 0.2s, visibility 0.2s;
  }
  .navigation__punkt:hover > .navigation__unter,
  .navigation__punkt:focus-within > .navigation__unter {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  .kopf__spenden { flex: none; }

  /* Mobile Navigation (ohne JavaScript, über <details>) */
  .navigation-mobil { display: none; margin-left: auto; }
  .navigation-mobil > summary {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1rem;
    border: 2px solid var(--braun);
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .navigation-mobil > summary::-webkit-details-marker { display: none; }
  .navigation-mobil[open] > summary { background: var(--braun); color: var(--papier); }
  .navigation-mobil__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 1rem var(--rand) 2rem;
    background: var(--papier);
    border-bottom: 1px solid var(--stein);
  }
  .navigation-mobil__panel ul { margin: 0; padding: 0; list-style: none; }
  .navigation-mobil__panel > ul > li { border-top: 1px solid var(--stein); }
  .navigation-mobil__panel a { display: block; padding: 0.6rem 0; font-size: var(--text-l); font-weight: 400; text-decoration: none; }
  .navigation-mobil__panel ul ul { padding: 0 0 0.5rem 1rem; }
  .navigation-mobil__panel ul ul a { font-size: var(--text-m); padding: 0.3rem 0; }
  .navigation-mobil__panel .knopf { margin-top: 1.5rem; }
  .navigation-mobil__panel a[aria-current] { color: var(--rot-tief); }

  @media (max-width: 64rem) {
    .navigation, .kopf__spenden { display: none; }
    .navigation-mobil { display: block; }
    .kopf__marke .logo { height: 3rem; }
  }

  /* Fuß ---------------------------------------------------------------------- */
  /* Fuß zweistufig (ab 0.18.1, E57): oben dunkleres Stein mit Schatten nach
     innen an der Oberkante (liegt tiefer als die Seite), unten Weiß */
  .fuss {
    margin-top: var(--abstand-abschnitt);
    background: var(--stein-tief);
    box-shadow: inset 0 18px 22px -18px rgb(68 47 41 / 0.45);
    --rot-tief: var(--rot-flaeche);
  }
  .fuss__unten { background: var(--papier); }
  /* Endet die Seite mit einer Steinfläche, schließt der Fuß ohne weißen
     Streifen direkt an (ab 0.19.4, E64) */
  main:has(> .abschnitt--flaeche:last-child) + .fuss { margin-top: 0; }
  /* Ebenso auf der Startseite, die mit dem vollflächigen Schlussbild endet (ab 0.19.7) */
  main:has(> .bk > .bk-schluss:last-child) + .fuss { margin-top: 0; }
  .fuss__innen {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr auto;
    gap: 2rem 4rem;
    align-items: start;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 3.5rem var(--rand) 2.5rem;
  }
  .fuss .logo { width: 100%; height: auto; }
  .fuss address { font-style: normal; }
  .fuss ul { margin: 0; padding: 0; list-style: none; }
  /* Auf Stein kein roter Text (3,85 : 1): Fußlinks braun. Hover oben unterstrichen
     (Braun 75 % erreicht auf dunklerem Stein nur 4,2 : 1), unten auf Weiß Braun 75 % */
  .fuss address > a { font-weight: 400; }
  .fuss a:not([class]):hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .fuss__unten a:not([class]):hover { color: var(--braun-75); text-decoration: none; }
  .fuss__titel { margin-bottom: 0.75rem; font-size: var(--text-s); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .fuss__social { grid-column: 2; grid-row: 2; }
  /* Seitenübersicht (ab 0.23.0, E74): drei Spalten rechts neben Adresse und „Folge uns“ */
  .fuss__karte { grid-column: 3; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, auto); gap: 1.5rem 3rem; }
  .fuss__karte .fuss__titel { margin-bottom: 0.6rem; }
  .fuss__karte .fuss__titel a { color: inherit; }
  .fuss__karte li + li { margin-top: 0.2rem; }
  /* Dock-Effekt (ab 0.32.0, E86): ab 48 rem Einträge in der kleinen Schrift ohne
     Zusatzabstand; unter dem Mauszeiger wächst der Eintrag auf die frühere Größe,
     die Nachbarn derselben Spalte abgestuft mit (wanted.js). Nur Transformation,
     der Fuß ändert seine Höhe nicht */
  @media (min-width: 48.01rem) {
    .fuss__karte li { font-size: var(--text-s); }
    .fuss__karte li + li { margin-top: 0; }
    .fuss__karte li a { display: inline-block; transform-origin: 0 50%; transition: transform 0.14s ease-out; }
    .fuss__karte--ruhe li a { transition-duration: 0.3s; }
  }
  @media (prefers-reduced-motion: reduce) { .fuss__karte li a { transition: none; } }
  .fuss__kanaele { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-left: -0.6rem; }
  .fuss__kanaele ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
  .fuss__kanaele ul + ul { padding-left: 1.25rem; border-left: 1px solid rgb(68 47 41 / 0.2); }
  .fuss-kanal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    color: var(--braun);
    transition: color 0.2s ease;
  }
  .fuss-kanal--base { padding-right: 0.25rem; font-size: var(--text-s); }
  .social-icon { flex: none; }
  .fuss-kanal--instagram:hover { color: #E4405F; }
  .fuss-kanal--facebook:hover { color: #0866FF; }
  .fuss-kanal--youtube:hover { color: #FF0000; }
  @media (prefers-reduced-motion: reduce) { .fuss-kanal { transition: none; } }
  .fuss__rechtliches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.5rem var(--rand) 1.75rem;
    font-size: var(--text-s);
  }
  .fuss__rechtliches ul { display: flex; gap: 1.5rem; }
  /* Vermerk und Version als Einheit (ab 0.17.0): unter 60 rem geschlossen in
     eigener Zeile links, ab 60 rem rechts in derselben Zeile (passt ab etwa 56 rem) */
  .fuss__rechts {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 0.5rem 2rem;
    color: var(--braun-75);
  }
  @media (min-width: 60rem) {
    .fuss__rechts { flex-basis: auto; margin-left: auto; }
  }

  /* Mittlere Breiten: Übersicht in eigener Zeile unter „Folge uns“, bündig mit der Adresse */
  @media (max-width: 64rem) {
    .fuss__karte { grid-column: 2 / -1; grid-row: 3; justify-content: start; }
  }
  @media (max-width: 48rem) {
    .fuss__innen { grid-template-columns: 1fr; }
    .fuss__social { grid-column: auto; grid-row: auto; }
    .fuss__karte { grid-column: auto; grid-row: auto; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
    .fuss .logo { max-width: 11rem; }
  }

  /* Inhaltsseiten und Fehlerseiten ------------------------------------------- */
  .seite {
    max-width: var(--breite);
    min-height: 40vh;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) var(--rand) 0;
  }
  .seite h1 {
    margin-bottom: 1.5rem;
    font-size: var(--titel-m);
    font-weight: 800;
  }
  .seite__hinweis { color: var(--braun-75); font-size: var(--text-s); }
}

/* -----------------------------------------------------------------------------
   Reduzierte Bewegung: alle Animationen und Übergänge aus
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}

/* -----------------------------------------------------------------------------
   Scrollgesteuerte Effekte – Mechanik
   Jedes Element mit [data-scroll] bekommt den Fortschritt --p (0 … 1), den
   assets/js/wanted.js beim Scrollen setzt:
   - data-scroll=""       Sichtbarkeit im Fenster
                          (Fensterhöhe − Oberkante) / (Fensterhöhe + Höhe)
   - data-scroll="seite"  Scroll-Strecke der ersten Fensterhöhe
                          scrollY / Fensterhöhe
   Effekte greifen nur mit der Klasse .bewegt an <html> (setzt das
   JavaScript) und ohne „Bewegung reduzieren“. Sonst bleibt jede Seite
   statisch und vollständig sichtbar.
   Bewusst ohne CSS Scroll-Driven Animations (animation-timeline): Safari
   (macOS) startete die Zeitleisten beim Seitenaufruf teilweise nicht, die
   Elemente blieben im Ausgangszustand, bis die Seite neu geladen wurde
   (Rückmeldung 02.11.2026).
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Bausteine (Phase 2, Schritt 2.4)
   Wiederverwendbare Elemente für alle Seiten. Vorschau auf /bausteine.
   Regeln: Fließtext Light 300 (E31), Rot #E9043D nur auf Weiß (E28),
   keine Inline-Stile (CSP).
   ----------------------------------------------------------------------------- */
@layer komponenten {

  /* Abschnittsrahmen --------------------------------------------------------- */
  .abschnitt {
    max-width: var(--breite);
    margin: var(--abstand-abschnitt) auto 0;
    padding: 0 var(--rand);
  }
  /* Abschnitt als Farbfläche über die volle Breite (jeder zweite Abschnitt,
     gesetzt in inhalt.php). Die Fläche entsteht per box-shadow und clip-path,
     dadurch bleibt der Inhalt im Raster und es entsteht kein Querscrollen. */
  .abschnitt--flaeche {
    padding-block: clamp(3rem, 7vw, 6rem);
    background: var(--stein);
    box-shadow: 0 0 0 100vmax var(--stein);
    clip-path: inset(0 -100vmax);
    --rot-tief: var(--rot-flaeche);
  }
  .abschnitt--flaeche + .abschnitt--flaeche { margin-top: 0; }
  .abschnitt--flaeche :is(.kachel, .person__initialen, .markierung) { background: var(--papier); }
  /* Abschnitt mit Karte (ab 0.15.10, Kontakt „Anschrift/Adresse“): helle
     Anfahrtskarte aus OpenStreetMap-Daten. Unter 75 rem steht die schmale
     Fassung unter dem Text, darüber füllt die breite Fassung den ganzen
     weißen Bereich bis zum Fuß; links hellt ein Verlauf sie hinter dem Text auf. */
  .abschnitt__karte { margin-top: 2.5rem; }
  .abschnitt__karte img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
  }
  .abschnitt__kartenquelle {
    margin-top: 0.5rem;
    font-size: var(--text-s);
    color: var(--braun-75);
  }
  .abschnitt__kartenquelle a { color: inherit; }
  .abschnitt__kartenquelle a:hover { color: var(--braun); }
  @media (min-width: 75rem) {
    main:has(.abschnitt--karte) { overflow-x: clip; }
    .abschnitt--karte {
      position: relative;
      isolation: isolate;
      display: grid;
      align-content: center;
      min-height: min(44vw, 56rem);
      margin-top: 0;
      padding-block: var(--abstand-abschnitt);
    }
    main:has(> .abschnitt--karte:last-child) + .fuss { margin-top: 0; }
    .abschnitt__karte {
      position: absolute;
      z-index: -1;
      inset: 0 calc(50% - 50vw);
      margin: 0;
    }
    .abschnitt__karte::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.75) 30%, rgb(255 255 255 / 0) 50%);
      pointer-events: none;
    }
    .abschnitt__karte picture { display: contents; }
    .abschnitt__karte img {
      height: 100%;
      object-fit: cover;
      object-position: 100% 60%;
      border-radius: 0;
    }
    .abschnitt__kartenquelle {
      position: absolute;
      z-index: 1;
      right: var(--rand);
      bottom: 0.75rem;
      margin: 0;
    }
  }
  /* Eckenradius: Bilder und Karten (ab 0.12.8) */
  :is(.karte__bild, .karte__flaeche, .person__bild, .person__initialen, .kachel,
      .kapitel__karte, .spendenblock, .spendenblock__konto, .markierung, .partnerliste__eintrag,
      .bildband__bild, .mosaik__feld) {
    border-radius: var(--radius);
    overflow: hidden;
  }
  .abschnitt__titel {
    margin-bottom: 1.5rem;
    font-size: var(--titel-m);
    font-weight: 600;
  }

  /* Textblock ---------------------------------------------------------------- */
  .textblock { max-width: var(--breite-text); }
  .textblock h2 { margin-bottom: 1rem; font-size: var(--titel-m); font-weight: 600; }
  .textblock h3 { margin: 2rem 0 0.75rem; font-size: var(--titel-s); font-weight: 600; }
  .textblock__einleitung {
    font-size: var(--text-l);
    font-weight: 400;
    line-height: 1.3;
  }
  .textblock ul,
  .textblock ol { margin: 0 0 1em; padding-left: 1.25em; }
  .textblock li { margin-bottom: 0.35em; }
  .textblock li::marker { color: var(--rot-tief); }
  .textblock strong { font-weight: 600; }

  /* Bild mit Text ------------------------------------------------------------ */
  .bild-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
  }
  .bild-text--umgekehrt .bild-text__bild { order: 2; }
  .bild-text__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .bild-text__text h2 { margin-bottom: 1rem; font-size: var(--titel-m); font-weight: 600; }
  .bild-text__text .knopf { margin-top: 1rem; }

  /* Teaser-Karten ------------------------------------------------------------ */
  .karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .karte { position: relative; display: flex; flex-direction: column; }
  .karte__bild { display: block; overflow: hidden; }
  .karte__bild img,
  .karte__flaeche {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale 0.6s var(--kurve);
  }
  .karte__flaeche { display: block; background: var(--braun); }
  /* Logo auf brauner Fläche (ab 0.15.6, Heidelberg ohne Fotos) */
  .karte__flaeche--logo { display: grid; place-items: center; }
  .karte__flaeche--logo img { width: 52%; height: auto; }
  .seitenkopf__logo {
    display: grid;
    place-items: center;
    height: clamp(16rem, 34vw, 30rem);
    background: var(--braun);
  }
  .seitenkopf__logo img { width: min(60%, 26rem); height: auto; }
  .karte:hover .karte__bild img { scale: 1.04; }
  .karte__titel { margin: 1.25rem 0 0.5rem; font-size: var(--titel-s); font-weight: 600; }
  .karte__titel a { text-decoration: none; }
  .karte__titel a::after { content: ""; position: absolute; inset: 0; }
  .karte:hover .karte__titel a { color: var(--rot-tief); }
  .karte:has(a:focus-visible) { outline: 3px solid var(--rot-tief); outline-offset: 6px; }
  .karte__titel a:focus-visible { outline: none; }
  .karte__mehr {
    margin-top: auto;
    padding-top: 0.75rem;
    font-weight: 600;
  }
  .karte__mehr::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform var(--dauer) var(--kurve); }
  /* Hover für „Mehr“-Links (ab 0.15.7, Wunsch Martin): rot, Pfeil rückt vor */
  .karte__mehr { align-self: flex-start; transition: color var(--dauer) var(--kurve); }
  .karte:hover .karte__mehr,
  .karte:has(a:focus-visible) .karte__mehr { color: var(--rot-tief); }
  .karte:hover .karte__mehr::after,
  .karte:has(a:focus-visible) .karte__mehr::after { transform: translateX(0.35em); }

  /* Zitat -------------------------------------------------------------------- */
  .zitat {
    max-width: 52rem;
    margin: 0;
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 4px solid var(--rot);
  }
  .zitat blockquote { margin: 0; }
  .zitat blockquote p {
    max-width: none;
    font-size: var(--titel-s);
    font-weight: 400;
    line-height: 1.25;
  }
  .zitat figcaption {
    margin-top: 1.25rem;
    font-size: var(--text-s);
    font-weight: 400;
  }
  .zitat figcaption strong { font-weight: 600; }

  /* Terminliste -------------------------------------------------------------- */
  .termine { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--braun); }
  .termin {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--stein);
  }
  .termin__datum {
    display: grid;
    justify-items: center;
    padding: 0.5rem 0;
    background: var(--braun);
    color: var(--papier);
    line-height: 1;
  }
  .termin__tag { font-size: var(--titel-s); font-weight: 800; }
  .termin__monat { margin-top: 0.2rem; font-size: var(--text-s); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
  .termin__titel { margin-bottom: 0.2rem; font-size: var(--text-l); font-weight: 600; line-height: 1.15; }
  .termin__info { margin: 0; font-size: var(--text-s); font-weight: 400; }
  .termin__ort {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--braun);
    border-radius: 999px;
    font-size: var(--text-s);
    font-weight: 400;
    white-space: nowrap;
  }
  /* Termine aus Atrium (ab 0.25.0): öffentliche Notiz, Link, Hinweis ohne Termine */
  .termin__notiz { margin: 0.5rem 0 0; font-size: var(--text-s); max-width: var(--breite-text); }
  .termin__link { margin: 0.5rem 0 0; font-size: var(--text-s); font-weight: 600; }
  .termin__link a { color: inherit; text-decoration: none; transition: color var(--dauer) var(--kurve); }
  .termin__link a::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform var(--dauer) var(--kurve); }
  .termin__link a:hover,
  .termin__link a:focus-visible { color: var(--rot-tief); }
  .termin__link a:hover::after,
  .termin__link a:focus-visible::after { transform: translateX(0.35em); }
  .termine__leer { margin: 0; padding: 1.25rem 0; border-top: 2px solid var(--braun); border-bottom: 1px solid var(--stein); max-width: var(--breite-text); }

  /* News-Karte --------------------------------------------------------------- */
  .news-karte__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 1.25rem 0 0;
    font-size: var(--text-s);
    font-weight: 400;
  }
  .news-karte__meta time { font-weight: 600; }
  .news-karte .karte__titel { margin-top: 0.4rem; }

  /* Personenkarte ------------------------------------------------------------ */
  .personen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .person__bild,
  .person__initialen {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .person__initialen {
    display: grid;
    place-items: center;
    background: var(--stein);
    color: var(--braun);
    font-size: var(--titel-l);
    font-weight: 800;
  }
  .person__bild { display: block; overflow: hidden; }
  .person__bild img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
  .person__name { margin: 1rem 0 0.15rem; font-size: var(--titel-s); font-weight: 600; }
  .person__rolle { margin-bottom: 0.5rem; font-weight: 400; color: var(--rot-tief); }
  .person__text { font-size: var(--text-s); }

  /* Formular ----------------------------------------------------------------- */
  .formular { display: grid; gap: 1.5rem; max-width: 40rem; }
  .formular__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .feld { display: grid; gap: 0.4rem; align-content: start; }
  .feld__label { font-weight: 600; }
  .feld__pflicht { color: var(--rot-tief); }
  .feld__hilfe { font-size: var(--text-s); color: var(--braun-75); font-weight: 400; }
  .feld__eingabe {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    border: 2px solid var(--braun-75);
    border-radius: 0.375rem;
    background: var(--papier);
    color: var(--braun);
    font: inherit;
    font-weight: 400;
  }
  textarea.feld__eingabe { min-height: 9rem; resize: vertical; }
  .feld__eingabe:hover { border-color: var(--braun); }
  .feld__eingabe:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 2px; border-color: var(--braun); }
  .feld--fehler .feld__eingabe { border-color: var(--rot-tief); }
  .feld__fehler { font-size: var(--text-s); font-weight: 600; color: var(--rot-tief); }
  .feld__fehler::before { content: "⚠ "; }
  .wahl { margin: 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
  .wahl legend { margin-bottom: 0.4rem; padding: 0; font-weight: 600; }
  .wahl__option { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 400; cursor: pointer; }
  .wahl__option input {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.15rem 0 0;
    accent-color: var(--rot-tief);
  }
  button.knopf {
    font-family: inherit;
    cursor: pointer;
  }
  .formular__hinweis { font-size: var(--text-s); color: var(--braun-75); font-weight: 400; }
  /* Kontaktformular ab 0.16.0: Meldungen und verstecktes Feld (Honeypot) */
  .formular__meldung {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--braun);
    border-radius: 0.375rem;
    background: var(--papier);
    font-weight: 400;
  }
  .formular__meldung--fehler { border-left-color: var(--rot-tief); }
  .formular__meldung p { font-weight: 600; }
  .formular__meldung ul { margin: 0; padding-left: 1.25rem; }
  .formular__meldung a { color: var(--rot-tief); }
  .formular__meldung a:hover { color: var(--braun); }
  .formular__falle {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  button.knopf:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Spendenblock ------------------------------------------------------------- */
  .spendenblock {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--rot-marke);
    color: var(--papier);
  }
  .spendenblock h2 { margin-bottom: 1rem; font-size: var(--titel-m); font-weight: 800; }
  /* Buttons untereinander in gleicher Breite (ab 0.12.15) */
  .spendenblock__knoepfe { display: inline-grid; gap: 1rem; margin-top: 1.5rem; }
  /* Knopfgruppen (ab 0.15.7, Vorgabe Martin): alle Knöpfe einer Gruppe gleich
     breit und gleich hoch; nebeneinander, wenn Platz ist, sonst untereinander. */
  .knopfgruppe {
    display: inline-grid;
    grid-template-columns: repeat(var(--knoepfe, 2), 1fr);
    grid-auto-rows: 1fr;
    gap: 0.75rem;
  }
  .knopfgruppe .knopf { justify-content: center; max-width: 100%; }
  @media (max-width: 34rem) {
    .knopfgruppe { grid-template-columns: 1fr; }
  }
  .spendenblock__knoepfe .knopf { justify-content: center; }
  .spendenblock__konto {
    align-self: start;
    padding: 1.5rem;
    background: var(--papier);
    color: var(--braun);
  }
  .spendenblock__konto h3 { margin-bottom: 1rem; font-size: var(--text-l); font-weight: 600; }
  .spendenblock__konto-inhalt { display: grid; gap: 1.5rem; }
  .spendenblock__konto dl { display: grid; gap: 0.5rem; margin: 0; }
  .girocode { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--stein); }
  .girocode img { display: block; width: 100%; height: auto; }
  .girocode figcaption { font-size: var(--text-s); line-height: 1.35; }
  @media (max-width: 26rem) { .girocode { grid-template-columns: 8.5rem; } }
  .spendenblock__hinweis { margin-top: 1.25rem; font-size: var(--text-s); }
  .spendenblock__konto dt { font-size: var(--text-s); font-weight: 600; }
  .spendenblock__konto dd { margin: 0; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .spendenblock a:hover { color: var(--papier); }

  /* Schmale Bildschirme ------------------------------------------------------ */
  @media (max-width: 64rem) {
    .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spendenblock { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 48rem) {
    .bild-text,
    .karten,
    .formular__zeile { grid-template-columns: minmax(0, 1fr); }
    .bild-text--umgekehrt .bild-text__bild { order: 0; }
    .termin { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .termin__ort { grid-column: 2; justify-self: start; }
    .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
    .person__initialen { font-size: var(--titel-m); }
  }
}

/* -----------------------------------------------------------------------------
   Inhaltsseiten (ab 0.8.0)
   Seitenkopf und weitere Bausteine für die Seiten aus content/seiten/ und
   content/standorte/ (Template „inhalt“). Scroll-Effekte in inhalt.css.
   ----------------------------------------------------------------------------- */
@layer komponenten {

  /* Seitenkopf (Bildkapitel, ab 0.10.0: Kopfbild über die volle Breite) ---- */
  .seitenkopf__text {
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) var(--rand) 0;
  }
  .seitenkopf__text > * { max-width: 52rem; }
  /* Einzeiliger Untertitel (ab 0.15.3, Über uns): ab 40 rem ohne Umbruch, darunter
     feste Höhe von zwei Zeilen, damit die Leiste der Nachbarseiten auf allen
     Unterseiten an derselben Stelle steht */
  .seitenkopf--einzeilig .seitenkopf__einleitung { min-height: calc(2 * 1.3em); }
  @media (min-width: 40rem) {
    .seitenkopf--einzeilig .seitenkopf__einleitung { min-height: 0; max-width: none; white-space: nowrap; }
  }
  /* Nachbarseiten unter dem Seitenkopf (ab 0.14.2) */
  .seitenkopf__text > .geschwister { max-width: none; }
  .geschwister { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1rem; border-top: 1px solid var(--stein); }
  .geschwister ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
  .geschwister a { display: inline-block; padding-bottom: 0.2rem; border-bottom: 3px solid transparent; font-size: var(--text-m); text-decoration: none; color: var(--braun); }
  .geschwister a:hover { color: var(--rot-tief); }
  .geschwister a[aria-current="page"] { border-bottom-color: var(--rot-tief); color: var(--rot-tief); font-weight: 600; }
  .seitenkopf__oberzeile {
    margin-bottom: 0.75rem;
    color: var(--rot-tief);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .seitenkopf__titel {
    font-size: clamp(3rem, 1rem + 6.5vw, 7.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.01em;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Rechtliche Seiten (Impressum, Datenschutz): Titel eine Stufe kleiner */
  .seitenkopf--klein .seitenkopf__text { padding-top: clamp(2.5rem, 5vw, 4rem); }
  .seitenkopf--klein .seitenkopf__titel { font-size: var(--titel-m); line-height: 1; }
  .seitenkopf--klein + .abschnitt { margin-top: clamp(2rem, 4vw, 3rem); }
  .seitenkopf__leitsatz {
    max-width: none;
    margin: 1.25rem 0 0;
    color: var(--rot-tief);
    font-size: var(--titel-s);
    font-weight: 800;
    line-height: 1.1;
  }
  .seitenkopf__leitsatz span { display: block; }
  .seitenkopf__einleitung {
    margin-top: 1.5rem;
    font-size: var(--text-l);
    font-weight: 400;
    line-height: 1.3;
  }
  .seitenkopf__rahmen {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
  }
  .seitenkopf__bild img {
    width: 100%;
    height: min(78vh, 56vw);
    min-height: 18rem;
    object-fit: cover;
  }

  /* Kennzeichnung Entwurf / Beispiel ---------------------------------------- */
  .markierung {
    max-width: 52rem;
    margin: 0 0 1.5rem;
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--braun);
    background: var(--stein);
    font-size: var(--text-s);
    font-weight: 400;
    line-height: 1.35;
  }
  .markierung strong {
    margin-right: 0.35rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .markierung--beispiel { border-left-color: var(--rot); }
  .seitenkopf .markierung { margin-top: 1.5rem; }
  .kapitel__karte .markierung { margin-bottom: 1.25rem; }

  /* Abschnitte --------------------------------------------------------------- */
  .abschnitt__einleitung {
    margin-bottom: 2rem;
    font-size: var(--text-l);
    font-weight: 400;
    line-height: 1.3;
  }
  .textblock__knopf { margin-top: 1.5rem; }
  /* Knopfpaar (ab 0.15.4): beide Knöpfe gleich breit (Breite des breiteren)
     und gleich hoch; unter 34 rem untereinander. */
  .textblock__knoepfe {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.6rem;
  }
  .textblock__knoepfe .knopf { grid-row: 1; justify-content: center; }
  /* Hinweis direkt unter dem what3words-Knopf (ab 0.15.5, Wunsch Martin) */
  .textblock__knopfhinweis { grid-row: 2; grid-column: 2; margin: 0; font-size: var(--text-s); text-align: center; }
  @media (max-width: 34rem) {
    .textblock__knoepfe { grid-template-columns: 1fr; row-gap: 0.75rem; }
    .textblock__knoepfe .knopf, .textblock__knopfhinweis { grid-row: auto; grid-column: 1; }
    .textblock__knopfhinweis { margin-top: -0.25rem; }
  }

  /* what3words-Knopf „Fallblatt“ (ab 0.15.4): drei Striche im roten Kreis,
     Adresse kleingeschrieben, nicht kursiv, ohne Umbruch (Vorgaben what3words).
     Beim Überfahren blättern die Buchstaben durch (wanted.js). */
  .knopf-w3w {
    gap: 0.6em;
    padding-block: 0.2em;
    padding-inline: 0.4em 1.4em;
    border-color: var(--braun);
    background: var(--braun);
    color: var(--papier);
  }
  .knopf-w3w:hover,
  .knopf-w3w:focus-visible { border-color: #2F201C; background: #2F201C; color: var(--papier); }
  .knopf-w3w__striche {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background: var(--rot-marke);
    font-weight: 800;
    letter-spacing: -0.05em;
  }
  .knopf-w3w__adresse { display: inline-flex; white-space: nowrap; font-style: normal; }
  .knopf-w3w__adresse span { display: inline-block; text-align: center; }
  .knopf-w3w__adresse .ist-blatt { color: #FFC2CB; }
  .textblock__nachsatz { margin-top: 1rem; font-size: var(--text-s); }
  .textblock__nachsatz p { margin: 0; }
  /* Atrium-Beiträge (ab 0.18.0): Knopf unter Karten, Bildnachweis, Kopfbild ungeschnitten */
  .karten__knopf { margin: clamp(2rem, 4vw, 3rem) 0 0; }
  .seitenkopf__quelle {
    margin: 0.5rem 0 0;
    color: var(--grau);
    font-size: var(--text-s);
    text-align: right;
  }
  .seitenkopf__rahmen--nachweis {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 0;
    padding-inline: var(--rand);
    overflow: visible;
  }
  .seitenkopf__rahmen--nachweis .seitenkopf__bild { display: block; }
  .seitenkopf__rahmen--nachweis .seitenkopf__bild img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(80vh, 52rem);
    min-height: 0;
    object-fit: contain;
  }
  .karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knopf--inaktiv { opacity: 0.6; cursor: not-allowed; }

  /* Kacheln ------------------------------------------------------------------ */
  .kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kachel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--stein);
  }
  /* Feste Spaltenzahl (ab 0.14.1): jede Reihe voll */
  .kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kacheln--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kacheln--4 .kachel__titel { font-size: clamp(1.5rem, 0.8rem + 1.1vw, 2.1rem); }
  @media (max-width: 64rem) { .kacheln:is(.kacheln--3, .kacheln--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 40rem) { .kacheln:is(.kacheln--3, .kacheln--4) { grid-template-columns: minmax(0, 1fr); } }
  .kachel.kachel--akzent,
  .abschnitt--flaeche .kachel.kachel--akzent { background: var(--rot-marke); color: var(--papier); }
  .kachel--akzent .kachel__titel { border-top-color: var(--papier); }
  .kachel__link { display: inline-block; margin-top: 1rem; font-weight: 600; color: inherit; }
  .kachel--akzent .kachel__link { color: var(--papier); text-decoration: underline; text-underline-offset: 0.2em; }
  .kachel--leitsatz { display: flex; align-items: center; }
  .kachel__leitsatz { margin: 0; font-size: var(--titel-s); font-weight: 800; line-height: 1.05; }
  .kachel__leitsatz span { display: block; }
  .kachel__leitsatz span + span { margin-top: 0.3em; }
  .kachel__icon { display: block; width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--rot-tief); }
  .kachel--icon .kachel__titel { border-top: 0; padding-top: 0; }
  .person__kontakt { margin-top: 0.5rem; font-size: var(--text-s); }
  .kachel__titel {
    margin-bottom: 0.75rem;
    padding-top: 1rem;
    border-top: 4px solid var(--rot);
    font-size: var(--titel-s);
    font-weight: 800;
  }

  /* Leitsatz (z. B. „Unser Wunsch“) ------------------------------------------ */
  .leitsatz {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    border-top: 2px solid var(--braun);
    border-bottom: 2px solid var(--braun);
  }
  .leitsatz__titel { margin-bottom: 1rem; font-size: var(--titel-s); font-weight: 600; }
  .leitsatz__einleitung { font-size: var(--text-l); font-weight: 400; }
  .leitsatz__zeilen {
    max-width: 60rem;
    margin-top: 1.5rem;
    color: var(--rot-tief);
    font-size: var(--titel-m);
    font-weight: 800;
    line-height: 1.05;
  }
  /* Ausgewogener Umbruch wie im Schlusstext der Startseite (ab 0.22.0, E68) */
  .leitsatz__zeilen span { display: block; max-width: 15em; text-wrap: balance; }
  .leitsatz__zeilen span + span { margin-top: 0.35em; }

  /* Zeitleiste --------------------------------------------------------------- */
  .zeitleiste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--braun);
  }
  .zeitleiste__station {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: 0.5rem clamp(1rem, 4vw, 3rem);
    padding: 0 0 clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  }
  .zeitleiste__station::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -0.6rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--rot);
  }
  .zeitleiste__zeit {
    color: var(--rot-tief);
    font-size: var(--titel-s);
    font-weight: 800;
    line-height: 1.05;
  }
  .zeitleiste__titel { margin-bottom: 0.5rem; font-size: var(--text-l); font-weight: 600; line-height: 1.15; }

  /* Partner ------------------------------------------------------------------ */
  .partnerliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    max-width: 72rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .partnerliste > li { display: grid; }
  .partnerliste__eintrag {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    color: var(--braun);
    text-align: center;
    font-size: var(--text-m);
    font-weight: 400;
    line-height: 1.25;
  }
  .partnerliste__logo { display: grid; place-items: center; width: 100%; height: 5.5rem; }
  /* Logos einheitlich grau (gleiche Tonwerte durch Einfärben der Silhouette), farbig bei Hover/Fokus */
  .partnerliste__logo img { max-width: 100%; height: auto; filter: brightness(0) opacity(0.45); transition: filter 0.3s ease; }
  /* Mehrfarbige Logos (Christburg Campus) in Graustufen, damit die Farbwechsel
     als unterschiedliche Grauwerte erhalten bleiben (ab 0.19.6, E67) */
  :is(.partnerliste__logo, .logoband__spur) img.partnerlogo--graustufen { filter: grayscale(1) contrast(1.25) brightness(0.8) opacity(0.75); }
  a.partnerliste__eintrag:hover .partnerliste__logo img,
  a.partnerliste__eintrag:focus-visible .partnerliste__logo img { filter: brightness(1) opacity(1); }
  a.partnerliste__eintrag:hover .partnerliste__name { color: var(--rot-tief); }
  @media (prefers-reduced-motion: reduce) { .partnerliste__logo img { transition: none; } }
  a.partnerliste__eintrag:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 3px; }

  /* Wöchentliche Treffen als Wochenplan (ab 0.26.2, E80, Mockup C) --------- */
  .wochenplan { margin-top: 2rem; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: 1.25rem; background: var(--stein); }
  .wochenplan + .wochenplan { margin-top: 1.5rem; }
  .abschnitt--flaeche .wochenplan { background: var(--papier); }
  .wochenplan__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-bottom: 1.25rem; }
  .wochenplan__name { margin: 0; font-size: var(--titel-s); font-weight: 700; line-height: 1; }
  .wochenplan__name a { color: inherit; text-decoration: none; }
  .wochenplan__name a::after { content: "→"; margin-left: .3em; color: var(--rot-tief); display: inline-block; transition: transform var(--dauer) var(--kurve); }
  .wochenplan__name a:hover::after, .wochenplan__name a:focus-visible::after { transform: translateX(.3em); }
  .wochenplan__adresse { margin: 0; font-size: var(--text-s); color: var(--braun-75); max-width: none; }
  .wochenplan__plan { --zeile: 1.5rem; --halbe: 12; display: grid; grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr)); gap: .35rem; }
  .wochenplan__achse { display: grid; grid-template-rows: repeat(var(--halbe), var(--zeile)); grid-auto-rows: 0; padding-top: 2.2rem; }
  .wochenplan__stunde { grid-row-end: span 1; transform: translateY(-.55em); padding-right: .4rem; text-align: right; font-size: .85rem; line-height: 1; color: var(--braun-75); font-variant-numeric: tabular-nums; }
  .wochenplan__tag { display: grid; grid-template-rows: 2.2rem auto; min-width: 0; }
  .wochenplan__wt { display: flex; align-items: center; justify-content: center; border-radius: .6rem .6rem 0 0; font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .wochenplan__wt abbr { text-decoration: none; }
  .wochenplan__heute { display: none; }
  .wochenplan__tag--heute .wochenplan__wt { background: var(--braun); color: var(--papier); }
  .wochenplan__spalte { display: grid; grid-template-rows: repeat(var(--halbe), var(--zeile)); border-radius: 0 0 .6rem .6rem; background: repeating-linear-gradient(to bottom, var(--papier) 0 calc(2 * var(--zeile) - 1px), var(--stein-tief) calc(2 * var(--zeile) - 1px) calc(2 * var(--zeile))); }
  .abschnitt--flaeche .wochenplan__spalte { background: repeating-linear-gradient(to bottom, var(--stein) 0 calc(2 * var(--zeile) - 1px), var(--stein-tief) calc(2 * var(--zeile) - 1px) calc(2 * var(--zeile))); }
  .wochenplan__tag--leer .wochenplan__spalte { opacity: .6; }
  .wochenplan__block { position: relative; grid-column: 1; margin: 2px 4px; display: grid; align-content: start; gap: .1rem; padding: .45rem .55rem .45rem .75rem; border-radius: .55rem; overflow: hidden; font-size: .95rem; line-height: 1.1; background: var(--papier); }
  .wochenplan__block strong, .wochenplan__block span { position: relative; overflow-wrap: anywhere; }
  .wochenplan__block strong { font-weight: 700; }
  .wochenplan__farbe, .wochenplan__kante { position: absolute; top: 0; bottom: 0; height: 100%; }
  .wochenplan__farbe { left: 0; width: 100%; }
  .wochenplan__kante { left: 0; width: 4px; }
  .wochenplan__block--offen { background: transparent; border: 2px dashed var(--braun-75); }
  .wochenplan__z1 { grid-row-start: 1; }
  .wochenplan__z2 { grid-row-start: 2; }
  .wochenplan__z3 { grid-row-start: 3; }
  .wochenplan__z4 { grid-row-start: 4; }
  .wochenplan__z5 { grid-row-start: 5; }
  .wochenplan__z6 { grid-row-start: 6; }
  .wochenplan__z7 { grid-row-start: 7; }
  .wochenplan__z8 { grid-row-start: 8; }
  .wochenplan__z9 { grid-row-start: 9; }
  .wochenplan__z10 { grid-row-start: 10; }
  .wochenplan__z11 { grid-row-start: 11; }
  .wochenplan__z12 { grid-row-start: 12; }
  .wochenplan__z13 { grid-row-start: 13; }
  .wochenplan__z14 { grid-row-start: 14; }
  .wochenplan__z15 { grid-row-start: 15; }
  .wochenplan__z16 { grid-row-start: 16; }
  .wochenplan__z17 { grid-row-start: 17; }
  .wochenplan__z18 { grid-row-start: 18; }
  .wochenplan__z19 { grid-row-start: 19; }
  .wochenplan__z20 { grid-row-start: 20; }
  .wochenplan__z21 { grid-row-start: 21; }
  .wochenplan__z22 { grid-row-start: 22; }
  .wochenplan__z23 { grid-row-start: 23; }
  .wochenplan__z24 { grid-row-start: 24; }
  .wochenplan__z25 { grid-row-start: 25; }
  .wochenplan__z26 { grid-row-start: 26; }
  .wochenplan__z27 { grid-row-start: 27; }
  .wochenplan__z28 { grid-row-start: 28; }
  .wochenplan__z29 { grid-row-start: 29; }
  .wochenplan__z30 { grid-row-start: 30; }
  .wochenplan__z31 { grid-row-start: 31; }
  .wochenplan__z32 { grid-row-start: 32; }
  .wochenplan__z33 { grid-row-start: 33; }
  .wochenplan__z34 { grid-row-start: 34; }
  .wochenplan__z35 { grid-row-start: 35; }
  .wochenplan__z36 { grid-row-start: 36; }
  .wochenplan__z37 { grid-row-start: 37; }
  .wochenplan__z38 { grid-row-start: 38; }
  .wochenplan__z39 { grid-row-start: 39; }
  .wochenplan__z40 { grid-row-start: 40; }
  .wochenplan__z41 { grid-row-start: 41; }
  .wochenplan__z42 { grid-row-start: 42; }
  .wochenplan__z43 { grid-row-start: 43; }
  .wochenplan__z44 { grid-row-start: 44; }
  .wochenplan__z45 { grid-row-start: 45; }
  .wochenplan__z46 { grid-row-start: 46; }
  .wochenplan__z47 { grid-row-start: 47; }
  .wochenplan__z48 { grid-row-start: 48; }
  .wochenplan__d1 { grid-row-end: span 1; }
  .wochenplan__d2 { grid-row-end: span 2; }
  .wochenplan__d3 { grid-row-end: span 3; }
  .wochenplan__d4 { grid-row-end: span 4; }
  .wochenplan__d5 { grid-row-end: span 5; }
  .wochenplan__d6 { grid-row-end: span 6; }
  .wochenplan__d7 { grid-row-end: span 7; }
  .wochenplan__d8 { grid-row-end: span 8; }
  .wochenplan__d9 { grid-row-end: span 9; }
  .wochenplan__d10 { grid-row-end: span 10; }
  .wochenplan__d11 { grid-row-end: span 11; }
  .wochenplan__d12 { grid-row-end: span 12; }
  .wochenplan__d13 { grid-row-end: span 13; }
  .wochenplan__d14 { grid-row-end: span 14; }
  .wochenplan__d15 { grid-row-end: span 15; }
  .wochenplan__d16 { grid-row-end: span 16; }
  .wochenplan__d17 { grid-row-end: span 17; }
  .wochenplan__d18 { grid-row-end: span 18; }
  .wochenplan__d19 { grid-row-end: span 19; }
  .wochenplan__d20 { grid-row-end: span 20; }
  .wochenplan__d21 { grid-row-end: span 21; }
  .wochenplan__d22 { grid-row-end: span 22; }
  .wochenplan__d23 { grid-row-end: span 23; }
  .wochenplan__d24 { grid-row-end: span 24; }
  .wochenplan__d25 { grid-row-end: span 25; }
  .wochenplan__d26 { grid-row-end: span 26; }
  .wochenplan__d27 { grid-row-end: span 27; }
  .wochenplan__d28 { grid-row-end: span 28; }
  .wochenplan__d29 { grid-row-end: span 29; }
  .wochenplan__d30 { grid-row-end: span 30; }
  .wochenplan__d31 { grid-row-end: span 31; }
  .wochenplan__d32 { grid-row-end: span 32; }
  .wochenplan__d33 { grid-row-end: span 33; }
  .wochenplan__d34 { grid-row-end: span 34; }
  .wochenplan__d35 { grid-row-end: span 35; }
  .wochenplan__d36 { grid-row-end: span 36; }
  .wochenplan__d37 { grid-row-end: span 37; }
  .wochenplan__d38 { grid-row-end: span 38; }
  .wochenplan__d39 { grid-row-end: span 39; }
  .wochenplan__d40 { grid-row-end: span 40; }
  .wochenplan__d41 { grid-row-end: span 41; }
  .wochenplan__d42 { grid-row-end: span 42; }
  .wochenplan__d43 { grid-row-end: span 43; }
  .wochenplan__d44 { grid-row-end: span 44; }
  .wochenplan__d45 { grid-row-end: span 45; }
  .wochenplan__d46 { grid-row-end: span 46; }
  .wochenplan__d47 { grid-row-end: span 47; }
  .wochenplan__d48 { grid-row-end: span 48; }
  .wochenplan__plan--h12 { --halbe: 12; }
  .wochenplan__plan--h14 { --halbe: 14; }
  .wochenplan__plan--h16 { --halbe: 16; }
  .wochenplan__plan--h18 { --halbe: 18; }
  .wochenplan__plan--h20 { --halbe: 20; }
  .wochenplan__plan--h22 { --halbe: 22; }
  .wochenplan__plan--h24 { --halbe: 24; }
  .wochenplan__plan--h26 { --halbe: 26; }
  .wochenplan__plan--h28 { --halbe: 28; }
  .wochenplan__plan--h30 { --halbe: 30; }
  .wochenplan__plan--h32 { --halbe: 32; }
  .wochenplan__plan--h34 { --halbe: 34; }
  .wochenplan__plan--h36 { --halbe: 36; }
  .wochenplan__plan--h38 { --halbe: 38; }
  .wochenplan__plan--h40 { --halbe: 40; }
  .wochenplan__plan--h42 { --halbe: 42; }
  .wochenplan__plan--h44 { --halbe: 44; }
  .wochenplan__plan--h46 { --halbe: 46; }
  .wochenplan__plan--h48 { --halbe: 48; }
  .wochenplan__legende { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: var(--text-s); }
  .wochenplan__legende li { display: block; max-width: 60rem; }
  .wochenplan__legende svg { display: inline-block; width: .7rem; height: .7rem; margin-right: .45rem; }
  .wochenplan__legende strong { font-weight: 600; }
  @media (max-width: 48rem) {
    .wochenplan__plan { grid-template-columns: minmax(0, 1fr); }
    .wochenplan__achse, .wochenplan__tag--leer { display: none; }
    .wochenplan__tag { grid-template-columns: 6.75rem minmax(0, 1fr); grid-template-rows: none; gap: .5rem; }
    .wochenplan__wt { align-self: start; min-height: 2.6rem; border-radius: .6rem; }
    .wochenplan__tag--heute .wochenplan__heute { display: inline; margin-left: .3em; }
    .wochenplan__spalte { display: grid; grid-template-rows: none; gap: .35rem; background: none !important; }
    .wochenplan__block { grid-row: auto !important; margin: 0; }
  }

  /* Social-Media-Kanäle ------------------------------------------------------ */
  /* Ab 0.19.6 (E66, Variante A): kleinere Überschrift und Einleitung, daneben
     die Kanäle als schmale Liste mit Trennlinien; unter 64 rem untereinander */
  .abschnitt--social.abschnitt--flaeche { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .abschnitt--social .abschnitt__titel { margin-bottom: 0.5rem; font-size: var(--titel-s); }
  .abschnitt--social .abschnitt__einleitung { max-width: 30rem; margin: 0 0 2rem; font-size: var(--text-m); }
  @media (min-width: 64rem) {
    .abschnitt--social {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      grid-template-rows: auto 1fr;
      column-gap: 4rem;
      align-items: start;
    }
    .abschnitt--social .abschnitt__titel,
    .abschnitt--social .abschnitt__einleitung { grid-column: 1; }
    .abschnitt--social .abschnitt__einleitung { margin: 0; }
    .abschnitt--social .kanaele { grid-column: 2; grid-row: 1 / span 2; }
  }
  .kanaele {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgb(68 47 41 / 0.15);
  }
  .kanal { padding: 0; border-bottom: 1px solid rgb(68 47 41 / 0.15); }
  .kanal__link {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    padding: 0.9rem 0;
    text-decoration: none;
  }
  .kanal__link .social-icon { grid-column: 1; grid-row: 1 / span 2; width: 1.75rem; height: 1.75rem; color: var(--braun); transition: color 0.2s ease; }
  .kanal__name { grid-column: 2; grid-row: 1; font-size: var(--text-m); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
  .kanal__text { grid-column: 2; grid-row: 2; margin-top: 0.15rem; color: var(--braun-75); font-size: var(--text-s); font-weight: 300; line-height: 1.3; }
  .kanal__dienst { grid-column: 3; grid-row: 1 / span 2; color: var(--braun-75); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }
  .kanal__link:hover .kanal__name { color: var(--rot-tief); }
  .kanal--instagram .kanal__link:hover .social-icon { color: #E4405F; }
  .kanal--facebook .kanal__link:hover .social-icon { color: #0866FF; }
  .kanal--youtube .kanal__link:hover .social-icon { color: #FF0000; }
  @media (prefers-reduced-motion: reduce) { .kanal__link .social-icon { transition: none; } }

  /* Kontakt ------------------------------------------------------------------ */
  .kontakt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }

  /* Rechtstexte -------------------------------------------------------------- */
  .rechtstext { max-width: 46rem; }
  .rechtstext__abschnitt + .rechtstext__abschnitt { margin-top: 2.5rem; }
  .rechtstext h2 { margin-bottom: 0.75rem; font-size: var(--titel-s); font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
  .rechtstext h3 { margin: 1.5rem 0 0.5rem; font-size: var(--text-l); font-weight: 600; }
  .rechtstext p { max-width: none; }
  .rechtstext ul { margin: 0 0 1em; padding-left: 1.25em; }
  .rechtstext li { margin-bottom: 0.25em; }
  .rechtstext li::marker { color: var(--rot-tief); }

  /* Bildkapitel: Bild bleibt stehen, Karte gleitet (ab 0.10.0) ------------- */
  .abschnitt--bild-text,
  .abschnitt--zahlen { max-width: none; padding: 0; }
  .kapitel { --versatz: 15%; position: relative; display: grid; padding-bottom: 5rem; }
  .kapitel__bild {
    grid-area: 1 / 1;
    position: sticky;
    top: var(--kopf-hoehe, 85px);
    height: min(calc(100vh - var(--kopf-hoehe, 85px)), 56.25vw);
    overflow: hidden;
  }
  .kapitel__bild picture { display: block; height: 100%; }
  .kapitel__bild img { width: 100%; height: 100%; object-fit: cover; }
  /* Hülle aus Karte und Sprechblasen-Spitze (ab 0.21.1, E72), siehe .sprechblase */
  .kapitel__huelle {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    position: relative;
    width: min(34rem, calc(100% - 2 * var(--rand)));
    margin: 70vh 0 0 var(--rand);
    transform: translate3d(0, var(--versatz), 0);
  }
  .kapitel__karte {
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--papier);
  }
  .kapitel--rechts .kapitel__huelle { justify-self: end; margin-right: var(--rand); }
  .kapitel__karte .knopf { margin-top: 1rem; }

  /* Glas-Karte (ab 0.18.2, E58): obere 70 % von 75 % Deckkraft bis deckend Weiß,
     Foto dahinter 12 px unscharf. Nur mit backdrop-filter; ohne Unterstützung
     und bei „Transparenz reduzieren“ bleibt die Karte deckend weiß. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kapitel__karte {
      background: linear-gradient(to bottom, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.92) 45%, var(--papier) 70%);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .kapitel__karte { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  .kapitel__oberzeile {
    margin-bottom: 0.75rem;
    color: var(--rot-tief);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Bildband (ab 0.14.0, Hommage an Marzahn, E40) -----------------------------
     Grundform: wischbare Reihe. Mit .ist-aktiv (bezirk.js, Desktop) bleibt die
     Bühne stehen und die Spur läuft beim Scrollen seitwärts (--x). */
  .abschnitt--bildband { max-width: none; padding: 0; }
  .bildband { --bb-hoehe: clamp(14rem, calc(100vh - var(--kopf-hoehe, 85px) - 13rem), 28rem); }
  .bildband__kopf { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
  .bildband__spur {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: 0 var(--rand) 1rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rand);
    overscroll-behavior-x: contain;
  }
  .bildband__eintrag { flex: none; width: min(85vw, 40rem); scroll-snap-align: start; }
  .bildband__spur:focus-visible { outline: 3px solid var(--rot-marke); outline-offset: -3px; }
  .bildband__spur::after { content: ""; flex: none; width: calc(var(--rand) - clamp(0.75rem, 1.5vw, 1.25rem)); }
  .bildband__eintrag figure { margin: 0; }
  .bildband__bild { display: block; }
  /* Bilder im Originalformat (16:9), nicht beschnitten (ab 0.15.5, Wunsch Martin). */
  .bildband__bild img { display: block; width: 100%; height: auto; }
  .bildband figcaption { margin-top: 0.6rem; font-size: var(--text-m); font-weight: 600; }
  @media (min-width: 48.01rem) {
    /* Ab 0.15.5: Die Bühne ist so hoch wie ihr Inhalt (--bb-buehne, bezirk.js)
       und bleibt in der Mitte des Fensters stehen; davor und danach gilt der
       normale Abschnittsabstand statt leerer Fensterhöhe. */
    .bildband.ist-aktiv { height: calc(var(--bb-buehne, 0px) + var(--weg, 0px)); }
    .bildband.ist-aktiv .bildband__buehne {
      position: sticky;
      top: max(var(--kopf-hoehe, 85px), calc((100vh + var(--kopf-hoehe, 85px) - var(--bb-buehne, 0px)) / 2));
      overflow: hidden;
    }
    .bildband.ist-aktiv .bildband__spur {
      overflow: visible;
      padding-bottom: 0;
      transform: translate3d(calc(-1 * var(--x, 0px)), 0, 0);
      will-change: transform;
    }
    .bildband.ist-aktiv .bildband__eintrag { width: auto; }
    .bildband.ist-aktiv .bildband__bild img { width: auto; height: var(--bb-hoehe); }
  }

  /* Mosaik (ab 0.14.0, Hommage an Marzahn, E40) ------------------------------ */
  .mosaik {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 15vw, 14rem);
    grid-template-areas:
      "m1 m1 m2"
      "m1 m1 m3"
      "m4 m5 m6";
    gap: clamp(0.5rem, 1.2vw, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mosaik__feld--1 { grid-area: m1; }
  .mosaik__feld--2 { grid-area: m2; }
  .mosaik__feld--3 { grid-area: m3; }
  .mosaik__feld--4 { grid-area: m4; }
  .mosaik__feld--5 { grid-area: m5; }
  .mosaik__feld--6 { grid-area: m6; }
  .mosaik__bild, .mosaik__bild picture { display: block; height: 100%; }
  .mosaik__bild img { width: 100%; height: 100%; object-fit: cover; }

  /* Zahlenband ---------------------------------------------------------------- */
  .zahlenband { background: var(--braun); color: var(--papier); }
  .zahlenband__innen { max-width: var(--breite); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--rand); }
  .zahlenband__titel { margin-bottom: 2.5rem; font-size: var(--titel-m); font-weight: 800; line-height: 1; }
  .zahlenband__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .zahlenband__liste strong {
    display: block;
    color: var(--rot);
    font-size: clamp(3rem, 1.75rem + 4vw, 6rem);
    font-weight: 800;
    line-height: 0.9;
  }
  .zahlenband__liste li > span { display: block; margin-top: 0.75rem; font-size: var(--text-l); line-height: 1.2; }
  .zahlenband__markierung { margin-top: 2.5rem; color: var(--braun); }

  /* Kennzahlen (ab 0.15.7, Wunsch Martin; kennzahl(), wanted.js) -------------
     Walzen: Jede Ziffer rollt durch zwei Runden 0–9 und rastet mit leichtem
     Überschwingen ein, Stellen und Zahlen nacheinander; Zeichen wie „%“
     springen danach auf, ein roter Strich zieht unter der Zahl auf.
     Ohne JavaScript und bei „Bewegung reduzieren“ steht der Endwert. */
  .zaehler, .walzen { font-variant-numeric: tabular-nums; }
  .zaehler { display: inline-block; text-align: left; white-space: nowrap; }
  .walzen { display: inline-flex; align-items: flex-start; white-space: nowrap; line-height: 1; }
  .walze { display: inline-block; height: 1em; overflow: hidden; }
  .walze__band { display: flex; flex-direction: column; transform: translateY(calc((var(--ziffer, 0) + 10) * -1em)); }
  .walze__band span { display: block; height: 1em; line-height: 1; text-align: center; }
  .walzen--bereit .walze__band { transform: translateY(0); }
  .walzen--bereit .walzen__zeichen { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  .walzen--los .walze__band {
    transform: translateY(calc((var(--ziffer, 0) + 10) * -1em));
    transition: transform 1.5s cubic-bezier(0.22, 1.18, 0.36, 1) var(--verzug, 0s);
  }
  .walzen--los .walzen__zeichen {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease calc(var(--verzug-ende, 1s)), transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--verzug-ende, 1s));
  }
  .walzen__zeichen { display: inline-block; }
  .walze[data-ziffer="0"] { --ziffer: 0; }
  .walze[data-ziffer="1"] { --ziffer: 1; }
  .walze[data-ziffer="2"] { --ziffer: 2; }
  .walze[data-ziffer="3"] { --ziffer: 3; }
  .walze[data-ziffer="4"] { --ziffer: 4; }
  .walze[data-ziffer="5"] { --ziffer: 5; }
  .walze[data-ziffer="6"] { --ziffer: 6; }
  .walze[data-ziffer="7"] { --ziffer: 7; }
  .walze[data-ziffer="8"] { --ziffer: 8; }
  .walze[data-ziffer="9"] { --ziffer: 9; }
  strong:has(> .walzen)::after {
    content: "";
    display: block;
    width: 3rem;
    height: 0.3rem;
    margin-top: 0.9rem;
    border-radius: 999px;
    background: var(--rot);
    transform-origin: left center;
  }
  strong:has(> .walzen--bereit)::after { transform: scaleX(0); }
  strong:has(> .walzen--los)::after { transform: scaleX(1); transition: transform 0.7s var(--kurve) calc(var(--verzug-ende, 1s) - 0.2s); }

  /* Schmale Bildschirme ------------------------------------------------------ */
  @media (max-width: 64rem) {
    .kontakt { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 48rem) {
    .karten--2 { grid-template-columns: minmax(0, 1fr); }
    /* Kopfbilder und Bildkapitel auf schmalen Bildschirmen im Querformat 3:2
       (ab 0.12.10); hochkant zugeschnitten blieben nur 31–43 % sichtbar. */
    .seitenkopf__bild img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
    .seitenkopf__rahmen--nachweis .seitenkopf__bild img { width: 100%; aspect-ratio: auto; }
    .kapitel { --versatz: 0%; padding-bottom: 0; }
    .kapitel__bild { grid-area: 1 / 1; position: static; height: auto; }
    .kapitel__bild img { height: auto; aspect-ratio: 3 / 2; }
    .kapitel__huelle,
    .kapitel--rechts .kapitel__huelle { grid-area: 2 / 1; justify-self: stretch; width: auto; margin: -2.5rem var(--rand) 0; }
    .zeitleiste__station { grid-template-columns: minmax(0, 1fr); }
    .mosaik {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: clamp(8rem, 30vw, 12rem);
      grid-template-areas:
        "m1 m1"
        "m2 m3"
        "m4 m5"
        "m6 m6";
    }
  }
}

/* -----------------------------------------------------------------------------
   Inhaltskacheln „Über uns“ (ab 0.17.2, Entscheidung Martin, Variante A)
   Volles Raster: ab 64 rem zwölf Spalten (Wanted Home groß links über zwei
   Reihen, Geschichte und Zweck rechts, darunter Werte und Partner), ab 48 rem
   zwei Spalten, darunter eine.
   ----------------------------------------------------------------------------- */
@layer komponenten {
  .inhaltskacheln {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }
  @media (min-width: 48rem) {
    .inhaltskacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inhaltskachel--wanted-home { grid-column: 1 / -1; }
  }
  /* Zwei Spalten: Wanted Home über die volle Breite, Porträts links, Text rechts */
  @media (min-width: 48rem) and (max-width: 63.99rem) {
    .inhaltskachel--wanted-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  }
  @media (min-width: 64rem) {
    .inhaltskacheln { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .inhaltskachel--wanted-home { grid-column: 1 / span 7; grid-row: 1 / span 2; }
    .inhaltskachel--geschichte { grid-column: 8 / span 5; grid-row: 1; }
    .inhaltskachel--zweck { grid-column: 8 / span 5; grid-row: 2; }
    .inhaltskachel--werte { grid-column: 1 / span 5; grid-row: 3; }
    .inhaltskachel--partner { grid-column: 6 / span 7; grid-row: 3; }
  }

  .inhaltskachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-radius: var(--radius);
    background: var(--stein);
    overflow: hidden;
  }
  .inhaltskachel > p,
  .inhaltskachel__text > p { margin: 0.5rem 0 0; max-width: 34rem; }
  .inhaltskachel__titel { font-size: var(--titel-s); font-weight: 800; line-height: 1; }
  .inhaltskachel__titel a { color: inherit; text-decoration: none; transition: color var(--dauer) var(--kurve); }
  .inhaltskachel__titel a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .inhaltskachel__titel a:focus-visible { outline: none; }
  .inhaltskachel:has(a:focus-visible) { outline: 3px solid var(--rot-tief); outline-offset: 4px; }
  .inhaltskachel .karte__mehr { margin-top: auto; padding-top: 1.5rem; }
  .inhaltskachel:hover .karte__mehr::after,
  .inhaltskachel:has(a:focus-visible) .karte__mehr::after { transform: translateX(0.35em); }
  .inhaltskachel--wanted-home:hover .inhaltskachel__titel a,
  .inhaltskachel--geschichte:hover .inhaltskachel__titel a,
  .inhaltskachel--partner:hover .inhaltskachel__titel a,
  .inhaltskachel--wanted-home:hover .karte__mehr,
  .inhaltskachel--geschichte:hover .karte__mehr,
  .inhaltskachel--partner:hover .karte__mehr { color: var(--rot-flaeche); }

  /* Wanted Home: Porträts der Leitung */
  .inhaltskachel--wanted-home { gap: 1.75rem; }
  .inhaltskachel__text { display: flex; flex: 1; flex-direction: column; }
  .inhaltskachel__personen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .inhaltskachel__portraet { display: block; overflow: hidden; border-radius: calc(var(--radius) * 0.75); }
  .inhaltskachel__portraet img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: scale 0.6s var(--kurve);
  }
  .inhaltskachel--wanted-home:hover .inhaltskachel__portraet img { scale: 1.04; }
  .inhaltskachel__person { margin: 0.6rem 0 0; font-size: var(--text-s); line-height: 1.25; }
  .inhaltskachel__person strong { display: block; font-weight: 600; }
  .inhaltskachel__person span { color: var(--braun-75); }

  /* Geschichte: Zeitstrahl */
  .inhaltskachel--geschichte { background: var(--papier); box-shadow: inset 0 0 0 2px var(--stein); }
  .zeitstrahl {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding: 1.6rem 0 0;
    list-style: none;
  }
  .zeitstrahl::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    right: 0;
    height: 2px;
    background: var(--rot-marke);
    transform-origin: left center;
  }
  .zeitstrahl__station { position: relative; min-width: 0; }
  .zeitstrahl__station::before {
    content: "";
    position: absolute;
    top: -1.6rem;
    left: 0;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--papier);
    box-shadow: inset 0 0 0 3px var(--rot-marke);
  }
  .zeitstrahl__station strong { display: block; color: var(--rot-tief); font-size: var(--text-l); font-weight: 800; line-height: 1; }
  .zeitstrahl__station span { display: block; margin-top: 0.35rem; font-size: var(--text-s); line-height: 1.25; }
  .zeitstrahl--bereit::before { transform: scaleX(0); }
  .zeitstrahl--bereit .zeitstrahl__station { opacity: 0; transform: translateY(0.75rem); }
  .zeitstrahl--los::before { transform: scaleX(1); transition: transform 1.1s var(--kurve); }
  .zeitstrahl--los .zeitstrahl__station {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.6s var(--kurve);
  }
  .zeitstrahl--los .zeitstrahl__station:nth-child(1) { transition-delay: 0.15s; }
  .zeitstrahl--los .zeitstrahl__station:nth-child(2) { transition-delay: 0.5s; }
  .zeitstrahl--los .zeitstrahl__station:nth-child(3) { transition-delay: 0.85s; }
  /* Sehr schmal: Zeitstrahl senkrecht, damit lange Wörter nicht brechen */
  @media (max-width: 24rem) {
    .zeitstrahl { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0 0 0 1.75rem; }
    .zeitstrahl::before { top: 0.45rem; bottom: 0.45rem; left: 0.4rem; right: auto; width: 2px; height: auto; transform-origin: center top; }
    .zeitstrahl--bereit::before { transform: scaleY(0); }
    .zeitstrahl--los::before { transform: scaleY(1); }
    .zeitstrahl__station::before { top: 0.05rem; left: -1.75rem; }
  }

  /* Zweck: Schlagworte auf Rot */
  .inhaltskachel--zweck { background: var(--rot-marke); color: var(--papier); }
  .inhaltskachel__schlagworte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
  }
  .inhaltskachel__schlagworte li {
    padding: 0.35em 0.85em 0.4em;
    border: 2px solid rgb(255 255 255 / 0.7);
    border-radius: 999px;
    font-size: var(--text-s);
    font-weight: 600;
    line-height: 1.1;
    transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
  }
  .inhaltskachel--zweck:hover .inhaltskachel__schlagworte li { background: var(--papier); color: var(--rot-flaeche); }

  /* Werte: wechselnde Begriffe auf Braun */
  .inhaltskachel--werte { background: var(--braun); color: var(--papier); }
  .wertwechsel {
    display: grid;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
  }
  .wertwechsel__wert { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-m); font-weight: 600; line-height: 1.1; }
  .wertwechsel__wert .kachel__icon { flex: none; width: 2rem; height: 2rem; color: var(--rot); }
  /* Platz für zwei Zeilen („Christliches Menschenbild“), damit die Kachel
     beim Wechsel nicht springt */
  .wertwechsel--an { grid-template-areas: "wert"; min-height: 2.3em; align-items: center; font-size: var(--titel-s); }
  .wertwechsel--an .wertwechsel__wert {
    grid-area: wert;
    font-size: 1em;
    font-weight: 800;
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.45s ease, transform 0.6s var(--kurve);
  }
  .wertwechsel--an .wertwechsel__wert .kachel__icon { width: 1.2em; height: 1.2em; }
  .wertwechsel--an .wertwechsel__wert.ist-aktiv { opacity: 1; transform: none; }
  .wertwechsel--an .wertwechsel__wert.ist-weg { opacity: 0; transform: translateY(-1.25rem); }

  /* Partner: laufendes Logoband */
  .logoband {
    display: flex;
    margin: 1.75rem calc(-1 * clamp(1.5rem, 2.5vw, 2.25rem)) 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logoband__spur {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0 clamp(1rem, 2vw, 1.75rem);
    list-style: none;
    animation: logolauf 38s linear infinite;
  }
  .logoband__spur li { display: grid; flex: none; place-items: center; height: 4.5rem; }
  .logoband__spur img { display: block; max-width: none; height: auto; filter: brightness(0) opacity(0.45); transition: filter 0.3s ease; }
  .inhaltskachel--partner:hover .logoband__spur { animation-play-state: paused; }
  .inhaltskachel--partner:hover .logoband__spur img { filter: none; }
  @keyframes logolauf { to { transform: translateX(-100%); } }

  @media (prefers-reduced-motion: reduce) {
    .logoband { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
    .logoband__spur { flex-wrap: wrap; flex: 1 1 100%; animation: none; row-gap: 1rem; }
    .logoband__spur[aria-hidden="true"] { display: none; }
    .inhaltskachel__portraet img, .inhaltskachel__schlagworte li, .logoband__spur img { transition: none; }
  }
}

/* Block „download“ (ab 0.21.0, E71): Vorschaubild links, Text und Knöpfe rechts */
@layer komponenten {
  .download {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 52rem;
  }
  @media (min-width: 40rem) {
    .download { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
  }
  @media (min-width: 48rem) {
    .download { grid-template-columns: 14rem minmax(0, 1fr); }
  }
  .download__vorschau { display: block; max-width: 10rem; }
  @media (min-width: 48rem) { .download__vorschau { max-width: 14rem; } }
  .download__bild img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 1px 2px rgb(68 47 41 / 0.12), 0 8px 24px rgb(68 47 41 / 0.14);
  }
  .download__text h2 { margin-bottom: 1rem; }
  .download__angabe { margin-top: 1rem; font-size: var(--text-s); color: rgb(68 47 41 / 0.75); }
  .download__knoepfe { margin-top: 1.25rem; --knoepfe: 2; }
}

/* Szenenwechsel im Fließtext (ab 0.21.0, E71, Leseprobe der Erzählung) */
@layer komponenten {
  .textblock .fliesstext__pause { margin-top: 2em; }
}

/* Spitze einer Sprechblase über den Bildkapitel-Karten (ab 0.21.1, E72): Form aus dem
   Flyer 09/2026 (senkrechte rechte Kante, abgerundete Spitze, schräge linke Kante, weich
   in die Oberkante der Karte auslaufend). Gleiche Glaswirkung wie der obere Kartenrand
   (E58); ohne backdrop-filter und bei „Transparenz reduzieren“ deckend weiß. */
@layer komponenten {
  .sprechblase {
    position: absolute;
    right: 3.5rem;
    bottom: 100%;
    width: 96px;
    height: 95.16px;
    background: var(--papier);
    clip-path: path("M 96.00 95.16 C 92.16 95.16 89.01 92.02 89.01 88.18 L 89.01 9.67 C 89.01 -2.37 77.84 -2.95 72.97 5.97 L 28.08 88.08 C 24.25 95.08 10.04 95.16 0.00 95.16 Z");
    pointer-events: none;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sprechblase {
      background: rgb(255 255 255 / 0.75);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .sprechblase { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  /* Karte rechts: Spitze links und gespiegelt, damit sie zur Bildmitte zeigt (Wunsch Martin) */
  :is(.kapitel--rechts, .bk-kapitel--rechts) .sprechblase { right: auto; left: 3.5rem; transform: scaleX(-1); }
  @media (max-width: 48rem) {
    /* Karten stehen hier unter dem Bild über die volle Breite: Spitze überall rechts */
    .sprechblase,
    :is(.kapitel--rechts, .bk-kapitel--rechts) .sprechblase { right: 2rem; left: auto; transform: scale(0.7); transform-origin: right bottom; }
  }
}

/* Karte und Spitze als eine einzige Glasfläche (ab 0.21.2, E72): Zwei getrennt
   geglättete halbtransparente Flächen zeigen an ihrer Nahtstelle eine feine Linie
   (Hinweis Martin). Wo clip-path: shape() bekannt ist (Chrome/Edge ab 135, Safari ab
   18.4, Firefox ab 148), wird .sprechblase zum Hintergrund der ganzen Karte in der
   Form „Karte mit Spitze“; die Karte selbst ist dann durchsichtig. Ältere Browser
   behalten die zwei Flächen aus 0.21.1. Werte erzeugt aus dem Flyer-Pfad
   (Spitze 96 × 95,16 px, 3,5 rem vom Kartenrand; mobil 70 %, 2 rem). */
@layer seiten {
  @supports (clip-path: shape(from 0 0, line to 100% 0, line to 0 100%, close)) {
    .bk-kapitel__huelle > .bk-kapitel__karte,
    .kapitel__huelle > .kapitel__karte {
      position: relative;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .bk-kapitel__huelle > .sprechblase,
    .kapitel__huelle > .sprechblase {
      --spitze: 95.16px;
      top: calc(-1 * var(--spitze));
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      transform: none;
      clip-path: shape(from 0 calc(95.16px + var(--radius)), curve to var(--radius) 95.16px with 0 calc(95.16px + calc(var(--radius) * 0.4477)) / calc(var(--radius) * 0.4477) 95.16px, line to calc(100% - 152px) 95.16px, curve to calc(100% - 123.92px) 88.08px with calc(100% - 141.96px) 95.16px / calc(100% - 127.75px) 95.08px, line to calc(100% - 79.03px) 5.97px, curve to calc(100% - 62.99px) 9.67px with calc(100% - 74.16px) -2.95px / calc(100% - 62.99px) -2.37px, line to calc(100% - 62.99px) 88.18px, curve to calc(100% - 56px) 95.16px with calc(100% - 62.99px) 92.02px / calc(100% - 59.84px) 95.16px, line to calc(100% - var(--radius)) 95.16px, curve to 100% calc(95.16px + var(--radius)) with calc(100% - var(--radius) * 0.4477) 95.16px / 100% calc(95.16px + calc(var(--radius) * 0.4477)), line to 100% calc(100% - var(--radius)), curve to calc(100% - var(--radius)) 100% with 100% calc(100% - var(--radius) * 0.4477) / calc(100% - var(--radius) * 0.4477) 100%, line to var(--radius) 100%, curve to 0 calc(100% - var(--radius)) with calc(var(--radius) * 0.4477) 100% / 0 calc(100% - var(--radius) * 0.4477), close);
    }
    :is(.bk-kapitel--rechts, .kapitel--rechts) > :is(.bk-kapitel__huelle, .kapitel__huelle) > .sprechblase {
      clip-path: shape(from 0 calc(95.16px + var(--radius)), curve to var(--radius) 95.16px with 0 calc(95.16px + calc(var(--radius) * 0.4477)) / calc(var(--radius) * 0.4477) 95.16px, line to 56px 95.16px, curve to 62.99px 88.18px with 59.84px 95.16px / 62.99px 92.02px, line to 62.99px 9.67px, curve to 79.03px 5.97px with 62.99px -2.37px / 74.16px -2.95px, line to 123.92px 88.08px, curve to 152px 95.16px with 127.75px 95.08px / 141.96px 95.16px, line to calc(100% - var(--radius)) 95.16px, curve to 100% calc(95.16px + var(--radius)) with calc(100% - var(--radius) * 0.4477) 95.16px / 100% calc(95.16px + calc(var(--radius) * 0.4477)), line to 100% calc(100% - var(--radius)), curve to calc(100% - var(--radius)) 100% with 100% calc(100% - var(--radius) * 0.4477) / calc(100% - var(--radius) * 0.4477) 100%, line to var(--radius) 100%, curve to 0 calc(100% - var(--radius)) with calc(var(--radius) * 0.4477) 100% / 0 calc(100% - var(--radius) * 0.4477), close);
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .bk-kapitel__huelle > .sprechblase,
      .kapitel__huelle > .sprechblase {
        /* Verlauf wie die Glas-Karte (E58), bezogen auf die Kartenhöhe unterhalb der Spitze */
        background: linear-gradient(to bottom,
          rgb(255 255 255 / 0.75) var(--spitze),
          rgb(255 255 255 / 0.92) calc(var(--spitze) * 0.55 + 45%),
          var(--papier) calc(var(--spitze) * 0.3 + 70%));
      }
    }
    @media (prefers-reduced-transparency: reduce) {
      .bk-kapitel__huelle > .sprechblase,
      .kapitel__huelle > .sprechblase { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }
    @media (max-width: 48rem) {
      .bk-kapitel__huelle > .sprechblase,
      .kapitel__huelle > .sprechblase,
      :is(.bk-kapitel--rechts, .kapitel--rechts) > :is(.bk-kapitel__huelle, .kapitel__huelle) > .sprechblase {
        --spitze: 66.61px;
        right: 0;
        left: 0;
        transform: none;
        clip-path: shape(from 0 calc(66.61px + var(--radius)), curve to var(--radius) 66.61px with 0 calc(66.61px + calc(var(--radius) * 0.4477)) / calc(var(--radius) * 0.4477) 66.61px, line to calc(100% - 99.2px) 66.61px, curve to calc(100% - 79.54px) 61.66px with calc(100% - 92.17px) 66.61px / calc(100% - 82.23px) 66.56px, line to calc(100% - 48.12px) 4.18px, curve to calc(100% - 36.89px) 6.77px with calc(100% - 44.71px) -2.06px / calc(100% - 36.89px) -1.66px, line to calc(100% - 36.89px) 61.73px, curve to calc(100% - 32px) 66.61px with calc(100% - 36.89px) 64.41px / calc(100% - 34.69px) 66.61px, line to calc(100% - var(--radius)) 66.61px, curve to 100% calc(66.61px + var(--radius)) with calc(100% - var(--radius) * 0.4477) 66.61px / 100% calc(66.61px + calc(var(--radius) * 0.4477)), line to 100% calc(100% - var(--radius)), curve to calc(100% - var(--radius)) 100% with 100% calc(100% - var(--radius) * 0.4477) / calc(100% - var(--radius) * 0.4477) 100%, line to var(--radius) 100%, curve to 0 calc(100% - var(--radius)) with calc(var(--radius) * 0.4477) 100% / 0 calc(100% - var(--radius) * 0.4477), close);
      }
    }
  }
}

/* Bildlauf im Seitenkopf (ab 0.24.0, E76, Wunsch Martin): Streifen in etwa einem
   Drittel der Höhe des Kopfbilds, Bilder laufen von rechts nach links. Bei
   „Bewegung reduzieren“ steht der Streifen still, der Knopf entfällt. */
@layer komponenten {
  .bildlauf {
    position: relative;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    --hoehe: max(9rem, min(26vh, 18.7vw));
    --abstand: 0.75rem;
  }
  .bildlauf__fenster { overflow: hidden; }
  .bildlauf__spur {
    display: flex;
    gap: var(--abstand);
    width: max-content;
    animation: bildlauf 90s linear infinite;
  }
  .bildlauf__bild { display: block; flex: none; }
  .bildlauf__bild img {
    display: block;
    width: auto;
    height: var(--hoehe);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
  }
  /* Die Spur enthält die Bilder zweimal: um die Hälfte (plus halben Abstand) verschieben */
  @keyframes bildlauf {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - var(--abstand) / 2), 0, 0); }
  }
  .bildlauf--pause .bildlauf__spur { animation-play-state: paused; }
  .bildlauf__knopf {
    position: absolute;
    right: var(--rand);
    bottom: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: var(--braun);
    cursor: pointer;
  }
  .bildlauf__knopf:hover { background: var(--papier); }
  .bildlauf__knopf:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 2px; }
  /* Zeichen: zwei Balken (anhalten), im angehaltenen Zustand ein Dreieck (weiter) */
  .bildlauf__zeichen { width: 0.8rem; height: 0.9rem; border-left: 0.28rem solid currentColor; border-right: 0.28rem solid currentColor; }
  .bildlauf--pause .bildlauf__zeichen {
    width: 0; height: 0; margin-left: 0.2rem;
    border-style: solid; border-color: transparent transparent transparent currentColor;
    border-width: 0.5rem 0 0.5rem 0.8rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .bildlauf__spur { animation: none; }
    .bildlauf__knopf { display: none; }
  }
}

/* Kalender auf /termine (ab 0.26.0, E79, Mockup 5 nach dem Atrium-Kalender;
   ersetzt die Agenda aus 0.25.0): je Tag eine Karte, Feiertage und Ferien */
@layer komponenten {
  .kalender__leiste { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 2rem; }
  .kalender__schalter { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: .3rem; border-radius: 999px; background: var(--papier); }
  /* Gleitender Knopf (ab 0.26.1): gleitet mit Überschwingen, beim Wechsel federt er wie Gummi */
  .kalender__schieber { position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
  .kalender__schieber span { display: block; height: 100%; border-radius: 999px; background: var(--braun); transform-origin: center; }
  .kalender__schalter[data-ansicht="vergangen"] .kalender__schieber { transform: translateX(100%); }
  .kalender__schalter--federt .kalender__schieber span { animation: kalender-gummi .6s cubic-bezier(.3, .7, .4, 1); }
  @keyframes kalender-gummi {
    0%   { transform: scale(1, 1); }
    25%  { transform: scale(1.28, .86); }
    50%  { transform: scale(.9, 1.08); }
    70%  { transform: scale(1.06, .97); }
    85%  { transform: scale(.98, 1.01); }
    100% { transform: scale(1, 1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .kalender__schieber { transition: none; }
    .kalender__schalter--federt .kalender__schieber span { animation: none; }
  }
  .kalender__schalt { position: relative; z-index: 1; display: grid; place-items: center; min-width: 8.5rem; min-height: 2.6rem; padding: 0 1.25rem; border-radius: 999px; font-size: var(--text-m); font-weight: 600; text-decoration: none; color: var(--braun); transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .kalender__schalt:hover, .kalender__schalt:focus-visible { color: var(--rot-tief); }
  .kalender__schalt[aria-current] { color: var(--papier); transition: color .25s var(--kurve) .1s; }
  .kalender__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .kalender__menue { position: relative; }
  .kalender__menue--pdf { position: static; }
  .kalender__aktion { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.2rem; padding: 0 1.25rem; border: 2px solid var(--braun); border-radius: 999px; background: var(--papier); color: var(--braun); font-size: var(--text-m); font-weight: 600; list-style: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .kalender__aktion::-webkit-details-marker { display: none; }
  .kalender__aktion svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--rot-tief); }
  .kalender__aktion:hover, .kalender__menue[open] .kalender__aktion { background: var(--braun); color: var(--papier); }
  .kalender__aktion:hover svg, .kalender__menue[open] .kalender__aktion svg { color: var(--papier); }
  .kalender__liste { position: absolute; z-index: 5; top: calc(100% + .5rem); right: 0; display: grid; min-width: 17rem; padding: .5rem; border-radius: 1rem; background: var(--papier); box-shadow: 0 .75rem 2rem rgb(68 47 41 / .18); }
  .kalender__liste a { padding: .6rem .8rem; border-radius: .6rem; font-size: var(--text-s); font-weight: 600; text-decoration: none; color: var(--braun); }
  .kalender__liste a:hover, .kalender__liste a:focus-visible { background: var(--stein); color: var(--rot-tief); }
  .kalender__gruppe { margin: .5rem .8rem .1rem; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--braun-75); }
  .kalender__adresse { margin: .25rem .8rem .6rem; font-size: .95rem; color: var(--braun-75); }
  .kalender__adresse span { display: block; margin-top: .25rem; color: var(--braun); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
  /* PDF-Auswahl wie im Atrium-Kalender (ab 0.26.1) */
  .kalender__pdf { position: absolute; z-index: 5; top: calc(100% + .75rem); left: 0; right: 0; display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--papier); box-shadow: 0 .75rem 2rem rgb(68 47 41 / .18); }
  .kalender__pdf-hinweis { margin: 0; font-size: var(--text-s); max-width: none; }
  .kalender__feld { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .6rem; }
  .kalender__feld legend { margin-bottom: .6rem; padding: 0; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--braun-75); }
  .kalender__wahl { display: grid; gap: .6rem; }
  .kalender__wahl--ansicht { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kalender__wahl--klein { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .kalender__wahl label { position: relative; cursor: pointer; }
  .kalender__wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .kalender__wahl span { display: grid; gap: .15rem; height: 100%; padding: .75rem .9rem; border: 2px solid var(--stein-tief); border-radius: .9rem; transition: border-color var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve); }
  .kalender__wahl strong { font-size: var(--text-s); font-weight: 600; }
  .kalender__wahl small { font-size: .95rem; color: var(--braun-75); line-height: 1.25; }
  .kalender__wahl label:hover span { border-color: var(--braun-75); }
  .kalender__wahl input:checked + span { border-color: var(--rot-marke); background: #FFF4F6; }
  .kalender__wahl input:focus-visible + span { outline: 3px solid var(--braun); outline-offset: 2px; }
  .kalender__schema { width: 100%; max-width: 6.5rem; height: auto; margin-bottom: .4rem; color: var(--braun-75); }
  .kalender__wahl input:checked + span .kalender__schema { color: var(--rot-tief); }
  .kalender__zeitraum, .kalender__enthaelt { display: none; }
  .kalender__pdf:has(input[name="ansicht"][value="jahr"]:checked) [data-ansicht="jahr"],
  .kalender__pdf:has(input[name="ansicht"][value="halbjahr"]:checked) [data-ansicht="halbjahr"],
  .kalender__pdf:has(input[name="ansicht"][value="quartal"]:checked) [data-ansicht="quartal"],
  .kalender__pdf:has(input[name="ansicht"][value="monat"]:checked) [data-ansicht="monat"] { display: block; }
  .kalender__zeitraum select { min-height: 3rem; padding: 0 2.5rem 0 1rem; border: 2px solid var(--stein-tief); border-radius: .9rem; background: var(--papier); font: inherit; font-size: var(--text-s); color: var(--braun); }
  .kalender__fest { margin: 0; font-size: var(--text-s); }
  .kalender__enthaelt { margin: 0; padding: .6rem .9rem; border-radius: .75rem; background: var(--stein); font-size: .95rem; max-width: none; }
  .kalender__pdf-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--stein-tief); }
  .kalender__dateiname { font-size: .95rem; color: var(--braun-75); overflow-wrap: anywhere; }
  .kalender__monat { margin: 2.5rem 0 1rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--braun-75); }
  .kalender__leiste + .kalender__monat { margin-top: 0; }
  .kalender { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
  .kalender__tag { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: 1.5rem; padding: 1.25rem 1.5rem 1.25rem 1rem; border-radius: 1.25rem; background: var(--papier); }
  .kalender__tag--heute { box-shadow: inset 0 0 0 3px var(--rot-marke); }
  /* Vergangene Tage blass über die Farbe statt über die Deckkraft, damit Text 4,5 : 1 behält (ab 0.28.1) */
  .kalender__tag--vorbei, .kalender__tag--vorbei .kalender__zahl { color: var(--braun-75); }
  .kalender__tag--vorbei .kalender__titel, .kalender__tag--vorbei .kalender__zeit { font-weight: 400; }
  .kalender__tag--vorbei .kalender__punkt, .kalender__tag--vorbei .kalender__symbol { opacity: .45; }
  .kalender--ohne-standort .kalender__termin { padding-right: 0; }
  /* Streifen über die ganze Karte gelegt und mit ihrem Eckenradius beschnitten; die Karte selbst schneidet ab 0.31.0 nicht mehr ab, damit die Auswahl „In meinen Kalender“ über den Rand reichen kann */
  .kalender__tag--feiertag::after, .kalender__tag--ferien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
  .kalender__tag--feiertag::after { background: linear-gradient(to left, var(--rot-marke) 6px, transparent 6px); }
  .kalender__tag--ferien::after { background: linear-gradient(to left, #F5B800 6px, transparent 6px); }
  .kalender__datum { display: grid; align-content: start; justify-items: center; line-height: 1; padding-top: .15rem; }
  .kalender__wt, .kalender__mon { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--braun-75); }
  .kalender__tag--heute .kalender__wt { color: var(--rot-tief); font-weight: 700; }
  .kalender__zahl { margin: .3rem 0 .25rem; font-size: 2.75rem; font-weight: 800; }
  .kalender__datum--rot .kalender__zahl { color: var(--rot-tief); }
  .kalender__inhalt { display: grid; gap: .75rem; min-width: 0; }
  .kalender__hinweise { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; max-width: none; }
  .kalender__hinweis { padding: .2rem .7rem; border-radius: 999px; font-size: .95rem; font-weight: 600; }
  .kalender__hinweis--feiertag { background: #FFE3E8; color: var(--rot-flaeche); }
  .kalender__hinweis--ferien { background: #FFF1C2; color: var(--braun); }
  .kalender__termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
  .kalender__termin { position: relative; display: grid; justify-items: start; gap: .2rem; padding-right: 7rem; }
  .kalender__termin + .kalender__termin { padding-top: 1.1rem; border-top: 1px solid var(--stein-tief); }
  .kalender__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; }
  .kalender__punkt { flex: none; width: .75rem; height: .75rem; }
  .kalender__titel { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
  .kalender__marke { padding: .15rem .6rem; border-radius: 999px; background: var(--stein); font-size: .9rem; font-weight: 600; }
  .kalender__zeit { padding-left: 1.4rem; font-size: var(--text-s); font-weight: 700; font-variant-numeric: tabular-nums; }
  .kalender__ort, .kalender__prediger, .kalender__notiz { padding-left: 1.4rem; font-size: var(--text-s); }
  .kalender__ort { display: flex; align-items: center; gap: .3rem; color: var(--braun-75); }
  .kalender__symbol { flex: none; width: 1.05rem; height: 1.05rem; margin-left: -.1rem; }
  .kalender__prediger { color: var(--braun-75); }
  .kalender__notiz { max-width: var(--breite-text); }
  .kalender__termin > * { grid-column: 1; }
  .kalender__termin { --oben: 0rem; --rechts: 0rem; }
  .kalender__termin + .kalender__termin { --oben: 1.1rem; }
  .kalender__standort { position: absolute; top: calc(var(--oben) + .2rem); right: var(--rechts); }
  .kalender__link { margin: .45rem 0 0 1.4rem; display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 1rem; border: 2px solid var(--rot-marke); border-radius: 999px; font-size: var(--text-s); font-weight: 600; text-decoration: none; color: var(--braun); transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .kalender__link::after { content: "→"; margin-left: .4em; }
  .kalender__link:hover, .kalender__link:focus-visible { background: var(--rot-marke); color: var(--papier); }
  /* In meinen Kalender (ab 0.31.0, E85): Symbol unter dem Standortkennzeichen, Auswahl wie die Menüs oben */
  .kalender__eintragen { position: absolute; top: calc(var(--oben) + 2.9rem); right: var(--rechts); }
  .kalender--ohne-standort .kalender__eintragen { top: var(--oben); }
  .kalender--ohne-standort .kalender__termin--knopf { padding-right: 3.5rem; }
  .kalender__symbolknopf { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--braun); border-radius: 50%; background: var(--papier); color: var(--braun); list-style: none; cursor: pointer; transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .kalender__symbolknopf::-webkit-details-marker { display: none; }
  .kalender__symbolknopf:hover, .kalender__eintragen[open] .kalender__symbolknopf { background: var(--braun); color: var(--papier); }
  .kalender__symbolknopf .kalender__plus { width: 1.25rem; height: 1.25rem; }
  .kalender__liste--eintragen { top: calc(100% + .5rem); right: 0; min-width: 18rem; }
  /* Geöffnete Auswahl liegt über den folgenden Tageskarten (sonst verdeckt, z. B. bei hervorgehobenen Terminen mit eigener Stapelebene) */
  .kalender__tag:has(.kalender__eintragen[open]) { z-index: 6; }
  .kalender__liste--eintragen a { display: flex; align-items: center; gap: .7rem; }
  .kalender__liste--eintragen .kalender__plus { flex: none; width: 1.25rem; height: 1.25rem; color: var(--rot-tief); }
  .kalender__liste--eintragen small { display: block; font-size: .9rem; font-weight: 400; color: var(--braun-75); }
  /* Hervorgehobene Termine (ab 0.31.0, E85): Fläche aus der Farbe der Kategorie */
  .kalender__termin.kalender__termin--hervor { --oben: .9rem; --rechts: 1rem; margin: 0 -1rem; padding: .9rem 8rem .9rem 1rem; border-top: 0; border-radius: .75rem; isolation: isolate; }
  .kalender__termin--hervor + .kalender__termin { border-top: 0; }
  /* grid-column/-row auto: Bezugsrahmen ist dann die ganze Fläche des Eintrags einschließlich Innenabstand, nicht die Rasterzelle */
  .kalender__termin > .kalender__flaeche { position: absolute; inset: 0; z-index: -1; grid-column: auto; grid-row: auto; width: 100%; height: 100%; border-radius: inherit; }
  .kalender--ohne-standort .kalender__termin.kalender__termin--hervor { padding-right: 1rem; }
  .kalender--ohne-standort .kalender__termin.kalender__termin--hervor.kalender__termin--knopf { padding-right: 4.5rem; }
  .kalender__liste-alle { transition: opacity .2s var(--kurve); }
  .kalender__liste-alle--laedt { opacity: .45; }
  .kalender__quelle { margin: 1.5rem 0 0; font-size: .95rem; color: var(--braun-75); }
  @media (max-width: 48rem) {
    .kalender__leiste { display: grid; grid-template-columns: 1fr; }
    .kalender__schalter { width: 100%; }
    .kalender__schalt { min-width: 0; }
    .kalender__aktion { padding: 0 .75rem; }
    .kalender__menue:last-child .kalender__liste { right: 0; }
    .kalender__menue:first-child .kalender__liste { right: auto; left: 0; }
    .kalender__liste { min-width: min(17rem, calc(100vw - 2.5rem)); }
    .kalender__pdf { padding: 1.1rem; }
    .kalender__wahl--ansicht { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kalender__wahl--klein { grid-template-columns: minmax(0, 1fr); }
    .kalender__tag { grid-template-columns: 3.5rem minmax(0,1fr); gap: 1rem; padding: 1rem 1rem 1rem .5rem; }
    .kalender__zahl { font-size: 2.1rem; }
    .kalender__titel { font-size: 1.35rem; }
    .kalender__termin { padding-right: 0; }
    .kalender__standort { position: static; margin: .3rem 0 0 1.4rem; }
    /* Mit Standortkennzeichen steht das Symbol neben dem Kennzeichen bzw. dem Link in der letzten Zeile, ohne (Diese Woche) braucht es Platz rechts */
    .kalender--ohne-standort .kalender__termin--knopf { padding-right: 3.5rem; }
    .kalender__eintragen, .kalender--ohne-standort .kalender__eintragen { top: auto; }
    .kalender__termin.kalender__termin--hervor { margin: 0 -.6rem; padding: .9rem .9rem .9rem .6rem; }
    .kalender--ohne-standort .kalender__termin.kalender__termin--hervor.kalender__termin--knopf { padding-right: 4.1rem; }
    .kalender__termin.kalender__termin--hervor .kalender__eintragen { right: .9rem; bottom: .9rem; }
    .kalender__termin:not(.kalender__termin--hervor) .kalender__eintragen { bottom: 0; }
    .kalender__liste--eintragen { top: auto; bottom: calc(100% + .5rem); min-width: min(17rem, calc(100vw - 4rem)); }
  }
}

/* Startseiten-Hinweise (ab 0.29.0, E83): Karte unter der Einleitung im Hero
   der Startseite und im Seitenkopf der Standortseite. Ebene „seiten“, damit
   die Regeln der Startseite (.bk h2, .bk p) nicht vorgehen. */
@layer seiten {
  .hw { max-width: 46rem; margin-top: 2rem; }
  .hw .hw__eintrag { --hw-grund: var(--stein); --hw-text: var(--braun); --hw-art: var(--rot-flaeche); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; align-content: center; align-items: start; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--hw-grund); color: var(--hw-text); }
  .hw .hw__eintrag--wichtig { --hw-grund: var(--braun); --hw-text: var(--papier); --hw-art: var(--papier); }
  .hw .hw__eintrag--ausfall { --hw-grund: var(--rot-marke); --hw-text: var(--papier); --hw-art: var(--papier); }
  .hw .hw__eintrag[hidden] { display: none; }
  .hw .hw__eintrag--bild { grid-template-columns: auto minmax(0, 1fr); }
  /* Bild und Text (ab 0.29.1): Ist der Text höher als das Bild, steht das Bild oben bündig mit dem
     Kennzeichen der Art; ist das Bild höher, steht der Text mittig neben dem Bild. */
  .hw .hw__bild { align-self: start; }
  .hw .hw__eintrag--bild .hw__inhalt { align-self: center; }
  .hw .hw__bild img { display: block; width: 7rem; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) * .7); }
  .hw .hw__art { display: flex; width: fit-content; align-items: center; gap: .45rem; margin: 0 0 .35rem; color: var(--hw-art); font-size: .95rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
  .hw .hw__art::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
  .hw .hw__eintrag--wichtig .hw__art::before { background: var(--rot-marke); }
  .hw .hw__titel { margin: 0; color: inherit; font-size: 1.75rem; font-weight: 800; line-height: 1.05; }
  .hw .hw__text { max-width: 40rem; margin: .5rem 0 0; color: inherit; font-size: var(--text-s); line-height: 1.35; }
  .hw .hw__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .45rem 1.1rem; border: 2px solid currentColor; border-radius: 999px; color: inherit; font-size: var(--text-s); font-weight: 700; text-decoration: none; transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .hw .hw__link::after { content: "→"; }
  .hw .hw__link:hover, .hw .hw__link:focus-visible { background: var(--hw-text); color: var(--hw-grund); }
  .hw .hw__link:focus-visible { outline: 3px solid var(--hw-text); outline-offset: 3px; }
  /* Bedienung nach dem Vorbild der Apple-Galerien, ohne Hintergrundflächen (ab 0.29.1):
     Punkte 8 px, der aktive als Strich, der sich in 8 Sekunden füllt; Anhalten als Zeichen ohne Kreis.
     Trefferfläche je 44 × 44 px bzw. 24 × 44 px. Alle Hinweise in derselben Zelle: Karte so hoch wie der höchste. */
  .hw__spur { display: grid; }
  .hw [data-hw-js] .hw__eintrag { grid-area: 1 / 1; }
  /* Übergang „Karte bleibt, Inhalt rollt“ (ab 0.29.2, Entscheidung Martin nach fünf Entwürfen,
     mockups/hinweis-uebergaenge/): Die Fläche liegt auf der Spur und wechselt ihre Farbe weich zur
     neuen Art; die Zeilen des alten Hinweises rollen nacheinander nach oben weg, die des neuen von unten herein. */
  .hw [data-hw-js] { border-radius: var(--radius); background-color: var(--stein); transition: background-color .8s var(--kurve); }
  .hw [data-hw-js][data-hw-art="wichtig"] { background-color: var(--braun); }
  .hw [data-hw-js][data-hw-art="ausfall"] { background-color: var(--rot-marke); }
  .hw [data-hw-js] .hw__eintrag { background: transparent; transition: visibility 0s linear 0s; }
  .hw [data-hw-js] .hw__eintrag[hidden] { display: grid; visibility: hidden; transition: visibility 0s linear .9s; }
  .hw [data-hw-js] .hw__eintrag :is(.hw__bild, .hw__art, .hw__titel, .hw__text, .hw__link) { transition: opacity .45s var(--kurve), transform .55s var(--kurve), filter .45s var(--kurve), background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .hw [data-hw-js] .hw__eintrag[hidden] :is(.hw__bild, .hw__art, .hw__titel, .hw__text, .hw__link) { opacity: 0; transform: translateY(1.2rem); filter: blur(4px); }
  .hw [data-hw-js] .hw__eintrag.hw__eintrag--geht :is(.hw__bild, .hw__art, .hw__titel, .hw__text, .hw__link) { transform: translateY(-1.2rem); }
  .hw [data-hw-js] .hw__eintrag--geht .hw__art { transition-delay: .04s; }
  .hw [data-hw-js] .hw__eintrag--geht .hw__titel { transition-delay: .08s; }
  .hw [data-hw-js] .hw__eintrag--geht .hw__text { transition-delay: .12s; }
  .hw [data-hw-js] .hw__eintrag--geht .hw__link { transition-delay: .16s; }
  .hw [data-hw-js] .hw__eintrag--kommt .hw__bild { transition-delay: .35s; }
  .hw [data-hw-js] .hw__eintrag--kommt .hw__art { transition-delay: .42s; }
  .hw [data-hw-js] .hw__eintrag--kommt .hw__titel { transition-delay: .49s; }
  .hw [data-hw-js] .hw__eintrag--kommt .hw__text { transition-delay: .56s; }
  .hw [data-hw-js] .hw__eintrag--kommt .hw__link { transition-delay: .63s; }
  .hw__steuerung { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: .5rem; }
  .hw__punkte { display: flex; align-items: center; }
  .hw__punkt { display: grid; place-items: center; width: 1.5rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; transition: width .5s var(--kurve); }
  .hw__punkt.ist-aktiv { width: 2.75rem; }
  .hw__punkt::before { content: none; }
  .hw__fortschritt { position: relative; display: block; overflow: hidden; width: .5rem; height: .5rem; border-radius: 999px; background: var(--braun-75); opacity: .45; transition: width .5s var(--kurve), opacity .3s var(--kurve); }
  .hw__punkt:hover .hw__fortschritt { opacity: .75; }
  .hw__punkt.ist-aktiv .hw__fortschritt { width: 2rem; opacity: 1; background: color-mix(in srgb, var(--braun) 22%, transparent); }
  .hw__fortschritt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--braun); transform: scaleX(0); transform-origin: left center; }
  .hw__punkt.ist-aktiv .hw__fortschritt::after { transform: scaleX(1); }
  .hw__punkt.ist-aktiv.laeuft .hw__fortschritt::after { animation: hw-fortschritt 8s linear forwards; }
  .hw.ist-gehalten .hw__punkt.ist-aktiv.laeuft .hw__fortschritt::after { animation-play-state: paused; }
  @keyframes hw-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hw__punkt:focus-visible, .hw__pause:focus-visible { outline: 3px solid var(--rot-marke); outline-offset: -6px; border-radius: 999px; }
  .hw__pause { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--braun); opacity: .75; cursor: pointer; transition: opacity .3s var(--kurve); }
  .hw__pause:hover { opacity: 1; }
  .hw__pause svg { width: 1.25rem; height: 1.25rem; }
  @media (prefers-reduced-motion: reduce) {
    .hw [data-hw-js], .hw [data-hw-js] .hw__eintrag, .hw [data-hw-js] .hw__eintrag[hidden], .hw [data-hw-js] .hw__eintrag :is(.hw__bild, .hw__art, .hw__titel, .hw__text, .hw__link), .hw__punkt, .hw__fortschritt { transition: none; transition-delay: 0s; }
  }
  @media (max-width: 48rem) {
    .hw .hw__eintrag { padding: 1.25rem 1.25rem; }
    .hw .hw__bild img { width: 4.5rem; }
    .hw .hw__titel { font-size: 1.4rem; }
  }
}

/* -----------------------------------------------------------------------------
   Seiten im Aufbau (ab 0.34.0, E88, Variante B, Entscheidung Martin 05.11.2026):
   Einträge in Hauptnavigation, Menü, Unterseiten-Navigation und Fuß grau mit
   dem Zusatz „· bald“, als deaktivierter Link ohne href; Karten und Kacheln
   ganz grau ohne Link, „Bald verfügbar“ statt „Mehr erfahren“. Einträge sind
   deaktivierte Links (inaktive Bedienelemente, WCAG 1.4.3 ausgenommen). Die
   Karten haben bewusst nur 2,8 : 1 Kontrast (Entscheidung Martin 05.11.2026,
   wie im Mockup). Einstellung in content/im-aufbau.php.
   ----------------------------------------------------------------------------- */
@layer komponenten {
  a.bald,
  :is(.navigation, .navigation-mobil__panel, .geschwister, .fuss) a.bald,
  :is(.navigation, .navigation-mobil__panel, .geschwister, .fuss) a.bald:is(:hover, [aria-current]) {
    color: #A0958F; cursor: default; white-space: nowrap; text-decoration: none; font-weight: 400; border-bottom-color: transparent;
  }
  .fuss a.bald, .fuss a.bald:is(:hover, [aria-current]) { color: #8A7E79; }
  .bald__zusatz { margin-left: 0.35em; font-size: 0.78em; color: var(--braun-75); }
  .bald__zusatz::before { content: "· "; }

  .bald-karte { filter: grayscale(1); opacity: 0.5; }
  .bald-karte .karte__mehr::after { content: none; }
  .bald-karte .karte__mehr,
  .karte.bald-karte:hover .karte__mehr { color: var(--braun); }
  .bald-schild { display: inline-block; font-weight: 600; letter-spacing: 0.04em; color: var(--braun); }
  .bk-ort.bald-karte .bald-schild { padding-top: 0.5rem; }
}