/* Vega-Magazin, Teil der Seite provisionsabrechnung-vertrieb (v4, 4.11.2026). Lädt nach magazin.css, nur auf <body class="vm a-provision">.
   Jeder Selektor beginnt mit body.vm.a-provision. Bausteine: vm-pv-modelle (Tabelle als Karten mit Mini-Grafik), vm-pv-staffel (Rechnung als Fläche),
   vm-pv-rechner mit vm-pv-teiler (Signatur: die bezahlte Rechnung wird in drei Stücke geschnitten), vm-pv-zeit (Zeitstrahl Abschluss, Rechnung, Zahlung),
   vm-pv-blatt (Vorlage als Blatt), vm-pv-fall (Wasserfall der Gutschrift), vm-pv-recht (Gesetzes-Register DE/AT).
   Hausregeln: Endzustand ist der CSS-Standard, Startzustände nur über .warte (magazin.js), Selbstläufer nur ohne Wunsch nach weniger Bewegung. */

/* ---------- Kopf: „Provisionsabrechnung“ ist ein langes Wort, die Titelzeile bleibt am Laptop ungetrennt ---------- */
@media (min-width:641px){
  body.vm.a-provision .vm-titel b{font-size:clamp(36px,4.4vw,66px)}
}

/* ---------- Gemeinsam: Mini-Grafiken der Seite (Striche zeichnen sich beim Eintritt) ---------- */
body.vm.a-provision .vm-pv-glyphe svg{display:block;height:72px;width:auto;max-width:100%;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
body.vm.a-provision .vm-pv-glyphe .b{stroke:var(--vega-marke)}
body.vm.a-provision .vm-pv-glyphe .c{stroke:#0E8FB8}
body.vm.a-provision .vm-pv-glyphe .a{stroke:var(--amber)}
body.vm.a-provision .vm-pv-glyphe .g{stroke:var(--gruen-text)}
body.vm.a-provision .vm-pv-glyphe .t{stroke:rgba(7,18,38,.35)}
body.vm.a-provision .vm-pv-glyphe .dick{stroke-width:3.5}
body.vm.a-provision .vm-pv-glyphe .gestrichelt{stroke-dasharray:5 5}
body.vm.a-provision .vm-pv-glyphe .voll{stroke:none}
body.vm.a-provision .vm-pv-glyphe .voll.a{fill:var(--amber)}
body.vm.a-provision .vm-pv-glyphe [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--zug) calc(.2s + var(--i,0) * 70ms)}
body.vm.a-provision .vm-pv-glyphe .voll{transition:opacity .5s var(--ease) calc(.6s + var(--i,0) * 70ms)}
body.vm.a-provision .warte .vm-pv-glyphe [pathLength]{stroke-dashoffset:1}
body.vm.a-provision .warte .vm-pv-glyphe .voll{opacity:0}

/* ---------- 01 Sechs Provisionsmodelle: jede Tabellenzeile eine Karte ---------- */
body.vm.a-provision .vm-pv-modelle{display:block;width:100%;margin-top:clamp(24px,4svh,40px);border-collapse:separate;border-spacing:0}
body.vm.a-provision .vm-pv-modelle tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
body.vm.a-provision .vm-pv-modelle tbody+tbody{margin-top:var(--spalt)}
body.vm.a-provision .vm-pv-modelle tr{position:relative;display:flex;flex-direction:column;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) * 60ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 60ms),box-shadow var(--t-kurz) var(--ease)}
body.vm.a-provision .vm-pv-modelle tr::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--vega-marke);transform-origin:0 50%;
  transition:transform .6s var(--ease) calc(120ms + var(--i,0) * 60ms)}
body.vm.a-provision .vm-pv-modelle tr.warte{opacity:0;transform:translateY(22px)}
body.vm.a-provision .vm-pv-modelle tr.warte::before{transform:scaleX(0)}
body.vm.a-provision .vm-pv-modelle th{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;column-gap:14px;padding:22px 22px 8px;text-align:left;font:600 22px/1.2 var(--f-disp);letter-spacing:-.005em;color:var(--tinte);text-wrap:balance}
body.vm.a-provision .vm-pv-modelle .vm-pv-glyphe{display:block;height:40px}
body.vm.a-provision .vm-pv-modelle .vm-pv-glyphe svg{width:64px;height:40px}
body.vm.a-provision .vm-pv-modelle td{display:block;padding:0 22px;font:400 18px/1.5 var(--f-text);color:var(--text);text-wrap:pretty}
body.vm.a-provision .vm-pv-modelle td.vm-pv-passt{margin-top:auto;padding:12px 22px 16px;border-top:1px solid var(--linie-hell);background:var(--papier)}
body.vm.a-provision .vm-pv-modelle td:not(.vm-pv-passt){padding-bottom:12px}
body.vm.a-provision .vm-pv-modelle td.vm-pv-passt::before{content:attr(data-label) " ";font:700 18px/1.5 var(--f-text);color:var(--tinte)}
body.vm.a-provision .vm-pv-nachsatz{max-width:1152px;margin-top:clamp(24px,3.6svh,36px);columns:2;column-gap:clamp(28px,3.4vw,52px)}
@media (hover:hover){
  body.vm.a-provision .vm-pv-modelle tr:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sch-hoch);transition-delay:0s}
}

