/* ==================================================================
   MarketLab - Seite "Kostenfreier Mitgliederbereich"
   ------------------------------------------------------------------
   Zusammengefuehrt aus den beiden Entwuerfen vom 30.09.2026:
     04 Sternkarte  - Sternbild des Zeichens, Angebotsraster,
                      Weekly-Auszug, Wochenvideos mit YouTube-Hinweis
     05 Space       - schwebende Titelbilder, Landkarte mit Route,
                      Hefte, Werkzeuge mit Bild, Bezahlmitgliedschaft

   Laedt NACH styles.css. Kopfzeile, Fusszeile, Sprach- und Theme-
   Schalter kommen unveraendert aus styles.css/script.js; diese Datei
   gestaltet nur den Inhalt zwischen den beiden.

   Alle Klassen tragen das Praefix mb-, damit nichts mit den Regeln der
   Startseite (.hero, .btn, .section ...) kollidiert.

   Zwei Arten von Flaechen:
     Nacht   Hero, Ueberblick, Landkarte, Bezahlmitgliedschaft und
             Abschluss. Bleiben in beiden Themes dunkel, wie die
             Medienpanels der Startseite ("Dunkle Inseln").
     Papier  Hefte, Videos, Werkzeuge, Vertrauen. Folgen dem Theme
             ueber die Tokens aus styles.css (--bg, --panel, --text,
             --muted, --cyan, --line). Im hellen Theme sieht das aus
             wie die Entwuerfe, im dunklen wird das Papier zur Nacht.

   Groessen stehen bewusst in px statt rem: styles.css skaliert die
   Wurzelschrift je nach Breite auf 100 bis 140 %. Die Entwuerfe sind
   auf 100 % gebaut und wuerden sonst um bis zu 40 % aufgeblasen.
   ================================================================== */

