/* ADK Website · Gestaltungsraster (Stufe A, Korrektur A2)
   Drei Schriftgrößen je Seite: --fs-1 Überschrift, --fs-2 Zwischenüberschrift, --fs-3 Absatz.
   --fs-foot nur in der Fußzeile. Schriften liegen auf demselben Server.
   Farben: Blau, Weiß, Gelb, Schwarz, Grau. Gelb nur voll, keine Aufhellung. Keine Blau-Deckkraftstufen. */
/* Archivo Narrow, Omnibus Type, SIL Open Font License 1.1.
   Liegt als WOFF2 auf dem eigenen Server, verkleinert auf den Zeichenvorrat
   dieser Website. Keine Verbindung zu Google oder Adobe. Der Lizenztext
   liegt daneben in fonts/OFL.txt und muss mitgeliefert werden. */
@font-face{font-family:"Archivo Narrow";src:url("fonts/archivo-narrow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url("fonts/archivo-narrow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
--blue:#00009C;--white:#FFFFFF;--yellow:#FBB03B;--black:#111111;--grey:#6E6E73;
--line:rgba(17,17,17,.14);--line-on-blue:rgba(255,255,255,.28);
--fs-1:clamp(2.4rem,5vw,4.2rem);--fs-2:clamp(1.5rem,2.3vw,2rem);--fs-3:clamp(1.175rem,1.25vw,1.3125rem);--fs-foot:1rem;
--lh-1:1.05;--lh-2:1.2;--lh-3:1.55;
--font:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
--pad:16px;--max:1280px;--gap:24px;--sec:56px;--sec-blue:80px;--r:16px;
--hd:72px;--hd-s:60px;
--ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:768px){:root{--pad:32px}}
@media(min-width:1024px){:root{--pad:48px;--sec:96px;--hd:156px;--hd-s:92px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font);font-weight:400;font-size:var(--fs-3);line-height:var(--lh-3)}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0;padding:0;font-style:normal}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;color:var(--blue);text-wrap:balance}
h1,.fs-1{font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:-.005em}
h2,h3,.fs-2{font-size:var(--fs-2);line-height:var(--lh-2)}
p{text-wrap:pretty;max-width:33em}
strong{font-weight:700}
a{color:var(--blue);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--blue);text-decoration-thickness:2px}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.on-dark :focus-visible,.blue :focus-visible{outline-color:var(--white)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 20px;background:var(--white);border-radius:999px}
.skip:focus{top:12px}

/* Raster: 12 Spalten */
.wrap{max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px}
.grid > *{grid-column:1 / -1}
@media(min-width:900px){.c1-5{grid-column:1 / 6}.c1-7{grid-column:1 / 8}.c1-8{grid-column:1 / 9}.c7-12{grid-column:7 / 13}.c8-12{grid-column:8 / 13}}

/* Abschnitte: Weiß, volles Blau, volles Gelb */
.sec{padding-block:var(--sec);position:relative}
.plain + .plain{padding-top:0}
.blue{background:var(--blue);color:var(--white);padding-block:var(--sec-blue)}
.blue h2,.blue h3,.blue p{color:var(--white)}
.yellow{background:var(--yellow);color:var(--black)}
.dots{isolation:isolate}
.dots::before{content:"";position:absolute;left:0;right:0;top:-20%;bottom:-20%;z-index:-1;background:url("img/muster.jpg") center/cover;background-image:image-set(url("img/muster.webp") type("image/webp"),url("img/muster.jpg") type("image/jpeg"));opacity:.06;pointer-events:none;transform:translate3d(0,var(--py,0px),0)}
.dots{overflow:clip}
.stack{display:flex;flex-direction:column;gap:24px}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
@media(min-width:1024px){.head{margin-bottom:48px}}
.muted{color:var(--grey)}

/* Knöpfe */
.btns{display:flex;flex-wrap:wrap;gap:12px 16px}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.5em 1.5em;border:2px solid var(--blue);border-radius:999px;background:transparent;color:var(--blue);font:700 var(--fs-3)/1.2 var(--font);text-decoration:none;cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease)}
.btn-primary{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.btn-light{border-color:var(--white);color:var(--white)}
.btn-light::before,.on-dark .btn-primary::before,.blue .btn-primary::before{background:var(--white)}
@media(hover:hover){
.btn:hover{text-decoration:none}
.btn:hover::before{transform:scaleX(1)}
.btn-primary:hover,.btn-secondary:hover{color:var(--white);border-color:var(--blue)}
.btn-light:hover,.on-dark .btn-primary:hover,.blue .btn-primary:hover{color:var(--blue);border-color:var(--white)}
}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-weight:700;text-decoration:none}
.link-arrow span{transition:transform .25s var(--ease)}
@media(hover:hover){.link-arrow:hover span{transform:translateX(4px)}}

/* Fortschrittsbalken */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:120;background:var(--blue);transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* Kopfzeile: Höhenwechsel nur über transform */
.hd{position:fixed;left:0;right:0;top:0;z-index:100;height:var(--hd);transition:transform .25s var(--ease)}
.hd-bg{position:absolute;inset:0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);transform-origin:top center;opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.hd-scrim{position:absolute;left:0;right:0;top:0;height:160%;background:linear-gradient(rgba(0,0,50,.6),rgba(0,0,50,0));opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.hd-in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:transform .25s var(--ease)}
.logo{position:relative;display:block;flex:none;transform-origin:left center;transition:transform .25s var(--ease)}
.logo img{height:44px;width:auto}
.logo .logo-w{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s var(--ease)}
.logo .logo-c{transition:opacity .25s var(--ease)}
@media(min-width:1024px){.logo img{height:56px}}
.hd.is-small .hd-bg{opacity:1;transform:scaleY(calc(var(--hd-s) / var(--hd)))}
.hd.is-small .hd-in{transform:translateY(calc((var(--hd-s) - var(--hd)) / 2))}
.hd.is-small .logo{transform:scale(.85)}
.hd.is-hidden{transform:translateY(calc(-1 * max(var(--hd), var(--hd-s)) - 2px))}
@media(max-width:899px){:root{--hd-s:90px}}
/* Offenes Menü: kein transform am Kopf, sonst wird das fixierte Menü auf die Kopfhöhe beschnitten */
.hd:has(.nav.open) .hd-in,.hd:has(.nav.open) .hd-bg{transform:none}
.hd:has(.nav.open){transform:none}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border:2px solid var(--blue);border-radius:999px;background:var(--white);color:var(--blue);font:700 var(--fs-3)/1 var(--font);cursor:pointer}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu-btn[aria-expanded="true"] i{box-shadow:none}
.nav{display:none;position:fixed;left:0;right:0;top:var(--hd);bottom:0;background:var(--white);padding:24px var(--pad) 40px;overflow:auto}
.nav.open{display:flex;flex-direction:column;gap:24px}
.nav ul{display:flex;flex-direction:column;gap:4px}
.nav-link{display:block;padding:18px 20px;color:var(--black);text-decoration:none}
.nav-link[aria-current]{color:var(--blue);font-weight:700;box-shadow:inset 4px 0 0 var(--yellow)}
@media(hover:hover){.nav-link:hover{color:var(--blue);text-decoration:underline}}
.login{align-self:flex-start}
@media(min-width:1100px){
.menu-btn{display:none}
.nav{display:flex!important;position:static;flex-direction:row;align-items:center;gap:32px;padding:0;background:none;overflow:visible}
.nav ul{flex-direction:row;gap:4px}
.nav-link{padding:14px 20px}
.nav-link[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow)}
.login{align-self:center}
.hero-page .hd:not(.is-small) .hd-scrim{opacity:1}
.hero-page .hd:not(.is-small) .logo-w{opacity:1}
.hero-page .hd:not(.is-small) .logo-c{opacity:0}
.hero-page .hd:not(.is-small) .nav-link{color:var(--white)}
.hero-page .hd:not(.is-small) .login{border-color:var(--white);color:var(--white)}
.hero-page .hd:not(.is-small) .login::before{background:var(--white)}
.hero-page .hd:not(.is-small) :focus-visible{outline-color:var(--white)}
}
@media(min-width:1100px) and (hover:hover){
.hero-page .hd:not(.is-small) .nav-link:hover{color:var(--white)}
.hero-page .hd:not(.is-small) .login:hover{color:var(--blue)}
}

