/**
 * Vape Age Verify – Formular-Styles (Checkout UND Registrierung)
 *
 * Der Dateiname ist historisch: geladen wird sie auf beiden Seiten
 * (VAV_Checkout::enqueue_assets + VAV_Registration::enqueue_assets). Umbenannt
 * wird sie bewusst nicht – das kostete vier Enqueue-Stellen plus Test-Erwartungen
 * für rein kosmetischen Gewinn.
 *
 * Minimales, unauffälliges Styling das sich dem Shoptimizer-Theme anpasst.
 * Die Felder sehen aus wie normale WooCommerce-Felder.
 */

/* ── Container ─────────────────────────────────────────────────────────────── */
#vav-age-verify {
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
}

/* Gilt für JEDEN Block, der die Klasse trägt – nicht nur #vav-age-verify.
   Ohne diese Verallgemeinerung blieb der inline gerenderte Ausweis-Block
   (#vav-idcard-inline) am Checkout dauerhaft sichtbar (P54). */
.vav-hidden {
    display: none;
}

/* Der unsichtbare Default-Button des Schritt-Formulars (P75, v2.10.7).
   Er fängt die IMPLIZITE ABSENDUNG ab (Enter in einem Textfeld) und schickt sie auf
   den regulären Prüf-Weg – bis v2.10.6 gewann dort der erste Submit-Knopf im DOM, und
   das war der Rücksetzer bzw. der Ausweis-Knopf (Audit A-1, gemessen).

   AUSDRÜCKLICH NICHT `display:none`. Ein ausgeblendeter Knopf wirkt in Chrome zwar
   ebenfalls als Default-Button (im Audit gemessen), aber die Eigenschaft, die wir
   brauchen, ist die eines GERENDERTEN Elements: Der Browser klickt den Default-Button
   wirklich an. Deshalb dieselbe Technik wie bei .vav-sr-only – der Knopf ist da, ist
   1×1 px gross und komplett weggeschnitten. Sicht- und Layoutwirkung: keine
   (`position:absolute` nimmt ihn aus dem Fluss).

   KEIN `outline: none`: Der Knopf ist über `tabindex="-1"` ohnehin nicht per Tastatur
   erreichbar; eine zusätzliche Fokus-Unterdrückung wäre eine Regel, die beim nächsten
   Umbau am falschen Element hängt. */
.vav-default-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    min-height: 0;
}

/* ── Formular-Abschnitte (P56) ─────────────────────────────────────────────── */
.vav-section-title {
    clear: both;
    margin: 32px 0 4px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}

/* Erste Überschrift im Formular: keine Trennlinie über dem Nichts. */
.vav-section-title--first {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.vav-section-hint {
    display: block;
    margin: 0 0 16px;
    font-size: 0.82em;
    line-height: 1.55;
    color: #666;
}

.vav-required-note {
    display: block;
    margin: -8px 0 16px;
    font-size: 0.78em;
    color: #777;
}

/* Feld-Hilfetext unter einem einzelnen Feld. */
.vav-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78em;
    line-height: 1.5;
    color: #777;
}

/* ── „Andere E-Mail-Adresse verwenden" (P74) ────────────────────────────────
   EIN BUTTON, DER WIE EIN LINK AUSSIEHT – und das ist hier die richtige Reihenfolge,
   nicht die bequeme: Der Weg zurück auf Stufe 1 löscht einen Sitzungswert, das gehört
   hinter einen POST samt Nonce (ein GET-Link räumte ihn auch für einen Prefetch ab).
   Aussehen soll er trotzdem wie das, was er ist: ein Nebenweg, kein zweiter Hauptknopf
   neben „Weiter zur Zahlung".
   Die UA-Optik eines Buttons wird deshalb vollständig neutralisiert; Fokus bleibt
   sichtbar (kein `outline: none`), und die Trefferfläche bleibt ein Button. */
.vav-step-reset {
    margin-top: 6px;
}

.vav-linklike {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-decoration: underline;
    cursor: pointer;
    width: auto;
    min-height: 0;
}

.vav-linklike:hover,
.vav-linklike:focus {
    background: none;
    color: inherit;
    text-decoration: none;
}

