/* MarketLab Research Lab · V1.4
   Fahrgestell: SOL V1.1 (Hierarchie, Mobile-Achse, Zustandslogik)
   Informationsarchitektur: Opus V1 (vier Rückkehrfragen, Etappenmodul, Founder-Kennung, Lagefeld, Kartengeometrie) */

body{
  min-height:100vh;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
}
.shell{max-width:1540px;margin:0 auto;padding:26px 34px 46px;position:relative;z-index:1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--cyan);color:var(--on-cyan);padding:12px 16px;z-index:99;font-size:var(--fs-meta)}

/* ---------- Atmosphaere-Layer (Night Desk Skyline) ----------
   Liegt hinter allem, traegt keine Information und wird nie vom Text ueberlagert.
   Der Scrim darueber haelt den effektiven Grund dunkel, damit die AAA-Kontraste stehen bleiben. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos img{width:100%;height:100%;object-fit:cover;opacity:.07;filter:saturate(.65) brightness(.8)}
.atmos:after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 12%,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),.9) 70%)}
/* Auf hellem Grund wirkt das dunkle Nachtbild wie Schmutz statt wie Atmosphaere.
   Es bleibt, wird aber aufgehellt und weiter zurueckgenommen. */
:root[data-theme="light"] .atmos img{opacity:.045;filter:saturate(.5) brightness(1.5) invert(1)}

/* ---------- Kopf ---------- */
/* Der Kopf stand als drei nebeneinanderliegende Spalten, aneinander
   ausgerichtet an der Unterkante. Die Marke sass damit in einer eigenen
   180px-Spalte am unteren Rand, auf Hoehe des Fliesstextes, mit einem
   leeren Feld ueber sich - sie las sich wie ein nachtraeglich
   eingeschobenes Element statt wie der Kopf der Seite.
   Jetzt zwei Spalten und zwei Zeilen: die Marke steht oben links, der
   Serienstand behaelt seine eigene Spalte rechts und laeuft ueber beide
   Zeilen, die Textkolumne beginnt unter der Marke. Damit liegen Marke
   und Zaehler auf einer Oberkante, und die Ueberschrift bekommt die
   ganze Breite der linken Spalte. */
.mast{display:grid;grid-template-columns:minmax(0,1fr) 260px;
  column-gap:28px;row-gap:24px;
  /* Unterkante statt Oberkante: der Serienstand sitzt damit unten rechts
     auf Hoehe der Makro-Kette und nicht mehr oben neben der Ueberschrift. */
  align-items:end;border-bottom:1px solid var(--rule);padding-bottom:20px}
/* Die Marke steht im Research Lab in der Kopfleiste und nicht mehr hier.
   Die vorgerenderten Dateien unter stufen/ tragen sie weiter im Kopf; fuer
   sie bleibt die Regel stehen und legt sie als eigene Zeile darueber. */
.mast>.brand{grid-column:1/-1;align-self:start}

/* Markenkomponente · 1:1 aus marketlab.markets/styles.css uebernommen.
   Dort steht sie auf allen Seiten identisch; nur die Tokens werden pro Seite
   gemappt. Das Research Lab mappt --ml-brand-accent auf das Projekt-Cyan. */
.ml-brand{
  --ml-brand-accent:var(--cyan);
  --ml-brand-mark-scale:.88;
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1;
  letter-spacing:-.01em;white-space:nowrap;color:inherit;text-decoration:none}
.ml-brand-name{display:inline-block}
.ml-lab{font-style:normal;font-weight:inherit;color:var(--ml-brand-accent)}
.ml-brand-mark{flex:none;display:block;overflow:visible;
  height:calc(var(--ml-brand-mark-scale) * 1em);width:calc(var(--ml-brand-mark-scale) * 1.0829em)}
