/* ============================================================
   unternehmen2030 — Website
   Farben aus dem Logo: Blau #2F6699, Grau #666666
   Dazu ein ruhiges Hellgrau und ein Grün aus dem Pflanzenmotiv.
   ============================================================ */

:root{
  /* Blau — direkt aus dem Logo gemessen */
  --blau:            #2F6699;
  --blau-hell:       #4A83B8;
  --blau-dunkel:     #245176;
  --blau-tief:       #17334C;
  --blau-hauch:      #EDF3F9;

  /* Grün — Nachhaltigkeit, Förderung, Bestätigung */
  --gruen:           #4E9B6B;
  --gruen-dunkel:    #33714B;
  --gruen-hell:      #8FC9A3;
  --gruen-hauch:     #EBF5EE;

  /* Grau */
  --grau-hauch:      #F5F7F9;
  --grau-hell:       #E9EEF2;
  --linie:           #DCE4EB;
  --grau-text:       #5A6874;
  --text:            #1C2A36;
  --weiss:           #FFFFFF;

  --schrift: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --rand: clamp(1.25rem, 5vw, 4rem);
  --breite: 1180px;
  --radius: 14px;
  --schatten: 0 2px 4px rgba(23,51,76,.04), 0 12px 32px rgba(23,51,76,.07);
  --schatten-stark: 0 4px 10px rgba(23,51,76,.08), 0 24px 56px rgba(23,51,76,.12);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  font-family:var(--schrift);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--blau); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ line-height:1.14; letter-spacing:-.022em; margin:0; font-weight:800; }
h1{ font-size:clamp(2.1rem, 1.3rem + 3.3vw, 3.75rem); }
h2{ font-size:clamp(1.65rem, 1.1rem + 2.2vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 1rem + .7vw, 1.45rem); font-weight:700; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.inhalt{ width:min(var(--breite), 100%); margin-inline:auto; padding-inline:var(--rand); }
.eng{ max-width:44rem; }

.vorlauf{
  font-size:.785rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--blau);
  margin:0 0 .9rem;
}
.vorlauf--gruen{ color:var(--gruen-dunkel); }
.vorlauf--hell{ color:var(--blau-hell); }

.lead{ font-size:clamp(1.08rem, 1rem + .45vw, 1.28rem); color:var(--grau-text); line-height:1.6; }

/* ---------- Knöpfe ---------- */