/* ── Geburtsdatum: Tag · Monat · Jahr ──────────────────────────────────────── */
.vav-dob-group {
    /* UA-Styles des fieldset neutralisieren. min-width:0 ist Pflicht, sonst zwingt
       Firefox die Flexbox auf die Breite des breitesten Kindes.
       KEIN margin-bottom hier: Shoptimizer setzt `.woocommerce-account fieldset
       { margin: 0 }` (höhere Spezifität) und würde es überschreiben. Der Abstand
       sitzt deshalb unten an `.vav-dob-fields`, das kein Theme kennt. */
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.vav-dob-legend {
    /* legend ist in vielen Themes float-/width-anfällig – hart auf Block stellen.
       margin als SHORTHAND: Shoptimizer setzt `legend { margin-left: -30px }`; mit
       einem blossen margin-bottom bliebe das stehen und die Beschriftung
       „Geburtsdatum" stünde 30 px links neben allen anderen Feld-Labels. */
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 0.875em;
    line-height: 1.4;
    color: #333;
}

.vav-dob-hint {
    display: block;
    font-size: 0.78em;
    line-height: 1.5;
    color: #777;
    margin: 0 0 8px;
}

/* Grid statt Flex mit Umbruch: Die Spaltenaufteilung ist damit DETERMINISTISCH.
   Mit flex-wrap landete in einer schmalen Spalte (das Registrierungsformular unter
   „Mein Konto" ist auch auf dem Desktop oft nur ~400 px breit) „Tag + Monat" in der
   ersten und „Jahr" allein in der zweiten Zeile – ein Datum, das man von links oben
   nach links unten lesen muss. minmax(0, 1fr) lässt den Monat mitschrumpfen, statt
   die Gruppe umbrechen zu lassen.
   Der max-width-Deckel hält die drei Felder auch in einer sehr breiten Spalte als
   eine Einheit zusammen, statt das Jahr an den rechten Rand zu schieben. */
.vav-dob-fields {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr) 7em;
    gap: 12px;
    align-items: end;
    max-width: 27em;
    margin-bottom: 18px;   /* trägt den Abstand der Gruppe, siehe .vav-dob-group */
}

.vav-dob-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vav-dob-field label {
    margin-bottom: 4px;
    font-size: 0.78em;
    font-weight: 500;
    color: #555;
}

.vav-dob-field input,
.vav-dob-field select {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.vav-dob-field--day   { grid-column: 1; }
.vav-dob-field--month { grid-column: 2; }
.vav-dob-field--year  { grid-column: 3; }

/* Zweiter Riegel gegen fremde Absatz-Filter (P59/S2-Nachzug).
   Der Altersnachweis-Schritt rendert über `the_content`; `wpautop` läuft dort NACH
   uns und setzt zwischen die drei Spans je ein <br>. Im Grid sind das vollwertige
   Items: das erste belegt Spalte 2, der Monat weicht in Zeile 2 aus, das Jahr in
   Zeile 3 – das Datum steht diagonal. Die Ursache ist in VAV_Age_Step abgestellt
   (suspend_autop); diese Regel hält die Reihenfolge auch dann, wenn ein anderes
   Plugin denselben Filter mitbringt. `display: none` erzeugt gar kein Grid-Item,
   deshalb reicht sie ohne !important – und ein <br> ist hier nie beabsichtigt. */
.vav-dob-fields > br {
    display: none;
}

.vav-dob-field input:focus,
.vav-dob-field select:focus {
    border-color: #96588a;  /* WooCommerce primary-Farbe; ggf. anpassen */
    outline: none;
    box-shadow: 0 0 0 2px rgba(150, 88, 138, 0.15);
}

/* Setzt registration.js, wenn der Server einen Geburtsdatums-Fehler gemeldet hat. */
.vav-dob-group.vav-has-error .vav-dob-field input,
.vav-dob-group.vav-has-error .vav-dob-field select {
    border-color: #cc1818;
}

/* ── Checkbox-Zeilen (ersetzt die früheren Inline-Styles der Templates) ─────── */
/* Die Doppel-Klasse `.form-row.vav-check-row` ist Absicht: Shoptimizer setzt
   `.form-row label { font-weight:600; display:block }` mit derselben Spezifität
   wie ein einfaches `.vav-check-row label` und gewinnt dann über die Ladereihenfolge
   – das Häkchen sass dadurch über statt neben dem Text. Beide Templates geben den
   Zeilen ohnehin `form-row` mit. Kein !important nötig. */
.vav-check-row {
    margin-bottom: 14px;
}

.form-row.vav-check-row label,
.vav-check-row label.vav-check-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.5;
    font-size: 0.9em;
    font-weight: 400;
}

