/* bewusst.stark. – Website. Richtung: Wellen-Horizont (A1). Tokens aus dem Design-System „bewusst.stark.“ */

@font-face{font-family:"Gagalin";src:url("../fonts/gagalin.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hangyaboly";src:url("../fonts/hangyaboly.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Carlito";src:url("../fonts/carlito-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Carlito";src:url("../fonts/carlito-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Carlito";src:url("../fonts/carlito-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --petrol:#1790ab; --petrol-tief:#11667b; --petrol-dunkel:#0d5163; --petrol-hell:#e3f2f6;
  --orange:#feb036; --orange-hell:#ffc566; --gruen:#a6d06b; --grau:#777777; --weiss:#ffffff; --text:#2e3437;
  --akzent:var(--petrol);           /* pro Seite überschrieben */
  --display:"Gagalin","Lilita One","Arial Black",sans-serif;
  --hand:Hangyaboly,"Patrick Hand",cursive;
  --schrift:Carlito,Calibri,"Segoe UI",system-ui,sans-serif;
  --gr-h1:clamp(2.9rem,min(1.7rem + 4.6vw,1rem + 7.2vh),5.5rem);
  --gr-h2:clamp(2.1rem,1.5rem + 2.2vw,3.25rem);
  --gr-h3:clamp(1.6rem,1.3rem + 1vw,2.1rem);
  --gr-text:clamp(1.125rem,1.06rem + .25vw,1.25rem);
  --gr-lead:clamp(1.2rem,1.1rem + .4vw,1.375rem);
  --gr-klein:1rem;
  --rand:clamp(1.5rem,5vw,5rem);
  --breite:1280px;
  --abschnitt:clamp(4rem,3rem + 4vw,7rem);
  --wellenhoehe:clamp(110px,min(16.7vw,24vh),220px);
  --radius:24px;
  --ease:cubic-bezier(.16,1,.3,1);
}
body[data-akzent="gruen"]{--akzent:var(--gruen)}
body[data-akzent="orange"]{--akzent:var(--orange)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--schrift);font-size:var(--gr-text);line-height:1.5;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--petrol-tief);text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{color:var(--petrol-dunkel)}
::selection{background:var(--orange);color:var(--text)}
:focus-visible{outline:3px solid var(--petrol-tief);outline-offset:3px;border-radius:6px}
.auf-dunkel :focus-visible{outline-color:var(--orange)}
h1,h2,h3{overflow-wrap:break-word;font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:1.04;color:var(--petrol-tief);margin:0;text-wrap:balance}
h1{font-size:var(--gr-h1)}
h2{font-size:var(--gr-h2)}
h3{font-size:var(--gr-h3)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.zeile-hell{color:var(--petrol);display:block}
.zeile{display:block}
.lead{font-size:var(--gr-lead);line-height:1.45;max-width:36em}
.klein{font-size:var(--gr-klein)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.springen{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--petrol-tief);color:#fff;padding:.75rem 1.25rem;border-radius:999px;font-weight:700}
.springen:focus{top:1rem;color:#fff}

.innen{width:100%;max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:var(--abschnitt) 0;position:relative}
.abschnitt--hell{background:var(--petrol-hell)}
.abschnitt--tief{background:var(--petrol-tief);color:#fff}
.abschnitt--tief h2,.abschnitt--tief h3{color:#fff}
.abschnitt--tief a:not(.knopf){color:#fff}
.abschnitt--eng{padding-top:calc(var(--abschnitt) * .7);padding-bottom:calc(var(--abschnitt) * .7)}
.kopf{max-width:46rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.kopf p{margin-top:1rem}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.8rem 1.9rem;border-radius:999px;font-weight:700;font-size:1.1875rem;line-height:1.2;text-decoration:none;border:0;cursor:pointer;font-family:var(--schrift);transition:background-color .2s,transform .2s var(--ease)}
.knopf:active{transform:translateY(1px)}
.knopf--orange{background:var(--orange);color:var(--text)}
.knopf--orange:hover{background:var(--orange-hell);color:var(--text)}
.knopf--tief{background:var(--petrol-tief);color:#fff}
.knopf--tief:hover{background:var(--petrol-dunkel);color:#fff}
.knopf--weiss{background:#fff;color:var(--petrol-tief)}
.knopf--weiss:hover{background:var(--petrol-hell);color:var(--petrol-tief)}
.knopf--klein{min-height:2.875rem;padding:.65rem 1.4rem;font-size:1.0625rem}
.pfeil-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;color:var(--petrol-tief);padding:.6rem 0;min-height:2.75rem}
.pfeil-link svg{width:1.25rem;height:1.25rem;transition:transform .25s var(--ease)}
.pfeil-link:hover svg{transform:translateX(4px)}
.abschnitt--tief .pfeil-link{color:#fff}

/* Kopfzeile */
.himmel{background:var(--petrol-hell);position:relative;overflow:hidden}
.kopfzeile{position:relative;z-index:20;background:var(--petrol-hell)}
.kopfzeile .innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.5rem;padding-bottom:1rem}
.logo img{width:clamp(150px,12vw,188px)}
.menue{display:flex;align-items:center;gap:clamp(1rem,2vw,2.25rem)}
.menue a:not(.knopf){color:var(--text);font-weight:700;text-decoration:none;padding:.6rem .15rem;font-size:1.1875rem;position:relative}
.menue a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:3px;border-radius:3px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menue a:not(.knopf):hover::after,.menue a[aria-current="page"]::after{transform:scaleX(1)}
.menue .knopf{min-height:2.875rem;padding:.6rem 1.5rem;font-size:1.0625rem}
.menue-knopf{display:none;width:48px;height:48px;border:0;background:transparent;border-radius:999px;cursor:pointer;align-items:center;justify-content:center;color:var(--text)}
.menue-knopf svg{width:28px;height:28px}
.menue-knopf .zu{display:none}
.menue-offen .menue-knopf .auf{display:none}
.menue-offen .menue-knopf .zu{display:block}
@media (max-width:960px){
  .menue-knopf{display:inline-flex}
  .menue{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--petrol-hell);padding:.5rem var(--rand) 1.75rem;border-bottom:4px solid var(--akzent)}
  .menue-offen .menue{display:flex}
  .menue a:not(.knopf){padding:1rem 0;border-bottom:1px solid rgba(17,102,123,.15);font-size:1.25rem}
  .menue a:not(.knopf)::after{display:none}
  .menue a[aria-current="page"]{color:var(--petrol-tief)}
  .menue .knopf{margin-top:1.25rem;min-height:3.25rem}
}

/* Erster Bildschirm mit Wellen-Horizont */
.hero{position:relative;padding-bottom:var(--wellenhoehe)}
.hero .innen{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:2rem;position:relative}
.hero-text{position:relative;z-index:5;padding:clamp(1.25rem,4.5vh,3.5rem) 0 clamp(2rem,4.5vh,3.5rem)}
.hero-text .lead{margin-top:clamp(1.25rem,1rem + 1vw,2rem)}
.hero-text .knopf{margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}
.hero-figur{position:relative;z-index:3;align-self:end;margin-bottom:calc(var(--wellenhoehe) * -.62);justify-self:center;width:100%;max-width:min(580px,66vh)}
.hero-figur img{width:100%}
.hero--ohne-figur .innen{grid-template-columns:minmax(0,1fr)}
.hero--ohne-figur .hero-text{max-width:52rem}
.wellen{position:absolute;left:0;right:0;bottom:0;height:var(--wellenhoehe);pointer-events:none}
.wellen svg{position:absolute;left:-2%;width:104%;max-width:none;bottom:0;height:100%;will-change:transform}
.wellen .w-grau{z-index:1;fill:var(--grau)}
.wellen .w-gruen{z-index:2;fill:var(--gruen)}
.wellen .w-orange{z-index:4;fill:var(--orange)}
.wellen .w-ende{z-index:6;fill:var(--nach,#fff);left:0;width:100%}
body[data-akzent="gruen"] .wellen .w-orange{fill:var(--gruen)}
body.seite-schule .wellen .w-orange{fill:var(--petrol)}
body.seite-schule .wellen .w-gruen{fill:var(--orange)}
body[data-akzent="gruen"] .wellen .w-gruen{fill:var(--orange)}
.punkte{position:absolute;right:var(--rand);top:clamp(6.5rem,8vw,9rem);width:clamp(96px,9vw,150px);z-index:1;opacity:.9}
.sonne{position:absolute;z-index:0;right:clamp(2rem,9vw,12rem);bottom:calc(var(--wellenhoehe) * .15);width:clamp(180px,24vw,360px);aspect-ratio:1;border-radius:50%;background:var(--orange)}
.hero--ohne-figur:has(.sonne){padding-top:0}
@media (max-width:900px){.sonne{width:150px;right:1.5rem;bottom:calc(var(--wellenhoehe) * .2)}.hero:has(.sonne) .hero-text{padding-bottom:150px}}
@media (max-width:900px){
  .hero .innen{grid-template-columns:minmax(0,1fr);gap:0}
  .hero-text{padding-top:1.5rem;padding-bottom:1.5rem}
  .hero-figur{max-width:min(360px,86vw);margin-bottom:calc(var(--wellenhoehe) * -.7)}
  .hero-text .knopf{width:100%}
  .punkte{display:none}
}

/* Bewegung im ersten Bildschirm */
.hero-figur{will-change:transform}
.js .hero-figur img{animation:aufstieg 1.6s cubic-bezier(.33,1,.68,1) .6s backwards;transform-origin:50% 100%}
@keyframes aufstieg{0%{transform:translateY(118%)}60%{transform:translateY(-5%)}80%{transform:translateY(1.5%)}100%{transform:none}}
.js .wellen .w-grau{animation:wellen-ein 1.1s var(--ease) .05s backwards}
.js .wellen .w-gruen{animation:wellen-ein 1.1s var(--ease) .18s backwards}
.js .wellen .w-orange{animation:wellen-ein 1.1s var(--ease) .31s backwards}
@keyframes wellen-ein{from{transform:translateY(55%)}to{transform:none}}
.js .punkte circle{animation:punkt-ein .5s var(--ease) backwards}
.js .punkte circle:nth-child(n+7){animation-delay:.1s}
@keyframes punkt-ein{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.punkte circle{transform-box:fill-box;transform-origin:center}

/* Wellenkante zwischen Abschnitten */
.kante{display:block;width:100%;height:clamp(36px,4.5vw,70px);margin-bottom:-2px;fill:var(--von,#fff)}
.abschnitt--tief.mit-kante,.abschnitt--hell.mit-kante{padding-top:0}
.mit-kante>.innen{padding-top:calc(var(--abschnitt) * .75)}

/* Kleine Welle über Überschriften */
.mini-welle{width:120px;height:14px;fill:none;stroke:var(--akzent);stroke-width:5;stroke-linecap:round;margin-bottom:1rem;overflow:visible}
.mini-welle--gruen{stroke:var(--gruen)}
.mini-welle--orange{stroke:var(--orange)}
.mini-welle--petrol{stroke:var(--petrol)}
.mini-welle path{stroke-dasharray:140;stroke-dashoffset:0}
.js .mini-welle path{stroke-dashoffset:140;transition:stroke-dashoffset 1.3s var(--ease) .1s}
.js .weg:nth-child(2) .mini-welle path{transition-delay:.3s}
.js .weg:nth-child(3) .mini-welle path{transition-delay:.5s}
.js .ist-sichtbar .mini-welle path,.js .mini-welle.ist-sichtbar path{stroke-dashoffset:0}

/* Drei Wege */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,1rem + 3vw,3.5rem)}
.weg h3{font-size:clamp(2.3rem,1.6rem + 1.9vw,3.5rem)}
.weg p{margin:.75rem 0 .25rem;max-width:26rem}
@media (max-width:900px){.wege{grid-template-columns:minmax(0,1fr);gap:2.5rem}}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.zahl b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.75rem,2rem + 2.6vw,4.25rem);line-height:1;color:var(--orange);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.zahl b .vor{display:block}
.zahl > span{display:block;margin-top:.5rem;font-weight:700;font-size:clamp(1.2rem,1.1rem + .3vw,1.375rem)}
@media (max-width:700px){.zahlen{grid-template-columns:minmax(0,1fr);gap:1.75rem}}

/* Referenzband */
.band{margin-top:clamp(2.5rem,2rem + 2vw,4rem);border-top:1px solid rgba(255,255,255,.25);padding-top:1.75rem}
.band h3{font-size:clamp(1.5rem,1.3rem + .8vw,2rem);color:#fff;margin-bottom:1rem}
.band ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 0}
.band li{font-weight:700;font-size:clamp(1.15rem,1.05rem + .4vw,1.375rem)}
.band ul{gap:.75rem 2rem}
.band li::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);margin-right:.7rem;vertical-align:middle}
@media (max-width:700px){.band ul{flex-direction:column}}

/* Stimmen */
.stimmen{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.stimme{margin:0;background:#fff;border-radius:var(--radius);padding:clamp(1.5rem,1.2rem + 1.5vw,2.5rem)}
.stimme p{font-size:var(--gr-text)}
.stimme--gross{grid-row:span 2;background:var(--petrol-tief);color:#fff}
.stimme--gross p{font-size:clamp(1.4rem,1.2rem + .8vw,1.875rem);line-height:1.35;font-weight:700}
.stimme footer{margin-top:1rem;font-weight:700;color:var(--petrol-tief);font-size:1.0625rem}
.stimme--gross footer{color:var(--orange);font-size:1.2rem}
.stimme-zeichen{font-family:var(--display);font-size:5.5rem;line-height:1;color:var(--akzent);display:block;height:2.75rem;margin-bottom:.75rem}
.stimme--gross .stimme-zeichen{color:var(--orange)}
@media (max-width:900px){.stimmen{grid-template-columns:minmax(0,1fr)}.stimme--gross{grid-row:auto}}

/* Teaser Löwe, Schaf, Mücke */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.teaser img{width:100%;max-width:640px}
@media (max-width:900px){.teaser{grid-template-columns:minmax(0,1fr)}.teaser figure{order:-1}}
figure{margin:0}

/* Über mich Teaser und Porträt */
.person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.portraet{width:clamp(200px,22vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--petrol-hell);position:relative;box-shadow:0 0 0 10px var(--weiss),0 0 0 14px var(--orange)}
.portraet img{width:100%;height:100%;object-fit:cover;display:block}
.portraet span{display:block}
.portraet small{display:block;font-weight:400;font-size:.95rem;margin-top:.25rem}
@media (max-width:760px){.person{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* Abschluss */
.abschluss .innen{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2.5rem;align-items:center}
.abschluss h2{font-size:clamp(2.5rem,1.6rem + 3.4vw,5rem)}
.abschluss p{margin-top:1.25rem;max-width:34rem}
.kontaktliste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;font-weight:700;font-size:1.1875rem}
.kontaktliste a{text-decoration:none;display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem}
.kontaktliste a:hover{text-decoration:underline}
.kontaktliste svg{width:1.4rem;height:1.4rem;flex:none;stroke:var(--orange)}
@media (max-width:900px){.abschluss .innen{grid-template-columns:minmax(0,1fr)}.abschluss .knopf{width:100%}}

/* Fußzeile */
.fusszeile{background:var(--petrol-dunkel);color:#fff;padding:3.5rem 0 2.5rem;font-size:1.0625rem}
.fusszeile .innen{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2.5rem}
.fusszeile img{width:170px;margin-bottom:1rem}
.fusszeile a{color:#fff;text-decoration:none}
.fusszeile a:hover{text-decoration:underline}
.fusszeile ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.fusszeile li a{display:inline-block;padding:.35rem 0}
.fusszeile h2{font-family:var(--schrift);font-weight:700;font-size:1.0625rem;letter-spacing:0;color:#fff;margin-bottom:.6rem}
.fuss-unten a{display:inline-block;padding:.45rem 0}
.fuss-unten{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
@media (max-width:760px){.fusszeile .innen{grid-template-columns:minmax(0,1fr)}}

/* Liste mit Wellen-Punkten (Mehrwert, Checklisten) */
.vorteile{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem clamp(2rem,1rem + 3vw,4rem)}
.vorteile li{position:relative;padding-left:3.25rem}
.vorteile li::before{content:"";position:absolute;left:0;top:.2rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--akzent)}
.vorteile li::after{content:"";position:absolute;left:.72rem;top:.62rem;width:.45rem;height:.9rem;border:solid var(--text);border-width:0 3px 3px 0;transform:rotate(45deg)}
.vorteile strong{display:block;font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem);color:var(--petrol-tief);line-height:1.25;margin-bottom:.35rem}
.vorteile--eins{grid-template-columns:minmax(0,1fr)}
.vorteil-gross{grid-column:1/-1;background:var(--petrol-hell);border-radius:var(--radius);padding:1.75rem 1.75rem 1.75rem 5rem !important}
.vorteil-gross::before{left:1.75rem !important;top:1.95rem !important}
.vorteil-gross::after{left:2.47rem !important;top:2.37rem !important}
@media (max-width:760px){.vorteile{grid-template-columns:minmax(0,1fr)}}

/* Kurse (Schule): ungleich große Felder */
.kurse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.kurs{border-radius:var(--radius);padding:clamp(1.5rem,1.2rem + 1vw,2.25rem);background:var(--petrol-hell)}
.kurs h3{font-size:clamp(1.6rem,1.35rem + .8vw,2.1rem);margin-bottom:.6rem}
.kurs .leitsatz{font-weight:700;color:var(--petrol-tief);margin-top:1rem}
.kurs--haupt{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem;align-items:center;background:var(--petrol-tief);color:#fff}
.kurs--haupt h3{color:#fff;font-size:clamp(2.2rem,1.6rem + 2vw,3.5rem)}
.kurs--haupt .leitsatz{color:var(--orange);font-size:1.25rem}
.kurs--haupt img{max-width:280px;justify-self:center}
.kurs--haupt .pfeil-link{color:#fff}
@media (max-width:900px){.kurse{grid-template-columns:minmax(0,1fr)}.kurs--haupt{grid-column:auto;grid-template-columns:minmax(0,1fr)}.kurs--haupt img{max-width:200px;justify-self:start}}

/* Ablauf als Weg auf einer Welle */
.weg-ablauf{position:relative;margin-top:1rem}
.weg-ablauf ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--schritte,6),minmax(0,1fr));gap:1.25rem;position:relative;z-index:1}
.weg-ablauf li{padding-top:5.5rem;position:relative}
.weg-ablauf li:nth-child(even){padding-top:7rem}
.weg-ablauf .nr{position:absolute;top:1.6rem;left:0;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--weiss);border:4px solid var(--petrol-tief);display:grid;place-items:center;font-family:var(--display);font-size:1.5rem;color:var(--petrol-tief);transition:background-color .4s,color .4s}
.weg-ablauf li:nth-child(even) .nr{top:3.1rem}
.weg-ablauf li.erreicht .nr{background:var(--petrol-tief);color:#fff}
.weg-ablauf li.wichtig .nr{border-color:var(--orange)}
.weg-ablauf li.wichtig.erreicht .nr{background:var(--orange);color:var(--text)}
.weg-ablauf h3{font-family:var(--schrift);font-weight:700;letter-spacing:0;font-size:1.25rem;line-height:1.25;margin-bottom:.4rem}
.weg-ablauf p{font-size:1.125rem}
.weg-linie{position:absolute;left:0;right:0;top:0;height:7rem;width:100%;z-index:0;fill:none;stroke-linecap:round}
.weg-linie .grund{stroke:var(--petrol-hell);stroke-width:8}
.weg-linie .fuell{stroke:var(--akzent);stroke-width:8}
body[data-akzent="petrol"] .weg-linie .fuell, body:not([data-akzent]) .weg-linie .fuell{stroke:var(--petrol)}
@media (max-width:900px){
  .weg-ablauf ol{grid-template-columns:minmax(0,1fr);gap:0;padding-left:4.5rem}
  .weg-ablauf li,.weg-ablauf li:nth-child(even){padding:0 0 2rem}
  .weg-ablauf .nr,.weg-ablauf li:nth-child(even) .nr{top:-.25rem;left:-4.5rem}
  .weg-linie{display:none}
  .weg-ablauf ol::before{content:"";position:absolute;left:1.45rem;top:1rem;bottom:2rem;width:6px;border-radius:6px;background:var(--petrol-hell)}
}

/* Kompakter Ablauf (Kindergarten) */
.schritte-kurz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.schritte-kurz li{position:relative;padding:4.25rem 1.25rem 0 0}
.schritte-kurz li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--gruen);display:grid;place-items:center;font-family:var(--display);font-size:1.5rem;color:var(--text);z-index:1}
.schritte-kurz li:not(:last-child)::after{content:"";position:absolute;top:1.45rem;left:3.25rem;right:0;height:6px;border-radius:6px;background:var(--gruen);opacity:.5}
.schritte-kurz strong{display:block;font-size:1.25rem;color:var(--petrol-tief);line-height:1.25;margin-bottom:.3rem}
.schritte-kurz li:last-child::before{background:var(--orange)}
@media (max-width:760px){.schritte-kurz{grid-template-columns:minmax(0,1fr)}.schritte-kurz li{padding:0 0 1.75rem 4.5rem}.schritte-kurz li:not(:last-child)::after{left:1.45rem;top:3.25rem;bottom:0;right:auto;width:6px;height:auto}}

/* Zwei Spalten */
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1rem + 3vw,4rem)}
.zwei--text-bild{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
@media (max-width:900px){.zwei,.zwei--text-bild{grid-template-columns:minmax(0,1fr)}}
.kasten{background:#fff;border-radius:var(--radius);padding:clamp(1.5rem,1.2rem + 1.2vw,2.5rem)}
.kasten h3{font-size:clamp(1.5rem,1.3rem + .7vw,2rem);margin-bottom:.6rem}
.kasten--tief{background:var(--petrol-tief);color:#fff}
.kasten--tief h3{color:#fff}

/* Hintergrund-Zahl */
.hintergrund{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.hintergrund .gross{font-family:var(--display);font-size:clamp(5rem,3rem + 8vw,10rem);line-height:.85;color:var(--orange);letter-spacing:.01em}
.quelle{font-size:.95rem;opacity:.9;margin-top:1rem}
@media (max-width:700px){.hintergrund{grid-template-columns:minmax(0,1fr)}}

/* Fragen */
.fragen{max-width:52rem}
.fragen details{border-bottom:2px solid var(--petrol-hell)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.25rem 0;font-weight:700;font-size:clamp(1.2rem,1.1rem + .35vw,1.375rem);color:var(--petrol-tief);min-height:3rem}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e3437' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/1.1rem no-repeat;transition:transform .3s var(--ease)}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 1.5rem;margin:0;max-width:44rem}

/* Hilfe (Familien) */
.hilfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.hilfe .kasten{background:var(--petrol-hell)}
.hilfe .kasten--gross{grid-column:1/-1;background:var(--orange);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center}
.hilfe .kasten--gross h3{color:var(--text)}
@media (max-width:760px){.hilfe{grid-template-columns:minmax(0,1fr)}.hilfe .kasten--gross{grid-template-columns:minmax(0,1fr)}}

.aussage{font-family:var(--display);font-size:clamp(2.4rem,1.5rem + 3.6vw,4.75rem);line-height:1.04;color:var(--petrol-tief);letter-spacing:.02em;max-width:18ch}
.aussage .zeile-akzent{color:var(--petrol)}

.liste-ruhig{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.liste-ruhig li{position:relative;padding-left:2.5rem}
.liste-ruhig li::before{content:"";position:absolute;left:0;top:.35em;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--orange)}
.liste-ruhig--nein li::before{background:var(--petrol-hell);box-shadow:inset 0 0 0 3px var(--petrol-tief)}

/* Löwenstark: Tiermodell */
.tiere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:end}
.tier img{width:100%;max-width:320px;margin:0 auto 1.25rem}
.tier h3{font-size:clamp(2rem,1.5rem + 1.5vw,3rem);margin-bottom:.5rem}

.tier--loewe img{max-width:380px}
.js .tier{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.js .tiere:not(.ist-sichtbar) .tier{transform:translateY(24px)}
.js .tiere .tier:nth-child(2){transition-delay:.12s}
.js .tiere .tier:nth-child(3){transition-delay:.24s}
@media (max-width:900px){.tiere{grid-template-columns:minmax(0,1fr)}.tier--loewe{order:-1}.tier img{max-width:240px;margin-left:0}}

.saetze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.satz{background:#fff;border-radius:var(--radius);padding:1.75rem;font-weight:700;font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);line-height:1.3;color:var(--petrol-tief)}
.satz--haupt{background:var(--orange);color:var(--text)}
.satz small{display:block;font-weight:400;font-size:1rem;color:var(--text);margin-top:.75rem}
@media (max-width:900px){.saetze{grid-template-columns:minmax(0,1fr)}}

.wende{perspective:1200px;max-width:440px;width:100%}
.wende button{all:unset;display:block;width:100%;cursor:pointer;border-radius:var(--radius)}
.wende button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.wende-innen{display:grid;transition:transform .8s var(--ease);transform-style:preserve-3d}
.wende-seite{grid-area:1/1;backface-visibility:hidden;border-radius:var(--radius);padding:2.25rem;min-height:15rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.wende-seite--vorn{background:var(--orange);color:var(--text)}
.wende-seite--hinten{background:#fff;color:var(--text);transform:rotateY(180deg)}
.wende-seite b{font-family:var(--display);font-weight:400;font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem);line-height:1.05;letter-spacing:.02em;color:var(--petrol-tief)}
.wende-seite--vorn b{color:var(--text)}
.wende-hinweis{font-weight:700;display:inline-flex;align-items:center;gap:.5rem}
.wende-hinweis svg{width:1.25rem;height:1.25rem}
.wende[data-gedreht="true"] .wende-innen{transform:rotateY(180deg)}

/* Seitenkopf für Unterseiten ohne große Figur */
.seitenkopf .hero-text{padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}

/* Formular */
.formular{display:grid;gap:1.25rem;max-width:44rem}
.field{display:grid;gap:.4rem}
.field label,.field legend{font-weight:700;color:var(--petrol-tief)}
.field .hinweis{font-size:1rem;margin:0}
.field input:not([type=checkbox]),.field select,.field textarea{font:inherit;font-size:1.125rem;color:var(--text);background:#fff;border:2px solid #9bbcc5;border-radius:14px;padding:.8rem 1rem;min-height:3.25rem;width:100%}
.field textarea{min-height:9rem;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--petrol)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--petrol-tief);outline-offset:1px;border-color:var(--petrol-tief)}
.field-error{display:none;color:#a3261b;font-weight:700;font-size:1rem;margin:0}
.field.has-error .field-error{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#a3261b}
.check{display:flex;gap:.75rem;align-items:flex-start;font-weight:400 !important;color:var(--text) !important}
.check input{width:1.5rem;height:1.5rem;flex:none;margin-top:.15rem;accent-color:var(--petrol-tief)}
.zwei-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:640px){.zwei-felder{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px}
.form-status.is-error{color:#a3261b;font-weight:700}
#form-wrap.is-sent form{display:none}
#form-success{background:var(--petrol-hell);border-radius:var(--radius);padding:2rem}
#form-success h3{margin-bottom:.5rem}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.kontakt-raster .kasten{background:var(--petrol-hell)}
.kontakt-raster .kontaktliste svg{stroke:var(--petrol-tief)}
@media (max-width:900px){.kontakt-raster{grid-template-columns:minmax(0,1fr)}}

/* Rechtliches */
.recht{max-width:48rem}
.recht h2{font-size:var(--gr-h3);margin:2.5rem 0 1rem;hyphens:auto;-webkit-hyphens:auto}

/* Weniger Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .mini-welle path{stroke-dashoffset:0}
  .js .tiere .tier{transform:none !important}
  .wellen svg{transform:none !important}
}

/* Gagalin hat nur Großbuchstaben */
h1,h2,h3,.zahl b,.aussage,.hintergrund .gross,.wende-seite b,.stimme-zeichen{text-transform:uppercase}
.weg-ablauf h3,.fusszeile h2,.form-titel{text-transform:none}

/* Unterseiten */
.h1-unterseite{font-size:clamp(2.3rem,min(1rem + 4.4vw,1rem + 5.6vh),4.4rem)}
.hero--unterseite .innen{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.hero--unterseite .hero-figur{max-width:460px}
@media (max-width:900px){.hero--unterseite .innen{grid-template-columns:minmax(0,1fr)}.hero--unterseite .hero-figur{max-width:min(300px,76vw)}}
.nach-liste{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.hinweis-zeile{margin-top:2rem;font-weight:700;color:var(--petrol-tief)}
.satz-gross{font-weight:700;font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);line-height:1.3}
.stimmen--auf-tief .stimme--gross{background:var(--petrol-dunkel)}
.stimmen--auf-tief .stimme:not(.stimme--gross){color:var(--text)}
.hero-figur--portraet{max-width:400px !important;margin-bottom:calc(var(--wellenhoehe) * -.45)}
.hero-figur--foto{display:grid;place-items:center;align-self:center;margin-bottom:calc(var(--wellenhoehe) * -.25);padding:2rem 0 1rem}
.portraet--gross{width:clamp(240px,32vw,460px);font-size:1.25rem}
.hero--gruppe .innen{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(2rem,4vw,4rem);row-gap:0}
.hero--gruppe .hero-text--titel{padding-bottom:0}
.hero--gruppe .hero-text--neben{align-self:end;padding-bottom:.4rem}
.hero--gruppe .hero-text--neben .lead{margin-top:0}
.hero--gruppe .hero-figur--gruppe{grid-column:1/-1;justify-self:center;max-width:min(900px,105vh);margin-top:clamp(1rem,3vh,2rem);margin-bottom:calc(var(--wellenhoehe) * -.4)}
@media (max-width:900px){
  .hero--gruppe .innen{grid-template-columns:minmax(0,1fr)}
  .hero--gruppe .hero-text--titel{padding-bottom:0}
  .hero--gruppe .hero-text--neben{padding-top:1.25rem}
  .hero--gruppe .hero-figur--gruppe{max-width:96vw;margin-bottom:calc(var(--wellenhoehe) * -.45)}
}
.recht h3{font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem);margin:1.75rem 0 .6rem;text-transform:none;font-family:var(--schrift);font-weight:700;letter-spacing:0}
.recht .frage{font-weight:700;margin-bottom:.4rem}
.recht ul{padding-left:1.25rem;margin:0 0 1em}
.recht p,.recht li{overflow-wrap:anywhere}

/* Handschrift (Hangyaboly) */
.hand{font-family:var(--hand);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.2;color:var(--petrol-tief)}
.hand--gross{font-size:clamp(2.3rem,1.8rem + 1.8vw,3.4rem)}
.unterschrift{font-family:var(--hand);font-size:clamp(2.2rem,1.8rem + 1.4vw,3rem);line-height:1;color:#fff;margin-top:2rem}
.satz.hand{font-size:clamp(1.8rem,1.5rem + 1vw,2.3rem);line-height:1.15}
.recht h4{font-size:1.125rem;margin:1.25rem 0 .4rem;color:var(--petrol-tief)}

/* Prüfung 2026-11-11 */
@media (max-width:700px){
  main .knopf{width:100%}
  .hintergrund{gap:.5rem}
}
.stimmen--hell .stimme--gross{background:var(--petrol-hell);color:var(--text)}
.stimmen--hell .stimme--gross footer{color:var(--petrol-tief)}
.stimmen--hell .stimme--gross .stimme-zeichen{color:var(--petrol)}
.stimmen--hell .stimme:not(.stimme--gross){background:#fff;box-shadow:inset 0 0 0 2px var(--petrol-hell)}
.seite-impressum h1,.seite-impressum h2,.seite-datenschutz h1,.seite-datenschutz h2{hyphens:auto;-webkit-hyphens:auto}
.hintergrund .gross{margin:0}