/* MarketLab Research Hub · V1.7
   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);will-change:transform}
.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 ---------- */

/* 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)}
.accent-cyan{font-style:normal;font-weight:inherit;color:var(--cyan)}
.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)}
.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}
.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}
.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;justify-content:center;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%)}
.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 ---------- */
/* 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;aspect-ratio:1200/540}

/* 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 TPO POC 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 ----------
   Ein flaches Schwerkraftfeld hinter dem TPO POC gibt der Flaeche Tiefe, ohne
   daraus eine Marktbehauptung abzuleiten. Es erscheint mit Market Profile W04. */
.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. */
/* Der Block stand frueher in einem <details> und war zugeklappt. Dass er
   sich oeffnen laesst, war ihm nicht anzusehen - der Inhalt blieb darum
   meist ungelesen. Jetzt ist es ein normaler Abschnitt: immer offen, keine
   Klappmechanik. Der cyanfarbene Rahmen hebt ihn aus der Flaeche heraus,
   ohne ihm das Gewicht der Buehne daneben zu geben. */
.schluessel{margin-top:18px;border:1px solid var(--cyan-line);background:var(--surface-lage);
  padding:0;box-shadow:0 0 0 3px var(--cyan-soft)}
.schluessel-titel{display:flex;align-items:center;gap:.6em;margin:0;
  min-height:var(--tap);padding:13px 18px;
  font-family:var(--body);font-size:var(--fs-body);font-weight:600;color:var(--bone)}
/* Kleiner Punkt an der Stelle, an der frueher das Klappdreieck stand.
   Er markiert den Anfang der Zeile, ohne eine Bedienung zu versprechen. */
.schluessel-titel::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--cyan)}
.schluessel dl{margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
/* Die Beschriftungsspalte lag bei 96px, solange die Begriffe kurz waren
   (1D MAX, VAH, OI OBEN). "PREISSTRUKTUR" braucht gemessen 144px und lief
   als einzelnes Wort ohne Trennstelle in den Fliesstext hinein. 148px
   traegt den laengsten Begriff; overflow-wrap faengt kuenftige laengere
   Begriffe ab, statt sie wieder ueberlappen zu lassen. */
.schluessel dl>div{display:grid;grid-template-columns:148px 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;overflow-wrap:anywhere}
.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: sieben Etappen, vier Marktspuren.
   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;aspect-ratio:16/9;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:1fr 220px}
  .brand{grid-column:1/-1}
  .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;min-height:44px;display:flex;align-items:center}
  .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}
  .layout{display:block}
  .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:none;text-wrap:balance}
.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 .cmd,body.is-embed .core-inner,body.is-embed .corebus{padding-left:20px;padding-right:20px;max-width:none}
body.is-embed .core{padding-top:24px}
body.is-embed .corebus{padding-bottom:24px}
body.is-embed footer.site{margin-top:24px}


/* ============================================================================
   V1.7 · RESEARCH CORE
   Der Kopf der Seite ist kein Werbebanner, sondern ein Instrument. Er zeigt in
   einem Blick die sieben Etappen, die auf vier getrennten Marktspuren aufbauen.
   Davon sind N geoeffnet. Dieselbe Zustandsquelle wie die Landkarte
   (marathon.config.js), kein zweiter Speicher, keine erfundene Kennzahl.

   Reihenfolge der Bauteile
     .cmd       Kommandoleiste   Marke, Zustand, Sprungziele, Themeschalter
     .core      Kern             Wortspalte links, Zifferblatt rechts
     .corebus   Serienbus        die sieben Etappen als Terminalzeile
     .artefakt  Artefaktrahmen   die Landkarte als datiertes Objekt
   ========================================================================= */

:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --core-max:1540px;
}

/* ---------- Kommandoleiste ----------
   Klebt oben, traegt aber keinen eigenen Grund, solange die Seite ganz oben
   steht. Erst beim Scrollen legt sich der Grund darunter (via .is-stuck). */
