/* Scroll-Bühnen (1.20.0). Alles hier greift nur unter html.ml-bewegt; ohne JavaScript oder bei reduzierter Bewegung bleibt die Seite statisch. */
.ml-nur-bewegt { display: none; }
.ml-bewegt .ml-nur-bewegt { display: block; }
.ml-bewegt .ml-ohne-bewegt { display: none; }

/* Grundgerüst: die Bühne ist --lang Bildschirmhöhen lang, der Halter klebt oben */
.ml-buehne { position: relative; height: calc((var(--lang, 2.5) + 1.8) * 100vh); }
.ml-b-halter { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 72px 1.5rem 2rem; }
.ml-b-schirm { position: relative; background: #0d0f16; }
.ml-b-schirm > img, .ml-b-grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ml-ebene { opacity: 0; transition: opacity .45s ease; }
.ml-ebene.ist-an { opacity: 1; }
.ml-folge { position: absolute; overflow: hidden; }
.ml-folge img { display: block; width: 100%; will-change: transform; }
.ml-b-schwarz { position: absolute; inset: 0; background: #000; }

/* Zwei Spalten: Gerät und Sätze */
.ml-b-zweier { --sicht: min(var(--rein, 1), calc(1 - var(--raus, 0))); opacity: calc(.1 + .9 * var(--sicht)); transform: translate3d(0, calc((1 - var(--rein, 1)) * 60px - var(--raus, 0) * 60px), 0) scale(calc(.8 + .2 * var(--sicht))); will-change: transform, opacity; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; width: 100%; max-width: var(--ml-rahmen); }
.ml-b-geraet { position: relative; }
.ml-b-geraet .ml-laptop { max-width: none; }
.ml-b-seite h4 { font-family: var(--ml-serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--ml-navy); margin: .1rem 0 1.1rem; }
.ml-b-saetze, .ml-b-wechsel { position: relative; list-style: none; margin: 0 0 1.4rem; padding: 0; min-height: 2.6em; font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.3; }
.ml-b-saetze li, .ml-b-wechsel li { position: absolute; left: 0; top: 0; right: 0; color: var(--ml-tinte); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.ml-b-saetze li.ist-an, .ml-b-wechsel li.ist-an { opacity: 1; transform: none; }
.ml-b-wechsel b { display: block; font-family: var(--ml-serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; color: var(--ml-navy); }
.ml-b-wechsel span { display: block; margin-top: .3rem; font-size: 1.05rem; color: var(--f, var(--ml-grau)); }
.ml-b-wechsel { min-height: 5.2rem; }
.ml-b-nachweis { color: var(--ml-grau-hell); font-size: .74rem; line-height: 1.45; margin: 0; }

/* Fächerkarten: Karten kommen versetzt, Punkt-Logos setzen sich aus versetzten Punktwolken zusammen */
.ml-bewegt .ml-fach[data-einblenden], .ml-bewegt .ml-wunsch[data-einblenden] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.ml-bewegt .ist-da[data-einblenden] { opacity: 1; transform: none; }
.ml-geist { display: none; }
.ml-bewegt .ml-fach-bildfeld { position: relative; }
.ml-bewegt .ml-geist { display: block; position: absolute; left: 0; bottom: 0; opacity: .55; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity 1.1s ease; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.ml-bewegt .ml-geist-1 { transform: translate3d(-26px, -18px, 0) scale(1.18) rotate(-6deg); }
.ml-bewegt .ml-geist-2 { transform: translate3d(30px, -8px, 0) scale(.86) rotate(7deg); }
.ml-bewegt .ml-geist-3 { transform: translate3d(6px, 24px, 0) scale(1.08) rotate(3deg); }
.ml-bewegt .ml-geist ~ .ml-fach-bild:not(.ml-geist) { opacity: 0; transition: opacity .7s ease; transition-delay: calc(var(--i, 0) * 70ms + 650ms); }
.ml-bewegt .ist-da .ml-geist { transform: none; opacity: 0; }
.ml-bewegt .ist-da .ml-fach-bild:not(.ml-geist) { opacity: 1; }

/* Diagnose: Handy mit Fall, Eingabe und markierter Fassung, auf dunklem Grund */
.ml-b-dx .ml-b-zweier { grid-template-columns: auto minmax(0, 1fr); max-width: 860px; }
.ml-b-dx-handy { width: min(300px, 40vh); }
.ml-b-dx-handy .ml-schirm { background: #fbfaf6; padding-top: 30px; }
.ml-b-dx-schirm { padding: 10px 12px; font-size: 12px; color: #1b1f3b; }
.ml-b-dx-kopf { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6d12; }
.ml-b-dx-bild { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 860 / 588; }
.ml-b-dx-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ml-b-dx-markiert { opacity: 0; transition: opacity .5s ease; }
.ml-b-dx-markiert.ist-an { opacity: 1; }
.ml-b-dx-fall { margin: 9px 0 6px; line-height: 1.45; }
.ml-b-dx-frage { margin: 0 0 5px; font-weight: 700; color: #2b2d6e; }
.ml-b-dx-feld { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid #d8d6cc; border-radius: 9px; background: #fff; font-size: 13px; }
.ml-b-dx-feld i { width: 1.5px; height: 16px; margin-left: 1px; background: #2b2d6e; animation: ml-blinken 1s steps(1) infinite; }
@keyframes ml-blinken { 50% { opacity: 0; } }
.ml-b-dx-ergebnis { margin: 9px 0 0; padding: 7px 9px; border-radius: 9px; background: #e7f4ec; color: #1f5d3a; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .4s ease, transform .4s ease; }
.ml-b-dx-ergebnis.ist-an { opacity: 1; transform: none; }
.ml-dx .ml-b-saetze li { color: #fff; }
.ml-dx .ml-b-seite h4 { color: #fff; }
.ml-dx .ml-schau-etikett { color: #f2b632; }
.ml-dx .ml-b-nachweis { color: #9aa0bf; }
.ml-bewegt .ml-dx .ml-dx-buehne, .ml-bewegt .ml-dx .ml-dx-bildhinweis { display: none; }
.ml-dx .ml-buehne { margin: 0 -1.5rem; }

/* Schaufenster-Bühnen: das große Schaustück wandert in die Bühne */
.ml-b-schau .ml-b-halter { padding-left: 0; padding-right: 0; }
.ml-b-schau .ml-b-seite h4 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.ml-b-schau .ml-schau-etikett { color: var(--f); }
.ml-b-tablet { max-width: 640px; }
.ml-b-ekg { position: absolute; width: 30.9%; height: 31%; overflow: hidden; }
.ml-b-ekg-unten { height: 21%; }
.ml-b-ekg::before { content: ""; position: absolute; inset: 0; background: #fbf3f2; transform: translate3d(calc(clamp(0, (var(--p, 0) - var(--s)) * 4, 1) * 100%), 0, 0); }
.ml-b-ekg::after { content: ""; position: absolute; inset: 0; border-left: 2px solid #a8322a; opacity: calc(1 - clamp(0, (var(--p, 0) - var(--s)) * 4 - .9, 1) * 10); transform: translate3d(calc(clamp(0, (var(--p, 0) - var(--s)) * 4, 1) * 100%), 0, 0); }

/* Arbeiten: Mein Dienst gleitet als Handy herein */
.ml-b-dienst { position: absolute; right: -2%; bottom: -6%; width: 26%; opacity: 0; transform: translate3d(40%, 0, 0) rotate(4deg); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ml-b-dienst.ist-an { opacity: 1; transform: none; }
.ml-b-dienst .ml-schirm img { width: 100%; height: auto; display: block; }
.ml-b-schloss { position: absolute; left: 50%; bottom: -14px; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--ml-navy); color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }


/* Schritte: die Verbindungslinie zeichnet sich mit dem Scrollen */
.ml-bewegt .ml-schritt-liste { position: relative; }
.ml-bewegt .ml-schritt-liste::after { content: ""; position: absolute; left: 2.3rem; top: 2rem; bottom: 2rem; width: 2px; background: var(--ml-navy); transform-origin: top; transform: scaleY(var(--p, 0)); z-index: 0; }
.ml-bewegt .ml-schritt-liste li { z-index: 1; }
@media (min-width: 981px) {
	.ml-bewegt .ml-schritt-liste::after { left: 2.3rem; right: 2.3rem; top: 2.15rem; bottom: auto; width: auto; height: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); }
}

/* Handy: kürzere Bühnen, Gerät oben, Sätze darunter */
@media (max-width: 720px) {
	.ml-buehne { height: calc((var(--lang-m, 2) + 1.2) * 100svh); }
	.ml-b-halter { height: 100svh; padding: 64px 1rem 1rem; align-items: center; }
	.ml-b-zweier, .ml-b-dx .ml-b-zweier { grid-template-columns: 1fr; gap: 1.6rem; }
	.ml-b-seite { text-align: center; }
	.ml-b-seite h4 { font-size: 1.7rem; margin-bottom: .5rem; }
	.ml-b-saetze li, .ml-b-wechsel li { left: 0; right: 0; }
	.ml-b-dx-handy { width: min(250px, 62vw, 38svh); margin: 0 auto; }
	.ml-b-schau .ml-b-halter { padding: 64px 1rem 1rem; }
	.ml-b-geraet { padding: 0; }
	.ml-b-geraet .ml-laptop-fuss { margin: 0 -3%; }
	.ml-b-tablet { max-width: none; }
	.ml-b-saetze, .ml-b-wechsel { font-size: 1.25rem; margin-bottom: .8rem; min-height: 3.1em; }
	.ml-b-wechsel b { font-size: 1.7rem; }
	.ml-b-dienst { width: 30%; right: 0; bottom: -10%; }
	.ml-b-schloss { font-size: .62rem; padding: .2rem .5rem; }
}

/* overflow: hidden am Abschnitt würde position: sticky aushebeln, clip schneidet genauso ab */
.ml-bewegt .ml-dx { overflow: clip; }
@media (max-width: 720px) { .ml-b-schloss { left: auto; right: 0; transform: none; } }
@media (max-width: 720px) { .ml-b-arbeit .ml-b-seite { margin-top: 1.4rem; } .ml-b-nachweis { font-size: .68rem; } }

/* Zweifarbig (1.20.4): jedes zweite Fach im Schaufenster und die Bausteine auf dem Blau des Diagnose-Abschnitts, über die volle Breite */
body { overflow-x: clip; }
.ml-blau { position: relative; isolation: isolate; color: #e9e9f6; }
.ml-blau::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: radial-gradient(90% 70% at 85% 0%, #3b3e8f 0%, rgba(59, 62, 143, 0) 60%), linear-gradient(170deg, #22245c 0%, #15163d 100%); }
.ml-schau-fach.ml-blau { padding-bottom: 4.5rem; margin-top: 4.5rem; }
.ml-schau-fach.ml-blau + .ml-schau-fach { margin-top: 0; }
.ml-blau .ml-schau-kopf { border-bottom-color: rgba(255, 255, 255, .14); }
.ml-blau .ml-schau-kopf h3, .ml-blau .ml-b-seite h4, .ml-blau .ml-kopftext h2 { color: #fff; }
.ml-blau .ml-schau-kopf p, .ml-blau .ml-kopftext p { color: #c9cce0; }
.ml-blau .ml-schau-weiter, .ml-blau .ml-schau-weiter:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.ml-blau .ml-b-seite .ml-schau-etikett, .ml-blau .ml-etikett { color: #f2b632; }
.ml-blau .ml-b-saetze li, .ml-blau .ml-b-wechsel b { color: #fff; }
.ml-blau .ml-b-wechsel span { color: #c9cce0; }
.ml-blau .ml-b-nachweis { color: #9aa0bf; }
.ml-blau .ml-laptop { filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .45)); }
.ml-blau .ml-laptop-fuss { background: linear-gradient(180deg, #c8cad3, #9da0ab 55%, #5f626c); }
.ml-blau .ml-baustein h3 { color: #fff; }
.ml-blau .ml-baustein p { color: #c9cce0; }
.ml-blau .ml-baustein-sym { background: rgba(255, 255, 255, .1); color: #f2b632; }
.ml-bausteine.ml-blau { padding-bottom: 6rem; }