/* Bildplätze */
.media{position:relative;overflow:hidden;background:var(--yellow)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media.missing img{visibility:hidden}
.media.missing::after{content:"Bild folgt · " attr(data-file);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);padding:10px 20px;border-radius:999px;background:var(--white);color:var(--blue);text-align:center}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--blue);color:var(--white);margin-top:var(--hd)}
.hero-media{position:relative;height:min(122vw,58svh);background:var(--blue)}
.hero-media img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(rgba(0,0,156,0),var(--blue))}
.hero-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,50,0) 40%,rgba(0,0,50,.5) 100%);opacity:.9;pointer-events:none}
.hero-text{position:relative;padding-block:8px var(--sec-blue)}
.hero-text .grid{row-gap:0}
.kicker{color:var(--blue);font-weight:700;margin-bottom:16px}
.hero .kicker{color:var(--yellow)}
.hero h1{color:var(--white)}
.hero .lead{margin-block:20px 32px;color:var(--white)}
@media(min-width:900px){
.hero{margin-top:0;height:max(600px,min(100svh,46.875vw));display:flex;align-items:center}
.hero-media{position:absolute;inset:0;height:auto}
.hero-media img{object-position:right top}
.hero-media::after{content:none}
.hero-shade{background:linear-gradient(90deg,rgba(0,0,50,0) 0%,rgba(0,0,50,0) 49%,rgba(0,0,50,.84) 60%,rgba(0,0,50,.92) 100%)}
.hero-text{width:100%;padding-block:calc(var(--hd) + 24px) 48px}
.hero-text .grid > div{grid-column:7 / 13}
.hero .lead,.hero h1,.hero .kicker{text-shadow:0 1px 16px rgba(0,0,40,.4)}
}

/* Überschriften zeilenweise */
.lines .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines .line > span{display:block}
.js .lines .line > span{transform:translateY(105%);transition:transform .7s var(--ease);transition-delay:calc(var(--l,0) * 90ms)}
.js .lines.is-in .line > span{transform:none}

/* Einblenden */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Eckdatenleiste auf vollem Blau */
.facts-bar{border-top:1px solid var(--line-on-blue)}
.facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 40px}
.facts li{display:flex;flex-direction:column;gap:4px}
.fact-n{font-size:var(--fs-1);line-height:var(--lh-1);font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.fact-n.is-accent{color:var(--yellow)}
.fact-l{text-transform:uppercase;letter-spacing:.08em;color:var(--white)}
.count{display:inline-block;min-width:calc(var(--d,2) * 1ch)}
@media(min-width:900px){.facts-bar{border-top:0}}
@media(max-width:899px){.facts{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:40px}}

/* Ihre Förderung */
.ways{display:grid;gap:32px}
@media(min-width:800px){.ways{grid-template-columns:1fr 1fr;gap:56px}}
@media(min-width:1024px){.ways{gap:80px}}
.way{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--yellow);box-shadow:0 4px 10px rgba(17,17,17,.14),0 24px 56px rgba(17,17,17,.24)}
.way .media{aspect-ratio:1/1}
@media(min-width:800px){.way .media{aspect-ratio:4/3}}
.way-body{display:flex;flex-direction:column;gap:20px;flex:1;padding:28px 24px 32px}
@media(min-width:1024px){.way-body{padding:40px 48px 48px}}
.way-body .btns{margin-top:auto;padding-top:8px}

/* Das Projekt */
.proj-head{display:flex;flex-direction:column;gap:16px}
.proj-intro{max-width:44em}
.proj-count{display:none}
.proj-pre{display:none}
.proj-body{display:flex;flex-direction:column;gap:56px;margin-top:48px}
.proj .step{display:flex;flex-direction:column;gap:20px}
.step-media{aspect-ratio:1/1;border-radius:var(--r)}
.step-list li{position:relative;padding:12px 0 12px 24px;border-top:1px solid var(--line)}
.step-list li:last-child{border-bottom:1px solid var(--line)}
.step-list li::before{content:"";position:absolute;left:2px;top:calc(12px + .62em);width:8px;height:8px;background:var(--blue)}
.proj-outro{padding-top:72px}
.proj-outro p{max-width:30em;color:var(--blue);font-weight:700}
@media (min-width:900px) and (min-height:600px), (max-width:899px) and (min-height:640px){
.proj{padding-block:0 var(--sec)}
.proj-track{position:relative;height:240vh}
.proj-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-block:calc(var(--hd-s) + 48px) 48px;isolation:isolate;overflow:clip}
.proj-sticky::before{content:"";position:absolute;left:0;right:0;top:-20%;bottom:-20%;z-index:-1;transform:translate3d(0,var(--py,0px),0);background:url("img/muster.jpg") center/cover;background-image:image-set(url("img/muster.webp") type("image/webp"),url("img/muster.jpg") type("image/jpeg"));opacity:.06;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0%,#000 30%,rgba(0,0,0,.5) 46%,transparent 62%);mask-image:linear-gradient(#000 0%,#000 30%,rgba(0,0,0,.5) 46%,transparent 62%)}
.proj-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);row-gap:16px;align-items:start}
.proj-head h2,.proj-intro{grid-column:1}
.proj-count{display:block;grid-column:2;grid-row:1 / span 2;padding:8px 20px;border-radius:999px;background:var(--blue);color:var(--white);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.proj-cur{color:var(--yellow)}
.proj-body{flex:1;min-height:0;container-type:size;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr repeat(6,auto) 1fr;column-gap:64px;row-gap:0;margin-top:112px}
.proj .step{display:contents}
.step-title{grid-column:1;position:relative;padding:10px 0 10px 28px;font-size:var(--fs-2);line-height:var(--lh-1);color:var(--grey);opacity:.45;transition:font-size .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.step-title::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;background:var(--yellow);transform:scaleY(0);transform-origin:top center;transition:transform .3s var(--ease)}
.step:nth-child(1) .step-title{grid-row:2}.step:nth-child(1) .step-list{grid-row:3}
.step:nth-child(2) .step-title{grid-row:4}.step:nth-child(2) .step-list{grid-row:5}
.step:nth-child(3) .step-title{grid-row:6}.step:nth-child(3) .step-list{grid-row:7}
.step.is-active .step-title{font-size:var(--fs-1);color:var(--blue);opacity:1}
.step.is-active .step-title::before{transform:scaleY(1)}
.step-list{grid-column:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.step-list > ul,.step-list > .step-copy{min-height:0;overflow:hidden;padding-left:28px;max-width:30em}
.step-list > ul > li:first-child{margin-top:16px}
.step-list > ul > li:last-child{margin-bottom:24px}
.step-list > .step-copy > p{padding-block:16px 24px}
.step.is-active .step-list{grid-template-rows:1fr}
.step-media{grid-column:2;grid-row:1 / -1;align-self:center;justify-self:end;width:min(100%,100cqh);height:auto;aspect-ratio:1/1}
.js .step-media,.js .step-list > ul,.js .step-list > .step-copy{opacity:0;transform:translateY(24px);pointer-events:none}
.js .step.is-active .step-media,.js .step.is-active .step-list > ul,.js .step.is-active .step-list > .step-copy{opacity:1;transform:none;pointer-events:auto;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js .step.is-active .step-list > ul,.js .step.is-active .step-list > .step-copy{transition-delay:80ms}
.js .step.is-leaving .step-media,.js .step.is-leaving .step-list > ul,.js .step.is-leaving .step-list > .step-copy{opacity:0;transform:translateY(-24px);transition:opacity .25s var(--ease),transform .25s var(--ease);transition-delay:0ms}
.proj-outro{padding-top:96px}
}

@media (max-width:899px) and (min-height:640px){
.proj-pre{display:flex;flex-direction:column;gap:16px;padding-top:var(--sec)}
.proj-sticky{padding-block:calc(var(--hd) + 12px) 16px}
.proj-head{display:flex;justify-content:flex-end}
.proj-head h2,.proj-head .proj-intro{display:none}
.proj-count{padding:4px 14px}
.proj-body{margin-top:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto repeat(6,auto) 1fr;column-gap:0;align-content:start}
.step-media{grid-column:1;grid-row:1;align-self:start;justify-self:center;width:min(100%,calc(100cqh - 230px));height:auto;max-width:none;aspect-ratio:1/1}
.step-title,.step-list{grid-column:1}
.step:not(.is-active) .step-title{display:none}
.step-title{padding-left:20px;margin-top:16px}
.step-list > ul,.step-list > .step-copy{padding-left:20px}
.step-list li{padding-block:8px}
.step-list li::before{top:calc(8px + .62em)}
.step-list > ul > li:first-child{margin-top:8px}
.step-list > ul > li:last-child{margin-bottom:8px}
.proj-outro{padding-top:56px}
}
@media(min-width:900px) and (min-height:600px) and (max-height:720px){
.proj-sticky{padding-block:calc(var(--hd-s) + 16px) 24px}
.proj-body{margin-top:56px}
.step-list li{padding-block:6px}
.step-list li::before{top:calc(6px + .62em)}
.step-list > ul > li:first-child{margin-top:8px}
.step-list > ul > li:last-child{margin-bottom:8px}
.step-title{padding-block:6px}
.step-title::before{top:6px;bottom:6px}
}

/* Kurskacheln */
.cards{display:grid;gap:var(--gap)}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--white);color:var(--black);text-decoration:none;transition:transform .3s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 8px 24px rgba(0,0,0,.10);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.card .media{aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0}
.card .media img{transition:transform .3s var(--ease)}
.card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:24px 24px 28px}
.price{margin-top:auto;padding-top:12px;font-size:var(--fs-2);line-height:var(--lh-2);font-weight:700;color:var(--blue)}
.js .card .media{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .card.is-in .media{clip-path:inset(0)}
.js .card .card-body{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms + 200ms)}
.js .card.is-in .card-body{opacity:1;transform:none}
@media(hover:hover){
a.card:hover{transform:translateY(-4px);color:var(--black)}
a.card:hover::after{opacity:1}
a.card:hover .media img{transform:scale(1.04)}
}
.more{display:flex;flex-direction:column;gap:8px;margin-top:40px}