:root{
  --mb-night:#050607;
  --mb-night-2:#0d1215;
  --mb-bone:#ebe9e5;
  --mb-muted:#b4bec1;
  --mb-cyan:#00cfff;
  --mb-on-cyan:#041013;
  --mb-mint:#9ce2c3;
  --mb-gold:#d4af37;

  /* Papierflaechen: im dunklen Theme dunkel */
  --mb-gold-ink:#d4af37;
  --mb-card-shadow:0 30px 70px -25px rgba(0,0,0,.7);
  --mb-dawn:linear-gradient(to bottom,var(--mb-night),var(--bg));
  --mb-dusk:linear-gradient(to bottom,var(--bg),var(--mb-night));

  --mb-serif:"Roboto Serif",Georgia,"Times New Roman",serif;
  --mb-sans:Aptos,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mb-wrap:min(1760px,100% - 2*clamp(16px,4vw,110px));
  --mb-fs:clamp(16px,.35vw + 14.4px,21.6px);
}
[data-theme="light"]{
  --mb-gold-ink:#8c6d1f;
  --mb-card-shadow:0 30px 70px -25px rgba(21,26,33,.35);
  --mb-dawn:linear-gradient(to bottom,var(--mb-night),#2a3134 38%,#c9cdc9 78%,var(--bg));
  --mb-dusk:linear-gradient(to bottom,var(--bg),#c9cdc9 22%,#2a3134 62%,var(--mb-night));
}

.mb-page{font:400 var(--mb-fs)/1.6 var(--mb-sans);-webkit-font-smoothing:antialiased}
.mb-page img{height:auto}
.mb-wrap{width:var(--mb-wrap);margin-inline:auto}
/* Sprungziele nicht unter der festen Kopfzeile verstecken */
.mb-page [id]{scroll-margin-top:calc(4.5rem + 16px)}
html[data-motion="off"]{scroll-behavior:auto}

.mb-night{background:var(--mb-night);color:var(--mb-bone)}
.mb-night :focus-visible{outline-color:var(--mb-cyan)}

/* ---------- Grundbausteine ---------- */
.mb-btn{display:inline-flex;align-items:center;gap:.6em;border-radius:999px;padding:.85em 1.7em;font-weight:600;
  font-family:var(--mb-sans);text-decoration:none;cursor:pointer;border:0;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.mb-btn:hover{transform:translateY(-2px)}
.mb-btn-white{background:#fff;color:#0a0c0d}
.mb-btn-white:hover{box-shadow:0 0 0 6px rgba(255,255,255,.12),0 12px 40px -10px rgba(0,207,255,.6)}
.mb-btn-cyan{background:var(--mb-cyan);color:var(--mb-on-cyan)}
.mb-btn-cyan:hover{box-shadow:0 12px 40px -10px rgba(0,207,255,.7)}
.mb-btn-ink{background:var(--text);color:var(--bg)}
.mb-btn-ink:hover{background:var(--cyan);color:var(--on-cyan)}
.mb-btn-line{color:var(--mb-bone);border:1px solid rgba(235,233,229,.3);background:none}
.mb-btn-line:hover{border-color:var(--mb-bone)}

.mb-kicker{font-size:.76em;letter-spacing:.16em;text-transform:uppercase;font-weight:650;margin:0 0 .9em;color:var(--cyan)}
.mb-night .mb-kicker{color:var(--mb-cyan)}
.mb-page h2{font-family:var(--mb-serif);font-weight:500;font-size:clamp(30px,2.7vw,64px);line-height:1.08;
  letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
.mb-page h3{font-family:var(--mb-serif);font-weight:560;font-size:clamp(20px,1.3vw,30px);line-height:1.2;margin:.1em 0 .45em}
.mb-sub{color:var(--muted);max-width:44em;margin:0 0 clamp(28px,3vw,56px)}
.mb-night .mb-sub{color:var(--mb-muted)}

.mb-tag{display:inline-block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--cyan);
  background:var(--cyan-soft);border-radius:999px;padding:.3em .8em}
.mb-tag.gold{color:var(--mb-gold-ink);background:rgba(212,175,55,.14)}
.mb-night .mb-tag{color:var(--mb-cyan);background:rgba(0,207,255,.1)}
.mb-night .mb-tag.gold{color:var(--mb-gold);background:rgba(212,175,55,.12)}

.mb-facts{display:flex;gap:clamp(20px,2.4vw,60px);margin:0 0 2em;flex-wrap:wrap}
.mb-facts div{font-size:.8em;color:var(--mb-muted)}
.mb-facts b{display:block;font-family:var(--mb-serif);font-weight:500;font-size:clamp(29px,2.2vw,51px);color:var(--mb-bone);line-height:1}

/* Dekorative Etiketten an Bildern */
.mb-chip{position:absolute;display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;font-weight:600;
  font-size:clamp(12.5px,.55vw + 8px,21.6px);padding:.35em .8em;border-radius:10px;background:var(--c);color:var(--cc,#0a0c0d);
  right:var(--cr,auto);left:var(--cl,auto);bottom:var(--cb,-1.1em);top:var(--ct,auto);transition:transform .3s;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.mb-chip svg{width:.95em;height:.95em;position:absolute;left:-.7em;top:-.7em;fill:var(--c);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
/* Etikett links unten am Bild: Pfeil oben rechts, zeigt nach oben rechts aufs Bild */
.mb-chip--tr svg{left:auto;right:-.7em;transform:scaleX(-1)}
/* Laengere Etiketten (Weekly, Desk) brechen auf zwei Zeilen um und sind
   links im Bild verankert - so wachsen sie nicht ueber den Rand oder in die
   Ueberschrift, und der Pfeil oben links zeigt aufs Bild. */
.mb-chip--wrap{white-space:normal;width:max-content;max-width:10.5em;line-height:1.25;padding:.45em .8em}

/* ==================================================================
   1 HERO: Sternfeld mit schwebenden Titelbildern (Entwurf 05)
   ================================================================== */
.mb-hero{position:relative;isolation:isolate;height:max(100svh,760px);overflow:hidden;
  background:radial-gradient(70% 60% at 50% 55%,#0c1316 0%,var(--mb-night) 70%);--mx:0;--my:0}
.mb-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.mb-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 30% at 50% 55%,rgba(5,6,7,.78),transparent 75%)}
/* Buehne beginnt unter der festen Kopfzeile */
.mb-stage{position:absolute;inset:4.5rem 0 0 0}

.mb-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,800px);text-align:center;z-index:3}
.mb-center .mb-kicker{color:var(--mb-muted);letter-spacing:.2em}
.mb-hero h1{font-family:var(--mb-serif);font-weight:400;font-size:clamp(38px,4.2vw,102px);line-height:1.05;
  letter-spacing:-.02em;margin:0 0 .4em;text-wrap:balance;max-width:none;color:var(--mb-bone)}
.mb-hero h1 em{font-style:normal;color:var(--mb-cyan)}
.mb-lead{color:#dfe3e2;font-size:1.06em;max-width:36em;margin:0 auto 1.8em}
.mb-lead strong{color:#fff;font-weight:600}
.mb-cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.mb-micro{margin:1.1em 0 0;font-size:.82em;color:var(--mb-muted)}

.mb-float{position:absolute;z-index:2;display:block;text-decoration:none;width:var(--w);left:var(--x);top:var(--y);
  transform:translate(calc(var(--mx) * var(--d) * -1px),calc(var(--my) * var(--d) * -1px))}
.mb-bob{position:relative;animation:mb-bob var(--t,9s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes mb-bob{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
html[data-motion="off"] .mb-bob{animation:none}
.mb-face{margin:0;border-radius:10px;overflow:hidden;transform:rotate(var(--r));background:#111;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.mb-face img{width:100%}
.mb-float:hover,.mb-float:focus-visible{z-index:4}
.mb-float:hover .mb-face,.mb-float:focus-visible .mb-face{transform:rotate(0) scale(1.07);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,207,255,.5),0 0 60px -10px rgba(0,207,255,.45)}
.mb-float:hover .mb-chip{transform:translate(4px,-4px)}
.mb-float:hover .mb-chip--tr{transform:translate(-4px,-4px)}

/* Schalter fuer Bewegung, unten links in der Buehne */
.mb-motion{position:absolute;left:clamp(16px,4vw,110px);bottom:clamp(16px,2.4vw,40px);z-index:5;
  background:rgba(5,6,7,.45);border:1px solid rgba(235,233,229,.25);color:var(--mb-bone);border-radius:999px;
  padding:.45em 1em;font:500 .8em var(--mb-sans);cursor:pointer;display:inline-flex;gap:.5em;align-items:center}
.mb-motion:hover{border-color:var(--mb-bone)}
.mb-motion i{width:.55em;height:.55em;border-radius:50%;background:var(--mb-cyan);box-shadow:0 0 10px var(--mb-cyan)}
html[data-motion="off"] .mb-motion i{background:var(--mb-muted);box-shadow:none}

/* ==================================================================
   2 UEBERBLICK: Angebotsraster (04) mit Plakat (05)
   ================================================================== */
.mb-overview{padding-block:clamp(60px,6vw,150px) clamp(40px,4vw,100px);
  background:radial-gradient(50% 50% at 15% 40%,rgba(0,207,255,.06),transparent 70%),var(--mb-night)}
.mb-ov-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,3.4vw,90px);align-items:center}
.mb-poster{margin:0;transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mb-poster img{width:100%;border-radius:12px;box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,207,255,.25),0 0 80px -20px rgba(0,207,255,.35)}
.mb-poster:hover{transform:rotate(0) scale(1.02)}
.mb-offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.4vw,30px)}
.mb-card{position:relative;border-radius:16px;padding:clamp(20px,1.8vw,40px);display:flex;flex-direction:column;gap:.2em;
  background:linear-gradient(165deg,#132027,#0a0e10 70%);border:1px solid rgba(235,233,229,.1);
  text-decoration:none;color:inherit;transition:transform .3s,border-color .3s}
.mb-card:hover,.mb-card:focus-visible{transform:translateY(-4px);border-color:rgba(0,207,255,.45)}
.mb-card .mb-tag{align-self:flex-start;margin-bottom:.6em}
.mb-card p{margin:0;color:var(--mb-muted)}
.mb-card .mb-more{margin-top:auto;padding-top:1em;font-size:.85em;color:var(--mb-cyan)}
.mb-card.wide{grid-column:span 2}

/* ==================================================================
   3 KURS: Landkarte mit Route (05)
   ================================================================== */
.mb-map-sec{padding-block:clamp(50px,6vw,150px) clamp(60px,6vw,150px);
  background:radial-gradient(60% 50% at 70% 50%,rgba(0,207,255,.06),transparent 70%),var(--mb-night)}
.mb-map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:clamp(28px,3.4vw,90px);align-items:center}
.mb-map-sec .mb-lead{margin:0 0 1.6em;color:var(--mb-muted);text-align:left;font-size:1em}
.mb-mods{list-style:none;margin:0 0 2em;padding:0;counter-reset:m;display:grid;gap:.2em}
.mb-mods li{counter-increment:m;display:grid;grid-template-columns:2.2em 1fr auto;align-items:baseline;gap:.4em;padding:.5em .6em;border-radius:8px;
  cursor:default;transition:background .2s;border-bottom:1px solid rgba(235,233,229,.08)}
.mb-mods li::before{content:counter(m);font-family:var(--mb-serif);color:var(--mb-cyan);font-size:1.05em}
.mb-mods li span{color:var(--mb-bone)}
.mb-mods li small{color:var(--mb-muted);font-size:.8em}
.mb-mods li.on{background:rgba(0,207,255,.1)}

.mb-map{position:relative;border-radius:14px;box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(235,233,229,.12)}
.mb-map > img{width:100%;filter:saturate(.9);border-radius:14px}
.mb-map::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;background:radial-gradient(100% 100% at 50% 50%,transparent 60%,rgba(5,6,7,.55))}
/* nur das Karten-SVG - der Pfeil im Etikett des Begleitbuchs ist auch ein SVG */
.mb-map > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.mb-route{fill:none;stroke:var(--mb-cyan);stroke-width:5;stroke-linecap:round;stroke-dasharray:14 14;filter:drop-shadow(0 0 6px rgba(0,207,255,.9))}
/* Die Route zeichnet sich Station fuer Station von 1 bis 7, sobald die
   Karte zu gut einem Drittel im Bild ist. Die gestrichelte Linie selbst
   bleibt unveraendert; eine Maske mit derselben Bahn faehrt sie ab. Die
   Maske ist breiter als die Linie, damit der Schein mit aufgedeckt wird.
   Vorher deckte ein clip-path die Linie von links nach rechts auf - weil
   der Weg ab Station 6 zurueck zur Mitte laeuft, erschien dabei das Stueck
   6 -> 7 vor 4 -> 6 und die Linie wirkte zerstueckelt.
   --len setzt mitglieder.js auf die gemessene Laenge der Bahn. */
.mb-route-reveal{fill:none;stroke:#fff;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
html[data-motion="on"] .mb-map .mb-route-reveal{stroke-dashoffset:var(--len,0);transition:stroke-dashoffset 3.6s cubic-bezier(.45,.05,.35,1)}
html[data-motion="on"] .mb-map.seen .mb-route-reveal{stroke-dashoffset:0}
.mb-pin{cursor:pointer}
.mb-pin circle.halo{fill:rgba(0,207,255,.25);transition:r .25s}
.mb-pin circle.core{fill:var(--mb-cyan);stroke:#fff;stroke-width:3}
.mb-pin text{font:700 30px var(--mb-sans);fill:var(--mb-on-cyan);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mb-pin.on circle.halo{r:52}
html[data-motion="on"] .mb-pin circle.halo{animation:mb-pulse 2.6s ease-in-out infinite}
@keyframes mb-pulse{50%{opacity:.35}}
.mb-pin.last circle.core{fill:var(--mb-gold)}
.mb-map-tip{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 34px));background:rgba(5,6,7,.9);border:1px solid rgba(0,207,255,.45);
  border-radius:10px;padding:.55em .85em;font-size:.85em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.mb-map-tip.on{opacity:1}
.mb-map-tip b{color:var(--mb-bone)}
.mb-map-tip small{color:var(--mb-muted);margin-left:.6em}
.mb-book{position:absolute;right:-2.5%;bottom:calc(-9% - 2cm);width:26%;margin:0;transform:rotate(5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:2}
.mb-book img{width:100%;border-radius:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.mb-book:hover{transform:rotate(0) scale(1.08)}

/* ==================================================================
   Uebergaenge Nacht <-> Papier
   ================================================================== */
.mb-dawn{height:clamp(80px,9vw,200px);background:var(--mb-dawn)}
.mb-dusk{height:clamp(80px,9vw,200px);background:var(--mb-dusk)}

/* ==================================================================
   4 PAPIER: Hefte, Videos (ausgeblendet), Vertrauen
   ================================================================== */
.mb-paper{background:var(--bg);color:var(--text);padding-block:clamp(40px,5vw,120px)}
.mb-paper p{color:var(--muted)}
.mb-paper .mb-block + .mb-block{margin-top:clamp(64px,7vw,160px)}

/* Hefte (05) */
.mb-issues{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,110px);align-items:center}
.mb-stack{position:relative;height:clamp(420px,36vw,900px)}
.mb-sheetimg{position:absolute;width:56%;margin:0;border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:var(--mb-card-shadow),0 0 0 1px var(--line);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mb-sheetimg.a{left:0;top:4%;transform:rotate(-4deg)}
.mb-sheetimg.b{right:0;top:0;transform:rotate(3.5deg)}
.mb-sheetimg:hover{transform:rotate(0) scale(1.03);z-index:2}
.mb-sheetimg img{width:100%}
.mb-sheetimg figcaption{position:absolute;left:.8em;bottom:.8em;background:#151a21;color:#f6f6f3;font-size:.72em;font-weight:600;padding:.3em .7em;border-radius:8px}
.mb-dots{list-style:none;padding:0;margin:1.2em 0 2em;display:grid;gap:.7em}
.mb-dots li{padding-left:1.6em;position:relative;color:var(--muted)}
.mb-dots li b{color:var(--text)}
.mb-dots li::before{content:"";position:absolute;left:0;top:.62em;width:.6em;height:.6em;border-radius:50%;background:var(--cyan)}


/* Wochenvideos (04 + 05) */
.mb-videos{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,72px);align-items:end}
.mb-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,32px)}
.mb-days div{border-top:3px solid var(--cyan);padding-top:.8em}
.mb-days small{display:block;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--mb-gold-ink);font-weight:650}
.mb-days span{font-family:var(--mb-serif);font-size:clamp(19px,1.3vw,30px);color:var(--text)}

/* Werkzeuge (05, mit Etiketten aus 04) */
.mb-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.4vw,32px)}
.mb-tool{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mb-tool .img{aspect-ratio:16/9;overflow:hidden;background:#0b0f11}
.mb-tool .img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.mb-tool:hover .img img{transform:scale(1.04)}
.mb-tool .t{padding:clamp(18px,1.6vw,34px)}
.mb-tool .mb-tag{margin-bottom:.7em}
.mb-tool p{margin:0}
.mb-deadline{margin:clamp(16px,1.4vw,32px) 0 0;background:rgba(212,175,55,.12);border:1px solid rgba(197,155,39,.45);border-radius:14px;padding:1em 1.3em}
.mb-paper .mb-deadline{color:var(--text)}
.mb-deadline b{color:var(--mb-gold-ink)}

/* Vertrauen und Archiv (neu: Siegel, Portraets, Marathon) */
.mb-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2vw,44px)}
.mb-seal{width:clamp(110px,9vw,190px)}
.mb-score{font-family:var(--mb-serif);font-size:clamp(32px,2.6vw,58px);line-height:1;color:var(--text);margin:0 0 .15em}
.mb-link{color:var(--cyan);font-weight:600;text-decoration:none}
.mb-link:hover{text-decoration:underline;text-underline-offset:3px}
.mb-archive{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(16px,2vw,44px);align-items:center;padding:0;overflow:hidden}
/* Bild ungeschnitten: es traegt unten links seinen eigenen Titel */
.mb-archive .img{display:block;align-self:stretch;display:flex;align-items:center;background:#0b0f11;overflow:hidden}
.mb-archive .img img{width:100%;transition:transform .6s}
.mb-archive:hover .img img{transform:scale(1.03)}
.mb-archive .t{padding:clamp(20px,2vw,44px) clamp(20px,2vw,44px) clamp(20px,2vw,44px) 0}
.mb-archive .links{display:flex;flex-wrap:wrap;gap:.6em 1.4em;margin-top:1.2em}

/* ==================================================================
   5 BEZAHLMITGLIEDSCHAFT (05)
   ================================================================== */
.mb-bm{position:relative;overflow:hidden;padding-block:clamp(60px,7vw,170px);
  background:radial-gradient(60% 50% at 85% 10%,rgba(212,175,55,.09),transparent 70%),radial-gradient(50% 50% at 10% 60%,rgba(0,207,255,.07),transparent 70%),var(--mb-night)}
.mb-bm .mb-kicker{color:var(--mb-gold)}
.mb-bm-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,100px);align-items:end;margin-bottom:clamp(40px,4vw,90px)}
.mb-bm-head h2{font-size:clamp(35px,3.6vw,86px);margin:0}
.mb-bm-head h2 em{font-style:normal;color:var(--mb-cyan)}
.mb-bm-head p{color:var(--mb-muted);margin:0}
.mb-live{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,90px);align-items:center}
.mb-screen{position:relative;border-radius:14px;padding:10px;background:linear-gradient(160deg,#1a2328,#0b0f11);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(235,233,229,.1)}
.mb-screen > img:first-child{width:100%;border-radius:8px}
.mb-onair{position:absolute;left:24px;top:24px;display:inline-flex;align-items:center;gap:.5em;background:#c62828;color:#fff;font-weight:700;
  font-size:.75em;letter-spacing:.14em;padding:.35em .8em;border-radius:6px}
.mb-onair i{width:.6em;height:.6em;border-radius:50%;background:#fff}
html[data-motion="on"] .mb-onair i{animation:mb-blink 1.4s infinite}
@keyframes mb-blink{50%{opacity:.2}}
.mb-checks{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.mb-checks li{display:grid;grid-template-columns:1.6em 1fr;gap:.6em;color:var(--mb-muted)}
.mb-checks li::before{content:"";width:1.1em;height:1.1em;margin-top:.25em;border-radius:50%;background:var(--mb-cyan);box-shadow:inset 0 0 0 .28em #0b1418}
.mb-checks b{color:var(--mb-bone);font-weight:600}
.mb-bm h3.mb-sec{font-weight:500;font-size:clamp(24px,1.9vw,45px);margin:clamp(56px,6vw,140px) 0 .3em}
.mb-world{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,36px)}
.mb-course{position:relative;border-radius:16px;padding:clamp(22px,2vw,44px);min-height:clamp(260px,17vw,420px);display:flex;flex-direction:column;
  background:linear-gradient(165deg,#132027,#0a0e10 70%);border:1px solid rgba(235,233,229,.1);overflow:hidden;transition:transform .35s,border-color .35s}
.mb-course:hover{transform:translateY(-6px);border-color:rgba(0,207,255,.45)}
.mb-course::after{content:"";position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(var(--glow),transparent 65%);opacity:.5;pointer-events:none}
.mb-course .who{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--glowtxt)}
.mb-course h4{font-family:var(--mb-serif);font-weight:500;font-size:clamp(22px,1.6vw,38px);line-height:1.15;margin:.5em 0 .4em;position:relative;z-index:1;padding-right:2.2em}
.mb-course p{color:var(--mb-muted);margin:0 0 1.2em;position:relative;z-index:1}
.mb-course .price{margin-top:auto;display:flex;gap:.8em;align-items:baseline;flex-wrap:wrap;position:relative;z-index:1}
.mb-course .price s{color:var(--mb-muted)}
.mb-course .price b{color:var(--mb-mint)}
.mb-course svg.deco{position:absolute;right:clamp(16px,1.6vw,36px);top:clamp(16px,1.6vw,36px);width:clamp(44px,3.4vw,80px);opacity:.9;z-index:1}
.mb-flag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,2.4vw,60px);align-items:center;margin-top:clamp(16px,1.6vw,36px);
  border-radius:16px;padding:clamp(18px,1.6vw,36px);border:1px solid rgba(212,175,55,.35);background:linear-gradient(90deg,rgba(212,175,55,.08),transparent 60%)}
.mb-flag img{width:clamp(110px,9vw,220px);border-radius:10px;box-shadow:0 20px 40px -15px rgba(0,0,0,.9)}
.mb-flag p{margin:0;color:var(--mb-muted)}
.mb-flag b{color:var(--mb-bone)}
.mb-flag strong{color:var(--mb-gold)}
.mb-price{margin-top:clamp(56px,6vw,140px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,100px);align-items:center;
  border-radius:22px;padding:clamp(28px,3vw,72px);background:linear-gradient(135deg,#1b1a12,#0d0f10 55%);border:1px solid rgba(212,175,55,.45);
  box-shadow:0 0 0 6px rgba(212,175,55,.05),0 40px 120px -40px rgba(212,175,55,.35)}
.mb-amount{font-family:var(--mb-serif);line-height:1}
.mb-amount s{display:block;color:var(--mb-muted);font-size:clamp(19px,1.4vw,32px);margin-bottom:.3em}
.mb-amount b{font-weight:500;font-size:clamp(58px,6vw,144px);color:var(--mb-bone)}
.mb-amount .per{font-family:var(--mb-sans);font-size:clamp(16px,1vw,24px);color:var(--mb-muted);margin-left:.3em}
.mb-amount .codeline{font-family:var(--mb-sans);font-size:clamp(14.5px,.8vw,19px);color:var(--mb-muted);margin-top:1.2em;line-height:2.2}
.mb-code{display:inline-block;border:1.5px dashed var(--mb-gold);color:var(--mb-gold);font-weight:700;letter-spacing:.14em;padding:.4em .9em;border-radius:8px;margin-left:.4em;line-height:1}
.mb-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em clamp(16px,2vw,48px);margin:0 0 1.8em}
.mb-terms div{border-top:1px solid rgba(235,233,229,.14);padding-top:.7em;color:var(--mb-muted);font-size:.92em}
.mb-terms b{display:block;color:var(--mb-bone);font-weight:600}
.mb-start{color:var(--mb-muted);font-size:.85em;margin:1em 0 0}
.mb-start b{color:var(--mb-gold)}

/* ==================================================================
   6 ABSCHLUSS: Sternbild des Zeichens (04)
   ================================================================== */
.mb-close{padding-block:clamp(60px,6vw,150px);background:radial-gradient(50% 60% at 30% 50%,#0e171b,var(--mb-night))}
.mb-close-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,120px);align-items:center}
.mb-close h2{max-width:14em}
.mb-close p{color:var(--mb-muted);max-width:32em;margin:0 0 2em}
.mb-const{position:relative;aspect-ratio:1.15;max-height:72vh;width:100%}
.mb-const canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mb-hint{margin:1.6em 0 0;font-size:.8em;color:rgba(180,190,193,.75)}
.mb-hint::before{content:"";display:inline-block;vertical-align:middle;width:2.2em;height:1px;background:currentColor;margin-right:.6em}

/* Sterne mit Beschriftung: echte Buttons, die Linien zeichnet das Canvas */
.mb-nodes{position:absolute;inset:0;pointer-events:none}
.mb-node{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:0;border-radius:50%;
  background:transparent;cursor:pointer;pointer-events:auto;padding:0;color:inherit;font:inherit}
.mb-node .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);width:max-content;max-width:19rem;
  background:rgba(13,18,21,.94);border:1px solid rgba(0,207,255,.35);border-radius:10px;padding:.7em .9em;
  font-size:clamp(13px,.25vw + 11.5px,17px);line-height:1.4;text-align:left;opacity:0;pointer-events:none;transition:.18s;z-index:2}
.mb-node .tip b{display:block;color:var(--mb-bone);font-weight:650;margin-bottom:.15em}
.mb-node .tip span{color:var(--mb-muted)}
.mb-node:hover .tip,.mb-node:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.mb-node.below .tip{bottom:auto;top:calc(100% + 10px)}
.mb-node.left .tip{left:auto;right:-6px;transform:translate(0,6px)}
.mb-node.left:hover .tip,.mb-node.left:focus-visible .tip{transform:translate(0,0)}
.mb-node.right .tip{left:-6px;transform:translate(0,6px)}
.mb-node.right:hover .tip,.mb-node.right:focus-visible .tip{transform:translate(0,0)}

/* ==================================================================
   Schmale Schirme
   ================================================================== */
@media (min-width:1001px){.mb-strip{display:contents}}
@media (max-width:1000px){
  .mb-hero{height:auto;min-height:100svh}
  .mb-stage{position:relative;inset:auto;padding:calc(4.5rem + 28px) 0 64px;display:flex;flex-direction:column}
  .mb-center{position:relative;left:auto;top:auto;transform:none;margin:0 auto;order:2;padding-block:24px}
  .mb-float{position:relative;left:auto;top:auto;transform:none;width:auto}
  .mb-float:not([data-m]){display:none}
  .mb-strip{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;padding:0 20px}
  .mb-strip.top{order:1}
  .mb-strip.bottom{order:3}
  .mb-motion{bottom:16px}
  /* zwei Spalten: das Etikett darf nicht ins Nachbarbild ragen */
  .mb-chip--tr{--cl:-.6em!important}
  .mb-ov-grid,.mb-map-grid,.mb-issues,.mb-videos,.mb-archive,.mb-close-grid,
  .mb-bm-head,.mb-live,.mb-price{grid-template-columns:1fr}
  .mb-poster{max-width:420px;margin-inline:auto}
  .mb-offer,.mb-tool-grid,.mb-days,.mb-world,.mb-terms{grid-template-columns:1fr}
  .mb-card.wide{grid-column:auto}
  .mb-book{right:2%;bottom:calc(-14% - 2cm);width:40%}
  /* Platz fuer das 2 cm tiefer gesetzte Begleitbuch, sonst ragt es in den
     Research-Atlas-Kasten darunter */
  .mb-map{margin-bottom:calc(2cm + 48px)}
  .mb-map-sec{overflow-x:clip}
  .mb-stack{height:110vw}
  .mb-flag{grid-template-columns:1fr}
  /* Im Live-Bild steht oben links das MarketLab-Logo - auf schmalen
     Schirmen wuerde das Schild es verdecken */
  .mb-onair{left:auto;right:18px;top:18px;font-size:.65em}
  .mb-archive .t{padding:0 20px 24px}
  .mb-const{max-width:520px;margin-inline:auto}
}
@media (max-width:560px){
  .mb-map-tip{white-space:normal;width:min(80vw,260px)}
}
@media (prefers-reduced-motion:reduce){.mb-page *{transition:none!important}}

/* ==================================================================
   Neue Gliederung (10.10.2026)
   Bloecke wurden zwischen Nacht- und Papierflaechen umsortiert:
   Research Atlas (Archiv) und Werkzeuge stehen jetzt auf Nacht, die
   Ausbildungswelt hat ein eigenes Kapitel. Damit die Papier-Bausteine
   (.mb-panel, .mb-tool, .mb-deadline) auf Nacht nicht hell bleiben,
   bekommt jede Nachtflaeche die Tokens des dunklen Themes zurueck -
   dasselbe Prinzip wie die "Dunklen Inseln" in styles.css.
   ================================================================== */
.mb-night{
  --bg:var(--mb-night);
  --panel:#101417;
  --text:#f2f4f3;
  --muted:#b4bec1;
  --line:rgba(229,239,241,.13);
  --line-strong:rgba(229,239,241,.24);
  --cyan:#35d4ef;
  --cyan-soft:rgba(53,212,239,.13);
  --cyan-line:rgba(53,212,239,.45);
  --on-cyan:#041013;
  --mb-gold-ink:#d4af37;
  --mb-card-shadow:0 30px 70px -25px rgba(0,0,0,.7);
}
.mb-night .mb-panel p,.mb-night .mb-tool p{color:var(--mb-muted)}
.mb-night .mb-deadline{color:var(--mb-bone)}

/* Research Atlas unter der Landkarte */
.mb-atlas{margin-top:clamp(56px,6vw,140px)}

/* Kapitel Ausbildung: die Ueberschrift steht jetzt ganz oben */
.mb-edu h3.mb-sec{margin-top:0}

/* Werkzeuge innerhalb der Mitgliedschaft */
.mb-bm #werkzeuge{margin-top:clamp(56px,6vw,140px)}

/* Ueber uns: das Personen-Panel steht allein */

/* Etikett der Weekly im Hero: steht 2 cm rechts versetzt. Auf schmalen
   Laptops (bis 1366 px) waere es damit an "Landkarte" in der Ueberschrift
   gestossen - dort nur 1 cm. */
@media (min-width:1001px) and (max-width:1366px){
  .mb-chip--weekly{--cl:calc(1.2em + 1cm)!important}
  /* Trader-Feed-Karte: sonst stoesst sie an "Zugang ueber ..." unter den Knoepfen */
  .mb-feed{--x:14%!important}
}

/* ==================================================================
   Hero: Indikatoren-Paar (11.10.2026)
   Auction Flow und Options Edge liegen in einem gemeinsamen Rahmen,
   leicht versetzt. --x/--y/--w der beiden Karten sind Prozent des
   Rahmens; jede Karte schwebt und reagiert auf die Maus fuer sich.
   ================================================================== */
.mb-pair{position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w) * .62)}
.mb-pair:hover,.mb-pair:focus-within{z-index:4}
@media (max-width:1000px){
  /* im Zwei-Spalten-Raster des Telefons bleibt das Paar ueberlappend */
  .mb-pair{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:1/.62}
  .mb-pair .mb-float{position:absolute;left:var(--x);top:var(--y);width:var(--w)}
  /* Etikett rechts buendig, sonst ragt es ueber den Bildschirmrand */
  .mb-pair .mb-chip--wrap{left:auto;right:-.3em}
}

/* Der Textblock in der Mitte ist breiter als sein Inhalt und lag ueber den
   Raendern der schwebenden Karten (u. a. Auction Flow im Indikatoren-Paar):
   dort liessen sie sich weder ueberfahren noch anklicken. Der Block selbst
   laesst die Maus jetzt durch, Knoepfe und Links darin bleiben bedienbar. */
@media (min-width:1001px){
  .mb-center{pointer-events:none}
  .mb-center a,.mb-center button{pointer-events:auto}
}

/* Research Atlas / Archiv (11.10.2026): Textspalte mit Folgen und
   Handouts gefuellt, damit sie die Hoehe des Bildes nutzt. */
.mb-archive{align-items:stretch}
.mb-archive .t{display:flex;flex-direction:column;justify-content:center}
.mb-arch-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,1.6vw,36px);
  margin:1.4em 0 .4em;padding-top:1.2em;border-top:1px solid var(--line)}