.cmd{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  max-width:var(--core-max);margin:0 auto;padding:var(--s3) var(--s8);
  border-bottom:1px solid transparent;
  background:rgba(var(--bg-rgb),0);
  transition:background .25s ease,border-color .25s ease;
}
.cmd.is-stuck{background:rgba(var(--bg-rgb),.9);border-bottom-color:var(--rule);backdrop-filter:blur(10px)}
.cmd .ml-brand{font-size:1.15rem}
.cmd-ctx{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cmd-state{display:inline-flex;align-items:center;gap:var(--s2);margin:0;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.cmd-state i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 0 0 var(--cyan-line)}
.cmd-nav{display:flex;gap:var(--s1);margin-left:auto}
.cmd-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border:1px solid transparent}
.cmd-nav a:hover{color:var(--bone);border-color:var(--rule2)}
.cmd-nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cmd .theme-toggle{margin-top:0;padding:0 var(--s3);white-space:nowrap}
@media(max-width:980px){
  .cmd{padding:var(--s2) var(--s4);gap:var(--s2)}
  .cmd-nav{display:none}
  .cmd-state{margin-left:auto}
}

/* ---------- Kern ---------- */
.core{position:relative;isolation:isolate;padding:var(--s12) 0 0;overflow:clip}
.core-bg{position:absolute;inset:-8% -6% auto auto;width:min(62%,860px);z-index:-1;pointer-events:none}
.core-bg img{width:100%;height:auto;display:block;opacity:.30;
  filter:saturate(.9) contrast(1.05);
  will-change:transform;
  -webkit-mask-image:radial-gradient(52% 52% at 60% 40%,#000 10%,transparent 74%);
          mask-image:radial-gradient(52% 52% at 60% 40%,#000 10%,transparent 74%)}
/* Scrim nach links: die Wortspalte steht nie auf Bild, sondern auf Grund. */
.core-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--bg-rgb),1) 0%,rgba(var(--bg-rgb),.92) 26%,rgba(var(--bg-rgb),.42) 58%,rgba(var(--bg-rgb),.66) 100%)}
:root[data-theme="light"] .core-bg img{opacity:.16;filter:saturate(.55) brightness(1.35) invert(1)}

.core-inner{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(270px,.72fr);
  gap:var(--s8);align-items:center;
  max-width:var(--core-max);margin:0 auto;padding:0 var(--s8) var(--s8)}
.core-word{min-width:0}
.core h1{font-size:clamp(34px,4.05vw,60px);text-wrap:pretty}
.core-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s8)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 var(--s6);border-radius:3px;border:1px solid var(--cyan);
  background:var(--cyan);color:var(--on-cyan);text-decoration:none;
  font:600 var(--fs-body)/1 var(--body);letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease}
.cta:hover{box-shadow:0 0 26px -8px var(--cyan);transform:translateY(-1px)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.cta-quiet{display:inline-flex;align-items:center;min-height:var(--tap);
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule2);padding-bottom:2px}
.cta-quiet:hover{color:var(--bone);border-bottom-color:var(--cyan)}
.cta-quiet:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- Zifferblatt ----------
   Sieben Boegen auf einem Ring, einer je Abend, in derselben Reihenfolge und
   mit denselben vier Zustaenden wie die Ebenen der Landkarte. Die Mitte traegt
   den Zaehler, den vorher die Kopfleiste trug. */