/* Wer unterrichtet */
.portrait{aspect-ratio:4/5;border-radius:var(--r)}
.teacher .grid{align-items:center}

/* Abschluss */
.ico{flex:none;display:inline-block;width:28px;height:28px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.cta .contact{display:flex;flex-wrap:wrap;gap:8px 40px;margin-top:16px}
.cta .contact a{color:var(--white);display:inline-flex;gap:12px;min-height:44px;align-items:center}
.ft .ico{width:22px;height:22px;color:var(--blue)}
.ft-contact a{display:inline-flex;gap:10px;min-height:44px;align-items:center}
.ico-row{display:flex;gap:10px;align-items:flex-start}
.ico-row .ico{margin-top:2px}

/* Schrift färbt sich beim Scrollen: Weiß zu Gelb, gesteuert über --p (0 bis 1) */
.fill-text .line > span{display:inline-block;color:transparent;background:linear-gradient(90deg,var(--yellow) 0 50%,var(--white) 50% 100%) no-repeat;background-size:200% 100%;background-position:calc(100% - var(--p,0) * 100%) 0;-webkit-background-clip:text;background-clip:text}
.cta .btns[data-reveal]{transform:translateY(24px) scale(.94)}
.cta .btns[data-reveal].is-in{transform:none}

/* Fußzeile */
.ft{padding-block:56px 32px;color:var(--grey)}
.ft,.ft p,.ft a,.ft li,.ft address{font-size:var(--fs-foot);line-height:1.6}
.ft a{color:var(--grey)}
.ft a:hover{color:var(--blue)}
.ft-grid{display:grid;gap:32px}
@media(min-width:900px){.ft-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}.ft-grid > :nth-child(1){grid-column:1/5}.ft-grid > :nth-child(2){grid-column:6/9}.ft-grid > :nth-child(3){grid-column:10/13}}
.ft img{height:48px;width:auto}
.ft ul{display:flex;flex-direction:column;gap:6px}
.ft-label{color:var(--black);font-weight:700;margin-bottom:8px}
.ft .ft-legal{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.ft-legal li{display:flex;align-items:center}
.ft-legal li + li::before{content:"|";padding-inline:16px;color:var(--grey)}
.ft-legal a{display:inline-flex;min-height:44px;align-items:center}

/* Stufe B: Seiten ohne Vollbild-Hero, Punktmuster als eigene Ebene */
body:not(.hero-page) main{padding-top:var(--hd)}
body:not(.hero-page) main > .sec:first-child{padding-top:calc(var(--sec) / 2)}
.sec > .dots{position:absolute;inset:0;z-index:0;pointer-events:none}
.sec > .wrap{position:relative;z-index:1}
body:not(.hero-page) .sec:not(.yellow):not(.blue) + .sec:not(.yellow):not(.blue){padding-top:0}
.blue .card h3{color:var(--blue)}
.blue .card p{color:var(--black)}
.head > p.fs-2:first-child{font-weight:400;color:var(--black)}
@media(min-width:700px){.cards:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Eckdaten auf Weiß: Blau und Schwarz, Akzent als gelbe Unterstreichung (keine gelbe Schrift auf Weiß) */
.sec .fact-n{color:var(--blue)}
.sec .fact-l{color:var(--black)}
.sec .fact-n.is-accent{align-self:flex-start;color:var(--blue);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.1em;text-underline-offset:.14em}
.sec .facts{justify-content:flex-start;column-gap:80px}
.sec .facts li{flex:0 1 26em}
@media(max-width:899px){.sec .facts{grid-template-columns:minmax(0,1fr)}}
.facts + .fs-foot{margin-top:24px}
.fs-foot + .grid{margin-top:48px}

/* Förderkacheln weiß auf Gelb */
.yellow .way{background:var(--white);box-shadow:0 4px 10px rgba(17,17,17,.08),0 20px 48px rgba(17,17,17,.16);transition:opacity .6s var(--ease),transform .3s var(--ease)}
@media(hover:hover){.yellow .way:hover{transform:translateY(-4px)}}
.way-body > p.fs-2{margin-top:auto;padding-top:8px}
.way-body > p.fs-2 + .btns{margin-top:0}

/* 5.5 Vergleich */
.compare{display:flex;flex-direction:column}
.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.4fr)}
.cmp-head > *,.cmp-row > *{padding:18px 24px}
.cmp-head > *,.cmp-m{text-transform:uppercase;letter-spacing:.08em}
.cmp-head > *{font-weight:700}
.cmp-head > :first-child,.cmp-m{padding-left:0}
.cmp-row{border-top:1px solid var(--line-on-blue)}
.compare .is-adk{background:var(--white);color:var(--blue);font-weight:700}
.cmp-row > .is-adk{box-shadow:inset 0 1px 0 var(--line)}
.cmp-head .is-adk{border-radius:var(--r) var(--r) 0 0}
.cmp-row:last-child .is-adk{border-radius:0 0 var(--r) var(--r)}
.compare [data-label]::before{content:none}
@media(max-width:899px){
.compare{gap:16px}
.cmp-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp-row{grid-template-columns:minmax(0,1fr);border:1px solid var(--line-on-blue);border-radius:var(--r);overflow:hidden}
.cmp-row > *{padding:12px 20px}
.cmp-row > .cmp-m{padding:16px 20px 4px;font-weight:700}
.cmp-row > .is-adk{box-shadow:none;padding-bottom:16px}
.cmp-row:last-child .is-adk{border-radius:0}
.compare [data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:.08em;font-weight:400}
}

/* 5.6 Hinweisblock für Beschäftigte */
.pitch{display:flex;flex-direction:column;gap:20px;padding:32px 24px;border:2px solid var(--blue);border-radius:var(--r);background:var(--white)}
@media(min-width:900px){.pitch{padding:48px 56px}}
.pitch ul{display:flex;flex-direction:column;gap:12px}
.pitch li{position:relative;padding-left:24px}
.pitch li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--blue)}
.pitch .btns{margin-top:8px}
.faq-a{display:flex;flex-direction:column;gap:12px}

