/* ============================================================
   mifem e.V. — Website
   Farben & Typografie nach "Mifem Brand Guide.pdf"
   ============================================================ */

:root{
  --lila-900:#5E2A5A;
  --lila-700:#7E3878;
  --lila:#A5499B;      /* Primaerfarbe Brand Guide */
  --lila-400:#C699C6;
  --lila-300:#D8A4CB;
  --lila-100:#E5D0E5;
  --lila-050:#F5EBF4;

  --papier:#FCFAFC;
  --papier-warm:#F7F2F6;
  --tinte:#241C26;
  --tinte-weich:#5F5362;
  --linie:#E8DEE7;

  --tinte-tief:#3E1A3C;
  /* Wird von seite.js nachgemessen - die Kopfzeile ist so hoch,
     wie ihr Inhalt es verlangt. Der Wert hier ist der Rueckfall. */
  --kopf-hoehe:69px;

  /* Ueberschriften und Bedienelemente: Jost als freie Futura-PT-Entsprechung
     (Brand Guide). Fliesstext: Serife – die Vereinsgeschichte ist Lesetext,
     kein Produktmarketing. */
  --schrift-titel:"Jost","Futura PT","Futura","Century Gothic",system-ui,sans-serif;
  --schrift-ui:"Jost","Futura PT",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-text:"Source Serif 4",Charter,Georgia,"Times New Roman",serif;

  --breite:1180px;
  --radius:0;
  --radius-innen:0;
  --schatten:3px 3px 0 var(--lila-100);
}

/* Feines Korn gegen die digitale Flachheit – liegt ueber allem, faengt keine Klicks */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift-text);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Deutsch ohne Silbentrennung sieht maschinengesetzt aus */
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 4 3;overflow-wrap:break-word;
}
/* Mediaevalziffern im Lesetext, Versalziffern nur wo Zahlen Spalten bilden */
p,li,dd,figcaption,blockquote{font-variant-numeric:oldstyle-nums proportional-nums}
.spende dd,.station-jahr,.zeitband-jahr,.chip span,
.presse-text small,.kennzeichen{font-variant-numeric:lining-nums tabular-nums}
h1,h2,h3,h4,.knopf,.menue a{-webkit-hyphens:none;hyphens:none}
/* Auf schmalen Telefonen duerfen lange Komposita in Ueberschriften doch brechen,
   sonst schiebt ein Wort wie "Einwilligungsmanagement" die Spalte auf */
@media (max-width:620px){
  h1,h2,h3,h4{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
}
img{max-width:100%;display:block}
a{color:var(--lila-700);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);letter-spacing:-.028em}
h2{font-size:clamp(2rem,3.8vw,3.05rem);letter-spacing:-.022em}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch;text-wrap:pretty}
.huelle{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.eng{width:min(100% - 2.5rem,760px);margin-inline:auto}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--papier);
  border-bottom:1px solid var(--tinte)}
.kopf-innen{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0;
  width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex-shrink:0}
.marke img{width:46px;height:46px}
.marke-text{display:block}
.marke b{font-family:var(--schrift-titel);font-size:1.32rem;font-weight:600;letter-spacing:-.02em;display:block;line-height:1}
.marke .unterzeile{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-weich)}