/* ---------- 02 Rechenbeispiel ---------- */
body.vm.a-provision .vm-pv-beispiel-band .vm-aufmacher{aspect-ratio:3/1}
body.vm.a-provision .vm-pv-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);max-width:1152px}
body.vm.a-provision .vm-pv-zwei .vm-absatz{max-width:none}
body.vm.a-provision .vm-pv-beispiel>.vm-absatz+.vm-absatz{margin-top:1em}
body.vm.a-provision .vm-pv-beispiel .vm-kette{max-width:1152px}
body.vm.a-provision .vm-pv-beispiel .vm-kette .wert{font:800 clamp(34px,3.4vw,52px)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
body.vm.a-provision .vm-pv-beispiel .vm-kette>.schritt.ziel{background:var(--marker)}
body.vm.a-provision .vm-pv-beispiel .vm-kette>.schritt.ziel::before{display:none}
body.vm.a-provision .vm-pv-beispiel .vm-kette .vm-ikon svg .g{stroke:var(--gruen-text)}
body.vm.a-provision .vm-pv-beispiel .vm-kette .vm-ikon svg .a{stroke:#C77A12}

/* Staffel: die Rechnung als Fläche. Breite = Umsatz (Schwelle bei zwei Dritteln), Höhe = Satz (5 % = 62,5 % von 8 %). */
body.vm.a-provision .vm-pv-staffel{display:block;width:100%;max-width:1152px;margin-top:clamp(20px,3svh,30px);border-collapse:separate;border-spacing:0}
body.vm.a-provision .vm-pv-staffel tbody{display:grid;gap:14px}
body.vm.a-provision .vm-pv-staffel tr{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr) minmax(150px,17%);align-items:center;column-gap:clamp(18px,2.4vw,36px);
  padding:18px 28px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-karte);
  transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 140ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 140ms)}
