/* Landingpage Claudia Hannemann: Aussehen.
   Inhalt steht in index.html, Bewegung in bewegung.js.
   Schriften und Bilder liegen lokal, es wird nichts von fremden Servern geladen. */

@font-face{font-family:"Jost";src:url("schriften/jost-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("schriften/lora-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* Design-System: Farben aus dem Ara-Logo, helle und dunkle Abstufungen ergänzt. */
:root{
  --blau:#2694CA;
  --blau-dunkel:#1A6E9C;
  --blau-hell:#E7F3FA;
  --gelb:#FBBF14;
  --gelb-hell:#FEF4D6;
  --rot:#E21522;
  --tinte:#1F2A33;
  --nacht:#12384D;
  --weiss:#FFFFFF;
  --linie:#DCE7EE;
  --radius:16px;
  --breite:1120px;
  --schrift-text:"Jost","Century Gothic","Segoe UI",sans-serif;
  --schrift-titel:"Lora",Georgia,serif;
  --fokus:var(--tinte);

  /* Bewegung: eine Stelle für Dauer und Verlauf. Kein Überschwingen. */
  --dauer-kurz:160ms;
  --dauer-mittel:280ms;
  --dauer-ruhig:560ms;
  --dauer-lang:800ms;
  --kurve-rein:cubic-bezier(.22,.61,.36,1);
  --kurve-raus:cubic-bezier(.4,0,1,1);
  --staffel:70ms;
  --weg:16px;
  --tempo-laufband:30; /* Pixel pro Sekunde */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
html.bewegt{scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift-text);font-size:1.125rem;line-height:1.6;color:var(--tinte);background:var(--weiss);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:var(--blau-dunkel)}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);color:var(--blau-dunkel)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
strong{font-weight:600}
[id]{scroll-margin-top:96px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.abschnitt{padding:4.5rem 0}
.abschnitt--anschluss{padding-top:0}
.abschnitt--offen{padding-bottom:0}
.mitte{text-align:center}
.schmal{max-width:44rem;margin-inline:auto}
.ohne-rand{margin:0}
/* Zeile direkt unter einem Abschnittstitel: sichtbar größer als der Fließtext */
.unterzeile{font-size:clamp(1.2rem,2.2vw,1.4rem);line-height:1.45}
.vorzeile{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blau-dunkel);margin:0 0 1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprung{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:.6rem 1rem;z-index:50}
.sprung:focus{left:.5rem;top:.5rem}

/* Buttons als Pillen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;border:2px solid transparent;font:600 1rem/1.2 var(--schrift-text);text-decoration:none;transition:background-color var(--dauer-kurz) var(--kurve-rein),translate var(--dauer-kurz) var(--kurve-rein),scale var(--dauer-kurz) var(--kurve-rein)}
.btn:hover{translate:0 -1px}
.btn:active{translate:0 0;scale:.98}
.btn--gelb{background:var(--gelb);color:var(--tinte)}
.btn--gelb:hover{background:#E8AE05}
.btn--linie{border-color:var(--blau-dunkel);color:var(--blau-dunkel);background:transparent}
.btn--linie:hover{background:var(--blau-hell)}
.textlink{font-weight:500}

/* Platzhalter: sichtbar markiert, bis Zahlen und Stimmen geliefert sind */
.platzhalter{display:grid;place-items:center;text-align:center;padding:1.5rem;background:var(--weiss);border:2px dashed var(--blau-dunkel);color:var(--blau-dunkel);font-size:.95rem;font-weight:500;line-height:1.35}
[data-platzhalter]{outline:2px dashed var(--rot);outline-offset:4px}
.entwurf{position:fixed;left:.75rem;bottom:.75rem;z-index:40;margin:0;background:var(--rot);color:#fff;font:600 .8rem/1 var(--schrift-text);padding:.55rem .8rem;border-radius:999px;box-shadow:0 6px 18px rgb(18 56 77/.25)}

/* Umschalter "Für mein Kind / Für mich": blendet die jeweils andere Fassung aus.
   Mit JavaScript steht die Wahl als data-fuer am <html>, ohne JavaScript greift :has(). */
html[data-fuer="kind"] [data-nur="ich"],
html[data-fuer="ich"] [data-nur="kind"]{display:none}
html:not([data-fuer]):not(:has([id="zg-ich"]:checked)) [data-nur="ich"]{display:none}
html:not([data-fuer]):has([id="zg-ich"]:checked) [data-nur="kind"]{display:none}

/* Zwei Fassungen an derselben Stelle: liegen übereinander, damit beim Wechsel nichts springt */
.tausch{display:grid}
.tausch>*{grid-area:1/1;min-width:0;transition:opacity var(--dauer-ruhig) var(--kurve-rein) 80ms,visibility 0s}
html[data-fuer="kind"] [data-blende="ich"],
html[data-fuer="ich"] [data-blende="kind"]{opacity:0;visibility:hidden;transition:opacity var(--dauer-kurz) var(--kurve-raus),visibility 0s var(--dauer-kurz)}
html:not([data-fuer]):not(:has([id="zg-ich"]:checked)) [data-blende="ich"]{opacity:0;visibility:hidden}
html:not([data-fuer]):has([id="zg-ich"]:checked) [data-blende="kind"]{opacity:0;visibility:hidden}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0}
.marke{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.marke img{height:60px;width:auto}
.marke__claim{display:none;font-weight:500;font-size:1rem;line-height:1.2;color:var(--blau-dunkel)}
.nav{display:none;gap:1.3rem}
.nav a{color:var(--tinte);text-decoration:none;font-weight:500;font-size:1rem}
.nav a:hover{color:var(--blau-dunkel);text-decoration:underline;text-underline-offset:6px}
.kopf .btn{padding:.7rem 1.2rem;font-size:.95rem;white-space:nowrap}

/* Hero: unter 1040 px Foto als Band oben, darüber nebeneinander.
   Der Text liegt nie über dem Foto, deshalb bleibt er immer gut lesbar. */
.hero{position:relative;background:var(--blau-hell);display:flex;flex-direction:column;overflow-x:clip;padding-bottom:4.5rem}
.hero__bilder{order:-1;position:relative;aspect-ratio:16/11;max-height:30rem;width:100%}
.hero__buehne{position:absolute;inset:0;overflow:clip}
.hero__buehne::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--blau-hell) 0,rgb(231 243 250/.55) 16%,rgb(231 243 250/0) 40%)}
.hero__ebene{position:absolute;inset:0}
.hero__portraet{position:absolute;inset:0}
.hero__portraet{--bildfokus:50% 15%}
.hero__portraet img{width:100%;height:100%;object-fit:cover;object-position:var(--bildfokus);scale:1.06}
.hero__szene{position:absolute;left:1.25rem;bottom:-1.6rem;z-index:3;width:min(40vw,11.5rem);aspect-ratio:4/3;border:5px solid #fff;border-radius:10px;background:#fff;box-shadow:0 12px 32px rgb(18 56 77/.24);rotate:-3deg;overflow:hidden}
.hero__szene picture,.hero__szene img{width:100%;height:100%}
.hero__szene img{object-fit:cover}
.hero__text{position:relative;z-index:2;width:min(100% - 2.5rem,var(--breite));margin-inline:auto;padding-top:3.25rem}
.hero__text .einstieg{font-size:1.2rem;max-width:34rem;margin-bottom:1.75rem}
.hero__text .einstieg p{margin:0}
.satz{display:block}
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich svg{position:absolute;left:-3%;bottom:-.2em;z-index:-1;width:106%;height:.34em;max-width:none;overflow:visible}
.strich path{fill:none;stroke:var(--gelb);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

.wahl{border:0;padding:0;margin:1.5rem 0 1.5rem;min-inline-size:0}
.wahl legend{padding:0;margin:0 0 .6rem;font-size:.95rem;font-weight:500;color:var(--blau-dunkel)}
.wahl__leiste{position:relative;display:inline-flex;gap:2px;padding:3px;background:#fff;border:2px solid var(--blau-dunkel);border-radius:999px}
.wahl label{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1.15rem;border-radius:999px;font-weight:600;font-size:1rem;color:var(--blau-dunkel);cursor:pointer;transition:background-color var(--dauer-mittel) var(--kurve-rein),color var(--dauer-mittel) var(--kurve-rein)}
.wahl label:hover{background:var(--blau-hell)}
.wahl input:checked+label{background:var(--blau-dunkel);color:#fff}
.wahl input:focus-visible+label{outline:3px solid var(--tinte);outline-offset:3px}

.hero__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.hero .hero__fakten{position:relative;z-index:3;width:min(100% - 2.5rem,var(--breite));margin:2rem auto 0}
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.haken li{display:flex;gap:.7rem;align-items:flex-start}
.haken svg{flex:none;margin-top:.2rem;color:var(--blau-dunkel)}
/* Halbrunde Lasche mit Pfeil */
.lasche{position:absolute;left:50%;bottom:-52px;translate:-50% 0;width:104px;height:52px;border-radius:0 0 104px 104px;background:var(--blau-hell);display:grid;place-items:center;color:var(--blau-dunkel);z-index:4}
.lasche svg{margin-top:-8px}

/* Wiedererkennen */
.karten{display:grid;gap:1.25rem;margin-top:2.5rem}
.karte{background:var(--gelb-hell);border-radius:var(--radius);padding:1.75rem;transition:translate var(--dauer-mittel) var(--kurve-rein),box-shadow var(--dauer-mittel) var(--kurve-rein)}
.karte p{margin:0}
.karte__icon{width:56px;height:56px;border-radius:50%;background:var(--blau-dunkel);color:#fff;display:grid;place-items:center;margin-bottom:1.1rem}
.entlastung{margin:2.5rem auto 0;max-width:40rem;text-align:center;font-family:var(--schrift-titel);font-weight:500;font-size:1.35rem;line-height:1.35}

/* "Eine Etage tiefer": Text links, rechts Foto mit überlappendem Kasten */
.zwei{display:grid;gap:2.5rem;align-items:start}
.tiefer__bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;max-height:24rem;width:100%}
.tiefer__bild picture,.tiefer__bild img{width:100%;height:100%}
.tiefer__bild img{object-fit:cover;object-position:50% 62%}
.klarheit{position:relative;z-index:1;margin:-3.5rem .9rem 0;background:var(--blau-dunkel);color:#fff;border-radius:var(--radius);padding:1.75rem;--fokus:#fff}
.klarheit .vorzeile{color:#fff}
.klarheit blockquote{margin:0 0 1.25rem;font-family:var(--schrift-titel);font-weight:500;font-size:1.35rem;line-height:1.3}
.klarheit ul{margin:0;padding-left:1.2rem}
.klarheit li+li{margin-top:.5rem}

/* Mit wem ich arbeite: Kreise mit Fotos, darunter das Band für Kitas und Schulen */
.hell{background:var(--blau-hell)}
.kreise{display:grid;gap:2.5rem;margin-top:2.75rem}
.kreis-gruppe{text-align:center}
.kreis-gruppe h3{margin:0 0 .4rem;font-size:1.6rem}
.kreis-gruppe p{max-width:19rem;margin:0 auto}
.kreis{width:min(220px,62vw);aspect-ratio:1;border-radius:50%;margin:0 auto 1.25rem;padding:7px}
.kreis picture{height:100%;border-radius:50%;overflow:hidden}
.kreis img{width:100%;height:100%;object-fit:cover;transition:scale var(--dauer-ruhig) var(--kurve-rein)}
.kreis--gelb{background:var(--gelb)}
.kreis--blau{background:var(--blau)}
.kreis--dunkel{background:var(--blau-dunkel)}
.gruppen{margin-top:3.5rem;background:#fff;border-radius:var(--radius);overflow:hidden;display:grid}
.gruppen__bild{aspect-ratio:4/3}
.gruppen__bild picture,.gruppen__bild img{width:100%;height:100%}
.gruppen__bild img{object-fit:cover;object-position:60% 30%}
.gruppen__text{padding:1.75rem}
.gruppen__text h3{font-size:1.5rem;color:var(--blau-dunkel)}
.gruppen__text p:last-child{margin:1.5rem 0 0}

/* Zähler auf abgedunkeltem Foto */
/* Das Foto ist oben angeschlagen, damit das Gesicht nie angeschnitten wird: am Handy rückt es nach links,
   auf sehr breiten Bildschirmen sorgt die Mindesthöhe dafür, dass auch das Kinn im Bild bleibt. */
.zahlen{position:relative;isolation:isolate;overflow:clip;padding:4.5rem 0;min-height:24vw;display:grid;align-content:center;color:#fff;text-align:center;--fokus:#fff}
.zahlen__bild{position:absolute;inset:0;z-index:-2}
.zahlen__bild img{width:100%;height:100%;object-fit:cover;object-position:20% 0}
.zahlen::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(18 56 77/.88)}
.zahlen .vorzeile{color:var(--gelb)}
.zahlen h2{color:#fff}
/* Die Zahlen stehen mittig nebeneinander, egal ob es zwei, drei oder vier sind. */
.zahlen__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:2.25rem 1.25rem;margin:2.5rem 0 1.75rem}
.zahl{flex:1 1 9rem;max-width:15rem;display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:.6rem}
.zahl dt{max-width:14rem;font-size:1.05rem;line-height:1.35}
.zahl dd{margin:0}
.zahl__wert{display:inline-block;font:600 clamp(2.4rem,6vw,3.5rem)/1 var(--schrift-titel);color:var(--gelb);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.zahlen__stand{margin:0;font-size:.9rem}

/* Stimmen: Bewertungsleiste und laufendes Band */
.bewertungen{list-style:none;padding:0;margin:2rem 0 .9rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.bewertung{display:flex;align-items:center;gap:.9rem;padding:.8rem 1.4rem;border:2px solid var(--linie);border-radius:999px;background:#fff;color:var(--tinte);text-decoration:none;line-height:1.3;transition:border-color var(--dauer-mittel) var(--kurve-rein),translate var(--dauer-mittel) var(--kurve-rein)}
.bewertung:hover{border-color:var(--blau-dunkel);translate:0 -2px}
.bewertung img{flex:none;height:32px;width:auto}
.bewertung strong{font-size:1.15rem}
.bewertungen__stand{text-align:center;font-size:.9rem;color:#4A5863;margin:0 0 2.25rem}
.laufband__kopf{display:flex;justify-content:center;margin:0 0 .5rem}
.laufband__knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem 1.1rem;border:2px solid var(--blau-dunkel);border-radius:999px;background:#fff;color:var(--blau-dunkel);font:600 .95rem/1.2 var(--schrift-text);cursor:pointer}
.laufband__knopf:hover{background:var(--blau-hell)}
.laufband__knopf[hidden]{display:none}
.laufband__rahmen{position:relative}
.laufband__fenster{overflow-x:auto;scroll-snap-type:x mandatory;padding:.75rem 1.25rem 1.5rem;scrollbar-width:thin}
.laufband__spur{display:flex;width:max-content;list-style:none;margin:0;padding:0}
.stimme{flex:0 0 min(22rem,82vw);margin-inline-end:1.25rem;scroll-snap-align:center;background:var(--gelb-hell);border-radius:var(--radius);padding:1.6rem}
.stimme[hidden]{display:none}
.stimme figure{margin:0}
.stimme blockquote{margin:0 0 .9rem;font-family:var(--schrift-titel);font-weight:500;font-size:1.15rem;line-height:1.4}
.stimme figcaption{font-size:.95rem;font-weight:600;color:var(--blau-dunkel)}
[data-zustand="laeuft"] .laufband__fenster{overflow:hidden;padding-inline:0;scroll-snap-type:none}
[data-zustand="laeuft"] .laufband__spur{animation:laufband var(--laufzeit,60s) linear infinite}
[data-zustand="laeuft"] .laufband__fenster:hover .laufband__spur,
[data-zustand="laeuft"].ausser-sicht .laufband__spur{animation-play-state:paused}
[data-zustand="laeuft"] .laufband__rahmen::before,
[data-zustand="laeuft"] .laufband__rahmen::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:min(6rem,12vw);pointer-events:none}
[data-zustand="laeuft"] .laufband__rahmen::before{left:0;background:linear-gradient(90deg,#fff,rgb(255 255 255/0))}
[data-zustand="laeuft"] .laufband__rahmen::after{right:0;background:linear-gradient(270deg,#fff,rgb(255 255 255/0))}
@keyframes laufband{to{transform:translateX(-50%)}}

/* Bekannt aus: Durchlaufleiste unter dem Hero. Ohne Bewegung stehen die Namen mittig in Zeilen.
   Der obere Abstand hält Platz für die Lasche mit dem Pfeil frei. */
.bekannt{padding:4.75rem 0 0;text-align:center}
.bekannt .vorzeile{margin:0 0 .5rem}
.bekannt__eintrag{flex:none;margin:0 1.4rem;display:flex;align-items:center}
/* Jedes Logo passt in denselben Kasten, so wirken breite und hohe Logos ähnlich groß. Farben bleiben unverändert. */
.bekannt__logo{height:2.5rem;width:auto;max-width:8.5rem;object-fit:contain}
/* Ausgleich fürs Auge: sehr kräftige Logos etwas kleiner, sehr flache etwas breiter */
.bekannt__logo--kraeftig{height:2rem}
.bekannt__logo--flach{max-width:11rem}
.laufband--marken .laufband__fenster{overflow:visible;padding:.5rem 1.25rem;scroll-snap-type:none}
.laufband--marken .laufband__spur{flex-wrap:wrap;justify-content:center;align-items:center;width:auto;row-gap:1.1rem}
.laufband--marken[data-zustand="laeuft"] .laufband__fenster{overflow:hidden;padding-inline:0}
.laufband--marken[data-zustand="laeuft"] .laufband__spur{flex-wrap:nowrap;justify-content:flex-start;width:max-content}
/* Der Knopf zum Anhalten ist ausgeblendet. Er erscheint nur, wenn jemand mit der Tastatur darauf springt;
   mit der Maus hält die Leiste beim Darüberfahren an, am Handy beim Berühren. */
.laufband--marken .laufband__kopf{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.laufband--marken .laufband__kopf:focus-within{position:static;width:auto;height:auto;margin:.4rem 0 0;overflow:visible;clip-path:none}
.laufband--marken .laufband__knopf{min-height:36px;padding:.2rem .9rem;border-width:1px;font-size:.85rem;font-weight:500}

/* Ablauf auf Farbband: Nummern an einer Linie, darunter Foto und Text */
.band{background:var(--gelb-hell)}
.schritte{--luecke:2.25rem;display:grid;gap:var(--luecke);margin:2.75rem 0 2.5rem;padding:0;list-style:none}
.schritt{container-type:inline-size}
.schritt p{margin:0}
.schritt__kopf{display:flex;align-items:center;margin-bottom:1.1rem}
.schritt__nr{flex:none;width:56px;height:56px;border-radius:50%;background:var(--weiss);border:2px solid var(--blau-dunkel);color:var(--blau-dunkel);display:grid;place-items:center;font:600 1.5rem/1 var(--schrift-titel)}
.schritt__linie{display:none}
.schritt__bild{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;margin-bottom:1.1rem}
.schritt__bild picture,.schritt__bild img{width:100%;height:100%}
.schritt__bild img{object-fit:cover}

/* Über Claudia */
.ueber{display:grid;gap:2.5rem;align-items:center}
.ueber__flaeche{position:relative;background:var(--blau-hell);border-radius:var(--radius);padding:1.75rem}
.ueber__foto{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden}
.ueber__foto picture,.ueber__foto img{width:100%;height:100%}
.ueber__foto img{object-fit:cover}
.ueber__klein{position:absolute;left:-.6rem;bottom:-.9rem;z-index:1;width:36%;aspect-ratio:1;border:6px solid #fff;border-radius:50%;overflow:hidden;box-shadow:0 10px 26px rgb(18 56 77/.2)}
.ueber__klein picture,.ueber__klein img{width:100%;height:100%}
.ueber__klein img{object-fit:cover}
.rolle{font-weight:600;color:var(--blau-dunkel);margin-bottom:1.25rem}
.ueber__aktion{margin:1.75rem 0 0}

/* Blog: Karten mit Beitragsbild, die ganze Karte ist anklickbar */
.beitraege{display:grid;gap:1.25rem;margin:2.5rem 0 2rem}
.beitrag{position:relative;background:var(--weiss);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:translate var(--dauer-mittel) var(--kurve-rein),box-shadow var(--dauer-mittel) var(--kurve-rein)}
.beitrag__bild{aspect-ratio:16/9;overflow:hidden;background:var(--gelb-hell)}
.beitrag__bild img{width:100%;height:100%;object-fit:cover;transition:scale var(--dauer-ruhig) var(--kurve-rein)}
.beitrag__inhalt{padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.beitrag__herkunft{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--blau-dunkel);margin:0}
.beitrag h3{font-size:1.15rem;line-height:1.25;margin:0;hyphens:manual}
.beitrag h3 a{color:var(--tinte);text-decoration:none}
.beitrag h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.beitrag h3 a:focus-visible{outline:none}
.beitrag:has(h3 a:focus-visible){outline:3px solid var(--fokus);outline-offset:3px}
.beitrag p{font-size:1rem;margin:0}
.beitrag__mehr{margin-top:auto;padding-top:.4rem;font-weight:600;font-size:1rem;color:var(--blau-dunkel);display:inline-flex;align-items:center;gap:.4rem}

/* Ausbildung: Rahmen mit Seminarfoto, am Handy Foto oben, ab 960 px Foto rechts */
.rahmen{border:2px solid var(--blau-dunkel);border-radius:var(--radius);overflow:hidden;display:grid}
.rahmen__bild{aspect-ratio:3/2;overflow:hidden}
.rahmen__bild picture,.rahmen__bild img{width:100%;height:100%}
.rahmen__bild img{object-fit:cover;object-position:30% 50%;transition:scale 1.8s var(--kurve-rein)}
.rahmen__text{padding:1.75rem}
.rahmen h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.rahmen p{margin:0;max-width:40rem}
.rahmen .vorzeile{margin-bottom:.8rem}
.rahmen .rahmen__aktion{margin-top:1.5rem}

/* Fragen */
.fragen{max-width:48rem;margin:2.5rem auto 0;display:grid;gap:.8rem}
.fragen details{background:var(--blau-hell);border-radius:var(--radius);padding:0 1.4rem}
.fragen summary{cursor:pointer;list-style:none;position:relative;padding:1.1rem 2.2rem 1.1rem 0;font-weight:600}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;font-size:1.7rem;font-weight:400;line-height:1;color:var(--blau-dunkel);transition:rotate var(--dauer-mittel) var(--kurve-rein)}
.fragen details[open] summary::after{rotate:45deg}
.fragen details p{margin:0;padding-bottom:1.25rem}
.fragen details ul{margin:0;padding:0 0 1.2rem 1.2rem}
.fragen details li+li{margin-top:.35rem}
/* Akkordeon in "Über mich": dieselben Klappen wie bei den Fragen, nur schmaler gesetzt */
.fragen--klein{max-width:none;margin:0;gap:.6rem}
.fragen--klein summary{padding-block:.85rem}
.ueber__zwischentitel{margin:2rem 0 .9rem}

/* Abschluss */
.abschluss{position:relative;overflow:hidden;background:var(--blau-dunkel);color:#fff;text-align:center;--fokus:#fff}
.abschluss::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.07);left:-120px;bottom:-170px}
.abschluss::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);right:-60px;top:-80px}
.abschluss .wrap{position:relative;z-index:1}
.abschluss__foto{width:8rem;aspect-ratio:1;margin:0 auto 1.5rem;border:5px solid #fff;border-radius:50%;overflow:hidden;box-shadow:0 12px 30px rgb(8 40 58/.35)}
.abschluss__foto picture,.abschluss__foto img{width:100%;height:100%}
.abschluss__foto img{object-fit:cover}
.abschluss h2{color:#fff}
.abschluss p{font-size:1.2rem}
.abschluss a{color:#fff}
.abschluss .btn--gelb{color:var(--tinte)}
.abschluss__aktion{margin:2rem 0 0}
.abschluss .abschluss__andere{margin:1.1rem 0 0;font-size:1rem}
.kontakt{list-style:none;padding:0;margin:2.25rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2rem}

/* Fuß */
.fuss{padding:3rem 0;font-size:1rem}
.fuss__raster{display:grid;gap:2rem;align-items:start}
.fuss img{width:170px}
.fuss p{margin:0}
.fuss nav{display:grid;gap:.4rem}

/* Textseiten: Impressum, Datenschutz, Seite nicht gefunden */
.kopf__zurueck{color:var(--blau-dunkel);font-weight:500;font-size:1rem;text-decoration:none;white-space:nowrap}
.kopf__zurueck:hover{text-decoration:underline;text-underline-offset:6px}
.textseite{padding:3rem 0 4.5rem}
.textseite .wrap{max-width:46rem}
.textseite h1{margin-bottom:.8em}
.textseite h2{font-size:clamp(1.4rem,2.6vw,1.75rem);margin:2.2em 0 .6em}
.textseite h3{font-size:1.2rem;margin:1.8em 0 .5em}
.textseite h4{font-size:1.0625rem;font-weight:600;line-height:1.3;margin:1.5em 0 .4em}
.textseite p,.textseite li{font-size:1.0625rem}
.textseite ul{padding-left:1.25rem}
.textseite li{margin-bottom:.5em}
.textseite a{overflow-wrap:anywhere}
.textseite .btn{margin-top:.5rem}

/* Bewegung: alles hier gilt nur, wenn am <html> die Klasse "bewegt" steht. */
.bewegt .satz--2{animation:satz-rein var(--dauer-ruhig) var(--kurve-rein) 900ms both}
.bewegt .strich path{animation:strich-zeichnen var(--dauer-lang) var(--kurve-rein) 1450ms both}
@keyframes satz-rein{from{opacity:0;translate:0 .35em}to{opacity:1;translate:0 0}}
@keyframes strich-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.bewegt [data-zeig]{opacity:0;translate:0 var(--weg)}
.bewegt [data-zeig="blende"]{translate:none}
.bewegt [data-zeig].ist-da{opacity:1;translate:0 0;transition:opacity var(--dauer-ruhig) var(--kurve-rein) var(--verzug,0ms),translate var(--dauer-ruhig) var(--kurve-rein) var(--verzug,0ms)}
/* Seminarfoto bei "Für Fachkräfte": startet leicht vergrößert und kommt beim Einblenden langsam zur Ruhe */
.bewegt .rahmen[data-zeig]:not(.ist-da) .rahmen__bild img{scale:1.1}
.bewegt [data-zeig] .schritt__linie{scale:0 1}
.bewegt [data-zeig].ist-da .schritt__linie{scale:1 1;transition:scale var(--dauer-ruhig) var(--kurve-rein) var(--verzug,0ms)}
@media print{[data-zeig]{opacity:1!important;translate:none!important}}

.bewegt .fragen details[open]>p,.bewegt .fragen details[open]>ul{animation:blende var(--dauer-mittel) var(--kurve-rein)}
@keyframes blende{from{opacity:0}}
@supports selector(::details-content) and (interpolate-size:allow-keywords){
  .bewegt .fragen details{interpolate-size:allow-keywords}
  .bewegt .fragen details::details-content{block-size:0;overflow:clip;transition:block-size var(--dauer-mittel) var(--kurve-raus),content-visibility var(--dauer-mittel) allow-discrete}
  .bewegt .fragen details[open]::details-content{block-size:auto;transition-duration:var(--dauer-ruhig);transition-timing-function:var(--kurve-rein)}
}

@media (hover:hover){
  .karte:hover,.beitrag:hover{translate:0 -3px;box-shadow:0 14px 30px rgb(18 56 77/.12)}
  .beitrag:hover .beitrag__bild img{scale:1.04}
  .kreis-gruppe:hover .kreis img{scale:1.05}
}

/* Tiefe am Handy: Ebenen wandern beim Scrollen minimal mit (nur wo der Browser das kann) */
@media (hover:none),(pointer:coarse){
  @supports (animation-timeline:scroll()){
    .bewegt .hero [data-tiefe]{animation:hero-rollen linear both;animation-timeline:scroll(root);animation-range:0 600px}
  }
}
@keyframes hero-rollen{to{translate:0 var(--rollen,0px)}}
.hero__ebene{--rollen:14px}
.hero__szene{--rollen:-16px}

@media (min-width:640px){
  .marke__claim{display:block}
  .beitraege{grid-template-columns:repeat(2,1fr)}
  .hero .hero__fakten{grid-template-columns:1fr 1fr;gap:.9rem 2rem}
  .kreise{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .kreis{width:min(220px,100%)}
}
/* Zwischen Handy und Desktop: Foto links, Text rechts, damit die Bilder nicht riesig werden */
@media (min-width:640px) and (max-width:799.98px){
  .schritt{display:grid;grid-template-columns:42% 1fr;grid-template-rows:auto auto 1fr;column-gap:1.5rem;grid-template-areas:"kopf kopf" "bild titel" "bild text"}
  .schritt__kopf{grid-area:kopf}
  .schritt__bild{grid-area:bild;margin-bottom:0}
  .schritt h3{grid-area:titel}
  .schritt p{grid-area:text}
}
@media (min-width:800px){
  .karten{grid-template-columns:repeat(3,1fr)}
  .kreise{gap:2.5rem}
  .zahlen__liste{gap:2.25rem 2rem}
  .bekannt__eintrag{margin:0 2.1rem}
  .bekannt__logo{height:3rem;max-width:10.5rem}
  .bekannt__logo--kraeftig{height:2.4rem}
  .bekannt__logo--flach{max-width:13.5rem}
  .schritte{grid-template-columns:repeat(3,1fr)}
  .schritt:not(:last-child) .schritt__linie{display:block;flex:none;height:2px;margin-left:.75rem;width:calc(100cqw - 56px - 1.5rem + var(--luecke));background:var(--blau-dunkel);opacity:.45;transform-origin:left center}
  .gruppen{grid-template-columns:.8fr 1.2fr;align-items:center}
  .gruppen__bild{aspect-ratio:auto;height:100%;min-height:17rem}
  .gruppen__text{padding:2rem 2.5rem}
  .fuss__raster{grid-template-columns:auto 1fr auto;gap:3rem}
}
@media (min-width:960px){
  .abschnitt{padding:6.5rem 0}
  .abschnitt--anschluss{padding-top:0}
  .abschnitt--offen{padding-bottom:0}
  .zahlen{padding:6rem 0}
  .marke img{height:76px}
  .zwei{grid-template-columns:1.1fr .9fr;gap:4rem}
  .ueber{grid-template-columns:.85fr 1.15fr;gap:4.5rem}
  .rahmen{grid-template-columns:1.2fr .8fr;align-items:stretch}
  .rahmen__bild{order:2;aspect-ratio:auto;min-height:100%}
  .rahmen__text{padding:2.5rem 3rem;align-self:center}
  .beitraege{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1040px){
  .nav{display:flex}
  .hero{display:grid;padding-bottom:0;grid-template-columns:[voll-start] minmax(1.25rem,1fr) [text-start] minmax(0,33rem) [text-ende] minmax(0,calc(var(--breite) - 33rem)) [inhalt-ende] minmax(1.25rem,1fr) [voll-ende]}
  .hero__text{grid-column:text-start/text-ende;grid-row:1;width:auto;margin:0;padding:4.25rem 2rem 5.75rem 0}
  .hero .hero__fakten{grid-column:text-start/inhalt-ende;grid-row:2;grid-template-columns:repeat(4,1fr);gap:1.5rem;width:auto;margin:-2.75rem 0 4.75rem;padding:1.35rem 1.6rem;background:#fff;border-radius:var(--radius);box-shadow:0 14px 40px rgb(18 56 77/.1);font-size:1rem;line-height:1.4}
  .hero__bilder{order:0;grid-column:text-ende/voll-ende;grid-row:1;aspect-ratio:auto;max-height:none;min-height:min(40rem,100svh)}
  .hero__buehne::after{background:linear-gradient(90deg,var(--blau-hell) 0,rgb(231 243 250/.86) calc(var(--blende)*.35),rgb(205 229 243/.5) calc(var(--blende)*.7),rgb(231 243 250/0) var(--blende))}
  /* Die unscharfe Person im Vordergrund läuft im linken Drittel der Bühne in das Hellblau aus. */
  .hero__buehne{--blende:clamp(8rem,32%,21rem)}
  .hero__portraet{--bildfokus:30% 20%}
  .hero__szene{left:1.5rem;bottom:5.25rem;width:min(17rem,42%);border-width:8px;border-radius:12px}
}