/* Vega-Magazin für Ratgeber, v4 (4.11.2026: Rollout-Bausteine G1 bis G11, Referenz design/rollout/bausteine-neu.md;
   v4: die Teile der Seiten stehen in eigenen Dateien ratgeber/magazin-<slug>.css, jede Seite lädt nur ihren Teil).
   Nur Seiten mit <body class="vm"> laden diese Datei.
   Basis bleibt styles.css (Manrope, JetBrains Mono, Nav, Fuß). ratgeber.css wird hier NICHT geladen.
   Bauvorlage: design/bauvorlage.md (4.11.2026). Präfix vm-, Welten w-, Kanten k-.
   Zustände: .warte setzt nur magazin.js (Elemente unter dem Fenster, nie bei reduce). Der CSS-Standard ist immer der Endzustand. */
@font-face{font-family:'Clash Grotesk';src:url('/assets/fonts/clash-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('/assets/fonts/clash-grotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}
/* Ersatz bis Clash geladen ist (gleiche Zeilenbreite des H1, mit Musterzeile abgeglichen) */
@font-face{font-family:'Clash Ersatz';src:local('Arial');size-adjust:94%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

@property --m{syntax:'<percentage>';inherits:false;initial-value:100%}
@property --n{syntax:'<number>';inherits:true;initial-value:0}
@property --mk{syntax:'<percentage>';inherits:false;initial-value:100%}

body.vm{
  /* Welten (Flächen) */
  --weiss:#FFFFFF;  --papier:#F2F5FA;  --eis:#E9EFF9;  --himmel:#D6E4FA;
  --vega:#1A5BD1;   /* Fläche mit Text darauf */
  --vega-marke:#1E63D6; /* Logo-Blau, Grafik, Arten-Farbe */
  --koenig:#123FA6; --kork:#C9A06C; --kork-rahmen:#5A3A1E;
  --daemmer-1:#02060F; --daemmer-2:#082457; --daemmer-3:#2B69C4; --glut:#FFB66B;
  --fenster:#0B1422;    /* Bildgrund der Adler-Porträts, gemessen */

  /* Schrift */
  --tinte:#071226;  --text:#2C3B52;  --grau:#51617A;  --grau-himmel:#44546C;
  --link:#164FAE;   --auf-blau:#FFFFFF; --auf-blau-2:#E6EEFF;

  /* Bedeutung: Blau = Marke und Lösung, Amber = Geld und merken, Grün = geprüft, Rot = Risiko */
  --amber:#FFB04A;  --marker:#FFE0B3;  --amber-hell:#FFF1DC; --amber-text:#8A4B00;
  --gruen:#2FD48F;  --gruen-text:#0B7A50; --gruen-hell:#DDF7EA;
  --rot:#FF5A3C;    --rot-text:#C2381C;   --rot-hell:#FCE7E2;  --rot-tief:#9E2A12;
  --de-flaeche:#E3EDFC; --de-text:#0F3D8A; --at-flaeche:#FCE7E2; --at-text:#9E2A12;
  --cyan:#1FC8FF;   /* nur Grafik, nie Text auf hell */
  --linie:#D5DEEB;  --linie-hell:#E6ECF4;

  /* Arten der Anbieter (Arten-Leiste, Monogramme, Weiche, Matrix-Kopf) */
  --art-db:#1E63D6; --art-web:#1FC8FF; --art-dienst:#071226;

  /* Kapitelfarben (Linie am Kapitelkopf, Fahrplan, Schiene, Fortschritt) */
  --k1:#1E63D6; --k2:#FFB04A; --k3:#FF5A3C; --k4:#0F3D8A;
  --k5:#2FD48F; --k6:#1FC8FF; --k7:#123FA6; --k8:#51617A;
  --k9:#0B7A50; /* Tiefgrün, nur Grafik (neuntes Kapitel) */

  /* Schriften */
  --f-text:'Manrope',-apple-system,'Helvetica Neue',sans-serif;
  --f-disp:'Clash Grotesk','Clash Ersatz',var(--f-text);
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Typo-Skala */
  --fs-h1:clamp(40px,5.4vw,84px);      --lh-h1:.98;
  --fs-h1-unter:clamp(21px,2.1vw,34px); --lh-h1-unter:1.15;
  --fs-h2:clamp(32px,3.8vw,56px);      --lh-h2:1.02;
  --fs-kern:clamp(26px,2.8vw,44px);    --lh-kern:1.15;
  --fs-leit:clamp(24px,2.3vw,36px);    --lh-leit:1.2;
  --fs-frage1:clamp(28px,3.2vw,52px);  --fs-frage2:clamp(32px,4.6vw,72px);
  --fs-zahl:clamp(36px,4vw,60px);
  --fs-zahl-s:clamp(28px,2.4vw,40px);
  --fs-ziffer:clamp(96px,11vw,168px);
  --fs-ord:clamp(32px,3vw,48px);
  --fs-kurz:clamp(19px,1.45vw,21px);   --lh-kurz:1.6;
  --fs-text:clamp(18px,1.3vw,20px);    --lh-text:1.68;
  --fs-karte:18px;  --lh-karte:1.55;
  --fs-klein:17px;  --lh-klein:1.5;
  --fs-h1-karte:clamp(36px,4vw,62px); /* H1 auf der Titelkarte (Titelbild-Kopf) */

  /* Raster und Abstände */
  --breite:1344px; --rand:clamp(20px,4vw,56px); --spalt:clamp(16px,2vw,32px);
  --luft:clamp(36px,5.2svh,84px); --nav:74px; --ueber:120px;
  --lese:66ch;

  /* Radien: Bilder höchstens 20 px, nie Kreis */
  --r-s:10px; --r-m:16px; --r-l:22px; --r-bild:20px; --r-pille:999px;

  /* Schatten */
  --sch-karte:0 1px 0 rgba(7,18,38,.04),0 18px 40px -22px rgba(7,18,38,.28);
  --sch-hoch:0 30px 60px -28px rgba(7,18,38,.45);
  --sch-vega:0 30px 60px -30px rgba(26,91,209,.6);
  --sch-schirm:0 44px 90px -34px rgba(2,8,20,.75),0 0 0 1px rgba(255,255,255,.1);

  /* Bewegung */
  --ease:cubic-bezier(.16,1,.3,1); --feder:cubic-bezier(.34,1.56,.64,1); --zug:cubic-bezier(.65,0,.35,1);
  --t-kurz:220ms; --t-mittel:500ms; --t-lang:800ms;

  /* Masken (CSP: img-src data: ist erlaubt) */
  --i-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
  --i-hoerer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-etikett:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4.5A1.5 1.5 0 0 1 4.5 3H12l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E");
  --i-spitze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4l9 8-9 8'/%3E%3C/svg%3E");
  /* v2: Rechenzeichen der Kette, Haken-Siegel der Kacheln, Platzhalter-Zeichen für fehlende Szenenbilder */
  --i-mal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  --i-gleich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 9h14M5 15h14'/%3E%3C/svg%3E");
  --i-siegel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%230B7A50'/%3E%3Cpath d='M8.2 14.6l3.9 3.9 7.7-8.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231E63D6' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='9' width='38' height='30' rx='4'/%3E%3Ccircle cx='17' cy='19' r='4'/%3E%3Cpath d='M7 35l11-11 8 8 6-6 10 10'/%3E%3C/svg%3E");

  background:var(--weiss); color:var(--text); font-family:var(--f-text);
  font-size:var(--fs-text); line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Kleine Fensterhöhen: Abstände per CSS, kein JS (kein Sprung über dem Falz) */
@media (max-height:720px){ body.vm{--luft:clamp(36px,5.5svh,56px);--ueber:90px} }
/* Handy-Layout: nur Hochformat oder bis 640 px, gezoomte Laptops behalten das Desktop-Layout */
@media (max-width:640px),(max-width:1023px) and (orientation:portrait){
  body.vm{--fs-text:18px;--fs-h1:clamp(36px,10vw,42px);--fs-h2:clamp(30px,8.4vw,36px);--nav:64px;--ueber:64px;--fs-h1-karte:clamp(34px,9.4vw,40px)}
}

/* ---------- Grundlage ---------- */
html:has(body.vm){background:#fff;scroll-padding-top:calc(74px + 24px)}
body.vm ::selection{background:var(--marker);color:var(--tinte)}
body.vm :focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
body.vm .w-vega :focus-visible,body.vm .w-koenig :focus-visible,body.vm .w-daemmerung :focus-visible,body.vm .footer :focus-visible{outline-color:#fff}
/* Rücksetzer ohne Gewicht (:where), damit jeder Baustein sie überschreibt */
/* styles.css setzt h1/h2 mit Elementwählern (max-width 17ch/24ch, margin 14px 0 34px, Leuchtschatten). Gleiches Gewicht, spätere Datei gewinnt. */
:where(body.vm main) h1,:where(body.vm main) h2{max-width:none;margin:0;text-shadow:none;font-weight:600}
:where(body.vm main) :where(p,figure,ul,ol){margin:0}
:where(body.vm main) :where(ul,ol){padding:0}
:where(body.vm main) :where(b,strong){font-weight:700}
:where(body.vm) mark{background:none;color:inherit}
:where(body.vm) img{max-width:100%}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:where(body.vm) .rg-link{color:var(--akzent,var(--link));text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .2s}
:where(body.vm) .rg-link:hover{text-decoration-color:currentColor}

/* Nav: Markup und Glas seitenweit gleich, nur der Knopf wird zur hellen Pille */
body.vm .nav,body.vm .footer{color:#EAF1FB}
/* Fuß-Panel (v2, G11): die Regeln von .footer-panel aus styles.css gelten auf allen Magazin-Seiten für .footer,
   das Fuß-Markup bleibt in jeder Seite wie in der Quelle. Werte gleich wie styles.css, der Pilot (footer-panel) bleibt pixelgleich. */
body.vm .footer{z-index:1;padding-top:clamp(44px,7svh,72px);border-top:0;background:linear-gradient(165deg,#0C3E9E 0%,#0A2E76 55%,#07204F 100%)}
body.vm .footer::before{opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 2px,rgba(255,255,255,.02) 2px 5px,rgba(0,0,0,.07) 5px 9px,rgba(255,255,255,.045) 9px 12px),
    radial-gradient(700px 320px at 22% 0%,rgba(120,235,255,.16),transparent 62%)}
body.vm .footer .wrap{position:relative;z-index:2}
body.vm .footer .foot-cta{background:linear-gradient(140deg,rgba(4,16,36,.86),rgba(4,16,36,.7));border-color:rgba(120,235,255,.34)}
body.vm .footer .fcol h4{color:rgba(255,255,255,.6)}
body.vm .footer .fcol a{color:rgba(255,255,255,.8)}
body.vm .footer .fcol a:hover{color:#fff}
body.vm .footer .foot-claim{color:rgba(255,255,255,.72)}
body.vm .footer .ftr{background:rgba(4,16,36,.4);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
body.vm .footer .foot-main,body.vm .footer .foot-bottom{border-color:rgba(255,255,255,.14)}
body.vm .footer .foot-bottom{color:rgba(255,255,255,.6)}
body.vm .footer .wrap{padding-inline:clamp(20px,2vw,28px)}
body.vm .nav.on{background:rgba(7,18,38,.92)}
body.vm .nav-login{background:#fff;color:var(--tinte);border:0;border-radius:999px;padding:9px 18px}
body.vm .nav-login:hover{background:var(--amber);box-shadow:none}

/* ---------- Raster ---------- */
.vm-w{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.vm-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}

/* ---------- Welten ---------- */
.vm-welt{position:relative;padding-block:var(--luft);overflow-x:clip;background:var(--grund);color:var(--schrift)}
.w-weiss {--grund:var(--weiss); --schrift:var(--text);--kopf:var(--tinte);--zweit:var(--grau);       --akzent:var(--link)}
.w-papier{--grund:var(--papier);--schrift:var(--text);--kopf:var(--tinte);--zweit:var(--grau);       --akzent:var(--link)}
.w-himmel{--grund:var(--himmel);--schrift:var(--text);--kopf:var(--tinte);--zweit:var(--grau-himmel);--akzent:var(--link)}
.w-vega  {--grund:var(--vega);  --schrift:#fff;       --kopf:#fff;        --zweit:var(--auf-blau-2); --akzent:#fff}
.w-koenig{--grund:var(--koenig);--schrift:#fff;       --kopf:#fff;        --zweit:#D6E2F7;           --akzent:#fff}
.w-kork  {--grund:radial-gradient(rgba(90,58,30,.08) 1.2px,transparent 1.7px) 0 0/9px 9px,radial-gradient(rgba(255,244,226,.08) 1px,transparent 1.6px) 4px 5px/13px 13px,var(--kork);
          --schrift:var(--tinte);--kopf:var(--tinte);--zweit:var(--tinte);--akzent:var(--tinte)}
.w-daemmerung{--grund:linear-gradient(160deg,var(--daemmer-1) 0%,var(--daemmer-2) 48%,var(--daemmer-3) 100%);
  --schrift:#E3ECF8;--kopf:#fff;--zweit:#C9D6EA;--akzent:#fff}
/* v2 (G6): Minze, hell und frisch. Text 10,0 : 1, Zweittext 5,6 : 1, Links 6,5 : 1. Keine freigestellte Pose auf Minze. */
.w-minze {--grund:var(--gruen-hell);--schrift:var(--text);--kopf:var(--tinte);--zweit:var(--grau);       --akzent:var(--link)}
.w-minze .vm-kap-nr::after{background:var(--gruen-text)}
/* Kanten */
.k-zacken::before{content:"";position:absolute;left:0;right:0;top:-12px;height:13px;background:var(--papier);pointer-events:none;
  -webkit-mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/26px 13px repeat-x;
          mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/26px 13px repeat-x}
.k-ueber{padding-top:calc(var(--luft) + var(--ueber))}
.w-kork{border-block:14px solid var(--kork-rahmen);box-shadow:inset 0 0 60px rgba(52,28,8,.32),inset 0 1px 0 rgba(255,236,206,.18)}

/* ---------- Fortschritt und Schiene ---------- */
.vm-fortschritt{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.vm-fortschritt i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--kf,var(--amber));transition:background-color .3s}
.vm-schiene{display:none}
@media (min-width:1460px){
  .vm-schiene{display:flex;flex-direction:column;align-items:center;gap:12px;position:fixed;right:18px;top:50%;z-index:40;padding:14px 9px;border-radius:999px;
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--sch-karte),0 0 0 1px rgba(7,18,38,.06);
    transform:translate(calc(100% + 30px),-50%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
  .vm-schiene.zeige{transform:translate(0,-50%);opacity:1;pointer-events:auto}
  .vm-schiene a{position:relative;display:grid;place-items:center;width:18px;height:18px}
  .vm-schiene i{width:10px;height:10px;border-radius:3px;background:var(--kf);transition:transform var(--t-kurz) var(--ease)}
  .vm-schiene a.an i,.vm-schiene a.aktiv i,.vm-schiene a[aria-current] i{transform:scale(1.6)}
  .vm-schiene a::after{content:attr(data-name);position:absolute;right:calc(100% + 16px);top:50%;transform:translate(6px,-50%);white-space:nowrap;
    font:600 17px/1 var(--f-text);color:var(--tinte);background:#fff;padding:9px 13px;border-radius:10px;box-shadow:var(--sch-karte);opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s var(--ease)}
  .vm-schiene a:hover::after{opacity:1;transform:translate(0,-50%)}
}

/* ---------- Gemeinsame Teile ---------- */
.vm-mark{background:linear-gradient(var(--marker),var(--marker)) 0 88%/var(--m,100%) .42em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.vm-absatz{max-width:var(--lese);font-size:var(--fs-text);line-height:var(--lh-text);color:var(--schrift);text-wrap:pretty}
.vm-absatz b{color:var(--kopf)}
.vm-quelle{display:flex;gap:12px;align-items:baseline;margin-top:18px;max-width:none;font-size:17px;line-height:1.5;color:var(--zweit)}
.vm-abb-nr{flex:none;font:500 17px/1.5 var(--f-mono);color:var(--kopf);white-space:nowrap}
.vm-ikon{display:inline-block;width:56px;height:56px;flex:none}
.vm-ikon svg{display:block;width:100%;height:100%;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* Kapitelkopf */
.vm-kap{margin-bottom:clamp(22px,3.6svh,40px)}
.vm-kap-nr{display:flex;align-items:center;gap:16px;font:600 var(--fs-ord)/1 var(--f-disp);color:var(--kopf);margin-bottom:clamp(10px,1.6svh,16px)}
.vm-kap-nr::after{content:"";width:56px;height:4px;border-radius:2px;background:var(--kf);transform-origin:0 50%;transition:transform .6s var(--ease) .15s}
.vm-kap.warte .vm-kap-nr::after{transform:scaleX(0)}
.vm-kap h2{max-width:none;font:600 var(--fs-h2)/var(--lh-h2) var(--f-disp);letter-spacing:-.012em;color:var(--kopf);text-wrap:balance;scroll-margin-top:calc(var(--nav) + 24px)}
/* Breite Kapitelköpfe: Nummer hängt links neben der H2, die Farblinie steht unter der Nummer (spart eine Zeile Höhe) */
@media (min-width:860px){
  .vm-kap:not(.vm-stapel-kopf .vm-kap,.vm-abhaken .vm-kap,.vm-fragen-kopf .vm-kap){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,1.3vw,24px);align-items:start;font-size:var(--fs-ord)}
  .vm-kap:not(.vm-stapel-kopf .vm-kap,.vm-abhaken .vm-kap,.vm-fragen-kopf .vm-kap) .vm-kap-nr{flex-direction:column;align-items:flex-start;gap:14px;margin:0;padding-top:calc((var(--fs-h2) * var(--lh-h2) - 1em) / 2)}
  .vm-kap:not(.vm-stapel-kopf .vm-kap,.vm-abhaken .vm-kap,.vm-fragen-kopf .vm-kap) h2{font-size:var(--fs-h2)}
}

/* Verweis-Karte */
.vm-weiter{position:relative;max-width:860px;margin-top:clamp(24px,4svh,40px);padding:20px 76px 20px 26px;background:#fff;border:1px solid var(--linie-hell);border-radius:var(--r-m);
  box-shadow:var(--sch-karte);font-size:19px;line-height:1.55;color:var(--text);transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease)}
.vm-weiter .rg-link{color:var(--link);font-weight:700}
.vm-weiter::after{content:"";position:absolute;right:24px;top:50%;width:28px;height:28px;margin-top:-14px;background:var(--link);
  -webkit-mask:var(--i-pfeil) center/contain no-repeat;mask:var(--i-pfeil) center/contain no-repeat;transition:transform var(--t-kurz) var(--ease)}

/* Knöpfe */
.vm-pille,.vm-pille-rand{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 28px;border-radius:var(--r-pille);font:700 17px/1 var(--f-text);
  cursor:pointer;transition:transform var(--t-kurz) var(--ease),background var(--t-kurz),border-color var(--t-kurz),color var(--t-kurz)}
.vm-pille{background:#fff;color:var(--tinte);border:0}
.vm-pille-rand{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.w-weiss .vm-pille,.w-papier .vm-pille,.w-himmel .vm-pille{background:var(--tinte);color:#fff}
.vm-ring .vm-pille-rand{color:var(--tinte);border-color:rgba(7,18,38,.3);min-height:48px;padding:12px 22px}

/* Stempel (doppelter Rand, höchstens 1° gedreht, nie über einer Zahl) */
.vm-stempel{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:2px solid currentColor;outline:2px solid currentColor;outline-offset:3px;border-radius:8px;
  font:600 22px/1 var(--f-disp);letter-spacing:.01em;white-space:nowrap;transform:rotate(-1deg);
  transition:opacity .35s var(--feder) .9s,transform .35s var(--feder) .9s}
.vm-stempel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vm-stempel.gruen{color:var(--gruen-text)}
.vm-stempel.rot{color:var(--rot-text);font-size:20px;padding:8px 14px}
.vm-stempel.warte,.warte .vm-stempel{opacity:0;transform:rotate(-1deg) scale(1.6)}
.warte .vm-stempel{transition-delay:.6s}

/* Hover nach vorn: nur Karten, Kacheln, Zeilen, Knöpfe */
@media (hover:hover){
  .vm-fahrplan a:hover,.vm-weiter:hover,.vm-steckbriefe tr:hover,.vm-weiche .ast:hover,.vm-band:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--sch-hoch);transition-delay:0s}
  .vm-steckbriefe tr:hover{transform:translateY(-3px) scale(1.01)}
  .vm-weiter:hover::after{transform:translateX(4px)}
  .vm-pille:hover,.vm-pille-rand:hover{transform:translateY(-2px)}
  .vm-pille:hover{background:var(--amber);color:var(--tinte)}
  .w-weiss .vm-pille:hover,.w-papier .vm-pille:hover,.w-himmel .vm-pille:hover{background:var(--vega);color:#fff}
  .vm-pille-rand:hover{background:rgba(255,255,255,.12);border-color:#fff}
  .vm-ring .vm-pille-rand:hover{background:var(--eis);border-color:var(--tinte)}
}

/* ==================================================================
   1 Kopf (Vega-Blau)
   ================================================================== */
.vm-kopf{z-index:2;padding-top:calc(var(--nav) + clamp(14px,3svh,32px));padding-bottom:0;
  background:radial-gradient(38% 58% at 80% 46%,rgba(92,143,234,.95),rgba(92,143,234,0) 72%),
             radial-gradient(50% 60% at 0% 0%,rgba(255,255,255,.07),transparent 70%),var(--vega)}
.vm-kopf .vm-raster{align-items:end}
.vm-kopf-text{grid-column:1/8;grid-row:1;align-self:start;padding-bottom:clamp(22px,3.4svh,36px)}
.vm-pfad{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 clamp(12px,2.2svh,24px);font:600 17px/1.4 var(--f-text);color:var(--auf-blau-2)}
.vm-pfad li+li::before{content:"";display:inline-block;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin:0 14px 2px 10px;opacity:.75}
.vm-pfad a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
.vm-pfad a:hover{text-decoration-color:#fff}
.vm-titel{font-family:var(--f-disp);color:#fff}
.vm-titel b{display:block;font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.012em;text-wrap:balance}
.vm-titel span{display:block;margin-top:.45em;font-weight:500;font-size:var(--fs-h1-unter);line-height:var(--lh-h1-unter);max-width:24em;text-wrap:balance;color:#fff}
body.vm .rg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:clamp(12px,2svh,20px);font:600 17px/1.4 var(--f-text);color:var(--zweit)}
body.vm .rg-meta span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 12px 3px;opacity:.8;vertical-align:middle}
.vm-kennzahlen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(16px,2.6svh,28px);border-top:1px solid rgba(255,255,255,.28)}
.vm-kennzahlen li{display:flex;flex-direction:column;gap:6px;padding:14px 18px 0;border-left:1px solid rgba(255,255,255,.28)}
.vm-kennzahlen li:first-child{padding-left:0;border-left:0}
.vm-kennzahlen b{display:block;font:800 var(--fs-zahl)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.vm-kennzahlen small{font-size:max(17px,.5em);font-weight:600;letter-spacing:0;margin-right:.12em}
.vm-kennzahlen li>span{font:600 17px/1.3 var(--f-text);color:var(--auf-blau-2)}
.vm-roll{overflow:hidden;min-width:1ch}
.vm-roll span{display:block}
.vm-para-chip{display:inline-flex;margin-top:clamp(14px,2.2svh,22px);padding:7px 14px;border-radius:10px;background:rgba(7,18,38,.18);border:1px solid rgba(255,255,255,.22);
  font:500 17px/1.3 var(--f-mono);color:#fff}

/* Fenster: Porträt mit gemessenem Bildgrund. Pose (Phase 2) wird am Pfad erkannt. */
.vm-fenster{position:relative;overflow:hidden;border-radius:var(--r-bild);background:var(--fenster);box-shadow:var(--sch-hoch)}
.vm-fenster img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.vm-kopf-bild{grid-column:8/13;grid-row:1/3;align-self:end;height:min(calc(100svh - var(--nav) - 24px),720px);border-bottom-left-radius:0;border-bottom-right-radius:0;
  box-shadow:0 -30px 70px -30px rgba(2,8,30,.55)}
.vm-kopf-bild img{height:calc(100% + 24px);translate:0 var(--hub,0px)}
.vm-kopf-bild::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 54%,transparent 66%)}
/* Figur (Phase 2): freigestellte Pose, erkannt am Pfad "/pose-". Steht unten auf der Bandkante, nur unten beschnitten. */
.vm-fenster:has(>img[src*="/pose-"]),.vm-schluss-bild:has(>img[src*="/pose-"]){overflow:visible;background:none;box-shadow:none;border-radius:0;clip-path:inset(-400px -400px 0 -400px);isolation:isolate}
.vm-fenster:has(>img[src*="/pose-"])::after,.vm-schluss-bild:has(>img[src*="/pose-"])::after{content:"";position:absolute;top:auto;left:4%;right:4%;bottom:-7%;height:16%;transform:none;animation:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(2,8,20,.42),rgba(2,8,20,0));z-index:-1;pointer-events:none}
.vm-fenster>img[src*="/pose-"],.vm-schluss-bild>img[src*="/pose-"]{object-fit:contain;object-position:50% 100%;-webkit-mask:none;mask:none}
.vm-kopf-bild:has(>img[src*="/pose-"]){height:min(calc(100svh - var(--nav) + 24px),768px)}

/* Kurz gesagt */
.vm-antwort{grid-column:1/9;grid-row:2;position:relative;z-index:2;margin-bottom:calc(-1 * var(--ueber));padding:28px 32px;background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-hoch)}
.vm-antwort p{font:500 var(--fs-kurz)/var(--lh-kurz) var(--f-text);color:var(--text);text-wrap:pretty}
.vm-antwort p>b:first-child{display:inline-block;padding-top:5px;margin-right:.3em;border-top:3px solid var(--link);font-weight:800;color:var(--link);line-height:1.3}

/* Flache Laptop-Fenster: Kopf etwas dichter, damit die Kurz-gesagt-Karte sicher anschneidet (per CSS, kein JS) */
@media (max-height:760px) and (min-width:641px){
  body.vm{--fs-h1:clamp(40px,min(5.4vw,10.2svh),84px);--fs-h1-unter:clamp(21px,min(2.1vw,4.2svh),34px);
    --fs-h2:clamp(32px,min(3.8vw,7.2svh),56px);--fs-kern:clamp(26px,min(2.8vw,5.4svh),44px);--fs-frage2:clamp(32px,min(4.6vw,8.6svh),72px);
    --fs-h1-karte:clamp(34px,min(4vw,7.6svh),62px)}
  .vm-kopf{padding-top:calc(var(--nav) + 12px)}
  .vm-titel span{margin-top:.32em}
  .vm-kopf-text{padding-bottom:18px}
  .vm-kennzahlen li{padding-top:10px}
}

/* ==================================================================
   2 Auftakt (Weiß)
   ================================================================== */
.vm-auftakt .vm-raster{align-items:start;row-gap:36px}
.vm-intro{grid-column:1/8;grid-row:1;max-width:var(--lese);font-size:20px;line-height:1.68;color:var(--text);text-wrap:pretty}
.vm-leitsatz{display:block;margin-bottom:.75em;font:500 var(--fs-leit)/var(--lh-leit) var(--f-disp);color:var(--tinte);text-wrap:balance}
.vm-fahrplan{grid-column:8/13;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vm-fahrplan-titel{grid-column:1/-1;font:500 17px/1.2 var(--f-mono);color:var(--grau);margin-bottom:2px}
.vm-fahrplan a{position:relative;display:flex;flex-direction:row;align-items:center;gap:14px;min-height:62px;padding:14px 14px 9px;overflow:hidden;
  background:var(--eis);border-radius:var(--r-m);font:700 17px/1.25 var(--f-text);color:var(--tinte);
  transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),box-shadow var(--t-kurz) var(--ease)}
.vm-fahrplan a::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--kf);transform-origin:0 50%;transition:transform .6s var(--ease) calc(120ms + var(--i,0) * 60ms)}
.vm-fahrplan a b{flex:none;min-width:1.35em;font:600 40px/1 var(--f-disp);color:var(--tinte)}
.vm-fahrplan a.warte{opacity:0;transform:translateY(22px)}
/* v2 (G11): ungerade Anzahl (7, 9): die letzte Kachel läuft über beide Spalten */
.vm-fahrplan a:last-of-type:nth-of-type(odd){grid-column:1/-1}
.vm-fahrplan a.warte::before{transform:scaleX(0)}

/* ==================================================================
   3 Kapitel 01 Anbieter (Himmel): Arten-Leiste und Steckbriefe
   ================================================================== */
.vm-arten{display:grid;grid-template-columns:auto 5fr 2fr 1fr;column-gap:8px;align-items:stretch;min-width:0;margin:clamp(22px,3.6svh,40px) 0 26px;padding:16px 20px 18px;border:0;
  background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte)}
.vm-arten label{position:relative;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:10px;row-gap:12px;align-items:end;
  padding-top:8px;border-radius:12px;font:700 17px/1.2 var(--f-text);color:var(--tinte);transition:background var(--t-kurz),box-shadow var(--t-kurz)}
.vm-arten label b{font:800 40px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;min-width:1ch}
.vm-arten label i{grid-column:1/-1;grid-row:2;display:flex;gap:4px;height:56px}
.vm-arten label s{flex:1;border-radius:9px;background:var(--af);transform-origin:0 50%;transition:transform .5s var(--ease) calc(var(--j) * 90ms)}
.vm-arten.warte label s{transform:scaleX(0)}
.vm-arten .vm-arten-alle{align-self:center;align-items:center;display:inline-flex;margin-right:16px;padding:12px 20px;border-radius:999px;border:2px solid var(--tinte);font-weight:800}
.vm-arten input:checked+label{background:var(--eis);box-shadow:0 0 0 6px var(--eis)}
.vm-arten input:checked+.vm-arten-alle{background:var(--tinte);color:#fff;box-shadow:none}
.vm-arten input:focus-visible+label{outline:3px solid var(--link);outline-offset:8px}
.vm-arten label:hover{background:var(--eis);box-shadow:0 0 0 6px var(--eis)}
.vm-arten .vm-arten-alle:hover{box-shadow:none}

.vm-steckbriefe{display:block;width:100%;border-collapse:separate;border-spacing:0}
.vm-steckbriefe tbody{display:grid;gap:8px}
.vm-steckbriefe tbody+tbody{margin-top:24px}
.art-db{--af:var(--art-db)} .art-web{--af:var(--art-web)} .art-dienst{--af:var(--art-dienst)}
.vm-steckbriefe tr{display:grid;grid-template-columns:24% 22% 32% 22%;position:relative;overflow:hidden;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte);
  transition:opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 50ms),transform var(--t-mittel) var(--ease) calc(var(--i,0) * 50ms),box-shadow var(--t-kurz) var(--ease)}
.vm-steckbriefe tr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--af)}
.vm-steckbriefe tr.warte{opacity:0;transform:translateY(20px)}
.vm-steckbriefe th,.vm-steckbriefe td{padding:11px 20px;text-align:left;vertical-align:top;font:400 17px/1.5 var(--f-text);color:var(--text)}
.vm-steckbriefe td+td{border-left:1px solid var(--linie-hell)}
.vm-steckbriefe th{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"mono name" "mono gross";column-gap:14px;row-gap:4px;align-content:start;padding-left:26px}
.vm-mono{grid-area:mono;align-self:start;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--af);font:600 18px/1 var(--f-disp);color:#fff}
.art-web .vm-mono{color:var(--tinte)}
.vm-name{grid-area:name;align-self:center;font:800 20px/1.2 var(--f-text);color:var(--tinte)}
.vm-name .rg-link{color:var(--tinte);text-decoration-color:rgba(7,18,38,.3)}
.vm-gross{grid-area:gross;display:block;font:800 var(--fs-zahl-s)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}
.vm-gross small{display:block;margin-top:2px;font:500 17px/1.25 var(--f-text);letter-spacing:0;color:var(--grau);white-space:normal}
.vm-gross small.vor{display:inline;margin:0 .1em 0 0;font-size:max(17px,.5em);font-weight:600;color:var(--tinte)}
.vm-gross-wort{font-size:clamp(22px,1.8vw,28px);white-space:normal}
.vm-steckbriefe .vm-tel{position:relative;padding-left:52px}
.vm-tel::after{content:"";position:absolute;left:20px;top:15px;width:20px;height:20px;background:var(--link);-webkit-mask:var(--i-hoerer) center/contain no-repeat;mask:var(--i-hoerer) center/contain no-repeat}
.vm-anbieter:has(#art-db:checked) tbody:not(.art-db) tr,
.vm-anbieter:has(#art-web:checked) tbody:not(.art-web) tr,
.vm-anbieter:has(#art-dienst:checked) tbody:not(.art-dienst) tr,
.vm-anbieter[data-art="db"] tbody:not(.art-db) tr,.vm-anbieter[data-art="web"] tbody:not(.art-web) tr,.vm-anbieter[data-art="dienst"] tbody:not(.art-dienst) tr{opacity:.28;transform:scale(.985);transition-delay:0s}

/* ==================================================================
   4 Kapitel 02 Kosten (Papier): Bons, Lineal, Stempel, Waage
   ================================================================== */
.vm-kosten-kopf{align-items:center}
.vm-kosten-kopf .vm-kap{grid-column:1/-1;grid-row:1}
.vm-kosten-kopf .vm-absatz{grid-column:1/9;grid-row:2;max-width:none}
.vm-kosten-kopf .vm-stempel{grid-column:9/13;grid-row:2;justify-self:end;align-self:center;margin:0 10px 0 0}
.vm-bons{display:block;width:100%;margin-top:clamp(22px,3.4svh,40px);border-collapse:separate}
.vm-bons tbody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt);align-items:start}
.vm-bons tr{--dreh:-1deg;display:flex;flex-direction:column;position:relative;padding:20px 24px 18px;background:#fff;border-radius:6px 6px 0 0;
  filter:drop-shadow(0 16px 18px rgba(7,18,38,.12)) drop-shadow(0 1px 1px rgba(7,18,38,.06));transform:rotate(var(--dreh));
  transition:transform .6s var(--feder) calc(var(--i,0) * 90ms),opacity .45s var(--ease) calc(var(--i,0) * 90ms)}
.vm-bons tr:nth-child(2){--dreh:.5deg} .vm-bons tr:nth-child(3){--dreh:-.5deg} .vm-bons tr:nth-child(4){--dreh:1deg}
.vm-bons tr::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:12px;background:#fff;
  -webkit-mask:conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 0/24px 12px repeat-x;mask:conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 0/24px 12px repeat-x}
.vm-bons tr.warte{opacity:0;transform:translateY(32px) rotate(var(--dreh))}
.vm-bons th{padding:0 0 11px;margin-bottom:2px;border-bottom:2px solid var(--tinte);text-align:left;font:600 24px/1.15 var(--f-disp);color:var(--tinte)}
.vm-bons td{display:block;padding:7px 0 8px;border-bottom:1.5px dashed #C3CEDF;font:600 17px/1.35 var(--f-mono);color:var(--tinte);text-align:left}
.vm-bons td::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:2px;font:500 17px/1.35 var(--f-mono);color:var(--grau)}
.vm-bons td.vm-je{display:block;padding-top:11px;border-bottom:0;text-align:left;font:800 clamp(34px,3.6vw,54px)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;white-space:nowrap}
.vm-bons td.vm-je::before{display:block;margin-bottom:8px;letter-spacing:0}
.vm-je small{font-size:max(17px,.5em);font-weight:600;letter-spacing:0;margin-right:.12em}
.vm-lineal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;margin-top:14px;letter-spacing:0}
.vm-lineal i{position:relative;height:10px;border-radius:5px;overflow:hidden;
  background:linear-gradient(90deg,transparent calc(25% - 1px),#AEBCD2 0 calc(25% + 1px),transparent 0 calc(50% - 1px),#AEBCD2 0 calc(50% + 1px),transparent 0 calc(75% - 1px),#AEBCD2 0 calc(75% + 1px),transparent 0),var(--eis)}
.vm-lineal i::before{content:"";position:absolute;inset:0;background:var(--tinte);border-radius:5px;transform-origin:0 50%;transform:scaleX(var(--w));
  transition:transform .8s var(--ease) calc(.35s + var(--i,0) * 90ms)}
.vm-lineal em{font:500 17px/1 var(--f-mono);font-style:normal;color:var(--grau)}
.vm-bons tr.warte .vm-lineal i::before{transform:scaleX(0)}

/* Waage (Szene 1) */
.vm-waage{position:relative;margin-top:clamp(40px,7svh,88px)}
.vm-waage-buehne{position:relative}
.vm-waage-inhalt{align-items:center;position:relative}
.vm-waage-text{grid-column:1/7;position:relative;z-index:3;padding:clamp(24px,2.8vw,40px);background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-hoch)}
.vm-waage-text>p:first-child{font-size:20px;line-height:1.66;color:var(--text)}
.vm-waage .vm-kernsatz{display:block;margin-bottom:.5em;font:600 var(--fs-kern)/var(--lh-kern) var(--f-disp);color:var(--tinte);text-wrap:balance}
.vm-waage-text .vm-weiter{margin-top:22px;box-shadow:none;background:var(--papier);border-color:var(--papier);font-size:18px}
.vm-u{background:linear-gradient(var(--tinte),var(--tinte)) 0 100%/calc(var(--u,1) * 100%) 3px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:2px}
.vm-u-gross{--mk:100%;background:linear-gradient(var(--tinte),var(--tinte)) 0 100%/calc(var(--u,1) * 100%) 3px no-repeat,linear-gradient(var(--marker),var(--marker)) 0 88%/var(--mk) .42em no-repeat;color:var(--tinte);font-weight:700;transition:--mk .5s var(--ease)}
.vm-waage.szene-an .vm-u-gross:not(.an){--mk:0%}
.vm-waage-bild{grid-column:7/13;position:relative;z-index:1;padding-top:132px}
.vm-waage-bild svg{display:block;width:100%;height:auto;overflow:visible}
.vm-waage-boden{fill:rgba(7,18,38,.1)}
.vm-waage-fuss,.vm-waage-saeule,.vm-waage-achse,.vm-balken{fill:var(--tinte)}
.vm-waage-zier{fill:var(--vega-marke)}
.vm-waage-achse-innen{fill:var(--amber)}
.vm-schnur{fill:none;stroke:var(--tinte);stroke-width:2.5;stroke-linecap:round}
.vm-teller{fill:var(--vega-marke)}
.vm-teller-rand{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.35}
.vm-ticket{fill:var(--amber)}
.vm-ticket-linie{fill:none;stroke:var(--tinte);stroke-width:3;stroke-linecap:round;opacity:.4}
.vm-gew{fill:var(--tinte)}
.vm-gew-griff{fill:none;stroke:var(--tinte);stroke-width:5;stroke-linecap:round}
.vm-uhr{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vm-balken{transform-box:view-box;transform-origin:260px 90px}
.vm-schale,.vm-gewicht{transform-box:view-box;transform-origin:0 0}
.vm-balken{transform:rotate(var(--kipp,14deg))}
.vm-schale.l{transform:translateY(var(--schale-l,-48px));transform:translate(calc(200px * (1 - cos(var(--kipp,14deg)))),var(--schale-l,-48px))}
.vm-schale.r{transform:translateY(var(--schale-r,48px));transform:translate(calc(-200px * (1 - cos(var(--kipp,14deg)))),var(--schale-r,48px))}
.vm-gewicht{transform:translateY(calc((1 - var(--gw,1)) * -160px));opacity:var(--gw,1)}
.vm-gewicht[data-g="1"]{--gw:var(--g1,1)} .vm-gewicht[data-g="2"]{--gw:var(--g2,1)} .vm-gewicht[data-g="3"]{--gw:var(--g3,1)}
.vm-chip{position:absolute;right:0;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 14px 8px 10px;border-radius:999px;background:#fff;box-shadow:var(--sch-karte);
  font:600 17px/1.25 var(--f-text);color:var(--tinte);white-space:nowrap;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.vm-chip::before{content:"";flex:none;width:18px;height:18px;border-radius:6px;background:var(--tinte)}
.vm-chip.c1{top:0} .vm-chip.c2{top:44px} .vm-chip.c3{top:88px}
.vm-chip.c0{right:auto;left:0;top:auto;bottom:22%;background:var(--amber-hell)}
.vm-chip.c0::before{background:var(--amber)}
.vm-waage.szene-an .vm-chip[data-g]:not(.an){opacity:0;transform:translateY(8px)}
.vm-flut{display:none}

/* ==================================================================
   5 Kapitel 03 Risiken (Königsblau): Stapel
   ================================================================== */
.vm-risiken{padding-bottom:var(--luft)}
.vm-stapel{align-items:start}
.vm-stapel-kopf{grid-column:1/5;position:sticky;top:calc(var(--nav) + 32px)}
.vm-stapel-kopf .vm-kap{margin-bottom:0}
.vm-stapel-fenster,.vm-stapel-stufen{display:none}
html.js .vm-stapel-fenster{display:block;height:1em;margin-top:clamp(16px,3svh,32px);overflow:hidden;font:600 var(--fs-ziffer)/1 var(--f-disp);color:#fff}
.vm-stapel-ziffer{transform:translateY(calc(var(--ziffer,0) * -1em));transform:translateY(calc(round(var(--ziffer,0),1) * -1em));transition:transform .45s var(--ease)}
.vm-stapel-ziffer span{display:block;height:1em;line-height:1}
html.js .vm-stapel-stufen{display:flex;gap:8px;margin-top:18px}
.vm-stapel-stufen i{width:36px;height:4px;border-radius:2px;background:linear-gradient(90deg,#fff calc(var(--f,0) * 100%),rgba(255,255,255,.3) 0)}
.vm-stapel-karten{grid-column:5/13;list-style:none;display:grid;gap:clamp(14px,2.2svh,24px);counter-reset:risiko}
.vm-stapel-karten li{counter-increment:risiko;position:sticky;top:calc(var(--nav) + 32px + var(--i,0) * 16px);padding:20px 30px 22px;background:#fff;border-radius:var(--r-l);
  box-shadow:0 -1px 0 rgba(255,255,255,.4),0 34px 60px -30px rgba(2,8,30,.65);font-size:19px;line-height:1.58;color:var(--text);transform-origin:50% 0;transform:scale(calc(1 - .04 * var(--o,0)))}
.vm-stapel-karten li::before{content:counter(risiko,decimal-leading-zero);float:left;margin:7px 14px 0 0;font:800 20px/1 var(--f-text);font-variant-numeric:tabular-nums;color:var(--rot-text)}
.vm-stapel-karten li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tinte);opacity:calc(var(--o,0) * .35);pointer-events:none}
.vm-stapel-karten .vm-ikon{float:right;margin:-4px 0 6px 18px}
.vm-stapel-karten li>b{display:block;margin-bottom:6px;font:600 26px/1.2 var(--f-disp);color:var(--tinte)}
.vm-ikon .b{stroke:var(--vega-marke)}
.vm-ikon .r{stroke:var(--rot)}
.vm-ikon .gestrichelt{stroke-dasharray:3.5 3.5}
.vm-ikon [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--zug) .1s}
.vm-ikon.warte [pathLength]{stroke-dashoffset:1}

/* ==================================================================
   6 Kapitel 04 Recht (Weiß + DE/AT)
   ================================================================== */
.vm-recht-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(20px,3svh,32px)}
.vm-recht-kopf .vm-kap{margin-bottom:0}
.vm-recht-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:var(--papier);border:1px solid var(--linie);font:600 17px/1.3 var(--f-text);color:var(--grau)}
.vm-recht-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.vm-laender{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt)}
.vm-land{position:relative;overflow:hidden;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-l);font-size:19px;line-height:1.6;color:var(--text)}
.vm-land.de{background:var(--de-flaeche);--lt:var(--de-text)}
.vm-land.at{background:var(--at-flaeche);--lt:var(--at-text)}
.vm-land>b{color:var(--lt)}
.vm-land-kz{position:absolute;right:22px;top:-8px;font:600 120px/1 var(--f-disp);letter-spacing:-.02em;color:var(--lt);opacity:.3;transition:transform .7s var(--ease)}
.vm-land.warte .vm-land-kz{transform:translateX(40px)}
.vm-land-kopf{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:calc(100% - 120px);margin-bottom:16px}
.vm-para{font:600 40px/1 var(--f-disp);color:var(--lt,var(--tinte));white-space:nowrap}
.vm-para.klein{font-size:24px;color:var(--tinte)}
.vm-status{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:999px;font:700 17px/1.2 var(--f-text);white-space:nowrap}
.vm-status svg{width:18px;height:18px;flex:none}
.vm-status.halb{background:var(--amber-hell);color:var(--amber-text)}
.vm-status.halb circle{fill:none;stroke:currentColor;stroke-width:2}
.vm-status.halb path{fill:currentColor}
.vm-status.stopp{background:#fff;color:var(--rot-tief)}
.vm-status.stopp path{fill:currentColor}
.vm-status.stopp .quer{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.i-schluessel svg{stroke:var(--de-text);transition:transform .7s var(--feder) .25s}
.vm-land.warte .i-schluessel svg{transform:rotate(-90deg)}
.i-schranke .pfosten{stroke:var(--at-text)}
.i-schranke .gelenk{fill:var(--at-text);stroke:none}
.i-schranke .arm{transform-box:view-box;transform-origin:10px 22px;transition:transform .6s var(--feder) .3s}
.i-schranke .arm rect{fill:#fff;stroke:var(--at-text);stroke-width:2.5}
.i-schranke .streifen{stroke:var(--rot);stroke-width:3}
.vm-land.warte .i-schranke .arm{transform:rotate(-80deg)}
.vm-band{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;padding:16px 28px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  font-size:19px;line-height:1.58;color:var(--text);transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease)}
.vm-band-kopf{display:flex;align-items:center;gap:14px;min-width:250px}
.vm-band-text b{color:var(--tinte)}
.i-stopp path:first-child{fill:var(--rot-text);stroke:none}
.i-stopp .quer{stroke:#fff;stroke-width:5}
.i-info circle:first-child{fill:var(--vega-marke);stroke:none}
.i-info path{stroke:#fff;stroke-width:4.5}
.i-info .punkt{fill:#fff;stroke:none}

/* ==================================================================
   7 Kapitel 05 Checkliste (Kork): Zettel und Ring
   ================================================================== */
.vm-abhaken{align-items:start;row-gap:28px;counter-reset:haken}
.vm-abhaken .vm-kap{grid-column:8/13;grid-row:1;margin:0;padding-top:8px}
.vm-zettel{grid-column:1/8;grid-row:1/3;position:relative;list-style:none;padding:30px 30px 16px;background:#fff;border-radius:var(--r-s);
  box-shadow:0 26px 40px -18px rgba(44,22,4,.6),0 1px 0 rgba(44,22,4,.08)}
.vm-zettel::before,.vm-zettel::after{content:"";position:absolute;top:-9px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9CE8C4,#1F9C69 60%,#0E5C3C);box-shadow:0 5px 7px rgba(44,22,4,.5)}
.vm-zettel::before{left:16%} .vm-zettel::after{right:16%}
.vm-zettel li{border-bottom:1px solid var(--linie-hell)}
.vm-zettel li:last-child{border-bottom:0}
.vm-zettel label{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;align-items:start;min-height:42px;padding:8px 2px;cursor:pointer;font-size:18px;line-height:1.42;color:var(--text)}
.vm-zettel input{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:26px;height:26px;margin:0;border:2px solid #97A8C2;border-radius:8px;background:#fff;cursor:pointer;
  transition:background .2s,border-color .2s}
.vm-zettel input::before{content:"";width:17px;height:17px;background:var(--gruen-text);-webkit-mask:var(--i-haken) center/contain no-repeat;mask:var(--i-haken) center/contain no-repeat;
  transform:scale(0);transition:transform .3s var(--feder)}
.vm-zettel input:checked{border-color:var(--gruen-text);background:var(--gruen-hell)}
.vm-zettel input:checked::before{transform:scale(1)}
.vm-zettel input:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.vm-abhaken input:checked{counter-increment:haken}
.vm-erster{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:22px}
.vm-zwanzig{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--eis)}
.vm-zwanzig b{font:800 40px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--vega-marke)}
.vm-zwanzig-punkte{display:grid;grid-template-columns:repeat(10,8px);gap:5px}
.vm-zwanzig-punkte i{width:8px;height:8px;border-radius:50%;background:var(--vega-marke);transition:transform .3s var(--ease) calc(var(--j) * 30ms),opacity .3s var(--ease) calc(var(--j) * 30ms)}
.vm-zwanzig.warte i{transform:scale(0);opacity:0}
.vm-ring{grid-column:8/13;grid-row:2;position:relative;display:grid;grid-template-columns:200px;grid-template-areas:"ring" "knopf";justify-content:center;justify-items:center;row-gap:20px;
  padding:30px 28px;background:#fff;border-radius:var(--r-m);box-shadow:0 26px 40px -18px rgba(44,22,4,.55);transform:rotate(.6deg)}
.vm-ring::before{content:"";position:absolute;left:50%;top:-9px;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD9A0,#E8901F 60%,#9A5A0C);box-shadow:0 5px 7px rgba(44,22,4,.5)}
.vm-ring-bild{grid-area:ring;width:200px;height:200px;border-radius:50%;background:conic-gradient(var(--gruen) calc(var(--n) * 360deg / var(--von,8)),var(--eis) 0); /* --von: Anzahl der Punkte (v2, G11) */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 22px),#000 calc(100% - 21px));mask:radial-gradient(farthest-side,#0000 calc(100% - 22px),#000 calc(100% - 21px));
  transition:--n .4s var(--ease)}
.vm-ring-zahl{grid-area:ring;align-self:center;display:flex;align-items:baseline;gap:6px;font:600 17px/1 var(--f-text);color:var(--grau);transition:opacity .3s}
.vm-zaehler::before{content:counter(haken);display:inline-block;min-width:1ch;font:800 56px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--tinte)}
.vm-fertig{grid-area:ring;align-self:center;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--gruen-text);transform:scale(0);transition:transform .4s var(--feder)}
.vm-fertig svg{width:48px;height:48px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vm-abhaken:not(:has(.vm-zettel input:not(:checked))) .vm-fertig{transform:scale(1)}
.vm-abhaken:not(:has(.vm-zettel input:not(:checked))) .vm-ring-zahl{opacity:0}
.vm-drucken{grid-area:knopf;white-space:nowrap}
.vm-drucken[hidden]{display:none}
/* Phase 2: Pose C rechts neben dem Ring */
.vm-abhaken:has(.vm-pruef-bild) .vm-ring{grid-column:8/11;align-self:start}
.vm-pruef-bild{grid-column:11/13;grid-row:2;align-self:end;justify-self:start;height:min(52svh,470px);aspect-ratio:2/3;margin:0 0 calc(-1 * var(--luft)) -16px}

/* ==================================================================
   8 Kapitel 06 Alternative (Himmel): Duell, Kernsatz, Raum, Punkte
   ================================================================== */
.vm-duell{max-width:none;margin-top:clamp(4px,1svh,12px)}
.vm-duell .f1,.vm-duell .f2{max-width:17em}
.vm-duell .d{display:block;font-size:20px;line-height:1.6;color:var(--text)}
.vm-duell .d+.f1,.vm-duell .d+.f2{margin-top:6px}
.vm-duell .f1+.d{margin-top:18px}
.vm-duell .f1{display:block;font:500 var(--fs-frage1)/1.1 var(--f-disp);color:var(--grau-himmel);transition:color .3s var(--ease)}
.vm-duell .f2{display:block;font:600 var(--fs-frage2)/1.02 var(--f-disp);letter-spacing:-.012em;text-wrap:balance}
.vm-duell .w{color:var(--koenig);transition:color .3s var(--ease)}
html.js .vm-duell .f1:not(.zurueck){color:var(--tinte)}
html.js .vm-duell .w:not(.an){color:var(--grau-himmel)}
p.vm-kernsatz{max-width:30em;margin-top:clamp(22px,3.6svh,40px);font:500 var(--fs-kern)/var(--lh-kern) var(--f-disp);color:var(--tinte);text-wrap:balance}

.vm-raum{margin-top:clamp(36px,6svh,64px);padding-inline:var(--rand)}
.vm-raum-buehne{position:relative;max-width:1152px;margin-inline:auto;display:grid;gap:18px}
.vm-raum-bild{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-bild);background:#1A120C;box-shadow:var(--sch-hoch)}
.vm-raum-bild img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:30% 45%}
.vm-raum-dimm{position:absolute;inset:0;background:var(--daemmer-1);opacity:0;pointer-events:none}
.vm-raum-schirm{position:relative;aspect-ratio:1600/833;border-radius:12px;background:var(--fenster);box-shadow:var(--sch-schirm);transform-origin:0 0}
.vm-raum-schirm img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.vm-pin{position:absolute;left:var(--x);top:var(--y);width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:10px;background:var(--amber);box-shadow:0 6px 16px -4px rgba(2,8,20,.6);
  font:800 18px/36px var(--f-text);text-align:center;color:var(--tinte);transition:transform .3s var(--feder) calc(var(--i,0) * 80ms),box-shadow var(--t-kurz) var(--ease)}
.vm-raum figcaption{max-width:1152px;margin-inline:auto}
@media (min-width:1024px) and (min-height:680px) and (orientation:landscape){
  .vm-raum-buehne{display:block;width:min(100%,1152px,calc((100svh - var(--nav) - 48px) * 16 / 9));aspect-ratio:16/9}
  .vm-raum-bild{position:absolute;inset:0}
  .vm-raum-dimm{opacity:var(--dimm,.35)}
  .vm-raum-schirm{position:absolute;left:40%;top:9%;width:57%}
  .vm-raum.szene-an .vm-raum-schirm{opacity:var(--an,1);transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));box-shadow:none}
  .vm-raum.szene-an .vm-raum-schirm::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--sch-schirm);opacity:var(--t,1);pointer-events:none}
  .vm-raum.szene-an .vm-raum-bild img{transform:scale(var(--zoom,1.04))}
  .vm-raum figcaption{width:min(100%,1152px,calc((100svh - var(--nav) - 48px) * 16 / 9))}
  .vm-raum.szene-an{display:flex;flex-direction:column;justify-content:space-between;height:140vh}
  .vm-raum.szene-an .vm-raum-buehne{position:sticky;top:calc(var(--nav) + 24px)}
  .vm-raum.szene-an:not(.pins) .vm-pin{transform:scale(0);transition-delay:0s}
}
.vm-punkte{list-style:none;max-width:1152px;margin:clamp(28px,4svh,44px) auto 0;padding:6px 28px;background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-karte);counter-reset:punkt}
.vm-punkte li{position:relative;padding:14px 8px 14px 60px;border-bottom:1px solid var(--linie-hell);font-size:18px;line-height:1.55;color:var(--text);transition:background var(--t-kurz)}
.vm-punkte li:last-child{border-bottom:0}
.vm-punkte li b{color:var(--tinte)}
.vm-punkte li::before{content:"";position:absolute;left:0;top:11px;width:36px;height:36px;border-radius:10px;font:800 18px/36px var(--f-text);text-align:center;color:var(--tinte);transition:transform var(--t-kurz) var(--feder),box-shadow var(--t-kurz)}
.vm-punkte li[data-pin]::before{counter-increment:punkt;content:counter(punkt);background:var(--amber)}
.vm-punkt-preis::before{background:var(--eis)}
.vm-punkt-preis::after{content:"";position:absolute;left:8px;top:19px;width:20px;height:20px;background:var(--link);-webkit-mask:var(--i-etikett) center/contain no-repeat;mask:var(--i-etikett) center/contain no-repeat}
.vm-preis{padding:2px 10px;border-radius:999px;background:var(--amber-hell);box-shadow:inset 0 0 0 1px rgba(255,176,74,.6);font-weight:800;color:var(--tinte);white-space:nowrap}
/* Kopplung Pin und Listenpunkt in beide Richtungen (reines CSS) */
.vm-alternative:has(.vm-punkte li[data-pin="1"]:hover) .vm-pin[data-pin="1"],
.vm-alternative:has(.vm-punkte li[data-pin="2"]:hover) .vm-pin[data-pin="2"],
.vm-alternative:has(.vm-punkte li[data-pin="3"]:hover) .vm-pin[data-pin="3"],
.vm-alternative:has(.vm-punkte li[data-pin="4"]:hover) .vm-pin[data-pin="4"],
.vm-pin:hover,.vm-pin.hebt{transform:scale(1.25);box-shadow:0 0 0 3px #fff,0 10px 22px -6px rgba(2,8,20,.7);transition-delay:0s}
.vm-alternative:has(.vm-pin[data-pin="1"]:hover) .vm-punkte li[data-pin="1"],
.vm-alternative:has(.vm-pin[data-pin="2"]:hover) .vm-punkte li[data-pin="2"],
.vm-alternative:has(.vm-pin[data-pin="3"]:hover) .vm-punkte li[data-pin="3"],
.vm-alternative:has(.vm-pin[data-pin="4"]:hover) .vm-punkte li[data-pin="4"],
.vm-punkte li[data-pin]:hover,.vm-punkte li.hebt{background:var(--amber-hell)}
.vm-alternative:has(.vm-pin[data-pin="1"]:hover) .vm-punkte li[data-pin="1"]::before,
.vm-alternative:has(.vm-pin[data-pin="2"]:hover) .vm-punkte li[data-pin="2"]::before,
.vm-alternative:has(.vm-pin[data-pin="3"]:hover) .vm-punkte li[data-pin="3"]::before,
.vm-alternative:has(.vm-pin[data-pin="4"]:hover) .vm-punkte li[data-pin="4"]::before,
.vm-punkte li[data-pin]:hover::before,.vm-punkte li.hebt::before{transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--amber)}
.vm-punkte li[data-pin]:hover{margin-inline:-28px;padding-inline:88px 36px;border-radius:12px}
.vm-punkte li[data-pin]:hover::before{left:28px}

/* ==================================================================
   9 Kapitel 07 Vergleich (Weiß): Matrix und Spanne
   ================================================================== */
.vm-matrix{display:grid;grid-template-columns:minmax(200px,1.35fr) repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,auto);width:100%;margin-top:clamp(28px,4svh,40px);border-collapse:separate}
.vm-matrix thead,.vm-matrix tbody,.vm-matrix tr{display:contents}
.vm-matrix tr>:nth-child(1){grid-column:1} .vm-matrix tr>:nth-child(2){grid-column:2} .vm-matrix tr>:nth-child(3){grid-column:3}
.vm-matrix tr>:nth-child(4){grid-column:4} .vm-matrix tr>:nth-child(5){grid-column:5}
.vm-matrix thead tr>*{grid-row:1}
.vm-matrix tbody tr:nth-child(1)>*{grid-row:2} .vm-matrix tbody tr:nth-child(2)>*{grid-row:3} .vm-matrix tbody tr:nth-child(3)>*{grid-row:4}
.vm-matrix tbody tr:nth-child(4)>*{grid-row:5} .vm-matrix tbody tr:nth-child(5)>*{grid-row:6}
.vm-matrix::before{content:"";grid-column:5;grid-row:1/7;margin:-16px 0;border-radius:18px;background:var(--vega);box-shadow:var(--sch-vega);transform:translateY(-12px);transition:transform .6s var(--ease)}
.vm-matrix th,.vm-matrix td{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--linie);text-align:left;font:400 18px/1.4 var(--f-text);color:var(--text)}
.vm-matrix thead th{align-items:flex-end;padding-top:6px;border-bottom:2px solid var(--tinte);font:700 17px/1.3 var(--f-text);color:var(--tinte)}
.vm-matrix tbody th{font:700 18px/1.35 var(--f-text);color:var(--tinte)}
.vm-matrix tbody tr:last-child>*{border-bottom:0}
.vm-matrix .vega{color:#fff;border-bottom-color:rgba(255,255,255,.22);transform:translateY(-12px);transition:transform .6s var(--ease);font-weight:700}
.vm-matrix thead .vega{font:600 24px/1.1 var(--f-disp);border-bottom-color:rgba(255,255,255,.55)}
.vm-matrix.warte::before,.vm-matrix.warte .vega{transform:none}
.vm-zeichen{width:26px;height:26px;flex:none;color:var(--vega-marke);overflow:visible}
.vm-zeichen circle,.vm-zeichen path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vm-zeichen .voll{fill:currentColor;stroke:none}
.vm-zeichen .haken{stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.vm-zeichen.z-nein{color:var(--grau)}
.vega .vm-zeichen{color:#fff}
.vega .vm-zeichen .haken{stroke:var(--vega)}
.vm-zeichen [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--zug)}
.vm-matrix tbody tr:nth-child(2) [pathLength]{transition-delay:.06s}
.vm-matrix tbody tr:nth-child(3) [pathLength]{transition-delay:.12s}
.vm-matrix tbody tr:nth-child(4) [pathLength]{transition-delay:.18s}
.vm-matrix tbody tr:nth-child(5) [pathLength]{transition-delay:.24s}
.vm-matrix.warte [pathLength]{stroke-dashoffset:1}
.vm-legende{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;font:600 17px/1.3 var(--f-text);color:var(--grau)}
.vm-legende span{display:inline-flex;align-items:center;gap:8px}
.vm-legende .vm-zeichen{width:22px;height:22px}
.vm-agentur{align-items:center;margin-top:clamp(24px,3.6svh,44px);row-gap:28px}
.vm-agentur>p{grid-column:1/8;font-size:var(--fs-text);line-height:var(--lh-text);color:var(--text)}
.vm-spanne{grid-column:8/13;padding:16px 26px 24px;background:var(--papier);border-radius:var(--r-m)}
.vm-spanne-achse{position:relative;height:84px;margin-top:0;border-bottom:2px solid var(--linie)}
.vm-spanne-achse::before{content:"";position:absolute;left:0;bottom:-7px;width:2px;height:12px;background:var(--linie)}
.vm-spanne-balken{position:absolute;left:10%;width:46%;bottom:-9px;height:16px}
.vm-spanne-balken::before{content:"";position:absolute;inset:0;border-radius:8px;background:var(--amber);transform-origin:0 50%;transition:transform .8s var(--ease) .2s}
.vm-spanne-balken b{position:absolute;bottom:calc(100% + 14px);font:800 var(--fs-zahl-s)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}
.vm-spanne-balken .von{left:0} .vm-spanne-balken .bis{right:0}
.vm-spanne-balken b::after{content:"";position:absolute;top:calc(100% + 4px);width:2px;height:12px;background:var(--tinte);opacity:.35}
.vm-spanne-balken .von::after{left:2px} .vm-spanne-balken .bis::after{right:2px}
.vm-spanne-mehr{position:absolute;left:calc(56% + 10px);right:0;bottom:-9px;height:16px}
.vm-spanne-mehr i{position:absolute;left:0;right:12px;top:7px;border-top:2px dashed var(--tinte);opacity:.55}
.vm-spanne-mehr::after{content:"";position:absolute;right:-4px;top:-2px;width:20px;height:20px;background:var(--tinte);opacity:.7;-webkit-mask:var(--i-spitze) center/contain no-repeat;mask:var(--i-spitze) center/contain no-repeat}
.vm-spanne-mehr em{position:absolute;right:0;bottom:calc(100% + 16px);font:600 17px/1.2 var(--f-text);font-style:normal;color:var(--grau);white-space:nowrap}
.vm-spanne.warte .vm-spanne-balken::before{transform:scaleX(0)}

/* ==================================================================
   10 Faustregel (Vega-Blau): Weiche
   ================================================================== */
.vm-faust{background:radial-gradient(32% 62% at 84% 52%,rgba(92,143,234,.9),rgba(92,143,234,0) 72%),var(--vega)}
.vm-faust-raster{align-items:start;row-gap:0}
.vm-weiche{grid-column:1/13;grid-row:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:14px;position:relative}
.vm-weiche>b{grid-column:9/13;grid-row:1;align-self:start;position:relative;padding-left:22px;font:600 48px/1 var(--f-disp);letter-spacing:-.01em;color:#fff}
.vm-weiche>b::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:4px;background:#fff}
.vm-weiche::after{content:"";position:absolute;top:calc(24px + 7px);bottom:42px;left:calc(66.6667% + var(--spalt) * .6667);width:2px;background:rgba(255,255,255,.6);transform-origin:50% 0;transform:scaleY(var(--l,1))}
.vm-weiche .ast{grid-column:1/9;position:relative;display:block;padding:17px 24px 17px 52px;border-radius:var(--r-m);background:rgba(7,18,38,.18);border:1px solid rgba(255,255,255,.22);
  font:500 20px/1.45 var(--f-text);color:#fff;transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease)}
.vm-weiche .ast::before{content:"";position:absolute;left:22px;top:26px;width:13px;height:13px;border-radius:4px;background:var(--af,var(--vega-marke));box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.vm-weiche .ast::after{content:"";position:absolute;left:calc(100% + 1px);top:50%;width:var(--spalt);height:2px;margin-top:-1px;background:rgba(255,255,255,.6);transform-origin:100% 50%;transform:scaleX(var(--l,1))}
.vm-weiche .ast.vega{background:#fff;border-color:#fff;color:var(--tinte);font-weight:700;box-shadow:0 24px 50px -26px rgba(2,8,30,.6)}
.vm-weiche .ast.vega::before{background:var(--vega-marke);box-shadow:none}
.vm-weiche .ast.vega::after{background:#fff}
.vm-faust-bild{grid-column:9/13;grid-row:1;align-self:start;justify-self:start;width:min(calc(100% - 40px),340px);aspect-ratio:1;margin-top:82px;margin-left:40px}
.vm-faust-bild img{object-position:50% 30%}
.vm-faust-bild:has(>img[src*="/pose-"]){grid-row:1/3;align-self:end;justify-self:start;width:auto;height:min(55svh,520px);aspect-ratio:2/3;margin:0 0 calc(-1 * var(--luft)) 28px}
.vm-faust .vm-weiter{grid-column:1/9;grid-row:2;margin-top:clamp(24px,4svh,36px);max-width:none}

/* ==================================================================
   11 Kapitel 08 Fragen (Papier)
   ================================================================== */
.vm-fragen-band .vm-raster{align-items:start}
.vm-fragen-kopf{grid-column:1/5;position:sticky;top:calc(var(--nav) + 32px)}
.vm-fragen{grid-column:5/13;counter-reset:frage;border-top:2px solid var(--tinte)}
.vm-fragen details{counter-increment:frage;border-bottom:1px solid var(--linie)}
.vm-fragen summary{list-style:none;display:grid;grid-template-columns:52px minmax(0,1fr) 26px;align-items:center;gap:18px;padding:16px 0;cursor:pointer;font:700 21px/1.35 var(--f-text);color:var(--tinte)}
.vm-fragen summary::-webkit-details-marker{display:none}
.vm-fragen summary::before{content:counter(frage,decimal-leading-zero);font:600 32px/1 var(--f-disp);color:var(--link)}
.vm-fragen summary::after{content:"";width:24px;height:24px;background:var(--tinte);-webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat;transition:transform .3s var(--ease)}
.vm-fragen summary:hover{color:var(--link)}
.vm-fragen details[open] summary::after{transform:rotate(45deg)}
.vm-fragen details>p{padding:0 44px 26px 70px;font-size:19px;line-height:1.66;color:var(--text);max-width:68ch}
.vm-wert{padding:2px 8px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font:500 17px/1.4 var(--f-mono);color:var(--tinte);white-space:nowrap}

/* ==================================================================
   12 Abschluss (Dämmerung), 13 Stand, Fuß
   ================================================================== */
.vm-schluss{padding-block:0;overflow:clip}
.vm-schluss::after{content:"";position:absolute;right:-14vw;bottom:-36vw;width:62vw;height:62vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,182,107,.35),rgba(255,182,107,0));pointer-events:none}
.vm-schluss .vm-raster{position:relative;z-index:1;align-items:stretch;min-height:min(70svh,660px)}
.vm-schluss-bild{grid-column:1/7;position:relative;margin-left:calc(-1 * (var(--rand) + max(0px,(100vw - var(--breite)) / 2)))}
.vm-schluss-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,52% 30%);
  -webkit-mask:linear-gradient(90deg,#000 58%,#0000 98%);mask:linear-gradient(90deg,#000 58%,#0000 98%)}
.vm-schluss-text{grid-column:7/13;align-self:center;padding-block:var(--luft)}
.vm-schluss h2{font:600 clamp(36px,4.2vw,64px)/1.02 var(--f-disp);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.vm-schluss-text p{max-width:34em;margin-top:22px;font-size:20px;line-height:1.6;color:#E3ECF8}
.vm-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.vm-ringe{display:none}
.vm-schluss-bild:has(>img[src*="/pose-"]){margin-left:0;align-self:end;justify-self:center;width:auto;height:min(74svh,680px);aspect-ratio:2/3}
.vm-schluss-bild:has(>img[src*="/pose-"]) .vm-ringe{display:block;position:absolute;left:31%;top:15%;width:64px;height:64px;margin:-32px 0 0 -32px;z-index:-1}
.vm-ringe i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.vm-ringe i:nth-child(2){inset:-18px;opacity:.6} .vm-ringe i:nth-child(3){inset:-36px;opacity:.35}
.vm-stand-band{padding-block:24px}
.vm-stand{max-width:118ch;font-size:17px;line-height:1.55;color:var(--grau)}
body.vm .footer-panel{border-top:0}

/* ==================================================================
   Bewegung beim Laden (nur ohne Wunsch nach weniger Bewegung)
   ================================================================== */
@media (prefers-reduced-motion:no-preference){
  .vm-titel b{animation:vm-steig .7s var(--ease) backwards}
  .vm-titel span{animation:vm-steig .7s var(--ease) .08s backwards}
  .vm-roll span{animation:vm-roll .7s var(--ease) .3s backwards}
  .vm-kennzahlen li:nth-child(2) .vm-roll span{animation-delay:.38s}
  .vm-kopf-bild img{animation:vm-steig .9s var(--ease) backwards}
  .vm-kopf-bild::after{animation:vm-streif 1.2s linear .5s forwards}
  .vm-antwort .vm-mark{animation:vm-mark .7s var(--ease) .6s backwards}
  .vm-antwort .vm-mark:nth-of-type(2){animation-delay:.75s}
  .vm-antwort .vm-mark:nth-of-type(3){animation-delay:.9s}
  .vm-antwort .vm-mark:nth-of-type(4){animation-delay:1.05s}
  .vm-fragen details[open]>p{animation:vm-auf .3s var(--ease)}
  .vm-schluss-bild:has(>img[src*="/pose-"]) .vm-ringe i{animation:vm-welle 2.8s ease-out infinite;inset:0;opacity:0}
  .vm-schluss-bild:has(>img[src*="/pose-"]) .vm-ringe i:nth-child(2){animation-delay:.93s}
  .vm-schluss-bild:has(>img[src*="/pose-"]) .vm-ringe i:nth-child(3){animation-delay:1.86s}
}
@keyframes vm-steig{from{transform:translateY(24px)}}
@keyframes vm-roll{from{transform:translateY(105%)}}
@keyframes vm-streif{to{transform:translateX(110%)}}
@keyframes vm-mark{from{--m:0%}}
@keyframes vm-auf{from{opacity:0;transform:translateY(-8px)}}
@keyframes vm-welle{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}}

/* ==================================================================
   Szenen aktiv (Klasse .szene-an setzt magazin.js nur ab 1024 px, 680 px Höhe, Querformat)
   ================================================================== */
.vm-waage.szene-an{height:140vh;margin-top:clamp(20px,3svh,40px)}
.vm-waage.szene-an .vm-waage-buehne{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:grid;align-items:center;overflow:hidden}
.vm-waage.szene-an .vm-waage-inhalt{width:100%}
.vm-waage.szene-an .vm-flut{display:block;position:absolute;left:0;right:0;bottom:0;height:35%;z-index:2;background:var(--koenig);transform:translateY(calc((1 - var(--flut,1)) * 100%))}
.vm-kosten:has(.vm-waage.szene-an){padding-bottom:0}

/* ==================================================================
   Flache Laptop-Fenster (bis 760 px Höhe): geplante Bildschirme passen ins Fenster.
   Nur Abstände werden enger, keine Schrift unter 17 px.
   ================================================================== */
@media (max-height:760px) and (min-width:641px){
  .vm-kap{margin-bottom:16px}
  .vm-steckbriefe th,.vm-steckbriefe td{padding-block:9px}
  .vm-steckbriefe tbody{gap:7px}
  .vm-bons{margin-top:16px}
  .vm-bons tr{padding:15px 22px 12px}
  .vm-bons th{padding-bottom:8px}
  .vm-bons td{padding:4px 0 5px}
  .vm-bons td::before{margin-bottom:0}
  .vm-bons td.vm-je{padding-top:7px;font-size:clamp(34px,3.1vw,44px)}
  .vm-bons td.vm-je::before{margin-bottom:4px}
  .vm-lineal{margin-top:9px}
  .vm-kosten .vm-quelle{margin-top:12px}
  .vm-land{padding:24px 26px}
  .vm-land-kopf{margin-bottom:10px}
  .vm-laender{gap:16px}
  .vm-band{padding-block:11px}
  .vm-matrix th,.vm-matrix td{padding-block:8px}
  .vm-matrix{margin-top:20px}
  .vm-legende{margin-top:10px}
  .vm-agentur{margin-top:18px}
  .vm-zettel{padding:26px 28px 10px}
  .vm-zettel label{min-height:40px;padding-block:7px}
}
@media (max-height:680px) and (min-width:641px){
  .vm-kap{margin-bottom:13px}
  .vm-bons{margin-top:13px}
  .vm-bons tr{padding:13px 22px 9px}
  .vm-legende{margin-top:6px}
  .vm-agentur{margin-top:14px}
  .vm-spanne{padding:12px 22px 16px}
  .vm-spanne-achse{height:74px}
}

/* ==================================================================
   Mittlere Breiten
   ================================================================== */
@media (max-width:1240px){
  .vm-bons tbody{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
}
@media (max-width:1100px){
  .vm-steckbriefe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .vm-steckbriefe tbody{display:contents}
  .vm-steckbriefe tr{grid-template-columns:minmax(0,1fr)}
  .vm-steckbriefe td+td{border-left:0;border-top:1px solid var(--linie-hell)}
  .vm-steckbriefe td{padding:14px 20px 14px 26px}
  .vm-steckbriefe td::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:4px;font:500 17px/1.3 var(--f-mono);color:var(--grau)}
  .vm-steckbriefe .vm-tel{padding-left:26px}
  .vm-tel::after{display:none}
  .vm-steckbriefe th{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"mono name gross"}
  .vm-gross{text-align:right;font-size:clamp(24px,2.6vw,30px)}
  .vm-arten{grid-template-columns:5fr 2fr 1fr;row-gap:14px}
  .vm-arten .vm-arten-alle{grid-column:1/-1;justify-self:start}
}

/* ==================================================================
   Handy (bis 640 px oder Hochformat bis 1023 px)
   ================================================================== */
@media (max-width:640px),(max-width:1023px) and (orientation:portrait){
  body.vm .vm-raster{grid-template-columns:minmax(0,1fr)}
  body.vm .vm-raster>*,body.vm .vm-weiche>*{grid-column:1/-1;grid-row:auto}
  .vm-kap h2{text-wrap:balance}

  /* Kopf */
  .vm-kopf{padding-top:calc(var(--nav) + 14px)}
  .vm-pfad{margin-bottom:12px}
  .vm-pfad li+li::before{margin:0 10px 2px 4px}
  body.vm .rg-meta{column-gap:18px}
  body.vm .rg-meta span+span::before{display:none}
  .vm-para-chip{margin-top:14px}
  .vm-kopf-text{padding-bottom:0}
  .vm-titel span{margin-top:.5em}
  .vm-kennzahlen{grid-template-columns:minmax(0,1fr)}
  .vm-kennzahlen{margin-top:14px}
  .vm-kennzahlen li,.vm-kennzahlen li:first-child{flex-direction:row;align-items:center;gap:14px;padding:6px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.22)}
  .vm-kennzahlen b{min-width:58px;font-size:36px}
  .vm-kopf-bild{height:auto;max-height:56svh;aspect-ratio:4/5;margin-top:18px;border-radius:var(--r-bild)}
  .vm-kopf-bild img{object-position:50% 8%}
  /* Posen als Büste: obere Bildhälfte, unten weich ausgeblendet */
  .vm-kopf-bild:has(>img[src*="/pose-"]),.vm-faust-bild:has(>img[src*="/pose-"]),.vm-pruef-bild,.vm-schluss-bild:has(>img[src*="/pose-"]){
    width:78vw;max-width:340px;height:auto;max-height:none;aspect-ratio:4/5;justify-self:center;align-self:center;margin:12px auto 0;clip-path:none}
  .vm-fenster>img[src*="/pose-"],.vm-schluss-bild>img[src*="/pose-"]{object-fit:cover;object-position:50% 0;-webkit-mask:linear-gradient(#000 72%,#0000);mask:linear-gradient(#000 72%,#0000)}
  .vm-fenster:has(>img[src*="/pose-"])::after,.vm-schluss-bild:has(>img[src*="/pose-"])::after{display:none}
  .vm-schluss-bild>img[src*="/pose-"]{-webkit-mask:none;mask:none}
  .vm-schluss-bild:has(>img[src*="/pose-"]){margin:0 auto}
  .vm-kopf-bild:has(>img[src*="/pose-"]){margin-top:30px}
  .vm-schluss-bild:has(>img[src*="/pose-"]) .vm-ringe{top:20%}
  .vm-abhaken:has(.vm-pruef-bild) .vm-ring{grid-column:auto}
  .vm-antwort{margin-top:-72px;padding:22px 20px;margin-inline:2px}
  .vm-antwort p{font-size:18px}

  /* Auftakt */
  .vm-fahrplan{order:2;margin-top:8px}
  .vm-fahrplan a{min-height:92px;padding:16px 14px 14px;font-size:17px}
  .vm-fahrplan a b{font-size:32px}
  .vm-intro{font-size:18px}
  .vm-leitsatz{font-size:24px}

  /* Anbieter */
  .vm-arten{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:14px 16px}
  .vm-arten .vm-arten-alle{grid-column:auto;justify-self:start;margin:0 0 6px}
  .vm-arten label{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;padding:8px 6px}
  .vm-arten label b{font-size:32px}
  .vm-arten label i{grid-column:3;grid-row:1;height:22px;gap:3px}
  .vm-arten label s{flex:none;width:14px;border-radius:4px}
  .vm-steckbriefe{grid-template-columns:minmax(0,1fr)}
  .vm-steckbriefe th{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"mono name" "gross gross"}
  .vm-gross{text-align:left;font-size:28px}

  /* Kosten */
  .vm-quelle{display:block}
  .vm-quelle .vm-abb-nr{margin-right:10px}
  .vm-kosten-kopf .vm-stempel{justify-self:start;margin-top:22px}
  .vm-bons tbody{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .vm-bons tr,.vm-bons tr.warte{--dreh:0deg}
  .vm-waage-text{padding:22px 20px}
  .vm-waage-text>p:first-child{font-size:18px}
  .vm-waage-bild{display:flex;flex-direction:column;gap:8px;padding-top:0;margin-top:28px}
  .vm-waage-bild svg{order:-1;margin-bottom:12px}
  .vm-chip,.vm-chip.c0{position:static;align-self:flex-start;white-space:normal}

  /* Risiken */
  .vm-stapel-kopf{position:static;margin-bottom:24px}
  html.js .vm-stapel-fenster,html.js .vm-stapel-stufen{display:none}
  .vm-stapel-karten li{position:relative;top:auto;padding:22px 20px;font-size:18px}
  .vm-stapel-karten li>b{font-size:23px}
  .vm-stapel-karten .vm-ikon{width:48px;height:48px}

  /* Recht */
  .vm-laender{grid-template-columns:minmax(0,1fr)}
  .vm-land{padding:24px 20px;font-size:18px}
  .vm-land-kz{font-size:84px;right:14px}
  .vm-land-kopf{max-width:calc(100% - 70px)}
  .vm-para{font-size:32px}
  .vm-band{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px;font-size:18px}
  .vm-band-kopf{min-width:0}
  .vm-weiter{padding:18px 60px 18px 20px;font-size:18px}
  .vm-weiter::after{right:18px}

  /* Checkliste */
  .vm-abhaken .vm-kap{order:1;padding-top:0}
  .vm-ring{order:3;grid-template-columns:auto;padding:24px 20px;transform:none}
  .vm-ring-bild{width:120px;height:120px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 14px));mask:radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 14px))}
  .vm-zaehler::before{font-size:36px}
  .vm-fertig{width:64px;height:64px}
  .vm-fertig svg{width:34px;height:34px}
  .vm-zettel{order:4;padding:30px 18px 14px}
  .vm-erster{grid-template-columns:minmax(0,1fr);row-gap:4px;padding-bottom:12px}
  .vm-zwanzig{justify-self:start;margin-left:42px}
  .vm-pruef-bild{order:2}

  /* Alternative */
  .vm-duell .d{font-size:18px}
  .vm-raum{padding-inline:var(--rand)}
  .vm-raum-schirm{border-radius:8px}
  .vm-pin{width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:8px;font-size:17px;line-height:28px}
  .vm-punkte{padding:4px 16px}
  .vm-punkte li{padding:16px 0 16px 52px;font-size:18px}
  .vm-punkte li[data-pin]:hover{margin-inline:0;padding-inline:52px 0}
  .vm-punkte li[data-pin]:hover::before{left:0}

  /* Vergleich */
  .vm-matrix{display:block}
  .vm-matrix::before{display:none}
  body.vm .vm-matrix tr>*{grid-column:auto;grid-row:auto}
  .vm-matrix thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vm-matrix tbody{display:grid;gap:14px}
  .vm-matrix tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--sch-karte)}
  body.vm .vm-matrix tbody th{order:-2;grid-column:1/-1;padding:0 0 4px;border:0;font-size:19px}
  .vm-matrix tbody td{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border:0;border-radius:12px;background:var(--papier);font-size:17px;transform:none}
  .vm-matrix tbody td::before{content:attr(data-spalte);content:attr(data-spalte) / "";font:600 17px/1.25 var(--f-text);color:var(--grau)}
  .vm-matrix tbody td.vega{order:-1;background:var(--vega);color:#fff;transform:none}
  .vm-matrix tbody td.vega::before{color:var(--auf-blau-2)}
  .vm-agentur>p{font-size:18px}
  .vm-spanne{padding:20px 18px 24px}
  .vm-spanne-balken{left:4%;width:50%}
  .vm-spanne-mehr{left:calc(54% + 10px)}

  /* Faustregel */
  .vm-weiche{row-gap:12px}
  .vm-weiche::after{display:none}
  .vm-weiche>b{padding-left:0;font-size:40px;margin-bottom:6px}
  .vm-weiche>b::before{display:none}
  .vm-weiche .ast{padding:16px 18px 16px 44px;font-size:18px}
  .vm-weiche .ast::before{left:18px;top:24px}
  .vm-weiche .ast::after{left:-12px;width:12px;transform-origin:0 50%}
  .vm-faust-bild{order:-1;justify-self:start;width:min(64vw,260px);margin:0 0 22px}
  .vm-faust-raster{display:flex;flex-direction:column}
  .vm-faust-raster .vm-weiche{display:contents}
  .vm-weiche>b{order:0}
  .vm-faust-bild{order:1}
  .vm-weiche .ast{order:2;margin-top:12px}
  .vm-faust .vm-weiter{order:3}

  /* Fragen */
  .vm-fragen-kopf{position:static}
  .vm-fragen summary{grid-template-columns:38px minmax(0,1fr) 22px;gap:12px;font-size:19px}
  .vm-fragen summary::before{font-size:24px}
  .vm-fragen details>p{padding:0 0 22px 50px;font-size:18px}

  /* Abschluss */
  .vm-schluss .vm-raster{min-height:0;display:flex;flex-direction:column}
  .vm-schluss-text{order:-1;padding-block:var(--luft) 28px}
  .vm-schluss-text p{font-size:18px}
  .vm-schluss-bild{margin:0 calc(-1 * var(--rand));aspect-ratio:16/10}
  .vm-schluss-bild img{-webkit-mask:linear-gradient(180deg,#0000 0,#000 24%);mask:linear-gradient(180deg,#0000 0,#000 24%)}
  .vm-knoepfe .vm-pille,.vm-knoepfe .vm-pille-rand{flex:1 1 auto}
}

/* ==================================================================
   v2 · Rollout-Bausteine G1 bis G11 (design/rollout/gesamtplan.md 5.1, Referenz rollout/bausteine-neu.md)
   Alles hängt an neuen Klassen oder Modifikatoren, der Pilot bleibt pixelgleich.
   Endzustand ist der CSS-Standard, .warte nur aus magazin.js. Weiße Karten setzen ihre Rollenfarben selbst,
   damit Links und Marker auf blauen Welten dunkel bleiben.
   ================================================================== */
:is(.vm-titelkarte,.vm-kacheln>li,.vm-kette>.schritt,.vm-notiz){--kopf:var(--tinte);--schrift:var(--text);--zweit:var(--grau);--akzent:var(--link);color:var(--text)}
:is(.vm-titelkarte,.vm-kacheln>li,.vm-kette>.schritt,.vm-notiz) :focus-visible{outline-color:var(--link)}

/* ---------- G11 kleine gemeinsame Ergänzungen ---------- */
/* Marker direkt auf Blau: dunkle Schrift auf dem hellen Marker (14,7 : 1). Kurz gesagt bleibt wie im Piloten. */
:is(.w-vega,.w-koenig) .vm-mark:not(.vm-antwort .vm-mark){color:var(--tinte);background-position:0 0;background-size:var(--m,100%) 100%;padding:.02em .22em;border-radius:.22em}
/* Unterstreichung auf dunklen Welten in Schriftfarbe statt Tinte */
:is(.w-vega,.w-koenig,.w-daemmerung) .vm-u:not([data-g]){background-image:linear-gradient(currentColor,currentColor)}
/* Kapitel-Linie auf Blau mit weißem Rand, damit auch blaue Kapitelfarben sichtbar sind (nur Artikel mit a-Klasse, Pilot unverändert) */
body.vm:not([class="vm"]) :is(.w-vega,.w-koenig) .vm-kap-nr::after{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* Kennzahlen mit breiten Werten: Zellen so breit wie ihr Inhalt, linksbündig */
.vm-kennzahlen.frei{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:clamp(24px,2.6vw,40px)}
.vm-kennzahlen.frei li:not(:first-child){padding-left:clamp(18px,2vw,28px)}
/* Paragraph als Kennzahl: Clash 600, zählt nie */
.vm-para-zahl,.vm-kennzahlen .vm-para-zahl{font-family:var(--f-disp);font-weight:600;letter-spacing:-.01em;font-variant-numeric:normal}
.vm-stempel.blau{color:var(--de-text)}
/* Unterstreichung zieht beim Eintritt auf (Waage-Unterstreichungen mit data-g bleiben scroll-gekoppelt) */
@property --u{syntax:'<number>';inherits:false;initial-value:1}
.vm-u:not([data-g]){transition:--u .8s var(--ease) .35s}
.warte .vm-u:not([data-g]),.vm-u.warte{--u:0}
/* Liste mit Icon-Kachel statt Nummer: <span class="vm-punkt-ikon" aria-hidden="true"><svg …></span> als erstes Kind */
.vm-punkte.ikon li::before{background:var(--eis)}
.vm-punkte.ikon .vm-punkt-ikon{position:absolute;left:7px;top:18px;display:block;width:22px;height:22px;pointer-events:none}
.vm-punkte.ikon .vm-punkt-ikon svg{display:block;width:100%;height:100%;fill:none;stroke:var(--link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Steckbriefe als Wege (Closer 02 auf Blau, Cockpit 07 auf Weiß). --spalten: Spaltenbreiten der Zeile. Alias .vm-wege. */
.vm-steckbriefe:is(.wege,.vm-wege) tr{grid-template-columns:var(--spalten,34% 30% 36%)}
.vm-steckbriefe:is(.wege,.vm-wege) th{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"mono name" "mono gross";align-items:center}
.vm-steckbriefe:is(.wege,.vm-wege) .vm-mono{width:48px;height:48px;border-radius:12px}
.vm-steckbriefe:is(.wege,.vm-wege) .vm-mono svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega){background:var(--vega);box-shadow:var(--sch-vega);transform:translateY(-8px);
  transition:opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),transform .6s var(--feder) calc(var(--i,0) * 60ms),box-shadow var(--t-kurz) var(--ease)}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega)::before{background:rgba(255,255,255,.6)}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega) :is(th,td,.vm-name,.vm-name .rg-link,.vm-gross,.vm-gross small){color:#fff}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega) td+td{border-color:rgba(255,255,255,.22)}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega) .vm-mono{background:#fff;color:var(--vega)}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega) .rg-link{text-decoration-color:rgba(255,255,255,.6)}
.w-vega .vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega),.w-koenig .vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega){box-shadow:0 0 0 3px #fff,var(--sch-vega)}
.vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega).warte{transform:translateY(24px)}

/* ---------- G1 Titelbild-Kopf: vm-kopf.szene mit vm-titelkarte ---------- */
.vm-kopf.szene{--band:min(88svh,780px);padding-top:var(--nav);padding-bottom:0;background:var(--grund);isolation:isolate}
.vm-kopf-szene{position:absolute;left:0;right:0;top:var(--nav);bottom:0;z-index:0;margin:0;overflow:hidden;background:var(--himmel)}
.vm-kopf-szene img{position:absolute;left:0;top:0;display:block;width:100%;height:calc(100% + 24px);max-width:none;object-fit:cover;
  object-position:var(--fokus,62% 40%);translate:0 var(--hub,0px)}
.vm-kopf.szene .vm-raster{position:relative;z-index:1;min-height:var(--band);grid-template-rows:minmax(0,1fr) auto auto;padding-top:clamp(16px,3svh,36px)}
.vm-kopf.szene .vm-titelkarte{grid-column:1/7;grid-row:2;align-self:end;padding:28px 32px 30px;background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-hoch)}
.vm-kopf.szene .vm-antwort{grid-column:1/8;grid-row:3;margin-top:16px}
.vm-titelkarte .vm-pfad{color:var(--grau)}
.vm-titelkarte .vm-pfad a{color:var(--tinte);text-decoration-color:rgba(7,18,38,.3)}
.vm-titelkarte .vm-pfad a:hover{text-decoration-color:var(--tinte)}
.vm-titelkarte .vm-titel,.vm-titelkarte .vm-titel span{color:var(--tinte)}
.vm-titelkarte .vm-titel b{font-size:var(--fs-h1-karte)}
.vm-titelkarte .vm-titel span{font-size:min(var(--fs-h1-unter),30px)}
.vm-titelkarte .vm-kennzahlen{border-top-color:var(--linie)}
.vm-titelkarte .vm-kennzahlen li{border-left-color:var(--linie)}
.vm-titelkarte .vm-kennzahlen b{font-size:clamp(30px,2.9vw,46px);color:var(--tinte)}
.vm-titelkarte .vm-kennzahlen.frei{column-gap:clamp(16px,1.6vw,26px)}
.vm-titelkarte .vm-kennzahlen.frei li:not(:first-child){padding-left:clamp(16px,1.6vw,24px)}
.vm-titelkarte .vm-kennzahlen li>span{color:var(--grau)}
.vm-titelkarte .vm-para-chip{background:var(--eis);border-color:var(--linie);color:var(--tinte)}
@media (max-width:1279px){
  .vm-kopf.szene .vm-titelkarte{grid-column:1/8}
  .vm-kopf.szene .vm-antwort{grid-column:1/9}
}
@media (max-height:760px) and (min-width:641px){
  .vm-kopf.szene .vm-raster{padding-top:14px}
  .vm-kopf.szene .vm-titelkarte{padding:20px 28px 22px}
  .vm-titelkarte .vm-pfad{margin-bottom:10px}
  .vm-titelkarte .vm-titel span{margin-top:.28em}
  .vm-titelkarte .vm-kennzahlen{margin-top:14px}
  .vm-titelkarte .vm-kennzahlen b{font-size:clamp(30px,min(2.9vw,6svh),46px)}
  .vm-titelkarte .vm-para-chip{margin-top:12px}
  .vm-kopf.szene .vm-antwort{margin-top:12px}
}
/* Ersatz ohne Szene (Kopf ohne Foto, live-tauglich): Titelkarte auf Himmel mit weichem Licht */
.vm-kopf.szene:not(:has(.vm-kopf-szene)){background:radial-gradient(42% 70% at 84% 34%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%),radial-gradient(30% 50% at 98% 90%,rgba(30,99,214,.16),transparent 70%),var(--himmel)}
.vm-kopf.szene:not(:has(.vm-kopf-szene)) .vm-raster{min-height:0;padding-top:clamp(24px,4svh,48px)}

/* ---------- Platzhalter für fehlende Szenenbilder (nur Prüfstand) ----------
   <figure> ohne <img> oder mit Klasse .platzhalter (setzt magazin.js, wenn das Bild nicht lädt). Kein Text, nur Fläche und Bildzeichen. */
:is(.vm-kopf-szene,.vm-aufmacher,.vm-bildkarte,.vm-schluss-szene):is(.platzhalter,:not(:has(img)))::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--i-bild) var(--platz-xy,50% 50%)/clamp(48px,6vw,88px) no-repeat,repeating-linear-gradient(135deg,rgba(30,99,214,.07) 0 2px,transparent 2px 16px),
    radial-gradient(60% 70% at var(--platz-xy,50% 50%),rgba(255,255,255,.7),rgba(255,255,255,0) 72%),var(--eis)}
.vm-kopf-szene{--platz-xy:78% 42%}
.vm-schluss-szene:is(.platzhalter,:not(:has(img)))::before{background:var(--i-bild) 22% 50%/88px no-repeat,repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px),var(--daemmer-2)}
:is(.vm-kopf-szene,.vm-aufmacher,.vm-bildkarte,.vm-schluss-szene).platzhalter img{visibility:hidden}

/* ---------- G2 Kapitel-Aufmacher: vm-aufmacher, der Kapitelkopf beißt in die linke untere Ecke ---------- */
.vm-aufmacher{--biss:96px;position:relative;overflow:hidden;width:100%;margin:0;aspect-ratio:2.2/1;max-height:calc(100svh - var(--nav) - 120px);
  border-radius:var(--r-bild);background:var(--eis);isolation:isolate}
.vm-aufmacher img{position:absolute;left:0;top:-16px;display:block;width:100%;height:calc(100% + 32px);max-width:none;object-fit:cover;
  object-position:var(--fokus,50% 40%);translate:0 var(--hub,0px);transition:scale .9s var(--ease)}
.vm-aufmacher.warte img{scale:1.06}
.vm-aufmacher+.vm-kap.auf-bild{--biss:96px;position:relative;z-index:1;width:fit-content;max-width:min(100%,820px);margin-top:calc(-1 * var(--biss));
  padding:24px 40px 0 0;background:var(--grund);border-top-right-radius:var(--r-l)}
/* Innere Rundungen an den zwei Stellen, wo die Welt auf das Foto trifft (Radius wie das Foto) */
.vm-aufmacher+.vm-kap.auf-bild::before,.vm-aufmacher+.vm-kap.auf-bild::after{content:"";position:absolute;width:var(--r-bild);height:var(--r-bild);background:var(--grund);pointer-events:none;
  -webkit-mask:radial-gradient(circle at 100% 0,#0000 calc(var(--r-bild) - .5px),#000 var(--r-bild));mask:radial-gradient(circle at 100% 0,#0000 calc(var(--r-bild) - .5px),#000 var(--r-bild))}
.vm-aufmacher+.vm-kap.auf-bild::before{left:0;bottom:100%}
.vm-aufmacher+.vm-kap.auf-bild::after{left:100%;top:calc(var(--biss) - var(--r-bild))}

/* ---------- G3 Bildkarte: vm-bildkarte (Szene als Karte neben Text) ---------- */
.vm-bildkarte{position:relative;overflow:hidden;margin:0;aspect-ratio:var(--format,4/3);border-radius:var(--r-bild);background:var(--eis);box-shadow:var(--sch-hoch);isolation:isolate;
  transition:transform .8s var(--ease),opacity .6s var(--ease)}
:is(.w-vega,.w-koenig) .vm-bildkarte{box-shadow:var(--sch-vega)}
.vm-bildkarte img{position:absolute;left:0;top:-12px;display:block;width:100%;height:calc(100% + 24px);max-width:none;object-fit:cover;object-position:var(--fokus,50% 40%);
  transform-origin:var(--fokus,50% 40%);transform:scale(var(--zoom,1));translate:0 var(--hub,0px);transition:scale .8s var(--ease)}
.vm-bildkarte.warte{opacity:0;transform:translateY(24px)}
.vm-bildkarte.warte img{scale:1.05}
.vm-bildkarte.mit-notiz+.vm-notiz-karte{position:relative;z-index:2;margin-top:-72px}

/* ---------- G4 Abschluss: Kino, Karte, Bild links bis Rand ---------- */
/* Kino: Abendszene über die ganze Bandbreite, Text rechts über dunklem Verlauf. data-zeig an der <section>. */
.vm-schluss.kino{isolation:isolate}
.vm-schluss.kino::after{display:none}
.vm-schluss-szene{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:var(--daemmer-1)}
.vm-schluss-szene img{position:absolute;left:0;top:-16px;display:block;width:100%;height:calc(100% + 32px);max-width:none;object-fit:cover;
  object-position:var(--fokus,35% 45%);translate:0 var(--hub,0px);transition:scale 1.1s var(--ease)}
.vm-schluss-szene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,6,15,0) 38%,rgba(2,6,15,.55) 58%,rgba(2,6,15,.86) 78%)}
.vm-schluss.kino .vm-raster{min-height:min(78svh,720px)}
.vm-schluss.kino .vm-schluss-text{grid-column:8/13;transition:translate .6s var(--ease) .15s}
.vm-schluss.kino.warte .vm-schluss-szene img{scale:1.05}
.vm-schluss.kino.warte .vm-schluss-text{translate:0 16px}
/* Karte: Querformat als gerahmte Karte 4 : 3 links, Glut dahinter */
.vm-schluss-bild.karte{grid-column:1/7;align-self:center;margin:var(--luft) 0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-bild);box-shadow:var(--sch-schirm)}
.vm-schluss-bild.karte img{-webkit-mask:none;mask:none;object-position:var(--fokus,50% 40%)}
.vm-schluss:has(.vm-schluss-bild.karte)::after{right:auto;bottom:auto;left:-13vw;top:50%;width:74vw;height:74vw;translate:0 -50%;
  background:radial-gradient(closest-side,rgba(255,182,107,.42),rgba(255,182,107,.12) 62%,rgba(255,182,107,0))}
