/*
Theme Name: Bildungszentrum Gebäudedienstleister Berlin
Description: Theme im Corporate Design der Gebäudedienstleister. Braucht das Plugin
             "Bildungszentrum Kurse" für Seminare, Lehrgänge und Maßnahmen.
Version: 1.0
Text Domain: bz
*/

@font-face{font-family:'NotesSoft';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/421ce3b27b.woff) format('woff');}@font-face{font-family:'NotesSoft';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/b5c90adcf8.woff) format('woff');}@font-face{font-family:'NotesSoft';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/c6d33c8edf.woff) format('woff');}@font-face{font-family:'NotesSoft';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/d7af1063e0.woff) format('woff');}
:root{
  /* BIV Hausfarben - offizielle sRGB-Werte aus der CD-Guideline */
  --dunkelblau:#003070; --mittelblau:#007ED2; --tuerkis:#00A9B2;
  --hellblau:#00D3F0; --helltuerkis:#BBE3D6; --dunkelgruen:#3B753F;
  --mittelgruen:#84AE30; --hellgruen:#CBD90D; --gelb:#FFEF00;
  --dunkelrot:#800E4A; --violett:#A71199; --rot:#EE0C46; --pink:#F92FA2;
  /* Abstufungen der Primärfarbe - laut CD die einzigen erlaubten Neutraltöne */
  --blau-90:#1d457e; --blau-70:#4d6e9b; --blau-50:#8098b8;
  --blau-30:#b3c1d4; --blau-20:#ccd6e2; --blau-10:#e6eaf1;
  --seite:min(1240px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--dunkelblau);
  font-family:"NotesSoft",system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.022em;line-height:1.12;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance}

/* ---------- Farbband (Signature) ---------- */
.band{display:block;width:100%;height:auto}
.bandwrap{overflow:hidden;line-height:0}
.bandwrap .band{height:clamp(34px,5.4vw,96px)}
.bandwrap.slim .band{height:clamp(22px,3.4vw,60px)}

/* ---------- Kopf ---------- */
header{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--blau-10)}
.kopf{width:var(--seite);margin:0 auto;display:flex;align-items:center;gap:28px;
  padding:14px 0;flex-wrap:wrap}
.kopf img{width:clamp(98px,11vw,132px);height:auto}
nav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  list-style:none;margin-block:0;padding:0}
nav ul,nav li{list-style:none;margin:0;padding:0}
nav li{display:flex;align-items:center}
nav li::marker{content:""}
.fuss ul,.fuss li{list-style:none;margin:0;padding:0}
.fuss li::marker{content:""}
nav a{position:relative;text-decoration:none;font-size:1.04rem;padding:6px 0;
  transition:color .18s ease}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--tuerkis);transform:scaleX(0);transform-origin:left;
  transition:transform .24s cubic-bezier(.2,.7,.3,1)}
nav a:hover,nav a:focus-visible{color:var(--tuerkis)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
nav a[aria-current=page]{color:var(--tuerkis)}
nav a[aria-current=page]::after{transform:scaleX(1)}
.knopf{display:inline-block;background:var(--tuerkis);color:#fff;text-decoration:none;
  padding:13px 26px;font-weight:500;font-size:.95rem;letter-spacing:.01em;border:0;cursor:pointer;
  transition:background .18s ease}
.knopf:hover,.knopf:focus-visible{background:var(--dunkelblau)}
.knopf.gross{padding:17px 38px;font-size:1.05rem}

/* ---------- Hero: Layoutaufbau 3 (Farbband in drei Reihen) ---------- */
.hero{overflow:hidden}
.hero-mitte{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  --heroH:clamp(360px,42vw,460px);height:var(--heroH)}
.hero-bild{position:relative;z-index:2;overflow:hidden;background:var(--dunkelblau);
  /* 16 Grad, exakt aus der Bandhoehe abgeleitet (tan 16 = 0.2867) */
  clip-path:polygon(0 0,100% 0,calc(100% - var(--heroH) * .2867) 100%,0 100%)}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
.hero-text{position:relative;z-index:1;background:var(--helltuerkis);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(30px,4.6vw,64px) clamp(24px,4vw,72px);
  margin-left:calc(var(--heroH) * -.2867);
  padding-left:calc(var(--heroH) * .2867 + clamp(20px,2.6vw,44px))}
.hero-text h1{font-size:clamp(1.8rem,3.6vw,3.3rem);max-width:20ch;text-wrap:pretty}
.claim{font-size:.5em;letter-spacing:0;margin-top:.5em;color:var(--dunkelblau);opacity:.85}
.hero-aktion{margin-top:clamp(22px,3vw,34px);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-aktion .neben{font-size:.9rem;color:var(--blau-70)}

/* ---------- Allgemeine Sektionen ---------- */
section{padding:clamp(56px,8vw,104px) 0}
.inhalt{width:var(--seite);margin:0 auto}
.auge{font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tuerkis);margin:0 0 14px}
.h2{font-family:"NotesSoft",sans-serif;font-size:clamp(1.75rem,3.3vw,2.7rem);max-width:30ch;text-wrap:pretty}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:68ch;margin:20px 0 0;color:var(--blau-90)}

/* ---------- Ablauf ---------- */
.ablauf{background:var(--blau-10)}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,42px);margin-top:clamp(34px,4.5vw,56px)}
.schritt{background:#fff;padding:clamp(24px,2.8vw,36px);border-top:6px solid var(--tuerkis)}
.schritt:nth-child(2){border-top-color:var(--hellgruen)}
.schritt:nth-child(3){border-top-color:var(--pink)}
.schritt .nr{font-size:.76rem;font-weight:500;letter-spacing:.15em;color:var(--blau-50)}
.schritt h3{font-size:1.28rem;margin:10px 0 10px}
.schritt p{margin:0;font-size:.98rem;color:var(--blau-90)}

/* ---------- Kurse ---------- */
.kurse{display:grid;gap:2px;margin-top:clamp(34px,4.5vw,54px);background:var(--blau-20)}
.kurs{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(22px,3.4vw,48px);align-items:stretch;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3vw,40px) clamp(28px,3.4vw,42px) clamp(30px,3.4vw,46px);
  position:relative;transition:background .18s ease}