.menue{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.menue a{font-family:var(--schrift-ui);font-size:1rem;text-decoration:none;color:var(--tinte);padding:.48rem .7rem;border-radius:var(--radius-innen);
  white-space:nowrap;transition:background .18s,color .18s}
.menue a:hover{background:var(--lila-050);color:var(--lila-900)}
.menue a[aria-current="page"]{background:var(--lila);color:#fff}

.kopf-extra{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
/* Der Satzspiegel ist auf 1180 px begrenzt, die Kopfzeile also auch bei
   einem breiten Bildschirm. Fuer Marke, acht deutsche Menuepunkte,
   Sprachwahl und Suche reicht das nicht - ohne diese Enge laeuft die
   Zeile bei JEDER Schreibtischbreite 19 px darueber hinaus. */
@media (min-width:1201px){
  .kopf-innen{gap:1rem}
  .menue a{padding:.48rem .52rem}
  .kopf-extra{gap:.45rem}
}
.sprachen{display:flex;gap:1px;background:var(--linie);border-radius:0;overflow:hidden;padding:1px}
/* Echte Links, kein Skript: die Sprachwahl fuehrt auf dieselbe Seite im
   anderen Ordner und funktioniert damit auch ohne JavaScript. */
.sprachen a{display:block;border:0;background:#fff;font-family:var(--schrift-ui);
  font-size:.76rem;font-weight:600;letter-spacing:.04em;text-decoration:none;
  padding:.32rem .52rem;cursor:pointer;color:var(--tinte-weich);transition:background .18s,color .18s}
.sprachen a:hover{background:var(--lila-050);color:var(--lila-900)}
.sprachen a[aria-current="true"]{background:var(--lila);color:#fff}
.suche-knopf,.menue-knopf{border:1px solid var(--linie);background:#fff;width:38px;height:38px;border-radius:0;
  display:grid;place-items:center;cursor:pointer;color:var(--tinte);padding:0}
.suche-knopf:hover,.menue-knopf:hover{border-color:var(--lila-300);color:var(--lila-700)}
.menue-knopf{display:none}


@media (max-width:1200px){
  .menue{position:fixed;inset:var(--kopf-hoehe) 0 auto;background:var(--papier);flex-direction:column;align-items:stretch;
    padding:1rem 1.25rem 1.6rem;gap:.15rem;border-bottom:1px solid var(--linie);display:none;box-shadow:var(--schatten)}
  .menue.offen{display:flex}
  .menue a{padding:.72rem .8rem;font-size:1.05rem;border-radius:0}
  .menue-knopf{display:grid}
}

/* Schmale Telefone: Unterzeile weg, Sprachwahl wandert ins Menü */
@media (max-width:640px){
  .kopf-innen{gap:.6rem}
  .marke img{width:38px;height:38px}
  .marke b{font-size:1.14rem}
  .marke .unterzeile{display:none}
  /* Die Sprachwahl bleibt sichtbar, wird aber zur schmalen Reihe mit
     Trennstrichen statt zu drei gerahmten Feldern - drei Felder brauchen
     mehr Platz, als neben Marke, Suche und Menue uebrig ist. */
  .kopf-extra .sprachen{background:none;padding:0;gap:0}
  .kopf-extra .sprachen a{background:none;padding:.24rem .38rem;font-size:.76rem;
    border-left:1px solid var(--linie)}
  .kopf-extra .sprachen a:first-child{border-left:0}
  .kopf-extra .sprachen a:hover{background:none;color:var(--lila-900)}
  .kopf-extra .sprachen a[aria-current="true"]{background:none;color:var(--lila);font-weight:600}
  .suche-knopf,.menue-knopf{width:35px;height:35px}
  .menue{inset:var(--kopf-hoehe) 0 auto}
}

@media (max-width:400px){
  .marke img{width:34px;height:34px}
  .marke b{font-size:1.05rem}
  .kopf-innen{gap:.45rem}
  .kopf-extra{gap:.3rem}
  .kopf-extra .sprachen a{padding:.24rem .3rem;font-size:.72rem}
}

/* Die schmalsten Geraete (iPhone SE hochkant und darunter): Marke, drei
   Sprachen, Suche und Menue liegen zusammen 12 px ueber der Breite.
   Verteilt auf alle drei Gruppen bleibt es unauffaellig. */
@media (max-width:345px){
  .kopf-extra{gap:.22rem}
  .kopf-extra .sprachen a{padding:.24rem .24rem}
  .suche-knopf,.menue-knopf{width:31px;height:31px}
}

/* ---------- Suche ---------- */
.suchfeld{display:none;border-bottom:1px solid var(--linie);background:#fff}
.suchfeld.offen{display:block}
.suchfeld form{width:min(100% - 2.5rem,var(--breite));margin-inline:auto;padding:1rem 0;display:flex;gap:.6rem}
.suchfeld input{flex:1;font:inherit;padding:.75rem 1rem;border:1px solid var(--linie);border-radius:var(--radius-innen);background:var(--papier)}
.suchfeld input:focus{outline:2px solid var(--lila-300);outline-offset:1px}
.treffer{width:min(100% - 2.5rem,var(--breite));margin-inline:auto;padding:0 0 1.2rem}
.treffer a{display:block;padding:.6rem .8rem;border-radius:0;text-decoration:none;color:var(--tinte)}
.treffer a:hover{background:var(--lila-050)}
.treffer b{display:block;font-family:var(--schrift-ui);font-size:1.05rem}
.treffer small{color:var(--tinte-weich)}

/* ---------- Bausteine ---------- */
.knopf{display:inline-flex;align-items:center;gap:.5rem;background:var(--lila);color:#fff;text-decoration:none;
  font-family:var(--schrift-ui);font-weight:500;font-size:1rem;letter-spacing:.005em;
  padding:.82rem 1.5rem;border-radius:var(--radius-innen);border:1px solid var(--lila);
  transition:background .18s,border-color .18s,transform .12s}
.knopf:hover{background:var(--lila-900);border-color:var(--lila-900)}
.knopf:active{transform:translateY(1px)}
.knopf.leer{background:transparent;color:var(--lila-900);border-color:var(--lila-300)}
.knopf.leer:hover{background:var(--lila-050);border-color:var(--lila)}
.knopf.hell{background:#fff;color:var(--lila-900);border-color:#fff}
.knopf.hell:hover{background:var(--lila-050);border-color:var(--lila-050)}
/* dritte, leisere Stufe statt ueberall zwei Knoepfe */
.textlink{font-family:var(--schrift-ui);font-weight:500;color:var(--lila-700);text-decoration:none;
  border-bottom:1px solid var(--lila-300);padding-bottom:2px;transition:border-color .18s,color .18s}
.textlink:hover{color:var(--lila-900);border-color:var(--lila-900)}

/* Abschnittsmarke: Haarlinie darueber statt Versalien mit Strich davor */
.marke-label{display:block;width:max-content;font-family:var(--schrift-ui);font-size:.88rem;
  font-weight:500;letter-spacing:.01em;color:var(--lila-700);
  margin:0 0 1.2rem;padding-top:.8rem;border-top:1px solid var(--lila-300)}

section{padding:clamp(3rem,5.6vw,4.6rem) 0 clamp(3.4rem,6.2vw,5.2rem)}
/* direkt unter dem Seitenkopf braucht es oben keinen zweiten grossen Abstand */
.seitenkopf + section{padding-top:clamp(2rem,3.6vw,2.9rem)}
.blass{background:var(--papier-warm)}
/* Volltonfarbe statt Farbverlauf */
.lila-band{background:var(--tinte-tief);color:rgba(255,255,255,.82)}
.lila-band h2,.lila-band h3{color:#fff}
.lila-band p{color:rgba(255,255,255,.82)}
.lila-band .marke-label{color:var(--lila-300);border-top-color:rgba(216,164,203,.45)}
.lila-band .textlink{color:#fff;border-color:rgba(255,255,255,.45)}
.lila-band .textlink:hover{color:#fff;border-color:#fff}

/* ---------- Hero: aufgebaut wie ein Titelblatt ----------
   Der Text sitzt unten auf der Kante, nicht mittig im Bild. Abgedunkelt
   wird nur der untere Teil – oben bleibt das Foto ein Foto. */
.hero{position:relative;padding:0;overflow:hidden;background:var(--tinte-tief);
  min-height:clamp(540px,82vh,840px);display:grid;grid-template-rows:auto 1fr auto}
.hero-bild{position:absolute;inset:0;z-index:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  /* Deckenlicht und Projektionswand sind reinweiss ausgebrannt. Ohne diese
     Zuruecknahme kann kein Schleier daruber greifen: 100 %% Weiss bleibt
     auch unter halbdurchlaessiger Farbe zu hell fuer weisse Schrift. */
  filter:brightness(.88) contrast(1.03) saturate(1.06)}
.hero-bild::after{content:"";position:absolute;inset:0;
  background:
    /* Von links: die Schrift steht in der linken Spalte, also traegt sie
       dort einen eigenen Grund. Rechts bleibt das Foto offen und hell –
       dadurch wirkt es wie ein Farbfeld, das ueber das Bild gelegt ist,
       und nicht wie ein gleichmaessig abgedunkeltes Foto. */
    linear-gradient(to right,
      rgba(30,7,28,.74) 0%,rgba(33,9,31,.70) 30%,rgba(44,14,41,.52) 48%,
      rgba(64,22,59,.26) 64%,rgba(94,42,90,.06) 80%,transparent 92%),
    /* Von unten: dort stehen Vorlauf und Knoepfe, und der weisse Tisch */
    linear-gradient(to top,
      rgba(30,7,28,.95) 0%,rgba(35,10,33,.90) 20%,rgba(46,15,43,.76) 36%,
      rgba(66,23,61,.52) 52%,rgba(98,38,91,.26) 68%,rgba(140,60,130,.08) 84%,
      transparent 96%),
    /* Von oben: der laufende Kopf liegt im hellsten Deckenlicht */
    linear-gradient(to bottom,
      rgba(30,7,28,.72) 0%,rgba(34,9,32,.40) 10%,transparent 22%)}

.hero-kopfzeile,.hero-bildzeile,.hero-text{
  position:relative;z-index:1;width:min(100% - 2.5rem,var(--breite));margin-inline:auto}

/* laufender Kopf oben im Bild */
.hero-kopfzeile{margin-top:0;padding:1.5rem 0 0;font-family:var(--schrift-ui);font-size:.92rem;
  font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.88);max-width:none;margin-bottom:0;
  text-shadow:0 1px 14px rgba(24,5,22,.6)}

/* max-width zusammen mit margin-inline:auto hatte die Spalte unbemerkt
   zentriert – sie stand 220 px weiter rechts als der laufende Kopf
   darueber. Die Breite gehoert an die Zeile, nicht an die Spalte. */
.hero-text{align-self:end;padding-bottom:1.2rem}
.hero h1{margin:0 0 1.1rem;color:#fff;text-wrap:balance;max-width:min(100%,38rem);
  font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.03em;
  /* Ein weit gestreuter Schatten, der als Schatten nicht zu sehen ist:
     er nimmt nur den Lichtern hinter den Buchstaben die Spitze. */
  text-shadow:0 1px 28px rgba(24,5,22,.55),0 1px 3px rgba(24,5,22,.35)}
/* Der Schriftzug wird als SVG gezeichnet, nicht gesetzt – text-shadow greift
   dort nicht, deshalb drop-shadow auf das Bild. Und er braucht etwas Luft:
   direkt unter der Zeile klebt Handschrift an der Drucktype. */
.hero h1 .handschrift{display:block;color:#F2DCEE;margin-top:.34em;font-size:.6em;
  letter-spacing:0}
.hero h1 .handschrift svg{filter:drop-shadow(0 1px 18px rgba(24,5,22,.7))
                                 drop-shadow(0 1px 2px rgba(24,5,22,.5))}
.hero-lead{font-size:clamp(1.05rem,1.3vw,1.2rem);color:rgba(255,255,255,.92);max-width:44ch;
  margin-bottom:0;line-height:1.55;text-shadow:0 1px 16px rgba(24,5,22,.5)}
.hero-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.9rem}
.hero .textlink{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .textlink:hover{color:#fff;border-color:#fff}

/* Bildunterschrift wie im Druck: klein, rechts, mit Datum */
.hero-bildzeile{padding:0 0 1.4rem;text-align:right;font-family:var(--schrift-ui);
  font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.55);margin-bottom:0;max-width:none}

@media (max-width:760px){
  .hero{min-height:0}
  /* Auf dem Telefon deckt ein Schleier von links die ganze Breite - dann ist
     vom Foto nichts mehr zu sehen. Hier also nur senkrecht, und mit einem
     Fenster im oberen Drittel: dort sind im Foto die Gesichter, und dort
     steht keine Schrift. Dicht bleibt es oben am laufenden Kopf (helles
     Deckenlicht) und unten hinter der Schlagzeile. */
  .hero-bild::after{background:
    linear-gradient(to bottom,
      rgba(30,7,28,.82) 0%,rgba(34,9,32,.54) 11%,
      rgba(42,13,39,.34) 24%,rgba(46,15,43,.42) 40%,
      rgba(44,14,41,.74) 58%,rgba(36,11,34,.93) 78%,rgba(30,7,28,.97) 100%)}
  .hero-text{padding-top:3.5rem}
  .hero-bildzeile{text-align:left}
}

/* ---------- Zeitachse "Die Linie" (Signature) ----------
   Struktur nach der Timeline-Komponente von HextaUI (21st.dev),
   auf das mifem-Theme und echte Archivbelege angepasst. */
.linie{list-style:none;padding:0;margin:3.5rem 0 0;counter-reset:s}
.station{display:grid;grid-template-columns:6rem 1.7rem minmax(0,1fr);column-gap:1.2rem;
  padding-bottom:3.2rem}
.station:last-child{padding-bottom:0}

.station-jahr{font-family:var(--schrift-titel);font-size:1.55rem;font-weight:600;color:var(--lila);
  line-height:1.25;text-align:right;padding-top:.05rem;font-variant-numeric:tabular-nums;
  /* Kein nowrap: das tuerkische "1960'tan beri" ist laenger als
     die Spalte und lief sonst ins Initial des ersten Absatzes. */
  overflow-wrap:break-word;hyphens:none}
.station-jahr small{display:block;font-size:.84rem;letter-spacing:.01em;
  color:var(--tinte-weich);font-weight:500;font-family:var(--schrift-ui)}

.station-rail{position:relative}
.station-rail::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:1.9rem;bottom:-3.2rem;width:2px;background:var(--lila-100)}
.station:last-child .station-rail::before{display:none}
.station-rail::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:.6rem;
  width:11px;height:11px;background:var(--lila);box-shadow:0 0 0 5px var(--papier)}
.blass .station-rail::after{box-shadow:0 0 0 5px var(--papier-warm)}
/* Ruhephase: offener Punkt statt gefülltem */
.station.pause .station-rail::after{background:var(--papier);border:2px solid var(--lila-300)}
.blass .station.pause .station-rail::after{background:var(--papier-warm)}
/* Neustart: der Stern aus dem Logo */
.station.stern .station-rail::after{width:22px;height:22px;top:.35rem;border-radius:0;background:var(--lila);
  box-shadow:none;
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%)}

.station h3{margin-bottom:.45rem}
.station p{color:var(--tinte-weich);margin-bottom:0;font-size:1rem}

.beleg{margin:1.1rem 0 0;max-width:330px}
.beleg img{border:1px solid var(--linie);border-radius:0;cursor:zoom-in;background:#fff;
  transition:transform .25s,box-shadow .25s}
.beleg img:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
.beleg figcaption{font-size:.8rem;color:var(--tinte-weich);margin-top:.5rem;letter-spacing:.02em}

@media (max-width:660px){
  .station{grid-template-columns:1.7rem minmax(0,1fr);column-gap:1rem;row-gap:.3rem}
  .station-jahr{grid-column:1 / -1;text-align:left;padding-left:2.9rem;font-size:1.35rem}
  .station-jahr small{display:inline;margin-left:.6rem;font-size:.7rem}
  .station-rail{grid-column:1;grid-row:2}
  .station-rail::before{top:.4rem}
  .station-rail::after{top:.35rem}
}

/* ---------- Karten ---------- */
.raster{display:grid;gap:1.6rem}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* Karten nur da, wo ein Bild fuehrt – sonst tragen Linie und Weissraum */
.karte{background:transparent;border:0;border-radius:0;overflow:visible;
  display:flex;flex-direction:column}
.karte-bild{aspect-ratio:5/4;overflow:hidden;background:var(--lila-050);border-radius:var(--radius);
  margin-bottom:1.4rem}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.karte:hover .karte-bild img{transform:scale(1.03)}
/* Plakate und Motive werden nicht beschnitten - sonst schneidet der
   Rahmen den Text ab. Sie stehen ganz da, auf getoentem Grund. */
.karte-bild.werk img{object-fit:contain;padding:.9rem}
.karte-bild.werk{background:var(--lila-050)}
.karte-text{flex:1;display:flex;flex-direction:column}
.karte-text p{color:var(--tinte-weich);font-size:1rem}
.karte-text .textlink,.karte-text .knopf{margin-top:auto;align-self:flex-start}
/* Karten ohne Bild bekommen eine Linie statt eines Kastens */
.karte:not(:has(.karte-bild)) .karte-text{border-top:1px solid var(--linie);padding-top:1.5rem}

.kennzeichen{display:inline-block;font-family:var(--schrift-ui);font-size:.84rem;letter-spacing:.01em;
  font-weight:500;color:var(--lila-700);margin-bottom:.7rem}
.kennzeichen.laufend{color:#1C6B4A}
.kennzeichen.laufend::before{content:"";display:inline-block;width:7px;height:7px;
  background:#1C6B4A;margin-right:.5rem;vertical-align:.12em}

/* ---------- Zitat ---------- */
.zitat{border:0;border-top:1px solid var(--lila-300);padding:1.8rem 0 0;margin:2.8rem 0 0;
  font-family:var(--schrift-titel);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.24;
  color:var(--tinte);letter-spacing:-.012em;text-wrap:balance}
.zitat footer{font-family:var(--schrift-ui);font-size:.95rem;color:var(--tinte-weich);margin-top:1.1rem;font-weight:500}

/* ---------- Listen ---------- */
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.haken li{position:relative;padding-left:1.9rem;color:var(--tinte-weich)}
.haken li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:0;
  background:var(--lila-300)}
.lila-band .haken li{color:rgba(255,255,255,.88)}
.lila-band .haken li::before{background:var(--lila-300)}

/* Das Logo im violetten Band (statt eines Fotos, Wunsch des Vereins).
   Es bringt seinen eigenen, helleren Violettkreis mit - der setzt sich
   gegen das dunkle Pflaumenband ab, ein weisser Kasten drumherum waere
   ueberfluessig. */
.band-logo{display:flex;align-items:center;justify-content:center}
.band-logo img{width:min(340px,80%);height:auto}
@media (max-width:860px){.band-logo img{width:min(230px,58%)}}

/* Sieben Ziele untereinander wurden sehr lang. Nebeneinander in Spalten
   braucht es ein Drittel der Hoehe; die Trennlinien oben halten die
   Spalten optisch zusammen. */
.ziele{list-style:none;padding:0;margin:0;counter-reset:z;
  display:grid;gap:1.8rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))}
.ziele li{counter-increment:z;position:relative;padding:1.1rem 0 0 3.2rem;
  border-top:1px solid var(--linie);color:var(--tinte-weich);font-size:1rem;line-height:1.55}
.ziele li::before{content:counter(z,decimal-leading-zero);position:absolute;left:0;top:1.2rem;
  font-family:var(--schrift-titel);font-size:1rem;font-weight:600;color:var(--lila);
  border:1px solid var(--lila-100);border-radius:0;width:2.2rem;height:2.2rem;
  display:grid;place-items:center;
  font-variant-numeric:lining-nums tabular-nums}
@media (max-width:560px){
  .ziele{gap:1.3rem}
  .ziele li{padding-top:.9rem}
  .ziele li::before{top:1rem}
}

/* ---------- Vorstand ---------- */
/* Vorstand: gesetzte Liste statt Kartenraster */
.vorstand{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--linie)}
.person{display:grid;grid-template-columns:64px minmax(0,15rem) minmax(0,1fr);gap:0 1.8rem;
  align-items:start;padding:1.7rem 0;border-bottom:1px solid var(--linie)}
.person .platzhalter{width:56px;height:56px;background:var(--lila-050);color:var(--lila-700);
  display:grid;place-items:center;font-family:var(--schrift-ui);font-size:1.15rem;font-weight:500}
.person b{font-family:var(--schrift-titel);font-size:1.28rem;font-weight:600;letter-spacing:-.01em;
  align-self:center;text-wrap:balance}
/* Amt unter dem Namen, nicht dahinter */
.person b small{display:block;margin-top:.3rem;font-family:var(--schrift-ui);font-size:.85rem;
  font-weight:500;letter-spacing:.02em;color:var(--lila-700)}
.person span{font-size:1rem;color:var(--tinte-weich);line-height:1.62}
@media (max-width:760px){
  .person{grid-template-columns:56px minmax(0,1fr);gap:.6rem 1.2rem}
  .person b{align-self:center}
  .person span{grid-column:2}
}

/* ---------- Presse ---------- */
.presse-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.6rem}
.presse-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .25s,border-color .25s}
.presse-karte:hover{box-shadow:var(--schatten);border-color:var(--lila-300)}
.presse-karte a{display:block;background:var(--papier-warm);padding:.9rem}
.presse-karte img{width:100%;height:290px;object-fit:cover;object-position:top center;border-radius:0;
  transition:opacity .2s}
.presse-karte a:hover img{opacity:.88}
.presse-text{padding:1.2rem 1.4rem 1.5rem}
.presse-text small{display:block;font-family:var(--schrift-ui);font-size:.88rem;letter-spacing:.01em;
  color:var(--lila-700);font-weight:500;margin-bottom:.45rem}
.presse-text b{font-family:var(--schrift-titel);font-size:1.22rem;font-weight:600;display:block;line-height:1.25}


/* ---------- Instagram ---------- */
.insta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:.8rem;margin-top:2rem}
/* [hidden] verliert sonst gegen display:grid */
.insta[hidden]{display:none}
.insta a{position:relative;display:block;border-radius:0;overflow:hidden;aspect-ratio:1}
.insta img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.insta a:hover img{transform:scale(1.05)}
.insta a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(94,42,90,.55));
  opacity:0;transition:opacity .25s}
