/* Formular Widerruf/Kündigung (vnx-vertragserklaerung.tpl). Ergänzt vnx-site.css (Redesign) um Formularfelder,
   Token aus .h-body bzw. venocix-portal.css mit Rückfallwerten. */
.vnx-vertrag .vnx-feld { margin: 0 0 18px; padding: 0; border: 0; }
.vnx-vertrag .vnx-feld label,
.vnx-vertrag .vnx-feld legend { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--vnx-text, #1d2125); }
.vnx-vertrag .vnx-feld-opt { font-weight: 400; color: var(--vnx-text-muted, #6b7280); }
.vnx-vertrag .vnx-feld input[type=text],
.vnx-vertrag .vnx-feld input[type=email],
.vnx-vertrag .vnx-feld input[type=date],
.vnx-vertrag .vnx-feld textarea {
    display: block; width: 100%; padding: 10px 12px; border: 1px solid #767676; border-radius: 8px;
    background: var(--h-soft, #f5f6f8); color: var(--vnx-text, #1d2125); font: 15px/1.4 var(--vnx-font, inherit);
}
.vnx-vertrag .vnx-feld input[type=date] { max-width: 220px; }
/* Feldränder mindestens 3:1 (WCAG 1.4.11): hell #767676 auf #fff 4,5:1, dunkel #7a7a7a auf #242424 3,6:1 */
.darkmode .vnx-vertrag .vnx-feld :is(input[type=text], input[type=email], input[type=date], textarea),
html.lagom-dark-mode .vnx-vertrag .vnx-feld :is(input[type=text], input[type=email], input[type=date], textarea) { border-color: #7a7a7a; }
.vnx-vertrag .vnx-vertrag-form > h2 { margin-bottom: 16px; }
.vnx-vertrag .vnx-pflicht { color: var(--vnx-danger, #c0392b); }
.vnx-vertrag .vnx-vertrag-form > .vnx-vertrag-satz { margin: 0 0 18px; }
.vnx-vertrag .vnx-feld textarea { resize: vertical; min-height: 96px; }
.vnx-vertrag .vnx-feld input:focus-visible,
.vnx-vertrag .vnx-feld textarea:focus-visible,
.vnx-vertrag .vnx-wahl input:focus-visible { outline: 2px solid var(--h-lime, #a3d133); outline-offset: 2px; }
/* Auswahl: Radios 20 px, Zeilen mindestens 44 px hoch (Tap-Ziel, UXB-12) */
.vnx-vertrag .vnx-feld label.vnx-wahl, .vnx-vertrag .vnx-wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 400 !important; cursor: pointer; }
/* Lagom setzt input[type=radio] absolut (für iCheck); hier native Radios im Fluss der Zeile. */
.vnx-vertrag .vnx-wahl input { position: static; clip: auto; pointer-events: auto; flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--h-lime, #a3d133); }
.vnx-vertrag .vnx-feld input[type=date]:disabled { opacity: .5; cursor: not-allowed; }
.vnx-vertrag .vnx-feld-hilfe { margin: 6px 0 0; font-size: 13px; color: var(--vnx-text-muted, #6b7280); }
.vnx-vertrag .vnx-feld-unter { margin-top: 10px; font-weight: 400 !important; color: var(--vnx-text-muted, #6b7280) !important; }
.vnx-vertrag .vnx-feld-fehler input,
.vnx-vertrag .vnx-feld-fehler textarea { border-color: var(--vnx-danger, #c0392b); }
.vnx-vertrag .vnx-feld-meldung { margin: 6px 0 0; font-size: 13px; color: var(--vnx-danger, #c0392b); }
.vnx-vertrag .vnx-vertrag-satz { margin: 4px 0 0; font-weight: 600; }
.vnx-vertrag .vnx-vertrag-form .m-cfg-b { margin-top: 8px; }
.vnx-vertrag .vnx-vertrag-frei { text-align: right; overflow-wrap: anywhere; }
.vnx-vertrag .vnx-vertrag-ok h2 { margin-bottom: 8px; }
.vnx-vertrag .vnx-vertrag-ok .m-dl { margin: 16px 0; }
.vnx-vertrag .vnx-vertrag-aktion { margin-top: 16px; }
.vnx-vertrag .vnx-alert { margin-bottom: 16px; }
.vnx-vertrag .vnx-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media print {
    .vnx-vertrag .vnx-vertrag-aktion { display: none; }
}