.kurs:hover{background:var(--blau-10)}
.kurs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--tuerkis)}
.kurs:nth-child(2)::before{background:var(--hellblau)}
.kurs:nth-child(3)::before{background:var(--hellgruen)}
.kurs:nth-child(4)::before{background:var(--mittelgruen)}
.kurs:nth-child(5)::before{background:var(--pink)}
.kurs h3{font-size:clamp(1.22rem,1.9vw,1.6rem);max-width:34ch}
.fakten{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin-top:18px;
  font-size:.95rem;color:var(--blau-90);max-width:52ch}
.fakten dt{font-weight:500;color:var(--blau-70);white-space:nowrap}
.fakten dd{margin:0}
.preis{display:grid;align-content:end;justify-items:end}
.preis .knopf{text-align:center;white-space:nowrap}
/* Zeitraum ist die wichtigste Angabe - steht direkt unter dem Titel */
.zeitraum{display:flex;align-items:baseline;gap:12px;margin-top:14px;
  font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:500;color:var(--dunkelblau)}
.zeitraum::before{content:"";width:22px;height:3px;background:var(--tuerkis);flex:none;
  transform:translateY(-4px)}
.zeitraum .frei{font-weight:400;color:var(--blau-70);font-size:.9rem}
.fakten dd .betonung{font-weight:500}
.offen{display:inline-block;background:var(--gelb);color:var(--dunkelblau);
  font-size:.74rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;margin-bottom:12px}

/* ---------- Förderung ---------- */
.foerderung{background:var(--helltuerkis);padding:clamp(46px,6vw,84px) 0}
.foerderung .h2{max-width:26ch}
.foerder-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(30px,4vw,46px)}
.foerder-karte{background:#fff;padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.foerder-karte b{font-weight:500;font-size:1.12rem;display:block;margin-bottom:10px}
.foerder-karte p{margin:0 0 18px;font-size:.96rem;color:var(--blau-90)}
.foerder-karte .mehr{margin-top:auto;text-decoration:none;font-size:.93rem;font-weight:500;
  color:var(--tuerkis);border-bottom:2px solid var(--helltuerkis);align-self:flex-start;padding-bottom:2px}
.foerder-karte .mehr:hover,.foerder-karte .mehr:focus-visible{border-bottom-color:var(--tuerkis)}
.foerder-fuss{margin-top:clamp(26px,3.4vw,40px);display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* ---------- Wer wir sind ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);
  align-items:start;margin-top:clamp(22px,3vw,34px)}
.zwei p{margin:0;font-size:1.03rem;color:var(--blau-90);line-height:1.7}

/* Vorstellung: Text links, Bild rechts leicht versetzt */
.vorstellung{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,74px);align-items:start;margin-top:clamp(26px,3.4vw,40px)}
.vorstellung p{margin:0 0 18px;font-size:1.03rem;color:var(--blau-90);line-height:1.72;max-width:48ch}
.versatzbild{position:relative;margin-top:clamp(18px,3vw,46px)}
.versatzbild::before{content:"";position:absolute;left:clamp(-26px,-2vw,-14px);
  top:clamp(-26px,-2vw,-14px);width:52%;height:56%;background:var(--helltuerkis);z-index:0}
.versatzbild::after{content:"";position:absolute;right:clamp(-22px,-1.6vw,-12px);
  bottom:clamp(-22px,-1.6vw,-12px);width:38%;height:34%;
  border:3px solid var(--tuerkis);z-index:0}
