/* ═══════════════════════════════════════════════════════════════════════
   Anfrageassistent — Ergänzungen zu main.css

   Hier steht ausschliesslich, was in V4 noch nicht existierte:
   Entwurfshinweis, Adressvorschlagsliste, Uploadvorschau und die
   Gruppierung der Zusammenfassung.

   Alles andere — .form, .steps-bar, .field, .choice, .err, .hint,
   .form__nav, .summary — kommt unveraendert aus main.css. Kein Wert wird
   hier ueberschrieben.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · hidden muss auch wirklich verbergen ───────────────────────────

   main.css setzt auf .cta-request und .cta-call ein `display:inline-flex`.
   Das ist eine Klassenregel aus dem Autoren-Stylesheet und schlägt damit
   das `[hidden] { display:none }` des Browser-Standards — der Browser
   verliert immer gegen den Autor.

   Folge im V4-Prototyp: Die Navigation zeigte im ersten Schritt gleichzeitig
   „Zurück“ (102 × 62 px), „Weiter“ und „Zusammenfassung abschließen“
   (349 × 90 px), obwohl zwei davon das Attribut hidden trugen. Gemessen am
   26.07.2026 auf /anfrage/ bei 390 px.

   main.css kennt das Problem an einer Stelle bereits und behandelt es dort
   lokal (.mnav__pane[hidden]). Hier steht dieselbe Behandlung für das
   Formular. Kein Gestaltungswert wird überschrieben, es wird nur
   durchgesetzt, was das Markup ohnehin meint.
   ─────────────────────────────────────────────────────────────────────── */
.form [hidden],
.form[hidden] {
  display: none !important;
}

/* ── Ausnahme: der Absendeknopf ohne JavaScript ─────────────────────────

   Diese Ausnahme steht hier und nicht in main.css, weil sie nur wegen der
   Regel drei Zeilen darüber nötig ist.

   `[data-send]` trägt im Markup `hidden`, weil anfrage.js den Knopf steuert
   und ihn erst im letzten Schritt zeigt. Ohne JavaScript bleibt er dadurch
   dauerhaft verborgen: Alle Schritte sind sichtbar, „Weiter" ist ein
   type="button" ohne Wirkung, und ein Weg zum Absenden existiert nicht.
   Gemessen mit audit-a11y.js, Lauf 3: „Formular vorhanden, aber kein
   sichtbarer Absendeknopf."

   Der erste Versuch stand in main.css als
   `html.no-js .form__nav [data-send][hidden]{ display:inline-flex; }` —
   Spezifität 0-3-1 gegen 0-1-1 hier. Wirkungslos, weil `!important` jede
   Spezifität schlägt. Derselbe Fehler wie beim Kopfbereich in Schritt 8:
   eine Regel geschrieben, die verliert, und ohne Gegenmessung hätte sie als
   Korrektur gegolten.

   Ein `!important` muss man deshalb dort einschränken, wo es steht.
   ─────────────────────────────────────────────────────────────────────── */
html.no-js .form__nav [data-send][hidden] {
  display: inline-flex !important;
}

/* ── 1 · Honigtopf ─────────────────────────────────────────────────────
   Nicht display:none. Manche Bots erkennen das und lassen das Feld dann
   erst recht leer. Ausserhalb des Sichtbereichs und aus der Tabfolge
   entfernt wirkt zuverlaessiger. */
.lb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 2 · Entwurfshinweis ─────────────────────────────────────────────── */
.lb-entwurf {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--mint);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
}

.lb-entwurf p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.lb-entwurf__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.lb-speicher {
  margin-top: 1.5rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--fg-mid);
}

.lb-speicher .cta-text {
  margin-left: .35rem;
}

/* `.gate` ist ein Flex-Container. Seine Kinder haben von Haus aus
   `min-width:auto` und schrumpfen deshalb nie unter die Breite ihres
   laengsten unteilbaren Wortes. Bei 360 px ragte der Hinweiskasten so um
   59 px aus seinem eigenen Rahmen — sichtbar gemessen: Kasten 37…323,
   Textspalte 180…382.

   `min-width:0` gibt die Schrumpferlaubnis zurueck. Zusammen mit den
   weichen Trennstellen in den langen Komposita (siehe render.php) passt
   der Kasten damit auch auf das schmalste verbreitete Geraet. */
.form .gate {
  min-width: 0;
}