.vm-schluss:has(.vm-schluss-bild.karte) .vm-schluss-text{grid-column:8/13}

/* ---------- G7 Bildschirm-Rahmen: vm-schirm.hell / .dunkel (Cockpit-Aufnahmen) ---------- */
.vm-schirm{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "quelle";width:min(100%,1000px,calc((100svh - var(--nav) - 140px) * 1.6));margin:0;
  transform-origin:50% 100%;transition:transform .7s var(--ease)}
.vm-schirm>img{grid-area:bild;display:block;width:100%;height:auto;border:10px solid transparent;border-top-width:38px;border-radius:16px;
  background:radial-gradient(circle,var(--punkt,#D5DEEB) 0 4.5px,transparent 5px) 6px 9px/20px 20px no-repeat,radial-gradient(circle,var(--punkt,#D5DEEB) 0 4.5px,transparent 5px) 22px 9px/20px 20px no-repeat,
    radial-gradient(circle,var(--punkt,#D5DEEB) 0 4.5px,transparent 5px) 38px 9px/20px 20px no-repeat,var(--rahmen,#fff);
  background-origin:border-box;box-shadow:var(--sch-hoch)}
.vm-schirm.dunkel{--rahmen:var(--fenster);--punkt:rgba(255,255,255,.26)}
.vm-schirm.dunkel>img{box-shadow:var(--sch-schirm)}
.vm-schirm>figcaption{grid-area:quelle}
.vm-schirm::after{content:"";grid-area:bild;border-radius:16px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.08) 54%,transparent 60%) 100% 0/300% 100% no-repeat}
.vm-schirm.warte{transform:perspective(1400px) rotateX(8deg) translateY(24px)}

/* ---------- G8 Kacheln: vm-kacheln [vier|rot|haken|glyphe|mono] ---------- */
.vm-kacheln{list-style:none;display:grid;grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));gap:var(--spalt);margin:clamp(22px,3.6svh,40px) 0 0;padding:0;counter-reset:kachel}
.vm-kacheln.vier{--spalten:2}
.vm-kacheln>li{position:relative;display:block;margin:0;padding:30px 26px 24px;overflow:hidden;counter-increment:kachel;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte);
  font-size:18px;line-height:1.55;text-wrap:pretty;
  transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),box-shadow var(--t-kurz) var(--ease)}