.form-row.vav-check-row input[type="checkbox"],
.vav-check-row label.vav-check-label input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ── Zwei Spalten auf dem Altersnachweis-Schritt (P60) ─────────────────────── */
/* Links Anmeldung, rechts Gast. Die Reihenfolge kommt aus `grid-column` und nicht
   aus der DOM-Reihenfolge: im Markup steht die Login-Spalte zuerst, damit sie auf
   dem Handy (eine Spalte, Stapel in DOM-Reihenfolge) oben landet. */
.vav-step-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 20px statt der früheren 40px – NICHT weil die Spalten enger zusammenrücken
       sollen, sondern weil zwischen ihnen jetzt eine Linie steht (s. u.). Die
       Rechnung: 20px Innenabstand der Login-Spalte + 1px Linie + 20px Spaltenlücke
       = wieder ~40px zwischen den beiden Textkanten, wie vor P71. Der Abstand
       BLEIBT also, er hat nur eine Mitte bekommen. Stünde hier weiter 40px, säße
       die Linie 20px von der einen und 40px von der anderen Spalte entfernt und
       läse sich als Kante der Login-Spalte statt als Trennung zwischen beiden. */
    gap: 20px;
    align-items: start;
    margin-top: 8px;
}

.vav-step-col {
    min-width: 0;   /* sonst sprengt ein langes Wort die Spalte auf */
}

.vav-step-col--login { grid-column: 1; }
.vav-step-col--guest { grid-column: 2; }

/* Optische Trennung der beiden Spalten (P71).
   Bis v2.10.4 trennte sie ausschliesslich der Abstand (`gap`) – gemessen im
   P70/Nachtrag: keine Linie, kein Rahmen, kein Hintergrund, kein Schatten. Zwei
   Formulare nebeneinander, die nur ein Zwischenraum trennt, lesen sich auf breiten
   Bildschirmen als EIN Formular mit zwei Hälften.
   Die Linie hängt an der LOGIN-Spalte, nicht an der Gast-Spalte: die Gast-Spalte
   steht ohne Login-Spalte auch allein da (`:only-child`, kein WC-Formularhandler
   oder „Angaben ändern"), und eine Linie rechts an einer einzelnen Spalte wäre
   ein Strich ohne Gegenüber. Umgekehrt gibt es die Login-Spalte nie ohne die
   Gast-Spalte – die Linie hat also immer eine Seite, die sie abtrennt.
   In der ≤480-px-Query wird sie wieder abgeräumt: dort stehen die Spalten
   untereinander, und eine rechte Kante liefe quer zur Leserichtung. */
.vav-step-col--login {
    padding-right: 20px;
    border-right: 1px solid #e0e0e0;
}

/* Ohne Login-Spalte (kein WooCommerce-Formularhandler, „Angaben ändern") soll das
   Gast-Formular nicht in der rechten Hälfte kleben. */
.vav-step-col:only-child {
    grid-column: 1 / -1;
}

.vav-step-col-title {
    margin: 0 0 8px;
    font-size: 1.05em;
    line-height: 1.3;
}

.vav-login-lost {
    margin-top: 4px;
    font-size: 0.85em;
}

.vav-login-lost a {
    text-decoration: underline;
}

/* Zweiter Riegel gegen fremde Absatz-Filter – dieselbe Falle wie beim Geburtsdatum
   (s. .vav-dob-fields > br): ein <br> wäre im Grid ein vollwertiges Item und schöbe
   die Gast-Spalte in eine eigene Zeile. `display: none` erzeugt gar kein Item. */
.vav-step-columns > br {
    display: none;
}

/* ── Passiver SCHUFA-Hinweis über dem Button (P64, Optik P65/Nachtrag) ─────── */
/* KEINE Box. Bis v2.10.0 stand der Satz auf abgesetzter Fläche mit Rahmen und
   linker Kante – die Optik einer Systemmeldung, an der Stelle, an der nichts zu
   tun und nichts schiefgegangen ist. Direkt über dem Kaufbutton liest sich das
   als Hürde.
   Stattdessen Fine-Print: gedämpfte Farbe, kleine Schrift, kein Hintergrund, kein
   Rahmen – derselbe Look wie die Legende „Mit * markierte Felder sind
   Pflichtfelder" (.vav-required-note) einige Zeilen darüber. Die Pflicht bleibt
   erfüllt: Der Hinweis steht am Erhebungsort (Art. 13), sichtbar und verlinkt,
   nur nicht mehr als Kasten. Das Ausführliche steht in der Datenschutzerklärung.
   #666 statt der #777 der Legende: derselbe Eindruck, aber 5.7:1 auf Weiss statt
   4.5:1 knapp verfehlt – bei einer Pflichtinformation kein Ermessensspielraum.
   Die frühere Fehler-Markierung der Häkchen (.vav-check-row.vav-has-error,
   .vav-check-error) ist mit ihnen entfallen – .vav-check-row selbst bleibt, sie
   trägt weiterhin die Häkchen der Registrierung. */
