@font-face{font-family:Inter;src:url("../schriften/space-grotesk-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Mono;src:url("../schriften/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{--papier:#f1eee6;--hell:#faf8f2;--tinte:#171916;--gedaempft:#65685f;--linie:#c9c6bc;--signal:#f36b2b;--dunkel:#20251f;--gruen:#2c4a3c;--breite:1180px;--rand:clamp(1.25rem,4vw,3.5rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--papier);color:var(--tinte);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.55}a{color:inherit}img{display:block;max-width:100%}.sprungmarke{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--signal);padding:.75rem 1rem}.sprungmarke:focus{top:1rem}.kennung{margin:0 0 1rem;color:var(--signal);font:700 .75rem/1.2 Mono,monospace;letter-spacing:.09em;text-transform:uppercase}.kopf{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--rand);border-bottom:1px solid var(--linie);background:rgba(241,238,230,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}.marke{text-decoration:none;display:flex;flex-direction:column;line-height:1.1}.marke__name{font-weight:800;text-transform:uppercase;letter-spacing:.03em}.marke__rolle{margin-top:.3rem;color:var(--gedaempft);font:500 .67rem Mono,monospace;text-transform:uppercase}.navigation{display:flex;align-items:center;gap:1.6rem}.navigation a{text-decoration:none;font-size:.84rem;font-weight:650}.navigation__kontakt{border:1px solid var(--tinte);padding:.6rem .9rem}.menueknopf{display:none;border:1px solid var(--tinte);background:none;padding:.55rem .75rem;font:600 .75rem Mono,monospace}.aufmacher{min-height:calc(100vh - 76px);max-width:var(--breite);margin:auto;padding:clamp(4rem,9vw,8rem) var(--rand);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(3rem,7vw,7rem);align-items:center}.aufmacher h1,.abschnittskopf h2,.beispiel h2,.zusammenarbeit h2,.gelander h2,.person h2,.kontakt h2{margin:0;font-size:clamp(2.7rem,6.4vw,6rem);line-height:.95;letter-spacing:-.055em}.aufmacher__einleitung{max-width:680px;margin:2rem 0 0;font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.55}.aktionen{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.25rem}.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1rem;text-decoration:none;font-weight:750;font-size:.88rem}.knopf--primaer{background:var(--signal);color:var(--tinte)}.knopf--sekundaer{border:1px solid var(--tinte)}.schichtkarte{align-self:end;background:var(--dunkel);color:var(--hell);padding:1.5rem;transform:rotate(1.5deg);box-shadow:14px 14px 0 rgba(23,25,22,.1)}.schichtkarte__kopf{padding-bottom:1rem;border-bottom:1px solid #555b52;color:#aeb4a9;font:500 .68rem Mono,monospace;text-transform:uppercase}.schichtkarte__frage{font-size:1.7rem;font-weight:800;line-height:1.1;margin:2rem 0 .8rem}.schichtkarte>p:not(.schichtkarte__frage){color:#c7ccc3}.schichtkarte dl{margin:2rem 0 0}.schichtkarte dl div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid #555b52}.schichtkarte dt{font-weight:800}.schichtkarte dd{margin:0;color:#aeb4a9;font-size:.8rem}.lage,.felder,.zusammenarbeit{padding:clamp(5rem,10vw,9rem) var(--rand)}.lage{background:var(--hell)}.abschnittskopf{max-width:var(--breite);margin:0 auto 4rem}.abschnittskopf h2,.beispiel h2,.zusammenarbeit h2,.gelander h2,.person h2,.kontakt h2{font-size:clamp(2.4rem,5vw,4.6rem)}.abschnittskopf>p:last-child{max-width:720px;font-size:1.1rem}.problemraster,.feldkarten{max-width:var(--breite);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie);border-left:1px solid var(--linie)}.problemraster article,.feldkarten article{padding:clamp(1.5rem,3vw,2.5rem);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}.nummer{font:600 .7rem Mono,monospace;color:var(--signal)}.problemraster h3,.feldkarten h3{font-size:1.4rem;margin:2.6rem 0 .8rem;letter-spacing:-.025em}.wirkung{margin-top:2rem;font-weight:750}.beispiel{background:var(--dunkel);color:var(--hell);padding:clamp(5rem,9vw,8rem) max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)));display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(3rem,8vw,8rem);align-items:center;overflow:hidden}.beispiel__text>p:not(.kennung):not(.datenhinweis){font-size:1.08rem;color:#cbd0c7;max-width:650px}.ablaufkurz{list-style:none;padding:0;margin:2.5rem 0}.ablaufkurz li{display:grid;grid-template-columns:3rem 9rem 1fr;gap:.7rem;padding:1rem 0;border-top:1px solid #555b52;align-items:start}.ablaufkurz li>span{color:var(--signal);font:600 .7rem Mono,monospace}.ablaufkurz small{color:#aeb4a9}.datenhinweis{font:500 .69rem/1.5 Mono,monospace;color:#aeb4a9}.telefon{width:min(100%,360px);justify-self:center;border:8px solid #111;border-radius:28px;background:#111;overflow:hidden;box-shadow:30px 30px 0 rgba(0,0,0,.2);transform:rotate(2deg)}.telefon__leiste{display:flex;justify-content:space-between;background:#111;color:#eee;padding:.65rem 1rem;font:500 .62rem Mono,monospace}.telefon img{width:100%;aspect-ratio:13/20;object-fit:cover;object-position:top}.felder{background:var(--papier)}.abschnittskopf--schmal{display:grid;grid-template-columns:1fr 1.4fr;column-gap:4rem}.abschnittskopf--schmal .kennung{grid-column:1/-1}.feldkarten__art{font:700 .7rem Mono,monospace;color:var(--signal);text-transform:uppercase}.zusammenarbeit{background:var(--hell)}.schritte{max-width:var(--breite);margin:auto;padding:0;list-style:none;border-top:1px solid var(--linie)}.schritte li{display:grid;grid-template-columns:120px 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--linie)}.schritte li>span{color:var(--signal);font:600 .8rem Mono,monospace}.schritte h3{margin:0 0 .5rem;font-size:1.35rem}.schritte p{max-width:750px;margin:0;color:var(--gedaempft)}.gelander{background:var(--gruen);color:var(--hell);padding:clamp(5rem,9vw,8rem) max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)));display:grid;grid-template-columns:1fr 1fr;gap:5rem}.gelander ul{list-style:none;padding:0;margin:0}.gelander li{padding:1rem 0;border-top:1px solid #6b7d73;color:#d3ddd6}.gelander li:last-child{border-bottom:1px solid #6b7d73}.gelander strong{display:block;color:#fff;margin-bottom:.25rem}.person{max-width:var(--breite);margin:auto;padding:clamp(5rem,10vw,9rem) var(--rand);display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(3rem,8vw,8rem);align-items:center}.person__bild{position:relative}.person__bild:before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--signal);z-index:-1}.person__bild img{filter:grayscale(100%);aspect-ratio:4/5;object-fit:cover}.person__text>p:not(.kennung){font-size:1.1rem}.person blockquote{margin:2.5rem 0 0;padding:1.5rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:1.4rem;font-weight:750}.kontakt{background:var(--signal);padding:clamp(5rem,10vw,9rem) max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)))}.kontakt .kennung{color:var(--tinte)}.kontakt h2{max-width:900px}.kontakt>p:not(.kennung){max-width:620px;font-size:1.1rem;margin:2rem 0}.knopf--hell{background:var(--hell)}.fuss{display:flex;justify-content:space-between;gap:2rem;padding:2.5rem var(--rand);background:var(--tinte);color:var(--hell);font-size:.8rem}.fuss>div{display:flex;flex-direction:column}.fuss span{color:#9ca097}.fuss nav{display:flex;gap:1.4rem}.fuss a{color:#ccc}
@media(max-width:800px){.kopf{height:68px}.marke__rolle{display:none}.menueknopf{display:block}.navigation{display:none;position:absolute;left:0;right:0;top:68px;background:var(--hell);padding:1.25rem var(--rand);border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch}.navigation.offen{display:flex}.navigation__kontakt{text-align:center}.aufmacher{min-height:auto;grid-template-columns:1fr;padding-top:4rem}.aufmacher h1{font-size:clamp(3rem,14vw,4.7rem)}.schichtkarte{transform:none}.problemraster,.feldkarten,.beispiel,.gelander,.person{grid-template-columns:1fr}.problemraster,.feldkarten{border-top:1px solid var(--linie)}.beispiel{padding-inline:var(--rand)}.telefon{width:min(85%,340px)}.abschnittskopf--schmal{display:block}.schritte li{grid-template-columns:3rem 1fr;gap:1rem}.gelander{padding-inline:var(--rand);gap:3rem}.person{padding-inline:var(--rand)}.person__bild{max-width:360px}.fuss{flex-direction:column}.fuss nav{flex-wrap:wrap}}
@media(max-width:480px){.aufmacher,.lage,.felder,.zusammenarbeit,.person{padding-left:1.1rem;padding-right:1.1rem}.aufmacher h1{font-size:12.8vw}.aktionen{flex-direction:column}.knopf{width:100%}.ablaufkurz li{grid-template-columns:2.2rem 1fr}.ablaufkurz small{grid-column:2}.telefon{width:100%}.gelander,.kontakt{padding-left:1.1rem;padding-right:1.1rem}.person__bild:before{inset:10px -10px -10px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Der erste Inhalt soll ohne große Leerzone direkt unter der Kopfzeile beginnen. */
.aufmacher{padding-top:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:800px){.aufmacher{padding-top:2rem}}

/* Der Innenabstand des Abschnitts übernimmt beim Sprung den Platz unter der Kopfzeile. */
.person{scroll-margin-top:76px}
.person__text{scroll-margin-top:clamp(5rem,10vw,7rem)}
@media(max-width:800px){.person{scroll-margin-top:68px}}

/* Interaktive Elemente reagieren einheitlich, ohne das ruhige Schriftbild zu verlieren. */
.marke__name{color:var(--signal)}
:where(a,button){transition:transform .18s ease,box-shadow .18s ease}
:where(a,button):hover{transform:translateY(-2px)}
:where(a,button):focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(prefers-reduced-motion:reduce){:where(a,button){transition:none}:where(a,button):hover{transform:none}}

/* Rechtseiten verwenden dasselbe Gestaltungssystem, aber eine bewusst ruhige Lesespalte. */
.navigation [aria-current="page"]{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.35rem}
.recht{min-height:calc(100vh - 76px);padding:clamp(3.5rem,8vw,7rem) var(--rand);background:var(--hell)}
.recht__inhalt{max-width:780px;margin:0 auto}
.recht h1{margin:0 0 clamp(3rem,7vw,5rem);font-size:clamp(3.2rem,8vw,6.8rem);line-height:.92;letter-spacing:-.06em}
.recht h2{margin:3rem 0 .8rem;padding-top:1.25rem;border-top:1px solid var(--linie);font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.15;letter-spacing:-.025em}
.recht p,.recht li,.recht address{font-size:1.03rem;color:#343731}
.recht address{font-style:normal}
.recht ul{padding-left:1.3rem}
.recht li+li{margin-top:.45rem}
.recht a{text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.2rem}
.recht strong{color:var(--tinte)}
@media(max-width:800px){.recht{min-height:calc(100vh - 68px);padding-top:3rem}.recht h1{font-size:clamp(3rem,16vw,5rem)}}

/* Schulungen sind Teil der Einführung: praxisnah, rollenbezogen und mit Arbeitsunterlagen. */
.schulungen{padding:clamp(5rem,10vw,9rem) var(--rand);background:var(--signal)}
.schulungen .kennung{color:var(--tinte)}
.schulungen .abschnittskopf>p:last-child{max-width:780px}
.schulungsraster{max-width:var(--breite);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(23,25,22,.45);border-left:1px solid rgba(23,25,22,.45)}
.schulungsraster article{display:flex;flex-direction:column;padding:clamp(1.5rem,3vw,2.5rem);border-right:1px solid rgba(23,25,22,.45);border-bottom:1px solid rgba(23,25,22,.45)}
.schulungsraster__dauer{margin:0;font:700 .72rem Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.schulungsraster h3{min-height:2.4em;margin:2.5rem 0 .8rem;font-size:1.45rem;line-height:1.15;letter-spacing:-.03em}
.schulungsraster__fuer{min-height:3em;margin:0 0 1.5rem;font-weight:750}
.schulungsraster .wirkung{margin-top:auto;padding-top:2rem}
.schulungsergebnis{max-width:var(--breite);margin:2.5rem auto 0;display:grid;grid-template-columns:.65fr 1.35fr;gap:2rem;padding-top:2rem;border-top:2px solid var(--tinte)}
.schulungsergebnis p:last-child{max-width:720px;margin:0;font-weight:650}
@media(min-width:801px) and (max-width:1120px){.navigation{gap:.9rem}.navigation a{font-size:.78rem}}
@media(max-width:800px){.schulungen{padding-inline:var(--rand)}.schulungsraster{grid-template-columns:1fr}.schulungsraster h3,.schulungsraster__fuer{min-height:auto}.schulungsergebnis{grid-template-columns:1fr;gap:.5rem}}
@media(max-width:480px){.schulungen{padding-left:1.1rem;padding-right:1.1rem}}