.vm-kacheln>li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--af,var(--kf,var(--vega-marke)));transform-origin:0 50%;
  transition:transform .6s var(--ease) calc(120ms + var(--i,0) * 60ms)}
.vm-kacheln>li>b{display:block;margin-bottom:8px;font:600 22px/1.2 var(--f-disp);letter-spacing:-.005em;color:var(--tinte);text-wrap:balance}
.vm-kachel-kopf{display:flex;align-items:center;gap:12px;height:48px;margin-bottom:16px}
.vm-kachel-kopf svg{display:block;flex:none;width:48px;height:48px;fill:none;stroke:var(--vega-marke);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.vm-kachel-kopf .b{stroke:var(--vega-marke)} .vm-kachel-kopf .r{stroke:var(--rot)} .vm-kachel-kopf .g{stroke:var(--gruen-text)}
.vm-kachel-kopf .a{stroke:var(--amber)} .vm-kachel-kopf .t{stroke:var(--tinte)} .vm-kachel-kopf .gestrichelt{stroke-dasharray:3.5 3.5}
.vm-kachel-kopf .voll{fill:currentColor;stroke:none}
.vm-kachel-kopf [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--zug) calc(.15s + var(--i,0) * 60ms)}
.vm-kacheln>li.warte{opacity:0;transform:translateY(22px)}
.vm-kacheln>li.warte::before{transform:scaleX(0)}
.vm-kacheln>li.warte .vm-kachel-kopf [pathLength]{stroke-dashoffset:1}
/* rot: Fehler, Nummer oben rechts per Zähler */
.vm-kacheln.rot>li{--af:var(--rot)}
.vm-kacheln.rot>li::after{content:counter(kachel,decimal-leading-zero);position:absolute;top:24px;right:24px;font:800 20px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--rot-text)}
.vm-kacheln.rot .vm-kachel-kopf .r{stroke:var(--rot-text)}
.vm-kacheln.rot>li>b{padding-right:36px}
/* haken: grünes Siegel oben rechts, springt nach dem Eintritt */
.vm-kacheln.haken>li::after{content:"";position:absolute;top:22px;right:22px;width:28px;height:28px;background:var(--i-siegel) center/contain no-repeat;
  transition:transform .35s var(--feder) calc(.5s + var(--i,0) * 60ms)}