.vav-schufa-note {
    /* P66: `clear` ist hier KEIN Zierrat. In der Registrierung steht der Hinweis
       unmittelbar hinter der Zeile PLZ/Ort, und die besteht aus WooCommerce-Floats
       (`form-row-first` / `form-row-last`). Ohne clear fliesst der Satz in die
       Float-Lücke zwischen die beiden Felder und bricht dort in eine 3-Zeichen-Spalte
       um („Zur ges etzl ich en") – am Sicht-Check auf Stage aufgefallen, im Quell-Scan
       prinzipiell unsichtbar. In den drei anderen Ausgabestellen steht der Hinweis
       ohnehin im Blockfluss; dort ändert die Regel nichts. */
    clear: both;
    margin: 0 0 12px;
    font-size: 0.78em;
    line-height: 1.5;
    color: #666;
}

/* Der Link muss auch im Kleingedruckten als Link erkennbar bleiben – Farbe allein
   reicht bei dieser Größe nicht. */
.vav-schufa-note-link {
    text-decoration: underline;
}

/* ── Art-13-Transparenzhinweis ─────────────────────────────────────────────── */
.vav-privacy-note {
    font-size: 0.78em;
    line-height: 1.5;
    color: #777;
}

/* ── Registrierungs-DOB-Hinweis (Checkout, Fall 2) ─────────────────────────── */
.vav-reg-complete-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875em;
    color: #1a5276;
    padding: 10px 12px;
    background: #eaf4fb;
    border: 1px solid #aed6f1;
    border-radius: 3px;
    margin-bottom: 4px;
}

/* ── Bereits-verifiziert-Hinweis ───────────────────────────────────────────── */
.vav-verified-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #3a7d44;
    padding: 10px 12px;
    background: #f0fff4;
    border: 1px solid #c3e6cb;
    border-radius: 3px;
}

.vav-icon-ok {
    font-size: 1.1em;
    font-weight: bold;
}

/* ── Übernommene Angaben aus dem Altersnachweis-Schritt (P59/S4) ───────────── */
/* Der Hinweis steht über dem Rechnungsformular und erklärt, warum die Felder
   gesperrt sind. Ohne den Rücklink wäre die Sperre eine Sackgasse. */
.vav-handoff-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
}

.vav-handoff-edit {
    text-decoration: underline;
}

/* Gesperrte Felder: sichtbar, lesbar, aber nicht bearbeitbar.
   Bei <input> trägt das native `readonly` die Sperre – der Wert wird trotzdem
   mitgeschickt. <select> (Land, Anrede) kennt kein readonly, und `disabled`
   verbietet sich, weil ein deaktiviertes Feld gar nichts sendet: WooCommerce
   meldete dann „Land ist ein Pflichtfeld". Dort übernimmt `pointer-events: none`
   zusammen mit dem `tabindex="-1"` aus VAV_Age_Step die Sperre.
   Das ist BEWUSST nur eine Bedienhilfe und keine Sicherheitsgrenze – die
   Entscheidung fällt am Bestell-Hook erneut, server-seitig. */
.vav-locked input,
.vav-locked select {
    background-color: #f3f3f3;
    color: #555;
    cursor: default;
}

.vav-locked select {
    pointer-events: none;
}

/* ── Ausweis-Fallback: Ausfüllhilfe mit Schema (P62) ───────────────────────── */
/* Zielgruppe ist ausdrücklich JEDER Kunde – auch ältere Menschen und Menschen, die
   kein Deutsch lesen. Deshalb: Fließtext 16 px statt der sonst üblichen em-Bruchteile,
   fette Feldbeschriftungen, grosse Eingabefelder (48 px Höhe = bequemes Tippziel) und
   Kontraste, die AA sicher erreichen (in `phase21` nachgerechnet, nicht geschätzt).
   Farbe allein trägt nie eine Information: neben jeder farbigen Markierung steht ihre
   Nummer, und dieselbe Nummer steht am Eingabefeld. */
