/* =============================================================================
   Startseite „Bildkapitel“ (E33, ab 0.10.0; aus Entwurf 1 der Version 0.9.0)
   Vollflächige Bilder bleiben stehen (sticky), Textkarten gleiten darüber.
   Rot nur auf Weiß (E28), Leitsatz gleichberechtigt (E30).
   ============================================================================= */

@layer seiten {

  .bk { --bk-kante: clamp(1.25rem, 4vw, 4rem); overflow-x: clip; }
  .bk h2 { font-size: var(--titel-m); font-weight: 800; line-height: 1; }
  .bk p { max-width: 36rem; }

  /* Hero: Leitsatz auf Weiß, darunter Bild über die ganze Breite ------------ */
  .bk-hero__text {
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 7rem) var(--bk-kante) clamp(2rem, 4vw, 3.5rem);
  }
  .bk-hero__titel {
    color: var(--rot-tief);
    font-size: clamp(3.25rem, 1rem + 8.5vw, 9.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.015em;
  }
  .bk-hero__titel .bk-hero__zeile { display: block; width: fit-content; }
  .bk-hero__titel .bk-hero__wort { display: inline-block; }
  .bk-hero__einleitung { margin-top: 2rem; font-size: var(--text-l); font-weight: 400; line-height: 1.3; }
  /* Heute bei uns / Als Nächstes (E82, ab 0.28.0): Link auf /termine unter der Einleitung */
  /* Ab 0.29.3 so breit wie die Hinweis-Karte (46 rem) mit deren Eckenradius, Pfeil rechts außen (Entscheidung Martin, mockups/hero-hinweis-termine/, Variante 1) */
  .bk-jetzt { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; width: 100%; max-width: 46rem; margin-top: 2rem; padding: .8rem 1.2rem .8rem .8rem; border-radius: var(--radius); background: var(--stein); color: var(--braun); font-size: var(--text-s); text-decoration: none; transition: background-color var(--dauer) var(--kurve); }
  .bk-jetzt:hover, .bk-jetzt:focus-visible { background: var(--stein-tief); }
  .bk-jetzt__marke { padding: .35rem .9rem; border-radius: 999px; background: var(--braun); color: var(--papier); font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .bk-jetzt__marke--heute { background: var(--rot-marke); }
  .bk-jetzt__liste { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
  .bk-jetzt__termin { display: inline-flex; align-items: center; gap: .45rem; }
  .bk-jetzt__termin strong { font-weight: 700; }
  .bk-jetzt__pfeil { margin-left: auto; color: var(--rot-tief); font-weight: 700; }
  @media (max-width: 48rem) {
    .bk-jetzt__pfeil { display: none; }
  }
  .bk-hero__bild { overflow: hidden; }
  .bk-hero__bild img { width: 100%; height: min(78vh, 56vw); object-fit: cover; }

  /* Kapitel: Bild klebt, Karte gleitet ---------------------------------------- */
  /* Ab 0.13.3: Karte gleitet über das stehende Bild und endet weit oben im Bild;
     unten ragen nur rund 15 % der Karte heraus (--versatz, Wunsch Martin). Der
     Überstand entsteht per transform und verändert das Layout nicht. */
  /* Überstand der Karte ab 0.18.3 fest 5 rem statt 15 % der Kartenhöhe (E59): Die Kante
     zwischen Stein und dem folgenden Abschnitt liegt mittig zwischen Kartenunterkante
     und dem nächsten Inhalt; dafür muss der Überstand eine feste Länge haben. */
  .bk-kapitel { --versatz: 5rem; --bk-luft: calc(var(--abstand-abschnitt) / 2); position: relative; display: grid; padding-bottom: calc(var(--versatz) + var(--bk-luft)); background: var(--stein); --rot-tief: var(--rot-flaeche); }
  .bk-kapitel + .bk-zitat { padding-top: calc(var(--abstand-abschnitt) / 2); }
  /* Höhe ab 0.13.4: höchstens Bildschirmhöhe, sonst Seitenverhältnis 16:9 (Wunsch Martin:
     Bilder hinter den Karten nicht zu hoch) */
  .bk-kapitel__bild { grid-area: 1 / 1; position: sticky; top: var(--kopf-hoehe); height: min(calc(100vh - var(--kopf-hoehe)), 56.25vw); overflow: hidden; }
  /* picture als Block mit voller Höhe (ab 0.13.3): sonst ist das Bild bei schmaleren
     Fenstern nur so hoch wie sein Seitenverhältnis und darunter bleibt ein grauer Streifen */
  .bk-kapitel__bild picture { display: block; height: 100%; }
  .bk-kapitel__bild img { width: 100%; height: 100%; object-fit: cover; }
  /* Hülle aus Karte und Sprechblasen-Spitze (ab 0.21.1, E72): übernimmt Lage und
     Hineingleiten; Karte und Spitze sind Geschwister, damit beide das Foto unscharf zeigen */
  .bk-kapitel__huelle {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    position: relative;
    width: min(32rem, calc(100% - 2 * var(--bk-kante)));
    margin: 70vh 0 0 var(--bk-kante);
    transform: translate3d(0, var(--versatz), 0);
  }
  .bk-kapitel__karte {
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--papier);
  }
  .bk-kapitel--rechts .bk-kapitel__huelle { justify-self: end; margin-right: var(--bk-kante); }
  .bk-kapitel__karte h2 { margin-bottom: 1.25rem; }

  /* 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))) {
    .bk-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) {
    .bk-kapitel__karte { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .bk-kapitel__nr {
    margin-bottom: 0.75rem;
    color: var(--rot-tief);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Zahlenband ---------------------------------------------------------------- */
  .bk-zahlen { background: var(--braun); color: var(--papier); }
  .bk-zahlen ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) var(--bk-kante);
    list-style: none;
  }
  .bk-zahlen strong {
    display: block;
    color: var(--rot);
    font-size: clamp(3.5rem, 2rem + 5vw, 7rem);
    font-weight: 800;
    line-height: 0.9;
  }
  .bk-zahlen li > span { display: block; margin-top: 0.75rem; font-size: var(--text-l); line-height: 1.2; }

  /* Zitat --------------------------------------------------------------------- */
  .bk-zitat {
    max-width: var(--breite);
    margin: 0 auto;
    padding: var(--abstand-abschnitt) var(--bk-kante);
  }
  .bk-zitat figure {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    /* ab 0.15.7: Quelle als rote Oberzeile über dem Zitat (Wunsch Martin),
       beides mittig neben dem Bild */
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0 clamp(2rem, 6vw, 6rem);
    margin: 0;
  }
  .bk-zitat__bild { grid-column: 1; grid-row: 1 / -1; }
  .bk-zitat figcaption { grid-column: 2; grid-row: 2; }
  .bk-zitat blockquote { grid-column: 2; grid-row: 3; }
  /* Querformat 5:4 statt Hochformat 4:5 (ab 0.19.5, E65) */
  .bk-zitat__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 50%; }
  .bk-zitat blockquote { margin: 0; }
  .bk-zitat blockquote p {
    max-width: none;
    font-size: var(--titel-s);
    font-weight: 400;
    line-height: 1.2;
  }
  .bk-zitat blockquote p::before { content: "„"; color: var(--rot-tief); font-weight: 800; }
  .bk-zitat blockquote p::after { content: "“"; color: var(--rot-tief); font-weight: 800; }
  .bk-zitat figcaption { margin-bottom: 1rem; color: var(--rot-tief); font-size: var(--text-s); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

  /* Angebote: waagrechter Bildstreifen --------------------------------------- */
  .bk-angebote { padding: var(--abstand-abschnitt) 0; background: var(--stein); --rot-tief: var(--rot-flaeche); }
  .bk-angebote__kopf { max-width: var(--breite); margin: 0 auto; padding: 0 var(--bk-kante) 2.5rem; }
  /* Akkordeon (ab 0.13.2): schmale Bildstreifen, der gewählte öffnet sich */
  .bk-akkordeon {
    display: flex;
    gap: 0.5rem;
    height: clamp(24rem, 60vh, 36rem);
    max-width: calc(var(--breite) + 2 * var(--bk-kante));
    margin: 0 auto;
    padding: 0 var(--bk-kante);
    list-style: none;
  }
  .bk-akkordeon__streifen { flex: 1 1 0; min-width: 0; transition: flex-grow 0.6s var(--kurve); }
  .bk-akkordeon__streifen.ist-aktiv { flex-grow: 7; }
  .bk-akkordeon__knopf {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--braun);
    color: var(--papier);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .bk-akkordeon__bild { position: absolute; inset: 0; }
  .bk-akkordeon__bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.8); transition: filter 0.5s ease; }
  .bk-akkordeon__streifen.ist-aktiv .bk-akkordeon__bild img { filter: none; }
  .bk-akkordeon__knopf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(30 20 17 / 0.8)); }
  .bk-akkordeon__titel {
    position: absolute;
    z-index: 1;
    left: 1.25rem;
    bottom: 1.25rem;
    font-size: var(--titel-s);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    transform-origin: left bottom;
    transform: rotate(-90deg) translate(0, 100%);
    transition: transform 0.5s var(--kurve);
  }
  .bk-akkordeon__text {
    position: absolute;
    z-index: 1;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    width: var(--text-breite, auto);
    max-width: 30rem;
    font-size: var(--text-m);
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.4s ease, transform 0.5s var(--kurve), visibility 0s linear 0.4s;
  }
  /* Wie im Entwurf: der Titel dreht sich aus der Senkrechten und steigt über den Text;
     die Höhe des Textes misst start.js (--texthoehe), damit sich nichts überlappt */
  .bk-akkordeon__streifen.ist-aktiv .bk-akkordeon__titel { transform: translateY(calc(-1 * var(--texthoehe, 3.4rem) - 0.5rem)); }
  .bk-akkordeon__streifen.ist-aktiv .bk-akkordeon__text { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s ease 0.25s, transform 0.5s var(--kurve) 0.25s, visibility 0s; }
  .bk-akkordeon__knopf:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 3px; }
  /* Steuerung per Scrollen (ab 0.13.5): Am Desktop bleibt das Akkordeon stehen,
     der Scrollweg (ein Drittel Bildschirmhöhe je Angebot) öffnet die Streifen
     nacheinander; --anzahl setzt start.js. Ohne JavaScript keine Zusatzhöhe. */
  /* Ab 0.13.6 steht die Überschrift mit dem Akkordeon in der Bühne und bleibt
     sichtbar; --angebote-kopf (Höhe der Überschrift) misst start.js. */
  .bk-akkordeon-fahrt {
    --angebote-kopf: 7rem;
    --akk-hoehe: clamp(20rem, calc(100vh - var(--kopf-hoehe) - var(--angebote-kopf) - 3rem), 36rem);
  }
  @media (min-width: 48.01rem) {
    .bk-akkordeon-fahrt.ist-aktiv { height: calc(var(--angebote-kopf) + var(--akk-hoehe) + var(--anzahl, 0) * 33vh); }
    .bk-akkordeon-fahrt.ist-aktiv .bk-akkordeon-buehne {
      position: sticky;
      top: calc(var(--kopf-hoehe) + max(1.5rem, (100vh - var(--kopf-hoehe) - var(--angebote-kopf) - var(--akk-hoehe)) / 2));
    }
    .bk-akkordeon { height: var(--akk-hoehe); }
  }
  @media (max-width: 48rem) {
    /* Smartphone: Überschrift bleibt unter dem Seitenkopf stehen, die Streifen laufen darunter */
    .bk-akkordeon-fahrt.ist-aktiv .bk-angebote__kopf {
      position: sticky;
      top: var(--kopf-hoehe);
      z-index: 2;
      padding-top: 1rem;
      padding-bottom: 1rem;
      margin-bottom: 1.5rem;
      background: var(--stein);
    }
    .bk-angebote:has(.bk-akkordeon-fahrt.ist-aktiv) { padding-top: calc(var(--abstand-abschnitt) - 1rem); }
    .bk-akkordeon { flex-direction: column; height: auto; }
    .bk-akkordeon__streifen { flex: none; height: 4.5rem; transition: height 0.5s var(--kurve); }
    .bk-akkordeon__streifen.ist-aktiv { height: 22rem; }
    .bk-akkordeon__titel,
    .bk-akkordeon__streifen.ist-aktiv .bk-akkordeon__titel { top: 1.4rem; bottom: auto; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bk-akkordeon__streifen, .bk-akkordeon__titel, .bk-akkordeon__text, .bk-akkordeon__bild img { transition: none; }
  }

  /* Standorte (ab 0.15.3): je Standort eine Zeile, Text links, Bilder rechts,
     Zeilen durch eine Linie getrennt; Heidelberg ohne Bilder */
  .bk-standorte { padding: var(--abstand-abschnitt) 0; }
  .bk-standorte__titel { max-width: var(--breite); margin: 0 auto clamp(2rem, 4vw, 3rem); padding: 0 var(--bk-kante); }
  .bk-standorte .bk-orte { max-width: var(--breite); margin: 0 auto; padding: 0 var(--bk-kante); list-style: none; }
  .bk-ort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--stein);
  }
  .bk-ort:first-child { border-top: 0; padding-top: 0; }
  .bk-ort--ohne-bilder { grid-template-columns: minmax(0, 1fr); }
  .bk-ort__text h3 { font-size: var(--titel-m); font-weight: 800; line-height: 1; }
  .bk-ort__zeile { margin: 0.4rem 0 0.75rem; color: var(--rot-tief); font-weight: 600; }
  /* Knöpfe gleich groß über .knopfgruppe (wanted.css, ab 0.15.7) */
  .bk-ort__links { --knoepfe: 1; margin-top: 1.5rem; }
  .bk-standorte .bk-ort__bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
  .bk-ort__bilder li { border-radius: var(--radius); overflow: hidden; }
  .bk-ort__bilder img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .bk-ort__bild--links img { object-position: 38% 50%; }
  /* Heidelberg ohne Fotos: Base-Logo auf brauner Fläche, so hoch wie die
     Bilderreihe von Marzahn (ab 0.15.6) */
  .bk-ort__logo { display: grid; place-items: center; aspect-ratio: 9 / 4; border-radius: var(--radius); background: var(--braun); }
  .bk-ort__logo img { width: 42%; height: auto; }
  @media (max-width: 48rem) {
    .bk-ort { grid-template-columns: minmax(0, 1fr); }
    .bk-standorte .bk-ort__bilder { gap: 0.5rem; }
  }

  /* Förderer ------------------------------------------------------------------ */
  .bk-foerderer { background: var(--stein); --rot-tief: var(--rot-flaeche); }
  /* Ab 0.12.11 zweispaltig: links Text und Buttons, rechts die Beträge als Karten */
  .bk-foerderer__innen {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
    align-items: center;
    max-width: var(--breite);
    margin: 0 auto;
    padding: var(--abstand-abschnitt) var(--bk-kante);
  }
  .bk-foerderer h2 { max-width: 20ch; margin-bottom: 1.5rem; }
  .bk-foerderer__text { margin-bottom: 2.5rem; font-size: var(--text-l); font-weight: 400; line-height: 1.3; }
  .bk-wirkung { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  .bk-wirkung li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--papier);
  }
  .bk-wirkung strong { display: block; color: var(--rot-tief); font-size: var(--titel-m); font-weight: 800; line-height: 1; white-space: nowrap; }
  .bk-wirkung li > span { display: block; }
  .bk-foerderer__knoepfe { gap: 1rem; }
  /* Partner als eigener Abschnitt auf Weiß (ab 0.12.11) */
  .bk-partnerbereich__innen { max-width: var(--breite); margin: 0 auto; padding: var(--abstand-abschnitt) var(--bk-kante); }
  .bk .bk-partner__titel { margin-bottom: 2rem; }
  .bk-partner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bk-partner li { display: grid; }
  .bk-partner a { display: grid; place-items: center; height: 7.5rem; padding: 1rem; }
  @media (max-width: 48rem) { .bk-partner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Logos einheitlich grau (gleiche Tonwerte durch Einfärben der Silhouette), farbig bei Hover/Fokus */
  .bk-partner img {
    max-width: 100%;
    height: auto;
    filter: brightness(0) opacity(0.45);
    transition: filter 0.3s ease, transform 0.3s ease;
  }
  /* Mehrfarbige Logos in Graustufen (ab 0.19.6, E67) */
  .bk-partner img.partnerlogo--graustufen { filter: grayscale(1) contrast(1.25) brightness(0.8) opacity(0.75); }
  .bk-partner a:hover img,
  .bk-partner a:focus-visible img { filter: brightness(1) opacity(1); transform: scale(1.04); }
  .bk-partner a:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: -3px; }
  .bk-partner__mehr { margin-top: 1.25rem; }
  @media (prefers-reduced-motion: reduce) {
    .bk-partner img { transition: none; }
    .bk-partner a:hover img,
    .bk-partner a:focus-visible img { transform: none; }
  }

  /* Schluss ------------------------------------------------------------------- */
  .bk-schluss { position: relative; display: grid; overflow: hidden; }
  .bk-schluss__bild { grid-area: 1 / 1; }
  .bk-schluss__bild img { width: 100%; height: min(90vh, 60vw); min-height: 28rem; object-fit: cover; object-position: 88% 50%; } /* Ausschnitt rechts, damit der Jugendliche auf schmalen Bildschirmen ganz sichtbar bleibt (ab 0.19.9) */
  .bk-schluss__text {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    max-width: none;
    margin: 0;
    padding: clamp(2rem, 6vw, 5rem) var(--bk-kante);
    color: var(--papier);
    font-size: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.02;
    /* Ab 0.19.8 (E68): ohne Verlauf dahinter, dafür dezenter Schatten am Text */
    text-shadow: 0 1px 2px rgb(30 20 17 / 0.35), 0 2px 24px rgb(30 20 17 / 0.45);
  }
  /* Jede Aussage eine Zeile; die lange dritte bricht ausgewogen um (ab 0.19.8) */
  .bk .bk-schluss__text { max-width: none; }
  .bk-schluss__text span { display: block; max-width: 15em; text-wrap: balance; }

  /* Bewegung ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    /* Leitsatz (E44, ab 0.15.2): start.js setzt data-leitsatz auf
       zueinander | stempel | bilder und danach .ist-gestartet */
    [data-leitsatz="zueinander"] .bk-hero__zeile { opacity: 0; transform: translateX(-40vw); }
    [data-leitsatz="zueinander"] .bk-hero__zeile + .bk-hero__zeile { transform: translateX(40vw); }
    [data-leitsatz="zueinander"].ist-gestartet .bk-hero__zeile {
      opacity: 1; transform: none;
      transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.6s ease 0.15s;
    }

    [data-leitsatz="stempel"] .bk-hero__zeile { opacity: 0; transform: scale(1.9) rotate(-4deg); transform-origin: 30% 60%; }
    [data-leitsatz="stempel"] .bk-hero__zeile + .bk-hero__zeile { transform: scale(1.9) rotate(4deg); }
    [data-leitsatz="stempel"].ist-gestartet .bk-hero__zeile {
      opacity: 1; transform: none;
      transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s, opacity 0.2s ease 0.2s;
    }
    [data-leitsatz="stempel"].ist-gestartet .bk-hero__zeile + .bk-hero__zeile { transition-delay: 0.7s; }

    /* Bildfüllung: jedes Wort mit eigenem Bild, das wandert; danach Rot */
    [data-leitsatz="bilder"] .bk-hero__wort {
      /* Ab 1.0.2: Die Wortbox ist wegen line-height 0.9 niedriger als die Schrift; der Hintergrund
         (background-clip: text) endet an der Box und schnitt die Unterlänge des „g“ ab. Innenabstand
         vergrößert die Fläche des Bilds, der negative Außenabstand gleicht ihn im Layout aus. */
      padding-block: 0.08em 0.24em;
      margin-block: -0.08em -0.24em;
      background: 0% 50% / 260% auto no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      opacity: 0;
    }
    [data-leitsatz="bilder"] .bk-hero__wort--1 { background-image: url("../bilder/gespraech-800.webp"); }
    [data-leitsatz="bilder"] .bk-hero__wort--2 { background-image: url("../bilder/leseecke-800.webp"); }
    [data-leitsatz="bilder"] .bk-hero__wort--3 { background-image: url("../bilder/essen-800.webp"); }
    [data-leitsatz="bilder"] .bk-hero__wort--4 { background-image: url("../bilder/kicker-nah-800.webp"); }
    [data-leitsatz="bilder"] .bk-hero__wort--5 { background-image: url("../bilder/wohnzimmer-runde-800.webp"); }
    [data-leitsatz="bilder"] .bk-hero__wort--6 { background-image: url("../bilder/andacht-800.webp"); }
    [data-leitsatz="bilder"].ist-gestartet .bk-hero__wort {
      opacity: 1;
      color: var(--rot-tief);
      background-position: 60% 50%;
      transition: opacity 0.8s ease, background-position 3.2s ease-out, color 1.2s ease 2.8s;
    }
    .bewegt .bk-hero__bild img { transform: scale(calc(1 + var(--p) * 0.12)); }
    .bewegt .bk-kapitel__huelle {
      --t: clamp(0, var(--p) / 0.18, 1);
      transform: translate3d(0, calc((1 - var(--t)) * 4rem + var(--versatz)), 0);
    }
    /* Deckkraft je Kind statt an der Hülle: eine halbtransparente Hülle würde die
       Unschärfe von Karte und Spitze ausschalten */
    .bewegt .bk-kapitel__huelle > * { opacity: var(--t); }
    .bewegt .bk-zahlen li {
      --t: clamp(0, (var(--p) - 0.1) / 0.3, 1);
      opacity: var(--t);
      transform: translate3d(0, calc((1 - var(--t)) * 2rem), 0);
    }
    .bewegt .bk-zitat blockquote {
      --t: clamp(0, (var(--p) - 0.1) / 0.35, 1);
      opacity: var(--t);
      transform: translate3d(calc((1 - var(--t)) * 3rem), 0, 0);
    }
    .bewegt .bk-schluss__bild img { transform: scale(calc(1.15 - var(--p) * 0.15)); }
  }

  /* Schmal -------------------------------------------------------------------- */
  @media (max-width: 64rem) {
    .bk-zahlen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-foerderer__innen { grid-template-columns: minmax(0, 1fr); }
    .bk-foerderer h2 { max-width: none; }
  }
  @media (max-width: 48rem) {
    .bk-hero__bild img { height: 60vh; }
    /* Bildkapitel auf schmalen Bildschirmen (ab 0.12.10): Bild im Querformat 3:2
       oben, ohne Stehenbleiben, Karte darunter leicht überlappend. Hochkant
       zugeschnitten blieben von den Querformatfotos nur rund 31 % sichtbar. */
    .bk-kapitel { --versatz: 0rem; padding-bottom: 0; }
    .bk-kapitel__bild { grid-area: 1 / 1; position: static; height: auto; }
    .bk-kapitel__bild img { height: auto; aspect-ratio: 3 / 2; }
    .bk-kapitel__huelle,
    .bk-kapitel--rechts .bk-kapitel__huelle { grid-area: 2 / 1; justify-self: stretch; width: auto; margin: -2.5rem var(--bk-kante) var(--bk-luft); }
    .bk-zitat figure { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0; }
    .bk-zitat__bild { grid-row: 1; margin-bottom: 1.5rem; }
    .bk-zitat figcaption, .bk-zitat blockquote { grid-column: 1; }
    .bk-wirkung li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1.25rem 1.5rem; }
  }

  /* Eckenradius für Bilder und Karten (ab 0.12.8); vollflächige Bilder bleiben eckig */
  :is(.bk-kapitel__karte, .bk-zitat__bild) { border-radius: var(--radius); overflow: hidden; }
}