/* ===========================================================================
   Management-Vertrag in der App — WOERTLICH aus management-vertrag.html
   ---------------------------------------------------------------------------
   KEIN Nachbau. NICHT von Hand bearbeiten.
   Erzeugt von werkzeuge/vertrag-holen.py — bei Aenderungen am Vertrag das
   Werkzeug erneut laufen lassen, danach werkzeuge/stempel.py.
   ===========================================================================*/

/* Der Bereich ist der Messpunkt: Die Handy-Regeln unten fragen ihn ab,
   nicht das Fenster. Ohne das saehe der Rechner anders aus als das Handy. */
#bildVertrag { container-type: inline-size; container-name: vtrrahmen; }


  /* Schriften lokal — nie ueber ein CDN (Hausregel). */
  @font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
    src:url(/_astro/manrope-latin-wght-normal.DHIcAJRg.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;
    src:url(/_astro/bricolage-grotesque-latin-wght-normal.DLoelf7F.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

  /* ---------- AUREON Signal: dunkel als Standard, hell nur zum Drucken ---------- */
  :root {
    --bg:#0d0a0c;
    --flaeche:#151013;
    --karte:#1E1519;
    --karte-hoch:#241a20;
    --ink:#F3E9EC;
    --ink-soft:#b6a7ad;
    --ink-schwach:#9c8f95;
    --linie:rgba(243,233,236,.12);
    --linie-stark:rgba(243,233,236,.22);
    /* Lila, wie von Mert festgelegt (29.08.2026: "mach es nicht rotlich,
       diesmal lila.", erneut am 03.09.2026: "management vertrag wie davor
       lila"). Am 03.09. war die Seite zwischenzeitlich auf die Jade-Palette
       der Portal-Startseite umgestellt - das ist hier zurueckgenommen.
       AUREON tritt als eigenes Management auf und behaelt seinen eigenen Ton.
       --signal-hell ist die Textfassung: reines #8B5CF6 auf #0d0a0c traegt
       nur Kontrast 3,6, das aufgehellte #C4B5FD kommt auf 9,4 und bleibt
       lesbar. Die Kartenform (14/10/8 px Radius) bleibt wie im aktuellen
       Modellauswahl-Entwurf; zurueckgenommen wurde nur die Farbe. */
    --signal:#8B5CF6;
    --signal-tief:#7C3AED;
    --signal-hell:#C4B5FD;
    --ok:#3ddc97;
    --warn:#ffc46b;
    --err:#ff6b7d;
    --r-gross:14px; --r-mittel:10px; --r-klein:8px;
    --kurve:cubic-bezier(.2,.8,.2,1);
    --blatt:min(940px, 100%);
  }
  #bildVertrag * {box-sizing:border-box}
  html {-webkit-text-size-adjust:100%}
  #bildVertrag {
    margin:0; background:var(--bg); color:var(--ink);
    font:400 15px/1.7 'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  #bildVertrag h1, #bildVertrag h2, #bildVertrag h3 {font-family:'Bricolage Grotesque','Manrope',sans-serif;letter-spacing:-.02em}
  #bildVertrag a {color:var(--ink)}
  #bildVertrag ::selection {background:rgba(139,92,246,.34)}

  /* ---------- Kopfleiste ---------- */
  #bildVertrag .mv-top {
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px clamp(16px,4vw,34px);
    background:rgba(9,12,11,.88); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linie);
  }
  #bildVertrag .mv-top__marke {display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0}
  #bildVertrag .mv-top__marke img {height:34px; width:auto; display:block}
  #bildVertrag .mv-top__wort {font:800 12px/1 'Manrope',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}
  #bildVertrag .mv-top__zurueck {
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    padding:9px 15px; border-radius:8px; border:1px solid var(--linie-stark);
    background:rgba(243,233,236,.045); color:var(--ink); font-size:13px; font-weight:700;
    transition:background var(--kurve) .22s, border-color var(--kurve) .22s;
  }
  #bildVertrag .mv-top__zurueck:hover {background:rgba(243,233,236,.1); border-color:rgba(243,233,236,.32)}
  #bildVertrag .mv-top__zurueck svg {width:15px;height:15px;flex:none}

  /* ---------- Fortschritt ----------
     Ein 2 px hoher Strich war zwar da, aber niemand erkennt darin einen
     Fortschritt. Jetzt mit Beschriftung und Zaehler: man sieht, wie viel
     noch fehlt, ohne die Seite durchzuscrollen. */
  #bildVertrag .mv-fortschritt {
    position:sticky; top:59px; z-index:39;
    padding:16px clamp(16px,4vw,34px) 12px;
    background:rgba(9,12,11,.94); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linie);
  }
  #bildVertrag .mv-fortschritt__zeile {
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    max-width:var(--blatt); margin:0 auto 7px;
  }
  #bildVertrag .mv-fortschritt__text {
    font:800 11px/1 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft); transition:color var(--kurve) .3s;
  }
  #bildVertrag .mv-fortschritt__zahl {
    font:700 12px/1 'Manrope',sans-serif; color:var(--ink-schwach);
    font-variant-numeric:tabular-nums; flex:none;
  }
  #bildVertrag .mv-fortschritt__gleis {
    max-width:var(--blatt); margin:0 auto; height:6px; border-radius:999px;
    background:rgba(243,233,236,.09); overflow:hidden;
  }
  #bildVertrag .mv-fortschritt__balken {
    height:100%; width:0; border-radius:999px;
    background:linear-gradient(90deg, var(--signal-tief), var(--signal));
    transition:width .45s var(--kurve), background var(--kurve) .3s;
  }
  /* Fertig: der Balken wechselt auf Gruen, der Text sagt, was jetzt geht. */
  #bildVertrag .mv-fortschritt[data-fertig="1"] .mv-fortschritt__balken {
    background:linear-gradient(90deg,#2fae7a,var(--ok));
  }
  #bildVertrag .mv-fortschritt[data-fertig="1"] .mv-fortschritt__text {color:var(--ok)}
  @media print{ #bildVertrag .mv-fortschritt {display:none !important} }

  #bildVertrag .mv-huelle {max-width:var(--blatt); margin:0 auto; padding:0 clamp(16px,4vw,28px) 90px}

  /* ---------- Buehne ---------- */
  #bildVertrag .mv-buehne {padding:clamp(38px,7vw,66px) 0 clamp(26px,4vw,38px)}
  #bildVertrag .mv-augenbraue {font:800 11px/1 'Manrope',sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--signal-hell); margin:0 0 16px}
  #bildVertrag .mv-buehne h1 {margin:0 0 14px; font-size:clamp(32px,7.4vw,52px); line-height:1.04; font-weight:800}
  #bildVertrag .mv-buehne__unter {margin:0; font-size:clamp(15px,2.4vw,17px); color:var(--ink-soft); max-width:62ch}
  #bildVertrag .mv-stand {margin-top:20px; font-size:12.5px; color:var(--ink-schwach)}

  /* ---------- Vorteile ----------
     Vorher: drei gleich grosse Karten, je ein Symbolquadrat links, darunter
     Titel und Text. Genau das Muster, das auf jeder zweiten Seite steht -
     austauschbar, ohne Rangfolge, ohne eine einzige pruefbare Zahl.

     Jetzt traegt die Sektion eine Rangfolge: eine breite Leitkarte mit der
     staerksten Aussage, darunter zwei schmalere. Jede fuehrt mit einer Zahl
     statt mit einem Symbol - 0 EUR, 30 %, 500 EUR bleiben haengen, ein
     Pfeil-Symbol nicht. Die Symbolquadrate sind ersatzlos weg. */
  #bildVertrag .mv-vorteile {margin-top:34px; display:grid; gap:12px; grid-template-columns:1fr}
  #bildVertrag .mv-vorteil {
    position:relative; overflow:hidden;
    padding:24px 22px 22px; border-radius:var(--r-gross);
    border:1px solid var(--linie);
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(139,92,246,.15) 0%, rgba(139,92,246,0) 58%),
      var(--karte);
  }
  /* Feine Lichtkante oben - gibt Tiefe, ohne sich in den Vordergrund zu draengen. */
  #bildVertrag .mv-vorteil::before {
    content:""; position:absolute; top:0; left:22px; right:22px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(196,181,253,.5), transparent);
  }
  #bildVertrag .mv-vorteil__zahl {
    display:block;
    font:800 clamp(26px,6.2vw,34px)/1 'Bricolage Grotesque','Manrope',sans-serif;
    letter-spacing:-.035em; color:#fff;
  }
  /* Der Muenzstapel steht NEBEN der Zahl, nicht darunter (Mert: "daneben").
     Er haengt bewusst ausserhalb von `b`: die Regel `.mv-vorteil__zahl span`
     unten wuerde ihn sonst als Unterzeile behandeln und auf eine eigene
     Zeile zwingen. */
  #bildVertrag .mv-vorteil__kopfreihe {
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  }
  #bildVertrag .mv-vorteil .geld { margin-top:6px; --geld-breite:16px; --geld-hoehe:4px; --geld-spalt:5px }
  #bildVertrag .mv-vorteil__zahl span {
    display:block; margin-top:9px;
    font:800 11.5px/1.35 'Manrope',sans-serif; letter-spacing:.13em;
    text-transform:uppercase; color:var(--signal-hell);
  }
  #bildVertrag .mv-vorteil h3 {margin:15px 0 6px; font-size:16.5px; font-weight:800; color:#fff; letter-spacing:-.012em}
  #bildVertrag .mv-vorteil p {margin:0; font-size:14px; line-height:1.62; color:var(--ink-soft)}
  #bildVertrag .mv-vorteil p b {color:var(--ink)}

  /* Leitkarte: eine Hauptaussage je Sektion, Groessensprung Faktor 2 - die
     Zahl steht hier auf 58 px gegen 38 px in den beiden darunter. */
  #bildVertrag .mv-vorteil--leit {
    background:
      radial-gradient(90% 130% at 100% 0%, rgba(124,58,237,.30) 0%, rgba(124,58,237,0) 62%),
      linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.02)),
      var(--karte-hoch);
    border-color:rgba(139,92,246,.32);
  }
  #bildVertrag .mv-vorteil--leit .mv-vorteil__zahl {font-size:clamp(44px,12vw,58px)}
  #bildVertrag .mv-vorteil--leit h3 {font-size:19px}
  #bildVertrag .mv-vorteil--leit p {font-size:14.5px; max-width:54ch}

  @container vtrrahmen (min-width:820px){
    #bildVertrag .mv-vorteile {grid-template-columns:1fr 1fr; gap:14px}
    #bildVertrag .mv-vorteil--leit {grid-column:1 / -1; padding:30px 30px 28px}
  }

  /* ---------- Hinweis ---------- */
  #bildVertrag .mv-hinweis {
    margin:26px 0 0; padding:16px 19px;
    border:1px solid var(--linie); border-left:3px solid var(--signal);
    border-radius:0 var(--r-mittel) var(--r-mittel) 0;
    background:rgba(243,233,236,.035); font-size:13.5px; line-height:1.68; color:var(--ink-soft);
  }
  #bildVertrag .mv-hinweis b {color:var(--ink)}

  /* ===== FUEHRUNG DURCH DEN VERTRAG ======================================
     Nachbau von "Wizard Steps" (21st.dev, @ddoemonn) in Vanilla: Kachel-
     schiene mit fuellenden Verbindungen, richtungsabhaengiges Blaettern,
     erledigte Schritte anklickbar. Das Original ist React + motion; diese
     Seite laedt beides nicht, deshalb Keyframes statt Federn.
     ====================================================================== */
  #bildVertrag .mvf {
    position:sticky; top:0; z-index:30;
    /* 06.09.2026 - Mert: "150". Der Abstand zwischen Leiste und Schritt ist
       ein LAYOUT-Mass, kein Scroll-Mass: solange die Leiste nicht klebt,
       wandert sie beim Scrollen mit, und der Abstand bleibt derselbe. Ich
       hatte ihn zuerst ueber das Sprungziel zu loesen versucht - das konnte
       nicht funktionieren. Hier gehoert er hin. */
    margin:0 0 150px; padding:14px 0 13px;
    /* 06.09.2026 - hier stand ein Verlauf, dessen untere 24 % durchsichtig
       waren. Genau dort sitzen aber die Kacheln - und durch sie schien der
       Abschnitt darunter hindurch. Im Bild las man "acebook" quer durch die
       Schiene. Die Leiste ist jetzt ueber ihre volle Hoehe DECKEND; der
       weiche Auslauf haengt als eigene Flaeche UNTER ihr, wo er niemanden
       stoert. */
    background:var(--bg);
  }
  #bildVertrag .mvf::after {
    content:''; position:absolute; left:0; right:0; top:100%; height:22px;
    background:linear-gradient(180deg, var(--bg), rgba(13,10,12,0));
    pointer-events:none;
  }
  #bildVertrag .mvf__modus {
    display:inline-flex; gap:3px; padding:3px; margin:0 0 15px;
    border-radius:11px; background:var(--karte); border:1px solid var(--linie);
  }
  #bildVertrag .mvf__modusknopf {
    appearance:none; border:0; background:none; cursor:pointer;
    padding:7px 13px; border-radius:9px;
    font:700 12.5px/1 'Manrope',sans-serif; color:var(--ink-schwach);
    white-space:nowrap;   /* zwei Zeilen im Umschalter sahen kaputt aus */
    transition:color .18s, background .18s;
  }
  #bildVertrag .mvf__modusknopf.is-an { background:var(--karte-hoch); color:var(--ink); }
  #bildVertrag .mvf__modusknopf:hover { color:var(--ink); }
  #bildVertrag .mvf__marke { margin:0 0 10px; font:700 13px/1.25 'Manrope',sans-serif; color:var(--ink); }
  #bildVertrag .mvf__schiene { display:flex; align-items:center; gap:5px; list-style:none; margin:0; padding:0; }
  #bildVertrag .mvf__schiene li { display:flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; }
  #bildVertrag .mvf__schiene li:last-child { flex:0 0 auto; }
  #bildVertrag .mvf__kachel {
    appearance:none; padding:0; cursor:default;
    width:28px; height:28px; flex:none;
    display:grid; place-items:center;
    border-radius:8px; border:1px solid var(--linie-stark); background:var(--karte);
    font:600 11.5px/1 'Manrope',sans-serif; font-variant-numeric:tabular-nums;
    color:var(--ink-schwach); transform:scale(.92);
    transition:transform .28s var(--kurve), background .18s, color .18s, border-color .18s;
  }
  #bildVertrag .mvf__kachel[data-lage="hier"] {
    transform:scale(1); color:var(--ink);
    border-color:var(--signal); background:var(--karte-hoch);
  }
  /* Der Haken wird GEZEICHNET, nicht eingeblendet. Ein Haken, der von der
     Spitze her entsteht, liest sich als "gerade abgehakt" - ein Haken, der
     einfach da ist, als Zustand. Die Laenge 240 ist die gemessene Bahnlaenge
     der Polylinie im 256er Koordinatenfeld. */
  @keyframes mvfHaken{ from{ stroke-dashoffset:240 } to{ stroke-dashoffset:0 } }
  #bildVertrag .mvf__kachel svg polyline {
    stroke-dasharray:240; stroke-dashoffset:0;
    animation:mvfHaken .38s var(--kurve) both;
  }
  /* Der aktive Schritt bluetet einmal auf, wenn er drankommt - einmal, nicht
     im Dauerpuls. Eine Schiene, die staendig pocht, macht die Seite unruhig. */
  @keyframes mvfRing{
    from{ box-shadow:0 0 0 0 rgba(139,92,246,.5) }
    to  { box-shadow:0 0 0 8px rgba(139,92,246,0) }
  }
  #bildVertrag .mvf__kachel[data-lage="hier"] { animation:mvfRing .7s ease-out; }
  @media (prefers-reduced-motion:reduce){
    #bildVertrag .mvf__kachel svg polyline { animation:none; stroke-dashoffset:0 }
    #bildVertrag .mvf__kachel[data-lage="hier"] { animation:none }
  }

  #bildVertrag .mvf__kachel[data-lage="fertig"] {
    cursor:pointer; background:var(--signal); border-color:var(--signal); color:#fff;
  }
  #bildVertrag .mvf__kachel[data-lage="fertig"]:hover { background:var(--signal-tief); }
  #bildVertrag .mvf__kachel:focus-visible { outline:2px solid var(--signal-hell); outline-offset:2px; }
  #bildVertrag .mvf__kachel svg { width:12px; height:12px; }
  #bildVertrag .mvf__gleis {
    position:relative; height:3px; flex:1 1 auto; min-width:8px;
    border-radius:2px; background:var(--linie); overflow:hidden;
  }
  #bildVertrag .mvf__gleis i {
    position:absolute; inset:0; border-radius:2px;
    /* Am Kopf heller als am Fuss - die Fuellung liest sich dadurch als Strom
       in eine Richtung, nicht als wachsender Balken. */
    background:linear-gradient(90deg, var(--signal), var(--signal-hell));
    transform:scaleX(0); transform-origin:left;
    transition:transform .34s var(--kurve);
  }
  #bildVertrag .mvf__gleis[data-voll="1"] i { transform:scaleX(1); }

  /* Richtungsabhaengiges Blaettern. --mvf-x setzt die Fuehrung je nach
     Richtung auf +22px (vorwaerts) oder -22px (zurueck). */
  @keyframes mvfRein{
    from{ opacity:0; transform:translateX(var(--mvf-x,22px)) }
    to  { opacity:1; transform:none }
  }
  #bildVertrag .mvf-blatt { animation:mvfRein .3s var(--kurve) both; }

  #bildVertrag .mvf__nav {
    display:flex; align-items:center; gap:12px; margin-top:28px;
    /* 06.09.2026 - der eigentliche Grund, warum der Anfang eines Schrittes
       hinter der Leiste verschwand: Es fehlte SCROLLWEG. Gemessen stand die
       Seite bereits am Maximum (scrollHeight 3355 minus Fensterhoehe 802 =
       2553) - der Browser KONNTE nicht weiter, also blieb der Schritt zu
       hoch stehen. Keine Rechnung der Welt haette das geloest; es brauchte
       Platz.
       Diese Luft steht unter der Navigation, also unter dem letzten Element
       des Schrittes - sie ist leer, aber sie traegt keinen Inhalt und
       versteckt auch keinen. */
    margin-bottom:44vh;
  }
  #bildVertrag .mvf__zurueck, #bildVertrag .mvf__weiter {
    appearance:none; cursor:pointer; min-height:44px; padding:0 20px;
    border-radius:11px; font:700 14px/1 'Manrope',sans-serif;
    transition:transform .18s var(--kurve), background .18s, border-color .18s;
  }
  #bildVertrag .mvf__zurueck { border:1px solid var(--linie-stark); background:transparent; color:var(--ink-soft); }
  #bildVertrag .mvf__zurueck:hover { border-color:var(--ink-schwach); color:var(--ink); }
  #bildVertrag .mvf__weiter {
    margin-left:auto; border:0; background:var(--signal); color:#fff;
    box-shadow:0 12px 28px -14px rgba(139,92,246,.9);
  }
  #bildVertrag .mvf__weiter:hover { transform:translateY(-2px); background:var(--signal-tief); }
  #bildVertrag .mvf__zurueck[hidden] { display:none }

  /* Der vollstaendige Vertragstext wird nicht geloescht, nur eingeklappt -
     ein Vertrag muss jederzeit vollstaendig lesbar sein. */
  #bildVertrag .mvf__auftun {
    appearance:none; cursor:pointer; width:100%; text-align:left;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:52px; padding:0 16px; margin:4px 0 0;
    border:1px solid var(--linie-stark); border-radius:var(--r-gross);
    background:var(--karte); color:var(--ink);
    font:700 14px/1.35 'Manrope',sans-serif;
  }
  #bildVertrag .mvf__auftun:hover { border-color:var(--signal); }
  #bildVertrag .mvf__auftun span { font-weight:600; font-size:12.5px; color:var(--ink-schwach) }

  /* ===== ZUSAMMENFASSUNG ================================================ */
  #bildVertrag .mvz {
    margin:0 0 20px; padding:20px 20px 18px;
    border-radius:var(--r-gross); border:1px solid var(--linie);
    background:
      radial-gradient(120% 150% at 100% 0%, rgba(139,92,246,.13), rgba(139,92,246,0) 60%),
      var(--karte);
  }
  #bildVertrag .mvz__auge { margin:0 0 4px; font:800 10px/1 'Manrope',sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--signal-hell) }
  #bildVertrag .mvz__titel { margin:0 0 15px; font-size:21px; font-weight:800; letter-spacing:-.02em }
  #bildVertrag .mvz__liste { display:grid; grid-template-columns:max-content 1fr; gap:9px 14px; margin:0; max-width:640px }
  #bildVertrag .mvz__liste dt { font-size:12.5px; color:var(--ink-schwach) }
  #bildVertrag .mvz__liste dd { margin:0; font-size:13.5px; font-weight:700; color:var(--ink) }
  #bildVertrag .mvz__satz { margin:15px 0 0; font-size:13px; line-height:1.6; color:var(--ink-soft); max-width:62ch }
  @container vtrrahmen (max-width:430px){
    #bildVertrag .mvz__liste { grid-template-columns:1fr; gap:0 }
    #bildVertrag .mvz__liste dd { margin-bottom:10px }
  }

  /* Ausgeblendete Schritte: eigene Klasse, NICHT das hidden-Attribut. Die
     Pflichtfeld-Pruefung filtert mit `:not([hidden])` - mit dem Attribut
     waeren Felder aus verborgenen Schritten aus der Pruefung gefallen. */
  #bildVertrag .mvf-weg { display:none !important }

  /* Luft ueber jedem Schritt, damit die klebende Leiste die Ueberschrift
     nicht verdeckt. Wert setzt die Fuehrung nach der echten Hoehe. */
  /* 06.09.2026 - hier stand zusaetzlich `scroll-margin-top` mit demselben
     Wert wie das `scroll-padding-top` unten. Beide Polster ADDIEREN sich:
     260 + 260 = 520, und genau dort landete der Abschnitt auch (gemessen:
     top 520 gegen eine Leistenunterkante von 244, also 276 px Luft statt
     der gedachten 16). Das Polster gehoert an den Scroll-Behaelter, nicht
     zusaetzlich an jeden Abschnitt - deshalb bleibt nur `scroll-padding-top`. */
  /* 06.09.2026 - der eigentlich richtige Hebel: `scroll-padding-top` am
     Scroll-Behaelter. Damit rechnet der BROWSER den Sprung selbst, inklusive
     Begrenzung am Seitenende - und genau dafuer gibt es die Eigenschaft bei
     klebenden Kopfzeilen. Meine beiden Handrechnungen davor lagen daneben:
     gemessen begann der Abschnitt in allen fuenf Schritten oberhalb der
     Leistenunterkante. Den Wert setzt die Fuehrung nach der echten Hoehe. */
  html { scroll-padding-top:var(--mvf-luft, 260px) }

  /* ---------- Abschnitte ---------- */
  #bildVertrag .mv-abschnitt {
    margin:26px 0 0; padding:clamp(20px,4vw,30px);
    background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-gross);
  }
  #bildVertrag .mv-abschnitt__kopf {display:flex; align-items:baseline; gap:12px; margin:0 0 6px}
  #bildVertrag .mv-abschnitt__nr {
    font:800 12px/1 'Manrope',sans-serif; letter-spacing:.1em; color:var(--signal-hell);
    border:1px solid rgba(139,92,246,.45); border-radius:8px; padding:6px 9px; flex:none;
  }
  #bildVertrag .mv-abschnitt h2 {margin:0; font-size:clamp(19px,3.4vw,24px); font-weight:800; color:#fff}
  #bildVertrag .mv-abschnitt__unter {margin:8px 0 20px; font-size:13.5px; color:var(--ink-soft); max-width:64ch}

  /* ---------- Formular ---------- */
  #bildVertrag .mv-gitter {display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
  #bildVertrag .mv-gitter--voll {grid-template-columns:1fr}
  #bildVertrag .mv-feld {display:flex; flex-direction:column; gap:7px; min-width:0}
  #bildVertrag .mv-feld--breit {grid-column:1/-1}
  #bildVertrag .mv-feld > label {font:700 12px/1.3 'Manrope',sans-serif; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase}
  #bildVertrag .mv-feld > label .pflicht {color:var(--signal-hell); margin-left:3px}
  #bildVertrag .mv-feld input, #bildVertrag .mv-feld textarea, #bildVertrag .mv-feld select {
    width:100%; padding:12px 14px; font:400 15px/1.5 'Manrope',sans-serif; color:var(--ink);
    background:rgba(243,233,236,.05); border:1px solid var(--linie-stark); border-radius:var(--r-klein);
    transition:border-color var(--kurve) .2s, background var(--kurve) .2s;
  }
  #bildVertrag .mv-feld textarea {min-height:88px; resize:vertical}
  #bildVertrag .mv-feld input::placeholder, #bildVertrag .mv-feld textarea::placeholder {color:var(--ink-schwach)}
  #bildVertrag .mv-feld input:focus, #bildVertrag .mv-feld textarea:focus, #bildVertrag .mv-feld select:focus {
    outline:none; border-color:rgba(243,233,236,.5); background:rgba(243,233,236,.09);
  }
  #bildVertrag .mv-feld input[aria-invalid="true"], #bildVertrag .mv-feld textarea[aria-invalid="true"] {border-color:var(--err)}

  /* DATUMSFELDER (Mert, 06.09.2026: "Das steht raus. Das muss drinbleiben.")
     iOS-Safari behandelt ein Datumsfeld nicht wie ein Textfeld, sondern wie ein
     eigenes Bedienelement: Es bringt eine eigene Mindestbreite mit, ignoriert
     width:100% und richtet den Wert mittig aus. Auf dem iPhone stand das Feld
     dadurch ueber die Kartenkante hinaus und sah anders aus als "Ort" darueber.
     Am Rechner faellt es nicht auf - dort passt es. Deshalb:
       appearance:none  nimmt dem Feld die Eigenart des Systemelements
       min-width:0      laesst es ueberhaupt erst schrumpfen
       max-width:100%   haelt es im Rahmen, egal wie breit es sich haette
     Die Hoehe wird ausgerechnet statt festgenagelt, damit sie den Textfeldern
     folgt, wenn jemand die Schrift groesser stellt: Zeilenhoehe 1.5em plus
     zweimal 12px Innenabstand plus zweimal 1px Rahmen. */
  #bildVertrag .mv-feld input[type="date"] {
    -webkit-appearance:none; appearance:none;
    width:100%; min-width:0; max-width:100%;
    /* Nicht min-height, sondern height: sonst ist das Feld 2px hoeher als
       "Ort" daneben, weil der innere Wert von Safari eine eigene Zeilenbox
       bekommt. Gerechnet, nicht festgenagelt - so folgt es der Schriftgroesse:
       Zeilenhoehe 1.5em + 2x12px Innenabstand + 2x1px Rahmen. */
    height:calc(1.5em + 26px);
    text-align:left;
  }
  #bildVertrag .mv-feld input[type="date"]::-webkit-datetime-edit { padding:0 }
  #bildVertrag .mv-feld input[type="date"]::-webkit-date-and-time-value { text-align:left; margin:0 }
  #bildVertrag .mv-feld input[type="date"]::-webkit-calendar-picker-indicator { margin-left:auto; opacity:.55 }
  #bildVertrag .mv-feld__hilfe {font-size:12px; color:var(--ink-schwach); line-height:1.55}

  /* Gesetzliche Vertretung erscheint nur, wenn das Geburtsdatum am
     Unterschriftstag ein Alter unter 18 ergibt. Der Block bleibt im selben
     Formularfluss, damit niemand erst am Ende von Zusatzfeldern ueberrascht wird. */
  #bildVertrag .mv-vertretung {
    margin-top:20px; padding:18px; border-radius:var(--r-mittel);
    border:1px solid rgba(255,196,107,.34); background:rgba(255,196,107,.055);
  }
  #bildVertrag .mv-vertretung[hidden] {display:none}
  #bildVertrag .mv-vertretung__kopf {display:flex; align-items:flex-start; gap:11px; margin-bottom:16px}
  #bildVertrag .mv-vertretung__zeichen {
    display:grid; place-content:center; flex:none; width:28px; height:28px;
    border-radius:50%; border:1px solid rgba(255,196,107,.45);
    color:var(--warn); font:800 13px/1 'Manrope',sans-serif;
  }
  #bildVertrag .mv-vertretung__kopf b {display:block; color:var(--ink); font-size:14.5px}
  #bildVertrag .mv-vertretung__kopf span {display:block; margin-top:3px; color:var(--ink-soft); font-size:12.5px; line-height:1.55}

  /* ---------- Plattform-Auswahl ---------- */
  #bildVertrag .mv-chips {display:flex; flex-wrap:wrap; gap:9px}
  #bildVertrag .mv-chip {
    position:relative; display:inline-flex; align-items:center; gap:9px;
    padding:11px 18px; border-radius:100px;
    border:1px solid var(--linie-stark); background:rgba(243,233,236,.04);
    cursor:pointer; user-select:none; font-size:13.5px; color:var(--ink-soft);
    transition:border-color .2s var(--kurve), background .2s var(--kurve),
      color .2s var(--kurve), box-shadow .2s var(--kurve), transform .2s var(--kurve);
  }
  #bildVertrag .mv-chip:hover {border-color:rgba(196,181,253,.5); color:var(--ink)}
  #bildVertrag .mv-chip input {position:absolute; opacity:0; width:0; height:0}
  #bildVertrag .mv-chip__logo {display:inline-grid; place-items:center; flex:none; opacity:.66; transition:opacity var(--kurve) .2s}
  #bildVertrag .mv-chip__logo svg {width:16px; height:16px; display:block}
  #bildVertrag .mv-chip__name {font-weight:700; white-space:nowrap}
  #bildVertrag .mv-chip.on {
    border-color:rgba(196,181,253,.72);
    background:linear-gradient(120deg, rgba(124,58,237,.3), rgba(139,92,246,.15));
    box-shadow:inset 0 0 0 1px rgba(196,181,253,.08), 0 8px 24px rgba(5,88,66,.13);
    color:#fff;
  }
  #bildVertrag .mv-chip.on .mv-chip__logo {opacity:1}
  #bildVertrag .mv-chip:focus-within {outline:2px solid var(--signal-hell); outline-offset:3px}

  /* ---------- Frei waehlbares Management-Modell ---------- */
  #bildVertrag .mv-feld__titel {
    display:block; margin:0 0 9px; font:700 12px/1.3 'Manrope',sans-serif;
    letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase;
  }
  #bildVertrag .mv-modelle {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
    overflow:hidden; border:1px solid var(--linie-stark); border-radius:12px;
    background:var(--flaeche);
  }
  /* ===== LICHTRAND UM DIE GETROFFENE WAHL ==============================
     Nachbau von "Border Beam Panel" (21st.dev, @rmahammad / Motiq, MIT) in
     Vanilla - Mert: "21st.dev, orientier dich an diesem Design."

     WO ER SITZT, UND WARUM NICHT AN DER EINZELNEN KARTE:
     Die drei Modelle haben keine eigene Kontur. Sie sind Segmente in EINEM
     Rahmen, getrennt nur durch `border-left`, und jede Karte hat
     `overflow:hidden`. Ein Ring um eine einzelne Karte haette also nichts
     zum Umlaufen und waere an drei Seiten beschnitten. Der Ring gehoert um
     die Gruppe - er sagt "hier ist entschieden", nicht "diese eine Kachel".

     WIE ER GEBAUT IST (aus dem Original uebernommen):
     Ein umlaufender `conic-gradient` als Flaeche, aus dem eine zweilagige
     Alphamaske die Mitte herausschneidet (`mask-composite: exclude`) - uebrig
     bleibt ein 2 px schmaler Ring. Der Winkel laeuft ueber eine mit
     `@property` registrierte Eigenschaft; ohne die Registrierung koennte CSS
     einen Winkel nicht weich interpolieren und der Ring stuende still.

     Ein Detail aus dem Original, das leicht untergeht und wichtig ist: der
     Fuss des Kometen ist nicht `transparent`, sondern die eigene Farbe mit
     4 % Deckkraft. `transparent` ist rgba(0,0,0,0) - eine Rampe dorthin
     haengt sichtbar grau durch.

     ABWEICHUNGEN, jede begruendet:
     - Kein Glow-Schein: `.mv-modelle` hat `overflow:hidden`, eine unscharfe
       Kopie waere an der Kante hart abgeschnitten (feste Regel "nie
       abgeschnitten"). Der Ring allein traegt.
     - Kein Federn beim Zeigen: eine Vertragsseite ist kein Spielplatz. Der
       Ring laeuft ruhig und immer gleich - er erscheint erst, wenn wirklich
       gewaehlt wurde, und genau das ist die Aussage.
     - `inset:0` statt `-1px`, damit ihn der eigene `overflow:hidden` nicht
       anschneidet.

     Merts Regel "nur wenn jemand hinsieht": `--mv-lauf` wird von
     assets/mv-einfuehrung.js auf `paused` gesetzt, sobald die Auswahl aus
     dem Bild ist. In der Fuehrung steht der Schritt ohnehin auf
     `display:none`, sobald man weiterblaettert - dort laeuft eine Animation
     gar nicht erst. */
  @property --mv-beam-a{ syntax:'<angle>'; inherits:false; initial-value:0deg }

  @keyframes mvBeam{ to{ --mv-beam-a:360deg } }

  #bildVertrag .mv-modelle { position:relative; isolation:isolate }
  #bildVertrag .mv-modelle:has(input:checked)::after {
    content:''; position:absolute; inset:0; z-index:2;
    border-radius:inherit; pointer-events:none; padding:2px;
    background:conic-gradient(from var(--mv-beam-a),
      transparent 0deg,
      color-mix(in srgb, var(--signal) 4%, transparent) 18deg,
      color-mix(in srgb, var(--signal) 55%, transparent) 46deg,
      var(--signal-hell) 56deg,
      color-mix(in srgb, var(--signal-hell) 22%, #ffffff) 60deg,
      transparent 63deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    animation:mvBeam 8.5s linear infinite;
    animation-play-state:var(--mv-lauf, running);
  }
  /* Wer keine Bewegung will, bekommt den Ring still an einer sichtbaren
     Ecke - die Wahl bleibt damit trotzdem markiert. */
  @media (prefers-reduced-motion:reduce){
    #bildVertrag .mv-modelle:has(input:checked)::after { animation:none; --mv-beam-a:40deg }
  }
  /* Hohe Kontraste des Systems zeichnen eigene Raender - dann stoert der
     Ring nur. */
  @media (forced-colors:active){
    #bildVertrag .mv-modelle:has(input:checked)::after { display:none }
  }

  #bildVertrag .mv-modelle[aria-invalid="true"] {
    border-color:rgba(255,107,125,.72);
    box-shadow:0 0 0 3px rgba(255,107,125,.08);
  }
  #bildVertrag .mv-modell {
    position:relative; display:flex; flex-direction:column; min-width:0; min-height:214px;
    padding:20px 19px 18px; cursor:pointer; user-select:none;
    overflow:hidden; border:0; border-radius:0;
    background:transparent; color:var(--ink-soft);
    box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
    transition:transform .24s var(--kurve), border-color .24s var(--kurve),
      background .24s var(--kurve), color .24s var(--kurve), box-shadow .24s var(--kurve);
  }
  #bildVertrag .mv-modell + .mv-modell {border-left:1px solid var(--linie-stark)}
  #bildVertrag .mv-modell::before {
    content:""; position:absolute; inset:0 18px auto; height:2px; border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--signal-hell),transparent);
    opacity:0; transform:scaleX(.45); transform-origin:center;
    transition:opacity .24s var(--kurve), transform .32s var(--kurve);
  }
  #bildVertrag .mv-modell:hover {
    transform:none; background:rgba(243,233,236,.045); color:var(--ink);
    box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
  }
  #bildVertrag .mv-modell:active {transform:translateY(0) scale(.995)}
  #bildVertrag .mv-modell input {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  #bildVertrag .mv-modell__kopf {display:flex; align-items:center; justify-content:space-between; gap:10px}
  #bildVertrag .mv-modell__name {font:800 17px/1.2 'Bricolage Grotesque','Manrope',sans-serif; color:#fff}
  #bildVertrag .mv-modell__wahl {
    width:22px; height:22px; flex:none; border-radius:50%; border:1.5px solid var(--linie-stark);
    display:grid; place-content:center; background:rgba(243,233,236,.025);
    box-shadow:0 0 0 0 rgba(139,92,246,0);
    transition:border-color .22s var(--kurve), background .22s var(--kurve),
      box-shadow .22s var(--kurve), transform .22s var(--kurve);
  }
  #bildVertrag .mv-modell__wahl::after {
    content:""; width:8px; height:8px; border-radius:50%; background:var(--signal-hell);
    opacity:0; transform:scale(.35);
    transition:opacity .18s var(--kurve), transform .24s var(--kurve);
  }
  #bildVertrag .mv-modell__quote {
    display:inline-flex; align-items:baseline; gap:.16em; width:max-content; margin-top:18px;
    font:800 31px/1 'Bricolage Grotesque','Manrope',sans-serif; color:var(--signal-hell);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  /* 05.09.2026 - Mert: "Macht da so eine Animation rein daneben, dass so
     Geld angezeigt wird. Bei 30 % nicht so viel, bei 45 % mehr, bei 60 %
     noch mehr." Die Stapel stehen neben der Prozentzahl, nicht darunter,
     und wachsen von unten hoch. Was sie zeigen, steht direkt darunter:
     normaler, hoeherer, voller Betreuungsaufwand - nicht ein Verdienst. */
  #bildVertrag .mv-modell__reihe {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:12px; margin-top:18px;
  }
  #bildVertrag .mv-modell__reihe .mv-modell__quote {margin-top:0; flex:0 0 auto}
  /* Kleinere Muenzen als die Grundgroesse: die Karte hat nur 178 px Inhalt,
     und sie schneidet ab (`overflow:hidden`). Gemessen bei 307, 390 und
     1440 px Fensterbreite - der Stapel bleibt ueberall innerhalb. */
  #bildVertrag .mv-modell .geld { --geld-breite:15px; --geld-hoehe:4px; --geld-luft:3px; --geld-spalt:5px }
  /* Ungewaehlt zurueckgenommen, gewaehlt in voller Akzentfarbe - dieselbe
     Logik wie beim Rest der Karte. */
  #bildVertrag .mv-modell {--geld-farbe:rgba(196,181,253,.45)}
  #bildVertrag .mv-modell:hover {--geld-farbe:rgba(196,181,253,.62)}
  #bildVertrag .mv-modell:has(input:checked) {--geld-farbe:var(--signal-hell)}
  #bildVertrag .mv-modell__zahl {display:inline-block; min-width:2ch; text-align:right}
  #bildVertrag .mv-modell__aufwand {margin-top:8px; font-size:13px; font-weight:700; color:var(--ink)}
  #bildVertrag .mv-modell__umfang {margin-top:10px; font-size:12px; line-height:1.55; color:var(--ink-schwach)}
  #bildVertrag .mv-modell:has(input:checked) {
    color:var(--ink); background:rgba(139,92,246,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  }
  #bildVertrag .mv-modell:has(input:checked)::before {opacity:.9; transform:scaleX(1)}
  #bildVertrag .mv-modell:has(input:checked) .mv-modell__wahl {
    border-color:var(--signal-hell); background:rgba(139,92,246,.11);
    box-shadow:0 0 0 4px rgba(139,92,246,.12);
  }
  #bildVertrag .mv-modell:has(input:checked) .mv-modell__wahl::after {opacity:1; transform:scale(1)}
  #bildVertrag .mv-modell:has(input:checked) .mv-modell__umfang {color:var(--ink-soft)}
  #bildVertrag .mv-modell:has(input:focus-visible) .mv-modell__wahl {
    outline:2px solid rgba(196,181,253,.92); outline-offset:3px;
  }
  #bildVertrag .mv-modell-hinweis {
    margin:14px 0 0; padding:13px 15px; border-left:3px solid var(--signal);
    background:rgba(139,92,246,.07); color:var(--ink-soft); font-size:12.5px; line-height:1.62;
  }
  #bildVertrag .mv-modell-hinweis b {color:var(--ink)}

  @container vtrrahmen (max-width:720px){
    #bildVertrag .mv-modelle {grid-template-columns:1fr}
    #bildVertrag .mv-modell {min-height:0; padding:18px}
    #bildVertrag .mv-modell + .mv-modell {border-left:0; border-top:1px solid var(--linie-stark)}
    #bildVertrag .mv-modell__quote {margin-top:13px}
  }

  /* ---------- Bestaetigungen ---------- */
  #bildVertrag .mv-haken {
    display:flex; gap:13px; align-items:flex-start; padding:15px 16px;
    border:1px solid var(--linie); border-radius:var(--r-mittel);
    background:rgba(243,233,236,.03); cursor:pointer; margin-bottom:11px;
    transition:border-color .24s var(--kurve), background .24s var(--kurve),
      box-shadow .24s var(--kurve), transform .24s var(--kurve);
  }
  #bildVertrag .mv-haken:hover {border-color:var(--linie-stark); background:rgba(243,233,236,.055)}
  #bildVertrag .mv-haken:has(input:checked) {
    border-color:rgba(139,92,246,.72);
    background:
      linear-gradient(112deg, rgba(124,58,237,.18), rgba(139,92,246,.08) 54%, rgba(196,181,253,.035)),
      var(--karte);
    box-shadow:inset 0 0 0 1px rgba(196,181,253,.08), 0 12px 30px rgba(5,88,66,.14);
  }
  #bildVertrag .mv-haken:has(input:checked):hover {
    border-color:rgba(196,181,253,.78);
    background:
      linear-gradient(112deg, rgba(124,58,237,.22), rgba(139,92,246,.1) 54%, rgba(196,181,253,.05)),
      var(--karte);
  }
  #bildVertrag .mv-haken input {
    appearance:none; -webkit-appearance:none; flex:none; margin:1px 0 0;
    width:22px; height:22px; border-radius:5px;
    border:1.5px solid var(--linie-stark); background:rgba(243,233,236,.05); cursor:pointer;
    display:grid; place-content:center;
    transition:border-color .2s var(--kurve), background .2s var(--kurve),
      box-shadow .2s var(--kurve), transform .2s var(--kurve);
  }
  #bildVertrag .mv-haken input::after {
    content:""; width:11px; height:6px; border:2px solid var(--signal-hell); border-top:0; border-right:0;
    opacity:0; transform:rotate(-45deg) scale(.35) translate(1px,-1px);
    transition:transform .22s var(--kurve), opacity .14s ease-out;
  }
  #bildVertrag .mv-haken input:checked {
    border-color:var(--signal-hell);
    background:linear-gradient(145deg, var(--signal), var(--signal-tief));
    box-shadow:0 0 0 4px rgba(139,92,246,.16), inset 0 1px 0 rgba(255,255,255,.22);
    animation:mvHakenEin .28s var(--kurve) both;
  }
  #bildVertrag .mv-haken input:checked::after {opacity:1; transform:rotate(-45deg) scale(1) translate(1px,-1px)}
  #bildVertrag .mv-haken input:focus-visible {outline:2px solid var(--signal); outline-offset:2px}
  #bildVertrag .mv-haken__text {font-size:14px; line-height:1.62; color:var(--ink-soft)}
  #bildVertrag .mv-haken__text b {color:var(--ink)}
  @keyframes mvHakenEin{
    0%{transform:scale(.82)}
    65%{transform:scale(1.1)}
    100%{transform:scale(1)}
  }

  /* ---------- Vertragskoerper: gleiche Klassen wie das Papier-Original, dunkel ---------- */
  #bildVertrag .mv-vertrag {margin-top:26px}
  #bildVertrag .mv-vertrag .parteien {display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 30px}
  #bildVertrag .mv-vertrag .partei {border:1px solid var(--linie); border-radius:var(--r-mittel); padding:18px 20px; background:rgba(243,233,236,.03)}
  #bildVertrag .mv-vertrag .partei h3 {margin:0 0 4px; font:800 11px/1 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--signal-hell)}
  #bildVertrag .mv-vertrag .partei .name {font:700 17px/1.3 'Manrope',sans-serif; margin:7px 0 8px; color:#fff}
  #bildVertrag .mv-vertrag .partei p {margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-soft)}
  #bildVertrag .mv-vertrag .partei .rolle {margin-top:11px; padding-top:11px; border-top:1px dashed var(--linie); font-size:12.5px; color:var(--ink-schwach)}
  #bildVertrag .mv-vertrag .partei .rolle b {color:var(--ink-soft)}

  #bildVertrag .mv-vertrag .lueck {
    display:inline-block; min-width:150px; border-bottom:1.5px dotted rgba(243,233,236,.32);
    color:var(--ink); font-weight:600;
  }
  #bildVertrag .mv-vertrag .lueck[data-echo]:not(:empty) {border-bottom-color:rgba(139,92,246,.6)}

  #bildVertrag .mv-vertrag .teil {
    margin:42px 0 22px; padding-top:18px; border-top:1px solid var(--linie-stark);
    font:800 11px/1 'Manrope',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--signal-hell);
  }
  #bildVertrag .mv-vertrag .p {margin:0 0 28px}
  #bildVertrag .mv-vertrag .p > h2 {margin:0 0 10px; font:800 19px/1.32 'Bricolage Grotesque','Manrope',sans-serif; color:#fff}
  #bildVertrag .mv-vertrag .p > h2 span {color:var(--signal-hell); margin-right:9px}
  #bildVertrag .mv-vertrag .p ol {margin:0; padding-left:21px; color:var(--ink-soft)}
  #bildVertrag .mv-vertrag .p ol > li {margin-bottom:8px; padding-left:4px}
  #bildVertrag .mv-vertrag .p ol ol {margin-top:7px; list-style:lower-alpha}
  #bildVertrag .mv-vertrag .p li b {color:var(--ink)}
  #bildVertrag .mv-vertrag .p p {margin:0 0 9px; color:var(--ink-soft)}

  #bildVertrag .mv-vertrag .klar {
    margin:12px 0 0; padding:13px 16px; background:rgba(243,233,236,.045);
    border:1px solid var(--linie); border-radius:var(--r-mittel);
    font-size:13.5px; line-height:1.64; color:var(--ink-soft);
  }
  #bildVertrag .mv-vertrag .klar b {color:var(--ink)}
  #bildVertrag .mv-vertrag .klar > b:first-child {
    display:block; font:800 10.5px/1 'Manrope',sans-serif; letter-spacing:.15em;
    text-transform:uppercase; color:var(--signal-hell); margin-bottom:7px;
  }

  #bildVertrag .mv-vertrag .werte {border:1px solid var(--linie); border-radius:var(--r-mittel); overflow:hidden; margin:14px 0 0}
  #bildVertrag .mv-vertrag .werte div {
    display:flex; justify-content:space-between; gap:16px; padding:11px 17px;
    font-size:14px; border-bottom:1px solid var(--linie); color:var(--ink-soft);
  }
  #bildVertrag .mv-vertrag .werte div:last-child {border-bottom:0}
  #bildVertrag .mv-vertrag .werte div:nth-child(odd) {background:rgba(243,233,236,.035)}
  #bildVertrag .mv-vertrag .werte b {font-weight:700; text-align:right; color:var(--ink); flex:none}

  #bildVertrag .mv-vertrag .anlage {
    margin-top:14px; padding:20px 22px; border:1px solid var(--linie-stark);
    border-radius:var(--r-mittel); background:rgba(243,233,236,.03);
  }
  #bildVertrag .mv-vertrag .anlage h3 {margin:0 0 12px; font:800 16px/1.32 'Bricolage Grotesque','Manrope',sans-serif; color:#fff}
  #bildVertrag .mv-vertrag .anlage ul {margin:0; padding-left:19px; color:var(--ink-soft)}
  #bildVertrag .mv-vertrag .anlage li {margin-bottom:7px; font-size:14px}
  #bildVertrag .mv-vertrag .anlage p {color:var(--ink-soft)}
  #bildVertrag .mv-vertrag .anlage .feld {border-top:1px solid var(--linie-stark) !important; color:var(--ink-schwach) !important}
  #bildVertrag .mv-vertrag .ortdatum {display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:24px 0 0}
  #bildVertrag .mv-vertrag .fuss {margin-top:38px; padding-top:16px; border-top:1px solid var(--linie); font-size:12px; color:var(--ink-schwach); line-height:1.6}
  #bildVertrag .mv-vertrag .hinweis {display:none}

  /* ---------- Unterschrift ---------- */
  #bildVertrag .mv-sign-flaeche {
    position:relative; border:1px dashed var(--linie-stark); border-radius:var(--r-mittel);
    background:rgba(243,233,236,.035); overflow:hidden;
  }
  #bildVertrag .mv-sign-pad {display:block; width:100%; height:180px; touch-action:none; cursor:crosshair}
  #bildVertrag .mv-sign-pad[aria-invalid="true"] {outline:2px solid var(--err); outline-offset:-2px}
  #bildVertrag .mv-sign-hint {
    position:absolute; inset:0; display:grid; place-content:center; pointer-events:none;
    font-size:13.5px; color:var(--ink-schwach);
  }
  #bildVertrag .mv-sign-leiste {display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:11px; flex-wrap:wrap}
  #bildVertrag .mv-mini {
    background:none; border:0; color:var(--ink-schwach); font:700 12.5px/1 'Manrope',sans-serif;
    cursor:pointer; text-decoration:underline; padding:6px 0;
  }
  #bildVertrag .mv-mini:hover {color:var(--ink)}
  /* ---------- Knoepfe ---------- */
  #bildVertrag .mv-aktionen {display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
  #bildVertrag .mv-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:15px 26px; border-radius:999px; border:1px solid transparent;
    font:800 14.5px/1 'Manrope',sans-serif; cursor:pointer; text-decoration:none;
    transition:transform var(--kurve) .18s, background var(--kurve) .22s, border-color var(--kurve) .22s;
  }
  #bildVertrag .mv-btn svg {width:17px; height:17px; flex:none}
  #bildVertrag .mv-btn:active {transform:translateY(1px)}
  #bildVertrag .mv-btn--haupt {background:var(--signal-tief); color:#fff}
  #bildVertrag .mv-btn--haupt:hover {background:#0B805F}
  #bildVertrag .mv-btn--haupt:disabled {background:rgba(243,233,236,.1); color:var(--ink-schwach); cursor:not-allowed}
  #bildVertrag .mv-btn--still {background:rgba(243,233,236,.06); color:var(--ink); border-color:var(--linie-stark)}
  #bildVertrag .mv-btn--still:hover {background:rgba(243,233,236,.12)}

  /* ---------- Schimmerrand (21st-Optik) ----------
     Ein umlaufender Lichtreflex auf dem Rand, wie auf den Anmeldekarten:
     zwei Flaechen uebereinander, die untere traegt den rotierenden Verlauf,
     die obere die dunkle Knopffarbe. Der Rand ist die Luecke dazwischen.

     @property macht --dreh animierbar; ohne die Zeile ist ein Winkel fuer
     den Browser nur Text und springt statt zu laufen. Wo @property fehlt,
     bleibt der Rand einfach ruhig stehen - der Knopf sieht trotzdem gut aus. */
  @property --dreh{ syntax:'<angle>'; inherits:false; initial-value:0deg }
  @keyframes mvDrehen{ to{ --dreh:360deg } }

  #bildVertrag .mv-schimmer {position:relative; isolation:isolate}
  #bildVertrag .mv-schimmer::before {
    content:""; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
    background:conic-gradient(from var(--dreh),
      rgba(255,255,255,.05) 0deg, #C4B5FD 62deg, #8B5CF6 108deg,
      rgba(255,255,255,.9) 150deg, #ff6b7d 200deg, rgba(255,255,255,.05) 300deg);
    animation:mvDrehen 5.5s linear infinite;
  }
  /* Merts Dauerregel: laeuft nur, wenn jemand hinsieht. Die Sektion setzt
     das Merkmal, sobald sie im Bild ist - sonst steht der Rand still und
     kostet nichts. */
  #bildVertrag .mv-abschnitt:not([data-sichtbar="1"]) .mv-schimmer::before {animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){ #bildVertrag .mv-schimmer::before {animation:none} }

  #bildVertrag .mv-meldung {margin-top:16px; padding:14px 17px; border-radius:var(--r-mittel); font-size:14px; line-height:1.6; display:none}
  #bildVertrag .mv-meldung[data-art="ok"] {display:block; background:rgba(61,220,151,.1); border:1px solid rgba(61,220,151,.4); color:#a8f0d0}
  #bildVertrag .mv-meldung[data-art="fehler"] {display:block; background:rgba(255,107,125,.1); border:1px solid rgba(255,107,125,.4); color:#FFC0B8}
  #bildVertrag .mv-meldung[data-art="laeuft"] {display:block; background:rgba(243,233,236,.06); border:1px solid var(--linie-stark); color:var(--ink-soft)}

  /* ---------- Erfolg ---------- */
  #bildVertrag .mv-fertig {display:none; text-align:center; padding:clamp(30px,6vw,52px) clamp(20px,4vw,34px)}
  #bildVertrag .mv-fertig[data-an="1"] {display:block}
  #bildVertrag .mv-fertig__zeichen {
    width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
    border:1.5px solid rgba(61,220,151,.5); background:rgba(61,220,151,.08);
    display:grid; place-content:center;
  }
  #bildVertrag .mv-fertig__zeichen svg {width:28px; height:28px; color:var(--ok)}
  #bildVertrag .mv-fertig h2 {margin:0 0 12px; font-size:clamp(24px,4.6vw,32px); color:#fff}
  #bildVertrag .mv-fertig p {margin:0 auto 10px; max-width:56ch; color:var(--ink-soft); font-size:15px}
  #bildVertrag .mv-profil {
    margin:26px auto 0; max-width:520px; text-align:left;
    border:1px solid var(--linie); border-radius:var(--r-mittel); overflow:hidden;
  }
  #bildVertrag .mv-profil > div {display:flex; justify-content:space-between; gap:16px; padding:11px 16px; font-size:13.5px; border-bottom:1px solid var(--linie); color:var(--ink-soft)}
  #bildVertrag .mv-profil > div:last-child {border-bottom:0}
  #bildVertrag .mv-profil > div:nth-child(odd) {background:rgba(243,233,236,.035)}
  #bildVertrag .mv-profil b {color:var(--ink); text-align:right; font-weight:600; word-break:break-word}

  /* ---------- Mobil ---------- */
  @container vtrrahmen (max-width:760px){
    #bildVertrag .mv-gitter {grid-template-columns:1fr}
    #bildVertrag .mv-vertrag .parteien {grid-template-columns:1fr}
    #bildVertrag .mv-vertrag .ortdatum {grid-template-columns:1fr; gap:18px}
    #bildVertrag .mv-top__wort {display:none}
    #bildVertrag .mv-vertrag .werte div {flex-direction:column; gap:3px}
    #bildVertrag .mv-vertrag .werte b {text-align:left}
    #bildVertrag .mv-aktionen .mv-btn {width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    #bildVertrag * {animation-duration:.01ms !important; transition-duration:.01ms !important}
  }

  /* ---------- Druck: helles Papier, nur der Vertrag ---------- */
  @media print{
    #bildVertrag .mv-top, #bildVertrag .mv-fortschritt, #bildVertrag .mv-abschnitt--eingabe, #bildVertrag .mv-aktionen, #bildVertrag .mv-hinweis, #bildVertrag .mv-buehne__unter, #bildVertrag .mv-meldung {display:none !important}
    /* Beim Drucken zaehlt das Dokument, nicht die Fuehrung: Leiste und
       Navigation verschwinden, und was die Fuehrung ausgeblendet hat, wird
       wieder sichtbar - sonst fehlte im Ausdruck der halbe Vertrag. */
    #bildVertrag .mvf, #bildVertrag .mvf__nav, #bildVertrag .mvf__auftun, #bildVertrag .mvz {display:none !important}
    #bildVertrag .mvf-weg:not(.mv-abschnitt--eingabe) {display:block !important}
    #bildVertrag {background:#fff; color:#26221d}
    #bildVertrag .mv-huelle {max-width:none; padding:0}
    #bildVertrag .mv-vertrag .p, #bildVertrag .mv-vertrag .anlage {page-break-inside:avoid}
    #bildVertrag .mv-vertrag .partei, #bildVertrag .mv-vertrag .anlage, #bildVertrag .mv-vertrag .klar, #bildVertrag .mv-vertrag .werte div {background:#f6f0e6; color:#26221d}
    #bildVertrag .mv-vertrag .p > h2, #bildVertrag .mv-vertrag .partei .name, #bildVertrag .mv-vertrag .anlage h3 {color:#1b1712}
    #bildVertrag .mv-vertrag .p ol, #bildVertrag .mv-vertrag .p p, #bildVertrag .mv-vertrag .klar, #bildVertrag .mv-vertrag .partei p {color:#3f382f}
    #bildVertrag .mv-vertrag .lueck {border-bottom-color:#b9ae9a; color:#1b1712}
    #bildVertrag .mv-vertrag .teil, #bildVertrag .mv-vertrag .p > h2 span, #bildVertrag .mv-vertrag .partei h3 {color:#B00D20}
    #bildVertrag .mv-vertrag .werte, #bildVertrag .mv-vertrag .anlage, #bildVertrag .mv-vertrag .partei, #bildVertrag .mv-vertrag .klar {border-color:#e5dcc9}
  }