/* Claim unter dem Logo, Klappmenü Weiterbildung */
.brand{position:relative;flex:none}
.claim{display:none}
.nav-toggle{display:none}
.nav .nav-sub{display:flex;flex-direction:column;gap:0;padding-left:20px}
.nav .nav-sub[hidden]{display:none}
.nav-sub a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-height:44px;padding:10px 20px;color:var(--blue);text-decoration:none}
.nav-sub-n{color:var(--grey);font-size:.8125rem;line-height:1.35}
.nav-sub a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--yellow)}
.nav-sub a[aria-current="page"] .nav-sub-t{font-weight:700}
@media(hover:hover){.nav-sub a:hover{color:var(--blue)}.nav-sub a:hover .nav-sub-t{text-decoration:underline}}
@media(max-width:1099px){.js .nav .nav-sub[hidden]{display:flex}}
@media(min-width:1100px){
.claim{display:block;position:absolute;left:0;top:100%;margin-top:6px;max-width:none;white-space:nowrap;color:var(--blue);transition:opacity .25s var(--ease),visibility .25s}
.brand{transition:transform .25s var(--ease)}

.hd.is-small .claim{opacity:0;visibility:hidden}
.hero-page .hd:not(.is-small) .claim{color:var(--white)}
.nav-item{position:relative;display:flex;align-items:center}
.has-sub > .nav-link{padding-right:2px}
.js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:44px;margin-right:8px;padding:0;border:0;border-radius:8px;background:none;color:var(--black);font:inherit;cursor:pointer}
.nav-toggle span{display:block;transition:transform .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.hero-page .hd:not(.is-small) .nav-toggle{color:var(--white)}
.nav .nav-sub{position:absolute;left:8px;top:calc(100% + 4px);z-index:10;min-width:320px;padding:8px 0;background:var(--white);border-radius:12px;box-shadow:0 2px 6px rgba(17,17,17,.08),0 14px 36px rgba(17,17,17,.16)}
.nav-sub a{padding:10px 24px}
.nav-sub li + li{border-top:1px solid rgba(17,17,17,.08)}
.nav-sub li + li a{padding-top:12px}
}
.blue + .blue{border-top:1px solid var(--line-on-blue)}
.blue a:not(.btn){color:var(--white)}
.grid:has(> .c8-12 > .media){align-items:center}
@media(max-width:899px){.c8-12 > .portrait{aspect-ratio:1/1}}
.stack > .kicker{margin-bottom:-8px}
.stack > .btns{margin-top:8px}
p.fs-2{font-weight:700;color:var(--blue)}
.blue p.fs-2{color:var(--white)}
.fs-foot{font-size:var(--fs-foot);line-height:1.6;color:var(--grey)}
.blue .fs-foot{color:var(--white)}
.sec:not(.yellow) .card{box-shadow:0 4px 10px rgba(17,17,17,.08),0 16px 40px rgba(17,17,17,.12)}

/* Zeilenliste mit feinen Linien (Module, Voraussetzungen, Termine, Zahlen) */
.rows > *{display:flex;flex-direction:column;gap:8px;padding-block:20px;border-top:1px solid var(--line)}
.rows > :last-child{border-bottom:1px solid var(--line)}
.blue .rows > *{padding-block:32px;border-color:var(--line-on-blue)}
.rows dt{font-weight:700;color:var(--blue)}
.blue .rows dt{color:var(--white)}
.rows + p,.rows + .stack{margin-top:40px}
@media(min-width:900px){dl.rows > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--gap)}}

/* 3.1 Schritte: Ziffer .fs-1, Titel .fs-2, verbindende Linie */
.steps{display:grid}
.steps > .step{position:relative;display:grid;grid-template-columns:var(--fs-1) minmax(0,1fr);column-gap:20px;row-gap:8px;padding-bottom:40px}
.steps > .step:last-child{padding-bottom:0}
.steps > .step > :not(.step-n){grid-column:2}
.step-n{grid-row:1 / span 2;font-weight:700;line-height:var(--lh-1);color:var(--blue);text-align:center;font-variant-numeric:tabular-nums}
.steps > .step:not(:last-child)::before{content:"";position:absolute;left:calc(var(--fs-1) / 2);top:calc(var(--fs-1) * var(--lh-1) + 12px);bottom:12px;width:1px;background:var(--blue)}
.blue .step-n{color:var(--yellow)}
.blue .steps > .step::before{background:var(--yellow)}
@media(min-width:900px){
.steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px}
.steps > .step{display:flex;flex-direction:column;gap:12px;padding-bottom:0}
.steps > .step::before{content:none!important}
.step-n{display:flex;align-items:center;gap:20px;text-align:left}
.steps > .step:not(:last-child) .step-n::after{content:"";flex:1;height:1px;margin-right:-48px;background:currentColor}
.steps h3{margin-top:12px}
}

/* 3.2 Fördertabelle, am Handy je Zeile eine Karte */
.ftable{display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);align-items:baseline;padding-block:20px;border-top:1px solid var(--line)}
.frow:last-child{border-bottom:1px solid var(--line)}
.blue .frow{border-color:var(--line-on-blue)}
.ftable [role="columnheader"]{text-transform:uppercase;letter-spacing:.08em}
.ftable [role="cell"]{font-size:var(--fs-2);line-height:var(--lh-2);font-weight:700;font-variant-numeric:tabular-nums}
.ftable [data-label]::before{content:none}
@media(max-width:899px){
.ftable{gap:16px}
.frow:has(> [role="columnheader"]){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r)}
.frow:last-child{border-bottom:1px solid var(--line)}
.blue .frow{border-color:var(--line-on-blue)}
.frow .f-size{grid-column:1 / -1;font-weight:700}
.ftable [data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:4px;font-size:var(--fs-3);line-height:var(--lh-3);font-weight:400;text-transform:uppercase;letter-spacing:.08em}
}