.knopf{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border-radius:100px;
  font-weight:650; font-size:.975rem; line-height:1.2;
  border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-decoration:none; cursor:pointer;
}
.knopf:hover{ text-decoration:none; transform:translateY(-2px); }
.knopf--voll{ background:var(--blau); color:#fff; box-shadow:0 6px 18px rgba(47,102,153,.28); }
.knopf--voll:hover{ background:var(--blau-dunkel); box-shadow:0 10px 26px rgba(47,102,153,.34); }
.knopf--rand{ border-color:var(--linie); color:var(--text); background:#fff; }
.knopf--rand:hover{ border-color:var(--blau); color:var(--blau); }
.knopf--hell{ background:#fff; color:var(--blau-tief); }
.knopf--hell:hover{ background:var(--blau-hauch); }
.knopf--geist{ border-color:rgba(255,255,255,.4); color:#fff; }
.knopf--geist:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.knopf--gruen{ background:var(--gruen-dunkel); color:#fff; box-shadow:0 6px 18px rgba(51,113,75,.25); }
.knopf--gruen:hover{ background:#2A5E3E; }
.knopf .pfeil{ transition:transform .16s ease; }
.knopf:hover .pfeil{ transform:translateX(3px); }

/* ---------- Kopfzeile ---------- */

.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.kopf.gescrollt{ border-bottom-color:var(--linie); box-shadow:0 2px 14px rgba(23,51,76,.05); }
.kopf__innen{
  width:min(var(--breite), 100%); margin-inline:auto;
  padding:.85rem var(--rand);
  display:flex; align-items:center; gap:2rem;
}
.kopf__logo img{ height:34px; width:auto; }
.kopf__nav{ margin-left:auto; display:flex; align-items:center; gap:1.75rem; }
.kopf__nav a{
  color:var(--grau-text); font-weight:550; font-size:.94rem;
  text-decoration:none; padding:.3rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.kopf__nav a:hover{ color:var(--blau); border-bottom-color:var(--blau); }
.kopf__nav .knopf{ padding:.6rem 1.25rem; font-size:.92rem; border-bottom:none; }
.kopf__nav .knopf--voll,
.kopf__nav .knopf--voll:hover{ color:#fff; border-bottom:none; }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:1px solid var(--linie); border-radius:10px;
  background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:19px; height:2px; background:var(--text); position:relative; }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--text);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }

/* ---------- Hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  align-items:stretch;
  background:linear-gradient(170deg, var(--blau-hauch) 0%, #fff 58%);
  border-bottom:1px solid var(--linie);
}
.hero__text{
  padding:clamp(3rem,6vw,5.5rem) clamp(1.25rem,4vw,3.5rem) clamp(3rem,6vw,5.5rem) var(--rand);
  display:flex; flex-direction:column; justify-content:center;
  max-width:42rem; margin-left:auto; width:100%;
}
.hero h1{ margin-bottom:1.15rem; }
.hero h1 em{
  font-style:normal; color:var(--blau);
  background:linear-gradient(transparent 68%, rgba(143,201,163,.42) 68%);
}
.hero__bild{ position:relative; overflow:hidden; min-height:clamp(320px, 46vw, 620px); }
.hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:46% center; }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }

/* Der Claim liegt gross auf dem Bild; der Verlauf darunter haelt ihn lesbar. */
.hero__bild::after{
  content:''; position:absolute; inset:auto 0 0 0; height:68%;
  background:linear-gradient(to top, rgba(18,42,64,.82) 0%, rgba(18,42,64,.42) 45%, transparent 100%);
  pointer-events:none;
}
.hero__spruch{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  margin:0; padding:0 clamp(1.25rem,3vw,2.75rem) clamp(1.5rem,3vw,2.6rem);
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.35rem,.75rem + 1.75vw,2.25rem);
  line-height:1.22; letter-spacing:-.01em; color:#fff;
  text-shadow:0 2px 20px rgba(10,25,40,.45);
}

/* ---------- Kennzahlen ---------- */

.zahlen{ background:var(--blau-tief); color:#fff; }
.zahlen__innen{
  width:min(var(--breite),100%); margin-inline:auto; padding:2.4rem var(--rand);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.zahl b{
  display:block; font-size:clamp(1.65rem,1.2rem + 1.5vw,2.3rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:#fff;
}
.zahl span{
  display:block; margin-top:.55rem; font-size:.855rem; line-height:1.4;
  color:#9FC2DE;
}

/* ---------- Abschnitte allgemein ---------- */

.abschnitt{ padding:clamp(3.75rem,7vw,6.5rem) 0; }
.abschnitt--hauch{ background:var(--grau-hauch); }
.abschnitt__kopf{ max-width:46rem; margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.abschnitt__kopf p{ margin-top:1.1rem; }

/* ---------- Drei Fragen ---------- */

.fragen{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.frage{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:2rem 1.75rem; position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.frage:hover{ transform:translateY(-4px); box-shadow:var(--schatten); border-color:#C9D9E7; }
.frage__nr{
  font-family:var(--serif); font-size:2.1rem; font-weight:600; line-height:1;
  color:var(--gruen-hell); margin-bottom:.9rem;
}
.frage h3{ margin-bottom:.65rem; }
.frage p{ color:var(--grau-text); font-size:.975rem; }
.frage__hin{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-size:.885rem; font-weight:650; color:var(--blau);
}

/* ---------- Leistungsblöcke ---------- */

.leistung{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border-top:1px solid var(--linie);
}
.leistung__bild{ position:relative; overflow:hidden; min-height:clamp(280px,36vw,520px); background:var(--grau-hell); }
.leistung__bild img{ width:100%; height:100%; object-fit:cover; }
.leistung__text{
  padding:clamp(2.75rem,5vw,4.5rem) clamp(1.5rem,4vw,3.75rem);
  display:flex; flex-direction:column; justify-content:center;
}
.leistung__text > div{ max-width:34rem; }
/* Das Bild steht im HTML hinter dem Text, deshalb braucht die Links-Variante order. */
.leistung--bild-rechts .leistung__bild{ order:2; }
.leistung--bild-rechts .leistung__text > div{ margin-left:auto; }
.leistung--bild-links .leistung__bild{ order:-1; }
.leistung--bild-links .leistung__text > div{ margin-right:auto; }
.leistung--hauch{ background:var(--grau-hauch); }
.leistung h2{ margin-bottom:1.1rem; }
.leistung p{ color:var(--grau-text); }

.haken{ list-style:none; margin:1.6rem 0 0; padding:0; }
.haken li{
  position:relative; padding-left:1.85rem; margin-bottom:.75rem;
  font-size:.975rem; line-height:1.5;
}
.haken li::before{
  content:''; position:absolute; left:0; top:.28em;
  width:1.2rem; height:1.2rem; border-radius:50%;
  border:1.5px solid var(--gruen-hell);
  background:var(--gruen-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.6 2.6 5-5.4' fill='none' stroke='%2333714B' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem .72rem no-repeat;
}
.haken--hell li::before{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.6 2.6 5-5.4' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem .72rem no-repeat;
}

.notiz{
  margin-top:1.75rem; padding:1.05rem 1.25rem;
  background:var(--blau-hauch); border-left:3px solid var(--blau-hell);
  border-radius:0 8px 8px 0;
  font-size:.945rem; line-height:1.5; color:var(--blau-dunkel);
}
.notiz b{ color:var(--blau-tief); }

/* ---------- Ablauf ---------- */

.ablauf{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.35rem; counter-reset:schritt; }
.schritt{
  position:relative; padding-top:2.5rem;
  border-top:2px solid var(--grau-hell);
}
.schritt::before{
  counter-increment:schritt; content:counter(schritt,decimal-leading-zero);
  position:absolute; top:-.05rem; left:0; transform:translateY(-50%);
  background:var(--weiss); padding-right:.7rem;
  font-size:.82rem; font-weight:800; letter-spacing:.1em; color:var(--blau);
}
.js-animiert .schritt::after{ width:0; }
.schritt::after{
  content:''; position:absolute; top:-2px; left:0; width:100%; height:2px;
  background:var(--blau); transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.schritt.sichtbar::after{ width:100%; }
.schritt h3{ font-size:1.08rem; margin-bottom:.5rem; }
.schritt p{ font-size:.94rem; color:var(--grau-text); }
.schritt__dauer{
  display:inline-block; margin-top:.8rem;
  font-size:.79rem; font-weight:650; color:var(--gruen-dunkel);
  background:var(--gruen-hauch); border-radius:100px; padding:.2rem .7rem;
}

.banner{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-radius:var(--radius); overflow:hidden;
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  background:var(--blau-tief); color:#fff;
  box-shadow:var(--schatten-stark);
}
.banner__text{ padding:clamp(2rem,4vw,3.25rem); display:flex; flex-direction:column; justify-content:center; }
.banner h2{ color:#fff; font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); margin-bottom:.9rem; }
.banner p{ color:#C3D8E9; }
.banner__bild{ overflow:hidden; min-height:260px; }
.banner__bild img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Förderung ---------- */

.foerderung{ background:var(--gruen-hauch); border-block:1px solid #D4E7DA; }
.foerder__raster{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.foerder__karte{
  background:#fff; border:1px solid #D4E7DA; border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.25rem); box-shadow:var(--schatten);
}
.foerder__logo{ height:38px; width:auto; margin-bottom:1.4rem; }
.foerder__zahl{
  display:flex; align-items:baseline; gap:.6rem;
  padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--grau-hell);
}
.foerder__zahl:last-of-type{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.foerder__zahl b{ font-size:1.5rem; font-weight:800; color:var(--gruen-dunkel); letter-spacing:-.02em; line-height:1.1; min-width:6.5rem; }
.foerder__zahl span{ font-size:.93rem; color:var(--grau-text); line-height:1.4; }
.foerder__fuss{ margin-top:1.5rem; font-size:.855rem; color:var(--grau-text); line-height:1.5; }

/* ---------- Person ---------- */

.person{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.person__bild{ position:relative; }
.person__bild img{
  width:min(320px,100%); border-radius:50%;
  border:6px solid #fff; box-shadow:var(--schatten-stark);
  margin-inline:auto;
}
.person h2{ margin-bottom:.4rem; }
.person__rollen{
  font-size:.92rem; font-weight:600; color:var(--blau);
  letter-spacing:.01em; margin-bottom:1.4rem;
}
.person__zitat{
  margin:1.6rem 0 0; padding-left:1.15rem;
  border-left:3px solid var(--gruen-hell);
  font-family:var(--serif); font-style:italic; font-size:1.13rem;
  line-height:1.45; color:var(--text);
}
.buecher{ display:flex; gap:1.15rem; margin-top:2rem; align-items:flex-end; flex-wrap:wrap; }
.buecher img{
  height:132px; width:auto; border-radius:3px;
  box-shadow:0 3px 8px rgba(23,51,76,.12), 0 12px 28px rgba(23,51,76,.14);
  transition:transform .2s ease;
}
.buecher img:hover{ transform:translateY(-4px) rotate(-1.2deg); }
.buecher__hin{ font-size:.875rem; color:var(--grau-text); max-width:14rem; line-height:1.45; }

/* ---------- Klappbereich (Werdegang, Zertifikate) ---------- */

.klapp{
  margin-top:1.9rem;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
}
.klapp summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; cursor:pointer;
  font-weight:650; font-size:.98rem; color:var(--blau);
  list-style:none;
}
.klapp summary::-webkit-details-marker{ display:none; }
.klapp summary::after{
  content:''; flex:0 0 auto;
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:1.5px solid var(--linie);
  background:
    linear-gradient(var(--blau),var(--blau)) center/.62rem .11rem no-repeat,
    linear-gradient(var(--blau),var(--blau)) center/.11rem .62rem no-repeat;
  transition:transform .22s ease, border-color .22s ease;
}
.klapp[open] summary::after{ transform:rotate(135deg); border-color:var(--blau); }
.klapp summary:hover{ color:var(--blau-dunkel); }
.klapp summary:focus-visible{ outline:2px solid var(--blau); outline-offset:3px; border-radius:4px; }
.klapp__inhalt{ padding:.35rem 0 1.75rem; }
.klapp__titel{
  font-size:.79rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grau-text); margin:1.5rem 0 .9rem;
}
.klapp__inhalt > .klapp__titel:first-child{ margin-top:.5rem; }
.klapp__text{ font-size:.93rem; color:var(--grau-text); line-height:1.55; }

.vita{ list-style:none; margin:0; padding:0; }
.vita li{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--grau-hell);
  font-size:.93rem; line-height:1.5; color:var(--grau-text);
}
.vita li:last-child{ border-bottom:none; }
.vita__zeit{ font-weight:650; color:var(--blau); font-variant-numeric:tabular-nums; }
.vita b{ color:var(--text); font-weight:650; }

.zertifikate{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:2rem;
}
.zertifikate li{
  break-inside:avoid; position:relative; padding-left:.95rem; margin-bottom:.5rem;
  font-size:.91rem; line-height:1.45; color:var(--grau-text);
}
.zertifikate li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:.32rem; height:.32rem; border-radius:50%; background:var(--gruen-hell);
}

/* ---------- Kontakt ---------- */

.kontakt{ background:var(--blau-tief); color:#fff; }
.kontakt h2{ color:#fff; }
.kontakt .lead{ color:#C3D8E9; }
.kontakt__raster{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.kontakt__wege{ display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem; }
.kontakt__weg{ display:flex; gap:.9rem; align-items:flex-start; }
.kontakt__weg svg{ flex:0 0 auto; margin-top:.2rem; color:var(--gruen-hell); }
.kontakt__weg a{ color:#fff; font-weight:600; font-size:1.05rem; }
.kontakt__weg span{ display:block; font-size:.855rem; color:#9FC2DE; margin-top:.1rem; }
.standorte{ display:grid; gap:1rem; margin-top:1.6rem; }
.standort{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:1.1rem 1.25rem;
}
.standort b{ display:block; font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gruen-hell); margin-bottom:.35rem; }
.standort span{ font-size:.985rem; color:#E3EEF6; line-height:1.45; }

/* ---------- Fuß ---------- */

.fuss{ background:#122A40; color:#8FB0CB; padding:clamp(2.75rem,5vw,4rem) 0 2rem; font-size:.9rem; }
.fuss__marken{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  padding-bottom:2rem; margin-bottom:1.75rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.marke b{ display:block; color:#fff; font-size:.98rem; font-weight:700; margin-bottom:.25rem; }
.marke span{ display:block; font-size:.855rem; line-height:1.45; margin-bottom:.5rem; }
.marke a{ color:var(--gruen-hell); font-size:.855rem; font-weight:600; }
.fuss__unten{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.fuss__logo{ height:28px; width:auto; opacity:.92; }
.fuss__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.fuss__links a{ color:#8FB0CB; }
.fuss__links a:hover{ color:#fff; }
.fuss__notiz{ margin-top:1.5rem; font-size:.8rem; color:#6D8CA6; line-height:1.5; }

/* ---------- Einblenden beim Scrollen ---------- */

/* Ohne JavaScript bleibt alles sichtbar — die Klasse kommt erst per Skript dazu. */
.js-animiert .rein{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js-animiert .rein.sichtbar{ opacity:1; transform:none; }
.js-animiert .rein:nth-child(2){ transition-delay:.08s; }
.js-animiert .rein:nth-child(3){ transition-delay:.16s; }
.js-animiert .rein:nth-child(4){ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-animiert .rein{ opacity:1; transform:none; transition:none; }
  .js-animiert .schritt::after{ transition:none; width:100%; }
  .knopf:hover, .frage:hover, .buecher img:hover{ transform:none; }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width:1000px){
  .fragen{ grid-template-columns:1fr; }
  .ablauf{ grid-template-columns:1fr 1fr; gap:1.75rem 1.35rem; }
  .foerder__raster,.person,.kontakt__raster{ grid-template-columns:1fr; }
  .person__bild img{ width:min(240px,60%); }
  .banner{ grid-template-columns:1fr; }
  .banner__bild{ order:-1; max-height:260px; }
  .fuss__marken{ grid-template-columns:1fr 1fr; }
  .zertifikate{ columns:1; }
}

@media (max-width:820px){
  .kopf__nav{
    position:fixed; inset:66px 0 auto; z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--linie);
    padding:.5rem var(--rand) 1.5rem;
    box-shadow:0 14px 30px rgba(23,51,76,.1);
    display:none;
  }
  .kopf__nav.offen{ display:flex; }
  .kopf__nav a{ padding:.85rem 0; border-bottom:1px solid var(--grau-hell); font-size:1rem; }
  .kopf__nav a:hover{ border-bottom-color:var(--grau-hell); }
  .kopf__nav .knopf{ margin-top:1rem; justify-content:center; padding:.85rem 1.5rem; }
  .burger{ display:flex; }

  .hero{ grid-template-columns:1fr; }
  .hero__bild{ order:-1; min-height:clamp(260px,58vw,420px); }
  .hero__text{ max-width:none; padding:2.75rem var(--rand) 3.25rem; }

  .zahlen__innen{ grid-template-columns:1fr; gap:1.35rem; padding:2rem var(--rand); }
  .vita li{ grid-template-columns:1fr; gap:.15rem; }

  .leistung{ grid-template-columns:1fr; }
  .leistung__bild{ order:-1 !important; min-height:clamp(240px,52vw,360px); }
  .leistung__text{ padding:2.5rem var(--rand) 3rem; }
  .leistung__text > div{ max-width:none; }
}

@media (max-width:560px){
  .ablauf{ grid-template-columns:1fr; }
  .fuss__marken{ grid-template-columns:1fr; gap:1.25rem; }
  .buecher img{ height:110px; }
  .foerder__zahl{ flex-direction:column; gap:.15rem; }
  .foerder__zahl b{ min-width:0; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.rechtstext{ padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem); }
.rechtstext h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); margin-bottom:.75rem; }
.rechtstext h2{ font-size:1.3rem; margin:2.5rem 0 .85rem; }
.rechtstext h3{ font-size:1.05rem; margin:1.75rem 0 .6rem; }
.rechtstext p,.rechtstext li{ color:var(--grau-text); font-size:.99rem; }
.rechtstext ul{ padding-left:1.25rem; margin:0 0 1.15em; }
.rechtstext li{ margin-bottom:.4rem; }
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:600; margin-bottom:2rem;
}