.vm-kacheln.haken>li.warte::after{transform:scale(0)}
.vm-kacheln.haken>li>b{padding-right:36px}
/* glyphe: 72 px hohe Mini-Illustration ohne Werte, zeichnet sich einmal (700 ms) */
.vm-kacheln.glyphe .vm-kachel-kopf{height:72px;align-items:flex-end}
.vm-kacheln.glyphe .vm-kachel-kopf svg{width:auto;height:72px;max-width:100%}
.vm-kacheln.glyphe .vm-kachel-kopf [pathLength]{transition-duration:.7s}
/* mono: Monogramm-Kachel plus Icon, wird vom Arten-Filter mit gedimmt */
.vm-kacheln.mono .vm-kachel-kopf .vm-mono{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;font-size:20px}
.vm-anbieter:has(#art-db:checked) .vm-kacheln.mono>li:not(.art-db),.vm-anbieter:has(#art-web:checked) .vm-kacheln.mono>li:not(.art-web),
.vm-anbieter:has(#art-dienst:checked) .vm-kacheln.mono>li:not(.art-dienst),.vm-anbieter[data-art="db"] .vm-kacheln.mono>li:not(.art-db),
.vm-anbieter[data-art="web"] .vm-kacheln.mono>li:not(.art-web),.vm-anbieter[data-art="dienst"] .vm-kacheln.mono>li:not(.art-dienst){opacity:.28;transform:scale(.985);transition-delay:0s}

/* ---------- G9 Kette: figure.rg-rechnung.vm-kette [klammer|rechnung|ablauf] ---------- */
.vm-kette{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch;margin:clamp(24px,4svh,40px) 0}
.vm-kette:not(:has(>.schritt:nth-of-type(3))){grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
.vm-kette:has(>.schritt:nth-of-type(4)){grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr)}
.vm-kette>.schritt{position:relative;display:flex;flex-direction:column;padding:24px 24px 26px;overflow:hidden;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte);
  transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 180ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 180ms)}
