/* Muslimisches Bildungswerk für Demokratie e. V.
   Layout: helle, ruhige Seiten; Farben aus dem Logo (Grün als Hauptfarbe, Rot/Gold/Schwarz als Rahmenmotiv).
   Schriften lokal eingebunden – keine Verbindung zu Google. */

@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* Logo-Farben */
  --gruen:#067834; --gruen-tief:#0A4F27; --gold:#F0C300; --rot:#E5271F; --schwarz:#121614;
  /* Flächen und Text */
  --bg:#FFFFFF; --flaeche:#F2F5F0; --flaeche-2:#E6EDE5; --linie:#D5DED4;
  --text:#121614; --text-2:#45524A; --link:#067834; --link-hover:#0A4F27;
  --kopf:#FFFFFF; --dunkel:#121614; --dunkel-text:#DDE5DE; --auf-gruen:#FFFFFF;
  --rahmen-schwarz:#121614;
  --schrift-titel:"Montserrat","Segoe UI",Arial,sans-serif;
  --schrift:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --breite:1200px; --rund:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1411; --flaeche:#161E19; --flaeche-2:#1E2822; --linie:#2C3A31;
  --text:#ECF1EC; --text-2:#B5C2B8; --link:#5CCB86; --link-hover:#8BE0AA;
  --kopf:#0F1411; --dunkel:#0A0D0B; --dunkel-text:#C9D4CC; --rahmen-schwarz:#ECF1EC; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1411; --flaeche:#161E19; --flaeche-2:#1E2822; --linie:#2C3A31;
  --text:#ECF1EC; --text-2:#B5C2B8; --link:#5CCB86; --link-hover:#8BE0AA;
  --kopf:#0F1411; --dunkel:#0A0D0B; --dunkel-text:#C9D4CC; --rahmen-schwarz:#ECF1EC; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--schrift);font-size:1.125rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:800;line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem)}
h3{font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:-.005em}
p{margin:0}
.prosa{display:flex;flex-direction:column;gap:1.05em;max-width:68ch}
.prosa h2{margin-top:.8em}.prosa h3{margin-top:.6em}
.prosa ul:not(.termin-programm){margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:.35em}