.core-dial{position:relative;justify-self:center;width:min(100%,420px);margin:0}
.core-dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial-track{fill:none;stroke:var(--rule);stroke-width:7}
.dial-rim{fill:none;stroke:var(--rule);stroke-width:1}
.dial-hub{fill:var(--surface-lage);stroke:var(--rule);stroke-width:1}
.seg-arc{fill:none;stroke:var(--rule2);stroke-width:7}
.seg-tick{stroke:var(--rule);stroke-width:1.5}
.seg-no{fill:var(--faint);font-family:var(--mono);font-size:15px;text-anchor:middle;dominant-baseline:middle;letter-spacing:.06em}
.core-seg{transition:opacity .3s ease}
.core-seg.is-locked,.core-seg:not(.is-active):not(.is-unlocked):not(.is-finale){opacity:.75}
.core-seg.is-locked .seg-arc,
.core-seg:not(.is-active):not(.is-unlocked):not(.is-finale) .seg-arc{stroke-dasharray:3 7}
.core-seg.is-unlocked .seg-arc{stroke:var(--dim)}
.core-seg.is-unlocked .seg-no{fill:var(--muted)}
.core-seg.is-active .seg-arc{stroke:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan-line))}
.core-seg.is-active .seg-tick{stroke:var(--cyan)}
.core-seg.is-active .seg-no{fill:var(--cyan)}
.core-seg.is-finale .seg-arc{stroke:var(--gold);filter:drop-shadow(0 0 7px var(--gold-line))}
.core-seg.is-finale .seg-tick{stroke:var(--gold)}
.core-seg.is-finale .seg-no{fill:var(--gold)}
.dial-count{fill:var(--bone);font-family:var(--mono);font-size:64px;text-anchor:middle}
.dial-of{fill:var(--faint);font-family:var(--mono);font-size:20px;text-anchor:middle;letter-spacing:.1em}
.dial-cap{fill:var(--muted);font-family:var(--mono);font-size:14px;text-anchor:middle;letter-spacing:.17em}
.dial-step{fill:var(--cyan);font-family:var(--mono);font-size:15px;text-anchor:middle;letter-spacing:.17em}
.core-dial figcaption{margin-top:var(--s4);text-align:center}
.dial-chapter{margin:0;font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--bone)}
.dial-next{margin:var(--s2) 0 0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.core-dial .bar{max-width:180px;margin:var(--s3) auto 0}

/* ---------- Serienbus ----------
   Die sieben Etappen als eine Zeile. Terminalsatz, weil hier ein Zustand
   gelesen wird und kein Text: Prompt links, Cursor rechts, Zustand in Farbe. */
.corebus{max-width:var(--core-max);margin:0 auto;padding:0 var(--s8) var(--s12)}
.corebus-rail{display:flex;align-items:stretch;flex-wrap:wrap;
  border:1px solid var(--rule2);background:var(--surface-lage)}
.corebus-prompt{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
  border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.corebus ol{display:flex;flex:1 1 420px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.bus-step{flex:1 1 124px;min-width:0;padding:var(--s3) var(--s3);
  border-right:1px solid var(--rule);display:grid;gap:2px;align-content:center}
.bus-step:last-child{border-right:0}
.bus-step b{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;
  font-weight:500;color:var(--faint);line-height:1.4;white-space:nowrap}
.bus-step span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--faint);opacity:.7;white-space:nowrap}
.bus-step.is-unlocked b{color:var(--soft)}
.bus-step.is-unlocked span{color:var(--muted);opacity:1}
.bus-step.is-active{background:var(--cyan-soft);box-shadow:inset 2px 0 0 var(--cyan)}
.bus-step.is-active b{color:var(--cyan)}
.bus-step.is-active span{color:var(--cyan);opacity:1}
.bus-step.is-finale{background:var(--gold-soft);box-shadow:inset 2px 0 0 var(--gold)}
.bus-step.is-finale b,.bus-step.is-finale span{color:var(--gold);opacity:1}
.corebus-caret{display:flex;align-items:center;padding:0 var(--s4);border-left:1px solid var(--rule)}
.corebus-caret i{width:9px;height:17px;background:var(--cyan);display:block}

/* ---------- Kennung ---------- */
.kennung{margin-top:0;border-top:1px solid var(--rule)}

/* ---------- Artefaktrahmen ----------
   Die Landkarte ist das Leitobjekt der Seite und wird darum wie ein Blatt
   behandelt: Signatur oben, Eckmarken am Rand, Herkunftszeile unten. */
.artefakt{position:relative;isolation:isolate;overflow:clip;padding-top:var(--s6)}
.artefakt-bg{position:absolute;inset:-4% -10%;z-index:-1;pointer-events:none;overflow:hidden}
.artefakt-bg img{width:100%;height:100%;object-fit:cover;opacity:.07;filter:saturate(.5) contrast(1.15);will-change:transform}
.artefakt-bg:after{content:"";position:absolute;inset:0;
  background:radial-gradient(78% 68% at 50% 46%,rgba(var(--bg-rgb),.7),rgba(var(--bg-rgb),.97) 76%)}
:root[data-theme="light"] .artefakt-bg img{opacity:.06;filter:saturate(.4) brightness(1.5) invert(1)}
.artefakt-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.artefakt-no{margin:0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--cyan-line);padding:5px 10px;line-height:1.4}
.artefakt-head h2{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(26px,3.2vw,42px);line-height:1.08;color:var(--bone)}
.artefakt-sub{margin:0;flex:1 1 100%;font-family:var(--mono);font-size:var(--fs-meta);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.5}
/* Eckmarken. Sie sitzen am Blatt, nicht an der Karte, damit sie beim
   waagerechten Scrollen der Karte stehen bleiben. */