/* 3.3 Rechenbeispiel */
.calc{display:flex;flex-direction:column;max-width:760px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:16px;border-top:1px solid var(--line)}
.calc-row dd{flex:none;text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.calc .count{text-align:right}
.calc-row.is-sum{border-top:2px solid var(--blue);padding-top:20px}
.calc-row.is-sum dt{font-weight:700;color:var(--blue)}
.calc-row.is-sum dd{font-size:var(--fs-2);line-height:var(--lh-2);color:var(--blue)}

/* 3.4 Häufige Fragen: natives details/summary */
.faq{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.faq details{border-top:1px solid var(--line)}
.faq summary{position:relative;display:flex;align-items:center;min-height:44px;padding:20px 56px 20px 0;list-style:none;cursor:pointer;font-size:var(--fs-2);line-height:var(--lh-2);font-weight:700;color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:20px;height:2px;margin-top:-1px;background:var(--blue);transition:transform .2s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] > summary::after{transform:rotate(0deg)}
.faq details[open] > summary::before{transform:rotate(180deg)}
.faq-a{padding:0 56px 28px 0}
@supports selector(::details-content){
.faq details::details-content{height:0;overflow:clip;transition:height .3s var(--ease),content-visibility .3s allow-discrete}
.faq details[open]::details-content{height:auto}
}

/* Hero-Bewegung über CSS-Scroll-Animationen, wo verfügbar */
@keyframes hero-scale{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes hero-shade{from{opacity:.9}to{opacity:1}}
@keyframes hero-par{from{transform:translateY(0)}to{transform:translateY(240px)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){
.progress{animation:grow linear both;animation-timeline:scroll(root)}
.hero-shade{animation:hero-shade linear both;animation-timeline:scroll(root);animation-range:0 600px}
@media(min-width:900px){
html:not(.touch) .hero-media > picture img{animation:hero-scale linear both;animation-timeline:scroll(root);animation-range:0 600px;transform-origin:left top}
html:not(.touch) .hero-text{animation:hero-par linear both;animation-timeline:scroll(root);animation-range:0 600px}
}
}

/* Bewegung abschaltbar (WCAG 2.3.3) */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0ms!important;animation-duration:.01ms!important;animation-delay:0ms!important;scroll-behavior:auto!important}
.progress,.hero-shade,.hero-media img,.hero-text{animation:none!important}
.hero-media img,.hero-text{transform:none!important}
.js [data-reveal],.js .card .card-body{opacity:1!important;transform:none!important}
.js .card .media{clip-path:none!important}
.js .lines .line > span{transform:none!important}
.hero-video{display:none}
.fill-text{--p:1!important}
.dots::before,.proj-sticky::before{transform:none!important}
}

/* B6: Vergleich auf Weiß, Eckdaten auf Blau ohne Leiste */
.sec .cmp-row{border-top-color:var(--line)}
.sec .compare .is-adk{background:var(--blue);color:var(--white)}
.sec .cmp-row > .is-adk{box-shadow:inset 0 1px 0 var(--line-on-blue)}
@media(max-width:899px){.sec .cmp-row{border-color:var(--line)}.sec .cmp-row > .is-adk{box-shadow:none}}
.blue:not(.facts-bar) .facts{justify-content:flex-start;column-gap:80px}
.blue:not(.facts-bar) .facts li{flex:0 1 26em}
@media(max-width:899px){.blue:not(.facts-bar) .facts{grid-template-columns:minmax(0,1fr)}}

/* C1: Hero-Banner mit drei Durchläufen. Inaktive Durchläufe tragen hidden, bleiben aber im Raster, damit die Höhe fest ist. */
.hero-slider .slides{display:grid;width:100%}
.hero-slider .slide{grid-area:1 / 1;position:relative;display:flex;flex-direction:column}
.hero-slider .slide[hidden]{visibility:hidden}
.hero-slider .slide.is-active{z-index:1}
.js .hero-slider .slide{opacity:0;transition:opacity .6s var(--ease)}
.js .hero-slider .slide.is-active{opacity:1}
.hero-slider .hero-text > .wrap{transition:transform .6s var(--ease)}
.js .hero-slider .slide:not(.is-active) .hero-text > .wrap{transform:translateY(24px)}
.js .hero-slider .slide.is-leaving .hero-text > .wrap{transform:translateY(-24px)}
.hero-slider .kicker{text-transform:uppercase;letter-spacing:.08em}
.hero h2{color:var(--white)}
.hero p.fs-2{color:var(--white);margin-bottom:28px}
.hero-slider .lead{margin-block:20px 12px}
.hero-slider .hero-text{padding-bottom:calc(var(--sec-blue) + 24px)}
.slider-ctrl-wrap{position:absolute;left:0;right:0;bottom:20px;z-index:2;pointer-events:none}
.slider-ctrl{display:none;align-items:center;gap:0;padding:0 6px;border-radius:999px;background:var(--blue);pointer-events:auto}
.js .slider-ctrl{display:inline-flex}
.slider-dots{display:flex}
.slider-dot,.slider-pause{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--white);cursor:pointer}
.slider-dot::before{content:"";width:12px;height:12px;border:2px solid var(--white);border-radius:50%;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.slider-dot[aria-current="true"]::before{background:var(--yellow);border-color:var(--yellow)}
.slider-pause{margin-left:4px;box-shadow:inset 1px 0 0 var(--line-on-blue);border-radius:0 999px 999px 0}
.slider-pause span{display:block;width:12px;height:14px;border-inline:4px solid currentColor}
.slider-pause.is-paused span{width:0;height:0;border-inline:0;border-block:8px solid transparent;border-left:13px solid currentColor;margin-left:4px}
@media(min-width:900px){
.hero-slider .slides{height:100%}
.hero-slider .slide{flex-direction:row;align-items:center;height:100%}
.hero-slider .slide:not(:first-child) .hero-media img{object-position:left center}
.hero-slider .hero-text{padding-bottom:96px}
.slider-ctrl-wrap{bottom:32px}
.hero h2{text-shadow:0 1px 16px rgba(0,0,40,.4)}
}

/* C1: Kontakte auf Weiß, Pfeil-Link in Gelb auf Blau */
.sec .contact{display:flex;flex-wrap:wrap;gap:8px 40px}
.sec .contact li > a,.sec .contact li > span{display:inline-flex;gap:12px;min-height:44px;align-items:center}
.sec .contact .ico{color:var(--blue)}
.blue .link-arrow.is-accent{color:var(--yellow)}

/* C1: Für wen, zwei Flächen */
.fit{display:grid;gap:32px}
@media(min-width:900px){.fit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.fit-box{display:flex;flex-direction:column;gap:20px;padding:32px;border-radius:var(--r)}
.fit-yes{border:2px solid var(--blue);background:var(--white)}
.fit-no{background:#F2F2F4}
.fit-ico{width:32px;height:32px;color:var(--blue)}
.fit-list{display:flex;flex-direction:column;gap:16px}
.fit-list li{position:relative;padding-left:24px}
.fit-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--blue)}

/* C1: Formular Kursheft */
.form{display:flex;flex-direction:column;gap:24px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px;max-width:30em}
.field label{font-weight:700;color:var(--blue)}
.field input{width:100%;min-height:52px;padding:12px 18px;border:2px solid var(--blue);border-radius:12px;background:var(--white);color:var(--black);font:inherit}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;max-width:36em}
.check input{width:24px;height:24px;margin:3px 0 0;accent-color:var(--blue);cursor:pointer}
.check label{cursor:pointer}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{font-weight:700;color:var(--blue)}
.form-status:empty{display:none}
.form.is-sent .field,.form.is-sent .check,.form.is-sent .btns{display:none}

/* B7: „Sichern Sie sich jetzt Ihren Vorsprung“ — Variante .vor des Bausteins .proj.
   Drei Schritte, links die Schlagzeilen, rechts wechselt Bild oder Zahlenpaar.
   Gleiche Mechanik und gleiche Zeiten wie „Das Projekt“. */

/* Gelber Balken nur unter der Ziffer, nicht unter dem Prozentzeichen (B7 Punkt 1).
   Die Auszeichnung sitzt auf .count selbst, weil ein inline-block die Unterstreichung
   des Elternelements nicht übernimmt. */
.sec .fact-n.is-accent:has(.u){text-decoration:none}
.sec .fact-n.is-accent .u{text-decoration:none}
.sec .fact-n.is-accent .u > .count{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.1em;text-underline-offset:.14em;text-decoration-skip-ink:none}

/* Zahlenpaar statt Bild im zweiten Schritt */
.step-facts{display:flex;flex-direction:column;gap:24px}
.step-media.step-facts{aspect-ratio:auto;border-radius:0;width:100%;justify-self:stretch;align-self:center}
.step-facts .facts{display:flex;flex-direction:column;gap:28px}
.step-facts .facts li{flex:0 0 auto}
.step-facts .facts + .fs-foot{margin-top:0}
.blue:not(.facts-bar) .step-facts .facts li,.sec .step-facts .facts li{flex:0 0 auto}
@media(max-width:899px){.step-facts .facts,.blue:not(.facts-bar) .step-facts .facts,.sec .step-facts .facts{display:flex;grid-template-columns:none}}

/* Auf vollem Blau: aktive Schlagzeile weiß, inaktive weiß zurückgenommen, Schrittanzeige umgekehrt */
.blue .step.is-active .step-title{color:var(--white)}
.blue .proj-count{background:var(--white);color:var(--blue)}
.blue .proj-cur{color:var(--blue)}
.blue .step-list li{border-color:var(--line-on-blue)}
.blue .step-list li::before{background:var(--yellow)}

/* Scrollweg: 100 vh klebt fest, dazu 80 vh je Schritt (B7 Punkt 3).
   Der Kopf trägt hier keinen Einleitungssatz, deswegen rückt der Inhalt weiter nach oben. */
@media (min-width:900px) and (min-height:600px), (max-width:899px) and (min-height:640px){
.vor .proj-track{height:340vh}
.vor .proj-body{margin-top:72px}
}

/* Abschlusszeile unter dem klebrigen Bereich */
.vor-foot{padding-top:48px}
.vor-foot p{max-width:32em;margin-inline:auto;text-align:center;font-weight:700}
@media(min-width:1024px){.vor-foot{padding-top:72px}}

/* Auf niedrigen Handy-Bildschirmen entfällt der Klebeeffekt: die drei Schritte stehen untereinander */
@media(max-width:899px) and (max-height:639.98px){
.vor{padding-block:var(--sec)}
.vor .proj-track{height:auto}
.vor .proj-sticky{position:static;height:auto;padding-block:0;overflow:visible;display:block}
.vor .proj-sticky::before{content:none}
.vor .proj-pre{display:none}
.vor .proj-head{display:flex;flex-direction:column;gap:12px}
.vor .proj-head h2{display:block}
.vor .proj-count{display:none}
.vor .proj-body{display:flex;flex-direction:column;gap:40px;margin-top:32px;container-type:normal}
.vor .step{display:flex;flex-direction:column;gap:16px}
.vor .step-title{display:block;font-size:var(--fs-2);line-height:var(--lh-2);color:var(--blue);opacity:1;padding:0;margin:0}
.vor .step-title::before{content:none}
.vor .step-list{display:block;grid-template-rows:none}
.vor .step-list > .step-copy{padding-left:0;max-width:none}
.vor .step-list > .step-copy > p{padding-block:0}
.vor .step-media{width:100%;max-width:none}
.js .vor .step-media,.js .vor .step-list > .step-copy{opacity:1;transform:none;pointer-events:auto}
}

/* Bewegung abschaltbar: alle drei Schritte stehen vollständig untereinander (B7 Punkt 3) */
@media(prefers-reduced-motion:reduce){
.vor .proj-track{height:auto}
.vor .proj-sticky{position:static;height:auto;overflow:visible;display:block;padding-block:0}
.vor .proj-sticky::before{content:none}
.vor .proj-head{display:flex;flex-direction:column;gap:12px}
.vor .proj-count{display:none}
.vor .proj-body{display:flex;flex-direction:column;gap:40px;margin-top:32px;container-type:normal}
.vor .step{display:flex;flex-direction:column;gap:16px}
.vor .step-title{display:block;font-size:var(--fs-2)!important;line-height:var(--lh-2);opacity:1!important;padding:0}
.vor .step-title::before{content:none}
.vor .step-list{display:block!important;grid-template-rows:none!important}
.vor .step-list > .step-copy{padding-left:0;max-width:none}
.vor .step-list > .step-copy > p{padding-block:0}
.js .vor .step-media,.js .vor .step-list > .step-copy{opacity:1!important;transform:none!important;pointer-events:auto}
}

/* B7: Akzentkarte mit den beiden Zahlen (nur arbeitsuchende.html, dort ohne Klebeeffekt) */
.card-accent{background:var(--blue)}
.card-accent h3,.card-accent p,.card-accent .fs-foot{color:var(--white)}
.card-accent .card-body{gap:20px;justify-content:center;padding:32px 24px 36px}
.card-accent .facts{display:flex;flex-direction:column;gap:20px}
.card-accent .facts li{flex:0 0 auto}
.card-accent .fact-n{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--white);text-decoration:none}
.card-accent .fact-n.is-accent{color:var(--yellow);text-decoration:none}
.card-accent .fact-n.is-accent .u,.card-accent .fact-n.is-accent .u > .count{text-decoration:none}
.sec .card-accent .fact-n.is-accent .u > .count{text-decoration:none}
.card-accent .fact-l{color:var(--white)}
@media(max-width:899px){.card-accent .facts{display:flex;grid-template-columns:none}}

