@import url("../fonts/mtz-website/fonts.css");
/* Variante D · „Wie erklaert man ein Haus?“
   proband15-Grau als Grund, volle dunkle Bloecke mit harten Kanten, ein Container (1120 px)
   als Raster; gezielt durchbrochen von Buehne, Lunch-Block und Vergleich. */
body[data-case] { overflow: visible; overflow-x: clip; }
/* Keine automatische Silbentrennung (global in style.css an); ­ wirkt weiter */
.case-d, .case-d * { hyphens: manual; }
.case-d {
  --grey: #f2f2f2; --dark: #151515; --ink: #151515; --text: #333; --mute: #6b7473; --teal: #089289; --teal-hi: #2cc5b9;
  --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gap: clamp(7rem, 14vw, 12rem);
  --edge: max(clamp(20px, 5vw, 48px), calc((100vw - 1120px) / 2 + 48px));
  background: var(--grey); color: var(--ink);
  font-family: "Barlow", sans-serif; font-size: 1.125rem; line-height: 1.7;
}
.case-d p, .case-d li { text-align: left; }
.case-d h1, .case-d h2, .case-d h3 { font-family: "Barlow", sans-serif; color: inherit; font-weight: 600; }
.case-d .backlink { color: var(--mute); letter-spacing: .25em; font-size: .8rem; text-decoration: none; }
.case-d a { color: var(--teal); }
.d-wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.d-num { color: var(--teal); font: 600 .82rem "Barlow Condensed", sans-serif; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1rem; }
.case-d h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 1.4rem; }
.d-dark { background: var(--dark); color: #eef2f1; }
.d-dark p { color: #c4cccb; } .d-dark .d-num { color: var(--teal-hi); }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Auftakt (Stil Variante A): dunkel, Lichthof, Haus dreht sich in die Nacht ── */
.d-hero { --n: clamp(0, calc((var(--p, 0) - .42) / .3), 1); height: 320vh; position: relative;
  background: radial-gradient(120% 85% at 70% 62%, color-mix(in srgb, #fdf6e3 calc((1 - var(--n)) * 16%), #132020) 0%, #0f1717 72%); color: #e9efee; }
.d-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.d-orbit { position: absolute; right: -26vw; bottom: -12vh; width: 92vw; height: 100vh; }
.d-hero-head { position: absolute; left: clamp(20px, 3.2vw, 56px); top: clamp(96px, 15vh, 170px); z-index: 2; max-width: 48rem;
  opacity: clamp(0, 1 - var(--p, 0) * 6, 1); }
.d-hero .backlink { color: #9fb0ae; position: relative; left: calc(var(--edge) - clamp(20px, 3.2vw, 56px)); }
.d-kicker { color: var(--teal-hi); font: 600 .82rem "Barlow Condensed", sans-serif; letter-spacing: .22em; text-transform: uppercase; margin: 2.2rem 0 .8rem; }
.d-hero h1 { font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.02em; margin: 0; color: #e9efee; }
.d-hero h1 span { color: var(--teal-hi); }
.d-sub { color: #9fb0ae; margin-top: 1.4rem; font-size: 1.1rem; }
.d-captions { list-style: none; margin: 0; padding: 0; position: absolute; left: clamp(20px, 3.2vw, 56px); bottom: 16vh; z-index: 2; }
.d-captions li { position: absolute; bottom: 0; white-space: nowrap; font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 500; line-height: 1.2; color: #e9efee;
  opacity: clamp(0, min((var(--p, 0) - var(--from)) * 12, (var(--to) - var(--p, 0)) * 12), 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 0) - var(--from)) * 12, 1)) * 24px)); }
.d-captions em { color: #f3d27a; font-style: normal; }
.d-scrollhint { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: #9fb0ae; opacity: clamp(0, 1 - var(--p, 0) * 8, 1); }
.d-scrollhint::after { content: ""; display: block; width: 1px; height: 42px; margin: 10px auto 0; background: linear-gradient(#9fb0ae, transparent); animation: d-drip 1.8s infinite; }
@keyframes d-drip { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } }

/* ── Einstieg ── */
.d-meta { color: var(--mute); font-size: .95rem; padding-top: var(--gap); margin: 0 0 1.5rem; }
.d-meta .divider { margin: 0 .8em; opacity: .4; }
.d-lead { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.5; font-weight: 500; color: var(--ink); margin: 0; }

/* UCD-Kreislauf (nach der proband15-Folie „Co-Creation“): Ein- und Ausgangslinie kommen vom linken Bildschirmrand */
.d-iso { margin-top: var(--gap); }
.d-iso-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 2.5rem; }
.d-iso-grid > p { color: var(--text); margin: 0; }
.d-iso-fig { position: relative; }
.d-iso-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.d-iso-svg path { fill: none; stroke: #151515; stroke-width: 2; }
.d-iso-svg path.d-ar-head, .d-iso-svg path.d-iso-head { fill: #151515; stroke: none; }
.d-iso-back { stroke-dasharray: 6 6; animation: d-dash 3.6s linear infinite; }
@keyframes d-dash { to { stroke-dashoffset: -24; } }
.d-pill rect { fill: #fff; stroke: #151515; stroke-width: 2; }
.d-pill circle { fill: #151515; }
.d-pill text { font: 500 21px "Barlow", sans-serif; fill: #151515; }
.d-pill text.d-pn { font: 600 18px "Barlow", sans-serif; fill: #fff; text-anchor: middle; }
/* Der Kreislauf zeichnet sich mit dem Scrollen: von links rein, 1 → 2, Halbkreis, 3 → 4, links raus,
   dann die Rücksprünge. Jedes Teil hat sein Fenster data-a..data-b auf der Zeitachse; mtz-case.js
   setzt daraus Strichversatz, Deckkraft bzw. Breite. Ohne JS ist alles fertig gezeichnet. */
.d-iso-flow, .d-iso-mask { stroke-dasharray: 1; }
.d-iso-svg path.d-iso-mask { stroke: #fff; stroke-width: 24; }
.d-iso-lead { position: absolute; right: 100%; width: 100vw; border-top: 2px solid #151515; margin-top: -1px; top: 10.45%; transform-origin: left; }
.d-iso-lead-out { top: 89.55%; transform-origin: right; }
/* Gepinnt (setzt mtz-case.js nur, wenn Text und Grafik nebeneinander in den Bildschirm passen):
   die Bühne steht mittig, während man eine Bildschirmhöhe weiterscrollt */
.d-iso.is-pinned { height: calc(var(--h) + 110vh); }
.d-iso.is-pinned .d-iso-stage { position: sticky; top: max(0px, calc((100vh - var(--h)) / 2)); }
/* Unter 1100 px würde der Text höher als die Grafik und in die Linien laufen: untereinander, ohne Linien nach links */
@media (max-width: 1100px) { .d-iso-grid { grid-template-columns: 1fr; } .d-iso-fig { max-width: 640px; } .d-iso-lead { display: none; } }


/* ── Kapitel ── */
.d-chapter { margin-top: var(--gap); }
.d-chapter > p { color: var(--text); }
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 3rem; }
.d-cards div { background: #fff; border: 1px solid #d4e6e0; border-radius: 16px; padding: 1.6rem 1.6rem 1.7rem; }
.d-cards b { display: block; font-size: 1.3rem; line-height: 1.25; font-weight: 600; margin-bottom: .6rem; }
.d-cards span { color: var(--mute); font-size: 1rem; line-height: 1.5; display: block; }
.d-cards .d-hot { background: var(--teal); border-color: var(--teal); color: #fff; } .d-cards .d-hot span { color: #dff4f1; }

/* Lunch: gepinnte Szene. Erst nur der Knopf, dann fliegt er an seinen Platz auf der Startseite */
.d-lunch { --k: clamp(0, calc((var(--p, 0) - .28) / .36), 1); --t: clamp(0, calc((var(--p, 0) - .66) / .14), 1);
  --S: min(64vw, 1000px); margin-top: var(--gap); height: 280vh; position: relative; background: #00242e; }
.d-lunch-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; contain: paint; isolation: isolate; }
.case-d .d-lunch-q { position: absolute; top: 18vh; left: 0; right: 0; text-align: center; margin: 0; color: #fff;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 600; letter-spacing: -.01em; opacity: calc(1 - var(--k) * 2.5); }
.d-lunch-shot { position: absolute; left: 50%; top: 50%; width: var(--S); aspect-ratio: 1440 / 900; border-radius: 14px; overflow: hidden;
  transform: translate(calc(-50% - var(--t) * 25vw), -50%) scale(calc((.9 + var(--k) * .1) * (1 - var(--t) * .18))); opacity: var(--k);
  will-change: transform, opacity; backface-visibility: hidden; }
/* Schatten als eigene Ebene: ein grosser box-shadow auf der skalierten Ebene
   hinterliess in Chrome (HiDPI) Kachel-Artefakte unter dem Screenshot */
.d-lunch-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.d-lunch-shot img { display: block; width: 100%; height: 100%; }
.d-lunch-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--S); aspect-ratio: 1440 / 900; border-radius: 14px;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(30px);
  transform: translate(calc(-50% - var(--t) * 25vw), calc(-50% + 30px)) scale(calc(1.02 * (1 - var(--t) * .18))); opacity: var(--k); pointer-events: none; }
.d-lunch-btn { position: absolute; left: 50%; top: 50%; z-index: 2; white-space: nowrap; pointer-events: none; will-change: transform; backface-visibility: hidden;
  width: calc(var(--S) * .1674); height: calc(var(--S) * .625 * .06); display: grid; place-items: center;
  font: 700 calc(var(--S) * .0118) "Space Mono", monospace; color: #002b36; background: #fff; border: calc(var(--S) * .0014 + 1px) solid #002b36; border-radius: calc(var(--S) * .004);
  box-shadow: calc(var(--S) * .0028) calc(var(--S) * .0028) 0 #002b36;
  --f: calc(1 - var(--t) * .18);
  transform: translate(calc(-50% + var(--k) * var(--S) * .066 * var(--f) - var(--t) * 25vw), calc(-50% + var(--k) * var(--S) * .625 * .032 * var(--f))) scale(calc((3.2 - var(--k) * 2.2) * var(--f))) rotate(calc((1 - var(--k)) * -2deg)); }
.d-lunch-note { position: absolute; right: var(--edge); top: 50%; width: min(26rem, 32vw); transform: translateY(calc(-50% + (1 - var(--t)) * 30px)); opacity: var(--t); }
.d-lunch-note p { color: #c4cccb; margin: 0; } .d-lunch-note .d-num { color: var(--teal-hi); margin-bottom: 1rem; }


.case-d { --creme: #fdf6e3; --petrol: #002b36; }

/* ── 03 Tag/Nacht als Vorhang: Regler und ganzer Hintergrund teilen eine Position ── */
.l-vorhang { --pos: 100%; margin-top: var(--gap); position: relative; overflow: hidden; touch-action: pan-y; }
.l-v-layer { padding: clamp(6rem, 12vw, 10rem) 0; }
.l-v-tag { background: var(--creme); color: var(--petrol); }
.l-v-nacht { position: absolute; inset: 0; background: var(--petrol); color: var(--creme); clip-path: inset(0 0 0 var(--pos)); }
.l-v-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.l-v-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin: 0 0 1.2rem; color: inherit; }
.l-v-tag .l-v-text p { color: #2b4a50; } .l-v-nacht .l-v-text p { color: #c9d6d3; }
.l-v-tag .d-num { color: #1276A1; } .l-v-nacht .d-num { color: #26A3D9; }
.l-v-shot { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.l-v-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: linear-gradient(90deg, #002b36 50%, #fdf6e3 50%); pointer-events: none; z-index: 2; }
.l-v-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex;
  border: 2px solid #002b36; box-shadow: 3px 3px 0 #002b36; }
.l-v-handle i { flex: 1 1 50%; display: grid; place-items: center; }
.l-v-handle i:first-child { background: #fdf6e3; color: #002b36; padding-left: 4px; }
.l-v-handle i:last-child { background: #002b36; color: #fdf6e3; padding-right: 4px; }
.l-v-handle svg { width: 18px; height: 18px; }
.l-v-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; z-index: 3; }
.l-vorhang:has(.l-v-range:focus-visible) .l-v-handle { outline: 3px dashed #1276A1; outline-offset: 4px; }

/* ── Testimonial ── */
.d-testimonial { margin: var(--gap) 0 0; max-width: 52rem; }
.d-testimonial blockquote { margin: 0; padding: 0; border: 0; background: none; }
.d-testimonial blockquote p { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4; font-weight: 500; color: var(--ink); }
.d-testimonial blockquote p::before { content: "»"; color: var(--teal); margin-right: .15em; }
.d-testimonial figcaption { text-align: left; margin-top: 1.4rem; padding-left: 1rem; border-left: 3px solid var(--teal); }
.d-testimonial figcaption b { display: block; font-weight: 600; } .d-testimonial figcaption span { color: var(--mute); }
.case-d .article-cta { margin: var(--gap) 0 2.5rem; border-radius: 16px; }
.case-d > .d-wrap:last-of-type { padding-bottom: var(--gap); }

@media (max-width: 860px) {
  .d-orbit { width: 150vw; right: -30vw; height: 60vh; bottom: -4vh; }
  .d-hero-head { top: 76px; }
  .d-captions { bottom: 50vh; } .d-captions li { white-space: normal; width: 86vw; }
  .d-lunch { --S: 92vw; } .d-lunch-note { left: var(--edge); right: var(--edge); width: auto; top: auto; bottom: 8vh; transform: none; }
  .d-lunch-shot, .d-lunch-btn { --t: 0; }
  .l-v-grid { grid-template-columns: 1fr; }
  .d-cards, .d-lunch-grid { grid-template-columns: 1fr; }
  .d-band-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .d-hero { height: auto; } .d-hero-stage { position: relative; }
  .d-captions, .d-scrollhint { display: none; }
  .d-iso-back { animation: none; }
}

/* ── 04 Evaluation: vorher -> nachher (aus Testseite Ende, Variante 2) und Zitat Wort fuer Wort (Variante 1) ── */
.case-d .e-lead { color: var(--text); margin: 0 0 3rem; }
.e-by { margin-top: 1.6rem; color: var(--mute); } .e-by b { color: var(--ink); font-weight: 600; }
.e1-quote { margin-top: var(--gap); }
.e1-q { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.e1-q span { color: #c5cccb; transition: color .35s ease; }
.e1-q span.on { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .e1-q span { color: var(--ink); } }


/* Zitat mit freigestelltem Portraet; Person steht auf einer Linie, Kreis in Akzentfarbe dahinter */
.e1-quote { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: end; border-bottom: 2px solid var(--ink); }
.e1-quote-text { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.e1-portrait { position: relative; margin: 0; align-self: end; }
.e1-portrait::before { content: ""; position: absolute; left: 50%; bottom: 8%; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: var(--teal); opacity: .9; }
.e1-portrait img { position: relative; display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .e1-quote { grid-template-columns: 1fr; } .e1-portrait { max-width: 320px; } }

/* 02 · Anforderungen: Liste mit Herkunft jeder Anforderung */
.d-req-list { list-style: none; counter-reset: req; padding: 0; margin: 2.5rem 0 0; border-top: 2px solid var(--ink); }
.d-req-list li { counter-increment: req; display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid #cfd6d5; }
.d-req-list li::before { content: counter(req, decimal-leading-zero); font: 700 .8rem "Space Mono", monospace; color: var(--teal); }
.d-req-list b { font-size: 1.2rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
.d-req-list span { font: 700 .66rem "Space Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); white-space: nowrap; }
@media (max-width: 860px) { .d-req-list li { grid-template-columns: 2.4rem 1fr; } .d-req-list span { grid-column: 2; } }

/* ── Kapitel 01: Zitate aus der Recherche ──
   Gepinnte Bühne im Petrol von mtz.de (Dark Mode). Je Zitat: erst das Zitat allein, dann fährt die Lösung
   (Text + Bild) herein, dann arbeitet das Bild (Kamera bzw. Bildsequenz), am Ende eine Ruhephase.
   An den Ruhephasen rastet die Seite sanft ein. Steuerung in mtz-case.js (--in, --k je Zitat). */
html:has(.zq) { scroll-snap-type: y proximity; }
.zq { --zp: #00242e; --zc: #eee8d5; --zb: #26a3d9; position: relative; height: 900vh; background: var(--zp); color: var(--zc); }
.zq-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.zq-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zq-stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--zp) 0%, var(--zp) 36%, rgba(0,36,46,.85) 44%, rgba(0,36,46,0) 58%); }
.zq-vis { position: absolute; inset: 0; visibility: hidden; opacity: var(--in, 0); transform: translateX(calc((1 - var(--in, 0)) * 10vw)); }
.zq-vis.on { visibility: visible; }
.zq-media { position: absolute; width: var(--mw); left: var(--mx); top: var(--my); aspect-ratio: 16 / 11;
  transform: translateY(-50%) scale(calc(var(--s0, 1) + (var(--s1, 1) - var(--s0, 1)) * var(--k, 0))); transform-origin: var(--fo, 50% 50%); }
.zq-media img { display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); }
.zq-text { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.zq-items { position: absolute; top: 50%; width: min(560px, 42%); }
.zq-item { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.zq-item.on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.zq-l { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.zq-l > span { display: block; transform: translateY(105%); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.zq-item.on .zq-l > span { transform: none; }
.zq-item.on .zq-l:nth-child(2) > span { transition-delay: .06s; } .zq-item.on .zq-l:nth-child(3) > span { transition-delay: .12s; } .zq-item.on .zq-l:nth-child(4) > span { transition-delay: .18s; }
.case-d .zq-say { color: var(--zc); font-size: clamp(1.8rem, 2.9vw, 2.6rem); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.case-d .zq-then { margin: 2rem 0 0; color: rgba(238,232,213,.62); font-size: 1.05rem; line-height: 1.55; max-width: 27rem; opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 16px)); }
.zq-prog { position: absolute; z-index: 4; bottom: 9vh; display: flex; gap: 8px; }
.zq-prog i { position: relative; width: 36px; height: 2px; background: rgba(238,232,213,.18); overflow: hidden; }
.zq-prog i::after { content: ""; position: absolute; inset: 0; background: var(--zc); transform-origin: left; transform: scaleX(var(--f, 0)); }
/* 1:1-Bausteine von mtz.de im Dark Mode (Lunch-Karten, Abfahrten, Startup-News), schräg gestaffelt */
.zq-stack { position: absolute; left: 50%; top: 50%; width: 48vw; height: 82vh; transform: translateY(-50%); perspective: 1800px; font-family: "Space Mono", monospace; color: var(--zc); }
.zq-stack > div { position: absolute; width: var(--w); left: var(--x); top: var(--y); transform: rotateY(-20deg) rotateX(9deg) rotateZ(-2deg) translateY(calc(50px * (1 - var(--k, 0)) * var(--d))); }
.zq-card { background: var(--zp); border: 3px solid var(--zc); border-radius: 6px; box-shadow: 4px 4px 0 var(--zc); padding: 16px; }
.zq-lunch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zq-lunch .zq-card { min-height: 104px; transform: rotate(-1deg); } .zq-lunch .zq-card:nth-child(even) { transform: rotate(1deg); }
.zq-lunch .zq-card.sel { border-color: var(--zb); box-shadow: 6px 6px 0 var(--zc); }
.case-d .zq-lunch h3 { margin: 0 0 8px; font: 700 12px "Space Mono", monospace; letter-spacing: .96px; text-transform: uppercase; color: var(--zb); }
.case-d .zq-lunch p { margin: 0; font: 400 14px/1.6 "Space Mono", monospace; color: var(--zc); }
/* Abfahrten: eine Zeile pro Abfahrt – Linie, Ziel, Minuten; die Abfahrtshaltestelle bleibt im Markup, wird aber nicht gezeigt */
.zq-dep { padding: 14px 18px 8px; }
.case-d .zq-dep h3 { margin: 0 0 6px; font: 700 12px "Space Mono", monospace; letter-spacing: .96px; text-transform: uppercase; color: var(--zb); }
.zq-dep div { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.zq-dep div + div { border-top: 1px solid rgba(238,232,213,.14); }
.zq-dep span { overflow: hidden; text-overflow: ellipsis; color: var(--zc); }
.zq-dep span:nth-child(2) { display: none; }
.zq-dep span:first-child { color: #fff; font-weight: 700; border-radius: 4px; height: 24px; display: grid; place-items: center; font-size: 12px; }
.zq-dep span:last-child { color: var(--zb); font-weight: 700; text-align: right; }
.zq-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zq-news > div { background: var(--zp); border: 2px solid var(--zc); border-radius: 6px; box-shadow: 2px 2px 0 var(--zc); overflow: hidden; }
.zq-news img { display: block; width: 100%; aspect-ratio: 238 / 130; object-fit: cover; border-bottom: 2px solid var(--zc); }
.zq-news p { margin: 0; padding: 8px 10px 10px; font: 600 11.5px/1.4 "Space Mono", monospace; color: var(--zc); }
.zq-news small { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: .42px; text-transform: uppercase; margin-bottom: 4px; }
/* Lunch-Zitat: die Lösung ist der Button von mtz.de; er fliegt an den Start der Lunch-Szene */
.zq-btn, .zq-fly { display: grid; place-items: center; white-space: nowrap; font-family: "Space Mono", monospace; font-weight: 700; color: #002b36; background: #fff;
  border: 2px solid #002b36; border-radius: 6px; box-shadow: 5px 5px 0 #002b36; }
.zq-btn { position: absolute; left: 72%; top: 50%; width: 24vw; height: 4.4vw; font-size: 1.7vw; transform: translate(-50%, -50%) rotate(-2deg); }
.zq-fly { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; visibility: hidden; }
.zq + .d-lunch { margin-top: 0; }
/* Luft zwischen dem gepinnten ISO-Kreislauf und dem dunklen Kapitel 01 */
.d-wrap + .zq { margin-top: var(--gap); }
@media (max-width: 860px) {
  .zq-stage::before { background: linear-gradient(180deg, var(--zp) 0%, var(--zp) 34%, rgba(0,36,46,0) 52%); }
  .zq-items { top: 12vh; left: clamp(20px, 5vw, 48px); right: clamp(20px, 5vw, 48px); width: auto; }
  .zq-item { transform: none; }
  .case-d .zq-then { margin-top: 1rem; font-size: .95rem; }
  .zq-media { width: 120vw !important; left: -10vw !important; top: 72% !important; }
  .zq-stack { left: 6vw; width: 90vw; top: 70%; height: 46vh; }
  .zq-stack > div:last-child { display: none; }   /* auf dem Handy nur Lunch und Abfahrten */
  .zq-stack > div { transform: rotateZ(-2deg) translateY(calc(30px * (1 - var(--k, 0)) * var(--d))) scale(.8); transform-origin: 0 0; }
  .zq-btn { left: 50%; top: 70%; width: 72vw; height: 13vw; font-size: 5vw; }
  .zq-prog { bottom: 4vh; }
}
@media (prefers-reduced-motion: reduce) { .zq-l > span { transition: none; transform: none; } }

/* ── 04 Evaluation als Schleife: zwischen „Lösungen evaluieren“ (oben) und „Lösungen entwickeln“ (unten) läuft ein Punkt
   einmal pro Testrunde herum; auf dem Weg nach unten kommen die Befunde der Runde dazu, auf dem Rückweg die Änderungen ── */
.lp { --lp: #00242e; --cr: #eee8d5; position: relative; height: 420vh; margin-top: var(--gap); background: var(--lp); color: var(--cr); }
.lp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: 0 var(--edge); }
/* Überschrift steht direkt über dem Kreis (kein eigener Kopfbereich mehr) */
.lp-left { display: grid; justify-items: center; gap: clamp(2.4rem, 5vh, 3.6rem); }
.case-d .lp-left h2 { margin: 0; color: var(--cr); text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; }
.lp-loop { position: relative; width: min(100%, 26rem); aspect-ratio: 1; justify-self: center; }
.lp-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-track { fill: none; stroke: rgba(238,232,213,.18); stroke-width: 2; stroke-dasharray: 5 7; }
.lp-run { fill: none; stroke: var(--cr); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--a, 0)); transform: rotate(-90deg); transform-origin: center; }
.lp-orbit { position: absolute; inset: 0; z-index: 0; transform: rotate(calc(var(--a, 0) * 360deg)); pointer-events: none; }
.lp-dot { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--cr); box-shadow: 0 0 0 5px var(--lp), 0 0 0 6.5px rgba(238,232,213,.3); }
.lp-pill { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; display: flex; align-items: center; gap: .6rem; background: var(--lp); border: 2px solid var(--cr); border-radius: 999px; padding: .45rem 1.1rem .45rem .5rem; font-size: 1rem; font-weight: 500; transition: background .4s ease, color .4s ease; }
.lp-pill i { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--cr); color: var(--lp); display: grid; place-items: center; font: 600 .85rem "Barlow", sans-serif; font-style: normal; transition: background .4s ease, color .4s ease; }
.lp-top { top: 0; } .lp-bot { top: 100%; }
.lp-pill.hot { background: var(--cr); color: var(--lp); } .lp-pill.hot i { background: var(--lp); color: var(--cr); }
.lp-mid { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; }
.lp-mid small { display: block; font: 600 .78rem "Barlow Condensed", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(238,232,213,.55); }
.lp-mid b { display: block; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; font-weight: 600; margin: .3rem 0; font-variant-numeric: tabular-nums; }
.lp-mid span { display: block; font-size: 1.05rem; line-height: 1.35; color: rgba(238,232,213,.8); }
.lp-board { position: relative; height: 78vh; }
.lp-set { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-content: center; visibility: hidden; }
.lp-set.on { visibility: visible; }
.lp-note { border: 1px solid rgba(238,232,213,.2); border-radius: 12px; padding: 1.3rem 1.4rem; font-size: 1.08rem; line-height: 1.4; font-weight: 500;
  opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .5s ease; }
.lp-note.in { opacity: 1; transform: none; }
.case-d .lp-note > p { margin: 0; color: var(--cr); transition: color .5s ease; }
.lp-fix { font-weight: 600; max-height: 0; overflow: hidden; border-top: 1px solid transparent; transition: max-height .6s cubic-bezier(.2,.7,.2,1), margin .6s cubic-bezier(.2,.7,.2,1), padding .6s cubic-bezier(.2,.7,.2,1), border-color .5s ease; }
.lp-fix::before { content: var(--fixed-label); display: block; font: 600 .7rem "Barlow Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-hi); margin-bottom: .35rem; white-space: pre; }
.lp-note.fx { border-color: rgba(44,197,185,.5); }
.case-d .lp-note.fx > p { color: rgba(238,232,213,.5); }
.lp-note.fx .lp-fix { max-height: 9rem; margin-top: 1rem; padding-top: 1rem; border-top-color: rgba(238,232,213,.14); }
@media (max-width: 860px) {
  .lp-stage { grid-template-columns: 1fr; align-content: center; gap: 2.4rem; padding-top: 56px; }
  .lp-left { gap: 1.6rem; } .case-d .lp-left h2 { font-size: 1.4rem; }
  .lp-loop { width: 11rem; } .lp-pill { font-size: .8rem; padding: .3rem .8rem .3rem .35rem; } .lp-pill i { width: 1.3rem; height: 1.3rem; font-size: .7rem; }
  .lp-mid b { font-size: 2.4rem; } .lp-mid span { font-size: .85rem; }
  .lp-board { height: 56vh; } .lp-set { grid-template-columns: 1fr; gap: .7rem; }
  .lp-note { padding: .8rem 1rem; font-size: .92rem; }
  .case-d .lp-note > p { max-height: 6rem; overflow: hidden; transition: color .5s ease, max-height .6s ease; }
  .case-d .lp-note.fx > p { max-height: 0; }          /* auf dem Handy bleibt nach dem Umsetzen nur die Änderung stehen */
  .lp-note.fx .lp-fix { margin-top: 0; padding-top: 0; border-top-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .lp { height: auto; } .lp-stage { position: relative; height: auto; padding-block: 6rem; align-items: start; }
  .lp-board { height: auto; } .lp-set { position: static; visibility: visible; margin-bottom: 1.4rem; }
  .lp-note { opacity: 1; transform: none; transition: none; } .lp-fix { transition: none; }
}