/* 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); }
.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; }
.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);
  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); 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); }
.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); font-size:1rem; margin-bottom:.5rem; }
.karte-neu .body { color:#2a1e15cc; font-size:.95rem; line-height:1.75; }

/* Marke (Vorhaben, Status) */
.marke { display:inline-block; background:var(--smaragd); color:var(--grund); font-size:.7rem;
  font-weight:700; border-radius:999px; padding:.15rem .7rem; }
.marke.dezent { background:#2a1e1514; color:var(--grau); }

/* ---- Info-Karten (Transparenz, Kontakt) ---- */
.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:#2a1e15cc; }
.info-karte a { color:var(--smaragd); }

/* ---- 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; }
.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); }
/* 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); }

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