.mb-arch-h{margin:0 0 .6em;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--mb-gold-ink)}
.mb-arch-h b{font-family:var(--mb-serif);font-size:1.9em;letter-spacing:0;color:var(--text);font-weight:500;margin-right:.15em;vertical-align:-.12em}
.mb-eps,.mb-hand{list-style:none;margin:0;padding:0;display:grid;gap:.15em;font-size:.86em}
.mb-eps li{display:grid;grid-template-columns:3.6em 1fr;gap:.4em;align-items:baseline;padding:.28em 0;border-bottom:1px solid var(--line);color:var(--text)}
.mb-eps li:last-child,.mb-hand li:last-child{border-bottom:0}
.mb-eps small{color:var(--cyan);font-variant-numeric:tabular-nums;font-size:.85em}
.mb-hand li{position:relative;padding:.28em 0 .28em 1.3em;border-bottom:1px solid var(--line);color:var(--muted)}
.mb-hand li::before{content:"";position:absolute;left:0;top:.82em;width:.55em;height:.7em;border:1.5px solid var(--cyan);border-radius:2px}
.mb-archive .links{align-items:center;margin-top:1.4em}
.mb-arch-btn{font-size:.9em;padding:.7em 1.4em}
.mb-night .mb-arch-btn{background:var(--mb-bone);color:#0a0c0d}
.mb-night .mb-arch-btn:hover{background:var(--mb-cyan);color:var(--mb-on-cyan)}
@media (max-width:560px){.mb-arch-cols{grid-template-columns:1fr}}
.mb-archive .t > .mb-tag{align-self:flex-start}
/* Mehr Breite fuer die Textspalte - sie ist jetzt der hoehere Teil */
@media (min-width:1001px){.mb-archive{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* Ausgeblendete Bloecke (Attribut hidden) - .mb-videos setzt sonst display:grid */
.mb-page [hidden]{display:none!important}

/* Abstaende zwischen Nacht- und Papierbloecken verkleinert (11.10.2026).
   Vorher kamen Innenabstand unten + Uebergangsband + Innenabstand oben
   bei 2000 px auf rund 400 px Leerraum. Im dunklen Theme ist das Band
   ohnehin kaum sichtbar (Nacht geht in Nacht ueber) und wird schmal. */
.mb-map-sec{padding-bottom:clamp(40px,4vw,90px)}
.mb-paper{padding-top:clamp(24px,3vw,64px)}
.mb-dawn,.mb-dusk{height:clamp(24px,3vw,60px)}
[data-theme="light"] .mb-dawn,[data-theme="light"] .mb-dusk{height:clamp(60px,6vw,120px)}
/* Der ausgeblendete Videoblock war der erste im Papierteil - der Block
   danach behielt sonst seinen Abstand nach oben (bis 160 px). */
.mb-paper .mb-wrap > [hidden]:first-child + .mb-block{margin-top:0}
.mb-map-sec{padding-bottom:clamp(32px,3vw,64px)}

/* Werkzeuge als eigenes Kapitel (11.10.2026) */
.mb-toolwrap #werkzeuge{margin-top:0}
/* Abstand Hefte -> Werkzeuge wie Archiv -> Hefte */
.mb-paper{padding-bottom:clamp(32px,3vw,64px)}
.mb-toolwrap{padding-top:clamp(32px,3.5vw,72px)}

/* Preiskarte: Kopf mit Zeichen und Startdatum (11.10.2026) */
.mb-price-top{grid-column:1/-1;display:flex;align-items:center;gap:clamp(14px,1.4vw,28px);
  padding-bottom:clamp(18px,1.8vw,36px);border-bottom:1px solid rgba(212,175,55,.25)}
.mb-price-icon{flex:none;width:clamp(64px,5.5vw,108px);height:auto;color:var(--mb-gold);
  filter:drop-shadow(0 0 18px rgba(212,175,55,.25))}
.mb-price-from{margin:0;font-family:var(--mb-serif);font-weight:500;font-size:clamp(24px,2.2vw,46px);line-height:1.1;color:var(--mb-gold)}
.mb-price-from strong{font-weight:600;color:var(--mb-bone)}

/* ==================================================================
   MarketLab KOMPASS (11.10.2026): Abbild der ATLAS-Preiskarte in Blau
   ================================================================== */
.mb-price--kompass{--kmp:#6fd3f5;--kmp-2:#3aa9d6;
  margin-top:clamp(20px,2vw,40px);
  background:linear-gradient(135deg,#10273a,#0b1621 55%);border-color:rgba(111,211,245,.45);
  box-shadow:0 0 0 6px rgba(111,211,245,.05),0 40px 120px -40px rgba(58,169,214,.4);
  background-image:linear-gradient(rgba(111,211,245,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(111,211,245,.035) 1px,transparent 1px),linear-gradient(135deg,#10273a,#0b1621 55%);
  background-size:32px 32px,32px 32px,auto}
.mb-price--kompass .mb-price-top{border-bottom-color:rgba(111,211,245,.25)}
.mb-price--kompass .mb-price-icon{color:var(--kmp);filter:drop-shadow(0 0 18px rgba(111,211,245,.3))}
.mb-price--kompass .mb-price-from{color:var(--kmp)}
.mb-price-kicker{margin:0 0 .35em;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--kmp)}
.mb-kmp-name{display:block;font-family:var(--mb-serif);font-size:clamp(19px,1.4vw,30px);color:var(--mb-muted);margin-bottom:.35em}
.mb-kmp-name em{font-style:normal;color:var(--mb-bone)}
.mb-price--kompass .mb-terms div{border-top-color:rgba(111,211,245,.18)}
.mb-price--kompass .mb-start b{color:var(--kmp)}
.mb-btn-kompass{background:var(--kmp);color:#06202d}
.mb-btn-kompass:hover{box-shadow:0 12px 40px -10px rgba(111,211,245,.7)}
.mb-amount .mb-price-kicker{font-family:var(--mb-sans);line-height:1.4;margin-bottom:.6em}
/* Kompass: "Einstieg" deutlicher als Plakette, Preisblock oben buendig */
.mb-price--kompass .mb-amount{align-self:start}
.mb-amount .mb-price-kicker{display:inline-block;font-size:clamp(14px,1vw,19px);letter-spacing:.14em;
  padding:.45em 1em;border-radius:999px;background:rgba(111,211,245,.14);border:1px solid rgba(111,211,245,.45);
  color:var(--kmp);margin-bottom:.9em}
/* ATLAS: gleiche Plakette wie beim Kompass, in Gold; Preisblock oben buendig */
.mb-price:not(.mb-price--kompass) .mb-amount{align-self:start}
.mb-amount .mb-price-kicker--gold{color:var(--mb-gold);background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.45)}

/* ==================================================================
   Ueber uns ueber die volle Breite (11.10.2026)
   ================================================================== */
.mb-trust-wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,32px);align-items:stretch}
.mb-tw-seal{display:flex;flex-direction:column;align-items:flex-start;gap:.2em;
  background:radial-gradient(80% 60% at 0% 0%,rgba(212,175,55,.12),transparent 70%),var(--panel)}
.mb-tw-seal .mb-seal{width:clamp(110px,8vw,170px);margin-bottom:1em}
.mb-tw-label{margin:0;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--mb-gold-ink)}
.mb-tw-seal .mb-score{font-size:clamp(40px,3.4vw,72px);margin:.1em 0 .15em}
.mb-tw-sub{margin:0 0 1.4em}
.mb-tw-btn{margin-top:auto;font-size:.9em;padding:.7em 1.4em}
.mb-night .mb-tw-btn,.mb-tw-btn{background:var(--text);color:var(--bg)}
.mb-tw-person{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.mb-tw-person img{width:clamp(110px,9vw,180px);aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 3px var(--cyan-line),0 20px 40px -18px rgba(0,0,0,.6);margin-bottom:1.2em}
.mb-tw-role{margin:0;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--cyan)}
.mb-tw-person h3{font-size:clamp(26px,2vw,42px);margin:.2em 0 .25em}
.mb-tw-score{margin:0 0 1.4em;color:var(--mb-gold-ink);letter-spacing:.08em}
.mb-tw-score b{color:var(--text);letter-spacing:0;margin-left:.4em;font-weight:600}
.mb-tw-person .mb-link{margin-top:auto}
@media (max-width:1100px){.mb-trust-wide{grid-template-columns:1fr 1fr}.mb-tw-seal{grid-column:1/-1}}
@media (max-width:600px){.mb-trust-wide{grid-template-columns:1fr}}
.mb-tw-person .mb-tw-score{margin-bottom:.9em}
.mb-tw-focus{margin:0 0 1.4em;color:var(--muted);font-size:.92em}

/* LIVE-Schild immer oben rechts: oben links steht im Chartbild das
   MarketLab-Logo (V1.0) */
.mb-onair{left:auto;right:24px}