.versatzbild img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.bildnote{position:relative;z-index:1;margin:14px 0 0;font-size:.88rem;color:var(--blau-70)}
.kacheln{margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);background:none}
.kacheln li{background:#fff;border:1px solid var(--blau-20);border-top:4px solid var(--tuerkis);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.kacheln li:nth-child(2){border-top-color:var(--hellblau)}
.kacheln li:nth-child(3){border-top-color:var(--hellgruen)}
.kacheln li:nth-child(4){border-top-color:var(--pink)}
.kacheln li:hover{transform:translateY(-5px);box-shadow:0 18px 38px -24px rgba(0,48,112,.45);
  border-color:var(--blau-30)}
.kacheln b{font-weight:500;color:var(--tuerkis);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.kacheln span{font-size:.98rem;color:var(--blau-90)}
.knopf.linie{background:transparent;color:var(--dunkelblau);border:2px solid var(--dunkelblau)}
.knopf.linie:hover,.knopf.linie:focus-visible{background:var(--dunkelblau);color:#fff}

/* ---------- Kursseite: Kopfzone ---------- */
.seitenkopf{background:var(--blau-10);padding:clamp(44px,6vw,78px) 0 clamp(38px,5vw,64px)}
/* Bildkopf fuer Unterseiten */
.seitenhero{position:relative;background:var(--dunkelblau);overflow:hidden;
  padding:clamp(120px,15vh,190px) 0 clamp(44px,6vw,74px)}
.seitenhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.seitenhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,48,112,.92) 12%,rgba(0,48,112,.5) 78%)}
.seitenhero .inhalt{position:relative;z-index:2}
.seitenhero .auge{color:var(--hellblau)}
.seitenhero h1{color:#fff;animation:hoch .8s cubic-bezier(.2,.7,.3,1) both}
.seitenhero .lead{color:rgba(255,255,255,.9);animation:hoch .8s cubic-bezier(.2,.7,.3,1) .14s both}
.seitenhero .zurueck{color:rgba(255,255,255,.78)}
.seitenhero .zurueck:hover{color:#fff}
.seitenhero .kopfzeile{color:rgba(255,255,255,.85)}
.seitenhero .marke{background:rgba(255,255,255,.16);color:#fff}
.seitenhero .marke.qv{background:rgba(203,217,13,.24);color:var(--hellgruen)}
.leerzustand{border:1px dashed var(--blau-30);padding:clamp(28px,3.4vw,42px);
  margin-top:clamp(30px,4vw,48px);background:var(--blau-10)}
.leerzustand h3{font-size:1.2rem;margin-bottom:10px}
.leerzustand p{margin:0 0 14px;color:var(--blau-90);max-width:62ch;line-height:1.65}
.leerzustand ul{margin:0 0 18px;padding-left:20px;color:var(--blau-90);line-height:1.7}
.zurueck{display:inline-block;text-decoration:none;font-size:.92rem;color:var(--blau-70);margin-bottom:18px}
.zurueck:hover{color:var(--tuerkis)}

/* ---------- Zentrum ---------- */
.zentrum{background:var(--dunkelblau);color:#fff;overflow-x:hidden}
.zentrum .auge{color:var(--hellblau)}
.zentrum .lead{color:#fff;opacity:.9}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  margin:clamp(38px,5vw,62px) 0 0;width:100vw;margin-left:calc(50% - 50vw);
  padding:0 clamp(14px,4vw,40px)}
.galerie figure{margin:0;display:flex;flex-direction:column;gap:12px}
.galerie .rahmen{aspect-ratio:4/5;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.galerie figure:hover img{transform:scale(1.05)}
.galerie figcaption{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hellblau);font-weight:500}
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-top:clamp(40px,5vw,64px);background:rgba(255,255,255,.14)}
.zahl{background:var(--blau-90);padding:clamp(24px,2.6vw,32px)}
.zahl b{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:400;letter-spacing:-.02em}
.zahl span{font-size:.94rem;opacity:.82}

/* ---------- Anmeldung ---------- */
.formular{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.1vw,24px) clamp(16px,1.8vw,22px);margin-top:clamp(28px,3.6vw,44px);
  max-width:880px}
.feld{display:flex;flex-direction:column;gap:8px;padding:0;grid-column:span 12}
.feld.s2{grid-column:span 2}.feld.s3{grid-column:span 3}.feld.s4{grid-column:span 4}
.feld.s5{grid-column:span 5}.feld.s6{grid-column:span 6}.feld.s7{grid-column:span 7}

.abschluss{grid-column:span 12;border-top:1px solid var(--blau-20);
  padding-top:clamp(22px,2.6vw,28px);margin-top:10px;display:grid;gap:14px}
.abschluss .aktion{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:4px}
.abschluss .ruecktritt{font-size:.9rem;color:var(--blau-70);max-width:44ch;line-height:1.5}
.feld.breit{grid-column:span 12}
label{font-size:.88rem;font-weight:500;color:var(--blau-90);line-height:1.4}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit;font-size:1rem;color:var(--dunkelblau);background:#fff;
  border:1px solid var(--blau-30);padding:10px 13px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease}
input:hover,select:hover{border-color:var(--blau-50)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tuerkis);
  box-shadow:inset 0 0 0 1px var(--tuerkis)}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wahl label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--blau-30);padding:10px 14px;
  cursor:pointer;font-weight:400;transition:border-color .16s ease,box-shadow .16s ease}
.wahl label:hover{border-color:var(--blau-50)}
.wahl input{accent-color:var(--tuerkis);width:18px;height:18px;margin:0}
.wahl label:has(input:checked){background:#fff;border-color:var(--tuerkis);
  box-shadow:inset 0 0 0 1px var(--tuerkis)}
.wahl .wer{display:block;font-size:.99rem;line-height:1.4}
.feldhinweis{font-size:.9rem;color:var(--blau-70);margin:12px 0 0;line-height:1.55}
.feldhinweis a{color:var(--tuerkis);font-weight:500}
.haken{display:flex;gap:13px;align-items:flex-start;font-size:.93rem;color:var(--blau-90);line-height:1.5}

.haken input{margin-top:5px;accent-color:var(--tuerkis);width:18px;height:18px;flex:none}
.hinweis{background:var(--helltuerkis);padding:clamp(20px,2.6vw,30px);margin-top:26px;font-size:.95rem}
.hinweis b{font-weight:500}

/* ---------- Fuß ---------- */
footer{background:var(--blau-10);padding:clamp(46px,6vw,72px) 0 34px}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.fuss img{width:120px;margin-bottom:18px}
.fuss h4{font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blau-50);margin:0 0 14px}
.fuss a{display:block;text-decoration:none;font-size:.96rem;padding:4px 0}
.fuss a:hover{color:var(--tuerkis)}
.fuss address{font-style:normal;font-size:.96rem;line-height:1.7;color:var(--blau-90)}
.fussende{width:var(--seite);margin:36px auto 0;padding-top:22px;border-top:1px solid var(--blau-20);
  display:flex;gap:20px;flex-wrap:wrap;font-size:.86rem;color:var(--blau-70)}
.fussende a{text-decoration:none}