/* Nur die Textspalte darf schrumpfen. Die Marke davor traegt ein einzelnes
   kurzes Wort und muss ihre natuerliche Breite behalten — mit min-width:0
   quetscht der Flex-Container sie auf ein Zeichen pro Zeile und schreibt
   „Datenschutz" senkrecht untereinander. */
.form .gate > .mono {
  flex: none;
}

.form .gate > *:not(.mono) {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Ein `.cta-text` mitten im Fliesstext kann nicht umbrechen: main.css gibt
   ihm `display:inline-flex`, und ein Flex-Container ist eine unteilbare
   Zeile. Steht er hinter einem laengeren Satz — im Datenschutzhinweis der
   Zusammenfassung und im Speicherhinweis ist das so — beginnt er weit
   rechts und ragt bei 360 px um 22 px aus dem Bildschirm.

   Innerhalb des Formulars verhaelt er sich deshalb wie normaler Text und
   bricht mit ihm um. Farbe, Gewicht, Unterstreichung und Pfeil bleiben; nur
   der Abstand zum Pfeil muss von `gap` auf `margin` wechseln, weil `gap` an
   einem Inline-Element nicht greift. */
.form .gate .cta-text,
.form .lb-speicher .cta-text {
  display: inline;
}

.form .gate .cta-text::after,
.form .lb-speicher .cta-text::after {
  margin-left: .4rem;
}

.lb-schritt__hinweis {
  margin: 0 0 1.75rem;
  max-width: 58ch;
}

/* ── 3 · Adressvorschläge ─────────────────────────────────────────────
   Die Liste liegt ueber dem folgenden Feld, statt es zu verschieben.
   Ein Layoutsprung waehrend des Tippens ist auf dem Handy die sicherste
   Art, eine Fehleingabe zu erzeugen. */
.lb-suche {
  position: relative;
}

.lb-suche__liste {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--fg-max);
  max-height: 17rem;
  overflow-y: auto;
}

.lb-suche__liste li + li {
  border-top: 1px solid var(--line);
}

.lb-suche__liste button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .7rem .9rem;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  color: var(--fg-max);
  cursor: pointer;
}

.lb-suche__liste button:hover,
.lb-suche__liste button:focus-visible {
  background: var(--mint);
}

.lb-adresse__meldung {
  margin: -.5rem 0 1.5rem;
  color: var(--fg-max);
}

/* Google setzt sein Widget als eigenes Element ein. Es bekommt die Breite
   des Feldes und sonst nichts — die Vorschlagsliste des Widgets traegt die
   von Google geforderte Kennzeichnung und wird nicht umgestaltet. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
}

/* ── 4 · Dateifeld und Uploadvorschau ─────────────────────────────────

   Zwei Eigenheiten, die zusammen bei 360 px einen Ueberlauf von 62 px
   erzeugt haben (gemessen: Dokumentbreite 422 px bei 360 px Viewport):

   1. `fieldset` hat als Vorgabe `min-inline-size: min-content` und
      schrumpft deshalb nicht unter die Mindestbreite seines Inhalts —
      anders als jedes andere Blockelement.
   2. `input[type="file"]` bringt eine vom Browser gesetzte Mindestbreite
      mit (in Chromium rund 370 px) und ist genau dieser Inhalt.

   Ohne beide Regeln ragt der Fotoschritt aus dem Bildschirm, und zwar nur
   dieser eine — was beim Durchklicken leicht uebersehen wird, weil die
   anderen sieben Schritte tadellos sitzen. */
.form fieldset {
  min-inline-size: 0;
}

/* Das Dateifeld ist auf dem Handy ein Bedienelement wie jedes andere und
   braucht dieselben 44 px Hoehe. Der Browserstandard liefert 28. */