.artefakt-body{position:relative;padding:var(--s4)}
.artefakt-body:before,.artefakt-body:after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.artefakt-body:before{top:0;left:0;border-top:1px solid var(--cyan-line);border-left:1px solid var(--cyan-line)}
.artefakt-body:after{bottom:0;right:0;border-bottom:1px solid var(--cyan-line);border-right:1px solid var(--cyan-line)}
.artefakt-prov{margin:var(--s4) 0 0;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);line-height:1.7}
.artefakt-prov b{color:var(--muted);font-weight:500}

/* ---------- Bildband hinter dem Etappenmodul ---------- */
.modul{position:relative;isolation:isolate;overflow:clip}
.band-bg{position:absolute;inset:-6% -10%;z-index:-1;pointer-events:none;overflow:hidden}
.band-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.65) contrast(1.05);will-change:transform}
.band-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.97),rgba(var(--bg-rgb),.62) 45%,rgba(var(--bg-rgb),.97))}
:root[data-theme="light"] .band-bg img{opacity:.06;filter:saturate(.4) brightness(1.5) invert(1)}

/* ---------- Schmale Geraete ---------- */
@media(max-width:1080px){
  .core-inner{grid-template-columns:minmax(0,1fr);gap:var(--s8);padding-bottom:var(--s6)}
  .core-dial{width:min(100%,340px)}
  .core-bg{inset:-4% -20% auto auto;width:min(100%,640px)}
  .core-bg img{opacity:.2}
}
@media(max-width:720px){
  .core{padding-top:var(--s6)}
  .core-inner,.corebus{padding-left:var(--s4);padding-right:var(--s4)}
  .core h1{font-size:clamp(34px,9vw,44px)}
  .core-act{gap:var(--s3)}
  .cta{width:100%}
  .corebus ol{flex-direction:column}
  .bus-step{border-right:0;border-bottom:1px solid var(--rule)}
  .corebus-caret{display:none}
  .artefakt-body{padding:var(--s2)}
}

/* ---------- Bewegung ----------
   Ein orchestrierter Moment beim Laden: die Kopfzeilen steigen gestaffelt auf,
   die Boegen des Zifferblatts zeichnen sich, der Bus laeuft von links durch.
   Jeder Einzelschritt bleibt unter 300 ms, die Staffelung traegt den Rest. */
