/* Schriften lokal eingebunden (SIL Open Font License, siehe fonts/OFL-*.txt) */
@font-face{font-family:"Titillium Web";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/TitilliumWeb-Light.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/TitilliumWeb-Regular.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/TitilliumWeb-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/TitilliumWeb-Bold.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:300;font-style:italic;font-display:swap;src:url("../fonts/TitilliumWeb-LightItalic.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:600;font-style:italic;font-display:swap;src:url("../fonts/TitilliumWeb-SemiBoldItalic.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:700;font-style:italic;font-display:swap;src:url("../fonts/TitilliumWeb-BoldItalic.woff2") format("woff2")}
@font-face{font-family:"Caveat Brush";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/CaveatBrush-Ziffern.woff2") format("woff2")}

:root{
  --paper:#ffffff; --wash:#f2f3f5; --ink:#2b2d36; --muted:#5b5e6b; --line:#d9dbe1;
  --green:#64831a; --green-fill:#9bc255; --green-soft:#eef5df;
  --orange:#c85f06; --orange-fill:#f39a3c; --orange-soft:#fdeedb;
  --stop:#bf3d36; --stop-soft:#fbe9e7;
  --slate:#5b5e6b; --on-slate:#ffffff;
  --accent:var(--ink); --accent-fill:var(--slate); --accent-soft:var(--wash);
  --hand-g:url("../img/hand-gruen.webp");
  --hand-o:url("../img/hand-orange.webp");
  --sans:"Titillium Web","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --brush:"Caveat Brush","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#1f2128; --wash:#282b34; --ink:#eceef2; --muted:#aeb2bf; --line:#3b3f4b;
    --green:#abd063; --green-soft:#2a3320;
    --orange:#f7a64e; --orange-soft:#3a2d1e;
    --stop:#f08079; --stop-soft:#3a2523;
    --slate:#2b2e38; --on-slate:#eceef2;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1f2128; --wash:#282b34; --ink:#eceef2; --muted:#aeb2bf; --line:#3b3f4b;
  --green:#abd063; --green-soft:#2a3320;
  --orange:#f7a64e; --orange-soft:#3a2d1e;
  --stop:#f08079; --stop-soft:#3a2523;
  --slate:#2b2e38; --on-slate:#eceef2;
}
:root[data-view="lehrende"]{--accent:var(--green);--accent-fill:var(--green-fill);--accent-soft:var(--green-soft)}
:root[data-view="studierende"]{--accent:var(--orange);--accent-fill:var(--orange-fill);--accent-soft:var(--orange-soft)}
:root[data-view="grenzverletzungen"]{--accent:var(--stop);--accent-fill:var(--stop);--accent-soft:var(--stop-soft)}

*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol{margin:0}
h1:focus{outline:none}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
main{flex:1}

/* Hände */
.hands{position:relative;aspect-ratio:495/434}
.hands i{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;transition:opacity .25s ease}
.hands .hg{background-image:var(--hand-g)}
.hands .ho{background-image:var(--hand-o)}

/* Kopfzeile */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
:root[data-view="start"] .top{display:none}
.top .wrap{display:flex;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;margin-right:auto;line-height:1.1}
.brand .hands{width:2.5rem;flex:none}
.top nav{display:flex;gap:.25rem;flex-wrap:wrap}
.top nav a{text-decoration:none;font-weight:600;padding:.3rem .7rem;border-radius:999px;font-size:.98rem}
.top nav a:hover{background:var(--wash)}
.top nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}

/* Start */
.start{padding-block:clamp(2rem,6vh,4.5rem) clamp(2.5rem,7vh,5rem);text-align:center}
.lockup{font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.01em;font-size:clamp(1.5rem,7.2vw,6.4rem)}
.lockup span{display:block}
.lockup .a{color:var(--orange-fill)}
.lockup .b{color:var(--green-fill)}
:root:not([data-theme="dark"]) .lockup .a{color:#ee7d1e}
:root:not([data-theme="dark"]) .lockup .b{color:#86a52c}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lockup .a{color:var(--orange-fill)}
  :root:not([data-theme="light"]) .lockup .b{color:var(--green-fill)}
}
.start .lead{max-width:36rem;margin:1.25rem auto 0;font-size:1.2rem;color:var(--muted);font-weight:300}
.choice{display:grid;grid-template-columns:1fr minmax(0,26rem) 1fr;align-items:center;gap:clamp(1rem,3vw,2.5rem);margin-top:clamp(1.5rem,4vh,3rem)}
.choice .hands{width:100%}
.pick{display:block;text-decoration:none;padding:1rem .25rem;border-radius:.5rem}
.pick-l{text-align:right;color:var(--green)}
.pick-s{text-align:left;color:var(--orange)}
.pick .pre{display:block;font-weight:300;font-style:italic;font-size:1.15rem;color:var(--muted)}
.pick .role{display:inline-block;font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% .14em no-repeat;padding-bottom:.18em;transition:background-size .2s ease}
.pick:hover .role,.pick:focus-visible .role{background-size:100% 100%;-webkit-text-fill-color:var(--paper)}
.pick .role{padding-inline:.12em}
.pick .sub{display:block;margin-top:.5rem;color:var(--ink);font-size:1rem}
.choice:has(.pick-l:hover,.pick-l:focus-visible) .ho{opacity:.18}
.choice:has(.pick-s:hover,.pick-s:focus-visible) .hg{opacity:.18}
.also{margin-top:clamp(1.5rem,4vh,2.75rem);color:var(--muted)}
.also a{color:var(--ink);font-weight:600}
@keyframes inL{from{transform:translateX(-9%);opacity:0}}
@keyframes inR{from{transform:translateX(9%);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .choice .hg{animation:inL .8s cubic-bezier(.2,.8,.2,1) both}
  .choice .ho{animation:inR .8s cubic-bezier(.2,.8,.2,1) both}
}
@media (max-width:46rem){
  .choice{grid-template-columns:1fr 1fr;gap:.75rem}
  .choice .hands{grid-column:1/-1;width:min(100%,19rem);margin-inline:auto;order:-1}
  .pick-l,.pick-s{text-align:center;background:var(--wash);padding:1rem .5rem}
  .pick .role{font-size:1.45rem}
  .pick .sub{font-size:.92rem}
}

/* Rollenseiten */
.hero{background:var(--accent-soft)}
.hero .wrap{display:grid;grid-template-columns:1fr minmax(9rem,17rem);gap:2rem;align-items:center;padding-block:clamp(2rem,6vw,4rem)}
.hero h1{font-weight:700;font-size:clamp(2.2rem,6vw,4rem);line-height:1;color:var(--accent)}
.hero .pledge{margin-top:1rem;font-weight:300;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.4;max-width:34em}
.hero .stand{margin-top:1rem;font-size:.92rem;color:var(--muted)}
:root[data-view="lehrende"] .hero .ho,:root[data-view="studierende"] .hero .hg{opacity:.22}
@media (max-width:40rem){.hero .wrap{grid-template-columns:1fr}.hero .hands{width:9rem;order:-1}}

.group{display:grid;grid-template-columns:15rem 1fr;gap:1rem 3rem;padding-block:clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--line)}
.group>h2{font-size:1.5rem;line-height:1.2;font-weight:700;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 5rem);
  padding-left:.8rem;border-left:.35rem solid var(--accent-fill)}
.group>div,.group>ol,.group>ul{min-width:0}
@media (max-width:52rem){.group{grid-template-columns:1fr}.group>h2{position:static}}

.points{counter-reset:p var(--from,0)}
.points li{counter-increment:p;display:grid;grid-template-columns:3.4rem 1fr;gap:.25rem;max-width:46rem}
.points li+li{margin-top:1.4rem}
.points li::before{content:counter(p) ".";font-family:var(--brush);font-size:2.5rem;line-height:.95;color:var(--accent)}
.points a,.prose a,.dots a{color:var(--accent);font-weight:600}

.dots li{position:relative;padding-left:1.4rem;max-width:44rem}
.dots li+li{margin-top:.7rem}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--accent-fill)}
.prose p{max-width:44rem}
.prose p+p,.prose p+ul{margin-top:1rem}
.prose strong{font-weight:700}