.ml-brand-ctx{display:block;margin-top:8px;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-micro);line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kicker{font-family:var(--mono);color:var(--muted);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
h1{font-family:var(--display);font-size:clamp(38px,4.8vw,70px);line-height:1.02;font-weight:600;margin:8px 0 0;letter-spacing:-.035em;max-width:900px}
.progress{text-align:right}
.progress .count{font-family:var(--mono);font-size:30px}
.progress .label{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);text-transform:uppercase;letter-spacing:.14em;line-height:1.45}
.bar{height:3px;background:var(--rule);margin-top:11px;position:relative}
.bar i{position:absolute;left:0;top:0;height:3px;width:0;background:var(--cyan);transition:width .5s ease}
.progress .next{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);letter-spacing:.08em;margin-top:9px;line-height:1.5}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);margin-top:14px;padding:10px 14px;border:1px solid var(--rule2);background:var(--surface-lage);color:var(--bone);font:600 var(--fs-meta)/1.3 var(--body);cursor:pointer}
.theme-toggle:hover{border-color:var(--cyan)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Founder-Kennung (aus Opus) */
.kennung{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-bottom:1px solid var(--rule);padding-bottom:14px}
.kennung div{display:flex;align-items:baseline;gap:8px}
.kennung i{width:6px;height:6px;background:var(--cyan);border-radius:50%;display:inline-block;flex:0 0 auto}
.kennung b{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.11em;text-transform:uppercase;color:var(--bone);font-weight:600}
.kennung span{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- Video-Buehne ----------
   Eine Leinwand bleibt eine Leinwand, auch wenn die Seite hell laeuft. Der Rahmen
   traegt darum feste dunkle Werte statt der Theme-Tokens; sonst kippt der Grund
   unter dem Bild weg und der Text darauf verliert seinen Kontrast. Gemessen:
   #f2f4f3 auf #0a0d0f = 17,4:1, die Badge #35d4ef auf #0a0d0f = 10,6:1. */
.videostage{margin-top:24px}
.videoframe{
  position:relative;margin:0;overflow:hidden;
  border:1px solid var(--rule2);background:#0a0d0f;
  aspect-ratio:16/9;display:flex;align-items:flex-end;
}
/* Bild und Glyph liegen in einer eigenen Kapsel. Sonst haengt der Glyph am
   Rahmen und wandert auf schmalen Geraeten aus dem Bild heraus, sobald die
   Bildunterschrift unter das Bild rutscht. */
.videopic{position:absolute;inset:0}
.videoframe img, .videoframe video{width:100%;height:100%;object-fit:cover;opacity:.65;filter:saturate(.85) contrast(1.05);display:block}
/* Scrim. Unten fast deckend, damit die Zeilen darauf ruhig stehen. */
.videoframe:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,13,15,.96) 0%,rgba(10,13,15,.86) 34%,rgba(10,13,15,.34) 72%,rgba(10,13,15,.5) 100%)}
/* Der Glyph liegt auf der dauerhaft dunklen Leinwand und traegt darum den
   dunklen Cyan-Wert fest. Mit var(--cyan) wuerde er im hellen Theme auf
   #07565f kippen und auf #0a0d0f nur noch 2,3:1 erreichen. */
.videoglyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(56px,7vw,88px);color:#35d4ef;pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(53,212,239,.45))}
.videoglyph svg{display:block;width:100%;height:auto}
.videoframe figcaption{position:relative;z-index:3;padding:clamp(18px,3vw,34px);max-width:64ch;color:#f2f4f3}
.videobadge{margin:0;display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:#35d4ef;
  border:1px solid rgba(53,212,239,.45);padding:6px 11px;line-height:1.4}
.videoframe h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,2.8vw,38px);line-height:1.12;margin:14px 0 0}
.videoframe figcaption p:last-child{margin:10px 0 0;font-size:var(--fs-body-lg);
  line-height:var(--lh-body);color:#d4dcde}
@media(max-width:720px){
  .videoframe{aspect-ratio:auto;display:block}
  .videopic{position:relative;aspect-ratio:16/9;overflow:hidden}
  .videoframe img, .videoframe video{position:absolute;inset:0}
  .videoframe figcaption{max-width:none}
}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px;align-items:start}

/* ---------- Bühne / Karte ---------- */
.stage{min-width:0}
.stage-meta{display:flex;justify-content:space-between;gap:18px;margin-bottom:12px;color:var(--muted);font-family:var(--mono);font-size:var(--fs-meta);line-height:1.5;letter-spacing:.08em}
.stage-meta strong{color:var(--bone);font-weight:500}
/* Die Buehne ist das Leitartefakt der Seite. Sie liegt als eigenes Objekt auf
   dem Grund, mit Rahmen, Kartenraster und Vignette nach innen. Das Raster
   scrollt nicht mit dem Inhalt, weil es am Container haengt und nicht am SVG. */
.map-scroll{
  position:relative;overflow:hidden;
  border:1px solid var(--rule2);
  background-color:var(--surface-map);
  background-image:linear-gradient(var(--map-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--map-grid) 1px,transparent 1px);
  background-size:48px 48px;
  box-shadow:inset 0 0 110px -30px var(--map-vignette);
  transition:border-color .6s ease,box-shadow .6s ease;
}
.map-svg{display:block;width:100%;height:auto}