/* Abschnitt „Was die ADK ist": Skizze rechts, von links nach rechts in das Weiß verlaufend,
   damit der Text auf jeder Breite lesbar bleibt. */
.ist{position:relative;isolation:isolate;overflow:clip}
.ist-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ist-bg::before{content:"";position:absolute;top:0;bottom:0;right:0;width:min(52%,680px);
  background:url("img/adk-skizze-quadrat-2x.jpg") right center/contain no-repeat;
  background-image:image-set(url("img/adk-skizze-quadrat-2x.webp") type("image/webp"),url("img/adk-skizze-quadrat-2x.jpg") type("image/jpeg"));
  background-repeat:no-repeat;background-position:right center;background-size:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 34%,rgba(0,0,0,.75) 62%,#000 88%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 34%,rgba(0,0,0,.75) 62%,#000 88%)}
.ist-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--white) 0%,var(--white) 40%,rgba(255,255,255,.4) 62%,rgba(255,255,255,0) 80%)}
@media(max-width:899px){
.ist{padding-bottom:calc(72vw + 24px)}
.ist-bg::before{top:auto;height:100vw;width:100%;background-position:center bottom;background-size:100% auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 18%,#000 34%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 18%,#000 34%)}
.ist-bg::after{content:none}
}

/* Abschlussfläche „Platz sichern" auf Schwarz, mit Muster und Parallaxe wie auf den weißen
   Abschnitten. Die Rasterfassung in Schwarz liegt als eigene Datei vor; dort ist das Raster
   heller als der Grund, weil es sonst nicht sichtbar wäre.
   Das Muster liegt als eigene Ebene hinter dem Inhalt, nicht über z-index:-1: in einem
   isolierten Element malt eine negative Ebene sonst über die folgenden Geschwister. */
.dunkel{background:var(--black);color:var(--white);padding-block:var(--sec-blue);position:relative;overflow:clip}
.dunkel h2,.dunkel h3,.dunkel p{color:var(--white)}
.dunkel a:not(.btn){color:var(--white)}
.dunkel :focus-visible{outline-color:var(--white)}
.dunkel > .dots{position:absolute;inset:0;isolation:auto;z-index:0;pointer-events:none}
.dunkel > .dots::before{z-index:0;opacity:1;
  background:url("img/muster-dunkel.jpg") center/cover;
  background-image:image-set(url("img/muster-dunkel.webp") type("image/webp"),url("img/muster-dunkel.jpg") type("image/jpeg"));
  background-position:center;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,#000 38%,#000 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,#000 38%,#000 100%)}
.dunkel > .wrap{position:relative;z-index:1}

/* ============================================================
   Weiterbildungsseite, Korrekturrunde vom 03.10.2026
   ============================================================ */

/* Eckdatenleiste auf vollem Gelb, damit nicht zwei blaue Flächen aneinanderstoßen. */
.facts-bar.gelb{background:var(--yellow);border-top:0;padding-block:var(--sec-blue)}
.facts-bar.gelb .fact-n,.facts-bar.gelb .fact-n.is-accent{color:var(--blue)}
.facts-bar.gelb .fact-l{color:var(--black)}

/* Vorsprung: gelber Balken über die volle Breite hinter der Überschrift, engere Abstände,
   langsamerer und weicherer Wechsel der drei Schritte. */
@media (min-width:900px) and (min-height:600px), (max-width:899px) and (min-height:640px){
.vor .proj-sticky{padding-block:calc(var(--hd-s) + 18px) 18px}
.vor .proj-body{margin-top:56px}
}
.js .vor .step.is-active .step-media,.js .vor .step.is-active .step-list > .step-copy{transition-duration:.55s}
.js .vor .step.is-active .step-list > .step-copy{transition-delay:.12s}
.js .vor .step.is-leaving .step-media,.js .vor .step.is-leaving .step-list > .step-copy{transition-duration:.42s}
.vor .step-title{transition-duration:.5s}
.vor .step-list{transition-duration:.5s}
.vor-foot{padding-top:28px}
@media(min-width:1024px){.vor-foot{padding-top:40px}}

/* Zeilen, die beim Scrollen einschimmern und wieder verschwinden */
.js [data-shimmer]{opacity:var(--s,0);transform:translateY(calc((1 - var(--s,0)) * 14px));will-change:opacity}

/* Abstand erzwingen, wo zwei gleichfarbige Abschnitte sonst zusammenlaufen */
.sec.trenn{padding-top:var(--sec)!important}
@media(min-width:1024px){.sec.trenn{padding-top:112px!important}}

/* Wer unterrichtet auf vollem Blau */
.blue.teacher .media.portrait{border-radius:var(--r);overflow:hidden}

@media(prefers-reduced-motion:reduce){
.js [data-shimmer]{opacity:1!important;transform:none!important}
}
@media(max-width:899px){
}

/* Warum die ADK: Bild zieht im Hintergrund von rechts nach links durch, grau und zurückgenommen,
   der Text zieht von links nach rechts. Beide kommen unscharf herein, werden in der Mitte scharf
   und ziehen unscharf wieder hinaus. Gesteuert über die Scrollposition in site.js:
   --s ist die Phase von -1 (rechts außen) über 0 (Mitte) bis 1 (links außen),
   --t die Schärfe von 0 bis 1, --o die Deckkraft des Textes. */
.flow{padding-block:0 var(--sec)}
.flow-kopf{padding-top:var(--sec)}
.flow-kopf .head{margin-bottom:0}
.flow-linie{height:3px;background:var(--yellow);margin-top:36px}
.flow-track{margin-top:56px}
@media(min-width:1024px){.flow-linie{margin-top:48px}.flow-track{margin-top:80px}}
.flow-track{position:relative;height:500vh}
.flow-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;isolation:isolate}
.flow-step{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.flow-bild{position:absolute;inset:-6%;z-index:0}
.flow-bild img{width:100%;height:100%;object-fit:cover}
.flow-text{position:relative;z-index:1;width:100%}
.flow-text h3{font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:-.005em}
.flow-text p{max-width:30em}
.js .flow-bild{
  filter:grayscale(1) blur(calc((1 - var(--t,0)) * 24px));
  opacity:calc(var(--io,0) * .24);
  transform:translate3d(calc(var(--s,0) * -10vw),0,0) scale(1.14);
  will-change:transform,filter,opacity}
.js .flow-text{
  opacity:var(--o,0);
  filter:blur(calc((1 - var(--tt,0)) * 5px));
  transform:translate3d(calc(var(--m,0) * 14vw),0,0);
  will-change:transform,filter,opacity}
.js .flow-step.is-on{pointer-events:auto}

/* Auf sehr niedrigen Handy-Bildschirmen und bei reduzierter Bewegung stehen die drei Blöcke untereinander */
@media(max-width:899px) and (max-height:499.98px){
.flow-track{height:auto}
.flow-sticky{position:static;height:auto;overflow:visible;display:flex;flex-direction:column;gap:0}
.flow-step{position:relative;inset:auto;min-height:62vh;padding-block:48px}
.flow-bild{inset:0}
.js .flow-bild{filter:grayscale(1)!important;opacity:.24!important;transform:none!important}
.js .flow-text{opacity:1;filter:none;transform:none}
}
@media(prefers-reduced-motion:reduce){
.flow-track{height:auto}
.flow-sticky{position:static;height:auto;overflow:visible;display:flex;flex-direction:column}
.flow-step{position:relative;inset:auto;padding-block:56px}
.js .flow-bild{filter:grayscale(1)!important;opacity:.24!important;transform:none!important}
.js .flow-text{opacity:1!important;filter:none!important;transform:none!important}
}

/* Der Weg zum Bildungsgutschein: vier Schritte an einer Linie, die beim Scrollen von oben
   nach unten voll läuft. Die Ziffer füllt sich dabei von Weiß nach Blau, Text und Bild
   wechseln mit. Gesteuert über site.js:
   --p Füllstand der Linie, --f Füllstand der einzelnen Ziffer,
   --a Deckkraft eines Schritts, --v Richtung, aus der er kommt oder geht. */
.weg{padding-block:var(--sec)}
.weg-kopf{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.weg-track{position:relative}
.weg-sticky{position:relative}
.weg-buehne{display:grid;gap:28px}
.weg-spur{display:none}
.weg-inhalte{display:flex;flex-direction:column;gap:48px}
.weg-schritt{display:flex;flex-direction:column;gap:20px;counter-increment:weg}
.weg-schritt::before{content:counter(weg);font:700 var(--fs-1)/1 var(--font);color:var(--blue)}
.weg-inhalte{counter-reset:weg}
.weg-text{display:flex;flex-direction:column;gap:10px}
.weg-bild{aspect-ratio:1/1;border-radius:var(--r);max-width:420px;background:var(--white)}

@media (min-width:900px) and (min-height:600px){
.weg{padding-block:0}
.weg-track{height:440vh}
.weg-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;overflow:clip;
  padding-block:calc(var(--hd-s) + 36px) 36px}
.weg-buehne{width:100%;display:grid;grid-template-columns:82px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);column-gap:44px;row-gap:0;align-content:start}
.weg-kopf{grid-column:1 / -1;margin-bottom:28px}
.weg-spur{display:block;position:relative;grid-column:1;grid-row:2;min-height:0}
.weg-inhalte{grid-column:2;grid-row:2}
.weg-ziffern{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr)}
/* Je Ziffer ein Strichstueck bis zur naechsten Ziffer, unterbrochen statt durchgehend */
.weg-ziffer::before,.weg-ziffer::after{content:"";position:absolute;left:14px;width:3px;
  top:calc(50% + 38px);border-radius:2px}
.weg-ziffer::before{height:calc(100% - 76px);background:var(--white)}
.weg-ziffer::after{height:calc((100% - 76px) * var(--g,0));background:var(--blue);
  transition:height .15s linear}
.weg-ziffer:last-child::before,.weg-ziffer:last-child::after{content:none}
.weg-ziffer{position:relative;display:flex;align-items:center;justify-content:flex-start}
.weg-zahl{display:block;font:700 var(--fs-1)/1 var(--font);color:transparent;
  -webkit-text-stroke:2px var(--blue);
  background:linear-gradient(to bottom,var(--blue) 0 50%,transparent 50% 100%);
  background-size:100% 200%;background-repeat:no-repeat;
  background-position:0 calc((1 - var(--f,0)) * 100%);
  -webkit-background-clip:text;background-clip:text;
  transform:scale(.46);transform-origin:left center;
  transition:transform .5s var(--ease)}
.weg-ziffer.is-on .weg-zahl{transform:scale(1)}
.weg-inhalte{display:block;position:relative;counter-reset:none}
.weg-schritt{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);
  column-gap:clamp(48px,6vw,96px);align-items:center;gap:0;pointer-events:none}
