/* Vega-Magazin, Teil der Seite high-ticket-closer-finden (v4, 4.11.2026). Wird nach magazin.css geladen. Jeder Selektor beginnt mit body.vm.a-. */ /* ===== Teil high-ticket-closer-finden ===== */ /* Teil high-ticket-closer-finden · nur Regeln dieses Artikels. Jeder Selektor beginnt mit body.vm.a-closer. Kein content:"…" mit Buchstaben oder Ziffern. Bausteine: vm-staffel, vm-pegel, vm-fuenfter, vm-geldfluss (Signatur), vm-closer-faust, vm-zwei-balken, vm-bruch, vm-zettel--vertrag, vm-laender--kanal, Kacheln 3 + 2, vm-zusagen. Endzustand ist der CSS-Standard, Startzustände nur über .warte (magazin.js) bzw. .szene-an ohne .da. */ /* ---------- Icons in diesem Artikel (Linienfarben) ---------- */ body.vm.a-closer .vm-ikon .b{stroke:var(--vega-marke)} body.vm.a-closer .vm-ikon .a{stroke:var(--amber-text)} body.vm.a-closer .vm-ikon .g{stroke:var(--grau)} body.vm.a-closer .vm-kette-kopf .vm-ikon .a{stroke:#E8901F} /* ================================================================== 1 Kopf: drei Kennzahlen, die breiten Werte etwas kleiner, Unterkanten auf einer Linie ================================================================== */ body.vm.a-closer .vm-kz-closer small{margin:0 .18em 0 .1em} body.vm.a-closer .vm-kz-closer li>span em{font-style:normal;font-weight:800;color:#fff} @media (min-width:641px){ body.vm.a-closer .vm-kz-closer li:nth-child(n+2) b{font-size:var(--fs-zahl-s);padding-top:calc(var(--fs-zahl) - var(--fs-zahl-s))} } /* ================================================================== 3 Kapitel 01 (Himmel): Kopf links, Absatz rechts, darunter die Staffel der drei Rollen ================================================================== */ body.vm.a-closer .vm-rollen{align-items:start;row-gap:clamp(22px,3.4svh,40px)} body.vm.a-closer .vm-rollen-text .vm-leitsatz{margin-bottom:.55em;font-size:clamp(22px,1.9vw,30px)} /* Staffel: Setter, Übergabe-Pfeil, Closer, Teamleads. Die Klammer der Teamleads (::before/::after) spannt über alle drei Karten. */ body.vm.a-closer .vm-staffel{--c:calc((100% - 64px - 3 * var(--spalt)) / 3);grid-column:1/-1;position:relative;display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) minmax(0,1fr);column-gap:var(--spalt);margin:0;padding:38px 0 0;list-style:none} body.vm.a-closer .vm-staffel::before{content:"";position:absolute;top:10px;left:calc(var(--c) / 2);width:calc(2 * var(--c) + 64px + 3 * var(--spalt));height:28px; border:2px solid rgba(7,18,38,.32);border-bottom:0;border-radius:14px 14px 0 0;transform-origin:100% 50%;transition:transform .8s var(--zug) .55s} body.vm.a-closer .vm-staffel::after{content:"";position:absolute;top:10px;left:calc(1.5 * var(--c) + 64px + 2 * var(--spalt));width:2px;height:28px;margin-left:-1px; background:rgba(7,18,38,.32);transition:opacity .3s var(--ease) 1.2s} body.vm.a-closer .vm-staffel.warte::before{transform:scaleX(0)} body.vm.a-closer .vm-staffel.warte::after{opacity:0} body.vm.a-closer .vm-staffel>li{position:relative;margin:0;padding:26px 26px 24px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte); font-size:clamp(18px,1.3vw,19px);line-height:1.55;color:var(--text);text-wrap:pretty; transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 110ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 110ms),box-shadow var(--t-kurz) var(--ease)} body.vm.a-closer .vm-staffel>li::before{content:"";position:absolute;left:22px;right:22px;top:0;height:5px;border-radius:0 0 4px 4px;background:var(--rolle,var(--vega-marke))} body.vm.a-closer .vm-staffel>li.setter{grid-column:1;--rolle:var(--cyan)} body.vm.a-closer .vm-staffel>li.closer{grid-column:3;--rolle:var(--vega-marke)} body.vm.a-closer .vm-staffel>li.teamlead{grid-column:4;--rolle:var(--tinte)} body.vm.a-closer .vm-staffel>li>b{display:block;margin:14px 0 6px;font:600 28px/1.05 var(--f-disp);letter-spacing:-.01em;color:var(--tinte)} body.vm.a-closer .vm-staffel.warte>li{opacity:0;transform:translateY(24px)} /* Übergabe: der Termin wandert auf dem Pfeil vom Setter zum Closer */ body.vm.a-closer .vm-uebergabe{position:absolute;left:100%;top:50%;width:calc(64px + 2 * var(--spalt));height:40px;margin-top:-20px;pointer-events:none} body.vm.a-closer .vm-uebergabe .pfeil{position:absolute;left:10px;right:10px;top:50%;height:2px;margin-top:-1px;background:var(--tinte);opacity:.55;transform-origin:0 50%; transition:transform .5s var(--ease) .45s} body.vm.a-closer .vm-uebergabe .pfeil::after{content:"";position:absolute;right:-3px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--tinte); -webkit-mask:var(--i-spitze) center/contain no-repeat;mask:var(--i-spitze) center/contain no-repeat} body.vm.a-closer .vm-staffel-termin{position:absolute;left:50%;top:50%;width:30px;height:26px;margin:-13px 0 0 -15px;border-radius:6px;background:#fff; box-shadow:inset 0 5px 0 var(--amber),0 0 0 1.5px rgba(7,18,38,.22),0 6px 12px -6px rgba(7,18,38,.5); transition:transform .7s var(--ease) .9s,opacity .3s var(--ease) .9s} body.vm.a-closer .vm-staffel-termin::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;border-radius:1px;background:var(--linie);box-shadow:0 5px 0 var(--linie)} body.vm.a-closer .vm-staffel.warte .vm-uebergabe .pfeil{transform:scaleX(0)} body.vm.a-closer .vm-staffel.warte .vm-staffel-termin{opacity:0;transform:translateX(-46px) scale(.7)} /* Woche des Closers: drei der fünf Tage tragen einen Termin */ body.vm.a-closer .vm-staffel-woche{display:flex;gap:7px;margin-top:16px} body.vm.a-closer .vm-staffel-woche i{width:30px;height:30px;border-radius:8px;border:2px solid var(--linie);background:#fff;transition:background-color .3s var(--feder),border-color .3s var(--ease),transform .35s var(--feder)} body.vm.a-closer .vm-staffel-woche i.t{border-color:var(--vega-marke);background:var(--vega-marke) radial-gradient(circle,#fff 0 3.5px,transparent 4px) center/100% 100% no-repeat} body.vm.a-closer .vm-staffel-woche i.t:nth-child(1){transition-delay:1.35s} body.vm.a-closer .vm-staffel-woche i.t:nth-child(2){transition-delay:1.6s} body.vm.a-closer .vm-staffel-woche i.t:nth-child(4){transition-delay:1.85s} body.vm.a-closer .vm-staffel.warte .vm-staffel-woche i.t{border-color:var(--linie);background:#fff;transform:scale(.85)} /* Leerer Kalender vor dem Kernsatz */ body.vm.a-closer .vm-fehlt{grid-column:1/-1;position:relative;max-width:none;min-height:72px;padding-left:96px} body.vm.a-closer .vm-kalender-leer{position:absolute;left:0;top:2px;width:72px;height:72px} body.vm.a-closer .vm-kalender-leer svg{stroke-width:2.2;stroke-dasharray:4 4} body.vm.a-closer .vm-fehlt .vm-kernsatz{display:block;margin-top:4px;font:500 var(--fs-kern)/var(--lh-kern) var(--f-disp);color:var(--tinte);text-wrap:balance} body.vm.a-closer [data-zeig] .vm-mark,body.vm.a-closer .vm-fehlt .vm-mark{transition:--m .8s var(--ease) .35s} /* ================================================================== 4 Kapitel 02 (Vega-Blau): Wege mit Nummer, Icon-Kachel und Aufwand-Pegel ================================================================== */ body.vm.a-closer .vm-wege-band .vm-kap{margin-bottom:clamp(20px,3.2svh,34px)} body.vm.a-closer .vm-steckbriefe.wege th{grid-template-columns:24px 48px minmax(0,1fr);grid-template-areas:"nr mono name";column-gap:12px;align-items:center;padding-block:16px} body.vm.a-closer .vm-steckbriefe.wege td{padding-block:16px;font-size:18px;line-height:1.5} body.vm.a-closer .vm-weg-nr{grid-area:nr;font:600 26px/1 var(--f-disp);color:var(--tinte);text-align:center} body.vm.a-closer .vm-steckbriefe.wege .vm-mono{grid-area:mono;align-self:center;background:var(--af);color:#fff} body.vm.a-closer .vm-steckbriefe.wege tr.weg-hell .vm-mono{color:var(--tinte)} body.vm.a-closer .vm-steckbriefe.wege tr.rg-vergleich .vm-mono{background:var(--vega-marke);color:#fff} body.vm.a-closer .vm-steckbriefe.wege .vm-name{font-size:19px} body.vm.a-closer .vm-steckbriefe.wege .vm-kosten-zelle{font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums lining-nums} body.vm.a-closer .vm-steckbriefe.wege td b{color:var(--tinte)} /* Vega-Weg auf Blau (Plan 3.4): weiße Karte, gehoben, weißer Ring mit blauem Abstand, wirkt ausgewählt. Blau auf Blau ginge im Band unter. */ body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich{background:#fff;box-shadow:0 0 0 4px var(--vega),0 0 0 7px #fff,0 38px 64px -28px rgba(3,18,66,.85)} body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich::before{width:8px;background:var(--vega-marke)} body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich :is(th,td){color:var(--text)} body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich .vm-name{color:var(--tinte)} body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich td+td{border-color:var(--linie-hell)} body.vm.a-closer .vm-wege-band .vm-steckbriefe.wege tr.rg-vergleich .vm-kosten-zelle{color:var(--link)} /* Pegel: drei Segmente, gefüllt nach Stufe */ body.vm.a-closer .vm-pegel{display:flex;gap:4px;margin:3px 0 9px} body.vm.a-closer .vm-pegel i{width:30px;height:8px;border-radius:4px;background:var(--eis);transform-origin:0 50%;transition:transform .4s var(--ease) calc(.35s + var(--i,0) * 60ms)} body.vm.a-closer .vm-pegel i:nth-child(2){transition-delay:calc(.45s + var(--i,0) * 60ms)} body.vm.a-closer .vm-pegel i:nth-child(3){transition-delay:calc(.55s + var(--i,0) * 60ms)} body.vm.a-closer .vm-pegel[data-stufe="1"] i:nth-child(1),body.vm.a-closer .vm-pegel[data-stufe="2"] i:nth-child(-n+2),body.vm.a-closer .vm-pegel[data-stufe="3"] i{background:var(--tinte)} body.vm.a-closer .vm-steckbriefe tr.warte .vm-pegel i{transform:scaleX(0)} /* Der fünfte Weg: gestrichelte Karte, planbar ist er nicht */ body.vm.a-closer .vm-fuenfter{display:grid;grid-template-columns:24px 48px minmax(0,1fr);grid-template-areas:"nr mono text";column-gap:12px;align-items:center;max-width:none;margin-top:16px;padding:14px 26px 14px 26px; border:2px dashed rgba(255,255,255,.62);border-radius:var(--r-m);font-size:19px;line-height:1.55;color:#fff;transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s} body.vm.a-closer .vm-fuenfter .vm-weg-nr{color:#fff} body.vm.a-closer .vm-fuenfter .vm-mono{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)} body.vm.a-closer .vm-fuenfter .vm-mono svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body.vm.a-closer .vm-fuenfter .voll{fill:currentColor;stroke:none} body.vm.a-closer .vm-fuenfter.warte{opacity:0;transform:translateY(16px)} /* ================================================================== 5 Kapitel 03 (Papier): Gleichung, Geldfluss-Spuren, Faustregel ================================================================== */ body.vm.a-closer .vm-kosten-a{align-items:center;row-gap:0} body.vm.a-closer .vm-kette.rechnung .wert small,body.vm.a-closer .vm-kette .wert small{font-size:max(17px,.5em);font-weight:600;letter-spacing:0;margin:0 .08em} body.vm.a-closer .vm-kette .vm-quelle{display:flex;margin-top:16px} body.vm.a-closer .vm-kette .vm-quelle .vm-abb-nr{color:var(--tinte)} /* --- Signatur Geldfluss-Spuren --- */ body.vm.a-closer .vm-geldfluss{position:relative;margin-top:clamp(36px,6svh,72px)} body.vm.a-closer .vm-geldfluss-inhalt{align-items:center;row-gap:20px} body.vm.a-closer .vm-geldfluss-text{position:relative;z-index:2;padding:clamp(24px,2.5vw,36px);background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-hoch)} body.vm.a-closer .vm-geldfluss-text p{font-size:20px;line-height:1.66;color:var(--text);text-wrap:pretty} body.vm.a-closer .vm-geldfluss-text b{color:var(--tinte)} body.vm.a-closer .vm-geldfluss .vm-u{transition:--u .45s var(--ease),background-color .2s var(--ease)} body.vm.a-closer .vm-geldfluss.szene-an .vm-u[data-t]:not(.an){--u:0} body.vm.a-closer .vm-geldfluss.szene-an .vm-u-gross:not(.an){--mk:0%} body.vm.a-closer .vm-geldfluss-bild{position:relative;padding:20px 30px 0;background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-karte);overflow:hidden} body.vm.a-closer .vm-spuren{position:relative} /* Achse mit drei Stationen, Pfeil am Ende, Hilfslinien durch alle Spuren */ body.vm.a-closer .vm-achse{position:relative;height:30px;border-bottom:2px solid var(--linie)} body.vm.a-closer .vm-achse::after{content:"";position:absolute;right:-9px;bottom:-9px;width:16px;height:16px;background:#B7C4D8;-webkit-mask:var(--i-spitze) center/contain no-repeat;mask:var(--i-spitze) center/contain no-repeat} body.vm.a-closer .vm-achse span{position:absolute;bottom:8px;left:calc(var(--x) * 1%);translate:-50% 0;font:700 17px/1 var(--f-text);color:var(--tinte);white-space:nowrap} body.vm.a-closer .vm-achse span:first-child{translate:-14px 0} body.vm.a-closer .vm-hilfe{position:absolute;top:30px;bottom:0;left:calc(var(--x) * 1%);width:0;border-left:2px dotted #C5D1E2} /* Probezeit-Fenster: zwischen Besetzung und Probezeit kassiert kein Weg, die Fläche füllt sich mit der Jetzt-Linie */ body.vm.a-closer .vm-gf-zone{position:absolute;top:28px;bottom:0;left:calc(var(--x0) * 1%);width:calc((var(--x1) - var(--x0)) * 1%); background:linear-gradient(180deg,#1E9E6A 0 4px,rgba(16,150,96,.075) 4px,rgba(16,150,96,.025));border-radius:2px 2px 0 0;transform-origin:0 50%;transform:scaleX(var(--w,1));pointer-events:none} body.vm.a-closer .vm-achse span:nth-child(3){color:var(--gruen-text)} /* Spuren: Kopf, Gleis, Etiketten. Spuren selbst ohne Position, damit die Hilfslinien über ihren Grund laufen. */ body.vm.a-closer .vm-spur{padding:12px 0 10px;border-bottom:1px solid var(--linie-hell)} body.vm.a-closer .vm-spur:last-of-type{border-bottom:0} body.vm.a-closer .vm-spur-kopf{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px} body.vm.a-closer .vm-spur-kopf>b{position:relative;z-index:4;display:inline-flex;align-items:center;gap:10px;padding-right:6px;border-radius:4px;background:#fff;font:700 18px/1.25 var(--f-text);color:var(--tinte)} body.vm.a-closer .vm-spur.vega .vm-spur-kopf>b{background:var(--eis)} body.vm.a-closer .vm-spur-kopf>b::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;background:var(--af)} body.vm.a-closer .vm-spur-kopf .modell{position:relative;z-index:4;translate:none;margin:0 auto 0 -10px;padding:0 5px;border-radius:4px;background:#fff;font:600 17px/1.25 var(--f-text);font-style:normal} body.vm.a-closer .vm-gleis{position:relative;height:40px} body.vm.a-closer .vm-gleis::before,body.vm.a-closer .vm-gleis::after{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:#E3EAF4} body.vm.a-closer .vm-gleis::after{background:color-mix(in srgb,var(--af) 45%,#E3EAF4);transform-origin:0 50%;transform:scaleX(var(--xp,1))} body.vm.a-closer .vm-muenze{position:absolute;z-index:1;top:50%;left:calc(var(--x) * 1%);width:28px;height:28px;translate:-50% -50%;border-radius:50%; background:radial-gradient(closest-side,transparent 0 58%,rgba(138,75,0,.42) 61% 68%,transparent 71%),radial-gradient(circle at 34% 30%,#FFE2B2 0,#FFB04A 55%,#E58A15 100%); box-shadow:inset 0 0 0 1.5px rgba(138,75,0,.5),0 4px 8px -3px rgba(138,75,0,.55);transition:transform .32s var(--feder),opacity .18s var(--ease)} body.vm.a-closer .vm-muenze.klein{width:20px;height:20px} body.vm.a-closer .vm-muenze.gross{width:44px;height:44px} body.vm.a-closer .vm-ring-leer{position:absolute;z-index:1;top:50%;left:calc(var(--x) * 1%);width:28px;height:28px;translate:-50% -50%;border-radius:50%;border:2px dashed var(--grau);background:#fff} body.vm.a-closer .vm-zeitband{position:absolute;top:50%;left:calc(var(--x0) * 1%);width:calc((var(--x1) - var(--x0)) * 1%);height:16px;margin-top:-8px;border-radius:8px; background:repeating-linear-gradient(135deg,rgba(81,97,122,.6) 0 2px,transparent 2px 7px),rgba(214,224,238,.9);box-shadow:inset 0 0 0 1.5px rgba(81,97,122,.45); transform-origin:0 50%;transform:scaleX(var(--w,1))} body.vm.a-closer .vm-etiketten{position:relative;height:26px;margin-top:6px} body.vm.a-closer .vm-etiketten.zwei{height:50px} body.vm.a-closer .vm-etikett{position:absolute;z-index:4;top:0;left:calc(var(--x) * 1%);translate:-14px 0;padding:0 5px;margin-left:-5px;border-radius:4px;background:#fff; font:600 17px/1.32 var(--f-text);color:var(--tinte);white-space:nowrap;transition:color .25s var(--ease)} body.vm.a-closer .vm-etikett.mitte{translate:-50% 0;margin-left:0;text-align:center} body.vm.a-closer .vm-etikett.gross{font-weight:800} body.vm.a-closer .vm-etikett.bis{left:auto;right:calc((100 - var(--x)) * 1%);translate:0 0;margin:0 -5px 0 0;text-align:right} body.vm.a-closer .vm-etikett.rechts{left:auto;right:calc((100 - var(--x)) * 1%);translate:0 0;margin:0 -5px 0 0;text-align:right} body.vm.a-closer .vm-etikett.unten{top:24px} body.vm.a-closer .vm-gf-klammer{left:calc(var(--x0) * 1%);width:calc((var(--x1) - var(--x0)) * 1%);translate:none;margin:0;padding:12px 0 0;background:#fff;white-space:normal;text-align:center;line-height:1.25} body.vm.a-closer .vm-gf-klammer::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border:2px solid var(--cyan);border-top:0;border-radius:0 0 9px 9px; transform-origin:0 50%;transform:scaleX(var(--w,1))} /* Spur 4 Vega: Eis-Grund, Probezeit-Siegel, Gabel zu 1.500 € netto oder „zahlst du nichts“ */ body.vm.a-closer .vm-spur.vega{margin:0 -30px;padding:12px 30px 16px;background:var(--eis);box-shadow:inset 6px 0 0 var(--vega-marke)} body.vm.a-closer .vm-spur.vega .vm-gleis{height:64px} body.vm.a-closer .vm-spur.vega .vm-spur-kopf{margin-bottom:12px} body.vm.a-closer .vm-spur.vega .vm-gleis::before{right:18%;background:var(--himmel)} body.vm.a-closer .vm-spur.vega .vm-gleis::after{right:18%;background:color-mix(in srgb,var(--vega-marke) 55%,var(--himmel));transform:scaleX(min(1,calc(var(--xp,1) / .82)))} body.vm.a-closer .vm-spur.vega .vm-etikett,body.vm.a-closer .vm-spur.vega .vm-ring-leer{background:var(--eis)} body.vm.a-closer .vm-spur.vega .vm-etiketten.zwei{height:46px} body.vm.a-closer .vm-siegel{position:absolute;z-index:2;top:50%;left:calc(var(--x) * 1%);width:38px;height:38px;translate:-50% -50%;border-radius:50%; background:var(--i-siegel) center/100% 100% no-repeat;box-shadow:0 0 0 4px var(--eis);transition:transform .35s var(--feder)} body.vm.a-closer .vm-gf-gabel{position:absolute;left:82%;top:0;width:18%;height:100%;overflow:visible} body.vm.a-closer .vm-gf-gabel path{fill:none;stroke:var(--vega-marke);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--zug)} body.vm.a-closer .vm-gf-gabel path.unten{stroke:#9AA9BF;stroke-width:3;transition-delay:.1s} body.vm.a-closer .vm-muenze.oben{top:18.75%} body.vm.a-closer .vm-ring-leer.unten{top:81.25%} body.vm.a-closer .vm-etikett.wert{position:relative;z-index:4;translate:none;margin:0 -6px 0 0;padding:0 6px;border-radius:6px;background:var(--eis);font:800 clamp(22px,1.8vw,28px)/1.1 var(--f-text);letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums;color:var(--tinte)} /* Jetzt-Linie (nur mit Bühne) */ body.vm.a-closer .vm-jetzt{display:none} body.vm.a-closer .vm-geldfluss.szene-an .vm-jetzt{display:block;position:absolute;z-index:3;top:28px;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--tinte); transform:translateX(var(--jx,0px));pointer-events:none} body.vm.a-closer .vm-geldfluss.szene-an .vm-jetzt{transition:opacity .4s var(--ease)} body.vm.a-closer .vm-geldfluss.szene-an.fertig .vm-jetzt{opacity:0} body.vm.a-closer .vm-geldfluss.szene-an .vm-jetzt::before{content:"";position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--tinte);box-shadow:0 0 0 3px #fff} /* Startzustände nur mit Bühne: Marken noch nicht da. Etiketten bleiben sichtbar und wechseln nur die Farbe. */ body.vm.a-closer .vm-geldfluss.szene-an .vm-muenze:not(.da){opacity:0;transform:translateY(-36px)} body.vm.a-closer .vm-geldfluss.szene-an .vm-etikett:not(.da){color:var(--grau)} body.vm.a-closer .vm-geldfluss.szene-an .vm-siegel:not(.da){background:#fff;box-shadow:0 0 0 4px var(--eis),inset 0 0 0 2.5px var(--gruen-text);transform:scale(.82)} body.vm.a-closer .vm-geldfluss.szene-an .vm-gf-gabel:not(.da) path{stroke-dashoffset:1} body.vm.a-closer .vm-geldfluss.szene-an .vm-ring-leer.unten:not(.da){opacity:0} body.vm.a-closer .vm-ring-leer.unten{transition:opacity .3s var(--ease) .2s} /* Bühne ab 1024 x 680 im Querformat */ body.vm.a-closer .vm-geldfluss.szene-an{height:140vh} body.vm.a-closer .vm-geldfluss.szene-an .vm-geldfluss-buehne{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:grid;align-items:center} /* Kopplung (Zeiger): Unterstreichung hebt ihre Spur, Spur hebt ihre Unterstreichungen */ @media (hover:hover){ body.vm.a-closer .vm-geldfluss .vm-spur{transition:opacity .2s var(--ease)} body.vm.a-closer .vm-geldfluss:has(.vm-u[data-spur="1"]:hover) .vm-spur:not([data-spur="1"]), body.vm.a-closer .vm-geldfluss:has(.vm-u[data-spur="2"]:hover) .vm-spur:not([data-spur="2"]), body.vm.a-closer .vm-geldfluss:has(.vm-u[data-spur="4"]:hover) .vm-spur:not([data-spur="4"]){opacity:.38} body.vm.a-closer .vm-geldfluss:has(.vm-spur[data-spur="1"]:hover) .vm-u[data-spur="1"], body.vm.a-closer .vm-geldfluss:has(.vm-spur[data-spur="2"]:hover) .vm-u[data-spur="2"], body.vm.a-closer .vm-geldfluss:has(.vm-spur[data-spur="4"]:hover) .vm-u[data-spur="4"]{background-color:var(--marker)} } /* --- Faustregel als Karte mit Amber-Kante --- */ body.vm.a-closer .vm-closer-faust{position:relative;max-width:min(100%,1060px);margin-top:clamp(36px,6svh,64px);padding:26px 36px 30px 44px;background:#fff;border-radius:var(--r-l); box-shadow:var(--sch-karte);font:500 var(--fs-leit)/1.3 var(--f-disp);color:var(--tinte);text-wrap:pretty} body.vm.a-closer .vm-closer-faust::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:6px;border-radius:0 3px 3px 0;background:var(--amber)} body.vm.a-closer .vm-closer-faust>b:first-child{display:table;margin-bottom:12px;padding-top:5px;border-top:3px solid var(--link);font:800 17px/1.3 var(--f-text);color:var(--link)} body.vm.a-closer .vm-closer-faust .vm-u:nth-of-type(2){transition-delay:.55s} body.vm.a-closer .vm-closer-faust .vm-u:nth-of-type(3){transition-delay:.75s} /* ================================================================== 6 Kapitel 04 (Minze): Aufmacher, Prüfbogen mit zwei Grafiken, Ring und Vega-Karte rechts ================================================================== */ body.vm.a-closer .vm-pruefen .vm-abhaken{margin-top:clamp(18px,3svh,30px);row-gap:20px} body.vm.a-closer .vm-pruef-auftakt .vm-leitsatz{display:inline;margin:0;font-size:inherit;font-weight:500;font-family:var(--f-disp);font-size:1.18em;color:var(--tinte)} body.vm.a-closer .vm-pruefen .vm-zettel{box-shadow:0 26px 44px -22px rgba(4,52,34,.42),0 1px 0 rgba(4,52,34,.08)} body.vm.a-closer .vm-pruef-seite{align-self:start;display:grid;gap:22px;padding-top:6px} body.vm.a-closer .vm-pruefen .vm-ring{grid-column:auto;grid-row:auto;transform:rotate(.6deg);box-shadow:0 26px 44px -22px rgba(4,52,34,.42)} body.vm.a-closer .vm-vega-pruefung{position:relative;overflow:hidden;padding:22px 24px 22px 32px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte); font-size:19px;line-height:1.58;color:var(--text);text-wrap:pretty} body.vm.a-closer .vm-vega-pruefung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--vega-marke)} /* Zeilen mit Grafik: Text links, Grafik rechts */ body.vm.a-closer .vm-zettel li.vm-mit-bild{display:grid;grid-template-columns:minmax(0,1fr) 188px;align-items:center;column-gap:18px;padding-block:4px} /* zwei Balken auf einer Achse: 500 € gegen 20.000 € (ehrlich linear) */ body.vm.a-closer .vm-zwei-balken{display:grid;gap:9px;padding:12px 14px;border-radius:12px;background:var(--eis)} body.vm.a-closer .vm-zb-zeile{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px} body.vm.a-closer .vm-zb-zeile b{font:800 17px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--tinte);white-space:nowrap} body.vm.a-closer .vm-zb-zeile i{position:relative;display:block;height:12px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)} body.vm.a-closer .vm-zb-zeile i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:max(5px,calc(var(--w) * 100%));border-radius:6px;background:var(--tinte); transform-origin:0 50%;transition:transform .8s var(--ease) .35s} body.vm.a-closer .vm-zb-zeile.klein i::before{background:var(--amber);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #E8901F} body.vm.a-closer .vm-zwei-balken.warte i::before{transform:scaleX(0)} /* Bruch ohne Nenner: 30 Prozent über einem leeren, gestrichelten Kasten */ body.vm.a-closer .vm-bruch{display:grid;justify-items:center;gap:6px;padding:10px 14px 8px;border-radius:12px;background:var(--eis)} body.vm.a-closer .vm-bruch>b{font:800 24px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--tinte);white-space:nowrap} body.vm.a-closer .vm-bruch .strich{display:block;width:132px;height:3px;border-radius:2px;background:var(--tinte);transition:transform .6s var(--ease) .35s} body.vm.a-closer .vm-bruch .nenner{display:block;width:64px;height:40px} body.vm.a-closer .vm-bruch svg{display:block;width:100%;height:100%;fill:none;stroke:var(--grau);stroke-width:2.2;stroke-linecap:round} body.vm.a-closer .vm-bruch .kasten{stroke-dasharray:5 4} body.vm.a-closer .vm-bruch .punkt{fill:var(--grau);stroke:none} body.vm.a-closer .vm-bruch .frage,body.vm.a-closer .vm-bruch .punkt{transform-box:view-box;transform-origin:32px 20px;transition:transform .45s var(--feder) .9s,opacity .3s var(--ease) .9s} body.vm.a-closer .vm-bruch.warte .strich{transform:scaleX(0)} body.vm.a-closer .vm-bruch.warte .frage,body.vm.a-closer .vm-bruch.warte .punkt{opacity:0;transform:scale(.4)} /* ================================================================== 7 Kapitel 05 (Himmel): Vertragsblatt mit Klauseln und Unterschrift, daneben die Notiz ================================================================== */ body.vm.a-closer .vm-bezahlung .vm-raster{align-items:start} body.vm.a-closer .vm-bezahl-text.warte .vm-mark{--m:0%} body.vm.a-closer .vm-vertrag{position:relative;margin-top:clamp(18px,3svh,30px);padding:30px 34px 20px;overflow:hidden;background:#fff;border-radius:var(--r-s); box-shadow:0 28px 46px -24px rgba(7,18,38,.42),0 1px 0 rgba(7,18,38,.06);transition:opacity .5s var(--ease),transform .5s var(--ease)} body.vm.a-closer .vm-vertrag::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--k7)} body.vm.a-closer .vm-zettel--vertrag{margin:0;padding:0;list-style:none;counter-reset:klausel} body.vm.a-closer .vm-zettel--vertrag li{position:relative;margin:0;padding:11px 0 12px 54px;border-bottom:1px solid var(--linie-hell);counter-increment:klausel;font-size:19px;line-height:1.52;color:var(--text)} body.vm.a-closer .vm-zettel--vertrag li b{color:var(--tinte)} body.vm.a-closer .vm-zettel--vertrag li::before{content:counter(klausel);position:absolute;left:0;top:9px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%; box-shadow:inset 0 0 0 2px var(--link);font:800 17px/1 var(--f-text);color:var(--link);transition:transform .35s var(--feder) .35s} body.vm.a-closer .vm-zettel--vertrag li:nth-child(2)::before{transition-delay:.43s} body.vm.a-closer .vm-zettel--vertrag li:nth-child(3)::before{transition-delay:.51s} body.vm.a-closer .vm-zettel--vertrag li:nth-child(4)::before{transition-delay:.59s} body.vm.a-closer .vm-unterschrift{display:block;width:min(300px,64%);margin:12px 0 0 auto} body.vm.a-closer .vm-unterschrift svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round} body.vm.a-closer .vm-unterschrift .linie{stroke:var(--linie);stroke-width:1.5} body.vm.a-closer .vm-unterschrift .schwung{stroke:var(--koenig);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--zug) .6s} body.vm.a-closer .vm-vertrag.warte{opacity:0;transform:translateY(22px)} body.vm.a-closer .vm-vertrag.warte li::before{transform:scale(0)} body.vm.a-closer .vm-vertrag.warte .schwung{stroke-dashoffset:1} body.vm.a-closer .vm-notiz-vertrag{z-index:2;padding:34px 30px 28px;font-size:19px;line-height:1.55} body.vm.a-closer .vm-notiz-vertrag .vm-kernsatz{display:block;margin-bottom:12px;font:600 clamp(24px,2.2vw,32px)/1.16 var(--f-disp);letter-spacing:-.005em;color:var(--tinte);text-wrap:balance} /* ================================================================== 8 Kapitel 06 (Weiß): zwei Kanal-Karten ================================================================== */ body.vm.a-closer .vm-laender--kanal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);margin:0} body.vm.a-closer .vm-land.video{background:var(--eis);--lt:var(--link)} body.vm.a-closer .vm-land.video .vm-land-kopf{max-width:none} body.vm.a-closer .i-video{width:150px;height:70px} body.vm.a-closer .i-video svg{stroke:var(--vega-marke);stroke-width:2.2} body.vm.a-closer .i-video .kachel rect{fill:#fff} body.vm.a-closer .i-video .kachel.l *{stroke:var(--de-text)} body.vm.a-closer .i-video .kachel.r *{stroke:var(--at-text)} body.vm.a-closer .i-video .kachel{transform-box:view-box;transition:transform .7s var(--ease) .25s} body.vm.a-closer .i-video .grenze{stroke:var(--at-text);stroke-width:2;stroke-dasharray:4 4} body.vm.a-closer .vm-land.video.warte .kachel.l{transform:translateX(-10px)} body.vm.a-closer .vm-land.video.warte .kachel.r{transform:translateX(10px)} body.vm.a-closer .vm-status.ja{background:#fff;color:var(--gruen-text)} body.vm.a-closer .vm-status.ja circle{fill:none;stroke:currentColor;stroke-width:2} body.vm.a-closer .vm-status.ja path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} body.vm.a-closer .vm-laender--kanal .vm-land{transition:opacity .5s var(--ease),transform .5s var(--ease)} body.vm.a-closer .vm-laender--kanal .vm-land.at{transition-delay:.12s} /* ================================================================== 9 Kapitel 07 (Königsblau): fünf Fehler als Kacheln, oben drei, unten zwei breite ================================================================== */ body.vm.a-closer .vm-fehler-band .vm-kacheln{--spalten:6} body.vm.a-closer .vm-fehler-band .vm-kacheln>li{font-size:clamp(18px,1.3vw,19px)} /* ================================================================== 10 Kapitel 08 (Weiß): Bildkarte Empfang, Ablauf-Kette, Zusagen ================================================================== */ body.vm.a-closer .vm-vermitteln-a{align-items:center;row-gap:0} body.vm.a-closer .vm-vermitteln-b{margin-top:clamp(28px,5svh,56px)} body.vm.a-closer .vm-vermitteln-b .vm-kette{margin-top:0} body.vm.a-closer .vm-vermitteln .vm-kette .ziel{transform:translateY(-6px);box-shadow:var(--sch-hoch)} body.vm.a-closer .vm-vermitteln .vm-kette .ziel .wert{font:800 clamp(30px,2.8vw,44px)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em} body.vm.a-closer .vm-zusagen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;max-width:none;margin:clamp(18px,3svh,28px) 0 0;padding:6px 28px} body.vm.a-closer .vm-zusagen li:nth-child(4){border-bottom:0} body.vm.a-closer .vm-zusagen li{font-size:clamp(18px,1.3vw,19px)} body.vm.a-closer .vm-zusagen li{transition:opacity .45s var(--ease) calc(var(--i,0) * 70ms),transform .45s var(--ease) calc(var(--i,0) * 70ms)} body.vm.a-closer .vm-zusagen.warte li{opacity:0;transform:translateY(14px)} body.vm.a-closer .vm-zusagen .vm-punkt-ikon.zahl{left:0;top:11px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--amber-hell); box-shadow:inset 0 0 0 1.5px #F2C27E;font:800 17px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--tinte)} /* ================================================================== 12 Abschluss: Bild links bis Rand, Text steigt beim Eintritt ================================================================== */ body.vm.a-closer .vm-schluss-text{transition:opacity .6s var(--ease),translate .6s var(--ease)} body.vm.a-closer .vm-schluss-text.warte{opacity:0;translate:0 16px} /* ================================================================== Rasterlage am Laptop (nicht Handy): nur hier stehen Spalten, damit das Handy-Raster mit einer Spalte nie Zusatzspalten bekommt ================================================================== */ @media (min-width:1024px),(min-width:641px) and (orientation:landscape){ body.vm.a-closer .vm-kz-closer{grid-template-columns:minmax(0,.62fr) minmax(0,1.12fr) minmax(0,1.26fr)} body.vm.a-closer .vm-rollen>.vm-kap{grid-column:1/6;margin:0} body.vm.a-closer .vm-rollen-text{grid-column:6/13;padding-top:calc((var(--fs-h2) * var(--lh-h2) - var(--fs-leit) * var(--lh-leit)) / 2)} body.vm.a-closer .vm-kosten-a>.vm-kap{grid-column:1/-1;grid-row:1} body.vm.a-closer .vm-kosten-a>.vm-absatz{grid-column:1/9;grid-row:2} /* Stempel sitzt auf der Ergebnis-Karte oben rechts (neben dem Icon, über keiner Zahl) */ body.vm.a-closer .vm-kosten-a>.vm-stempel{grid-column:1/-1;grid-row:3;justify-self:end;align-self:start;position:relative;z-index:2; margin:calc(clamp(24px,4svh,40px) + 16px) 20px 0 0;padding:8px 14px;font-size:19px} body.vm.a-closer .vm-kosten-a>.vm-kette{grid-column:1/-1;grid-row:3;margin-bottom:0} body.vm.a-closer .vm-kette.rechnung{grid-template-columns:minmax(0,.92fr) 64px minmax(0,1fr) 64px minmax(0,1.28fr)} body.vm.a-closer .vm-geldfluss-text{grid-column:1/6} body.vm.a-closer .vm-geldfluss-bild{grid-column:6/13} body.vm.a-closer .vm-pruef-auftakt{grid-column:1/8;grid-row:1} body.vm.a-closer .vm-pruefen .vm-zettel{grid-column:1/8;grid-row:2} body.vm.a-closer .vm-pruef-seite{grid-column:8/13;grid-row:1/3} body.vm.a-closer .vm-bezahlung .vm-kap{grid-column:1/-1} body.vm.a-closer .vm-bezahl-text{grid-column:1/9} body.vm.a-closer .vm-vertrag{grid-column:1/8} body.vm.a-closer .vm-notiz-vertrag{grid-column:8/13;margin:calc(84px + clamp(18px,3svh,30px)) 0 0 -26px} body.vm.a-closer .vm-fehler-band .vm-kacheln>li{grid-column:span 2} body.vm.a-closer .vm-fehler-band .vm-kacheln>li:nth-child(n+4){grid-column:span 3} body.vm.a-closer .vm-vermitteln-a>.vm-kap{grid-column:1/7;grid-row:1;align-self:end} body.vm.a-closer .vm-vermitteln-a>.vm-absatz{grid-column:1/7;grid-row:2;align-self:start} body.vm.a-closer .vm-vermitteln-a>.vm-bildkarte{grid-column:7/13;grid-row:1/3} } /* ================================================================== Flache Laptop-Fenster (bis 760 px Höhe): engere Abstände, nie unter 17 px ================================================================== */ @media (max-height:760px) and (min-width:641px){ body.vm.a-closer .vm-staffel{padding-top:34px} body.vm.a-closer .vm-staffel>li{padding:20px 22px 18px} body.vm.a-closer .vm-staffel>li>b{margin-top:10px;font-size:25px} body.vm.a-closer .vm-staffel .vm-ikon{width:48px;height:48px} body.vm.a-closer .vm-staffel-woche{margin-top:12px} body.vm.a-closer .vm-steckbriefe.wege th,body.vm.a-closer .vm-steckbriefe.wege td{padding-block:9px;line-height:1.45} body.vm.a-closer .vm-pegel{margin:2px 0 6px} body.vm.a-closer .vm-fuenfter{margin-top:10px;padding-block:7px;line-height:1.45} body.vm.a-closer .vm-wege-band .vm-kap{margin-bottom:14px} body.vm.a-closer .vm-geldfluss-bild{padding-top:14px} body.vm.a-closer .vm-spur{padding:8px 0 6px} body.vm.a-closer .vm-gleis{height:34px} body.vm.a-closer .vm-spur.vega{padding:8px 30px 10px} body.vm.a-closer .vm-spur.vega .vm-gleis{height:56px} body.vm.a-closer .vm-spur.vega .vm-spur-kopf{margin-bottom:13px} body.vm.a-closer .vm-spur[data-spur="3"] .vm-etiketten{margin-top:8px} body.vm.a-closer .vm-etiketten{margin-top:3px} body.vm.a-closer .vm-etiketten.zwei{height:46px} body.vm.a-closer .vm-etikett.unten{top:22px} body.vm.a-closer .vm-geldfluss-text p{font-size:19px;line-height:1.6} body.vm.a-closer .vm-zettel--vertrag li{padding-block:8px 9px;font-size:18px} body.vm.a-closer .vm-vertrag{padding:26px 30px 16px} body.vm.a-closer .vm-zettel li.vm-mit-bild{padding-block:2px} body.vm.a-closer .vm-bruch{padding:7px 12px 6px;gap:4px} body.vm.a-closer .vm-bruch .nenner{height:32px} body.vm.a-closer .vm-zwei-balken{padding:10px 12px;gap:7px} body.vm.a-closer .vm-vega-pruefung{padding:18px 22px 18px 30px;font-size:18px} body.vm.a-closer .vm-pruef-seite{gap:16px} body.vm.a-closer .vm-pruefen .vm-ring{padding:22px 24px;row-gap:14px} body.vm.a-closer .vm-pruefen .vm-ring-bild{width:160px;height:160px} body.vm.a-closer .vm-pruefen .vm-ring{grid-template-columns:160px} body.vm.a-closer .vm-fehler-band .vm-kacheln>li{padding:24px 24px 20px} body.vm.a-closer .vm-fehler-band .vm-kachel-kopf{margin-bottom:10px} body.vm.a-closer .vm-notiz-vertrag{margin-top:calc(36px + clamp(18px,3svh,30px));padding:30px 26px 22px;font-size:18px} body.vm.a-closer .vm-notiz-vertrag .vm-kernsatz{font-size:clamp(22px,2vw,28px)} body.vm.a-closer .vm-zusagen li{padding-block:10px} body.vm.a-closer .vm-zusagen .vm-punkt-ikon.zahl{top:7px} body.vm.a-closer .vm-zusagen li::before{top:7px} body.vm.a-closer .vm-zusagen .vm-punkt-ikon:not(.zahl){top:14px} body.vm.a-closer .vm-vermitteln-b{margin-top:24px} } /* ================================================================== Mittlere Breiten ================================================================== */ @media (max-width:1279px) and (min-width:641px){ body.vm.a-closer .vm-geldfluss-bild{padding-inline:24px} body.vm.a-closer .vm-spur.vega{margin-inline:-24px;padding-inline:24px} body.vm.a-closer .vm-geldfluss-text p{font-size:18px} } /* Mittlere Breiten im Querformat: Wege bleiben Zeilen (im Hochformat gilt das Handy-Layout) */ @media (max-width:1100px) and (min-width:641px) and (orientation:landscape){ body.vm.a-closer .vm-steckbriefe.wege{display:block} body.vm.a-closer .vm-steckbriefe.wege tbody{display:grid;gap:8px} body.vm.a-closer .vm-steckbriefe.wege tr{grid-template-columns:var(--spalten)} body.vm.a-closer .vm-steckbriefe.wege th{grid-template-columns:20px 40px minmax(0,1fr);column-gap:10px;padding-left:22px} body.vm.a-closer .vm-steckbriefe.wege .vm-mono{width:40px;height:40px} body.vm.a-closer .vm-steckbriefe.wege td{padding:9px 14px;font-size:17px;line-height:1.45} body.vm.a-closer .vm-steckbriefe.wege th{padding-block:9px} body.vm.a-closer .vm-steckbriefe.wege td+td{border-top:0;border-left:1px solid var(--linie-hell)} body.vm.a-closer .vm-steckbriefe.wege td::before{display:none} } @media (max-width:1100px) and (min-width:641px){ body.vm.a-closer .vm-staffel>li{padding:22px 20px 20px} body.vm.a-closer .vm-geldfluss:not(.szene-an) .vm-geldfluss-text,body.vm.a-closer .vm-geldfluss:not(.szene-an) .vm-geldfluss-bild{grid-column:1/-1} body.vm.a-closer .vm-pruefen .vm-zettel li.vm-mit-bild{grid-template-columns:minmax(0,1fr)} body.vm.a-closer .vm-pruefen .vm-zettel li.vm-mit-bild>span{justify-self:start;width:220px;margin:0 0 10px 42px} } /* ================================================================== Kleine Querformat-Fenster (bis 1100 px breit und bis 760 px hoch, etwa 1000 x 640): die Blöcke 01, 02 und 05 passen in ein Fenster ================================================================== */ @media (max-width:1100px) and (min-width:641px) and (orientation:landscape) and (max-height:760px){ /* 01: Icon neben dem Rollennamen, schmalerer Übergabe-Pfeil, flachere Klammer */ body.vm.a-closer .vm-rollen{row-gap:16px} body.vm.a-closer .vm-staffel{--pf:44px;--c:calc((100% - var(--pf) - 3 * var(--spalt)) / 3);grid-template-columns:minmax(0,1fr) var(--pf) minmax(0,1fr) minmax(0,1fr);padding-top:28px} body.vm.a-closer .vm-staffel::before{top:6px;height:22px;left:calc(var(--c) / 2);width:calc(2 * var(--c) + var(--pf) + 3 * var(--spalt))} body.vm.a-closer .vm-staffel::after{top:6px;height:22px;left:calc(1.5 * var(--c) + var(--pf) + 2 * var(--spalt))} body.vm.a-closer .vm-uebergabe{width:calc(var(--pf) + 2 * var(--spalt))} body.vm.a-closer .vm-staffel>li{padding:18px 18px 16px;font-size:17px;line-height:1.5} body.vm.a-closer .vm-staffel .vm-ikon{float:left;width:40px;height:40px;margin:0 12px 0 0} body.vm.a-closer .vm-staffel>li>b{display:flex;align-items:center;min-height:40px;margin:0 0 8px;font-size:24px} body.vm.a-closer .vm-staffel-woche{margin-top:10px} /* 02: Pegel steht in der Zeile vor dem Wertwort */ body.vm.a-closer .vm-steckbriefe.wege .vm-pegel{display:inline-flex;gap:3px;margin:0 8px 0 0;vertical-align:1px} body.vm.a-closer .vm-steckbriefe.wege .vm-pegel i{width:16px;height:7px} /* 05: Absatz über die ganze Breite, Vertragsblatt enger, Unterschrift kleiner */ body.vm.a-closer .vm-bezahl-text{grid-column:1/-1} body.vm.a-closer .vm-vertrag{padding:20px 26px 12px} body.vm.a-closer .vm-zettel--vertrag li{padding-block:6px 7px;line-height:1.48} body.vm.a-closer .vm-zettel--vertrag li::before{top:5px} body.vm.a-closer .vm-unterschrift{width:min(200px,46%);margin-top:6px} body.vm.a-closer .vm-notiz-vertrag{margin-top:calc(20px + clamp(18px,3svh,30px))} } /* Sehr flache Querformat-Fenster (etwa 860 x 520): Inhalt in drei Spalten unter dem Intro, Kanal-Karten kompakter, Gleichung ohne Schmuck-Icons */ @media (max-width:1100px) and (min-width:641px) and (orientation:landscape) and (max-height:560px){ body.vm.a-closer .vm-auftakt .vm-raster{row-gap:18px} body.vm.a-closer .vm-auftakt .vm-intro{grid-column:1/-1;grid-row:1;max-width:none} body.vm.a-closer .vm-auftakt .vm-fahrplan{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} body.vm.a-closer .vm-auftakt .vm-fahrplan a:last-of-type:nth-of-type(odd){grid-column:auto} body.vm.a-closer .vm-auftakt .vm-fahrplan a{min-height:52px;padding:10px 12px 7px} body.vm.a-closer .vm-auftakt .vm-fahrplan a b{font-size:30px} body.vm.a-closer .vm-kanal-band .vm-land{padding:20px 22px;font-size:18px;line-height:1.55} body.vm.a-closer .vm-kette.rechnung>.schritt{padding-top:20px;padding-bottom:20px} body.vm.a-closer .vm-kette.rechnung .vm-kette-kopf{display:none} body.vm.a-closer .vm-kosten-a>.vm-stempel{grid-column:10/13;grid-row:2;justify-self:center;align-self:center;margin:0} } /* Große Fenster: Fehler-Icons in voller Größe */ @media (min-width:1200px) and (min-height:761px){ body.vm.a-closer .vm-fehler-band .vm-kachel-kopf{height:56px} body.vm.a-closer .vm-fehler-band .vm-kachel-kopf svg{width:56px;height:56px} } /* ================================================================== Handy (bis 640 px oder Hochformat bis 1023 px) ================================================================== */ @media (max-width:640px),(max-width:1023px) and (orientation:portrait){ /* Kopf: Werte in Zeilen wie im Piloten */ body.vm.a-closer .vm-kz-closer b{flex:none;font-size:32px} body.vm.a-closer .vm-kz-closer li>span{min-width:0} body.vm.a-closer .vm-kz-closer li>span{font-size:17px} /* 01 */ body.vm.a-closer .vm-rollen-text{padding-top:0} body.vm.a-closer .vm-rollen-text .vm-leitsatz{font-size:24px} body.vm.a-closer .vm-staffel{grid-template-columns:minmax(0,1fr);row-gap:56px;padding-top:0} body.vm.a-closer .vm-staffel::before,body.vm.a-closer .vm-staffel::after{display:none} body.vm.a-closer .vm-staffel>li.setter,body.vm.a-closer .vm-staffel>li.closer,body.vm.a-closer .vm-staffel>li.teamlead{grid-column:auto} body.vm.a-closer .vm-staffel>li{padding:22px 20px 20px} body.vm.a-closer .vm-staffel>li>b{font-size:25px} body.vm.a-closer .vm-uebergabe{left:50%;top:100%;width:56px;height:56px;margin:0 0 0 -28px} body.vm.a-closer .vm-uebergabe .pfeil{left:50%;right:auto;top:6px;bottom:6px;width:2px;height:auto;margin:0 0 0 -1px;transform-origin:50% 0} body.vm.a-closer .vm-uebergabe .pfeil::after{right:auto;left:50%;top:auto;bottom:-3px;margin:0 0 0 -8px;transform:rotate(90deg)} body.vm.a-closer .vm-staffel.warte .vm-uebergabe .pfeil{transform:scaleY(0)} body.vm.a-closer .vm-staffel.warte .vm-staffel-termin{transform:translateY(-20px) scale(.7)} body.vm.a-closer .vm-fehlt{padding-left:0;padding-top:70px} body.vm.a-closer .vm-kalender-leer{width:56px;height:56px} body.vm.a-closer .vm-fehlt .vm-kernsatz{font-size:28px} /* 02 */ body.vm.a-closer .vm-steckbriefe.wege th{grid-template-columns:22px 44px minmax(0,1fr);grid-template-areas:"nr mono name"} body.vm.a-closer .vm-steckbriefe.wege .vm-mono{width:44px;height:44px} body.vm.a-closer .vm-steckbriefe.wege td{padding:12px 20px 12px 26px;font-size:18px} body.vm.a-closer .vm-fuenfter{grid-template-columns:22px 44px minmax(0,1fr);align-items:start;padding:14px 16px;font-size:18px} body.vm.a-closer .vm-fuenfter .vm-weg-nr{line-height:44px} body.vm.a-closer .vm-fuenfter .vm-mono{width:44px;height:44px} /* 03 */ body.vm.a-closer .vm-kosten-a>.vm-stempel{justify-self:start;margin-top:22px} body.vm.a-closer .vm-kosten-a>.vm-kette{margin-top:28px} body.vm.a-closer .vm-kette .vm-quelle{display:block} body.vm.a-closer .vm-geldfluss-text{padding:22px 20px} body.vm.a-closer .vm-geldfluss-text p{font-size:18px} body.vm.a-closer .vm-geldfluss-bild{padding:16px 16px 0} body.vm.a-closer .vm-achse span:nth-child(2){translate:calc(-100% + 8px) 0} body.vm.a-closer .vm-hilfe,body.vm.a-closer .vm-gf-zone{display:none} body.vm.a-closer .vm-gleis{height:34px} body.vm.a-closer .vm-muenze{width:22px;height:22px} body.vm.a-closer .vm-muenze.klein{width:16px;height:16px} body.vm.a-closer .vm-muenze.gross{width:34px;height:34px} body.vm.a-closer .vm-ring-leer{width:22px;height:22px} body.vm.a-closer .vm-siegel{width:30px;height:30px} body.vm.a-closer .vm-spur.vega{margin-inline:-16px;padding:10px 16px 14px} body.vm.a-closer .vm-spur.vega .vm-gleis{height:54px} body.vm.a-closer .vm-etiketten,body.vm.a-closer .vm-etiketten.zwei,body.vm.a-closer .vm-spur.vega .vm-etiketten.zwei{height:auto;display:flex;flex-direction:column;gap:4px;margin-top:4px} body.vm.a-closer .vm-etikett,body.vm.a-closer .vm-etikett.bis,body.vm.a-closer .vm-etikett.rechts,body.vm.a-closer .vm-etikett.mitte,body.vm.a-closer .vm-gf-klammer{ position:static;display:flex;align-items:baseline;gap:9px;width:auto;margin:0;padding:0;translate:none;background:none;white-space:normal;text-align:left;font-weight:600} body.vm.a-closer .vm-etikett br{display:none} body.vm.a-closer .vm-etiketten .vm-etikett::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;translate:0 1px;background:#FFB04A;box-shadow:inset 0 0 0 1.5px rgba(138,75,0,.5)} body.vm.a-closer .vm-etiketten .vm-etikett.leer::before{background:#fff;box-shadow:none;border:2px dashed var(--grau);width:10px;height:10px} body.vm.a-closer .vm-etiketten .vm-etikett.zeit::before{border-radius:3px;background:repeating-linear-gradient(135deg,rgba(81,97,122,.6) 0 2px,transparent 2px 5px),#D6E0EE;box-shadow:inset 0 0 0 1px rgba(81,97,122,.45)} body.vm.a-closer .vm-gf-klammer::before{position:static;width:12px;height:12px;border:0;border-radius:50%;transform:none} body.vm.a-closer .vm-closer-faust{padding:22px 20px 24px 26px} /* 04: Absatz, Ring, Prüfbogen, Vega-Karte */ body.vm.a-closer .vm-pruef-seite{display:contents} body.vm.a-closer .vm-pruef-auftakt{order:1} body.vm.a-closer .vm-pruefen .vm-ring{order:2;transform:none} body.vm.a-closer .vm-pruefen .vm-zettel{order:3} body.vm.a-closer .vm-vega-pruefung{order:4;font-size:18px} body.vm.a-closer .vm-zettel li.vm-mit-bild{grid-template-columns:minmax(0,1fr)} body.vm.a-closer .vm-zettel li.vm-mit-bild>span{justify-self:stretch;margin:0 0 12px 42px} /* 05 */ body.vm.a-closer .vm-vertrag{padding:28px 18px 16px} body.vm.a-closer .vm-zettel--vertrag li{padding-left:46px;font-size:18px} body.vm.a-closer .vm-zettel--vertrag li::before{width:30px;height:30px} body.vm.a-closer .vm-notiz-vertrag{margin:24px 0 0;padding:30px 20px 22px;font-size:18px} /* 06 */ body.vm.a-closer .vm-laender--kanal{grid-template-columns:minmax(0,1fr)} body.vm.a-closer .i-video{width:100px;height:47px} /* 07 */ body.vm.a-closer .vm-fehler-band .vm-kacheln>li,body.vm.a-closer .vm-fehler-band .vm-kacheln>li:nth-child(n+4){grid-column:auto} /* 08 */ body.vm.a-closer .vm-vermitteln-a>.vm-bildkarte{margin-top:24px} body.vm.a-closer .vm-vermitteln .vm-kette .ziel{transform:none} body.vm.a-closer .vm-zusagen{grid-template-columns:minmax(0,1fr);padding:4px 16px} body.vm.a-closer .vm-zusagen li:nth-child(4){border-bottom:1px solid var(--linie-hell)} /* Abschluss: Kopf des Adlers nie im ausgeblendeten Rand */ body.vm.a-closer .vm-schluss-club img{-webkit-mask:linear-gradient(180deg,#0000 0,#000 9%);mask:linear-gradient(180deg,#0000 0,#000 9%)} }