.insta a:hover::after{opacity:1}

/* ---------- Partner ---------- */
.partner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1rem;margin-top:2rem}
.partner div{background:transparent;border:0;border-top:1px solid var(--linie);border-radius:0;
  padding:1.2rem 0 0;text-align:left;font-size:.95rem;color:var(--tinte-weich);min-height:0}
.partner b{display:block;font-family:var(--schrift-titel);color:var(--tinte);font-size:1.1rem;margin-bottom:.3rem}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
@media(max-width:820px){.kontakt-raster{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
.feld{display:grid;gap:.4rem;margin-bottom:1rem}
.feld label{font-family:var(--schrift-ui);font-size:.95rem;font-weight:500}
.feld input,.feld textarea{font:inherit;padding:.8rem 1rem;border:1px solid var(--linie);border-radius:var(--radius-innen);
  background:#fff;width:100%}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--lila-300);outline-offset:1px}
.info-liste{list-style:none;padding:0;margin:0;display:grid;gap:1.3rem}
.info-liste b{display:block;font-family:var(--schrift-ui);font-size:.88rem;letter-spacing:.01em;
  color:var(--lila-700);font-weight:500;margin-bottom:.3rem}
.info-liste a{color:var(--tinte)}

.spende{background:var(--lila-050);border:0;border-radius:var(--radius);padding:1.9rem 2rem}
.spende dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.6rem;font-size:1rem;
  font-family:var(--schrift-ui)}
.spende dt{color:var(--tinte-weich)}
.spende dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Kontonummern ----------
   IBAN und BIC sind eine Einheit: ein Umbruch mitten in der Nummer laedt
   zum Verlesen ein, und bei grosser Zeilenhoehe sieht er wie eine
   Leerzeile aus. Deshalb nowrap - und damit das auf schmalen Telefonen
   nicht ueber den Rand laeuft, schrumpft die Zeile mit der Fensterbreite
   statt zu brechen. */
.nummer{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(.74rem,3.4vw,1em)}

/* Auf dem Telefon steht die Beschriftung ueber dem Wert - sonst bleiben
   fuer die IBAN 143 von 271 px. */
@media(max-width:600px){
  .spende{padding:1.5rem 1.25rem}
  .spende dl{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .spende dt{margin-top:.7rem}
  .spende dl dt:first-child{margin-top:0}
}

/* ---------- Mitlaufendes Inhaltsverzeichnis ----------
   Nur auf "Ueber uns": die Seite ist lang, und der Verein wollte die
   Abschnitte direkt anspringen koennen. Es klebt unter der Kopfzeile und
   hebt hervor, wo man liest - Anker allein sagen einem das nicht.
   z-index unter dem der Kopfzeile (60), damit es darunter durchlaeuft. */
.seitenweiser{
  position:sticky;top:var(--kopf-hoehe);z-index:50;
  background:var(--papier);border-bottom:1px solid var(--linie)}
.seitenweiser ol{
  list-style:none;margin:0;padding:0;display:flex;gap:0;
  overflow-x:auto;scrollbar-width:none}
.seitenweiser ol::-webkit-scrollbar{display:none}
.seitenweiser a{
  display:block;padding:.85rem 1.1rem;text-decoration:none;
  font-family:var(--schrift-ui);font-size:.88rem;font-weight:500;
  color:var(--tinte-weich);white-space:nowrap;
  border-bottom:2px solid transparent}
.seitenweiser a:hover{color:var(--lila-900);background:var(--lila-050)}
.seitenweiser a[aria-current="true"]{color:var(--lila-900);border-bottom-color:var(--lila)}
.seitenweiser li:first-child a{padding-left:0}

/* Damit ein Sprung die Ueberschrift nicht hinter den beiden klebenden
   Leisten parkt. */
#wer-sind-wir,#geschichte,#ziele,#arbeitsweise,#vorstand,#satzung{
  scroll-margin-top:calc(var(--kopf-hoehe) + 3.4rem)}

@media (max-width:640px){
  .seitenweiser a{padding:.7rem .8rem;font-size:.82rem}
}

/* ---------- Einwilligung ----------
   Erscheint nur, wenn ein Fremd-Widget eingerichtet ist (WIDGET in
   bausteine.py). Ohne das setzt die Seite nichts auf dem Endgeraet und
   braucht keine Einwilligung.

   Ablehnen ist so leicht wie Zustimmen: beide Knoepfe gleich gross,
   nebeneinander, Unterschied nur in der Fuellung. Eine versteckte oder
   kleinere Ablehnung waere keine wirksame Einwilligung. */
.einwilligung{position:fixed;inset:auto 0 0;z-index:80;
  background:var(--tinte-tief);color:rgba(255,255,255,.88);
  border-top:3px solid var(--lila);
  box-shadow:0 -12px 32px rgba(30,7,28,.28)}
.einwilligung[hidden]{display:none}
.einwilligung-innen{max-width:1180px;margin-inline:auto;
  padding:1.3rem clamp(1rem,4vw,2rem);
  display:flex;gap:1.6rem 2.4rem;align-items:center;flex-wrap:wrap}
.einwilligung h2{margin:0 0 .4rem;font-size:1.02rem;font-weight:600;color:#fff;
  letter-spacing:0}
.einwilligung p{margin:0;font-size:.92rem;line-height:1.5;max-width:74ch;
  color:rgba(255,255,255,.84)}
.einwilligung a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.einwilligung-knoepfe{display:flex;gap:.7rem;flex-wrap:wrap;margin-left:auto}
.einwilligung-knoepfe .knopf{min-width:11rem;justify-content:center;text-align:center}
.einwilligung-knoepfe .knopf.leer{background:none;color:#fff;border-color:rgba(255,255,255,.6)}
.einwilligung-knoepfe .knopf.leer:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media (max-width:700px){
  .einwilligung-innen{padding:1.1rem 1.25rem;gap:1rem}
  .einwilligung-knoepfe{margin-left:0;width:100%}
  .einwilligung-knoepfe .knopf{flex:1 1 9rem;min-width:0}
}

/* Der gesperrte Instagram-Bereich. Kein Vorschaubild dahinter - eigene
   Fotos als Stellvertreter wollte der Verein nicht. */
.insta-sperre{border:1.5px solid var(--linie);background:var(--lila-050);
  padding:clamp(1.4rem,4vw,2.2rem);margin-top:.4rem}
.insta-sperre[hidden],.insta-widget[hidden]{display:none}
.insta-sperre p{margin:0;max-width:62ch;color:var(--tinte-weich)}
.insta-sperre p + p{margin-top:1.1rem}
/* Instagrams Rahmen kann seine Hoehe nicht melden - ihr embed.js macht
   das sonst per postMessage, und das laden wir nicht. Also gibt das
   Verhaeltnis die Hoehe: drei Spalten quadratischer Kacheln plus
   Profilkopf. Scrollen im Rahmen bleibt erlaubt, damit nichts abgeschnitten
   ist, wenn Instagram das Layout aendert. */
.insta-rahmen{margin-top:.4rem;max-width:620px;border:1.5px solid var(--linie);
  background:#fff}
.insta-rahmen iframe{display:block;width:100%;aspect-ratio:1/0.92;border:0}
.insta-rahmen[hidden]{display:none}
@media (max-width:520px){
  .insta-rahmen iframe{aspect-ratio:1/1.05}
}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--lila-900);color:rgba(255,255,255,.78);padding:4rem 0 2rem;font-size:.95rem}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
@media(max-width:860px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media(max-width:520px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}
.fuss h4{color:#fff;font-family:var(--schrift-ui);font-size:.95rem;font-weight:500;letter-spacing:.01em;
  margin-bottom:1rem}
.fuss a{color:rgba(255,255,255,.78);text-decoration:none;display:block;padding:.2rem 0}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-marke{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.fuss-marke img{width:52px;height:52px}
.fuss-unten{border-top:1px solid rgba(255,255,255,.16);margin-top:3rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.87rem}

/* ---------- Seitenkopf der Unterseiten: zweispaltig, mit kraeftiger Oberlinie ---------- */
.seitenkopf{background:var(--papier);border-bottom:1px solid var(--linie);
  padding:clamp(1.8rem,3.4vw,2.6rem) 0 clamp(1.9rem,3.4vw,2.6rem)}
/* Der Titel beginnt auf derselben Achse wie jede Ueberschrift darunter.
   Vorher schob ihn eine 11-rem-Randspalte um 224 px nach rechts, wodurch er
   gegen den ganzen Seiteninhalt versetzt stand. Der laufende Kopf sitzt
   jetzt rechts oben - Reihenfolge im Text bleibt, damit auf dem Telefon
   die Zeile weiter ueber dem Titel steht. */
.seitenkopf .huelle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,12rem);
  gap:1rem 3rem;border-top:2px solid var(--tinte);padding-top:1.5rem}
.seitenkopf .huelle > div{grid-column:1;grid-row:1}
.laufzeile{grid-column:2;grid-row:1;text-align:right;
  font-family:var(--schrift-ui);font-size:.92rem;font-weight:500;color:var(--lila-700);
  margin:0;padding-top:.5rem}
.seitenkopf h1{margin:0 0 1.6rem;text-wrap:balance;line-height:1.06}
.seitenkopf p{color:var(--tinte-weich);max-width:52ch;font-size:1.1rem;margin-bottom:0}
@media (max-width:760px){
  .seitenkopf .huelle{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .seitenkopf .huelle > div{grid-column:1;grid-row:2}
  .laufzeile{grid-column:1;grid-row:1;text-align:left;padding-top:0}
}

/* ---------- Lightbox ---------- */
.lichtbox{position:fixed;inset:0;background:rgba(36,28,38,.94);display:none;place-items:center;z-index:100;padding:2rem}
.lichtbox.offen{display:grid}
.lichtbox img{max-width:min(1200px,92vw);max-height:88vh;width:auto;border-radius:0}
.lichtbox button{position:absolute;top:1.5rem;right:1.5rem;background:rgba(255,255,255,.14);border:0;color:#fff;
  width:44px;height:44px;border-radius:0;font-size:1.4rem;cursor:pointer;line-height:1}

.springmarke{position:absolute;left:0;top:-200px;background:var(--lila);color:#fff;padding:.7rem 1.2rem;border-radius:0;z-index:200}
.springmarke:focus{top:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Anlaufstellen: gesetzte Liste statt drei gleicher Karten ---------- */
.anlaufstellen{margin:1.4rem 0 0;display:grid;gap:0;border-top:1px solid var(--linie)}
.anlaufstellen > div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.4rem 2.5rem;padding:1.7rem 0;border-bottom:1px solid var(--linie)}
.anlaufstellen dt{font-family:var(--schrift-ui);font-size:.95rem;font-weight:500;color:var(--lila-700)}
.anlaufstellen dd{margin:0;max-width:60ch}
.anlaufstellen h3{margin-bottom:.5rem}
.anlaufstellen p{color:var(--tinte-weich);margin-bottom:.9rem}
@media (max-width:760px){
  .anlaufstellen > div{grid-template-columns:minmax(0,1fr);padding:1.6rem 0}
}

/* ============================================================
   Icons (Phosphor, via 21st.dev) + Bewegung
   ============================================================ */
.icon{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.mit-icon{display:inline-flex;align-items:center;gap:.45rem}
.info-liste b{display:flex;align-items:center;gap:.45rem}
.info-liste b .icon{color:var(--lila)}
.kennzeichen .icon{color:var(--lila)}
.knopf .icon{margin-right:-.15rem}
.textlink .icon{opacity:.65;transition:opacity .18s,transform .18s}
.textlink:hover .icon{opacity:1;transform:translate(1px,-1px)}
.suche-knopf .icon,.menue-knopf .icon{transition:transform .2s}
.suche-knopf:hover .icon{transform:scale(1.08)}

/* ---------- Hero: gestaffelter Einlauf beim Laden ---------- */
@keyframes herein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-text > *{animation:herein .7s cubic-bezier(.22,.7,.24,1) both}
.hero-ort{animation-delay:.05s}
.hero h1{animation-delay:.16s}
.hero-lead{animation-delay:.30s}
.hero-knoepfe{animation-delay:.42s}

/* ---------- Zeitachse: die Linie zeichnet sich beim Scrollen ----------
   Die graue Spur liegt fest, darueber waechst eine lila Spur mit dem
   Scrollfortschritt. Der Faden der Vereinsgeschichte, der sich zieht. */
.linie{position:relative}
.linie::before,.linie::after{content:"";position:absolute;left:calc(6rem + 1.2rem + .85rem - 1px);
  top:1.9rem;width:2px;pointer-events:none}
.linie::before{bottom:1.5rem;background:var(--lila-100)}
.linie::after{height:calc(var(--fortschritt,0) * (100% - 3.4rem));background:var(--lila);
  transition:height .12s linear}
.station-rail::before{display:none}

@media (max-width:660px){
  .linie::before,.linie::after{left:calc(.85rem - 1px)}
}

/* Der Stern am Neustart dreht sich sanft ein, wenn er sichtbar wird */
@keyframes stern-ein{from{opacity:0;transform:translateX(-50%) rotate(-90deg) scale(.4)}
                     to{opacity:1;transform:translateX(-50%) rotate(0) scale(1)}}
.station.stern .station-rail::after{animation:stern-ein .8s cubic-bezier(.22,.9,.3,1) both}

@media (prefers-reduced-motion:reduce){
  .hero-text > *{animation:none}
  .station.stern .station-rail::after{animation:none}
  .linie::after{display:none}
}

/* ============================================================
   Bedienelemente
   ============================================================ */

/* ---------- Kurzes Zeitband (Startseite) ----------
   Der Verein wollte die lange senkrechte Achse nur noch auf "Ueber uns"
   haben. Hier tragen fuenf Daten den Bogen in einem Blick.
   Die durchgehende Oberlinie mit den Marken darauf macht daraus eine
   Chronologie - fuenf Kaesten nebeneinander waeren nur ein Kartenraster,
   und genau das soll die Seite nicht sein. */
.zeitband{
  list-style:none;margin:2.8rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));
  border-top:2px solid var(--tinte)}
.zeitband li{position:relative;padding:1.6rem 1.5rem 0 0}
/* Die Marke sitzt auf der Linie, eckig wie die Jahreszahlen der langen Achse */
.zeitband li::before{content:"";position:absolute;top:-2px;left:0;
  width:11px;height:11px;background:var(--lila)}
.zeitband li + li{border-left:1px solid var(--linie);padding-left:1.5rem}
.zeitband li + li::before{left:1.5rem}
.zeitband-jahr{display:block;font-family:var(--schrift-titel);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1;letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums}
.zeitband-jahr small{display:block;margin-top:.35rem;font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich)}
/* Im Band wird getrennt, nicht gebrochen: overflow-wrap:break-word aus
   den Grundregeln zerlegt hier sonst "Migrationsgeschichten" ohne
   Trennstrich mitten im Wort. */
.zeitband p{margin:.85rem 0 0;font-size:.93rem;line-height:1.5;color:var(--tinte-weich);
  overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}

/* Auf dem Telefon kippt das Band in die Senkrechte. Ein seitlich
   scrollendes Band waere hier die schlechtere Loesung: man muss erst
   merken, dass da noch etwas kommt. */
@media (max-width:700px){
  .zeitband{grid-template-columns:minmax(0,1fr);border-top:0;
    border-left:2px solid var(--tinte);margin-left:5px}
  .zeitband li{padding:0 0 1.6rem 1.5rem}
  .zeitband li:last-child{padding-bottom:0}
  .zeitband li::before{top:.35rem;left:-6px}
  .zeitband li + li{border-left:0;padding-left:1.5rem}
  .zeitband li + li::before{left:-6px}
  .zeitband p{margin-top:.5rem}
}


/* ---------- Aufklappbare Fragen ---------- */
.fragen{margin-top:2.4rem;border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:1.3rem 2.6rem 1.3rem 0;position:relative;
  font-family:var(--schrift-titel);font-size:clamp(1.1rem,1.6vw,1.28rem);font-weight:600;
  letter-spacing:-.01em;transition:color .18s}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--lila-900)}