@media(prefers-reduced-motion:no-preference){
  @keyframes coreRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes dialDraw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
  @keyframes busIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  @keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
  @keyframes corePulse{0%{box-shadow:0 0 0 0 var(--cyan-line)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .core-word>*{animation:coreRise .26s cubic-bezier(.2,.75,.25,1) both}
  .core-word>*:nth-child(1){animation-delay:.05s}
  .core-word>*:nth-child(2){animation-delay:.12s}
  .core-word>*:nth-child(3){animation-delay:.19s}
  .core-word>*:nth-child(4){animation-delay:.26s}
  .core-word>*:nth-child(5){animation-delay:.33s}
  .core-dial{animation:coreRise .26s cubic-bezier(.2,.75,.25,1) .18s both}
  .core-seg .seg-arc{stroke-dasharray:140;animation:dialDraw .28s ease-out both}
  .core-seg.is-locked .seg-arc,
  .core-seg:not(.is-active):not(.is-unlocked):not(.is-finale) .seg-arc{stroke-dasharray:3 7;animation:none}
  .core-seg[data-ep="W00"] .seg-arc{animation-delay:.34s}
  .core-seg[data-ep="W01"] .seg-arc{animation-delay:.40s}
  .core-seg[data-ep="W02"] .seg-arc{animation-delay:.46s}
  .core-seg[data-ep="W03"] .seg-arc{animation-delay:.52s}
  .core-seg[data-ep="W04"] .seg-arc{animation-delay:.58s}
  .core-seg[data-ep="W05"] .seg-arc{animation-delay:.64s}
  .core-seg[data-ep="W06"] .seg-arc{animation-delay:.70s}
  .bus-step{animation:busIn .22s ease-out both}
  .bus-step:nth-child(1){animation-delay:.46s}
  .bus-step:nth-child(2){animation-delay:.52s}
  .bus-step:nth-child(3){animation-delay:.58s}
  .bus-step:nth-child(4){animation-delay:.64s}
  .bus-step:nth-child(5){animation-delay:.70s}
  .bus-step:nth-child(6){animation-delay:.76s}
  .bus-step:nth-child(7){animation-delay:.82s}
  .corebus-caret i{animation:caretBlink 1.15s steps(1,end) .9s infinite}
  .cmd-state i{animation:corePulse 2.6s ease-out infinite}
}

/* Artefaktrahmen ist Rasterkind von .layout und braucht denselben Schrumpfschutz wie .stage */
.artefakt{min-width:0}
/* ==================================================================
   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)}
/* Breite der Kopfleiste im waagerechten Betrieb.
   Der Grundwert oben deckelt bei 1472px, weil er am Inhaltsraster des
   Labs haengt (.shell, 1540px minus 34px Rand). Die Startseite deckelt
   ihre Leiste dagegen bei 80 Einheiten und laesst sie bis dorthin
   mitwachsen: auf einem 1920er Schirm traegt sie 1792px, das Lab nur
   1472px - bei gleichem Menue und zusaetzlich "Research Hub" in der
   Marke. Genau daher wirkte dieselbe Leiste im Lab zusammengedrueckt.
   Oberhalb des Umbruchpunkts gilt darum die Formel der Startseite;
   darunter bleibt alles unberuehrt, weil dort das Klappmenue liegt,
   dessen Innenabstand ebenfalls an --wrap haengt. */
@media(min-width:1373px){
  .site-nav{--wrap:min(calc(80 * var(--navu)),calc(100% - 2.5 * var(--navu)))}
}
/* Unmittelbar oberhalb des Umbruchpunkts ist die waagerechte Leiste am
   knappsten: bei 1373px stehen 1317px zur Verfuegung, die englische
   Fassung braucht mehr. Gemessen laeuft sie dort ueber .nav-inner
   hinaus - auf der Startseite uebrigens genauso. In diesem schmalen
   Band gehen die Zwischenraeume im Menue darum auf 0.75 Einheiten
   zurueck; ab 1393px steht wieder die volle Einheit. */
@media(min-width:1373px) and (max-width:1392px){
  .site-nav .nav-links{gap:calc(.75 * var(--navu))}
}
.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 Hub" und die Leiste dieselben sieben
   Eintraege; der Zusatz kostet gemessen 164px. Er faellt darum eine
   Stufe frueher weg. Die Schwelle liegt bei 1560px statt 1500px: erst
   ab dort traegt die Leiste in der englischen Fassung Marke, Zusatz,
   Menue und Schalter nebeneinander, ohne ueber .nav-inner zu laufen. */
@media(max-width:1560px){.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. In v1.7 beginnt die Seite mit der randlosen Kernflaeche und
   nicht mit .shell - der Abstand haengt darum an <main>, sonst laege die
   Leiste ueber dem Kopfbild. Der Wert folgt derselben Staffelung wie die
   Leiste selbst. */
main{padding-top:calc(4.5 * var(--navu))}
@media(max-width:588px){main{padding-top:calc(3.75 * var(--navu))}}

/* 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 main{padding-top:0}

/* ==================================================================
   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}