body.vm.a-provision .vm-pv-staffel tr.warte{opacity:0;transform:translateY(20px)}
body.vm.a-provision .vm-pv-staffel th{text-align:left;font:700 19px/1.4 var(--f-text);color:var(--tinte);text-wrap:balance}
body.vm.a-provision .vm-pv-staffel td{font:400 18px/1.5 var(--f-text);color:var(--text)}
body.vm.a-provision .vm-pv-staffel td.vm-pv-rechnung{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums lining-nums}
body.vm.a-provision .vm-pv-staffel td.vm-pv-provision{text-align:right;font:800 clamp(30px,3vw,48px)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}
body.vm.a-provision .vm-pv-flaeche{position:relative;display:block;height:72px;margin-top:12px;border-bottom:2px solid var(--linie);
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 15 - 1px),var(--linie-hell) calc(100% / 15 - 1px) calc(100% / 15))}
body.vm.a-provision .vm-pv-flaeche>i{position:absolute;bottom:0;display:block;font-style:normal}
body.vm.a-provision .vm-pv-flaeche .teil{transform-origin:50% 100%;transition:transform .7s var(--ease) calc(.25s + var(--i,0) * 140ms)}
body.vm.a-provision .stufen .vm-pv-flaeche .t1{left:0;width:66.667%;height:62.5%;background:#6F9BE6;border-radius:6px 0 0 0}
body.vm.a-provision .stufen .vm-pv-flaeche .t2{left:66.667%;width:33.333%;height:100%;background:var(--vega-marke);border-radius:0 6px 0 0;transition-delay:calc(.45s + var(--i,0) * 140ms)}
body.vm.a-provision .rueck .vm-pv-flaeche .t1{left:0;width:100%;height:100%;background:var(--vega-marke);border-radius:6px 6px 0 0}
body.vm.a-provision .vm-pv-flaeche .mehr{left:0;width:66.667%;bottom:62.5%;height:37.5%;z-index:1;border-radius:6px 0 0 0;
  background:repeating-linear-gradient(135deg,var(--amber) 0 7px,#FFC77A 7px 14px);box-shadow:inset 0 -2px 0 rgba(7,18,38,.35);
  transform-origin:50% 100%;transition:transform .5s var(--feder) calc(1s + var(--i,0) * 140ms),opacity .3s var(--ease) calc(1s + var(--i,0) * 140ms)}
body.vm.a-provision .vm-pv-flaeche em{position:absolute;left:12px;top:7px;font:700 17px/1 var(--f-text);font-style:normal;color:#fff;white-space:nowrap}
body.vm.a-provision .vm-pv-flaeche .mehr em{left:50%;top:50%;translate:-50% -50%;padding:3px 8px;border-radius:6px;background:#fff;color:var(--tinte);font-weight:800}
body.vm.a-provision .vm-pv-flaeche .schwelle{left:66.667%;top:-6px;bottom:-6px;width:0;z-index:2;border-left:2px dashed var(--tinte);opacity:.55}
body.vm.a-provision .vm-pv-flaeche .schwelle em{left:8px;top:-22px;color:var(--grau);font-weight:600}
body.vm.a-provision .stufen .vm-pv-flaeche{margin-top:32px}
body.vm.a-provision tr.warte .vm-pv-flaeche .teil{transform:scaleY(0)}
body.vm.a-provision tr.warte .vm-pv-flaeche .mehr{transform:scaleY(0);opacity:0}
body.vm.a-provision .vm-pv-unterschied{max-width:30em}

/* ---------- 03 Rechner mit Signatur „Teiler“ ---------- */
body.vm.a-provision .vm-pv-rechner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);max-width:1152px;margin-top:clamp(22px,3.6svh,36px);
  padding:clamp(22px,2.6vw,36px);background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-karte)}
body.vm.a-provision .vm-pv-pult{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px 22px}
body.vm.a-provision .vm-pv-pult label{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;font:600 17px/1.3 var(--f-text);color:var(--tinte);transition:color var(--t-kurz)}
body.vm.a-provision .vm-pv-pult label:focus-within{color:var(--link)}
body.vm.a-provision .vm-pv-pult label.s span::before,body.vm.a-provision .vm-pv-pult label.c span::before{content:"";display:inline-block;width:12px;height:12px;margin:0 9px 1px 0;border-radius:3px;vertical-align:middle;background:var(--pv-farbe)}
body.vm.a-provision .vm-pv-pult input{display:block;width:100%;height:58px;padding:0 14px 0 16px;border:1.5px solid var(--linie);border-radius:12px;background:#fff;color:var(--tinte);
  font:800 24px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;transition:border-color var(--t-kurz),box-shadow var(--t-kurz)}
body.vm.a-provision .vm-pv-pult input:hover{border-color:#B9C7DB}
body.vm.a-provision .vm-pv-pult input:focus{border-color:var(--link);box-shadow:0 0 0 3px rgba(22,79,174,.18)}
body.vm.a-provision .vm-pv-pult input:focus-visible{outline-offset:2px}
/* Farben der drei Stücke: Setting Cyan, Closing Vega-Blau, bei dir Amber */
body.vm.a-provision .vm-pv-rechner .s{--pv-farbe:#0E9BD0}
body.vm.a-provision .vm-pv-rechner .c{--pv-farbe:var(--vega-marke)}
body.vm.a-provision .vm-pv-rechner .b{--pv-farbe:var(--amber)}

body.vm.a-provision .vm-pv-teiler{grid-column:1/-1;position:relative;margin:30px 0 18px}
body.vm.a-provision .vm-pv-schein{display:flex;height:clamp(64px,8svh,92px);gap:10px;transition:gap .6s var(--ease) .55s}
body.vm.a-provision .vm-pv-schein .stueck{position:relative;flex:var(--anteil) 1 0;min-width:12px;border-radius:12px;background-color:var(--pv-farbe);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,transparent 2px 10px),linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 0 0 1px rgba(7,18,38,.08),0 14px 26px -18px rgba(7,18,38,.55);
  transition:flex-grow .45s var(--ease),background-color .5s var(--ease) .6s,border-radius .5s var(--ease) .55s}
body.vm.a-provision .vm-pv-schein .stueck.s{--anteil:var(--s);--pv-farbe:#0E9BD0}
body.vm.a-provision .vm-pv-schein .stueck.c{--anteil:var(--c);--pv-farbe:var(--vega-marke)}
body.vm.a-provision .vm-pv-schein .stueck.b{--anteil:var(--b);--pv-farbe:var(--amber)}
/* vor dem Schnitt: ein ganzer Schein */
body.vm.a-provision .vm-pv-teiler.warte .vm-pv-schein{gap:0}
body.vm.a-provision .vm-pv-teiler.warte .stueck{background-color:var(--eis);border-radius:0}
body.vm.a-provision .vm-pv-teiler.warte .stueck.s{border-radius:12px 0 0 12px}
body.vm.a-provision .vm-pv-teiler.warte .stueck.b{border-radius:0 12px 12px 0}
body.vm.a-provision .vm-pv-messer{position:absolute;top:-10px;bottom:-10px;left:0;width:3px;border-radius:2px;background:var(--tinte);opacity:0;pointer-events:none}
/* mehr als 100 %: das Closing-Stück wird rot, bei dir bleibt nichts */
body.vm.a-provision .vm-pv-teiler.ueber .stueck.c{--pv-farbe:var(--rot)}
body.vm.a-provision .vm-pv-teiler.leer .stueck{background-color:var(--linie-hell)}
body.vm.a-provision .vm-pv-schein .stueck{container-type:inline-size}
body.vm.a-provision .vm-pv-schein .stueck svg{position:absolute;left:14px;top:50%;width:30px;height:30px;margin-top:-15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .4s var(--ease) .8s}
body.vm.a-provision .vm-pv-schein .stueck.b svg{stroke:var(--tinte)}
@container (max-width:52px){body.vm.a-provision .vm-pv-schein .stueck svg{display:none}}
body.vm.a-provision .vm-pv-teiler.warte .stueck svg{opacity:0}
/* Schnittmarken: kleine Dreiecke über und unter jedem Schnitt */
body.vm.a-provision .vm-pv-schein .stueck:not(:first-child)::before,body.vm.a-provision .vm-pv-schein .stueck:not(:first-child)::after{content:"";position:absolute;left:-12px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;transition:opacity .3s var(--ease) 1s}
body.vm.a-provision .vm-pv-schein .stueck:not(:first-child)::before{top:-13px;border-top:9px solid var(--tinte)}
body.vm.a-provision .vm-pv-schein .stueck:not(:first-child)::after{bottom:-13px;border-bottom:9px solid var(--tinte)}
body.vm.a-provision .vm-pv-teiler.warte .stueck::before,body.vm.a-provision .vm-pv-teiler.warte .stueck::after{opacity:0}
body.vm.a-provision .vm-pv-ikon{width:26px;height:26px;fill:none;stroke:var(--pv-farbe);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.vm.a-provision .vm-pv-ergebnis>div.b .vm-pv-ikon{stroke:var(--tinte)}
body.vm.a-provision .vm-pv-teiler.ohne-s .stueck.s,body.vm.a-provision .vm-pv-teiler.ohne-c .stueck.c,body.vm.a-provision .vm-pv-teiler.ohne-b .stueck.b{display:none}

body.vm.a-provision .vm-pv-ergebnis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.vm.a-provision .vm-pv-ergebnis>div{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px 20px 18px;overflow:hidden;border-radius:14px;background:var(--papier)}
body.vm.a-provision .vm-pv-ergebnis>div::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--pv-farbe)}
body.vm.a-provision .vm-pv-ergebnis>div.b{background:var(--marker)}
body.vm.a-provision .vm-pv-ergebnis span{font:600 17px/1.3 var(--f-text);color:var(--grau)}
body.vm.a-provision .vm-pv-ergebnis>div.b span{color:var(--tinte)}
body.vm.a-provision .vm-pv-ergebnis output{display:block;font:800 clamp(26px,2.5vw,42px)/1.05 var(--f-text);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--tinte);overflow-wrap:anywhere}
body.vm.a-provision .vm-pv-rechner .rg-rechner-hinweis{grid-column:1/-1;margin-top:16px;font-size:17px;line-height:1.5;color:var(--grau);text-wrap:pretty}
body.vm.a-provision .vm-pv-rechner .rg-rechner-hinweis::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 2px 0;border-radius:50%;background:var(--amber);vertical-align:middle}
/* Fokus koppelt Feld und Stück */
body.vm.a-provision .vm-pv-rechner:has(input[name="satzSetting"]:focus) .stueck.s,
body.vm.a-provision .vm-pv-rechner:has(input[name="satzClosing"]:focus) .stueck.c{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--link)}