.vm-kette>.schritt.ziel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--amber)}
.vm-kette-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.vm-kette-kopf>b{font:600 var(--fs-ord)/1 var(--f-disp);color:var(--tinte)}
.vm-kette-kopf .vm-ikon{width:44px;height:44px}
.vm-kette-kopf .vm-ikon svg{stroke:var(--vega-marke)}
.vm-kette .wert{display:block;font:600 clamp(26px,2.4vw,36px)/1.08 var(--f-disp);letter-spacing:-.01em;color:var(--tinte);text-wrap:balance}
.vm-kette .was{display:block;margin-top:8px;font-size:18px;line-height:1.5;color:var(--text);text-wrap:pretty}
.vm-kette>figcaption{grid-column:1/-1;margin-top:18px;font:500 17px/1.5 var(--f-mono);color:var(--zweit)}
.vm-glied{position:relative;display:block;align-self:center;width:auto;height:24px;margin:0 12px;--g:0}
.vm-glied:nth-of-type(2){--g:1} .vm-glied:nth-of-type(3){--g:2}
.vm-glied i{position:absolute;left:0;right:7px;top:50%;height:2px;margin-top:-1px;background:color-mix(in srgb,var(--kopf) 55%,transparent);transform-origin:0 50%;
  transition:transform .6s var(--ease) calc(.25s + var(--g) * 180ms)}