.lb-upload input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: .7rem .8rem;
  border: var(--hair, 1px) solid var(--rule, #d8dde3);
  background: var(--white, #fff);
  font: inherit;
  font-size: .9rem;
}

.lb-upload input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: .8rem;
  padding: .4rem .85rem;
  border: var(--hair, 1px) solid var(--navy, #16233A);
  background: var(--mint, #E7F0EC);
  color: var(--navy, #16233A);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}

/* Feste Kachelbreite statt Rasterautomatik: Bei zwei Dateien soll keine
   Kachel die halbe Zeile fuellen. */
.lb-beispiele {
  margin: 1rem 0 0;
  padding: 0 0 0 1.15rem;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--fg-mid);
}

.lb-vorschau {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.lb-vorschau__i {
  position: relative;
  width: 7.5rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: .4rem;
}

.lb-vorschau__i img {
  display: block;
  width: 100%;
  height: 5.5rem;
  object-fit: cover;
  background: var(--mint);
}

.lb-vorschau__doc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  background: var(--mint);
  font: 600 .8rem/1 var(--mono, monospace);
  letter-spacing: .08em;
  color: var(--fg-mid);
}

.lb-vorschau__n {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  line-height: 1.35;
  word-break: break-all;
  color: var(--fg-mid);
}

/* 44 px Ziel, auch wenn das Kreuz kleiner aussieht. */
.lb-vorschau__x {
  position: absolute;
  top: -.55rem;
  right: -.55rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fg-max);
  color: var(--paper);
  border: 0;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.lb-vorschau__x:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── 5 · Zusammenfassung ──────────────────────────────────────────────
   Jede Gruppe traegt Titel und Bearbeiten-Link nebeneinander. Der Link
   bleibt auch dann rechts, wenn der Titel umbricht. */
.summary__g + .summary__g {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.summary__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.summary__h .t-h4 {
  margin: 0;
}

.summary__edit {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.summary__leer {
  color: var(--fg-mid);
  font-style: italic;
}

/* ── 6 · Einwilligung ─────────────────────────────────────────────────
   Grosszuegiger Abstand und ein Rahmen: Diese Zustimmung soll nicht
   zwischen zwei anderen Feldern untergehen. */
.field--zustimmung {
  margin-top: 2rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--mint);
}

.field--zustimmung .choice {
  align-items: flex-start;
}

/* ── 7 · Schmale Geräte ───────────────────────────────────────────────
   Ab hier zaehlt jeder Millimeter. Getestet bei 360 und 390 px. */
@media (max-width: 480px) {
  .lb-vorschau__i {
    width: calc(50% - .4rem);
  }

  .lb-entwurf__nav {
    flex-direction: column;
  }

  .lb-entwurf__nav > * {
    width: 100%;
    justify-content: center;
  }

  .summary__h {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
}

/* ── 8 · Notnagel fuer dunkle Flaechen ────────────────────────────────

   main.css faerbt in Familie D das erste Band einer Seite dunkel
   (.fam-d .band:first-of-type). Auf einer WordPress-Seite ist die
   Bausteinliste redaktionell veraenderbar: Entfernt jemand den Intro-
   Baustein, rutscht das Formular an die erste Stelle und wird dunkel.

   Die Legenden der Auswahlgruppen tragen dann var(--navy) auf var(--navy)
   — Kontrast 1:1, vollstaendig unlesbar. Dieselbe Falle steht auf jeder
   Flaeche mit sf-navy oder sf-deep.

   Die folgenden Regeln kosten nichts, wenn der Fall nie eintritt, und
   verhindern eine unsichtbare Seite, wenn er eintritt. Sie sind ein
   Sicherheitsnetz, keine Gestaltung. */
.sf-navy .form .fieldset legend,
.sf-deep .form .fieldset legend,
.fam-d .band:first-of-type .form .fieldset legend,
.sf-navy .form .field > label,
.sf-deep .form .field > label,
.fam-d .band:first-of-type .form .field > label {
  color: #FFFFFF;
}

.sf-navy .form .hint,
.sf-deep .form .hint,
.fam-d .band:first-of-type .form .hint,
.sf-navy .form .lb-speicher,
.sf-deep .form .lb-speicher,
.fam-d .band:first-of-type .form .lb-speicher {
  color: rgba(255, 255, 255, .82);
}

/* ─────────────────────────────────────────────────────────────────────────
   5.1.0 · Übernommene Angaben aus dem Problemfinder
   ─────────────────────────────────────────────────────────────────────────
   Teil D4 verlangt, dass bereits gewählte Angaben sichtbar übernommen
   werden. Dieser Kasten steht deshalb über dem Formular und nicht als
   stille Vorbelegung in den Auswahlfeldern — der Besucher soll wissen,
   was er gerade mitbringt, und es ändern können. */

.lb-uebernommen {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
}

.lb-uebernommen p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.lb-uebernommen ul {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
}

.lb-uebernommen li {
  font-size: .95rem;
  line-height: 1.5;
  padding: .25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
}

.lb-uebernommen li .mono {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-mid);
  min-width: 14rem;
}

.lb-uebernommen .hint {
  margin-top: .75rem;
}

@media (max-width: 559px) {
  .lb-uebernommen li .mono { min-width: 0; width: 100%; }
}