/* Block «form» — additions to the base form in site.css. Loaded conditionally.
   Built for WCAG 2.2 AAA: contrast ≥7:1 (1.4.6), borders/graphics ≥3:1 (1.4.11),
   focus appearance ≥3px/≥3:1 (2.4.13), target size ≥44px (2.5.5), line height
   ≥1.5 and text blocks ≤~70ch (1.4.8). */

/* Screen readers only (visually suppressed but in the a11y tree). */
.block-form .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Readability (1.4.8): line height, text block width, no justification. */
.block-form { line-height: 1.6; text-align: left; }
.block-form .form-help,
.block-form .form-req-note,
.block-form .form-errors { max-width: 70ch; line-height: 1.5; }

/* Field grid: a real 12-column grid (width per field through span classes).
   IMPORTANT: the span classes need at least the specificity of the default rule
   (`.form-fields > .form-field`), otherwise the default (span 12) wins and
   everything stacks despite a set span. Hence the two-class selectors. */
.block-form .form-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--size-4); align-items: start; }
.block-form .form-fields > .form-field { margin-bottom: 0; min-width: 0; grid-column: span 12; }
.block-form .form-fields > .form-field.form-field--span-1 { grid-column: span 1; }
.block-form .form-fields > .form-field.form-field--span-2 { grid-column: span 2; }
.block-form .form-fields > .form-field.form-field--span-3 { grid-column: span 3; }
.block-form .form-fields > .form-field.form-field--span-4 { grid-column: span 4; }
.block-form .form-fields > .form-field.form-field--span-5 { grid-column: span 5; }
.block-form .form-fields > .form-field.form-field--span-6 { grid-column: span 6; }
.block-form .form-fields > .form-field.form-field--span-7 { grid-column: span 7; }
.block-form .form-fields > .form-field.form-field--span-8 { grid-column: span 8; }
.block-form .form-fields > .form-field.form-field--span-9 { grid-column: span 9; }
.block-form .form-fields > .form-field.form-field--span-10 { grid-column: span 10; }
.block-form .form-fields > .form-field.form-field--span-11 { grid-column: span 11; }
.block-form .form-fields > .form-field.form-field--span-12 { grid-column: span 12; }
/* Up to 768px: always stacked (every field full width). Above that the grid
   holds — 4/12 next to 8/12 etc. (!important beats the span classes). */
@media (max-width: 768px) {
    .block-form .form-fields { grid-template-columns: 1fr; }
    .block-form .form-fields > .form-field { grid-column: 1 / -1 !important; }
}
.block-form .form-field[hidden] { display: none; }

/* All controls: a uniform look, target size ≥44px, border contrast ≥3:1 */
.block-form input:not([type=checkbox]):not([type=radio]),
.block-form select,
.block-form textarea {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: .6rem .7rem; font: inherit;
    line-height: 1.5; border: 1px solid #6b7280; background: #fff; border-radius: 0; color: var(--ink);
}
.block-form textarea { min-height: 120px; resize: vertical; }
.block-form input[type=file] { padding: .5rem; background: var(--gray-0); }

/* Fokus-Darstellung (2.4.13): dicker, kontraststarker Ring, gut sichtbar. */
.block-form input:focus-visible,
.block-form select:focus-visible,
.block-form textarea:focus-visible,
.block-form .btn:focus-visible,
.block-form button:focus-visible,
.block-form a:focus-visible,
.block-form .form-step-title:focus-visible,
.block-form .form-errors:focus-visible {
    outline: 3px solid #08306b; outline-offset: 2px; border-color: #08306b;
}

/* Pflicht-Markierung (nie allein Farbe: * + sr-only-Text) + Hilfetext (Kontrast ≥7:1) */
.block-form .form-req { color: #8a0000; margin-left: .15rem; font-weight: 700; }
.block-form .form-help { margin: .35rem 0 0; font-size: .85rem; color: #3a3a3a; }
.block-form .form-req-note { margin: 0 0 var(--size-4); font-size: .9rem; color: #3a3a3a; }

/* Checkbox / consent plus radio group — target size ≥44px on the label */
.block-form .form-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem 0;
    font-size: 1rem; line-height: 1.5; color: var(--ink); margin: 0; cursor: pointer; }
.block-form .form-check input { width: 1.3rem; height: 1.3rem; margin: 0; flex: none; }
.block-form .form-check span { display: inline; margin: 0; }
.block-form .form-radio { border: 0; padding: 0; margin: 0; min-width: 0; }
.block-form .form-radio legend { padding: 0; font-size: 1rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink); }

/* Fehlermeldungen (3.3.1/3.3.3): Kontrast ≥7:1, klar markiert */
.block-form .form-error { margin: .35rem 0 0; font-size: .9rem; font-weight: 600; color: #8a0000; }
.block-form .form-error[hidden] { display: none; }
.block-form [aria-invalid="true"] { border-color: #8a0000; outline-color: #8a0000; }

/* Fehler-Zusammenfassung (role=alert) */
.block-form .form-errors { margin: 0 0 var(--size-4); padding: var(--size-3) var(--size-4);
    border: 2px solid #8a0000; background: #fdf2f2; color: #5a0000; }
.block-form .form-errors[hidden] { display: none; }
.block-form .form-errors-head { margin: 0 0 .4rem; font-weight: 700; }
.block-form .form-errors ul { margin: 0; padding-left: 1.2rem; }
.block-form .form-errors a { color: #8a0000; text-decoration: underline; }

/* Buttons: target size ≥44px */
.block-form .btn, .block-form button[type=submit] { min-height: 44px; min-width: 44px; }

/* Multi-Step */
.block-form .form-step[hidden] { display: none; }
.block-form .form-step-title { margin: 0 0 var(--size-3); font-size: 1rem; color: #3a3a3a; }
.block-form .form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-3); margin-top: var(--size-4); }
.block-form .form-nav[hidden] { display: none; }
.block-form .form-nav [data-form-next] { margin-left: auto; }
.block-form .form-progress { margin: 0 auto 0 0; font-size: .9rem; color: #3a3a3a; }