.next{padding-block:clamp(2rem,5vw,3.5rem)}
.stopcard{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;background:var(--wash);padding:1.5rem clamp(1.25rem,3vw,2.25rem);text-decoration:none;border-left:.35rem solid var(--stop)}
.stopcard:hover h2{text-decoration:underline;text-underline-offset:.15em}
.stopcard h2{font-size:1.5rem;line-height:1.2}
.stopcard p{color:var(--muted);margin-top:.25rem}
.oct{width:4.5rem;aspect-ratio:1;background:#bf3d36;color:#fff;display:grid;place-items:center;font-weight:700;letter-spacing:.06em;font-size:1.05rem;
  clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
:root[data-view="grenzverletzungen"] .hero .oct{width:min(100%,11rem);font-size:2.4rem;justify-self:end}
@media (max-width:40rem){:root[data-view="grenzverletzungen"] .hero .oct{width:6rem;font-size:1.35rem;justify-self:start;order:-1}}
.gv-title{text-transform:uppercase}
.gv-title span{display:block}
.gv-title .a{color:var(--orange)}
.gv-title .b{color:var(--green);font-size:.72em;margin-top:.15em}

.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;max-width:56rem}
.contact{background:var(--wash);padding:1.1rem 1.25rem}
.contact h3{font-size:1rem;font-weight:600;font-style:italic;color:var(--muted)}
.contact .name{font-weight:700;font-size:1.15rem;margin-top:.15rem}
.contact a{display:inline-block;margin-top:.35rem;word-break:break-word;color:var(--accent);font-weight:600}
.anon{margin-top:1.25rem;max-width:44rem}
.back{margin-top:2rem}
.back a{font-weight:700;color:var(--ink)}

/* Ausbildungsziel */
.ziel{background:var(--wash);padding-block:clamp(2.5rem,6vw,4.5rem)}
:root[data-view="grenzverletzungen"] .ziel{display:none}
.ziel h2{font-size:clamp(1.7rem,3.5vw,2.4rem);line-height:1.1;font-weight:700;text-transform:uppercase;font-style:italic}
.ziel h2 .a{color:var(--orange)} .ziel h2 .b{color:var(--green)}
.ziel ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.75rem}
.ziel li{border-top:.3rem solid var(--slate);padding-top:1rem;font-size:1rem}
.ziel li:nth-child(1){border-color:var(--orange-fill)}
.ziel li:nth-child(2){border-color:var(--green-fill)}
@media (max-width:56rem){.ziel ul{grid-template-columns:1fr;gap:1.5rem}.ziel li{max-width:44rem}}

footer{background:var(--slate);color:var(--on-slate);padding-block:1.25rem;font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;gap:.5rem 2rem;flex-wrap:wrap}
footer b{letter-spacing:.12em;text-transform:uppercase;font-weight:600}

footer .fak{display:flex;align-items:center;gap:.9rem;line-height:1.3}
footer .fak img{width:3.5rem;height:3.5rem;flex:none}