/* SVG-Zustände */
.layer{transition:opacity .4s ease,filter .5s ease}
.layer .ink{fill:none;stroke:var(--dim)}
.layer .fillx{fill:var(--dim)}
.layer text{fill:var(--dim);font-family:var(--mono);font-size:var(--fs-svg);letter-spacing:.05em}
.layer.is-unlocked{opacity:.62}
.layer.is-active{opacity:1}
.layer.is-active .ink{stroke:var(--cyan)}
.layer.is-active .fillx{fill:var(--cyan)}
.layer.is-active text{fill:var(--cyan)}
.layer.is-finale{opacity:1}
.layer.is-finale .ink{stroke:var(--gold)}
.layer.is-finale text{fill:var(--gold)}
.layer.is-locked,.layer:not(.is-active):not(.is-unlocked):not(.is-finale){opacity:0;filter:none}
.conn{stroke:var(--cyan);stroke-width:1.5;stroke-dasharray:4 5;opacity:0;fill:none}
.layer.is-active .conn{opacity:.75;stroke-width:2}
.layer.is-unlocked .conn{opacity:.34}
.mapaxis{stroke:var(--rule);stroke-width:1.5;fill:none}
.mapaxis-strong{stroke:var(--rule2);stroke-width:2.5;fill:none}
.colhead{fill:var(--muted);font-family:var(--mono);font-size:var(--fs-svg-head);letter-spacing:.13em}
.pricelbl{fill:var(--muted);font-family:var(--mono);font-size:var(--fs-svg);letter-spacing:.05em}
/* Preis-Ticks statt Platzhalter. Sie fuehren vom Kurznamen zur Achse und
   nehmen die Farbe der Ebene an, zu der sie gehoeren. */