.weg-text{padding-right:32px}
.weg-text p{max-width:26em}
.weg-schritt::before{content:none}
.weg-schritt.is-on{pointer-events:auto}
.weg-bild{max-width:none;width:100%}
.js .weg-schritt{opacity:var(--a,0);transform:translate3d(0,calc(var(--v,0) * 42px),0);
  will-change:opacity,transform}
}

@media(prefers-reduced-motion:reduce){
.weg-track{height:auto}
.weg-sticky{position:static;height:auto;display:block;overflow:visible}
.weg-buehne{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.weg-spur{display:none}
.weg-inhalte{display:flex;flex-direction:column;gap:48px;position:static;counter-reset:weg}
.weg-schritt{position:relative;inset:auto;display:flex;flex-direction:column;gap:20px}
.weg-schritt::before{content:counter(weg)}
.js .weg-schritt{opacity:1!important;transform:none!important}
}

/* Hinweisband zur Kursseite, Landingpage-Einstieg */
.cta-band{background:var(--yellow);padding-block:40px}
.band-in{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.band-in p{max-width:30em;margin:0}
.cta-band .btn{flex:none}
.band-link{margin-top:40px}
@media(min-width:900px){
.cta-band{padding-block:48px}
.band-in{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
}
@media(min-width:1024px){.band-link{margin-top:48px}}

/* Abschnitte, die nach einem klebrigen Block stehen, brauchen eigene Luft */
.sec.luft{padding-top:72px!important}
@media(min-width:1024px){.sec.luft{padding-top:160px!important}}

/* Kurskatalog: neun Kacheln, drei Spalten ab Tablet */
.cards.katalog{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:700px){.cards.katalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards.katalog{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Qualitätsverpflichtungen: drei statt vier Schritte */
@media(min-width:900px){.steps:not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Formularfelder: Auswahl, mehrzeiliges Feld, breite Spalte */
.field select,.field textarea{width:100%;padding:12px 18px;border:2px solid var(--blue);border-radius:12px;background:var(--white);color:var(--black);font:inherit}
.field select{min-height:52px;appearance:none;padding-right:48px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 24px) 23px,calc(100% - 17px) 23px;background-size:7px 7px;background-repeat:no-repeat}
.field textarea{min-height:140px;line-height:var(--lh-3);resize:vertical}
.field-weit{max-width:40em}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.check + .check{margin-top:-8px}

/* Rechtsseiten: fortlaufender Text mit Zwischenüberschriften */
.recht{max-width:42em}
.recht h2{margin-top:56px}
.recht h2:first-child{margin-top:0}
.recht h3{margin-top:32px}
.recht p,.recht ul,.recht dl,.recht ol{margin-top:16px}
.recht ul,.recht ol{display:flex;flex-direction:column;gap:10px;padding-left:24px}
.recht ul li{list-style:disc}
.recht ol li{list-style:decimal}
.recht .rows{margin-top:24px}
.recht address{font-style:normal}

/* Akademie: Kopfbereich mit Skizze als Hintergrund */
.akad-kopf{overflow:clip}
.akad-hg{display:block}
.akad-hg img{display:block;width:100%;height:auto}
@media(min-width:900px){
.akad-kopf{min-height:min(42.85vw,720px);display:flex;align-items:center}
.akad-kopf > .wrap{width:100%}
.akad-hg{position:absolute;inset:0;z-index:0}
.akad-hg img{height:100%;object-fit:cover;object-position:right center}
}
@media(max-width:899px){.akad-hg{margin-bottom:24px}}

/* Stärkere Parallaxe für ausgewählte Punktmuster */
.dots[data-par]::before{top:-45%;bottom:-45%}

/* Mission und Vision untereinander, Wachstumsskizze rechts im Hintergrund */
.mv-text{display:flex;flex-direction:column;gap:72px}
.mv-text > .stack + .stack{margin-top:24px}
@media(min-width:900px){.akad-kopf.mv{padding-block:var(--sec)}.mv .akad-hg img{object-position:right bottom}}

/* Weg auf vollem Blau, drei Schritte */
.weg.blue .weg-schritt::before{color:var(--yellow)}
section.weg.blue .weg-zahl{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;
  background:linear-gradient(to bottom,var(--yellow) 0 50%,var(--white) 50% 100%);
  background-size:100% 200%;background-repeat:no-repeat;
  background-position:0 calc((1 - var(--f,0)) * 100%);
  -webkit-background-clip:text;background-clip:text}
.weg.blue .weg-ziffer::before{background:rgba(255,255,255,.3)}
.weg.blue .weg-ziffer::after{background:var(--yellow)}
@media (min-width:900px) and (min-height:600px){
.weg-ziffern:not(:has(> :nth-child(4))){grid-template-rows:repeat(3,1fr)}
.weg-track:not(:has(.weg-ziffer:nth-child(4))){height:330vh}
}

/* Kontaktkarten mit Symbol, Symbol springt beim Einblenden auf */
.k-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--blue);margin-bottom:12px}
.js .card .k-icon{transform:scale(.3) rotate(-30deg);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 380ms)}
.js .card.is-in .k-icon{transform:none;opacity:1}
.js .card .k-icon svg path,.js .card .k-icon svg rect{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 600ms)}
.js .card.is-in .k-icon svg path,.js .card.is-in .k-icon svg rect{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.js .card .k-icon{transform:none;opacity:1}.js .card .k-icon svg *{stroke-dashoffset:0!important}}

/* Handy: alle Scroll-Abschnitte kleben fest. Oben tauschen Überschrift und Text, darunter das Bild.
   Alle Schritte liegen in derselben Rasterzelle, damit die Zeilenhöhe der längste Text bestimmt
   und das Bild beim Wechsel nicht springt. */
.weg-pre{display:none}
@media (max-width:899px) and (min-height:500px){
/* Der Weg: Kopf steht davor, im klebenden Bereich nur Ziffer, Überschrift, Text und Bild */
.weg{padding-block:0}
.weg-pre{display:flex;flex-direction:column;gap:10px;padding-top:var(--sec);padding-bottom:8px}
.weg-track{height:380vh}
.weg-track:not(:has(.weg-schritt:nth-child(4))){height:310vh}
.weg-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;overflow:clip;padding-block:calc(var(--hd) + 16px) 20px}
.weg-buehne{width:100%;display:flex;flex-direction:column;min-height:0;gap:0}
.weg-kopf,.weg-spur{display:none}
.weg-inhalte{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:20px;counter-reset:weg}
.weg-schritt{display:contents}
.weg-schritt::before{content:none}
.weg-text{grid-row:1;grid-column:1;counter-increment:weg}
.weg-text::before{content:counter(weg);display:block;margin-bottom:6px;font:700 var(--fs-1)/1 var(--font);color:var(--blue)}
.weg.blue .weg-text::before{color:var(--yellow)}
.weg-bild{grid-row:2;grid-column:1;width:100%;height:auto;min-height:0;max-width:none;aspect-ratio:auto}
.js .weg-text,.js .weg-bild{opacity:var(--a,0);transform:translate3d(0,calc(var(--v,0) * 32px),0);will-change:opacity,transform}
/* Warum die ADK (Weiterbildung): Text oben, Bild darunter, beide ziehen seitlich durch */
.flow-track{height:400vh}
.flow-sticky{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:24px;padding-block:calc(var(--hd) + 20px) 24px}
.flow-step{display:contents}
.flow-text{grid-row:1;grid-column:1}
.flow-bild{grid-row:2;grid-column:1;position:relative;inset:auto;margin-inline:var(--pad);min-height:0;border-radius:var(--r);overflow:hidden;z-index:0}
.js .flow-bild{filter:blur(calc((1 - var(--t,0)) * 10px));opacity:var(--io,0);transform:translate3d(calc(var(--s,0) * -24vw),0,0)}
}
@media (max-width:899px) and (min-height:500px) and (prefers-reduced-motion:reduce){
.weg-pre{display:none}
.weg-track{height:auto}
.weg-sticky{position:static;height:auto;display:block;padding-block:var(--sec)}
.weg-kopf{display:flex}
.weg-inhalte{display:flex;flex-direction:column;gap:48px}
.weg-schritt{display:flex;flex-direction:column;gap:20px}
.weg-bild{aspect-ratio:1/1;max-width:420px}
.js .weg-text,.js .weg-bild{opacity:1!important;transform:none!important}
.flow-sticky{display:flex;flex-direction:column;padding-block:0}
.flow-step{display:flex;position:relative;inset:auto;padding-block:56px}
.flow-bild{position:absolute;inset:0;margin:0;border-radius:0}
}