.fragen summary:focus-visible{outline:2px solid var(--lila-300);outline-offset:3px;border-radius:0}
/* Plus, das beim Aufklappen zum Minus wird */
.fragen summary::before,.fragen summary::after{content:"";position:absolute;right:.35rem;top:50%;
  background:var(--lila);transition:transform .25s cubic-bezier(.3,.8,.3,1)}
.fragen summary::before{width:15px;height:2px;transform:translateY(-50%)}
.fragen summary::after{width:2px;height:15px;right:.85rem;transform:translateY(-50%)}
.fragen details[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.fragen .antwort{overflow:hidden;padding:0 3rem .2rem 0}
.fragen .antwort p{color:var(--tinte-weich);margin-bottom:1.3rem}
@media (prefers-reduced-motion:no-preference){
  @keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .fragen details[open] .antwort{animation:aufklappen .28s ease both}
}

/* ---------- Kopierknopf ---------- */
.mit-kopie{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.kopieren{position:relative;font-family:var(--schrift-ui);font-size:.86rem;font-weight:500;
  cursor:pointer;border:1px solid var(--lila-300);background:#fff;color:var(--lila-900);
  border-radius:var(--radius-innen);padding:.34rem .7rem;transition:background .18s,border-color .18s}
.kopieren:hover{background:var(--lila-050);border-color:var(--lila)}
.kopieren span{display:inline-flex;align-items:center;gap:.35rem;transition:opacity .2s,transform .2s}
.kopieren .kopie-fertig{position:absolute;inset:0;justify-content:center;opacity:0;
  transform:translateY(4px);color:#1C6B4A}
.kopieren.fertig{border-color:#9FD3BC;background:#EAF7F1}
.kopieren.fertig .kopie-ruhe{opacity:0;transform:translateY(-4px)}
.kopieren.fertig .kopie-fertig{opacity:1;transform:none}

/* ---------- Zurueck nach oben ---------- */
.nach-oben{position:fixed;right:1.4rem;bottom:1.4rem;z-index:70;width:46px;height:46px;
  border-radius:0;border:1px solid var(--linie);background:rgba(252,250,252,.92);
  backdrop-filter:blur(10px);color:var(--lila-900);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--schatten);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .25s,transform .25s}
.nach-oben.sichtbar{opacity:1;transform:none;pointer-events:auto}
.nach-oben:hover{border-color:var(--lila-300);color:var(--lila)}


/* Standbild-Modus (?standbild) – nur fuer Screenshots und Abnahmen */
.standbild .hero-text > *,
.standbild .station.stern .station-rail::after,
.standbild .fragen details[open] .antwort{animation:none !important}
.standbild .linie::after{transition:none}

/* ---------- "Weiterlesen" - langer Text, erster Absatz sichtbar ---------- */
.weiterlesen > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:.55rem;font-family:var(--schrift-titel);font-weight:600;font-size:.95rem;
  letter-spacing:.02em;color:var(--lila);border-bottom:1px solid var(--lila-300);
  padding-bottom:2px;width:auto}
.weiterlesen > summary::-webkit-details-marker{display:none}
.weiterlesen > summary::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.weiterlesen[open] > summary::after{transform:rotate(-135deg) translateY(1px)}
.weiterlesen > summary:hover{color:var(--lila-900);border-bottom-color:var(--lila-900)}
.weiterlesen > summary:focus-visible{outline:2px solid var(--lila-300);outline-offset:3px}
.weiterlesen[open] > summary{margin-bottom:.9rem}

/* ---------- Gruppenueberschrift auf der Projektseite ---------- */
.gruppen-titel{margin:.3rem 0 2.6rem;padding-bottom:1rem;
  border-bottom:1px solid var(--linie)}

/* ---------- Kontaktformular ---------- */
/* Die Falle fuer Maschinen: fuer Menschen nicht vorhanden. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--linie);
  font-size:.95rem;line-height:1.5}
.form-meldung.gut{border-color:var(--lila-300);background:var(--lila-050);
  color:var(--lila-900)}
.form-meldung.schlecht{border-color:#c2410c;background:#fff7ed;color:#7c2d12}

/* ---------- Logo als Siegel ---------- */
.siegel{display:block;height:auto;margin-bottom:1.4rem}
.siegel.mitte{margin-inline:auto}

/* Sprungziele nicht unter die klebende Kopfzeile rutschen lassen */
section[id],article[id],figure[id],[id].galerie,[id].fragen,#spende,#beratung{scroll-margin-top:84px}

/* ---------- Initial im ersten Absatz der Vereinsgeschichte ---------- */
.erstabsatz::first-letter{
  float:left;font-family:var(--schrift-titel);font-weight:600;font-size:4.1em;line-height:.78;
  padding:.06em .1em 0 0;color:var(--lila)}
.erstabsatz{text-indent:0}

/* Symbol in der Randspalte der Wege-Liste */
.wege dt{display:flex;align-items:center;gap:.5rem;align-self:start}
.wege dt .icon{color:var(--lila)}

/* ---------- Vollbreites Bild: bricht einmal aus der Spalte aus ---------- */
.bildstreifen{padding:0;margin:0;position:relative}
.bildstreifen img{width:100%;height:clamp(300px,42vw,540px);object-fit:cover;object-position:center 40%}
.bildstreifen figcaption{width:min(100% - 2.5rem,var(--breite));margin:.85rem auto 0;
  font-family:var(--schrift-ui);font-size:.88rem;color:var(--tinte-weich);
  display:flex;gap:.9rem;align-items:baseline}
.bildstreifen figcaption::before{content:"";flex:0 0 2.4rem;height:1px;background:var(--lila-300);
  transform:translateY(-.35em)}
.bildstreifen{margin-bottom:clamp(3.6rem,7vw,5.8rem)}
/* Stoesst der Bildstreifen unten direkt an ein Farbband, wuerde der
   Abstand als weisser Spalt zwischen zwei randlosen Flaechen stehen. */
.bildstreifen.anschluss{margin-bottom:0}

/* ============================================================
   Laufband für Partnerlogos
   ------------------------------------------------------------
   Nachbau der Komponente "InfiniteSlider" (motion-primitives,
   über 21st.dev). Das Original braucht framer-motion und
   react-use-measure; hier reicht CSS, weil die Mechanik simpel
   ist: die Spur enthält den Inhalt zweimal und wandert um genau
   eine Hälfte nach links. In dem Moment sieht die zweite Hälfte
   exakt so aus wie die erste am Anfang – der Sprung zurück auf
   0 fällt niemandem auf.

   Der Versatz ist "-50% minus eine halbe Lücke", weil die Lücke
   zwischen den beiden Hälften sonst mitwandert und das Band bei
   jeder Runde ruckelt.
   ============================================================ */
.laufband{overflow:hidden;margin-top:2rem;
  /* an den Rändern ausblenden statt hart abschneiden */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.laufband-spur{display:flex;width:max-content;align-items:center;
  gap:var(--luecke,4.5rem);
  animation:laufband var(--dauer,42s) linear infinite}
.laufband:hover .laufband-spur{animation-duration:calc(var(--dauer,42s) * 2.5)}
@keyframes laufband{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--luecke,4.5rem) / 2))}
}
.laufband img{height:clamp(38px,4.4vw,58px);width:auto;flex-shrink:0;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.laufband a:hover img,.laufband img:hover{filter:none;opacity:1}
.laufband a{display:block;flex-shrink:0}

/* Ohne Bewegung reicht eine Haelfte der Spur - sonst steht jedes Logo
   zweimal da. Es sind vier Partner, verdoppelt also acht Kinder: ab dem
   FUENFTEN wird versteckt. Mit n+4 fiel das Logo des Landes Hessen ganz
   weg, und zwar nur fuer Leute, die Bewegung abgeschaltet haben. */
@media (prefers-reduced-motion:reduce){
  .laufband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .laufband-spur{animation:none}
  .laufband-spur > :nth-child(n+5){display:none}
}

/* Dasselbe im Standbild. Ohne das laeuft das Band waehrend einer
   ganzseitigen Aufnahme weiter - Playwright setzt die aus mehreren
   Durchgaengen zusammen, und an der Nahtstelle liegen dann zwei Spuren
   uebereinander. */
.standbild .laufband{overflow:hidden;-webkit-mask-image:none;mask-image:none}
.standbild .laufband-spur{animation:none !important}
.standbild .laufband-spur > :nth-child(n+5){display:none}

/* Förderer als Textzeile – dafür liegen keine Logos vor */
.foerderer{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.5rem 2.5rem}
.foerderer dt{font-family:var(--schrift-ui);font-size:.95rem;font-weight:500;color:var(--lila-700)}
.foerderer dd{margin:0;color:var(--tinte-weich);max-width:62ch}
@media (max-width:760px){.foerderer{grid-template-columns:minmax(0,1fr)}}

/* ——— Zweispaltige Reihe im Wechsel (Veranstaltungen, Projekte) ——————— */
.reihe{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
        gap:clamp(1.8rem,3.6vw,3.4rem);align-items:start;
        padding:clamp(2.6rem,5vw,4.2rem) 0;border-top:1px solid var(--linie)}
.reihe:first-of-type{border-top:0;padding-top:.6rem}
.reihe.gespiegelt{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
.reihe.gespiegelt .reihe-bild{order:2}
.reihe-bild{margin:0}
.reihe-bild img{display:block;width:100%;background:var(--lila-050);
        transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .3s}
.reihe-bild.foto img{aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.reihe-bild.plakat img{border:1px solid var(--linie);cursor:zoom-in}
/* Hochformat-Fotos: kein erzwungenes 4:3. Ein stehendes Foto in ein
   liegendes Fenster zu zwingen kostet 44 Prozent des Bildes - beim
   Treffen 2024 war das der Kopf der Fotografin. */
.reihe-bild.hoch img{cursor:zoom-in}

.reihe-bild img:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.reihe-bild figcaption{font-size:.8rem;color:var(--tinte-weich);margin-top:.6rem;letter-spacing:.02em}
.reihe-marke{display:block;font-family:var(--schrift-ui);font-size:.9rem;font-weight:500;
        letter-spacing:.02em;color:var(--lila-700);
        font-variant-numeric:lining-nums tabular-nums;margin-bottom:.5rem}
.reihe h2,.reihe h3{margin-bottom:.9rem;text-wrap:balance}
/* Die Titel des Vereins sind lang – hier eine Stufe kleiner als sonst,
   sonst fuellt eine Ueberschrift die halbe Spalte */
.reihe h2{font-size:clamp(1.55rem,2.5vw,2.15rem);letter-spacing:-.02em}
.reihe p{color:var(--tinte-weich)}
@media (max-width:820px){
  .reihe,.reihe.gespiegelt{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .reihe.gespiegelt .reihe-bild{order:0}
  .reihe-bild.plakat{max-width:min(340px,100%)}
}

/* Kurzer Hinweisbalken statt großer Leerfläche */
.balken{display:flex;align-items:center;gap:1.2rem 1.8rem;flex-wrap:wrap;
        background:var(--papier-warm);border-left:3px solid var(--lila);
        padding:1.2rem 1.6rem;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.balken .icon{color:var(--lila);flex-shrink:0}
.balken p{margin:0;flex:1 1 22rem;color:var(--tinte-weich);font-size:1rem}
.balken b{color:var(--tinte);font-family:var(--schrift-ui);font-weight:500}
.balken .knopf{flex-shrink:0}


/* Zwei Plakate nebeneinander unter dem Projekttext */
.plakatpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem}
.plakatpaar figure{margin:0}
.plakatpaar img{width:100%;display:block;border:1px solid var(--linie);cursor:zoom-in;
        background:#fff;transition:transform .4s cubic-bezier(.2,.6,.2,1),box-shadow .3s}
.plakatpaar img:hover{transform:translateY(-3px);box-shadow:var(--schatten)}

/* Spendenkonto und QR-Code nebeneinander */
.spendenweg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
        gap:clamp(1.6rem,3vw,2.6rem);align-items:start;margin-top:2.2rem}
.qr{margin:0;text-align:center}
.qr img{width:100%;max-width:210px;display:block;margin:0 auto;
        border:1px solid var(--linie);background:#fff;padding:.7rem}
.qr figcaption{margin-top:.8rem;font-size:.92rem;color:var(--tinte-weich);line-height:1.5}
@media (max-width:760px){
  .spendenweg{grid-template-columns:minmax(0,1fr)}
  .qr{text-align:left}
  .qr img{margin:0}
}



/* Anfahrt ohne eingebettete Karte */
.anfahrt{margin-top:2.2rem;border-top:1px solid var(--linie);padding-top:1.5rem}
.anfahrt h3{margin-bottom:.6rem;font-size:1.2rem}
.anfahrt p{color:var(--tinte-weich)}
.anfahrt-fuss{font-size:.85rem;margin-top:1.2rem;padding-top:1rem;
  border-top:1px dotted var(--linie);max-width:58ch}

/* ============================================================
   5 · Galerie als Bento-Raster
   ------------------------------------------------------------
   Aufbau nach "Interactive Bento Gallery" von Anurag Mishra
   (21st.dev). Das Original ist React mit framer-motion und
   arbeitet mit Tailwind-Spannweiten pro Kachel
   (md:col-span-2 md:row-span-3). Hier stehen die Plaetze
   stattdessen als benannte Felder im Raster: so ist die
   Komposition eine Entscheidung und nicht ein Zufall des
   Umbruchs.

   Ein Feld je Anlass. Der Text des Vereins steht dauerhaft auf
   dem Bild, nicht erst beim Zeigen mit der Maus - er ist der
   Inhalt und keine Zutat.
   ============================================================ */
.bento{display:grid;gap:1rem;margin-top:.5rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  /* Jedes Feld mindestens zwei Zeilen hoch: in einer einzigen Zeile
     rutscht der Text aus dem Schleier heraus und wird unlesbar. */
  grid-template-rows:repeat(6,minmax(132px,1fr));
  grid-template-areas:
    "erof erof mai   mai"
    "erof erof mai   mai"
    "erof erof marz  frueh"
    "arch arch marz  frueh"
    "arch arch tref  tref"
    "arch arch tref  tref"}

.bento-feld{position:relative;overflow:hidden;padding:0;border:0;cursor:pointer;
  background:var(--lila-050);color:#fff;text-align:left;font:inherit;display:block;
  transition:box-shadow .3s}
.bento-feld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1),filter .4s}
/* Ein leiser Markenton ueber dem ganzen Feld haelt die sechs Fotos zusammen */
.bento-feld::after{content:"";position:absolute;inset:0;
  background:rgba(30,9,28,.16)}
.bento-feld:hover img,.bento-feld:focus-visible img{transform:scale(1.045)}
.bento-feld:focus-visible{outline:3px solid var(--lila-300);outline-offset:-3px}
.bento-feld.greift{cursor:grabbing;z-index:5;box-shadow:0 18px 40px -12px rgba(26,6,24,.6)}
.bento-feld.greift img{filter:saturate(.9)}

/* Der Schleier haengt am Text, nicht am Feld. Die Felder sind unterschiedlich
   hoch - ein Verlauf ueber das ganze Feld deckt den Text dann mal zu dicht und
   mal gar nicht. So liegt die dichte Zone immer genau dort, wo Schrift steht,
   und lauft nach oben in der Polsterung aus. */
.bento-text{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;gap:.3rem;
  padding:clamp(3rem,6vw,4.6rem) clamp(1rem,1.7vw,1.5rem) clamp(1rem,1.7vw,1.5rem);
  background:linear-gradient(to top,
    rgba(22,5,20,.92) 0%,rgba(23,6,21,.87) 56%,rgba(34,10,31,.62) 74%,
    rgba(56,20,52,.26) 89%,transparent 100%)}
.bento-datum{font-family:var(--schrift-ui);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;color:var(--lila-300);
  font-variant-numeric:lining-nums tabular-nums}
.bento-text b{font-family:var(--schrift-titel);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.08;text-wrap:balance;
  text-shadow:0 1px 20px rgba(20,4,18,.6)}
.bento-satz{font-size:.97rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:44ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  text-shadow:0 1px 14px rgba(20,4,18,.5)}
.bento-zahl{margin-top:.45rem;font-family:var(--schrift-ui);font-size:.8rem;font-weight:500;
  letter-spacing:.03em;color:rgba(255,255,255,.72);
  font-variant-numeric:lining-nums tabular-nums;
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start}
.bento-zahl::before{content:"";width:1.6rem;height:1px;background:var(--lila-300)}
/* Die schmalen Felder haben weniger Platz: dort nur zwei Zeilen Text */
.bento-feld.schmal .bento-satz{-webkit-line-clamp:2;font-size:.92rem}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,minmax(150px,1fr));
    grid-template-areas:
      "erof erof"
      "erof erof"
      "mai   marz"
      "mai   marz"
      "frueh tref"
      "arch  arch"}
}
@media (max-width:560px){
  .bento{grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(6,minmax(240px,auto));
    grid-template-areas:"erof" "mai" "marz" "frueh" "tref" "arch"}
  .bento-feld.schmal .bento-satz{-webkit-line-clamp:3;font-size:.95rem}
}