.pricetick{stroke:var(--rule2);stroke-width:1.6;fill:none}
.price-step{transition:opacity .3s ease}
.price-step.is-locked,.key-step.is-locked,.price-step:not(.is-active):not(.is-unlocked):not(.is-finale),.key-step:not(.is-active):not(.is-unlocked):not(.is-finale){display:none}
.price-step.is-unlocked,.key-step.is-unlocked{opacity:.7}
.price-step.is-active,.key-step.is-active,.price-step.is-finale,.key-step.is-finale{opacity:1}
.price-step.is-active .pricelbl{fill:var(--cyan)}
.price-step.is-active .pricetick{stroke:var(--cyan)}
.price-step.is-finale .pricelbl{fill:var(--gold)}
.price-step.is-finale .pricetick{stroke:var(--gold)}
.pricetick-poc{stroke-width:2.8}
.layer.is-active .pricetick{stroke:var(--cyan)}
.layer.is-finale .pricetick{stroke:var(--gold)}
.veilnote{font-family:var(--mono);font-size:var(--fs-svg-head);letter-spacing:.13em;fill:var(--muted)}
.veilnote[hidden]{display:none}
@keyframes traceReveal{from{clip-path:inset(100% 0 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.layer.just-opened{animation:traceReveal .9s cubic-bezier(.2,.75,.25,1) both}

/* ---------- Dramaturgie der Buehne: W00 · W04 · W06 ----------
   Drei Punkte der Serie tragen unterschiedliches Gewicht, und die Karte zeigt
   das. Die Zustaende haengen an data-ep und den Klassen, die die Engine ohnehin
   setzt. Kein zusaetzlicher Haken im JavaScript, kein zweiter Zustandsspeicher.

   W00 karge Spur    nackte Linie ohne Leuchten, dafuer traegt das Rueckgrat
   W04 Reveal        staerkster Moment, laufende Verbindung in den Handel hinein
   W06 Gesamtlage    Gold, warm, abgeschlossen */

/* Die aktive Spur leuchtet leicht ueber ihre eigene Linie hinaus. */
.layer.is-active{filter:drop-shadow(0 0 5px var(--cyan-line))}
.layer.is-finale{filter:drop-shadow(0 0 7px var(--gold-line))}

/* W00 bleibt bewusst karg. Am ersten Abend steht nur die Preisachse, und genau
   so soll sie aussehen: eine Linie, kein Ereignis. Statt der Spur traegt hier
   das Rueckgrat der Karte die Betonung. */
.layer[data-ep="W00"].is-active{filter:none}
.map-scroll:has(.layer[data-ep="W00"].is-active) .mapaxis-strong{stroke:var(--cyan-line);stroke-width:3}

/* W04 ist der Punkt, an dem das vorbereitete Optionsbild auf den laufenden
   Handel trifft. Die Buehne selbst nimmt die Farbe auf, die Bruecke laeuft. */
.layer[data-ep="W04"].is-active{filter:drop-shadow(0 0 9px var(--cyan-line))}
.map-scroll:has(.layer[data-ep="W04"].is-active){
  border-color:var(--cyan-line);
  box-shadow:inset 0 0 110px -30px var(--map-vignette),
             inset 0 0 60px -40px var(--cyan),
             0 0 34px -14px var(--cyan-line);
}
@keyframes connFlow{to{stroke-dashoffset:-36}}
.layer[data-ep="W04"].is-active .conn{opacity:.9;stroke-width:2.2;animation:connFlow 2.6s linear infinite}
/* Der Point of Control ist die einzige Linie mit stroke-width 3 in diesem
   Layer. Im Reveal bekommt er zusaetzliches Gewicht. */
.layer[data-ep="W04"].is-active .ink[stroke-width="3"]{stroke-width:3.8}

/* W06 schliesst die Serie. Die Karte wird warm und behaelt es. */
.map-scroll:has(.layer.is-finale){
  border-color:var(--gold-line);
  box-shadow:inset 0 0 110px -30px var(--map-vignette),
             inset 0 0 70px -44px var(--gold),
             0 0 38px -14px var(--gold-line);
}
.map-scroll:has(.layer.is-finale) .colhead{fill:var(--soft)}

/* ---------- Tiefe und Konfluenz ----------
   Die Karte hat eine Mitte: den meistgehandelten Preis. Ein sehr flaches
   Schwerkraftfeld dahinter gibt der Flaeche Tiefe, ohne eine Aussage zu machen.
   Es erscheint erst, wenn W04 offen ist, weil vorher kein Marktprofil auf der
   Karte liegt, zu dem eine Mitte gehoeren koennte. */
.mapglow{opacity:0;transition:opacity 1.1s ease}
.map-scroll:has(.layer[data-ep="W04"]:not(.is-locked)) .mapglow{opacity:1}

/* Konfluenz: zwei Ebenen meinen denselben Preis. Der Knoten markiert die Stelle,
   der auslaufende Ring wiederholt sie im Takt. Beides ist Anzeige, kein Signal. */
.konfluenz{opacity:0;transition:opacity .9s ease}
.map-scroll:has(.layer[data-ep="W04"]:not(.is-locked)) .konfluenz{opacity:1}
.knoten-kern{fill:var(--cyan)}
.knoten-ring{fill:none;stroke:var(--cyan);stroke-width:1.4;
  transform-box:fill-box;transform-origin:center;
  animation:knotenPuls 3.4s cubic-bezier(.25,.6,.3,1) infinite}
.knoten:nth-child(2) .knoten-ring{animation-delay:.5s}
.knoten:nth-child(3) .knoten-ring{animation-delay:1s}
@keyframes knotenPuls{
  0%{transform:scale(.5);opacity:.9}
  70%,100%{transform:scale(1.65);opacity:0}
}
.map-scroll:has(.layer.is-finale) .knoten-kern{fill:var(--gold)}
.map-scroll:has(.layer.is-finale) .knoten-ring{stroke:var(--gold)}

/* ---------- Kartenschluessel ----------
   Die Kurznamen auf der Preisachse sind im SVG klein. Hier stehen sie
   ausgeschrieben in Lesegroesse, damit die Karte keine unaufgeloeste
   Abkuerzung mehr traegt. */
.schluessel{margin-top:18px;border:1px solid var(--rule);background:var(--surface-lage);padding:0}
.schluessel summary{display:flex;align-items:center;min-height:var(--tap);padding:13px 18px;cursor:pointer;font-family:var(--body);font-size:var(--fs-body);font-weight:600;color:var(--bone)}
.schluessel summary::marker{color:var(--cyan)}
.schluessel dl{margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.schluessel dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.schluessel dt{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan);line-height:1.5}
.schluessel dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--soft)}
@media(max-width:520px){
  .schluessel dl>div{grid-template-columns:1fr;gap:2px}
}

/* Sticky Preisachse für Mobile */
.mobile-axis{display:none}

/* Lagefeld: zwei klare Beobachtungsaufträge statt vier konkurrierender Karten. */
.lage{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface-lage)}
.lage>div{padding:16px 18px;border-left:1px solid var(--rule)}
.lage>div:first-child{border-left:0}
.lage span{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;line-height:1.45}
.lage p{margin:0;font-size:var(--fs-body);color:var(--soft);line-height:var(--lh-body)}
.lagestatus{border-bottom:1px solid var(--rule2);padding:13px 18px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.lagestatus b{color:var(--bone);font-weight:500}
.legend{margin-top:14px;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);letter-spacing:.07em;line-height:1.55}
.legend b{color:var(--cyan);font-weight:500}