/* ---------- Bewegung ---------- */
.auf{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.auf.da{opacity:1;transform:none}
.a-links{opacity:0;transform:translateX(-34px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.a-rechts{opacity:0;transform:translateX(34px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.a-klar{opacity:0;transition:opacity 1s ease}
.a-pop{opacity:0;transform:scale(.93) translateY(12px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.3,.5,1)}
.a-pop.da{opacity:1;transform:none}
.a-links.da,.a-rechts.da,.a-klar.da{opacity:1;transform:none}
.zoom{opacity:0;transform:scale(.94);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.zoom.da{opacity:1;transform:none}
@keyframes hoch{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.heroband h1{animation:hoch .9s cubic-bezier(.2,.7,.3,1) both}
.heroband p{animation:hoch .9s cubic-bezier(.2,.7,.3,1) .18s both}
.videoaktion{animation:hoch .8s ease .35s both}
.kurs,.foerder-karte,.schritt,.kacheln li{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,background .18s ease}
.kurs:hover,.foerder-karte:hover,.schritt:hover{transform:translateY(-4px);
  box-shadow:0 14px 34px -22px rgba(0,48,112,.5)}
.galerie figure{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.galerie figure:hover{transform:translateY(-5px)}
.termin{transition:background .2s ease,padding-left .25s ease}
.termin:hover{padding-left:10px}
:focus-visible{outline:3px solid var(--tuerkis);outline-offset:3px}

@media (max-width:900px){
  .hero-mitte{grid-template-columns:1fr;min-height:0}
  .hero-mitte{height:auto}
  .hero-bild{clip-path:none;height:clamp(210px,46vw,310px)}
  .hero-text{margin-left:0;padding-left:clamp(24px,6vw,40px)}
  .schritte,.zahlen,.foerder-liste,.zwei,.wahl,.vorstellung{grid-template-columns:1fr}
  .versatzbild{margin-top:8px}
  .feld.s2,.feld.s3,.feld.s4,.feld.s5,.feld.s6,.feld.s7{grid-column:span 12}
  .kacheln{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .kurs{grid-template-columns:1fr}
  .preis{justify-items:start;align-content:start}
  .preis{text-align:left}
  .formular{grid-template-columns:1fr}
  .fuss{grid-template-columns:1fr}
  nav{gap:15px;font-size:.95rem;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;font-size:.95rem}
  .kopf{gap:14px;padding:12px 0;flex-wrap:nowrap}
  .kopf img{width:clamp(74px,16vw,96px)}
  .knopf{padding:11px 16px;font-size:.86rem;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .auf{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Galerie-Varianten ---------- */
.galerie.drei{grid-template-columns:repeat(3,1fr)}
.galerie.fuenf{grid-template-columns:repeat(5,1fr)}
.galerie.imblock{width:auto;margin-left:0;padding:0}
.galerie.hell figcaption{color:var(--tuerkis)}
.galerie.hell .beschreibung{color:var(--blau-90)}
.beschreibung{font-size:.94rem;line-height:1.5;margin:0;color:rgba(255,255,255,.82)}
@media (max-width:1100px){
  .galerie.fuenf{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .galerie.drei,.galerie.fuenf{grid-template-columns:1fr 1fr}
}

/* ---------- Kontaktseite ---------- */
.ortskarte{border-top:4px solid var(--tuerkis);padding-top:22px}
.ortskarte:nth-child(2){border-top-color:var(--hellgruen)}
.h3gross{font-size:clamp(1.3rem,2.1vw,1.7rem);margin:0 0 14px}
.ortskarte address{font-style:normal;font-size:1.05rem;line-height:1.75;color:var(--dunkelblau)}
.ortskarte address a{color:var(--tuerkis);text-decoration:none;font-weight:500}
.ortskarte address a:hover{text-decoration:underline}
.ortstext{font-size:.96rem;color:var(--blau-70);margin:16px 0 0;max-width:38ch}
textarea{resize:vertical;min-height:130px;font-family:inherit}

/* ---------- Kopf: transparent ueber dem Video, ohne Hamburger ---------- */
body.startseite header{position:fixed;left:0;right:0;background:transparent;border-bottom:0;
  transition:background .3s ease,box-shadow .3s ease}
body.startseite header::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,24,60,.62),rgba(0,24,60,0));transition:opacity .3s ease}
body.startseite header.fest::before{opacity:0}
body.startseite header .kopf{position:relative;z-index:1}
body.startseite header a,body.startseite header nav a{color:#fff;text-shadow:0 1px 6px rgba(0,20,50,.35)}
body.startseite header.fest a,body.startseite header.fest nav a{text-shadow:none}
body.startseite header nav a[aria-current=page]{color:#fff}
body.startseite header.fest{background:#fff;box-shadow:0 1px 0 var(--blau-10)}
body.startseite header.fest a,body.startseite header.fest nav a{color:var(--dunkelblau)}
body.startseite header.fest .knopf{color:#fff}
header .knopf{color:#fff}
body.startseite header:not(.fest) .knopf{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
body.startseite header:not(.fest) .knopf:hover{background:#fff;color:var(--dunkelblau)}

nav{gap:22px;flex-wrap:nowrap;white-space:nowrap}

/* ---------- Video-Hero ----------
   Das Video traegt eigene Typografie. Deshalb liegt darueber keine Headline,
   nur die Aktionen unten rechts. Die Botschaft folgt darunter im Textband. */
.videohero{position:relative;width:100%;aspect-ratio:2/1;max-height:76vh;
  overflow:hidden;background:var(--dunkelblau)}
.videohero video,.videohero .videoposter{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.videohero video{z-index:1}
.videohero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(transparent,rgba(0,48,112,.78));pointer-events:none}
.videoaktion{position:absolute;right:0;bottom:0;z-index:3;display:flex;gap:12px;
  flex-wrap:wrap;justify-content:flex-end;padding:0 max(4vw,20px) clamp(22px,3.4vh,38px) 0}
.videoaktion .knopf{background:#fff;color:var(--dunkelblau)}
.videoaktion .knopf:hover{background:var(--hellblau)}
.videoaktion .knopf.klar{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.62);backdrop-filter:blur(6px)}
.videoaktion .knopf.klar:hover{background:#fff;color:var(--dunkelblau)}

/* Textband direkt unter dem Video - hier steht unsere Botschaft */
.heroband{background:var(--dunkelblau);color:#fff;padding:clamp(40px,6vw,74px) 0}
.heroband h1{color:#fff;font-size:clamp(1.9rem,4vw,3.3rem);max-width:20ch;line-height:1.08}
.heroband .claim{display:block;font-size:.4em;margin-top:.6em;color:var(--hellblau)}
.heroband .zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,auto);
  gap:clamp(24px,4vw,60px);align-items:end}
.heroband p{margin:0;font-size:1.03rem;line-height:1.7;color:rgba(255,255,255,.86);max-width:44ch}

/* ---------- Terminliste ---------- */
.quartal{margin:clamp(34px,4vw,52px) 0 12px;font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tuerkis);
  border-bottom:2px solid var(--tuerkis);padding-bottom:8px}
.termin{display:grid;grid-template-columns:126px minmax(0,1fr) 150px 160px;gap:20px;
  align-items:start;padding:18px 0;border-bottom:1px solid var(--blau-10)}
.termin:hover{background:#fbfcfe}
.termin .datum{font-weight:500;color:var(--dunkelblau)}
.termin .thema{font-weight:500;color:var(--dunkelblau)}
.termin .wer{display:block;font-weight:400;color:var(--blau-70);font-size:.92rem;margin-top:4px}
.marke{display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;background:var(--blau-10);color:var(--blau-70);font-weight:500}
.marke.qv{background:#e8f6ea;color:var(--dunkelgruen)}
.termin .knopf{padding:10px 18px;font-size:.88rem}
.termin .keine{font-size:.88rem;color:var(--blau-50)}

/* ---------- Detailseiten ---------- */
.kopfzeile{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px;
  font-size:.95rem;color:var(--blau-70)}
.zweispalt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(30px,5vw,64px);align-items:start;margin-top:clamp(30px,4vw,48px)}
.eckdaten{background:var(--blau-10);padding:clamp(22px,2.6vw,30px);position:sticky;top:96px}
.eckdaten dl{display:grid;gap:12px 0;margin:0}
.eckdaten dt{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau-70)}
.eckdaten dd{margin:2px 0 10px;font-size:1rem;font-weight:500;color:var(--dunkelblau)}
.eckdaten .knopf{width:100%;text-align:center;margin-top:6px}
.fliess p{font-size:1.03rem;line-height:1.72;color:var(--blau-90);margin:0 0 16px;max-width:64ch}
.fliess h3{font-size:1.25rem;margin:30px 0 12px}
.fliess ul{margin:0 0 18px;padding-left:20px;color:var(--blau-90);line-height:1.7}

/* ---------- Personenliste im Formular ---------- */
.person{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px;
  padding:18px 0;border-bottom:1px solid var(--blau-10);position:relative}
.person .nr{grid-column:span 12;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tuerkis);font-weight:500}
.person .weg{background:none;border:0;color:var(--blau-50);font-size:.86rem;cursor:pointer;
  justify-self:start;grid-column:span 12;padding:0;text-decoration:underline}
.person .weg:hover{color:var(--rot)}
.mehr-knopf{background:none;border:1px dashed var(--blau-30);color:var(--tuerkis);
  font:inherit;font-weight:500;font-size:.95rem;padding:13px 20px;cursor:pointer;
  margin-top:16px;transition:border-color .16s ease,background .16s ease}
.mehr-knopf:hover{border-color:var(--tuerkis);background:var(--blau-10)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--blau-20)}
.faq details{border-bottom:1px solid var(--blau-10)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:500;font-size:1.02rem;
  color:var(--dunkelblau);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--tuerkis);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .antwort{padding:0 0 20px;font-size:.98rem;line-height:1.7;color:var(--blau-90);max-width:70ch}

/* ---------- Rechtstexte ---------- */
.recht h3{font-size:1.1rem;margin:28px 0 8px}
.recht p,.recht address{font-size:.98rem;line-height:1.7;color:var(--blau-90);
  max-width:72ch;margin:0 0 12px;font-style:normal}
.vorstand{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;
  background:var(--blau-20);margin:18px 0 26px}
.vorstand div{background:#fff;padding:16px 18px}
.vorstand b{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blau-70);font-weight:500;margin-bottom:4px}

@media (max-width:900px){
  .termin{grid-template-columns:1fr;gap:8px}
  .zweispalt{grid-template-columns:1fr}
  .eckdaten{position:static}
  body.startseite header{position:fixed}
}

/* ---------- AZAV ---------- */
.siegel{max-width:230px;height:auto}
.siegelzeile{display:flex;gap:clamp(22px,3vw,40px);align-items:center;flex-wrap:wrap;
  background:var(--blau-10);padding:clamp(22px,2.6vw,32px);margin-top:clamp(30px,4vw,44px)}
.siegelzeile p{margin:0;max-width:52ch;font-size:.99rem;color:var(--blau-90);line-height:1.65}
.siegelzeile b{font-weight:500;color:var(--dunkelblau)}
.foerderbar{display:inline-flex;align-items:center;gap:8px;background:#e8f6ea;
  color:var(--dunkelgruen);font-size:.76rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px}
.massnahmen{margin-top:clamp(30px,4vw,48px);border-top:2px solid var(--tuerkis)}
.massnahme{display:grid;grid-template-columns:minmax(0,1fr) 220px 150px;gap:22px;
  align-items:center;padding:20px 0;border-bottom:1px solid var(--blau-10)}
.massnahme .name{font-weight:500;color:var(--dunkelblau)}
.massnahme .name span{display:block;font-weight:400;color:var(--blau-70);font-size:.92rem;margin-top:3px}
.nummer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;
  background:#fff;border:1px dashed var(--blau-30);padding:9px 12px;color:var(--dunkelblau);
  display:inline-block}
.nummer.leer{color:var(--blau-50);font-style:italic;font-family:inherit;font-size:.9rem}
.weg-schritte{counter-reset:w;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);margin:clamp(30px,4vw,48px) 0 0;padding:0;list-style:none}
.weg-schritte li{background:#fff;border:1px solid var(--blau-20);
  border-top:4px solid var(--tuerkis);
  padding:clamp(24px,2.6vw,32px);position:relative;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.weg-schritte li:nth-child(2){border-top-color:var(--hellblau)}
.weg-schritte li:nth-child(3){border-top-color:var(--hellgruen)}
.weg-schritte li:nth-child(4){border-top-color:var(--pink)}
.weg-schritte li:hover{transform:translateY(-5px);border-color:var(--blau-30);
  box-shadow:0 18px 38px -24px rgba(0,48,112,.45)}
.weg-schritte li::before{counter-increment:w;content:counter(w);display:block;
  font-size:2.6rem;line-height:1;color:var(--blau-30);margin-bottom:14px;font-weight:500}
.weg-schritte b{display:block;font-weight:500;font-size:1.06rem;margin-bottom:8px;
  color:var(--dunkelblau);line-height:1.3}
.weg-schritte span{display:block;font-size:.96rem;color:var(--blau-90);line-height:1.6;max-width:34ch}
.fuss .siegel{max-width:180px;margin-top:22px;display:block}
@media (max-width:900px){ .massnahme{grid-template-columns:1fr;gap:10px} }

@media (max-width:820px){
  .videohero{aspect-ratio:auto;min-height:300px;height:44vh}
  .videohero video{object-position:34% center}
  .heroband .zeile{grid-template-columns:1fr;align-items:start}
}

/* ---------- Naechste Termine auf der Startseite ---------- */
.terminband{background:var(--blau-10)}
.naechste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(32px,4vw,50px)}
.naechste a{background:var(--dunkelblau);color:#fff;padding:clamp(26px,3vw,34px);
  text-decoration:none;display:flex;flex-direction:column;gap:6px;position:relative;
  border-top:4px solid var(--tuerkis);
  transition:background .22s ease,transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.naechste a:nth-child(2){border-top-color:var(--hellgruen)}
.naechste a:nth-child(3){border-top-color:var(--pink)}
.naechste a:hover{background:var(--blau-90);transform:translateY(-5px);
  box-shadow:0 18px 38px -24px rgba(0,48,112,.6)}
.naechste .tag{font-size:.8rem;font-weight:500;letter-spacing:.13em;color:var(--hellblau)}
.naechste .titel{display:block;font-size:1.12rem;font-weight:500;margin:8px 0 6px;
  color:#fff;line-height:1.35}
.naechste .ref{font-size:.9rem;color:rgba(255,255,255,.72);margin-top:auto;padding-top:10px}

/* ---------- Einblicke ---------- */
.einblicke{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.1vw,14px);
  margin-top:clamp(32px,4vw,50px)}
.einblicke figure{margin:0;overflow:hidden;aspect-ratio:1/1;position:relative}
.einblicke figure:first-child{grid-column:span 2;grid-row:span 2}
.einblicke figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 14px;
  font-size:.74rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(0,20,50,.8))}
.einblicke img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.einblicke figure:hover img{transform:scale(1.06)}
@media (max-width:1100px){ .weg-schritte{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .weg-schritte{grid-template-columns:1fr}
  .naechste{grid-template-columns:1fr}
  .einblicke{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Anwendungsgebiete als Bildkarten ---------- */
.bildkarten{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(34px,4.5vw,54px)}
.bildkarte{display:flex;flex-direction:column;overflow:hidden;background:var(--tuerkis);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.bildkarte:hover{transform:translateY(-5px);box-shadow:0 18px 38px -24px rgba(0,48,112,.5)}
.bildkarte .bild{aspect-ratio:16/10;overflow:hidden}
.bildkarte img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bildkarte .text{padding:clamp(22px,2.6vw,30px);color:#fff}
.bildkarte h3{color:#fff;font-size:clamp(1.15rem,1.8vw,1.45rem)}
.bildkarte p{margin:10px 0 0;font-size:.97rem;line-height:1.6;color:rgba(255,255,255,.9);max-width:44ch}
.bildkarte:nth-child(2){background:var(--mittelblau)}
.bildkarte:nth-child(3){background:var(--mittelgruen)}
.bildkarte:nth-child(4){background:var(--dunkelblau)}

/* Einblicke ruhiger rastern */

@media (max-width:900px){
  .bildkarten{grid-template-columns:1fr}
  .einblicke{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Raeume: hell, Text links, Bildraster rechts ---------- */
.raumteil{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,72px);align-items:start;margin-top:clamp(26px,3.4vw,40px)}
.raumraster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.3vw,16px)}
.raumraster figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3}
.raumraster img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.raumraster figure:hover img{transform:scale(1.05)}
.raumraster figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(0,20,50,.8))}
.fakten-kurz{margin:clamp(28px,3.4vw,42px) 0 0;display:grid;gap:0}
.fakten-kurz div{padding:18px 0;border-top:1px solid var(--blau-20)}
.fakten-kurz div:last-child{border-bottom:1px solid var(--blau-20)}
.fakten-kurz b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;
  letter-spacing:-.02em;color:var(--tuerkis);line-height:1.1}
.fakten-kurz span{display:block;font-size:.95rem;color:var(--blau-70);margin-top:4px}

.pfeillink{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(34px,4vw,50px);
  color:#fff;text-decoration:none;font-weight:500;font-size:1.02rem;
  border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:6px;transition:border-color .2s ease,gap .25s ease}
.pfeillink:hover{border-bottom-color:var(--hellblau);gap:18px}
.pfeillink span{font-size:1.2rem;line-height:1}
@media (max-width:900px){
  .mosaik{grid-template-columns:repeat(2,1fr)}
  .mosaik figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .mosaik figure:last-child{grid-column:span 2;aspect-ratio:16/9}
  .zahlen{grid-template-columns:1fr}
  .zahl{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:22px}
}

.untertitel{color:rgba(255,255,255,.88);font-size:clamp(1rem,1.5vw,1.2rem);margin:12px 0 0;max-width:60ch}
.fliess ul li{margin-bottom:5px}
.fliess h4{font-size:1.02rem;font-weight:500;margin:22px 0 7px;color:var(--tuerkis)}
.fliess strong{font-weight:500;color:var(--dunkelblau)}
.fliess a{color:var(--tuerkis);font-weight:500}
.fliess img{max-width:100%;height:auto}

/* Raumabschnitt auf dunklem Grund */
.zentrum .fakten-kurz div{border-top-color:rgba(255,255,255,.25)}
.zentrum .fakten-kurz div:last-child{border-bottom-color:rgba(255,255,255,.25)}
.zentrum .fakten-kurz b{color:var(--hellblau)}
.zentrum .fakten-kurz span{color:rgba(255,255,255,.8)}
.zentrum .h2{color:#fff}

/* Kopf: Login neben der Anmeldung */
.kopfaktion{display:flex;align-items:center;gap:18px}
.login{text-decoration:none;font-size:1.04rem;font-weight:500;padding:6px 0;
  border-bottom:2px solid transparent;transition:border-color .2s ease,color .2s ease}
.login:hover{border-bottom-color:var(--tuerkis);color:var(--tuerkis)}
body.startseite header:not(.fest) .login{color:#fff}

/* Vorstand: vier und vier, ohne grauen Balken */
.vorstand{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,16px);
  background:none;margin:20px 0 30px}
.vorstand div{background:#fff;border:1px solid var(--blau-20);border-top:3px solid var(--tuerkis);
  padding:18px 20px;font-size:1rem;color:var(--dunkelblau)}
.vorstand div:nth-child(4n+2){border-top-color:var(--hellblau)}
.vorstand div:nth-child(4n+3){border-top-color:var(--hellgruen)}
.vorstand div:nth-child(4n+4){border-top-color:var(--pink)}

/* Groessere Ueberschriften */
.kacheln b{font-size:.92rem;letter-spacing:.1em}
.kacheln span{font-size:1.06rem;line-height:1.55;color:var(--dunkelblau)}
.bildkarte h3{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.foerder-karte b{font-size:1.3rem}
.schritt h3{font-size:1.45rem}
.weg-schritte b{font-size:1.2rem}
.naechste .titel{font-size:1.2rem}

/* Leitbild */
.grundsaetze{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,4vw,48px)}
.grundsatz{background:#fff;border:1px solid var(--blau-20);border-top:4px solid var(--tuerkis);
  padding:clamp(24px,2.6vw,32px);transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.grundsatz:nth-child(2){border-top-color:var(--hellblau)}
.grundsatz:nth-child(3){border-top-color:var(--hellgruen)}
.grundsatz:nth-child(4){border-top-color:var(--gelb)}
.grundsatz:nth-child(5){border-top-color:var(--pink)}
.grundsatz:nth-child(6){border-top-color:var(--mittelgruen)}
.grundsatz:hover{transform:translateY(-5px);box-shadow:0 18px 38px -24px rgba(0,48,112,.45)}
.grundsatz h3{font-size:1.2rem;margin-bottom:10px}
.grundsatz p{margin:0;font-size:.98rem;line-height:1.65;color:var(--blau-90)}
@media (max-width:900px){ .vorstand,.grundsaetze{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grundsaetze{grid-template-columns:1fr} }

.login{position:relative;padding-left:20px;color:var(--blau-70)}
.login::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;
  transform:translateY(-50%);background:var(--blau-30)}
body.startseite header:not(.fest) .login::before{background:rgba(255,255,255,.4)}
body.startseite header:not(.fest) .login{color:rgba(255,255,255,.85)}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .bildkarten{grid-template-columns:repeat(2,1fr)}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .raumteil{grid-template-columns:1fr}
  .raumraster{grid-template-columns:repeat(4,1fr)}
  .vorstand{grid-template-columns:repeat(2,1fr)}
  .foerder-liste{grid-template-columns:1fr}
  .naechste{grid-template-columns:1fr}
}

/* ---------- Mobil ---------- */
@media (max-width:700px){
  .kacheln,.raumraster,.grundsaetze,.bildkarten,.einblicke{grid-template-columns:1fr}
  .einblicke figure:first-child{grid-column:span 1;grid-row:span 1}
  .raumraster figure{aspect-ratio:16/10}
  .versatzbild::before,.versatzbild::after{display:none}
  .versatzbild img{aspect-ratio:4/3}
  .termin{padding:16px 0}
  .termin .knopf{width:100%;text-align:center}
  .kurs{padding:24px 18px 24px 22px}
  .preis .knopf{width:100%;text-align:center}
  .eckdaten .knopf{width:100%}
  .videohero{height:auto;aspect-ratio:16/10;min-height:0}
  .heroband{padding:34px 0 38px}
  .seitenhero{padding:108px 0 40px}
  .wahl label{padding:12px 14px}
  .abschluss .aktion{flex-direction:column;align-items:stretch}
  .abschluss .aktion .knopf{width:100%;text-align:center}
  .abschluss .ruecktritt{max-width:none}
  .fussende{flex-direction:column;gap:8px}
  .fussende span{margin-left:0!important}
  .faq summary{font-size:.98rem}
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
}

/* ---------- Sehr schmal ---------- */
@media (max-width:420px){
  .kopf img{width:66px}
  nav{gap:11px;font-size:.88rem}
  nav a{font-size:.88rem}
  .knopf{padding:10px 13px;font-size:.8rem}
  .knopf.gross{padding:14px 20px;font-size:.95rem}
}

/* ---------- Kalender ---------- */
.kalenderfilter{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,42px)}
.filter{font:inherit;font-size:.92rem;font-weight:500;background:#fff;color:var(--blau-70);
  border:1px solid var(--blau-30);padding:10px 18px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.filter:hover{border-color:var(--tuerkis);color:var(--tuerkis)}
.filter.aktiv{background:var(--dunkelblau);border-color:var(--dunkelblau);color:#fff}
.kalender{margin-top:clamp(22px,3vw,34px)}
.kalendermonat{margin:clamp(30px,3.6vw,44px) 0 10px;font-size:.8rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tuerkis);
  border-bottom:2px solid var(--tuerkis);padding-bottom:8px}
.kalendermonat:first-child{margin-top:clamp(18px,2.4vw,28px)}
.art{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;margin-right:6px;color:#fff}
.art-seminar{background:var(--tuerkis)}
.art-lehrgang{background:var(--mittelblau)}
.art-massnahme{background:var(--mittelgruen)}
.termin[hidden]{display:none}

/* ---------- Inhalte aus dem Editor ---------- */
.seiteninhalt{max-width:74ch}
.seiteninhalt > :first-child{margin-top:0}
.seiteninhalt h2{font-size:clamp(1.55rem,2.7vw,2.15rem);line-height:1.2;
  margin:clamp(44px,5vw,68px) 0 18px;padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--blau-20);color:var(--dunkelblau)}
.seiteninhalt h2:first-child{margin-top:0;padding-top:0;border-top:0}
.seiteninhalt h3{font-size:1.22rem;margin:32px 0 10px;color:var(--dunkelblau)}
.seiteninhalt h4{font-size:1.04rem;font-weight:500;margin:24px 0 8px;color:var(--tuerkis)}
.seiteninhalt p{font-size:1.05rem;line-height:1.75;color:var(--blau-90);margin:0 0 18px}
.seiteninhalt ul,.seiteninhalt ol{margin:0 0 20px;padding-left:22px;
  font-size:1.05rem;line-height:1.75;color:var(--blau-90)}
.seiteninhalt li{margin-bottom:7px}
.seiteninhalt strong{font-weight:500;color:var(--dunkelblau)}
.seiteninhalt a{color:var(--tuerkis);font-weight:500}
.seiteninhalt a:hover{text-decoration:underline}
.seiteninhalt img{max-width:100%;height:auto}
.seiteninhalt figure{margin:22px 0}
.seiteninhalt figcaption{font-size:.88rem;color:var(--blau-70);margin-top:8px}
.seiteninhalt table{border-collapse:collapse;width:100%;margin:0 0 22px;font-size:.99rem}
.seiteninhalt th,.seiteninhalt td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--blau-20);vertical-align:top}
.seiteninhalt th{font-weight:500;color:var(--dunkelblau);background:var(--blau-10)}
.seiteninhalt blockquote{margin:0 0 22px;padding:4px 0 4px 22px;
  border-left:3px solid var(--tuerkis);color:var(--blau-90)}
.seiteninhalt hr{border:0;border-top:1px solid var(--blau-20);margin:36px 0}

/* ---------- Druck und PDF ---------- */
.nurdruck{display:none}
.eckdaten .drucken{width:100%;margin-top:10px;font-size:.92rem}

@media print{
  @page{margin:16mm 15mm 18mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:10.5pt;line-height:1.5;color:#000;background:#fff}
  header,footer,.videohero,.heroband,.videoaktion,.scrollhinweis,
  #anmeldung,.faq,.zurueck,.knopf,.mehr-knopf,.bandwrap,.einblicke,
  .naechste,.raumraster,.kacheln,.bildkarten{display:none!important}

  .nurdruck{display:block}
  .drucklogo{display:flex;align-items:center;gap:12px;
    border-bottom:2pt solid #003070;padding-bottom:8pt;margin-bottom:16pt}
  .drucklogo img{width:46pt;height:auto}
  .drucklogo span{font-size:11pt;font-weight:500;color:#003070}

  .seitenhero{position:static;padding:0;background:none;color:#000;overflow:visible}
  .seitenhero img,.seitenhero::after{display:none}
  .seitenhero .inhalt{width:auto}
  .seitenhero h1{color:#003070;font-size:19pt;line-height:1.2;margin:0 0 6pt}
  .seitenhero .auge{color:#00707a;font-size:8pt;margin:0 0 4pt}
  .seitenhero .lead,.seitenhero .untertitel{color:#000;font-size:11pt;margin:0 0 8pt}
  .seitenhero .kopfzeile{color:#333;font-size:10pt;gap:10pt}
  .seitenhero .marke{background:none;color:#00707a;border:0.5pt solid #00707a;padding:1pt 5pt}

  section{padding:0}
  .inhalt{width:auto;max-width:none}
  .zweispalt{display:block}

  .eckdaten{position:static;background:none;border:1pt solid #b3c1d4;
    padding:10pt 12pt;margin:0 0 14pt;page-break-inside:avoid}
  .eckdaten dl{display:grid;grid-template-columns:38% 62%;gap:0}
  .eckdaten dt{font-size:8pt;letter-spacing:.06em;color:#4d6e9b;padding:3pt 0}
  .eckdaten dd{font-size:10.5pt;font-weight:500;color:#003070;margin:0;padding:3pt 0}

  .fliess,.seiteninhalt{max-width:none}
  .fliess h3,.seiteninhalt h3{font-size:12pt;margin:12pt 0 5pt;page-break-after:avoid}
  .fliess h4,.seiteninhalt h4{font-size:10.5pt;margin:9pt 0 3pt;page-break-after:avoid}
  .fliess p,.seiteninhalt p{font-size:10.5pt;margin:0 0 7pt;color:#000;max-width:none}
  .fliess ul,.seiteninhalt ul{font-size:10.5pt;margin:0 0 8pt;color:#000}
  .fliess li,.seiteninhalt li{margin-bottom:2pt;page-break-inside:avoid}

  .druckfuss{margin-top:18pt;padding-top:8pt;border-top:0.5pt solid #b3c1d4;
    font-size:8.5pt;color:#333;page-break-inside:avoid}
  .druckfuss p{margin:0 0 3pt}
  .druckfuss .quelle{color:#777}

  a{color:#000;text-decoration:none}
  .a-links,.a-rechts,.a-pop,.a-klar,.auf,.zoom{opacity:1!important;transform:none!important}
}