.vav-idcard-guide {
    font-size: 16px;
    line-height: 1.55;
    color: #222;
}

/* Nur für Screenreader – die Abschnitts-Nummer wird als Text vorgelesen, während die
   farbige Plakette daneben `aria-hidden` ist (sonst hörte man die Ziffer doppelt). */
.vav-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vav-translate-hint {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #f4f6f8;
    border-left: 4px solid #14507d;
    font-size: 15px;
    line-height: 1.5;
    color: #40484f;
}

.vav-translate-hint span[lang="en"] {
    display: block;
}

.vav-idcard-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}

.vav-idcard-type-row label,
.vav-mrz-label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: #222;
}

.vav-idcard-type-row select,
.vav-mrz-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 22em;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #767676;
    border-radius: 3px;
    background-color: #fff;
    color: #222;
    font-size: 16px;
    line-height: 1.4;
}

.vav-mrz-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Sichtbarer Fokus – ohne ihn ist das Formular per Tastatur nicht bedienbar.
   `:focus` UND `:focus-visible`, damit auch ältere Browser einen Rahmen zeigen. */
.vav-idcard-guide input:focus,
.vav-idcard-guide select:focus,
.vav-idcard-guide button:focus,
.vav-mrz-scroll:focus {
    outline: 3px solid #14507d;
    outline-offset: 2px;
}

/* ── Das Schema selbst ──────────────────────────────────────────────────────── */
/* Die Zeichnung skaliert über ihr viewBox mit. Unter ihrer Mindestbreite bleibt sie
   lesbar und der Rahmen scrollt seitlich, statt die Ziffern auf Streichholzgrösse zu
   schrumpfen. Der Rahmen ist fokussierbar, damit dieses Scrollen auch per Tastatur
   geht (WCAG 2.1.1). Zum Ausfüllen ist das Scrollen nicht nötig – jede Markierung ist
   unten noch einmal als Text beschriftet. */
.vav-mrz-figure {
    margin: 0 0 18px;
}

.vav-mrz-scroll {
    overflow-x: auto;
    padding: 4px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: #fff;
}

.vav-mrz-svg {
    display: block;
    width: 100%;
    height: auto;
}

.vav-mrz-svg--td1,
.vav-mrz-svg--td2 {
    min-width: 330px;
}

.vav-mrz-svg--td3 {
    min-width: 400px;
}

.vav-mrz-caption {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4a4a;
}

.vav-mrz-sexnote {
    display: block;
    margin-top: 4px;
    color: #4a4a4a;
}

/* ── Nummern-Plaketten: Bild ↔ Eingabefeld ─────────────────────────────────── */
/* Die vier Farben sind dieselben wie im SVG (VAV_Idcard_Diagram::COLORS) und alle
   dunkel genug für weisse Ziffern. Ändert sich eine, muss sie an beiden Stellen
   geändert werden – `phase21` vergleicht sie Zeichen für Zeichen. */
.vav-mrz-badge {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
}