.vm-glied::after{content:"";position:absolute;right:-2px;top:50%;width:16px;height:16px;margin-top:-8px;background:color-mix(in srgb,var(--kopf) 55%,transparent);
  -webkit-mask:var(--i-spitze) center/contain no-repeat;mask:var(--i-spitze) center/contain no-repeat;transition:opacity .25s var(--ease) calc(.7s + var(--g) * 180ms)}
.vm-kette.warte>.schritt{opacity:0;transform:translateY(18px)}
.vm-kette.warte .vm-glied i{transform:scaleX(0)}
.vm-kette.warte .vm-glied::after{opacity:0}
/* klammer: die Unterschrift steht als Klammer über allen Stationen */
.vm-kette.klammer>figcaption{grid-row:1;position:relative;margin:0 0 22px;padding:0 0 26px;text-align:center;font:500 clamp(20px,1.7vw,24px)/1.25 var(--f-disp);color:var(--kopf);
  transition:opacity .5s var(--ease)}
.vm-kette.klammer>figcaption::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:12px;border:2px solid currentColor;border-bottom:0;border-radius:10px 10px 0 0;opacity:.55;
  transform-origin:50% 100%;transition:transform .7s var(--ease) .1s}
.vm-kette.klammer>figcaption::after{content:"";position:absolute;left:50%;bottom:12px;width:2px;height:10px;margin-left:-1px;background:currentColor;opacity:.55}
.vm-kette.klammer.warte>figcaption{opacity:0}
.vm-kette.klammer.warte>figcaption::before{transform:scaleX(.2)}
/* rechnung: Gleichung mit × und =, Ergebnis auf Marker-Grund, Werte Manrope 800 */
.vm-kette.rechnung .wert{font:800 clamp(28px,2.6vw,42px)/1.05 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.vm-kette.rechnung>.schritt.ziel{background:var(--marker)}
.vm-kette.rechnung>.schritt.ziel::before{display:none}
.vm-kette.rechnung .vm-glied{display:grid;place-items:center;height:auto;margin:0}
.vm-kette.rechnung .vm-glied i{display:none}
.vm-kette.rechnung .vm-glied::after{position:static;width:36px;height:36px;margin:0;background:var(--kopf);opacity:1;
  -webkit-mask-image:var(--i-mal);mask-image:var(--i-mal);transition:transform .45s var(--feder) calc(.3s + var(--g) * 180ms)}
.vm-kette.rechnung .vm-glied.gleich::after{-webkit-mask-image:var(--i-gleich);mask-image:var(--i-gleich)}
.vm-kette.rechnung.warte .vm-glied::after{opacity:1;transform:scale(0)}
/* ablauf: ein Punkt läuft einmal durch die Kette (nur ohne Wunsch nach weniger Bewegung, nur nach dem Eintritt) */
.vm-kette.ablauf .vm-glied i::after{content:"";position:absolute;left:0;top:-5px;width:100%;height:12px;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 6px 50%,var(--amber) 0 5px,transparent 5.5px) no-repeat}

