/* 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; }
/* The width sets the END only (`auto / span N`), so «In neuer Zeile beginnen»
   (`--newline`, after them) pins the start to column 1 and keeps the width. */
.block-form .form-fields > .form-field.form-field--span-1 { grid-column: auto / span 1; }
.block-form .form-fields > .form-field.form-field--span-2 { grid-column: auto / span 2; }
.block-form .form-fields > .form-field.form-field--span-3 { grid-column: auto / span 3; }
.block-form .form-fields > .form-field.form-field--span-4 { grid-column: auto / span 4; }
.block-form .form-fields > .form-field.form-field--span-5 { grid-column: auto / span 5; }
.block-form .form-fields > .form-field.form-field--span-6 { grid-column: auto / span 6; }
.block-form .form-fields > .form-field.form-field--span-7 { grid-column: auto / span 7; }
.block-form .form-fields > .form-field.form-field--span-8 { grid-column: auto / span 8; }
.block-form .form-fields > .form-field.form-field--span-9 { grid-column: auto / span 9; }
.block-form .form-fields > .form-field.form-field--span-10 { grid-column: auto / span 10; }
.block-form .form-fields > .form-field.form-field--span-11 { grid-column: auto / span 11; }
.block-form .form-fields > .form-field.form-field--span-12 { grid-column: auto / span 12; }
.block-form .form-fields > .form-field.form-field--newline { grid-column-start: 1; }
/* In a container up to 728px (the viewport's 768px at the top level): always
   stacked, every field full width — in a narrow column too. Above that the grid
   holds — 4/12 next to 8/12 etc. (!important beats the span classes). */
@container (max-width: 728px) {
    .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.
 * ⚠️ A control is a white PLATE, so it brings its own text AND caret colour —
 * never var(--ink) or var(--accent-fg), which a dark section remaps to white:
 * typed text and the caret would be white on white (SectionDarkPaletteTest).
 * Everything else in this block stands on the section's ground and reads the
 * palette. */
.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(--gray-9);
    caret-color: var(--gray-9);
}
.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.
 * --accent-fg is the focus-ring role (site.css): the accent on a light ground,
 * white on a dark one — a fixed dark blue vanished there. */
.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-errors:focus-visible {
    outline: 3px solid var(--accent-fg); outline-offset: 2px; border-color: var(--accent-fg);
}

/* Pflicht-Markierung (nie allein Farbe: * + sr-only-Text) + Hilfetext (Kontrast ≥7:1).
 * --ink rather than --muted: --muted stays under 7:1 on some accent bands. */
.block-form .form-req { color: var(--err-fg); margin-left: .15rem; font-weight: 700; }
.block-form .form-help { margin: .35rem 0 0; font-size: .85rem; color: var(--ink); }
.block-form .form-req-note { margin: 0 0 var(--size-4); font-size: .9rem; color: var(--ink); }
/* The note above the send button (form settings), the privacy link in it. */
.block-form .form-note { max-width: 70ch; margin: var(--size-5) 0 var(--size-4); font-size: .85rem; line-height: 1.5; color: var(--ink); }
.block-form .form-note a { color: var(--accent-fg); }

/* 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: var(--err-fg); }
.block-form .form-error[hidden] { display: none; }
/* The border belongs to the white plate and stays fixed; the ring stands on the
 * ground and follows it. */
.block-form [aria-invalid="true"] { border-color: #8a0000; outline-color: var(--err-fg); }

/* Fehler-Zusammenfassung (role=alert) — a light plate with its own colours. */
.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; }