/* ---------- Seitenspalte ---------- */
.side{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
.status,.question,.pass{border:1px solid var(--rule);background:var(--surface-lage);padding:18px}
.status{border-top:2px solid var(--cyan)}
.status.is-finale{border-top-color:var(--gold)}
.eyebrow{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.status h2{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.08;margin:8px 0}
.status p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--soft);margin:0}
.question>p:not(.guardrail-label):not(.guardrail){font-family:var(--display);font-size:22px;line-height:1.3;margin:9px 0 0}
.question .guardrail-label{margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.question .guardrail{margin:0;font-family:var(--body);font-size:var(--fs-body);font-weight:600;line-height:var(--lh-body);color:var(--soft)}
/* Serienstand: eine kompakte Zeile statt eines unvollständigen Zugangsbereichs. */
.pass{grid-column:1/-1;margin:0;display:grid;grid-template-columns:128px minmax(150px,1fr) minmax(260px,1.3fr);gap:16px;align-items:center;background:var(--surface-lage)}
.pass .eyebrow{margin:0}
.pass .fields{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0}
.pass .fields i{display:block;height:24px;border:1px solid var(--rule2)}
.pass .fields i.on{border-color:var(--cyan);background:var(--cyan-soft)}
.pass .fields i.now{border-color:var(--cyan);background:var(--cyan)}
.pass .now-ch{font-family:var(--mono);font-size:var(--fs-body);margin:0;line-height:1.45}

/* ---------- Etappenmodul (aus Opus) ---------- */
.modul{margin-top:34px}
.modul>.eyebrow{margin-bottom:10px;display:block}
.modul .box{border:1px solid var(--rule);background:var(--e2)}
.modul .row{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:17px 18px;border-bottom:1px solid var(--rule)}
.modul .row:last-child{border-bottom:0}
.modul .row span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:600;line-height:1.5}
.modul .row p{margin:0;font-size:var(--fs-body);color:var(--soft);line-height:var(--lh-body)}

/* Didaktische Referenz im Etappenmodul: das 7-Schichten-Modell.
   Steht nur bei W06 (Gesamtlage) und ist dort die visuelle Auflösung der Serie. */
.schichten{margin:0;padding:18px}
.schichten[hidden]{display:none}
.schichten picture{display:block}
.schichten img{display:block;width:100%;height:auto;max-width:760px;margin:0 auto;border:1px solid var(--rule2)}
.schichten figcaption{max-width:760px;margin:14px auto 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--soft)}
.schichten figcaption b{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}

/* ---------- Finale / Evergreen ---------- */
.finale{margin-top:34px;border:1px solid rgba(212,175,55,.25);padding:22px;background:var(--e2)}
.finale h2{font-family:var(--display);font-size:26px;font-weight:600;margin:6px 0 0;line-height:1.2;color:var(--cyan)}
.finale p{color:var(--soft);max-width:66ch;margin:9px 0 0;font-size:var(--fs-body-lg);line-height:var(--lh-body)}
.finale .kk{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);margin-top:16px;letter-spacing:.05em;line-height:var(--lh-body)}
body[data-phase="evergreen"] .finale{border-color:var(--rule2)}