.sprung{position:absolute;left:-999px;top:0;background:var(--gold);color:#121614;padding:.6rem 1rem;z-index:20;font-weight:700}
.sprung:focus{left:16px;top:16px}

.rahmen{max-width:var(--breite);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.abschnitt{padding-block:clamp(56px,8vw,96px)}
.abschnitt.flaeche{background:var(--flaeche)}
.stapel{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.kopfzeile{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:flex-end;justify-content:space-between}
.kopfzeile p{max-width:52ch;color:var(--text-2)}
.dachzeile{font-family:var(--schrift-titel);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--link);display:inline-flex;align-items:center;gap:.6em}
.dachzeile::before{content:"";width:.7em;height:.7em;background:var(--gruen);box-shadow:-.32em .32em 0 -.08em var(--gold),-.62em .62em 0 -.16em var(--rot)}
.leise{color:var(--text-2)}
.mehr{font-weight:700}

/* Farbleiste aus dem Logo */
.leiste{height:6px;background:linear-gradient(90deg,var(--rahmen-schwarz) 0 33.3%,var(--rot) 33.3% 66.6%,var(--gold) 66.6%)}

/* Kopf */
.seitenkopf{background:var(--kopf);border-bottom:1px solid var(--linie);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.seitenkopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.marke{display:block;flex:0 1 auto}
.marke img{height:58px;width:auto}
.marke .hell{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marke .dunkel{display:none}:root:not([data-theme="light"]) .marke .hell{display:block}}
:root[data-theme="dark"] .marke .dunkel{display:none}:root[data-theme="dark"] .marke .hell{display:block}
.menue-knopf{display:none;font:inherit;font-weight:700;font-size:1rem;background:none;color:var(--text);border:2px solid var(--text);border-radius:var(--rund);padding:.5rem .9rem;min-height:44px;cursor:pointer;align-items:center;gap:.5em}
.menue-knopf .striche{width:18px;height:12px;border-block:2px solid currentColor;position:relative}
.menue-knopf .striche::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.hauptmenue ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.hauptmenue a{display:block;padding:.55rem .7rem;color:var(--text);text-decoration:none;font-weight:600;font-size:1.02rem;border-radius:var(--rund)}
.hauptmenue a:hover{background:var(--flaeche)}
.hauptmenue a[aria-current="page"]{color:var(--link);box-shadow:inset 0 -3px 0 var(--gold);border-radius:0}
.hauptmenue a.knopf-menue{background:var(--gruen);color:#fff;margin-left:6px;border-radius:var(--rund);box-shadow:none}
.hauptmenue a.knopf-menue:hover{background:var(--gruen-tief)}
@media (max-width:1040px){
  .marke img{height:48px}
  .js .menue-knopf{display:inline-flex}
  .js .hauptmenue{display:none;flex-basis:100%}
  .js .hauptmenue.offen{display:block}
  .hauptmenue ul{flex-direction:column;align-items:stretch;padding-block:8px}
  .hauptmenue a{padding:.8rem .5rem;border-bottom:1px solid var(--linie);border-radius:0}
  .hauptmenue a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--gold);padding-left:.9rem}
  .hauptmenue a.knopf-menue{margin:12px 0 0;text-align:center;border:0}
}
@media (max-width:420px){.marke img{height:40px}}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7rem 1.4rem;border-radius:var(--rund);font-weight:700;text-decoration:none;font-size:1.05rem;border:2px solid transparent;font-family:var(--schrift);cursor:pointer;line-height:1.2}
.knopf.primaer{background:var(--gruen);color:#fff}
.knopf.primaer:hover{background:var(--gruen-tief);color:#fff}
.knopf.rand{border-color:var(--text);color:var(--text);background:transparent}
.knopf.rand:hover{background:var(--text);color:var(--bg)}
.knopf.gold{background:var(--gold);color:#121614}
.knopf.gold:hover{background:#FFD52E;color:#121614}
.knopf.hell{border-color:#fff;color:#fff;background:transparent}
.knopf.hell:hover{background:#fff;color:#121614}

/* Startbereich */
.start{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,104px);overflow:hidden}
.start .rahmen{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,72px);align-items:center}
.start-text{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:22px}
.start-text .einleitung{font-size:1.25rem;color:var(--text-2);max-width:40ch}
.start-text h1 .gruen{color:var(--link)}

/* Bild im Logo-Rahmen: Foto mit schwarzem Rahmen, darunter versetzt Gold und Rot – wie im Logo */
.logo-rahmen{flex:1 1 400px;min-width:0;max-width:560px;margin-inline:auto;position:relative;padding:0 0 clamp(28px,4vw,44px) clamp(28px,4vw,44px)}
.logo-rahmen::before,.logo-rahmen::after{content:"";position:absolute;pointer-events:none;border:clamp(4px,.6vw,7px) solid;border-radius:2px}
.logo-rahmen::before{left:0;bottom:0;right:clamp(28px,4vw,44px);top:clamp(28px,4vw,44px);border-color:var(--rot)}
.logo-rahmen::after{left:calc(clamp(28px,4vw,44px)/2);bottom:calc(clamp(28px,4vw,44px)/2);right:calc(clamp(28px,4vw,44px)/2);top:calc(clamp(28px,4vw,44px)/2);border-color:var(--gold)}
.logo-rahmen .bild{position:relative;z-index:1;outline:clamp(4px,.6vw,7px) solid var(--rahmen-schwarz);outline-offset:0}
.bild{position:relative;z-index:1;margin-left:14px;margin-right:0}
.bild{position:relative;margin:0;aspect-ratio:4/3;max-width:100%;background:var(--flaeche-2);border-radius:3px;overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover}
.bild .ersatz{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-2);font-size:.95rem;text-align:center;padding:16px}
.bild .ersatz::before{content:"";width:22%;aspect-ratio:1;background:var(--gruen);box-shadow:0 0 0 10px var(--flaeche-2),0 0 0 15px var(--rahmen-schwarz)}
.bild.leer img{display:none}.bild.leer .ersatz{display:flex}
.bild-unterschrift{font-size:.9rem;color:var(--text-2);margin-top:12px;margin-left:14px;position:relative;z-index:1}

/* Schwerpunkte */
.schwerpunkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(28px,4vw,48px)}
.schwerpunkt{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:4px solid var(--rahmen-schwarz)}
.schwerpunkt:nth-child(2){border-top-color:var(--rot)}
.schwerpunkt:nth-child(3){border-top-color:var(--gold)}
.schwerpunkt p{color:var(--text-2)}

/* Projekte */
.projekte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.projekt{background:var(--bg);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.flaeche .projekt{border-color:transparent}
.projekt p{color:var(--text-2)}
.projekt .mehr{margin-top:auto;padding-top:6px}
.etikett{align-self:flex-start;font-size:.82rem;font-weight:700;padding:.25rem .7rem;border-radius:99px;background:var(--gold);color:#121614;line-height:1.4}
.etikett.gruen{background:var(--gruen);color:#fff}
.etikett.grau{background:var(--flaeche-2);color:var(--text)}

/* Zahlen/Fakten (echte Angaben) */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;margin:0}
.fakten div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;border-left:4px solid var(--gruen);padding-left:16px}
.fakten dt{color:var(--text-2);font-size:1rem}
.fakten dd{margin:0;font-family:var(--schrift-titel);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;font-variant-numeric:tabular-nums}

/* Meldungen */
.meldungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,40px)}
.meldung{display:flex;flex-direction:column;gap:12px;min-width:0}
.meldung .bild{aspect-ratio:3/2}
.meldung .datum{font-size:.88rem;font-weight:700;color:var(--link);letter-spacing:.04em;text-transform:uppercase}
.meldung p{color:var(--text-2)}

/* Artikel auf "Aktuelles" */
.beitraege{display:flex;flex-direction:column;gap:0}
.beitrag{display:flex;flex-wrap:wrap;gap:20px clamp(28px,4vw,56px);padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--linie);scroll-margin-top:110px}
.beitrag:first-child{border-top:0;padding-top:0}
.beitrag-kopf{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.beitrag-kopf .datum{font-weight:700;color:var(--link);font-size:.95rem}
.beitrag-text{flex:2.4 1 460px;min-width:0}
.foerderhinweis{font-size:.95rem;color:var(--text-2);border-left:4px solid var(--gold);padding:.2rem 0 .2rem 1rem;font-style:italic}

/* Termine */
.termine{display:flex;flex-direction:column;gap:12px}
.termin{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:20px 24px;border:1px solid var(--linie);border-radius:var(--rund);background:var(--bg)}
.termin-datum{width:84px;display:flex;flex-direction:column;align-items:center;font-family:var(--schrift-titel);line-height:1}
.termin-datum b{font-size:2.2rem;font-weight:800;color:var(--link)}
.termin-datum span{font-size:.85rem;font-weight:700;text-transform:uppercase;margin-top:6px}
.termin-text{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.hinweis-kasten{border:2px dashed var(--linie);border-radius:var(--rund);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* Archiv-Liste */
.archiv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.archiv li{display:flex;flex-wrap:wrap;gap:4px 24px;padding-block:16px;border-top:1px solid var(--linie)}
.archiv time{flex:0 0 150px;font-weight:700;color:var(--link);font-variant-numeric:tabular-nums}
.archiv div{flex:1 1 300px;min-width:0}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:32px 24px}
.person{display:flex;flex-direction:column;gap:6px}
.person .bild{aspect-ratio:1;margin-bottom:10px}
.person .bild .ersatz::before{width:28%}
.person .rolle{font-weight:600;color:var(--link);font-size:1rem}
.person p{color:var(--text-2);font-size:1rem}

/* Partner */
.partnerliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 32px}
.partnerliste li{border-top:1px solid var(--linie)}
.partnerliste a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;text-decoration:none;color:var(--text);font-weight:600}
.partnerliste a::after{content:"↗";color:var(--link)}
.partnerliste a:hover{color:var(--link)}

/* Mitmachen-Band */
.band{background:var(--gruen);color:#fff;border-radius:var(--rund);padding:clamp(28px,5vw,64px);display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center;position:relative;overflow:hidden}
.band > div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.band h2{color:#fff}
.band p{color:#E3F0E7}
.band a:not(.knopf){color:#fff}

/* Förderer */
.foerderer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.foerderer a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:14px;border:1px solid var(--linie);border-radius:var(--rund);color:var(--text);text-decoration:none;font-weight:600;font-size:.98rem;line-height:1.3;background:var(--bg)}
.foerderer a:hover{border-color:var(--link);color:var(--link)}
.foerderer img{max-height:64px;width:auto}

/* Seitentitel für Unterseiten */
.seitentitel{background:var(--flaeche);padding-block:clamp(44px,6vw,72px);position:relative;overflow:hidden}
.seitentitel .rahmen{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.seitentitel p{font-size:1.2rem;color:var(--text-2);max-width:58ch}
.seitentitel::after{content:"";position:absolute;right:max(16px,calc((100vw - var(--breite))/2));top:50%;width:150px;height:150px;transform:translateY(-50%);border:6px solid var(--rahmen-schwarz);background:linear-gradient(var(--gruen),var(--gruen)) no-repeat 18% 78%/30% 30%;box-shadow:-26px 26px 0 -6px var(--flaeche),-26px 26px 0 0 var(--gold),-52px 52px 0 -6px var(--flaeche),-52px 52px 0 0 var(--rot);opacity:.95}
@media (max-width:800px){.seitentitel::after{display:none}}
.untermenue{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.untermenue a{padding:.45rem .9rem;border:1px solid var(--linie);border-radius:99px;text-decoration:none;font-weight:600;font-size:.98rem;background:var(--bg);color:var(--text)}
.untermenue a:hover{border-color:var(--link);color:var(--link)}

/* Zwei Spalten */
.zweispaltig{display:flex;flex-wrap:wrap;gap:32px clamp(32px,6vw,80px)}
.zweispaltig > *{flex:1 1 380px;min-width:0}

/* Formulare */
.formular{display:flex;flex-direction:column;gap:18px;max-width:640px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-weight:700;font-size:1rem}
.feld input,.feld textarea,.feld select{font:inherit;font-size:1.05rem;padding:.75rem .9rem;border:2px solid var(--linie);border-radius:var(--rund);background:var(--bg);color:var(--text);min-height:48px;width:100%}
.feld textarea{min-height:160px;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--gruen);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}
.zeile{display:flex;flex-wrap:wrap;gap:18px}.zeile > .feld{flex:1 1 220px}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.zustimmung input{width:22px;height:22px;margin-top:3px;accent-color:var(--gruen);flex:none}
.falle{position:absolute!important;left:-9999px!important}
.meldung-ok,.meldung-fehler{padding:14px 18px;border-radius:var(--rund);font-weight:600}
.meldung-ok{background:color-mix(in srgb,var(--gruen) 14%,var(--bg));border-left:5px solid var(--gruen)}
.meldung-fehler{background:color-mix(in srgb,var(--rot) 12%,var(--bg));border-left:5px solid var(--rot)}
.kontaktdaten{display:flex;flex-direction:column;gap:22px}
.kontaktdaten dl{margin:0;display:flex;flex-direction:column;gap:16px}
.kontaktdaten dt{font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.kontaktdaten dd{margin:2px 0 0;font-size:1.15rem}

/* Fuß */
.seitenfuss{background:var(--dunkel);color:var(--dunkel-text);font-size:1rem}
.seitenfuss a{color:var(--dunkel-text)}
.seitenfuss a:hover{color:#fff}
.seitenfuss .rahmen{padding-block:56px 28px;display:flex;flex-direction:column;gap:40px}
.fuss-spalten{display:flex;flex-wrap:wrap;gap:36px 56px}
.fuss-spalten > *{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.fuss-spalten .erste{flex:2 1 300px;gap:18px}
.fuss-spalten .erste img{height:64px;width:auto}
.fuss-spalten h2{font-family:var(--schrift);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.fuss-spalten ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fuss-unten{border-top:1px solid #2A332D;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:.95rem}
.fuss-unten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}

/* Vier Projektkarten nebeneinander auf breiten Bildschirmen */
.projekte.vier{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

/* Ablauf in Schritten (echte Reihenfolge) */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px}
.ablauf li{counter-increment:schritt;background:var(--bg);border-radius:var(--rund);padding:24px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--gruen)}
.ablauf li:nth-child(2){border-top-color:var(--gold)}
.ablauf li:nth-child(3){border-top-color:var(--rot)}
.ablauf li:nth-child(4){border-top-color:var(--rahmen-schwarz)}
.ablauf li::before{content:"Schritt " counter(schritt);font-family:var(--schrift-titel);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.ablauf p{color:var(--text-2);font-size:1rem}

/* Bildergalerie in Beiträgen */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.galerie-bild{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--flaeche-2)}
.galerie-bild.gross{grid-column:1/-1;aspect-ratio:16/9}
.galerie-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:560px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
.galerie.anzahl-3{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Termine im Detail (Veranstaltungsseite) */
.termine-liste{display:flex;flex-direction:column;gap:28px}
.termin-gross{display:flex;flex-wrap:wrap;gap:28px clamp(28px,5vw,64px);padding:clamp(24px,4vw,40px);border:1px solid var(--linie);border-top:6px solid var(--gruen);border-radius:var(--rund);background:var(--bg);scroll-margin-top:110px}
.termin-gross:nth-child(3n+2){border-top-color:var(--gold)}
.termin-gross:nth-child(3n+3){border-top-color:var(--rot)}
.termin-seite{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.termin-inhalt{flex:2.2 1 420px;min-width:0}
.termin-titel{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2}
.termin-datum.gross{width:auto;align-items:flex-start}
.termin-datum.gross b{font-size:clamp(2.4rem,5vw,3.2rem)}
.termin-datum.gross span{font-size:1rem;margin-top:8px}
.termin-fakten{margin:0;display:flex;flex-direction:column;gap:12px;width:100%}
.termin-fakten div{display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--linie);padding-left:12px}
.termin-fakten dt{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.termin-fakten dd{margin:0;font-size:1rem;line-height:1.45}
.klein{font-size:.92rem}
.kopierbar{user-select:all;word-break:break-all;color:var(--text)}
.termin-ablauf{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.termin-ablauf li{background:var(--flaeche);border-radius:var(--rund);padding:14px 16px;display:flex;flex-direction:column;gap:2px;font-size:1rem}
.termin-ablauf b{font-family:var(--schrift-titel);color:var(--link)}

/* Termine kompakt (Startseite) */
.termin-link{color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.termin-link:hover{border-color:var(--link);color:var(--text)}
.termin-link h3{font-size:1.15rem;margin:4px 0 2px}
.termin-link .leise{font-size:1rem}
.termin-link .mehr{font-size:1.5rem;color:var(--link);margin-left:auto}
.termin-link .termin-datum b{font-size:clamp(1.5rem,3vw,2.2rem)}
[hidden]{display:none!important}
@media (max-width:720px){.termin-gross .termin-inhalt{order:-1}}
.termin-datum span{text-align:center}
.termin-programm{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.termin-programm li{background:var(--flaeche);border-radius:99px;padding:.35rem .9rem;font-size:.98rem;font-weight:600}
.termin-programm{display:flex!important;flex-direction:row}.termin-programm li{flex:0 0 auto}
.galerie.anzahl-1 .galerie-bild.gross{aspect-ratio:3/2}
.galerie.anzahl-2{grid-template-columns:minmax(0,1fr)}

/* Förderlogos: immer auf weißem Grund, wie vom Fördermittelgeber vorgegeben */
.foerderer .logo-kachel{background:#fff;padding:10px 16px}
.foerderer .logo-kachel.breit{grid-column:span 2}
.foerderer .logo-kachel img{max-height:110px;width:auto;max-width:100%}
@media (max-width:440px){.foerderer .logo-kachel.breit{grid-column:auto}}
.foerderlogo{display:block;width:100%;max-width:340px;height:auto;background:#fff;border-radius:4px;padding:6px 8px;margin-top:-4px}
@media (min-width:900px){.foerderer{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:441px) and (max-width:899px){.foerderer{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.foerderer{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Bildfolge im Startbereich: vier Fotos, langsamer Überblendwechsel; erstes Bild ist ohne Animation sichtbar */
.bildfolge{position:relative;z-index:1;outline:clamp(4px,.6vw,7px) solid var(--rahmen-schwarz)}
.bildfolge .dia{position:absolute;inset:0;margin:0;opacity:0}
.bildfolge .dia:first-child{opacity:1}
.bildfolge .dia img{width:100%;height:100%;object-fit:cover}
.bildfolge figcaption{position:absolute;left:0;bottom:0;max-width:100%;background:rgba(18,22,20,.78);color:#fff;font-size:.9rem;font-weight:600;padding:.4rem .8rem;border-top-right-radius:3px}
@media (prefers-reduced-motion:no-preference){
  .bildfolge .dia{animation:dia 28s infinite;opacity:0}
  .bildfolge .dia:nth-child(1){animation-delay:0s}
  .bildfolge .dia:nth-child(2){animation-delay:7s}
  .bildfolge .dia:nth-child(3){animation-delay:14s}
  .bildfolge .dia:nth-child(4){animation-delay:21s}
  .bildfolge .dia:first-child{opacity:1}
  @keyframes dia{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
  .bildfolge:hover .dia{animation-play-state:paused}
}
@media (prefers-reduced-motion:no-preference){.bildfolge .dia:first-child{animation-name:dia-erst}@keyframes dia-erst{0%{opacity:1}25%{opacity:1}29%{opacity:0}96%{opacity:0}100%{opacity:1}}}

/* Fußbereich hell: hellgrauer Grund, dunkle Schrift, farbiges Logo */
:root{--fuss-bg:#E9EDE9;--fuss-text:#2B352F;--fuss-titel:#121614;--fuss-linie:#CBD3CC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fuss-bg:#0A0D0B;--fuss-text:#C9D4CC;--fuss-titel:#FFFFFF;--fuss-linie:#2A332D}}
:root[data-theme="dark"]{--fuss-bg:#0A0D0B;--fuss-text:#C9D4CC;--fuss-titel:#FFFFFF;--fuss-linie:#2A332D}
.seitenfuss{background:var(--fuss-bg);color:var(--fuss-text);border-top:6px solid transparent;border-image:linear-gradient(90deg,var(--rahmen-schwarz) 0 33.3%,var(--rot) 33.3% 66.6%,var(--gold) 66.6%) 1}
.seitenfuss a{color:var(--fuss-text)}
.seitenfuss a:hover{color:var(--link)}
.fuss-spalten h2{color:var(--fuss-titel)}
.fuss-unten{border-top-color:var(--fuss-linie)}
.fuss-logo.hell{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fuss-logo.dunkel{display:none}:root:not([data-theme="light"]) .fuss-logo.hell{display:block}}
:root[data-theme="dark"] .fuss-logo.dunkel{display:none}:root[data-theme="dark"] .fuss-logo.hell{display:block}

/* Übersichtskarten unter „Aktuelles“: ganze Karte klickbar */
.karte-link{position:relative;border-radius:var(--rund);transition:transform .15s}
.karte-link h3 a{text-decoration:none;color:var(--text)}
.karte-link h3 a::after{content:"";position:absolute;inset:0}
.karte-link:hover h3 a{color:var(--link);text-decoration:underline}
.karte-link .mehr{color:var(--link);margin-top:auto}
.karte-link:focus-within{outline:3px solid var(--gold);outline-offset:6px}

/* Archiv nach Jahren */
.archiv-jahre{display:flex;flex-direction:column;gap:36px}
.archiv-jahr h3{font-size:1.6rem;color:var(--link);margin-bottom:6px}
.archiv-datum{flex:0 0 170px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.archiv li > div{display:flex;flex-direction:column;gap:2px}
.archiv li a{font-weight:700;font-size:1.1rem}
.archiv-auszug{font-size:.98rem}

/* Detailseite einer Veranstaltung */
.pfad{font-size:.95rem;color:var(--text-2)}
.pfad a{color:var(--text-2)}
.detail{display:flex;flex-direction:column;gap:36px}
.detail-text{font-size:1.15rem}
.detail .galerie{max-width:1000px}
.nachbarn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--linie);padding-top:24px}
.nachbar{display:flex;flex-direction:column;gap:4px;text-decoration:none;max-width:46ch;color:var(--text)}
.nachbar.rechts{text-align:right;margin-left:auto}
.nachbar b{color:var(--link)}
.nachbar:hover b{text-decoration:underline}

/* „Im Fokus“: hervorgehobene Veranstaltung */
.fokus-band{background:var(--gruen-tief);color:#fff}
.fokus{display:flex;flex-wrap:wrap;gap:36px clamp(36px,6vw,80px);align-items:center}
.fokus-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.fokus-band h2{color:#fff}
.fokus-band p{color:#E3F0E7;max-width:56ch}
.fokus-band .dachzeile{color:var(--gold)}
.fokus-band .knopf.primaer{background:var(--gold);color:#121614}
.fokus-band .knopf.primaer:hover{background:#FFD52E}
.fokus-fragen{flex:1 1 360px;min-width:0;list-style:none;margin:0;padding:0;counter-reset:frage;display:flex;flex-direction:column;gap:12px}
.fokus-fragen li{counter-increment:frage;display:flex;gap:16px;align-items:baseline;background:rgba(255,255,255,.08);border-left:4px solid var(--gold);padding:14px 18px;font-family:var(--schrift-titel);font-weight:700;font-size:1.08rem;line-height:1.35}
.fokus-fragen li:nth-child(2){border-left-color:var(--rot)}
.fokus-fragen li:nth-child(3){border-left-color:#fff}
.fokus-fragen li::before{content:"?";color:var(--gold);font-size:1.4rem;line-height:1}
.fokus-karte{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,32px);border-radius:var(--rund);background:var(--gruen-tief);color:#fff;text-decoration:none;border-left:8px solid var(--gold)}
.fokus-karte:hover{color:#fff;background:var(--gruen)}
.fokus-karte .dachzeile{color:var(--gold)}
.fokus-karte-titel{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15}
.fokus-karte .leise{color:#E3F0E7;max-width:70ch}
.fokus-karte .mehr{color:#fff;font-weight:700}

/* Angebotsseite */
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter-knopf{font:inherit;font-weight:600;font-size:1rem;min-height:44px;padding:.5rem 1rem;border-radius:99px;border:2px solid var(--linie);background:var(--bg);color:var(--text);cursor:pointer}
.filter-knopf:hover{border-color:var(--link)}
.filter-knopf[aria-pressed="true"]{background:var(--gruen);border-color:var(--gruen);color:#fff}
.filter-status{min-height:1.4em;margin-top:-16px}
.angebote{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
.angebot{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,28px);border:1px solid var(--linie);border-top:5px solid var(--gruen);border-radius:var(--rund);background:var(--bg);scroll-margin-top:110px}
.angebot:nth-child(3n+2){border-top-color:var(--gold)}
.angebot:nth-child(3n+3){border-top-color:var(--rot)}
.angebot p{color:var(--text-2);font-size:1.02rem}
.angebot-fakten{margin:4px 0 0;display:flex;flex-direction:column;gap:8px}
.angebot-fakten div{display:grid;grid-template-columns:7.5em 1fr;gap:8px;font-size:.98rem}
.angebot-fakten dt{font-weight:700;color:var(--text-2)}
.angebot-fakten dd{margin:0}
.angebot-fuss{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.angebot-beispiel{font-weight:600}
@media (max-width:1180px){.hauptmenue a{padding:.55rem .5rem;font-size:.98rem}}
@media (min-width:801px){.seitentitel h1{max-width:calc(100% - 230px)}}
.person-mail{font-size:.95rem;font-weight:600;word-break:break-all;margin-top:4px}
.start-text .einleitung{max-width:46ch}
.foerderlogos{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}.foerderlogos .foerderlogo{margin-top:-4px;max-width:300px;object-fit:contain}

/* Claim im Fuß */
.fuss-claim{font-weight:600;color:var(--fuss-titel);max-width:32ch}
.filter-thema{border-style:dashed}

/* Presse */
.pressetexte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.pressetext{background:var(--bg);border-radius:var(--rund);padding:24px;display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--gruen)}
.pressetext-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pressetext p{font-size:1rem;color:var(--text-2);user-select:all}
.pressetext .knopf{align-self:flex-start;margin-top:auto}
.pressefotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.pressefotos.zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pressefoto{margin:0;display:flex;flex-direction:column;gap:8px}
.pressefoto img{aspect-ratio:3/2;object-fit:cover;border-radius:3px;width:100%}
.pressefoto.logo img{object-fit:contain;background:#fff;padding:16px;border:1px solid var(--linie)}
.pressefoto figcaption{font-size:.95rem;color:var(--text-2)}
.pressefoto a{font-weight:700}

/* Ziele */
.ziele-liste{list-style:none;margin:0;padding:0;counter-reset:ziel;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.ziele-liste li{counter-increment:ziel;padding:28px;border-radius:var(--rund);background:var(--flaeche);display:flex;flex-direction:column;gap:10px;border-left:5px solid var(--gruen)}
.ziele-liste li:nth-child(2){border-left-color:var(--gold)}
.ziele-liste li:nth-child(3){border-left-color:var(--rot)}
.ziele-liste li:nth-child(4){border-left-color:var(--rahmen-schwarz)}
.ziele-liste li::before{content:"Ziel " counter(ziel);font-family:var(--schrift-titel);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.ziele-liste p{color:var(--text-2)}

/* Partnerlogos */
.partnerlogos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.partnerlogos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.partnerlogos{grid-template-columns:repeat(5,minmax(0,1fr))}}
.partner-kachel{display:flex;align-items:center;justify-content:center;min-height:108px;padding:14px 16px;background:#fff;border:1px solid var(--linie);border-radius:var(--rund);color:#1d2a22;text-decoration:none;font-weight:600;font-size:.92rem;line-height:1.3;text-align:center;transition:border-color .15s}
a.partner-kachel:hover{border-color:var(--link)}
.partner-kachel img{max-height:72px;max-width:100%;width:auto;height:auto;object-fit:contain}
.partner-kachel img.hoch{max-height:88px}

/* Startseite: Bildfolge über die volle Seitenbreite, ohne Rahmen */
.buehne.bildfolge{outline:0;position:relative;width:100%;height:clamp(300px,min(72vh,52vw),760px);overflow:hidden;background:var(--flaeche-2)}
.buehne .dia figcaption{left:0;right:0;bottom:0;max-width:none;background:none;padding:0 0 clamp(14px,2vw,24px);border-radius:0;pointer-events:none}
.buehne .dia figcaption .rahmen{display:block}
.buehne .dia figcaption .rahmen::before{content:none}
.buehne .dia figcaption span{font-size:.92rem}
.buehne .dia figcaption .rahmen{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.buehne .dia::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(10,13,11,.55));pointer-events:none}
.buehne .dia figcaption{z-index:1}
@media (max-width:640px){.buehne.bildfolge{height:auto;aspect-ratio:4/3}}
.start .start-text{max-width:920px}
.start .start-text .einleitung{max-width:68ch}
.buehne .dia:nth-child(2) img{object-position:50% 0}

/* Aktuelles: Nachrichtenkacheln mit Seitenwechsel */
.newsliste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
@media (max-width:900px){.newsliste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.newsliste{grid-template-columns:minmax(0,1fr)}}
.news{display:flex;flex-direction:column;background:var(--bg);border-radius:var(--rund);overflow:hidden;min-width:0;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .2s,transform .2s}
.news:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translateY(-2px)}
.news-bild{display:block;aspect-ratio:5/4;overflow:hidden;background:var(--flaeche-2)}
.news-bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news:hover .news-bild img{transform:scale(1.04)}
.news-bild.leer{background:linear-gradient(135deg,var(--flaeche-2),color-mix(in srgb,var(--gruen) 18%,var(--flaeche-2)))}
.news-text{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.news .datum{font-size:.82rem;font-weight:700;color:var(--link);letter-spacing:.05em;text-transform:uppercase}
.news h3{font-size:1.18rem;line-height:1.3;margin:0}
.news h3 a{color:var(--text);text-decoration:none}
.news h3 a:hover{color:var(--link)}
.news p{color:var(--text-2);margin:0;font-size:.98rem}
.news-mehr{margin-top:auto;padding-top:6px;align-self:flex-start;font-weight:700;color:var(--link);text-decoration:none;border-bottom:2px solid currentColor}
.news-mehr::after{content:" →"}
.abschnitt:not(.flaeche) .news{border:1px solid var(--linie);box-shadow:none}
@media (prefers-reduced-motion:reduce){.news,.news-bild img{transition:none}.news:hover{transform:none}.news:hover .news-bild img{transform:none}}
.js .newsliste[data-blaettern="3"] .news:nth-child(n+4){display:none}
.newsliste .news.aus{display:none}
.blaettern{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:clamp(24px,3vw,36px)}
.blaettern[hidden]{display:none}
.blaettern button{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--linie);background:var(--bg);color:var(--text);border-radius:var(--rund);font:inherit;font-weight:600;cursor:pointer}
.blaettern button:hover{border-color:var(--link);color:var(--link)}
.blaettern button[aria-current="page"]{background:var(--gruen);border-color:var(--gruen);color:#fff}
.blaettern button:disabled{opacity:.4;cursor:default}
.news-bild.leer{background:url(../img/favicon.svg) center/28% no-repeat,linear-gradient(135deg,var(--flaeche-2),color-mix(in srgb,var(--gruen) 14%,var(--flaeche-2)))}
.logo-mit-name{display:flex;align-items:center;gap:12px;text-align:left}.logo-mit-name img{max-height:56px!important}

/* Podcast */
.podcast-video{margin:0;display:flex;flex-direction:column;gap:8px}
.podcast-video video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:var(--rund);display:block}
.podcast-personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.podcast-person{background:var(--bg);border-radius:var(--rund);padding:20px 22px;border-top:4px solid var(--gruen);display:flex;flex-direction:column;gap:6px}
.podcast-person h3{margin:0;font-size:1.2rem}
.podcast-person p{margin:0;color:var(--text-2)}
.folgen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.folge{border:1px solid var(--linie);border-radius:var(--rund);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.folge-nr{font-size:.82rem;font-weight:700;color:var(--link);letter-spacing:.05em;text-transform:uppercase}
.folge h3{margin:0;font-size:1.12rem}
.hinweis-box{padding:18px 22px;border-left:5px solid var(--gold);background:var(--flaeche);border-radius:var(--rund);margin:0}
.podcast-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:center;padding:12px;border:1px solid var(--linie);border-radius:var(--rund);text-decoration:none;color:var(--text);background:var(--bg);margin-block:8px}
.podcast-teaser:hover{border-color:var(--link)}
.podcast-teaser img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px}
.podcast-teaser>span{display:flex;flex-direction:column;gap:4px}
.podcast-teaser b{font-size:1.15rem}
.podcast-teaser .mehr{color:var(--link)}
@media (max-width:480px){.podcast-teaser{grid-template-columns:1fr}}
.folge{padding:0;overflow:hidden;gap:0}
.folge video{width:100%;aspect-ratio:16/9;height:auto;background:#000;display:block}
.folge-text{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px}
.folge-text p{margin:0;color:var(--text-2)}
.folgen{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}