/* ---------- G10 Notizen: ul.vm-notizen > li.vm-notiz oder p.vm-notiz ---------- */
.vm-notizen{list-style:none;display:grid;grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));gap:clamp(26px,3vw,40px) var(--spalt);margin:clamp(30px,4svh,48px) 0 0;padding:0}
.vm-notiz{--dreh:-.5deg;--pin:var(--amber);position:relative;display:block;margin:0;padding:30px 26px 24px;background:#fff;border-radius:var(--r-s);
  box-shadow:0 22px 34px -18px rgba(7,18,38,.42),0 1px 0 rgba(7,18,38,.06);transform:rotate(clamp(-1deg,var(--dreh),1deg));
  font-size:18px;line-height:1.55;text-wrap:pretty;
  transition:transform .5s var(--feder) calc(var(--i,0) * 80ms),opacity .3s var(--ease) calc(var(--i,0) * 80ms),box-shadow var(--t-kurz) var(--ease)}
.vm-notiz::before{content:"";position:absolute;left:50%;top:-9px;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pin) 35%,#fff),var(--pin) 58%,color-mix(in srgb,var(--pin) 55%,#000));
  box-shadow:0 5px 7px rgba(7,18,38,.32);transition:transform .35s var(--feder) calc(.3s + var(--i,0) * 80ms)}