footer.site{border-top:1px solid var(--rule);margin-top:34px;padding-top:16px;color:var(--muted);font-family:var(--mono);font-size:var(--fs-micro);line-height:1.6;letter-spacing:.06em;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .mast{grid-template-columns:minmax(0,1fr) 220px}
  .modul .row{grid-template-columns:210px 1fr}
}
@media(max-width:820px){
  .side{grid-template-columns:1fr 1fr}
  .pass{grid-column:1/-1}
}
@media(max-width:980px){
  .schluessel dl{grid-template-columns:1fr}
  .map-scroll{overflow-x:auto;overflow-y:hidden}
  .map-svg{width:1120px;max-width:none}
  .mobile-axis{display:block;position:sticky;left:0;z-index:20;width:0;height:0;pointer-events:none}
  .mobile-axis-inner{position:absolute;left:0;top:0;width:120px;height:459px;background:var(--surface-axis);border-right:1px solid var(--rule2)}
  .mobile-axis-inner label{position:absolute;left:12px;transform:translateY(-50%);font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
  .mobile-axis-inner:after{content:"PREIS";position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;color:var(--muted)}
  .map-svg .pricecol{display:none}
}
@media(max-width:720px){
  .shell{padding:18px 16px 30px}
  .mast{grid-template-columns:minmax(0,1fr);row-gap:18px;align-items:start}
  .progress{text-align:left}
  .layout{display:block}
  .stage-meta{display:grid;gap:6px}
  .lage{grid-template-columns:1fr}
  .side{display:block;margin-top:20px}
  .side>*{margin-bottom:20px}
  .pass{display:block}
  .pass .eyebrow{margin-bottom:12px}
  .pass .fields{margin-bottom:12px}
  .modul .row{grid-template-columns:1fr;gap:5px}
  .legend{display:grid;gap:6px}
  .kennung{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .layer.is-locked,.layer:not(.is-active):not(.is-unlocked):not(.is-finale){filter:none;opacity:0}
}

/* Story v2.1: Masterszene, Makro-Kette und Pass-Moment */
.masterszene{margin:.5rem 0 0;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.55;color:var(--soft);max-width:62ch}
.makrokette{margin:.55rem 0 0;font-size:var(--fs-meta);letter-spacing:.09em;color:var(--muted);line-height:1.75;text-transform:uppercase}
.pass-moment{margin:.4rem 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--soft)}
@media (max-width:720px){.makrokette{font-size:var(--fs-micro);letter-spacing:.05em}}

/* ---------- Embed-Betrieb ----------
   Aktiv ueber ?embed=1 oder wenn die Seite in einem Iframe laeuft.
   Der Reiter traegt dann keinen eigenen Seitenrahmen, nur den Inhalt. */
body.is-embed .shell{padding:16px 20px 24px;max-width:none}
body.is-embed .mast{padding-bottom:14px}
body.is-embed footer.site{margin-top:24px}

/* ==================================================================
   Kopfleiste der Hauptseite im Research Lab
   ------------------------------------------------------------------
   Markup und Optik stammen 1:1 aus marketlab.markets. Uebernommen wird
   nur der Kopf, nicht styles.css: deren globale Element- und
   Token-Regeln wuerden die gesamte Buehne des Labs ueberschreiben.
   Statt dessen liegen hier ausschliesslich die Kopf-Selektoren, und die
   Variablen der Hauptseite werden auf die Tokens des Labs gemappt.

   Zum Massstab: die Hauptseite stellt ihre Wurzel auf 140 Prozent und
   staffelt sie ueber die Umbruchpunkte nach unten - ihre rem-Werte
   sind darum groesser als hier, wo 1rem = 16px gilt. Damit die Leiste
   auf beiden Seiten gleich gross aussieht, haengen alle Laengen an
   --navu, das genau diese Staffelung nachbildet. Ein reines Kopieren
   der rem-Werte haette eine sichtbar kleinere Leiste ergeben.
   ================================================================== */
:root{--navu:22.4px}
@media(max-width:1372px){:root{--navu:20px}}
@media(max-width:1064px){:root{--navu:18.4px}}
@media(max-width:768px){:root{--navu:16.96px}}
@media(max-width:588px){:root{--navu:16px}}

.site-nav{
  /* Variablen der Hauptseite auf die Tokens des Labs gelegt. --quiet
     fuehrt das Lab bewusst nicht (Lesefloor der Kernzielgruppe), an
     seine Stelle tritt --muted. */
  --line:var(--rule);
  --line-strong:var(--rule2);
  --control-bg:var(--surface-lage);
  --text:var(--bone);
  --quiet:var(--muted);
  --nav-bg:rgba(var(--bg-rgb),.86);
  --nav-panel-bg:rgba(var(--bg-rgb),.97);
  --wrap:min(1472px,100% - 68px);
  position:fixed;left:0;right:0;top:0;z-index:40;
  background:var(--nav-bg);border-bottom:1px solid var(--line);
  backdrop-filter:blur(1.125rem)}
.nav-inner{width:var(--wrap);height:calc(4.5 * var(--navu));margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:calc(1 * var(--navu))}
.site-nav a{color:inherit;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:calc(1 * var(--navu));
  font-size:calc(.875 * var(--navu));color:var(--muted)}
.nav-links a{white-space:nowrap;transition:color .2s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
/* Der Eintrag der eigenen Seite wird markiert statt verlinkt-wie-jeder-
   andere: sonst sucht der Besucher im Menue nach dem Ort, an dem er
   schon steht. */
.nav-links a[aria-current="page"]{color:var(--cyan)}
.nav-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:calc(2.625 * var(--navu));padding:calc(.5625 * var(--navu)) calc(1 * var(--navu));
  border:1px solid var(--cyan);border-radius:calc(.375 * var(--navu));
  background:var(--cyan);color:var(--on-cyan)!important;font-weight:600}
.nav-side{display:flex;align-items:center;gap:calc(1 * var(--navu))}

.site-nav .ml-brand{
  --ml-brand-accent:var(--cyan);
  --ml-brand-mark-scale:.88;
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--display);font-weight:600;
  font-size:calc(1.25 * var(--navu));line-height:1;letter-spacing:-.01em;
  white-space:nowrap;color:inherit;transition:opacity .14s ease}