/* ---------- 04 Zeitstrahl: Abschluss, Rechnung, Zahlung ---------- */
body.vm.a-provision .vm-pv-zeit{position:relative;margin-top:clamp(18px,3svh,32px);padding-top:58px}
body.vm.a-provision .vm-pv-strahl{position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:20px;height:4px}
body.vm.a-provision .vm-pv-strahl i{position:absolute;display:block}
body.vm.a-provision .vm-pv-strahl .sicher{inset:0;border-radius:2px;background:rgba(255,255,255,.28)}
body.vm.a-provision .vm-pv-strahl .risiko{inset:0;background:repeating-linear-gradient(90deg,#FF8A70 0 12px,transparent 12px 20px);transform-origin:0 50%;transition:transform .9s var(--ease) .2s}
body.vm.a-provision .vm-pv-strahl .zeichen{left:0;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:12px;background:#fff;box-shadow:0 10px 22px -10px rgba(2,8,20,.6)}
body.vm.a-provision .vm-pv-strahl .zeichen svg{width:24px;height:24px;fill:none;stroke:var(--vega-marke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.vm.a-provision .vm-pv-zeit.warte .vm-pv-strahl .risiko{transform:scaleX(0)}
body.vm.a-provision .vm-pv-stationen{display:block;width:100%;border-collapse:separate;border-spacing:0}
body.vm.a-provision .vm-pv-stationen tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
body.vm.a-provision .vm-pv-stationen tr{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-vega);
  transition:transform var(--t-mittel) var(--ease) calc(var(--i,0) * 120ms),opacity var(--t-mittel) var(--ease) calc(var(--i,0) * 120ms)}
body.vm.a-provision .vm-pv-zeit.warte .vm-pv-stationen tr{opacity:0;transform:translateY(20px)}
body.vm.a-provision .vm-pv-stationen th{display:block;margin-bottom:12px;text-align:left;font:600 22px/1.2 var(--f-disp);color:var(--tinte)}
body.vm.a-provision .vm-pv-knoten{position:absolute;left:50%;top:-56px;width:28px;height:28px;margin-left:-14px;display:grid;place-items:center;border-radius:50%;background:var(--koenig);border:4px solid #fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.18)}
body.vm.a-provision .vm-pv-knoten svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
body.vm.a-provision .vm-pv-stationen tr.ziel{box-shadow:0 0 0 3px var(--gruen),var(--sch-vega)}
body.vm.a-provision .vm-pv-stationen tr.ziel .vm-pv-knoten{width:44px;height:44px;top:-64px;margin-left:-22px;background:var(--gruen-text);transition:transform .45s var(--feder) 1.9s}
body.vm.a-provision .vm-pv-zeit.warte .vm-pv-stationen tr.ziel .vm-pv-knoten{transform:scale(.4)}
body.vm.a-provision .vm-pv-stationen td{position:relative;display:block;padding:10px 0 10px 34px;border-top:1px solid var(--linie-hell);font:400 18px/1.5 var(--f-text);color:var(--text)}
body.vm.a-provision .vm-pv-stationen td::before{content:attr(data-label);display:block;margin-bottom:2px;font:700 17px/1.3 var(--f-text);color:var(--grau)}
/* Zeichen vor der Zelle: grüner Haken beim Vorteil, roter Strich beim Risiko (gezeichnet, kein Schriftzeichen) */
body.vm.a-provision .vm-pv-stationen td::after{content:"";position:absolute;left:0;top:13px;width:22px;height:22px}
body.vm.a-provision .vm-pv-stationen td.plus::after{background:var(--gruen-text);-webkit-mask:var(--i-haken) center/contain no-repeat;mask:var(--i-haken) center/contain no-repeat}
body.vm.a-provision .vm-pv-stationen td.minus::after{top:22px;width:18px;height:4px;margin-left:2px;border-radius:2px;background:var(--rot-text)}
body.vm.a-provision .vm-pv-stationen td.plus::before{color:var(--gruen-text)}
body.vm.a-provision .vm-pv-stationen td.minus::before{color:var(--rot-text)}
body.vm.a-provision .vm-pv-zeit-satz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3vw,48px);align-items:start;max-width:none;margin-top:clamp(26px,4svh,40px)}
body.vm.a-provision .vm-pv-zeit-rest{display:block}
body.vm.a-provision .vm-pv-zeit-satz .vm-kernsatz{display:block;margin:0;font:600 var(--fs-leit)/var(--lh-leit) var(--f-disp);color:#fff;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  body.vm.a-provision .vm-pv-zeit.da .vm-pv-strahl .zeichen{animation:pv-zahlung 1.4s var(--zug) .5s both}
  body.vm.a-provision .vm-pv-teiler.da .vm-pv-messer{animation:pv-schnitt .9s var(--zug) .1s both}
}
/* Das Rechnungs-Zeichen läuft einmal bis zur Zahlung und geht dort im grünen Haken auf. Endzustand ohne Bewegung: nur die Stationen. */
body.vm.a-provision .vm-pv-strahl .zeichen{left:100%;opacity:0}
@keyframes pv-zahlung{0%{left:0;opacity:1}45%{left:50%}55%{left:50%}90%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes pv-schnitt{0%{opacity:0;left:0}10%{opacity:.9}90%{opacity:.9}100%{opacity:0;left:100%}}

/* ---------- 05 Was hineingehört: Satz zur Gutschrift unter dem Zettel ---------- */
body.vm.a-provision .vm-pv-gutschrift{max-width:760px;margin-top:clamp(22px,3.4svh,32px)}

/* ---------- 06 Vorlage als Blatt, daneben der Wasserfall ---------- */
body.vm.a-provision .vm-pv-blatt{position:relative;max-width:1152px;margin-top:clamp(22px,3.6svh,36px);padding:44px clamp(22px,3vw,44px) 30px;overflow:hidden;
  background:#fff;border-radius:10px;box-shadow:0 30px 60px -32px rgba(7,18,38,.45),0 1px 0 rgba(7,18,38,.06);
  transition:transform .7s var(--ease),opacity .5s var(--ease)}
body.vm.a-provision .vm-pv-blatt::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,var(--vega-marke),var(--cyan))}
body.vm.a-provision .vm-pv-blatt.warte{opacity:0;transform:translateY(26px) rotate(-.4deg)}
body.vm.a-provision .vm-pv-kopfdaten{display:block;width:100%;max-width:760px;border-collapse:separate;border-spacing:0}
body.vm.a-provision .vm-pv-kopfdaten tbody{display:grid}
body.vm.a-provision .vm-pv-kopfdaten tr{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px dashed var(--linie)}
body.vm.a-provision .vm-pv-kopfdaten th{text-align:left;font:700 17px/1.4 var(--f-text);color:var(--grau)}
body.vm.a-provision .vm-pv-kopfdaten td{font:500 17px/1.45 var(--f-mono);color:var(--tinte);overflow-wrap:anywhere}
body.vm.a-provision .vm-pv-kopfdaten tr:first-child th,body.vm.a-provision .vm-pv-kopfdaten tr:first-child td{font:600 clamp(22px,2vw,28px)/1.2 var(--f-disp);color:var(--tinte)}
body.vm.a-provision .vm-pv-posten{width:100%;margin-top:28px;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
body.vm.a-provision .vm-pv-posten th,body.vm.a-provision .vm-pv-posten td{padding:12px 12px;text-align:left;vertical-align:baseline;font:400 17px/1.4 var(--f-text);color:var(--text);border-bottom:1px solid var(--linie-hell)}
body.vm.a-provision .vm-pv-posten thead th{font-weight:700;color:var(--grau);border-bottom:2px solid var(--tinte);white-space:nowrap}
body.vm.a-provision .vm-pv-posten tbody th{font-weight:700;color:var(--tinte);white-space:nowrap}
body.vm.a-provision .vm-pv-posten .zahl{text-align:right;white-space:nowrap}
body.vm.a-provision .vm-pv-posten thead th:nth-child(4),body.vm.a-provision .vm-pv-posten thead th:nth-child(6),body.vm.a-provision .vm-pv-posten thead th:nth-child(7){text-align:right}
body.vm.a-provision .vm-pv-posten tr.storno :is(th,td){color:var(--rot-text)}
body.vm.a-provision .vm-pv-posten tr.summe :is(th,td){border-top:2px solid var(--tinte);font-weight:700;color:var(--tinte)}
body.vm.a-provision .vm-pv-posten tr:is(.summe,.steuer,.aus) th{text-align:right}
body.vm.a-provision .vm-pv-posten tr.aus :is(th,td){border-bottom:0;font:800 22px/1.2 var(--f-text);color:var(--tinte)}
body.vm.a-provision .vm-pv-posten tr.aus td{background:linear-gradient(var(--marker),var(--marker)) 100% 82%/100% .5em no-repeat}
body.vm.a-provision .vm-pv-vorlage-unten{margin-top:clamp(26px,4svh,40px);align-items:center;row-gap:24px}
body.vm.a-provision .vm-pv-vorlage-text{grid-column:1/7}
body.vm.a-provision .vm-pv-vorlage-text .vm-absatz+.vm-absatz{margin-top:1em}
body.vm.a-provision code{padding:2px 8px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font:500 17px/1.6 var(--f-mono);color:var(--tinte);overflow-wrap:anywhere;word-break:break-word}

/* Wasserfall: jede Zeile ein Balken von --a bis --z (Anteil an 1.080 €, der höchsten Zwischensumme) */
body.vm.a-provision .vm-pv-fall{grid-column:7/13;display:grid;gap:10px;margin:0;padding:24px 26px;background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-karte)}
body.vm.a-provision .vm-pv-fall .zeile{display:grid;grid-template-columns:minmax(104px,32%) minmax(0,1fr) auto;align-items:center;column-gap:14px}
body.vm.a-provision .vm-pv-fall .name{font:600 17px/1.25 var(--f-text);color:var(--grau)}
body.vm.a-provision .vm-pv-fall .wert{font:800 17px/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;color:var(--tinte);text-align:right;white-space:nowrap}
body.vm.a-provision .vm-pv-fall .spur{position:relative;display:block;height:26px}
body.vm.a-provision .vm-pv-fall .balken{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--z) - var(--a)) * 100%);min-width:6px;border-radius:5px;background:var(--vega-marke);
  transform-origin:0 50%;transition:transform .6s var(--ease) calc(.2s + var(--i,0) * 130ms)}
