/* Denk.Mal Unterseiten: gemeinsamer Fluss-Baukasten.
   Jede Seite setzt oben --akzent (eine Frisch-Farbe), der Rest folgt automatisch.
   Baut auf basis.css auf (Farbvariablen, .lauftext, .slab, section-overflow). */

:root { --akzent: var(--g-blau); }

/* ---- Hero-Band (Farbverlauf) ---- */
.seite-hero { min-height:56vh; display:flex; flex-direction:column; justify-content:center;
  padding:16vh 6vw 8vh; background:linear-gradient(180deg, var(--akzent) 0%, var(--grund) 100%); }
.seite-hero .eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--smaragd-text); }
.seite-hero h1 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.06;
  font-size:clamp(2.4rem,6vw,4.4rem); margin:.6rem 0 1.1rem; max-width:20ch; }
.seite-hero .intro { color:#2a1e15b0; font-size:1.06rem; }

/* ---- Hero mit Foto (Menschen-Auftakt) ---- */
.seite-hero.mit-foto { min-height:78vh; justify-content:flex-end; padding:16vh 0 0; background:var(--akzent); }
.seite-hero.mit-foto .hero-foto { position:absolute; inset:0; }
.seite-hero.mit-foto .hero-foto img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.seite-hero.mit-foto .hero-foto::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, #2a1e1524 0%, transparent 30%, transparent 46%, #2a1e15aa 100%); }
.seite-hero.mit-foto .hero-inhalt { position:relative; z-index:2; margin:0 0 7vh 5vw; width:min(34rem,88vw);
  background:#faf7f2ee; backdrop-filter:blur(4px); border-radius:20px; padding:2.3rem 2.5rem; }
.seite-hero.mit-foto .hero-inhalt h1 { margin:.4rem 0 0; }
/* Ein einzelnes langes Wort (englisch "Transparency") passt in der schmalen Fotokarte nicht in
   die Regelgroesse. Weil overflow-wrap:anywhere gilt, bricht es dann mitten im Wort, und der
   Typo-Waechter sieht es nicht, weil nichts ueberlaeuft. Diese Klasse nimmt genau dort etwas
   Groesse weg, auf allen vier Pruefbreiten gemessen. Nur setzen, wenn ein Wort sonst bricht. */
.seite-hero h1.langwort { font-size:clamp(1.9rem,5vw,3.9rem); }
/* Zweite Stufe fuer sehr lange Titel („2. Internationaler Celler
   Weihnachtsmarkt"): In der schmalen Fotokarte brach der Satz in sechs Zeilen
   und zweimal mitten im Wort. Ein Titel darf lang sein, aber er soll nicht
   buchstabieren. Gemessen an der Karte: bei 542 px Innenbreite passt
   „Weihnachtsmarkt" bis 61 px, „Celler Weihnachtsmarkt" bis rund 40 px.
   Deshalb hier hoechstens 2,6 rem, und keine automatische Trennung mehr. */
.seite-hero h1.langer-titel { font-size:clamp(1.7rem,3.2vw,2.6rem); max-width:26ch; hyphens:manual; }
/* Die Zeile darunter braucht wieder Luft: bei kleinerer Schrift klebte der
   Termin am Titel, weil der Abstand vorher aus der Schriftgroesse kam. */
.seite-hero h1.langer-titel + .claim { margin-top:.55rem; }
.seite-hero.mit-foto .hero-inhalt .intro { margin-top:.9rem; }
.seite-hero.mit-foto .fotocredit { position:absolute; right:1.6vw; bottom:1.1vh; z-index:2; font-size:.7rem; color:#faf7f2cc; }
.seite-hero.mit-foto.kompakt { min-height:54vh; }
.seite-hero.mit-foto .hero-inhalt .meta { font-size:.85rem; color:var(--grau); margin-top:.8rem; }
@media (max-width:800px) { .seite-hero.mit-foto { min-height:82vh; } .seite-hero.mit-foto.kompakt { min-height:60vh; } .seite-hero.mit-foto .hero-inhalt { margin:0 4vw 5vh; } }

/* ---- Textband (ruhige Erzählstrecke) ---- */
.band { padding:9vh 6vw; }
.band + .band { padding-top:0; }
.band-farbe { padding:11vh 6vw; }
.band h2, .band-farbe h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.1;
  font-size:clamp(1.8rem,4vw,2.9rem); margin-bottom:.8rem; }
.band .lauftext + h2, .band-farbe .lauftext + h2 { margin-top:2.4rem; }

/* ---- Zweispalt: Illustration + Text ---- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; padding:10vh 6vw; }
.split:nth-of-type(even) .split-ill { order:2; }
.split-ill img { display:block; width:min(460px,86%); margin:0 auto; }
.split-txt h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.1;
  font-size:clamp(1.8rem,4vw,2.9rem); margin-bottom:.8rem; }
/* Foto statt Illustration: fuellt die Spalte, Illustrationen bleiben klein und zentriert */
.split-ill.split-foto img { width:100%; margin:0; border-radius:20px; aspect-ratio:4/3;
  object-fit:cover; box-shadow:0 16px 44px #2a1e1520; }
/* Element, das im Zweispalter ueber die volle Breite laeuft (z. B. die Bildlaufleiste).
   min-width:0 ist noetig, sonst waechst das Raster-Kind auf die Inhaltsbreite statt zu scrollen.
   order:3 haelt sie hinter Bild und Text, sonst schiebt sie sich zwischen die Spalten. */
.split-voll { grid-column:1 / -1; min-width:0; order:3; }
/* Bei langen Textspalten oben ausrichten statt mittig, sonst rutscht das Foto in die Mitte.
   Bewusst NICHT sticky: ein klebendes Foto bleibt stehen, waehrend die Bildlaufleiste
   darunter durchwandert, und beide ueberlagern sich. */
.split.oben { align-items:start; }
@media (max-width:860px) { .split { grid-template-columns:1fr; gap:3vh; } .split:nth-of-type(even) .split-ill { order:0; }
}

/* ---- Bildlaufleiste (Haus, Orte): waagerecht, ohne Beschnitt ---- */
.laufleiste { position:relative; margin:3vh 0 0; min-width:0; }
/* proximity statt mandatory: bei mandatory bricht Chrome weiches Scrollen ab und
   springt auf den naechsten Schnappunkt zurueck, die Knoepfe waeren wirkungslos. */
.laufleiste-spur { display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding:.4rem .2rem 1.2rem; scrollbar-width:thin; min-width:0; }
.laufleiste-spur:focus-visible { outline:3px solid var(--g-pink,#c2185b); outline-offset:4px; border-radius:20px; }
.laufleiste-bild { margin:0; flex:0 0 auto; scroll-snap-align:center; }
/* Hoehe fest, Breite aus dem Seitenverhaeltnis: nichts wird beschnitten. Die
   width/height-Attribute am Bild liefern das Verhaeltnis schon vor dem Laden. */
.laufleiste-bild img { display:block; height:min(52vh,420px); width:auto; max-width:none;
  border-radius:18px; box-shadow:0 14px 38px #2a1e151f; }
.laufleiste-bild figcaption { font-size:.8rem; color:var(--grau); margin-top:.55rem; max-width:42ch; }
.laufleiste-knopf { position:absolute; top:calc(min(52vh,420px) / 2); transform:translateY(-50%);
  width:3rem; height:3rem; border:0; border-radius:50%; cursor:pointer; background:#fffffff2;
  color:var(--espresso); font-size:1.7rem; line-height:1; box-shadow:0 6px 20px #2a1e1530;
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.laufleiste-knopf:hover { transform:translateY(-50%) scale(1.08); }
.laufleiste-knopf[hidden] { display:none; }
.laufleiste-knopf.zurueck { left:-.6rem; }
.laufleiste-knopf.vor { right:-.6rem; }
@media (max-width:860px) { .laufleiste-bild img { height:min(40vh,300px); }
  .laufleiste-knopf { top:calc(min(40vh,300px) / 2); } }

/* ---- Kapitelkopf: die Gliederung von der Programme-Seite, seitenuebergreifend ----
   Aufbau: Ziffer (N°01) · grosse Ueberschrift · Unterzeile in Smaragd · Text.
   Als .kapitelkopf.klein in Kacheln, sonst in voller Abschnittsbreite. */
.kapitelkopf .nr { display:block; font-family:'Museo Slab',Georgia,serif; font-size:1rem;
  color:#2a1e1570; letter-spacing:.02em; }
.kapitelkopf h2, .kapitelkopf h3 { font-family:'Museo Slab',Georgia,serif; font-weight:500;
  line-height:1.06; font-size:clamp(2rem,4.4vw,3.4rem); margin:.2rem 0 .3rem; }
.kapitelkopf .claim { font-family:'Museo Slab',Georgia,serif; color:var(--smaragd-text);
  font-size:1.1rem; line-height:1.35; margin-bottom:1rem; }
.kapitelkopf .body, .kapitelkopf .lauftext { color:#2a1e15cc; font-size:.98rem; }
/* Kachelgroesse: gleiche Gliederung, nur leiser */
.kapitelkopf.klein h2, .kapitelkopf.klein h3 { font-size:clamp(1.5rem,2.4vw,2.1rem); }
.kapitelkopf.klein .nr { font-size:.88rem; }
.kapitelkopf.klein .claim { font-size:.98rem; margin-bottom:.75rem; }

/* ---- Journal-Strecke: Datumsspalte, Kapitelkopf, Vorschaubild ----
   Jeder Beitrag bekommt eine eigene Farbe aus dem Frisch-Farbraum. */
.journalliste { list-style:none; margin:0; padding:0; display:grid; gap:1.6rem; }
.j-zeile { --jf:var(--g-papier); border-radius:22px; background:var(--jf); overflow:hidden; }
.j-zeile:nth-child(6n+1){ --jf:var(--g-rosa); }
.j-zeile:nth-child(6n+2){ --jf:var(--g-blau); }
.j-zeile:nth-child(6n+3){ --jf:var(--g-vanille); }
.j-zeile:nth-child(6n+4){ --jf:var(--g-blush); }
.j-zeile:nth-child(6n+5){ --jf:var(--sonne); }
.j-zeile:nth-child(6n+6){ --jf:var(--g-papier); }
.j-link { display:grid; grid-template-columns:5.5rem minmax(0,1fr) 20rem; gap:2rem; align-items:center;
  padding:2.2rem 2.6rem; color:var(--espresso); text-decoration:none;
  transition:transform .35s cubic-bezier(.22,.8,.3,1); }
.j-zeile:hover .j-link { transform:translateY(-3px); }
.j-datum { text-align:center; line-height:1.1; }
.j-tag { display:block; font-family:'Museo Slab',Georgia,serif; font-size:2.6rem; }
.j-mj { display:block; font-size:.72rem; color:#2a1e15a0; margin-top:.2rem; }
.j-mitte h2 { margin-top:.15rem; }
.j-mitte .body { margin-top:.2rem; }
.j-bild img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px;
  box-shadow:0 10px 30px #2a1e1522; }
/* Illustrationen nie beschneiden und nicht in einen Bildkasten sperren */
.j-bild.ist-illu img { aspect-ratio:auto; object-fit:contain; box-shadow:none; background:transparent; }
@media (max-width:900px) {
  .j-link { grid-template-columns:4rem minmax(0,1fr); gap:1.2rem; padding:1.8rem 1.6rem; }
  .j-bild { grid-column:1 / -1; }
  .j-tag { font-size:2rem; }
}

/* ---- Terminkalender: Monatstrenner, Filterpillen, farbige Terminkarten ---- */
.terminfilter { display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 3.5rem; }
.tf-pille { font:inherit; font-size:.92rem; font-weight:700; border:2px solid var(--espresso);
  background:transparent; color:var(--espresso); border-radius:999px; padding:.5rem 1.3rem;
  cursor:pointer; transition:background .2s ease, color .2s ease, transform .2s ease; }
.tf-pille:hover { transform:translateY(-2px); }
.tf-pille.aktiv { background:var(--espresso); color:var(--grund); }
.terminmonat { margin:0 0 3.5rem; }
.terminmonat[hidden] { display:none; }
.monatstitel { font-family:'Museo Slab',Georgia,serif; font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem);
  border-top:2px solid #2a1e1526; padding-top:1rem; margin:0 0 1.6rem; }
.terminliste { display:grid; gap:1.3rem; }
.terminkarte { display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1.8rem; align-items:start;
  background:var(--tf,var(--g-papier)); border-radius:20px; padding:2rem 2.4rem; }
.terminkarte[hidden] { display:none; }
.terminkarte.ist-vorbei { opacity:.55; }
.tk-datum { text-align:center; line-height:1.05; padding-top:.3rem; }
.tk-tag { display:block; font-family:'Museo Slab',Georgia,serif; font-size:2.7rem; }
.tk-monat { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:#2a1e15a0; margin-top:.25rem; }
.tk-text .nr { display:flex; align-items:center; gap:.35rem; }
.tk-text .pin { color:var(--smaragd-text); font-size:.7em; }
/* Der Fliesstext bleibt lesbar breit, auch wenn die Karte ueber die volle Seite geht */
.tk-text .body { margin-top:.3rem; max-width:68ch; }
.tk-text .body :global(p) { margin-bottom:.6rem; }
@media (max-width:700px) {
  .terminkarte { grid-template-columns:1fr; gap:.9rem; padding:1.6rem 1.5rem; }
  .tk-datum { text-align:left; display:flex; align-items:baseline; gap:.5rem; }
  .tk-tag { font-size:2rem; }
  .tk-monat { margin-top:0; }
}

/* ---- Karten-Raster (Menschen, Partner, Projekte, Journal, Wege) ---- */
.karten { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap:1.6rem; }
/* Breite Variante: zwei statt drei Spalten, damit der Text so breit laeuft wie
   auf der Programme-Seite (dort rund 550 px). Fuer Projekte und Journal. */
.karten.breit { grid-template-columns:repeat(auto-fit, minmax(min(460px,100%), 1fr)); gap:2rem; }
.karten.breit .karte-neu { padding:2.6rem 2.8rem; }
.karte-neu { background:#ffffffb3; border-radius:18px; padding:2.1rem 2.2rem; position:relative; min-width:0;
  transition:transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
.karte-neu:hover { transform:translateY(-4px); box-shadow:0 14px 40px #2a1e1518; }
.karte-neu h2, .karte-neu h3 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.22;
  font-size:1.3rem; margin-bottom:.55rem; }
.karte-neu .marke { margin-bottom:1.15rem; }
.karte-neu .marke + h2, .karte-neu .marke + h3 { margin-top:1.15rem; }
.karte-neu h2 a, .karte-neu h3 a { color:var(--espresso); text-decoration:none; }
.karte-neu h2 a:hover, .karte-neu h3 a:hover { color:var(--smaragd-text); }
.karte-neu .meta { font-size:.82rem; line-height:1.55; color:var(--grau); margin-bottom:.9rem; }
.karte-neu .claim { font-family:'Museo Slab'; color:var(--smaragd-text); font-size:1rem; margin-bottom:.5rem; }
.karte-neu .body { color:#2a1e15cc; font-size:.95rem; line-height:1.75; }
/* Mailadresse(n) auf den Team-Karten, eine je Zeile, umbruchsicher */
.karte-neu .karte-mail { margin-top:.8rem; font-size:.85rem; line-height:1.6; }
.karte-neu .karte-mail a { display:block; color:var(--espresso); text-decoration:underline;
  text-underline-offset:.18em; overflow-wrap:anywhere; }
.karte-neu .karte-mail a:hover, .karte-neu .karte-mail a:focus-visible { color:var(--smaragd-text); }

/* Marke (Vorhaben, Status) */
/* Als Fuellung hinter heller Schrift braucht die Marke ebenfalls den dunklen Ton
   (heller Smaragd traegt nur 3,8:1). */
.marke { display:inline-block; background:var(--smaragd-text); color:var(--grund); font-size:.7rem;
  font-weight:700; border-radius:999px; padding:.15rem .7rem; }
.marke.dezent { background:#2a1e1514; color:var(--grau); }
/* Freie Plaetze am Mitmach-Kopf. Pink mit Espresso-Schrift (5,9:1), damit die
   Zahl neben der gruenen Statusmarke steht, ohne sie zu ueberschreien.
   Ausgebucht ist kein Signal mehr, sondern eine ruhige Feststellung. */
.marke.plaetze { background:var(--pink); color:var(--espresso); margin-left:.4rem; }
.marke.plaetze.ist-voll { background:#2a1e1514; color:var(--grau); }

/* ---- Info-Karten (Transparenz, Kontakt, Spenden) ---- */
.info-karten { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); gap:1.4rem; }
.info-karte { background:#ffffffcc; border-radius:18px; padding:1.9rem 2.1rem; }
.info-karte h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; font-size:1.25rem; margin-bottom:.6rem; }
.info-karte p { color:#2a1e15; }
.info-karte a { color:var(--espresso); text-decoration:underline; text-underline-offset:.18em; }

/* ---- Farbrotation fuer Boxen ---------------------------------------------
   Jede Box einer Gruppe bekommt einen eigenen Ton aus der Denk.Mal-Palette.
   Alle Toene sind hell, der Text bleibt Espresso, damit die Lesbarkeit
   ueberall deutlich ueber der Norm bleibt (gemessen 8:1 bis 13:1).
   Rosa steht bewusst hinten: es ist die haeufigste Bandfarbe, so landet es
   selten auf einem rosa Hintergrund.
   Ausgenommen sind Gruppen mit eigenem Farbsystem: .karten.bunt (Projekte,
   Farbe ueber --kf) und #team (Personen, Farbe ueber --tab). */
.info-karte:nth-child(6n+1), .karten:not(.bunt) > .karte-neu:nth-child(6n+1) { background:var(--g-blau); }
.info-karte:nth-child(6n+2), .karten:not(.bunt) > .karte-neu:nth-child(6n+2) { background:var(--g-vanille); }
.info-karte:nth-child(6n+3), .karten:not(.bunt) > .karte-neu:nth-child(6n+3) { background:var(--g-blush); }
.info-karte:nth-child(6n+4), .karten:not(.bunt) > .karte-neu:nth-child(6n+4) { background:var(--g-papier); }
.info-karte:nth-child(6n+5), .karten:not(.bunt) > .karte-neu:nth-child(6n+5) { background:var(--sonne); }
.info-karte:nth-child(6n+6), .karten:not(.bunt) > .karte-neu:nth-child(6n+6) { background:var(--g-rosa); }
/* Auf farbigem Band bleibt der Fliesstext ebenfalls voll deckend */
.karten:not(.bunt) > .karte-neu .body { color:var(--espresso); }

/* ---- Box-Knopf: jede Box, die einen Verweis in sich traegt ----------------
   Wird an eine Box gehaengt, die selbst ein <a> ist (class="... box-knopf").
   Die Rueckmeldung besteht aus vier Signalen: die Box hebt sich, ihre Farbe
   vertieft sich, der Pfeil faehrt in ein dunkles Rund, und der Hinweistext
   bekommt eine Linie. Timing und Kurve wie in der uebrigen Haptik-Ebene.
   Angehoben wird ueber die eigenstaendigen Eigenschaften translate und scale,
   nicht ueber transform: transform gehoert der Reveal-Animation (haptik.css)
   und wuerde das Anheben sonst ueberschreiben. */
.box-knopf { display:block; text-decoration:none; color:inherit; position:relative; isolation:isolate;
  cursor:pointer; transition:translate .3s cubic-bezier(.22,.8,.3,1), scale .3s cubic-bezier(.22,.8,.3,1),
  box-shadow .3s cubic-bezier(.22,.8,.3,1); }
.box-knopf > * { position:relative; z-index:1; }
/* Farbvertiefung als Schleier, damit sie zu jedem Boxton passt */
.box-knopf::before { content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:var(--espresso); opacity:0; transition:opacity .3s cubic-bezier(.22,.8,.3,1); }
.box-knopf:hover::before, .box-knopf:focus-visible::before { opacity:.07; }
.box-knopf:hover, .box-knopf:focus-visible { translate:0 -6px; box-shadow:0 18px 38px #2a1e152e; }
.box-knopf:active { translate:0 -2px; scale:.994; box-shadow:0 8px 18px #2a1e1524; }
.box-knopf:focus-visible { outline:3px solid var(--espresso); outline-offset:3px; }
/* Boxen mit eigener Hover-Bewegung (karte-neu) heben sonst doppelt an */
.karte-neu.box-knopf:hover { transform:none; }
/* Ein Titel in der Box ist kein eigener Link mehr, die ganze Box ist der Weg */
.box-knopf h2, .box-knopf h3 { color:var(--espresso); }

.box-knopf .weiter { display:inline-flex; align-items:center; gap:.55rem; margin-top:1.1rem;
  font-family:'Open Sans',sans-serif; font-weight:700; font-size:.86rem; color:var(--espresso);
  background-image:linear-gradient(var(--espresso), var(--espresso));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .35s cubic-bezier(.22,.8,.3,1); }
/* Die Linie laeuft nur unter dem Text und stoppt vor dem Pfeilrund. Abgezogen
   werden die Breite des Runds (1.65em bei .95em Schriftgroesse) und der Abstand. */
.box-knopf:hover .weiter, .box-knopf:focus-visible .weiter { background-size:calc(100% - 2.12em) 1.5px; }
.box-knopf .weiter::after { content:'\2192'; display:inline-flex; align-items:center; justify-content:center;
  width:1.65em; height:1.65em; border-radius:50%; background:#2a1e1514; color:var(--espresso);
  font-size:.95em; line-height:1;
  transition:background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22,.8,.3,1); }
.box-knopf:hover .weiter::after, .box-knopf:focus-visible .weiter::after {
  background:var(--espresso); color:var(--grund); transform:translateX(4px); }

/* Ohne Mauszeiger (Telefon, Tablet) bleibt das Rund dauerhaft kraeftig,
   dort gibt es kein Ueberfahren, das die Klickbarkeit verraten koennte. */
@media (hover:none) {
  .box-knopf .weiter::after { background:var(--espresso); color:var(--grund); }
  .box-knopf .weiter { background-size:calc(100% - 2.12em) 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .box-knopf, .box-knopf::before, .box-knopf .weiter, .box-knopf .weiter::after { transition:none; }
  .box-knopf:hover, .box-knopf:focus-visible, .box-knopf:active { translate:none; scale:none; }
}

/* ---- CTA-Finale ---- */
.seite-cta { min-height:52vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:12vh 6vw; background:linear-gradient(180deg, var(--grund) 0%, var(--akzent) 100%); }
.seite-cta h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.06;
  font-size:clamp(2.2rem,5.6vw,4rem); max-width:16ch; }
.seite-cta p { color:#2a1e15c0; margin-top:1rem; }
.knopf { display:inline-block; margin-top:2rem; background:var(--espresso); color:var(--grund);
  text-decoration:none; font-weight:700; padding:1.05rem 2.4rem; border-radius:999px; }
.knopf.zweit { background:transparent; color:var(--espresso); border:1.5px solid #2a1e1533; margin-left:.6rem; }
/* Signalknopf fuer laufende Aufrufe: Sonnengelb mit Espresso-Schrift (13,7:1).
   Bewusst der einzige Gelbeinsatz auf der Seite, sonst verliert er die Wirkung.
   Der Punkt davor pulst leise, bis jemand die Bewegung abbestellt hat. */
.knopf.sonne { background:var(--sonne); color:var(--espresso); display:inline-flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 22px #2a1e151f; transition:translate .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease; }
.knopf.sonne::before { content:''; width:.62rem; height:.62rem; border-radius:50%; background:var(--espresso);
  animation:knopf-puls 2.4s ease-in-out infinite; }
.knopf.sonne:hover, .knopf.sonne:focus-visible { translate:0 -3px; box-shadow:0 14px 30px #2a1e152e; }
@keyframes knopf-puls { 0%,100% { opacity:1; scale:1; } 50% { opacity:.45; scale:.8; } }
@media (prefers-reduced-motion: reduce) {
  .knopf.sonne::before { animation:none; }
  .knopf.sonne { transition:none; }
  .knopf.sonne:hover, .knopf.sonne:focus-visible { translate:none; }
}
/* Im Titelfeld sitzt der Knopf enger unter der Zeile darueber */
.seite-hero .hero-inhalt .knopf.sonne { margin-top:1.3rem; }
/* Knappe Plaetze, direkt unter dem Knopf. Bewusst kein zweites Gelb: das Gelb
   gehoert dem Knopf allein. Der Punkt in Pink macht die Zeile auffaellig genug,
   die Schrift bleibt Espresso auf hellem Feld (13,7:1). */
.platz-frei { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 0;
  font-weight:700; font-size:.95rem; color:var(--espresso); }
.platz-frei::before { content:''; flex:none; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--pink); }
.knopf-reihe { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ---- Artikel (Journal-Beitrag, Projekt-Detail) ---- */
.artikel { max-width:70ch; margin:0 auto; padding:16vh 6vw 12vh; }
.artikel h1 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.08;
  font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:.8rem; }
.artikel .meta { font-size:.85rem; color:var(--grau); margin-bottom:2.4rem; }
.artikel-body { color:#2a1e15d8; }
.artikel-body p { max-width:66ch; margin-bottom:1.1rem; }
.artikel-body h2 { font-family:'Museo Slab'; font-size:1.5rem; margin:2rem 0 .7rem; }
.artikel-body strong { color:var(--espresso); }
.artikel-body a { color:var(--smaragd-text); }

/* ---- Randseiten (Impressum, Datenschutz, Barrierefreiheit, Presse) --------
   Eine gemeinsame Form fuer alle vier, damit sie wie der Rest der Website
   aussehen und nicht wie ein Rohbau: farbiger Kopf mit Titel und Illustration,
   darunter der Text im Zeitungssatz ueber zwei Spalten. */
.randseite { max-width:none; padding:0 0 12vh; }
.randseite-kopf { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:3vw;
  padding:16vh 6vw 5vh; background:linear-gradient(180deg, var(--akzent, var(--g-papier)) 0%, var(--grund) 100%); }
/* Der Zurueck-Link steht auf einer eigenen Zeile ueber der Marke, sonst laufen
   beide ineinander und lesen sich wie ein Satz. */
.randseite-kopf .zurueck { display:block; margin-bottom:1.1rem; }
.randseite-kopf .eyebrow { display:block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smaragd-text); }
.randseite-kopf h1 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.06;
  font-size:clamp(2.2rem,5vw,3.8rem); margin:.5rem 0 .8rem; }
.randseite-kopf .intro { max-width:46ch; }
.randseite-kopf img { width:100%; max-width:26rem; justify-self:end; display:block; }
.randseite .artikel-body { padding:0 6vw; }
.randseite .artikel-body p { max-width:none; }
.randseite .artikel-body > h2:first-child { margin-top:0; }
@media (min-width:64rem) {
  .randseite .artikel-body { columns:2; column-gap:3.6rem; }
  .randseite .artikel-body > * { break-inside:avoid; }
  .randseite .artikel-body > h2 { break-after:avoid; }
  /* Bloecke, die ueber die volle Breite laufen sollen */
  .randseite .artikel-body > .voll { column-span:all; }
}
@media (max-width:860px) {
  .randseite-kopf { grid-template-columns:1fr; padding:14vh 6vw 4vh; }
  .randseite-kopf img { max-width:16rem; justify-self:start; }
}
/* Journal-Beitrag: nutzt die Breite wie die Projektseiten, statt als schmale
   Mittelspalte zu laufen. Ab 64rem Zeitungssatz ueber zwei Spalten. */
.journal-artikel { max-width:74rem; }
.journal-artikel .artikel-body p, .journal-artikel .artikel-body h2 { max-width:none; }
@media (min-width:64rem) {
  .journal-artikel .artikel-body { columns:2; column-gap:3.4rem; }
  .journal-artikel .artikel-body > * { break-inside:avoid; }
  .journal-artikel .artikel-body > h2 { break-after:avoid; }
}
.zurueck { display:inline-block; margin-bottom:1.6rem; font-size:.9rem; color:var(--grau); text-decoration:none; }
.zurueck:hover { color:var(--smaragd-text); }

/* ---- Aus der Presse (Journal-Einzelbeitrag) --------------------------------
   Wird aus dem Frontmatter-Feld `presse` gespeist. Dort stehen NUR geprueft
   aufgerufene Fundstellen (Cellesche Zeitung, Celle Heute, Celler Presse),
   nie vermutete Links. */
.presse-block { margin-top:3rem; padding:1.7rem 2rem 1.9rem; background:var(--g-papier); border-radius:18px; }
.presse-block h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; font-size:1.35rem; margin-bottom:.9rem; }
.presse-block ul { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.presse-block a { color:var(--espresso); text-decoration:none; }
.presse-block .p-medium { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--smaragd-text); margin-right:.55rem; }
.presse-block .p-titel { text-decoration:underline; text-underline-offset:.18em; }
.presse-block a:hover .p-titel, .presse-block a:focus-visible .p-titel { color:var(--smaragd-text); }
.presse-block .p-datum { color:var(--grau); font-size:.85rem; margin-left:.55rem; white-space:nowrap; }
.presse-block .p-hinweis { margin-top:1rem; font-size:.8rem; color:var(--grau); }

/* ---- Aktuell-Feld der Startseite (Zettel plus Ausrufer-Ensemble) ----------
   Inhalt aus src/content/aktuell/, gerendert von Aktuell.astro. Romans Wahl
   26.07.2026: Zettel-Groesse aus Variante D, Figuren-Ausrufer aus Variante F,
   Ensembles 1 (Megafon plus Dackel) und 3 (Zeigen und Rufen plus Katze).
   Umbau 26.07.2026 (Roman): markanter Zettelton, proportional groesser und
   mitwachsend, Figuren stehen auf der Kante zwischen Foto und Farbflaeche.
   EINE Schraube steuert die Groesse: font-size waechst mit der Fensterbreite,
   alle Innenmasse stehen in em. Damit skalieren Zettel, Schrift und Figuren
   immer gemeinsam, statt bei jeder Breite neu gesetzt werden zu muessen.
   Zettelton: Sonnengelb, von Roman am 26.07.2026 aus vier Frisch-Richtungen
   gewaehlt (gegen Bonbonrosa, Apfelgruen, Himmelblau). Steht in --a-grund,
   damit ein spaeterer Wechsel eine Zeile bleibt. */
.aktuell-feld { position:absolute; z-index:40; right:3vw; bottom:0;
  font-size:clamp(15px, 1.3vw, 30px); width:34em; height:21em;
  text-decoration:none; display:block; }
.aktuell-feld .a-zettel { position:absolute; left:0; top:0; width:22.5em;
  background:var(--a-grund, var(--sonne)); color:var(--espresso);
  padding:1.15em 1.3em 1em; rotate:-2.5deg; border-radius:.22em;
  box-shadow:0 .7em 1.6em #2a1e1545; display:block;
  transition:translate .3s cubic-bezier(.22,.8,.3,1), rotate .3s ease; }
.aktuell-feld .a-band { display:block; }
.aktuell-feld .a-marker { font-size:.72em; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--smaragd-text); }
/* text-wrap:balance verteilt die Zeilen gleichmaessig, hyphens:manual verhindert
   getrennte Woerter (Romans Punkt: der Text soll nicht zerrissen werden). */
.aktuell-feld .a-text { display:block; font-family:'Museo Slab',Georgia,serif; font-weight:500;
  font-size:1.3em; line-height:1.26; margin:.3em 0 .45em; text-wrap:balance; hyphens:manual; }
.aktuell-feld .a-weiter { font-size:.92em; font-weight:700; display:inline-block;
  border-bottom:.11em solid var(--espresso); }
.aktuell-feld:hover .a-zettel, .aktuell-feld:focus-visible .a-zettel { translate:0 -.28em; rotate:-1.2deg; }
.aktuell-feld:hover .a-weiter, .aktuell-feld:focus-visible .a-weiter { color:var(--smaragd-text);
  border-color:var(--smaragd-text); }
/* Figuren stehen auf der Unterkante des Startbilds, also auf der Linie zwischen
   Foto und Farbflaeche. Die freigestellten Motive haben unter den Fuessen noch
   transparente Luft (gemessen an den Alphakanaelen: Paar 6,1 %, Ruferin 4,1 %
   der Bildhoehe). Der Versatz nach unten holt genau diese Luft heraus, damit die
   Fuesse wirklich auf der Kante stehen und nicht darueber schweben. */
.aktuell-feld .a-paar, .aktuell-feld .a-ruferin { position:absolute; bottom:0; display:block;
  filter:drop-shadow(0 .45em 1em #2a1e1533); }
.aktuell-feld .a-paar { right:10.5em; width:15em; translate:0 6.1%; }
.aktuell-feld .a-ruferin { right:0; width:13em; translate:0 4.1%; }
/* Mittlere Breiten: Feld schmaler, damit es der Willkommens-Karte nicht in die
   Quere kommt; das zeigende Paar tritt ab, die Ruferin bleibt als Signal. */
@media (max-width:1200px) {
  .aktuell-feld { width:23em; height:17em; }
  .aktuell-feld .a-zettel { width:17.5em; }
  .aktuell-feld .a-paar { display:none; }
  .aktuell-feld .a-ruferin { width:11em; }
}
/* Schmale Bildschirme: Feld verlaesst das Startbild und wird eine ruhige Karte
   unter dem Kopf; es bleibt die Megafon-Ruferin als kleines Signal. */
@media (max-width:860px) {
  .s1 { flex-wrap:wrap; }
  .aktuell-feld { position:relative; z-index:2; right:auto; bottom:auto; width:100%; height:auto;
    font-size:16px; margin:0 5vw 3vh; display:flex; align-items:flex-end; gap:.6em; }
  /* position:relative, damit der Aufkleber weiter auf dem Zettel sitzt und
     seine Breite von ihm nimmt, nicht vom ganzen Feld. */
  .aktuell-feld .a-zettel { position:relative; flex:1; width:auto; rotate:-1.2deg; }
  .aktuell-feld .a-ruferin { position:static; width:7em; flex:none; translate:none; }
}

/* ---- Aufkleber fuer die Textfelder (Roman, 26.07.2026) --------------------
   Wunsch: die Textfelder der Seiten sollen wie der Aktuell-Zettel wirken, mit
   einem farbigen Streifen auf der Oberkante, der die Karte auf der Flaeche
   fixiert. Die Farbe kommt aus --band; Base.astro setzt sie je Seite
   abwechselnd auf die beiden Startseiten-Toene (Blau --g-blau und Pink des
   Wortes "Hand"). Absichtlich nur die grossen Einzel-Textfelder, NICHT die
   Kachel- und Kartenraster: dort wuerden zwanzig Streifen zur Tapete.
   Rein dekorativ, deshalb kein Text im Streifen.

   MASSREGEL (Romans Vorlage ist der Aktuell-Zettel, Nachschaerfung 26.07.2026):
   Der Aufkleber waechst und schrumpft immer im gleichen Verhaeltnis zu SEINER
   Flaeche, nie in festen Pixeln. Gerechnet wird deshalb in Prozent der Karte
   (Breite), die Hoehe folgt ueber das Seitenverhaeltnis, und der Ueberhang nach
   oben ueber translate in Prozent der eigenen Hoehe. Damit gilt dieselbe
   Proportion auf der kleinen Termin-Karte wie auf dem grossen Hero-Feld.
   Werte aus dem Aktuell-Zettel abgeleitet: 4,6em Streifen auf 22,5em Zettel
   (20,4 %), Streifenhoehe 1,2em von 4,6em Breite (Verhaeltnis 3,83 zu 1),
   Ueberhang 0,52em von 1,2em Hoehe (43 %).

   Breite der Textfeld-Aufkleber: 29 % (Roman, 26.07.2026, gewaehlt aus drei
   Vorschlaegen 26/33/42 %). Gilt fuer ALLE Textfelder aller Seiten, weil in
   Prozent der jeweiligen Karte gerechnet wird: gleiche Wirkung auf der kleinen
   Termin-Karte wie auf dem grossen Hero-Feld. Der Aktuell-Zettel bleibt bei
   seinen 20,4 %, dort war die Proportion von Roman ausdruecklich gut befunden
   und dient als Vorlage fuer Form und Ueberhang. */
:root { --aufkleber-breite:29%; --aufkleber-form:3.83 / 1; --aufkleber-ueberhang:-43%; }
.aktuell-feld .a-zettel { --aufkleber-breite:20.4%; }
.s1 .karte, .seite-hero.mit-foto .hero-inhalt, .s5 .termin, .presse-block,
.konto-karte { position:relative; }
.s1 .karte::before, .seite-hero.mit-foto .hero-inhalt::before, .s5 .termin::before,
.presse-block::before, .konto-karte::before, .aktuell-feld .a-band {
  content:''; position:absolute; top:0; left:50%; translate:-50% var(--aufkleber-ueberhang);
  width:var(--aufkleber-breite); aspect-ratio:var(--aufkleber-form);
  background:var(--band, var(--g-blau)); opacity:.85; rotate:-3deg;
  border-radius:2px; z-index:3; box-shadow:0 3px 10px #2a1e1530; }

/* ---- KI-Hinweis, Lücken-Notiz (Redaktions-Merker, dezent) ---- */
.luecke { font-size:.82rem; color:var(--grau); border-left:2px solid #2a1e1520; padding-left:.9rem; margin-top:2rem; font-style:italic; }

/* ---- Mitmach-Block (Projekte mit offenem Aufruf) --------------------------
   Gerendert von components/Mitmachen.astro aus dem Frontmatter-Feld
   `mitmachen`. Er steht zwischen Hero und Erzaehltext, weil eine Besucherin
   zuerst wissen will, was zu tun ist, und erst danach, warum.
   Aufbau: Frist -> drei Schritte -> Checkliste -> Handlung -> Eckdaten ->
   Auswahl und Rechte (aufklappbar) -> PDF.
   Grundton ist Vanille, damit der Block sich vom blauen Projektraum darunter
   absetzt; die Innenfelder sind weiss durchscheinend wie bei den Info-Karten. */
.mitmach { background:var(--g-vanille); padding:8vh 6vw 9vh; }
.mitmach > * + * { margin-top:3.4rem; }
.mitmach h3 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.1;
  font-size:clamp(1.35rem,2.4vw,1.9rem); margin-bottom:1.2rem; }
.mitmach .mm-body { display:block; color:#2a1e15cc; font-size:.95rem; line-height:1.7; margin-top:.3rem; }
.mitmach .mm-hinweis { color:#2a1e15b0; font-size:.92rem; max-width:60ch; margin-top:.6rem; }

/* Kopf: Anliegen links, Frist rechts als eigenes Feld */
.mm-kopf { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2.4rem 3vw; align-items:start; }
.mm-kopf h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.06;
  font-size:clamp(1.9rem,4.4vw,3rem); margin-top:.9rem; max-width:22ch; }
/* Die Frist ist die eine Angabe, an der alles haengt: eigenes Feld, groesste
   Ziffer des Blocks, nicht in den Fliesstext eingebaut. */
.mm-frist { display:flex; flex-direction:column; gap:.25rem; background:var(--grund);
  border-radius:18px; padding:1.5rem 2rem; min-width:15rem; box-shadow:0 10px 30px #2a1e1514; }
.mm-frist-label { font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--smaragd-text); }
.mm-frist-datum { font-family:'Museo Slab',Georgia,serif; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.15; }
.mm-frist-rest { font-size:.9rem; color:#2a1e15c4; }
.mm-frist.ist-vorbei .mm-frist-datum { text-decoration:line-through; color:var(--grau); }

/* Zwei Zustaende des Mitmach-Blocks (09.08.2026). Vor dem Schluss die drei
   Schritte, die Checkliste und der Einreichen-Knopf. Danach nur noch der Hinweis,
   dass die Jury entscheidet. Die Klasse .ist-zu setzt der Bau, und falls die Seite
   seit dem Schluss nicht neu gebaut wurde, das Skript im Browser. */
.mm-nur-zu { display:none; }
.mitmach.ist-zu .mm-nur-offen { display:none; }
.mitmach.ist-zu .mm-nur-zu { display:block; }
.mm-zu h3 { margin:0 0 .5rem; }
.mm-zu .mm-body { display:block; max-width:52ch; }
.mm-zu .knopf { margin-top:1.4rem; }

/* Drei Schritte: nummeriert, gleichrangig nebeneinander */
.mm-schritte { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1.3rem; }
.mm-schritte li { background:#ffffffb8; border-radius:18px; padding:1.8rem 1.9rem; }
.mm-schritte strong { display:block; font-family:'Museo Slab',Georgia,serif; font-weight:500;
  font-size:1.15rem; margin-top:.7rem; }
.mm-nr { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
  border-radius:50%; background:var(--espresso); color:var(--grund);
  font-family:'Museo Slab',Georgia,serif; font-size:1rem; line-height:1; }

/* Checkliste: was in die Mail gehoert, mit Haken statt Aufzaehlungspunkt */
.mm-liste { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:.9rem 2.2rem; }
.mm-liste li { position:relative; padding-left:2.2rem; }
.mm-liste li::before { content:'\2713'; position:absolute; left:0; top:.05rem;
  display:flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--smaragd-text); color:var(--grund); font-size:.85rem; }
.mm-liste li.ist-frei::before { background:#2a1e1518; color:var(--grau); }
.mm-liste strong { font-weight:600; }
.mm-frei { display:inline-block; margin-left:.5rem; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#2a1e15c4; background:#2a1e150f; border-radius:999px; padding:.1rem .6rem; }

/* Handlung: der Knopf und die drei Angaben, die man dafuer braucht */
.mm-tat { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.2rem;
  background:var(--grund); border-radius:20px; padding:2rem 2.3rem; }
.mm-tat .knopf { margin-top:0; }
.mm-tat-info { display:flex; flex-wrap:wrap; gap:.35rem 1.8rem; font-size:.92rem; color:#2a1e15cc; }
.mm-tat-info a { color:var(--espresso); text-decoration:underline; text-underline-offset:.18em; }

/* Eckdaten: Beschriftung und Wert, wie die Tabelle im PDF, nur ohne Rahmen */
.mm-daten { display:grid; gap:0; max-width:56rem; }
.mm-zeile { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:.4rem 1.6rem;
  padding:.85rem 0; border-bottom:1px solid #2a1e1518; }
.mm-zeile dt { font-weight:700; font-size:.92rem; color:var(--smaragd-text); }
.mm-zeile dd { margin:0; }

/* Auswahl und Rechte: vollstaendig da, aber zusammengefaltet, damit der
   Rechtetext die Handlungsschritte nicht erschlaegt. */
.mm-regeln { display:grid; gap:.8rem; margin-top:1.4rem; }
.mm-regeln details { background:#ffffffb8; border-radius:16px; padding:1.1rem 1.6rem; }
.mm-regeln summary { font-family:'Museo Slab',Georgia,serif; font-size:1.08rem; cursor:pointer;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mm-regeln summary::-webkit-details-marker { display:none; }
.mm-regeln summary::after { content:'+'; font-size:1.4rem; line-height:1; color:var(--grau); }
.mm-regeln details[open] summary::after { content:'\2013'; }
.mm-regeln summary:focus-visible { outline:3px solid var(--espresso); outline-offset:3px; border-radius:6px; }
.mm-regeln ul { margin:1rem 0 .3rem; padding-left:1.2rem; display:grid; gap:.6rem;
  color:#2a1e15cc; font-size:.94rem; line-height:1.7; }

/* PDF: bewusst am Ende. Wer bis hierher liest, hat alles schon gesehen und
   nimmt das Dokument nur noch mit oder gibt es weiter. */
.mm-pdf { display:block; background:var(--g-blau); border-radius:20px; padding:2rem 2.3rem; max-width:36rem; }
.mm-pdf h3 { margin:.9rem 0 0; }

@media (max-width:860px) {
  .mm-kopf { grid-template-columns:1fr; }
  .mm-zeile { grid-template-columns:1fr; padding:.7rem 0; }
  .mm-zeile dt { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
}

/* ---- Verweis auf das zugehoerige Projekt ---------------------------------
   Termine und Journalbeitraege tragen im Frontmatter ein Feld `projekt`. Wo es
   gesetzt ist, fuehrt ein sichtbarer Weg dorthin, statt dass die Angabe nur in
   den Daten steht. Bei laufenden Aufrufen ist das die Seite, auf der steht,
   was zu tun ist (Roman, 26.07.2026). */
.projektweg { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-weight:700; font-size:.9rem; color:var(--espresso); text-decoration:none;
  background:#2a1e150f; border-radius:999px; padding:.5rem 1.1rem;
  transition:background-color .25s ease, translate .25s cubic-bezier(.22,.8,.3,1); }
.projektweg::after { content:'\2192'; }
.projektweg:hover, .projektweg:focus-visible { background:var(--espresso); color:var(--grund); translate:0 -2px; }
@media (prefers-reduced-motion: reduce) { .projektweg { transition:none; } .projektweg:hover { translate:none; } }

/* ---- Fotostrecke auf Projektseiten ---------------------------------------
   Steht nach dem farbigen Projektraum, also ausserhalb des zweispaltigen
   Satzes: eine Bildlaufleiste im Textsatz waere sonst in eine Spalte gequetscht.
   Ohne Urhebervermerk am Bild: der Nachweis steht im Impressum, das reicht
   Roman fuer die Vereinsseite (26.07.2026). */
.bilderstrecke { padding-bottom:10vh; }
.bilderstrecke h2 { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.1;
  font-size:clamp(1.8rem,4vw,2.9rem); margin-bottom:.8rem; }
.bilderstrecke .lauftext { max-width:62ch; }

/* ---- Grossbild im Projektraum ---------------------------------------------
   Roman, 26.07.2026: ein Foto gross oben beim Text. Es sitzt an der Stelle, an
   der sonst die Illustration steht, also direkt ueber dem Erzaehltext, und
   nimmt dieselbe Breite wie der Text darunter. Nicht beschnitten, die Hoehe
   folgt dem Seitenverhaeltnis. */
.raum-grossbild { margin:0; padding:6vh 5vw 0; }
.raum-grossbild img { display:block; width:100%; max-width:74rem; margin:0 auto;
  height:auto; border-radius:20px; box-shadow:0 18px 48px #2a1e1526; }
@media (max-width:700px){ .raum-grossbild { padding:4vh 4vw 0; } }

/* ---- Filmblock im Artikel (Roman 25.08.2026, Richtung B „Das Kapitel") -----
   Der Film sitzt dort im Text, wo von ihm erzaehlt wird, eingefasst in eine
   Flaeche des Farbraums. Kein fremder Anbieter, kein Cookie: die Datei liegt im
   eigenen R2-Speicher und wird per <video> geladen. Der Browser laedt erst beim
   Klick (preload="none"), das Standbild kommt aus dem Poster-Attribut.
   Wiederverwendbar: derselbe Block passt in jede Projektseite. */
.filmblock { background:var(--g-vanille); border-radius:20px; padding:1.4rem;
  margin:2.6rem 0; max-width:none; }
/* Projekt- und Journalartikel laufen ab 64rem im Zeitungssatz ueber zwei Spalten.
   Der Film gehoert wie der Partnerblock ueber die volle Breite, sonst steht er als
   halbbreites Fensterchen in einer Spalte. */
.artikel-body > .filmblock { column-span:all; break-inside:avoid; }
/* Das Seitenverhaeltnis sitzt auf dem <video> selbst, nicht auf dem Rahmen.
   Auf dem Rahmen (mit einem Kind auf height:100%) rechnet Chrome die Breite aus
   der Standardgroesse des Videos statt aus der Spalte, der Block bleibt schmal. */
.filmblock .buehne { position:relative; border-radius:12px; overflow:hidden; background:#1a120c; }
.filmblock video { display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:contain; background:#1a120c; }
/* Bildunterschrift und Nachweis stehen unter dem Bild, nicht darin: im Bild
   waeren sie bei laufendem Film im Weg und auf kleinen Schirmen unlesbar. */
.filmblock figcaption { display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:.6rem 1.6rem; margin-top:.9rem; }
.filmblock figcaption p { max-width:56ch; margin:0; font-size:.95rem; color:#2a1e15cc; }
.filmblock .nachweis { font-size:.78rem; color:var(--grau); }
@media (max-width:600px){ .filmblock { padding:1rem; border-radius:16px; } }

/* Der Film ganz oben im farbigen Raum (Roman, 25.08.2026: Film nach oben, das
   Gruppenbild dafuer runter zur Bilderstrecke, und wieder mit dem farbigen
   Kasten drumherum). Er sitzt an der Stelle des grossen Fotos und darf breiter
   sein als der Text darunter: er ist das Ergebnis des Projekts, nicht eine
   Abbildung dazu. */
.filmblock.gross { width:min(84rem, 100% - 10vw); margin:6vh auto 0; padding:1.4rem;
  background:var(--g-vanille); border-radius:20px; box-shadow:0 18px 48px #2a1e1526; }
.filmblock.gross .buehne { border-radius:14px; }
/* In voller Breite darf die Bildunterschrift laenger laufen, sonst steht ein
   dreizeiliger Schnipsel links neben viel Leere. */
.filmblock.gross figcaption { margin-top:1rem; }
.filmblock.gross figcaption p { max-width:74ch; }
@media (max-width:700px){
  .filmblock.gross { width:min(84rem, 100% - 8vw); margin-top:4vh; padding:1rem; border-radius:16px; }
  .filmblock.gross .buehne { border-radius:10px; }
}

/* Das grosse Gruppenbild als Auftakt der Bilderstrecke, wenn oben der Film steht. */
.strecke-grossbild { margin:0 0 1.6rem; }
.strecke-grossbild img { display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 18px 48px #2a1e1526; }
@media (max-width:700px){ .strecke-grossbild img { border-radius:14px; } }