/* Einlauf: die Felder kommen gestaffelt von unten */
@keyframes bento-ein{from{opacity:0;transform:translateY(34px) scale(.97)}
                     to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .bento-feld{animation:bento-ein .62s cubic-bezier(.22,.8,.26,1) both;
    animation-delay:calc(var(--nr,0) * .07s)}
}
.standbild .bento-feld{animation:none!important}

/* ------------------------------------------------------------
   Bildschau: ein Anlass ganz
   ------------------------------------------------------------ */
/* Deckend, nicht durchscheinend: bei 96 % blitzte die klebende Kopfzeile
   der Seite als Geist durch den Grund. */
.schau{position:fixed;inset:0;z-index:110;display:none;
  background:#190418;padding:clamp(.8rem,2vw,1.6rem)}
.schau.offen{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.schau-kopf{display:flex;align-items:baseline;gap:1rem 1.6rem;flex-wrap:wrap;
  width:min(100%,var(--breite));margin-inline:auto;
  padding:.2rem 3.6rem 1rem .2rem;color:#fff}
.schau-kopf b{font-family:var(--schrift-titel);font-size:clamp(1.1rem,1.6vw,1.4rem);
  font-weight:600;letter-spacing:-.015em}
.schau-datum{font-family:var(--schrift-ui);font-size:.86rem;letter-spacing:.04em;
  color:var(--lila-300);font-variant-numeric:lining-nums tabular-nums}
.schau-stand{font-family:var(--schrift-ui);font-size:.86rem;letter-spacing:.04em;
  color:rgba(255,255,255,.6);font-variant-numeric:lining-nums tabular-nums;
  margin-left:auto}
.schau-zu{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:44px;height:44px;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.schau-zu:hover{background:rgba(255,255,255,.12);border-color:#fff}

.schau-blatt{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.9rem;min-height:0;
  width:min(100%,var(--breite));margin-inline:auto}
/* Das Bild fuellt seine Rasterzeile und wird eingepasst. Mit max-height:100%
   lief es ueber die Zeile hinaus und schob die Unterschrift aus dem Bild. */
.schau-buehne{position:relative;display:grid;min-height:0;overflow:hidden}
.schau-buehne img{width:100%;height:100%;object-fit:contain;display:block}
.schau-unterschrift{width:min(100%,74ch);margin-inline:auto;text-align:center;
  font-size:.97rem;line-height:1.55;color:rgba(255,255,255,.82);min-height:1.5em}
.schau-blaettern{position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border:1px solid rgba(255,255,255,.28);background:rgba(24,6,22,.55);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.schau-blaettern:hover{background:rgba(255,255,255,.14);border-color:#fff}
.schau-blaettern.zurueck{left:0}
.schau-blaettern.vor{right:0}
@media (max-width:760px){.schau-blaettern{display:none}}

/* Das Miniaturband laesst sich mit der Maus verschieben - aus dem Original
   uebernommen. Die gewaehlte Miniatur steht aufrecht und etwas hoeher,
   die anderen liegen leicht schraeg uebereinander. */
.dock{position:relative;justify-self:center;margin-top:1rem;
  background:rgba(165,73,155,.22);border:1px solid rgba(216,164,203,.4);
  padding:.7rem .9rem;cursor:grab;touch-action:none;max-width:100%}
.dock.greift{cursor:grabbing}
.dock-spur{display:flex;align-items:center}
.dock-bild{position:relative;flex:0 0 auto;width:46px;height:46px;overflow:hidden;
  margin-inline:-5px;border:0;padding:0;background:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.22,.8,.26,1),outline-color .2s;
  outline:2px solid transparent;outline-offset:0}
.dock-bild img{width:100%;height:100%;object-fit:cover;display:block}
.dock-bild:nth-child(odd){transform:rotate(-9deg)}
.dock-bild:nth-child(even){transform:rotate(9deg)}
.dock-bild:hover{transform:rotate(0) scale(1.22) translateY(-7px);z-index:4}
.dock-bild[aria-current="true"]{transform:rotate(0) scale(1.18) translateY(-7px);z-index:3;
  outline-color:#fff}
@media (max-width:560px){
  .dock{overflow-x:auto;cursor:default;touch-action:pan-x;max-width:calc(100vw - 2rem)}
  .dock-bild{width:40px;height:40px;margin-inline:-3px}
}
/* Der Text des Anlasses steht auf dem Feld gekuerzt – hier vollstaendig */
.schau-satz{flex:1 0 100%;margin:.3rem 0 0;max-width:80ch;font-size:.97rem;
  line-height:1.55;color:rgba(255,255,255,.8)}

/* ------------------------------------------------------------
   Chronik auf "Ueber uns"
   ------------------------------------------------------------
   Die Vereinsgeschichte war elf Absaetze hintereinander in einer
   schmalen Spalte - eine Wand ohne Anker. Jetzt steht die Zeit in
   der Randspalte und bleibt beim Lesen ihrer Absaetze stehen.
   Bewusst ein anderer Baustein als die Liste der Arbeitsbereiche
   weiter unten, damit die Seite nicht zweimal gleich aussieht.
   ------------------------------------------------------------ */
.chronik{margin-top:2.8rem;display:grid;gap:0}
.chronik > div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.7rem 3.2rem;padding:2.5rem 0;border-top:1px solid var(--linie)}
.chronik > div:first-child{border-top:2px solid var(--tinte)}
.chronik-zeit{font-family:var(--schrift-titel);font-size:1.55rem;font-weight:600;
  line-height:1.05;letter-spacing:-.02em;color:var(--lila);
  font-variant-numeric:lining-nums tabular-nums;
  position:sticky;top:5.5rem;align-self:start}
.chronik-zeit small{display:block;margin-top:.4rem;font-family:var(--schrift-ui);
  font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--tinte-weich);
  line-height:1.35}
.chronik-text{max-width:66ch}
.chronik-text h3{margin-bottom:.7rem}
.chronik-text p:last-child{margin-bottom:0}
.chronik-text .beleg{margin-top:1.6rem}
.chronik-text .beleg.breit{max-width:420px}
@media (max-width:760px){
  .chronik > div{grid-template-columns:minmax(0,1fr);gap:.2rem;padding:2rem 0}
  .chronik-zeit{position:static;font-size:1.35rem}
  .chronik-zeit small{display:inline;margin:0 0 0 .6rem;font-size:.78rem}
}

/* Vier Kennzahlen als gesetzte Zeile statt vier Kaestchen */
.kurzgefasst{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin:2rem 0 0;
  padding-top:1.4rem;border-top:1px solid var(--linie)}
.kurzgefasst > div{display:block}
.kurzgefasst dt{font-family:var(--schrift-ui);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;color:var(--tinte-weich);margin-bottom:.15rem}
.kurzgefasst dd{margin:0;font-family:var(--schrift-titel);font-size:1.22rem;
  font-weight:600;letter-spacing:-.01em;color:var(--lila-900);
  font-variant-numeric:lining-nums tabular-nums}

/* ------------------------------------------------------------
   Instagram-Ticker
   ------------------------------------------------------------
   Die Bilder liegen bei uns (assets/instagram/, geholt von
   instagram.php). Deshalb kein Fremdrahmen, keine Einwilligung
   und kein Nachladen von Meta.
   ------------------------------------------------------------ */
.insta-stand{margin:.2rem 0 0;font-family:var(--schrift-ui);font-size:.85rem;
  letter-spacing:.02em;color:var(--tinte-weich);
  font-variant-numeric:lining-nums tabular-nums;min-height:1.2em}
.insta a.ist-video::before{content:"";position:absolute;z-index:1;
  left:.6rem;top:.6rem;width:0;height:0;
  border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(20,4,18,.6))}