.site-nav .ml-brand:hover{opacity:.78}
.site-nav .ml-brand-ctx{align-self:center;margin:0;
  font-family:var(--body);font-weight:500;font-size:calc(.65625 * var(--navu));
  line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Die Hauptseite laesst den Zusatz erst unter 1204px weg. Hier traegt
   die Marke zusaetzlich "Research Lab" und die Leiste dieselben sieben
   Eintraege - gemessen lief sie damit zwischen 1373 und 1440px um bis zu
   78px ueber .nav-inner hinaus. Der Zusatz faellt darum eine Stufe
   frueher weg, oberhalb von 1500px steht er unveraendert. */
@media(max-width:1500px){.site-nav .ml-brand-ctx{display:none}}

.lang-switch{display:inline-flex;flex:0 0 auto;align-items:stretch;
  border:1px solid var(--line-strong);border-radius:calc(.375 * var(--navu));
  overflow:hidden;background:var(--control-bg)}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(2.5 * var(--navu));min-height:calc(2.375 * var(--navu));
  padding:0 calc(.5 * var(--navu));border:0;background:transparent;color:var(--quiet);
  cursor:pointer;font-family:var(--mono);font-size:calc(.75 * var(--navu));line-height:1;
  letter-spacing:.06em;transition:color .2s ease,background .2s ease}
.lang-btn + .lang-btn{border-left:1px solid var(--line)}
.lang-btn:hover{color:var(--text)}
.lang-btn[aria-pressed="true"]{background:var(--cyan-soft);color:var(--cyan)}
.lang-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* Umschalter hell/dunkel. Ein Button statt eines Segmentpaars, sonst
   wird die Zeile mit Marke, Sprache, Theme und Burger auf 360px zu eng.
   Der Zustand steht im aria-label und wandert mit der Sprache mit. */
.site-nav .theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:calc(2.75 * var(--navu));height:calc(2.75 * var(--navu));padding:0;
  min-height:0;margin:0;
  border:1px solid var(--line-strong);border-radius:calc(.375 * var(--navu));
  background:var(--control-bg);color:var(--muted);cursor:pointer;
  font:inherit;transition:color .2s ease,border-color .2s ease}
.site-nav .theme-toggle:hover{color:var(--text);border-color:var(--cyan-line)}
.site-nav .theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.site-nav .theme-toggle svg{display:block;width:calc(1.125 * var(--navu));height:calc(1.125 * var(--navu))}
/* Dunkles Theme zeigt die Sonne (Ziel: hell), helles den Mond. */
.site-nav .theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .site-nav .theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .site-nav .theme-toggle .icon-sun{display:none}

.nav-toggle{display:none}
@media(max-width:1372px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:calc(2.75 * var(--navu));height:calc(2.75 * var(--navu));flex:0 0 auto;padding:0;
    border:1px solid var(--line-strong);border-radius:calc(.375 * var(--navu));
    background:var(--control-bg);color:var(--text);cursor:pointer}
  .nav-toggle span{position:relative;display:block;width:calc(1.125 * var(--navu));height:2px;
    background:currentColor;transition:background .2s ease}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;
    width:100%;height:100%;background:currentColor;transition:transform .22s ease}
  .nav-toggle span::before{top:calc(-.375 * var(--navu))}
  .nav-toggle span::after{top:calc(.375 * var(--navu))}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(calc(.375 * var(--navu))) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(calc(-.375 * var(--navu))) rotate(-45deg)}
  .nav-side{gap:calc(.625 * var(--navu))}
  .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;
    align-items:stretch;gap:0;box-sizing:border-box;
    padding:calc(.25 * var(--navu)) max(calc(1.25 * var(--navu)),calc((100vw - var(--wrap))/2)) calc(1.25 * var(--navu));
    background:var(--nav-panel-bg);border-bottom:1px solid var(--line);
    backdrop-filter:blur(1.125rem);font-size:calc(1 * var(--navu));
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .site-nav.is-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a:not(.nav-cta){display:flex;align-items:center;min-height:calc(3.25 * var(--navu));
    border-bottom:1px solid var(--line);color:var(--text)}
  .nav-cta{display:inline-flex;width:100%;margin-top:calc(1.125 * var(--navu));min-height:calc(3 * var(--navu))}
}
@media(max-width:588px){
  .lang-btn{min-width:calc(2.25 * var(--navu));min-height:calc(2.75 * var(--navu))}
  .site-nav .theme-toggle{width:calc(2.5 * var(--navu))}
  .nav-inner{height:calc(3.75 * var(--navu))}
  .site-nav{--wrap:min(1472px,100% - 32px)}
}
@media(hover:none){
  .lang-btn:hover{color:var(--quiet)}
  .lang-btn[aria-pressed="true"]:hover{color:var(--cyan)}
  .site-nav .theme-toggle:hover{color:var(--muted);border-color:var(--line-strong)}
}
@media(max-width:720px){.site-nav{--wrap:min(1472px,100% - 32px)}}