@media (max-width:899px) and (min-height:640px){
/* Das Projekt, Vorsprung, Warum die ADK (Startseite) */
.proj .proj-body{grid-template-rows:auto auto minmax(0,1fr);row-gap:0;align-content:stretch}
.proj .step .step-title{grid-row:1;grid-column:1;display:block;font-size:var(--fs-1);line-height:var(--lh-1);margin-top:12px;transition:opacity .35s var(--ease)}
.proj .step:not(.is-active) .step-title{opacity:0}
.proj .step .step-list{grid-row:2;grid-column:1;grid-template-rows:1fr}
.proj .step .step-media{grid-row:3;grid-column:1;align-self:stretch;justify-self:stretch;width:100%;height:auto;min-height:0;aspect-ratio:auto;margin-top:16px}
.proj .step .step-media.step-facts{align-self:center;height:auto}
.vor .proj-sticky{padding-block:calc(var(--hd) + 16px) 20px}
.vor .proj-pre{padding-bottom:8px}
.vor .proj-body{margin-top:8px}
.proj .step .step-media.step-facts{align-self:start;margin-top:12px}
.step-facts .facts,.blue:not(.facts-bar) .step-facts .facts,.sec .step-facts .facts{flex-direction:row;flex-wrap:wrap;gap:16px 32px}
.step-facts{gap:8px}
}
@media (max-width:899px) and (min-height:640px) and (max-height:759.98px){
.proj .step .step-title{font-size:var(--fs-2);line-height:var(--lh-2);margin-top:4px}
}

/* Handy: Muster liegt am ganzen Abschnitt, auch hinter dem Kopf vor dem klebenden Bereich, mit Parallaxe */
.sec.proj.dots .proj-sticky::before{content:none}
.sec.proj.weiss .proj-sticky::before{content:none}
.sec.proj.weiss{background:var(--white)}

/* ------------------------------------------------------------------ *
 * Fuß · Verweise auf LinkedIn und Instagram
 * Die Zeichen liegen als SVG im Quelltext. Es wird nichts nachgeladen,
 * damit die Seite ohne Verbindung zu fremden Servern auskommt.
 * Die Farbe kommt über currentColor aus dem Fuß.
 * ------------------------------------------------------------------ */
.ft .ft-col3{display:flex;flex-direction:column;gap:6px}
.ft .ft-social{flex-direction:row;gap:8px;margin-top:18px}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;color:var(--grey)}
.ft-social a:hover,.ft-social a:focus-visible{color:var(--blue);border-color:var(--blue)}
.ft-social svg{display:block}

/* Auf schmalen Geräten passen die vier Rechtsseiten nicht in eine Zeile.
   Dort entfallen die Trennstriche, damit beim Umbruch keiner am Zeilenanfang steht. */
@media(max-width:520px){
  .ft .ft-legal{column-gap:20px;row-gap:0}
  .ft-legal li + li::before{content:none;padding-inline:0}
}