body.vm.a-provision .vm-pv-fall .zeile:not(:last-child) .balken::after{content:"";position:absolute;right:-1px;top:100%;height:10px;border-right:2px dotted var(--linie)}
body.vm.a-provision .vm-pv-fall .minus .balken{background:repeating-linear-gradient(135deg,var(--rot) 0 6px,#FF8A70 6px 12px);transform-origin:100% 50%}
body.vm.a-provision .vm-pv-fall .minus .balken::after{right:auto;left:-1px}
body.vm.a-provision .vm-pv-fall .minus .wert{color:var(--rot-text)}
body.vm.a-provision .vm-pv-fall .summe .balken{background:var(--tinte)}
body.vm.a-provision .vm-pv-fall .summe .name,body.vm.a-provision .vm-pv-fall .aus .name{color:var(--tinte)}
body.vm.a-provision .vm-pv-fall .steuer .balken{background:var(--cyan)}
body.vm.a-provision .vm-pv-fall .aus .balken{background:var(--amber)}
body.vm.a-provision .vm-pv-fall .aus .wert{font-size:20px}
body.vm.a-provision .vm-pv-fall.warte .balken{transform:scaleX(0)}

/* ---------- 07 Gesetzes-Register ---------- */
body.vm.a-provision .vm-pv-recht{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt);margin:clamp(22px,3.6svh,36px) 0 0;padding:0}
body.vm.a-provision .vm-pv-recht li{position:relative;display:block;padding:18px 20px 20px;border-radius:var(--r-l);font:400 18px/1.55 var(--f-text);color:var(--text);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)}
body.vm.a-provision .vm-pv-recht li.de{--lt:var(--de-text);background:var(--de-flaeche)}
body.vm.a-provision .vm-pv-recht li.at{--lt:var(--at-text);background:var(--at-flaeche)}
body.vm.a-provision .vm-pv-recht li.warte{opacity:0;transform:translateY(20px)}
body.vm.a-provision .vm-pv-recht li>b{color:var(--lt)}
body.vm.a-provision .vm-pv-para{float:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0 0 6px 14px}
body.vm.a-provision .vm-pv-para .vm-para-zahl{font:600 clamp(24px,2vw,30px)/1 var(--f-disp);letter-spacing:-.01em;color:var(--lt);white-space:nowrap}
body.vm.a-provision .vm-pv-para .kz{flex:none;padding:5px 10px;border-radius:8px;background:var(--lt);font:600 17px/1 var(--f-mono);color:#fff}
body.vm.a-provision .vm-pv-hinweis{margin-top:20px;font-size:17px;line-height:1.5;color:var(--grau)}

/* ---------- 08 Fehler: Kacheln etwas dichter, damit fünf Fehler in ein Laptop-Fenster passen ---------- */
body.vm.a-provision .vm-pv-fehler-band .vm-kacheln>li{padding:22px 22px 20px}
body.vm.a-provision .vm-pv-fehler-band .vm-kachel-kopf{height:40px;margin-bottom:10px}
body.vm.a-provision .vm-pv-fehler-band .vm-kachel-kopf svg{width:40px;height:40px}
body.vm.a-provision .vm-pv-fehler-band .vm-kacheln.rot>li::after{top:20px;right:20px}

/* ---------- 09 Vega: Aufnahme und Punkte nebeneinander ---------- */
body.vm.a-provision .vm-pv-wege{margin-top:clamp(22px,3.6svh,36px)}
body.vm.a-provision .vm-pv-vega{margin-top:clamp(28px,4.4svh,48px);align-items:start;row-gap:14px}
body.vm.a-provision .vm-pv-vega .vm-schirm{grid-column:1/7;grid-row:1/3;width:100%}
body.vm.a-provision .vm-pv-vega-satz{grid-column:7/13;grid-row:1;max-width:none}
body.vm.a-provision .vm-pv-vega .vm-punkte{grid-column:7/13;grid-row:2/4;margin:0;max-width:none}
body.vm.a-provision .vm-pv-vega .vm-weiter{grid-column:1/7;grid-row:3;margin:0;max-width:none}

/* ---------- Mittlere Breiten ---------- */
@media (max-width:1100px) and (min-width:641px){
  body.vm.a-provision .vm-pv-modelle tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.vm.a-provision .vm-pv-nachsatz{columns:auto}
  body.vm.a-provision .vm-pv-recht{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.vm.a-provision .vm-pv-vorlage-text,body.vm.a-provision .vm-pv-fall{grid-column:1/-1}
  body.vm.a-provision .vm-pv-vega>*{grid-column:1/-1;grid-row:auto}
  body.vm.a-provision .vm-pv-vega .vm-schirm{width:min(100%,1000px,calc((100svh - var(--nav) - 140px) * 1.6))}
  body.vm.a-provision .vm-pv-staffel tr{grid-template-columns:minmax(0,1fr) minmax(130px,auto);row-gap:6px}
  body.vm.a-provision .vm-pv-fehler-band .vm-kacheln>li{padding:16px 18px 14px}
  body.vm.a-provision .vm-pv-fehler-band .vm-kachel-kopf{height:32px;margin-bottom:8px}
  body.vm.a-provision .vm-pv-fehler-band .vm-kachel-kopf svg{width:32px;height:32px}
  body.vm.a-provision .vm-pv-staffel th{grid-column:1/-1}
}

/* ---------- Handy (bis 640 px oder Hochformat bis 1023 px) ---------- */
@media (max-width:640px),(max-width:1023px) and (orientation:portrait){
  body.vm.a-provision .vm-fahrplan a{min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  body.vm.a-provision .vm-kopf-bild{margin-top:32px}
  body.vm.a-provision .vm-pv-modelle tbody{grid-template-columns:minmax(0,1fr);gap:14px}
  body.vm.a-provision .vm-pv-modelle th{padding:20px 18px 8px}
  body.vm.a-provision .vm-pv-modelle td{padding-inline:18px}
  body.vm.a-provision .vm-pv-modelle td.vm-pv-passt{padding:12px 18px 16px}

  body.vm.a-provision .vm-pv-staffel tr{display:block;padding:20px}
  body.vm.a-provision .vm-pv-staffel th{display:block;margin-bottom:6px}
  body.vm.a-provision .vm-pv-staffel td{display:block}
  body.vm.a-provision .vm-pv-provision{margin-top:14px;text-align:left}
  body.vm.a-provision .vm-pv-flaeche{height:80px}

  body.vm.a-provision .vm-pv-rechner{display:block;padding:20px}
  body.vm.a-provision .vm-pv-pult{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.vm.a-provision .vm-pv-pult .vm-pv-betrag{grid-column:1/-1}
  body.vm.a-provision .vm-pv-ergebnis{grid-template-columns:minmax(0,1fr);gap:8px}
  body.vm.a-provision .vm-pv-ergebnis>div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:16px 16px 14px}
  body.vm.a-provision .vm-pv-ergebnis output{font-size:26px;white-space:nowrap;overflow-wrap:normal}

  body.vm.a-provision .vm-pv-zeit{padding-top:0;padding-left:0}
  body.vm.a-provision .vm-pv-strahl{display:none}
  body.vm.a-provision .vm-pv-stationen tbody{grid-template-columns:minmax(0,1fr);gap:14px}
  body.vm.a-provision .vm-pv-stationen tr{padding:20px 20px 16px}
  body.vm.a-provision .vm-pv-stationen th{display:flex;align-items:center;gap:12px}
  body.vm.a-provision .vm-pv-knoten,body.vm.a-provision .vm-pv-stationen tr.ziel .vm-pv-knoten{position:static;flex:none;width:28px;height:28px;margin:0;border-width:3px;transform:none}
  body.vm.a-provision .vm-pv-stationen tr.ziel .vm-pv-knoten svg{width:16px;height:16px}

  body.vm.a-provision .vm-pv-zwei,body.vm.a-provision .vm-pv-zeit-satz{display:block}
  body.vm.a-provision .vm-pv-nachsatz{columns:auto}
  body.vm.a-provision .vm-pv-zwei .vm-absatz+.vm-absatz{margin-top:1em}
  body.vm.a-provision .vm-pv-zeit-satz .vm-kernsatz{margin-bottom:.55em}
  body.vm.a-provision .vm-pv-beispiel-band .vm-aufmacher{aspect-ratio:4/3}

  body.vm.a-provision .vm-pv-blatt{padding:34px 18px 20px}
  body.vm.a-provision .vm-pv-kopfdaten tr{grid-template-columns:minmax(0,1fr);gap:2px}
  body.vm.a-provision .vm-pv-posten,body.vm.a-provision .vm-pv-posten tbody{display:block}
  body.vm.a-provision .vm-pv-posten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body.vm.a-provision .vm-pv-posten tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:8px;padding:14px 0;border-bottom:1px solid var(--linie-hell)}
  body.vm.a-provision .vm-pv-posten th,body.vm.a-provision .vm-pv-posten td{display:block;padding:0;border:0;text-align:left}
  body.vm.a-provision .vm-pv-posten tbody th{grid-column:1/-1;font-size:18px}
  body.vm.a-provision .vm-pv-posten td[data-label]::before{content:attr(data-label);display:block;font-weight:600;color:var(--grau)}
  body.vm.a-provision .vm-pv-posten .zahl{text-align:left}
  body.vm.a-provision .vm-pv-posten tr:is(.summe,.steuer,.aus){grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  body.vm.a-provision .vm-pv-posten tr:is(.summe,.steuer,.aus) th{grid-column:auto;text-align:left}
  body.vm.a-provision .vm-pv-posten tr.summe{border-top:2px solid var(--tinte)}
  body.vm.a-provision .vm-pv-posten tr.summe :is(th,td){border-top:0}
  body.vm.a-provision .vm-pv-vorlage-unten{display:block}
  body.vm.a-provision .vm-pv-fall{margin-top:24px;padding:20px 18px}
  body.vm.a-provision .vm-pv-fall .zeile{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  body.vm.a-provision .vm-pv-fall .spur{grid-column:1/-1;grid-row:2}

  body.vm.a-provision .vm-pv-recht{grid-template-columns:minmax(0,1fr);gap:14px}
  body.vm.a-provision .vm-pv-recht li{padding:20px}

  body.vm.a-provision .vm-pv-vega{display:block}
  body.vm.a-provision .vm-pv-vega .vm-schirm{margin-top:24px}
  body.vm.a-provision .vm-pv-vega .vm-punkte{margin-top:24px}
}

/* ---------- Druck: die Vorlage auf einem Blatt ---------- */
@media print{
  body.vm.a-provision .vm-pv-blatt{box-shadow:none;border:1px solid #999}
}