/* Die Leiste liegt fest am oberen Rand; der Inhalt braucht den Platz
   darunter. Der Wert folgt derselben Staffelung wie die Leiste. */
.shell{padding-top:calc(4.5 * var(--navu) + 26px)}
@media(max-width:588px){.shell{padding-top:calc(3.75 * var(--navu) + 18px)}}

/* Im Reiter-Betrieb traegt die Elternseite ihre eigene Navigation.
   Eine zweite Leiste im Iframe waere doppelt und wuerde mitscrollen. */
body.is-embed .site-nav{display:none}
body.is-embed .shell{padding-top:14px}

/* ==================================================================
   Fusszeile der Hauptseite im Research Lab
   ------------------------------------------------------------------
   Gleiches Vorgehen wie bei der Kopfleiste: nur die Fusszeilen-
   Selektoren, Variablen der Hauptseite auf die Lab-Tokens gelegt,
   Laengen an --navu statt an rem. Alle Regeln haengen an .site-footer,
   damit die schmale Kontextzeile des Labs (footer.site) unberuehrt
   bleibt - ein blankes footer{} haette beide getroffen.

   Eine Abweichung mit Absicht: die Hauptseite setzt die Fusszeile auf
   0.75rem, auf dem Telefon also 12px. Das Lab fuehrt fuer die
   Kernzielgruppe einen Lesefloor von --fs-micro (13px), unter den
   nichts im Interface faellt. Die Groesse ist darum nach unten
   gedeckelt; auf dem Desktop ergibt sich derselbe Wert wie drueben.
   ================================================================== */
.site-footer{
  --line:var(--rule);
  --line-strong:var(--rule2);
  --text:var(--bone);
  --quiet:var(--muted);
  --wrap:min(1472px,100% - 68px);
  position:relative;z-index:1;
  padding:calc(2.75 * var(--navu)) 0;
  border-top:1px solid var(--line);
  color:var(--quiet);
  font-size:max(var(--fs-micro),calc(.75 * var(--navu)))}
.site-footer .wrap{width:var(--wrap);margin-inline:auto}
.site-footer .footer-grid{display:block}
.site-footer .footer-grid p{margin:0}
.site-footer .footer-notes{display:block}
.site-footer .footer-about{color:var(--muted);line-height:1.62}
/* Der Markenname ist bewusst eine Grafik, zwei Dateien per data-theme
   umgeschaltet. !important schlaegt die generische Bildregel und den
   Inline-Startzustand im Markup; die Hoehe haengt an der Schriftgroesse,
   damit das Logo mitwaechst. */
.site-footer .footer-about-logo{height:1.15em!important;width:auto!important;max-width:none!important;
  display:inline-block!important;vertical-align:-0.18em}
.site-footer .footer-about-logo-light{display:none!important}
:root[data-theme="light"] .site-footer .footer-about-logo-dark{display:none!important}
:root[data-theme="light"] .site-footer .footer-about-logo-light{display:inline-block!important}
.site-footer .footer-legal{
  margin-top:calc(1.5 * var(--navu));
  padding:calc(1.375 * var(--navu)) calc(1.625 * var(--navu));
  border:1px solid var(--line-strong);border-radius:calc(.875 * var(--navu));
  color:var(--muted);font-size:max(var(--fs-micro),calc(.8125 * var(--navu)));
  line-height:1.68;text-wrap:pretty}
.site-footer .footer-legal p+p{margin-top:calc(.75 * var(--navu))}
.site-footer .footer-legal strong{color:var(--text);font-weight:600}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:calc(1.125 * var(--navu));
  margin-top:calc(1.25 * var(--navu));white-space:nowrap}
.site-footer .footer-links a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.site-footer .footer-links a:hover{color:var(--cyan)}
.site-footer .footer-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.site-footer .footer-bottom{margin-top:calc(1.5 * var(--navu));padding-top:calc(1.5 * var(--navu));
  border-top:1px solid var(--line);color:var(--quiet)}
@media(max-width:1064px){
  .site-footer .footer-links{white-space:normal}
}
@media(max-width:588px){
  .site-footer{--wrap:min(1472px,100% - 32px)}
  .site-footer .footer-links{gap:calc(1.5 * var(--navu))}
  .site-footer .footer-links a{display:inline-flex;align-items:center;min-height:var(--tap)}
}
@media(max-width:720px){.site-footer{--wrap:min(1472px,100% - 32px)}}

/* Im Reiter-Betrieb traegt die Elternseite ihre eigene Fusszeile. */
body.is-embed .site-footer{display:none}