.dvf { max-width: 760px; margin: 0 auto; text-align: left; }
.dvf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dvf__progress { display: flex; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; counter-reset: dvf; }
.dvf__progress li { flex: 1; counter-increment: dvf; padding-top: 10px; border-top: 4px solid var(--dv-line, #d9d9d9); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dv-text, #5f5f5f); }
.dvf__progress li::before { content: counter(dvf) ". "; }
.dvf__progress li.is-current { border-top-color: var(--dv-blue, #1a4b7e); color: var(--dv-blue, #1a4b7e); font-weight: 500; }
.dvf__progress li.is-done { border-top-color: var(--dv-blue, #1a4b7e); }
.dvf:not(.is-js) .dvf__progress, .dvf:not(.is-js) .dvf__next, .dvf:not(.is-js) .dvf__back { display: none; }
.dvf__step { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.dvf__step[hidden], .dvf__field[hidden], [hidden].dvf__back, .wp-block-button[hidden] { display: none !important; }
.dvf__step legend { padding: 0; margin: 0 0 18px; font-size: 1.35rem; font-weight: 500; color: var(--dv-head, #303030); outline: none; }
.dvf:not(.is-js) .dvf__step { margin-bottom: 36px; }
.dvf__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dvf__card { position: relative; display: block; padding: 18px 18px 16px; border: 1px solid var(--dv-line, #d9d9d9); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dvf__card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dvf__card-t { display: block; font-weight: 500; color: var(--dv-head, #303030); font-size: 1.05rem; }
.dvf__card-h { display: block; margin-top: 4px; font-size: .9rem; color: var(--dv-text, #5f5f5f); }
@media (hover: hover) { .dvf__card:hover { border-color: var(--dv-blue, #1a4b7e); } }
.dvf__card:has(input:checked) { border-color: var(--dv-blue, #1a4b7e); box-shadow: inset 0 0 0 2px var(--dv-blue, #1a4b7e); }
.dvf__card:has(input:focus-visible) { outline: 3px solid var(--dv-blue, #1a4b7e); outline-offset: 2px; }
.dvf__field { margin: 0 0 18px; }
.dvf__field label, .dvf__label { display: block; margin: 0 0 6px; font-size: .95rem; color: var(--dv-head, #303030); }
.dvf__field .dvf__check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-size: .95rem; color: var(--dv-text, #5f5f5f); }
.dvf__check input { margin-top: 4px; flex: none; }
.dvf input[type="text"], .dvf input[type="email"], .dvf input[type="tel"], .dvf select, .dvf textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--dv-line, #c9c9c9); border-radius: 8px; background: #fff; font: inherit; color: var(--dv-head, #303030); box-sizing: border-box; }
.dvf input:focus-visible, .dvf select:focus-visible, .dvf textarea:focus-visible { outline: 3px solid var(--dv-blue, #1a4b7e); outline-offset: 1px; }
.dvf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.dvf__hint { margin: 0 0 16px; font-size: .85rem; color: var(--dv-text, #5f5f5f); }
.dvf__field .dvf__hint { margin: 6px 0 0; }
.dvf__nav { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dvf__nav .wp-block-button { margin: 0 !important; padding: 0 !important; }
.dvf__nav { padding: 0 !important; margin-left: 0 !important; justify-content: flex-start; }
.dvf__nav button { font-family: inherit; }
.dvf__nav button:disabled { opacity: .6; cursor: wait; }
.dvf [aria-invalid="true"] { border-color: #a12b2b !important; box-shadow: inset 0 0 0 1px #a12b2b; }
.dvf__msg { min-height: 1.4em; margin: 14px 0 0; color: #a12b2b; font-size: .95rem; }
.dvf__errors { margin: 0 0 24px; padding: 14px 18px; border: 1px solid #d9a3a3; border-radius: 8px; background: #fbeeee; color: #6d1f1f; }
.dvf__errors ul { margin: 6px 0 0; padding-left: 20px; }
.dvf__done { padding: 28px; border: 1px solid var(--dv-line, #d9d9d9); border-radius: 10px; background: #fff; text-align: center; }
.dvf__done h3 { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { .dvf__card { transition: none; } }

.dvf__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dvf__pill { position: relative; display: inline-block; margin: 0 !important; }
.dvf__pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dvf__pill span { display: inline-block; padding: 10px 18px; border: 1px solid var(--dv-line, #c9c9c9); border-radius: 999px; background: #fff; color: var(--dv-head, #303030); font-size: .95rem; line-height: 1.3; transition: background .15s, border-color .15s, color .15s; }
@media (hover: hover) { .dvf__pill:hover span { border-color: var(--dv-blue, #1a4b7e); } }
.dvf__pill input:checked + span { background: var(--dv-blue, #1a4b7e); border-color: var(--dv-blue, #1a4b7e); color: #fff; }
.dvf__pill input:focus-visible + span { outline: 3px solid var(--dv-blue, #1a4b7e); outline-offset: 2px; }
.dvf__card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border: 2px solid var(--dv-line, #c9c9c9); border-radius: 6px; background: #fff; }
.dvf__card:has(input:checked)::after { border-color: var(--dv-blue, #1a4b7e); background: var(--dv-blue, #1a4b7e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.dvf__card-t { padding-right: 30px; }
.dvf__req { color: #a12b2b; }
.dvf__step > .dvf__hint:first-of-type { margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .dvf__pill span { transition: none; } }
.dvf__field .dvf__hint.dvf__hint--field { margin: 2px 0 10px; }

/* Befund aus dem Selbstcheck */
.dvf__befund { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 24px; padding: 14px 18px; border: 1.5px solid var(--dv-blue, #1a4b7e); border-radius: 14px; background: #fff; font-size: 15px; }
.dvf__befund[hidden] { display: none; }
.dvf__befund p { margin: 0; }
.dvf__befund-x { min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--dv-line, #c9d3dc); border-radius: 999px; background: #fff; color: var(--dv-head, #0e2a47); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .dvf__befund-x:hover { border-color: var(--dv-blue, #1a4b7e); } }