.vav-mrz-badge--1 { background-color: #14507d; }
.vav-mrz-badge--2 { background-color: #8a4b00; }
.vav-mrz-badge--3 { background-color: #6b2d8f; }
.vav-mrz-badge--4 { background-color: #14665b; }

.vav-mrz-label-text {
    vertical-align: middle;
}

.vav-mrz-row {
    margin-bottom: 16px;
}

.vav-idcard-inline-hint,
.vav-idcard-attempts {
    font-size: 15px;
    line-height: 1.5;
    color: #4a4a4a;
}

/* Der eigene Absende-Knopf des Ausweis-Blocks (P74). Er steht im selben Formular wie
   der Knopf des Prüf-Weges, gehört aber sichtbar zu diesem Block: eigener Abstand nach
   oben, damit er nicht am letzten MRZ-Feld klebt, und Luft nach unten zur Zeile mit den
   verbleibenden Versuchen. Optik im Übrigen wie jeder andere Shop-Button – er ist
   `.button`, und das Theme soll ihn stylen wie den daneben. */
.vav-idcard-actions {
    margin: 20px 0 12px;
}

/* ── Responsiv ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* 16px verhindert das Auto-Zoom von iOS Safari beim Fokussieren. */
    .vav-dob-field input,
    .vav-dob-field select {
        font-size: 16px;
    }

    /* Die Reihenfolge bleibt Tag → Monat → Jahr, auch hier: eine 3er-Reihe mit
       schmalem Tag und Jahr, der Monat nimmt den Rest.
       Vorher standen „Tag | Jahr" in der ersten und „Monat" allein in der zweiten
       Zeile (grid-template-areas). Gelesen wurde das als Tag → Jahr → Monat – ein
       verwürfeltes Datum, bei dem das Jahr auf dem Platz des Monats sitzt. Kein
       grid-template-areas mehr: die Spalten kommen aus den `grid-column`-Regeln
       oben, die Reihenfolge kann damit gar nicht mehr kippen. */
    .vav-dob-fields {
        gap: 8px;
        grid-template-columns: 3.5em minmax(0, 1fr) 4.5em;
        grid-template-areas: none;
    }

    /* Etwas schmalere Innenabstände, damit „TT" und „JJJJ" in den engen
       Aussenspalten nicht am Rand kleben. */
    .vav-dob-field input {
        padding-left: 8px;
        padding-right: 8px;
    }

    .vav-section-title { margin-top: 24px; padding-top: 18px; }

    /* Eine Spalte: beide Bereiche darin. */
    .vav-step-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .vav-step-col--login,
    .vav-step-col--guest {
        grid-column: 1;
    }

    /* GAST ZUERST, LOGIN DARUNTER (P71) – und zwar über `order`, NICHT über die
       DOM-Reihenfolge. Die bleibt, wie sie ist (Login zuerst): auf dem Desktop
       gehört die Anmeldung nach links, und ohne Login-Spalte greift am Gast-Block
       `:only-child`. Beides hinge an der Quelltext-Reihenfolge.

       WARUM ÜBERHAUPT GEDREHT WIRD: Gemessen im P70/Nachtrag stand die
       Gast-Überschrift auf 375px ganze 363px unter der Login-Überschrift – der
       Gast scrollt an einem vollständigen Anmeldeformular vorbei, bevor sein
       eigenes Feld überhaupt erscheint. Bis P70 trug die Überschrift „Neu hier?"
       eine Ebene höher die Ansage, dass darunter noch etwas für ihn kommt; sie ist
       mit dem Erklärtext gefallen. Ohne sie ist der Weg nach unten nicht mehr
       angekündigt, und der Gast-Weg ist der primäre.

       Die DOM-Reihenfolge bleibt damit die Reihenfolge für Tastatur und
       Screenreader. Das ist der bekannte Preis von `order` und hier vertretbar:
       Beide Spalten sind eigenständige, überschriftete Formulare – wer per Tab
       navigiert, landet zuerst im Login und erreicht den Gast-Weg unmittelbar
       danach; niemand wird an etwas vorbeigeführt. */
    .vav-step-col--guest {
        order: -1;
    }

    /* Die Trennlinie ist eine DESKTOP-Sache. Untereinander liefe sie quer zur
       Leserichtung – eine senkrechte Kante rechts an einem vollbreiten Block. */
    .vav-step-col--login {
        padding-right: 0;
        border-right: 0;
    }
}

/* Sehr schmale Geräte (~320 px): drei Zeilen statt drei Spalten – weiterhin
   Tag → Monat → Jahr, nur untereinander. Neben Tag und Jahr bliebe für den
   ausgeschriebenen Monatsnamen („September") sonst zu wenig Platz. */
@media (max-width: 359px) {
    .vav-dob-fields {
        grid-template-columns: minmax(0, 1fr);
    }
    .vav-dob-field--day,
    .vav-dob-field--month,
    .vav-dob-field--year {
        grid-column: 1;
    }

    /* Einspaltig ist der Schritt hier schon (480px-Query); nur enger. */
    .vav-step-columns {
        gap: 20px;
    }
}

/* Ausweis-Fallback auf schmalen Geräten (P62). Die Schriftgrössen bleiben, was sie
   sind: 16 px ist hier keine Desktop-Grosszügigkeit, sondern die Untergrenze für
   bequemes Lesen – und verhindert nebenbei das Auto-Zoom von iOS beim Fokussieren.
   Angepasst werden nur die Breiten. */
@media (max-width: 600px) {
    .vav-idcard-type-row select,
    .vav-mrz-input {
        max-width: 100%;
    }

    .vav-mrz-scroll {
        padding: 2px;
    }

    .vav-mrz-caption,
    .vav-translate-hint,
    .vav-idcard-inline-hint,
    .vav-idcard-attempts {
        font-size: 15px;
    }
}