.vm-notiz>b:first-child{display:block;margin-bottom:8px;font:600 22px/1.2 var(--f-disp);color:var(--tinte);text-wrap:balance}
.vm-notiz.warte{opacity:0;transform:translateY(-18px) rotate(calc(clamp(-1deg,var(--dreh),1deg) * 3))}
.vm-notiz.warte::before{transform:scale(0)}

/* ---------- Hover nach vorn (neue Karten) ---------- */
@media (hover:hover){
  .vm-kacheln>li:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--sch-hoch);transition-delay:0s}
  .vm-notiz:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 30px 44px -20px rgba(7,18,38,.45),0 1px 0 rgba(7,18,38,.06);transition-delay:0s}
  .vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega):hover{transform:translateY(-11px) scale(1.01)}
}

/* ---------- Bewegung beim Laden und nach dem Eintritt (nur ohne Wunsch nach weniger Bewegung) ---------- */
@media (prefers-reduced-motion:no-preference){
  .vm-kopf-szene img{animation:vm-szene-ein 1.6s var(--ease) backwards}
  .vm-schirm.da::after{animation:vm-schirm-streif 1.2s linear .6s}
  .vm-kette.ablauf.da .vm-glied i::after{animation:vm-lauf .7s var(--ease) calc(1s + var(--g) * .55s) both}
}
@keyframes vm-szene-ein{from{scale:1.04}}
@keyframes vm-schirm-streif{from{opacity:1;background-position:100% 0}to{opacity:1;background-position:0 0}}
@keyframes vm-lauf{0%{opacity:0;transform:translateX(-6px)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(100%)}}

/* ---------- Handy (bis 640 px oder Hochformat bis 1023 px) ---------- */
@media (max-width:640px),(max-width:1023px) and (orientation:portrait){
  /* G1: Foto oben 4 : 3, Titelkarte überlappt 40 px, dann die Karte */
  .vm-kopf.szene{padding-top:var(--nav)}
  .vm-kopf-szene{position:relative;top:auto;bottom:auto;aspect-ratio:4/3}
  .vm-kopf-szene img{object-position:var(--fokus-handy,var(--fokus,62% 40%))}
  .vm-kopf.szene .vm-raster{min-height:0;grid-template-rows:none;padding-top:0}
  .vm-kopf.szene .vm-titelkarte{grid-column:1/-1;grid-row:auto;margin-top:-40px;padding:22px 20px 20px}
  .vm-kopf.szene .vm-antwort{grid-column:1/-1;grid-row:auto;margin-top:14px}
  .vm-titelkarte .vm-kennzahlen li,.vm-titelkarte .vm-kennzahlen li:first-child{border-bottom-color:var(--linie)}
  .vm-titelkarte .vm-kennzahlen li:last-child{border-bottom:0}
  .vm-kopf.szene:not(:has(.vm-kopf-szene)) .vm-raster{padding-top:18px}
  .vm-kennzahlen.frei{grid-template-columns:minmax(0,1fr)}
  .vm-kennzahlen.frei li,.vm-kennzahlen.frei li:not(:first-child),.vm-titelkarte .vm-kennzahlen.frei li:not(:first-child){flex-wrap:wrap;row-gap:2px;padding-left:0}
  .vm-kennzahlen.frei b{flex:none;min-width:0}
  /* G2 */
  .vm-aufmacher{--biss:32px;aspect-ratio:4/3;max-height:none}
  .vm-aufmacher img{object-position:var(--fokus-handy,var(--fokus,50% 40%))}
  .vm-aufmacher+.vm-kap.auf-bild{--biss:32px;max-width:calc(100% - 44px);padding:18px 24px 0 0}
  /* G3 */
  .vm-bildkarte{aspect-ratio:4/3}
  .vm-bildkarte img{object-position:var(--fokus-handy,var(--fokus,50% 40%));transform-origin:var(--fokus-handy,var(--fokus,50% 40%))}
  /* G4 */
  .vm-schluss-szene{position:relative;inset:auto;aspect-ratio:4/3}
  .vm-schluss-szene img{object-position:var(--fokus-handy,var(--fokus,35% 45%))}
  .vm-schluss-szene::after{background:linear-gradient(180deg,rgba(2,6,15,0) 52%,rgba(2,6,15,.9) 100%)}
  .vm-schluss.kino .vm-raster{min-height:0}
  .vm-schluss.kino .vm-schluss-text{padding-block:28px var(--luft)}
  .vm-schluss-bild img{object-position:var(--fokus-handy,var(--fokus,52% 30%))}
  .vm-schluss-bild.karte{order:1;align-self:stretch;margin:0 0 var(--luft);aspect-ratio:4/3}
  .vm-schluss-bild.karte img{-webkit-mask:none;mask:none;object-position:var(--fokus-handy,var(--fokus,50% 40%))}
  /* G7 */
  .vm-schirm{width:100%}
  .vm-schirm>img{border-width:6px;border-top-width:26px;border-radius:12px;
    background-position:2px 4px,16px 4px,30px 4px,0 0;background-size:16px 16px,16px 16px,16px 16px,auto}
  .vm-schirm::after{border-radius:12px}
  .vm-schirm.warte{transform:translateY(16px)}
  /* G8 */
  .vm-kacheln,.vm-kacheln.vier{grid-template-columns:minmax(0,1fr)}
  .vm-kacheln>li{padding:24px 20px 22px}
  .vm-kacheln:not(.glyphe)>li{padding-left:80px}
  .vm-kacheln:not(.glyphe) .vm-kachel-kopf{position:absolute;left:20px;top:26px;flex-direction:column;align-items:flex-start;height:auto;margin:0}
  .vm-kacheln:not(.glyphe) .vm-kachel-kopf svg,.vm-kacheln.mono .vm-kachel-kopf .vm-mono{width:40px;height:40px}
  .vm-kacheln.mono .vm-kachel-kopf .vm-mono{font-size:18px;border-radius:10px}
  /* G9: senkrecht, Glieder 40 px */
  .vm-kette,.vm-kette:has(>.schritt:nth-of-type(4)),.vm-kette:not(:has(>.schritt:nth-of-type(3))){grid-template-columns:minmax(0,1fr)}
  .vm-glied{justify-self:start;width:24px;height:40px;margin:0 0 0 32px}
  .vm-glied i{left:50%;right:auto;top:0;bottom:7px;width:2px;height:auto;margin:0 0 0 -1px;transform-origin:50% 0}
  .vm-glied::after{left:50%;right:auto;top:auto;bottom:-2px;margin:0 0 0 -8px;transform:rotate(90deg)}
  .vm-kette.warte .vm-glied i{transform:scaleY(0)}
  .vm-kette.klammer>figcaption{margin-bottom:14px;padding-bottom:18px;text-align:left}
  .vm-kette.klammer>figcaption::before{left:0;right:auto;width:56px;height:0;border-width:2px 0 0;border-radius:0}
  .vm-kette.klammer>figcaption::after{display:none}
  .vm-kette.rechnung .vm-glied{justify-self:center;width:auto;height:auto;margin:10px 0}
  .vm-kette.rechnung .vm-glied::after{transform:none}
  .vm-kette.rechnung.warte .vm-glied::after{transform:scale(0)}
  .vm-kette.ablauf .vm-glied i::after{display:none}
  /* G10: gerade, untereinander */
  .vm-notizen{grid-template-columns:minmax(0,1fr)}
  .vm-notiz,.vm-notiz.warte{transform:none}
  .vm-notiz.warte{transform:translateY(-12px)}
  /* G11 */
  .vm-steckbriefe:is(.wege,.vm-wege) tr{grid-template-columns:minmax(0,1fr)}
  .vm-steckbriefe:is(.wege,.vm-wege) th{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"mono name"}
  .vm-steckbriefe:is(.wege,.vm-wege) tr:is(.rg-vergleich,.vega){transform:none}
}
@media (max-width:1100px) and (min-width:641px){
  .vm-steckbriefe:is(.wege,.vm-wege) tr{grid-template-columns:minmax(0,1fr)}
  .vm-steckbriefe:is(.wege,.vm-wege) th{grid-template-areas:"mono name"}
}

/* ==================================================================
   Druck: Seite schlicht, mit body.drucke-liste nur der Zettel
   ================================================================== */
@media print{
  body.vm{background:#fff;color:#000}
  .nav,.vm-schiene,.vm-fortschritt,.vm-fenster,.vm-raum-bild,.vm-schluss-bild,.vm-waage-bild,.vm-flut,.footer,.vm-drucken{display:none!important}
  .vm-kopf-szene,.vm-aufmacher,.vm-bildkarte,.vm-schluss-szene,.vm-schirm::after{display:none!important}
  .vm-kopf.szene .vm-raster{min-height:0}
  .vm-schirm,.vm-kacheln>li,.vm-kette>.schritt,.vm-notiz,.vm-titelkarte{box-shadow:none!important;transform:none!important;opacity:1!important}
  .vm-welt{background:#fff!important;color:#000;padding-block:18px;border:0;box-shadow:none}
  .vm-welt *{color:#000!important}
  .vm-waage.szene-an,.vm-raum.szene-an{height:auto}
  .vm-waage-buehne,.vm-raum-buehne,.vm-stapel-karten li,.vm-stapel-kopf,.vm-fragen-kopf{position:static!important;height:auto!important}
  .warte{opacity:1!important;transform:none!important}
  body.drucke-liste main>*:not(.vm-checkliste),body.drucke-liste .vm-ring{display:none!important}
  body.drucke-liste .vm-zettel{box-shadow:none;border:1px solid #999}
  body.drucke-liste .vm-abhaken{display:block}
}