/*
 * sos-formulare: Anmeldeformular, Rechnung und Antragsformular. Markup aus dem Plugin, nicht aus Etch-Blöcken,
 * deshalb hier und nicht in etch_styles (Gotcha 24 und 30). Nur ACSS-Tokens, px nur für Linien.
 * Farben: Petrol (--primary) für Rahmen, Wahl und Hover, Petrol-Hauch als Fläche. Rot (--danger,
 * 6,5:1 auf Weiss) nur für Fehler und den Testhinweis der Rechnung. Fehler zusätzlich mit Linie
 * und Text, nicht nur mit Farbe.
 */

.sos-anmeldeformular,
.sos-antragsformular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  max-width: 44rem;
}

.sos-anmeldeformular :where(fieldset),
.sos-antragsformular :where(fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sos-f-gruppe { display: grid; gap: var(--space-s); }

.sos-f-legende {
  padding: 0;
  margin-block-end: var(--space-s);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--h4);
  line-height: 1.25;
  color: var(--primary);
}

/* Rolle: vier gleich grosse Knöpfe, die gewählte Rolle dunkelblau gefüllt. */
.sos-f-rollenwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-xs);
}

.sos-f-rolle,
.sos-f-kachel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15em;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--base);
  cursor: pointer;
  line-height: 1.3;
}

.sos-f-rolle { align-content: center; font-weight: 600; }

.sos-f-rolle input,
.sos-f-kachel input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.sos-f-rolle:has(input:checked) {
  background: var(--primary);
  color: var(--white);
}

.sos-f-kachel:has(input:checked) {
  background: var(--primary-ultra-light);
  box-shadow: inset 0 0 0 2px var(--primary);
  border-top-width: 6px;
}

.sos-f-rolle:has(input:focus-visible),
.sos-f-kachel:has(input:focus-visible) {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.sos-f-rolle:hover,
.sos-f-kachel:hover { border-color: var(--primary); }

/* Kacheln: Betrag gross, darunter was er bewirkt. */
.sos-f-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-xs);
}

.sos-f-kachel { padding: var(--space-s); }

.sos-f-kachel__betrag {
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--h3);
  line-height: 1.15;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sos-f-kachel--frei .sos-f-kachel__betrag { font-size: var(--h4); white-space: normal; }
.sos-f-kachel__takt { font-size: var(--text-s); font-weight: 600; }
.sos-f-kachel__text { line-height: 1.4; }

.sos-f-frei { display: grid; gap: var(--space-xs); max-width: 18rem; }

.sos-f-franken {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
}

/* Nur die Kacheln der gewählten Rolle; das Feld «Anderer Betrag» nur, wenn gewählt;
   «Firma oder Institution» und die Gönnerliste nur, wo sie gelten. */
@supports selector(:has(*)) {
  .sos-f-betraege,
  .sos-f-nur-firma,
  .sos-f-nur-liste { display: none; }

  .sos-anmeldeformular:has(#sos-f-rolle-mitglied:checked) .sos-f-betraege[data-rolle="mitglied"],
  .sos-anmeldeformular:has(#sos-f-rolle-goenner:checked) .sos-f-betraege[data-rolle="goenner"],
  .sos-anmeldeformular:has(#sos-f-rolle-firma:checked) .sos-f-betraege[data-rolle="firma"],
  .sos-anmeldeformular:has(#sos-f-rolle-einmalig:checked) .sos-f-betraege[data-rolle="einmalig"] { display: grid; }

  .sos-anmeldeformular:has(#sos-f-rolle-firma:checked) .sos-f-nur-firma,
  .sos-anmeldeformular:has(#sos-f-rolle-goenner:checked) .sos-f-nur-liste,
  .sos-anmeldeformular:has(#sos-f-rolle-firma:checked) .sos-f-nur-liste { display: block; }

  .sos-f-betraege .sos-f-frei { display: none; }
  .sos-f-betraege:has(input[value="frei"]:checked) .sos-f-frei { display: grid; }
}

/* Felder */
.sos-f-angaben { gap: var(--space-m); }
.sos-f-feld { display: grid; gap: 0.35em; }

.sos-f-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-m);
}

.sos-f-reihe--ort { grid-template-columns: minmax(6rem, 1fr) minmax(0, 3fr); }
@media (width < 30em) { .sos-f-reihe--ort { grid-template-columns: minmax(0, 1fr); } }

.sos-f-label { font-weight: 600; color: var(--base); }

.sos-f-eingabe {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--base);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--base);
  font: inherit;
}

.sos-f-franken .sos-f-eingabe { max-width: 12rem; font-variant-numeric: tabular-nums; }

.sos-f-hinweis { margin: 0; font-size: var(--text-s); line-height: 1.45; color: var(--base); }

/* Haken: grosses Kästchen links, Text rechts daneben. */
.sos-f-haken {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-s);
  align-items: start;
}

.sos-f-haken input {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0.1em 0 0;
  accent-color: var(--primary);
}

.sos-f-haken > :not(input) { grid-column: 2; }
.sos-f-haken__text { line-height: 1.45; cursor: pointer; }

/* Fehler: Linie, Fläche und Text, nicht nur Farbe. */
.sos-f-fehler {
  margin: 0;
  padding: 0.35em var(--space-s);
  border-inline-start: 6px solid var(--danger);
  background: var(--danger-ultra-light);
  color: var(--base);
  font-weight: 600;
  line-height: 1.4;
}

.sos-f-feld--fehler .sos-f-eingabe,
.sos-f-eingabe[aria-invalid="true"] { border-color: var(--danger); border-width: 3px; }

.sos-f-fehlerliste {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border: 3px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-ultra-light);
  color: var(--base);
}

.sos-f-fehlerliste:focus { outline: 3px solid var(--primary); outline-offset: 3px; }
.sos-f-fehlerliste__titel { margin: 0; font-weight: 600; font-size: var(--text-l); }
.sos-f-fehlerliste ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 0.25em; }
.sos-f-fehlerliste a:not(.btn) { color: var(--base); font-weight: 600; }

.sos-f-absenden { display: grid; gap: var(--space-xs); justify-items: start; }
.sos-f-absenden .btn { white-space: normal; }

/* ---- Antrag auf /antrag/ (Ticket 15) ----
   Weg zum Abo: grosse Schrift (sos-abo, --text-l). Hinweise hier nie kleiner als der Fliesstext
   der Formulare der Geber; Radioknöpfe gross, als ganze Zeile anklickbar. */
.sos-antragsformular { max-width: 46rem; }
.sos-antragsformular .sos-f-hinweis { font-size: var(--text-m); }
.sos-antragsformular .sos-f-legende { font-size: var(--h3); }

.sos-a-wahl { display: grid; gap: var(--space-xs); }

.sos-a-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-s);
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--base);
  cursor: pointer;
  line-height: 1.35;
}

.sos-a-option input {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  accent-color: var(--primary);
}

.sos-a-option:has(input:checked) {
  background: var(--primary-ultra-light);
  box-shadow: inset 0 0 0 2px var(--primary);
  font-weight: 600;
}

.sos-a-option:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.sos-a-option:hover { border-color: var(--primary); }

.sos-a-weg,
.sos-a-ausserhalb,
.sos-a-nochmal {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border-inline-start: 6px solid var(--primary);
  background: var(--primary-ultra-light);
  color: var(--base);
  line-height: 1.45;
}

.sos-a-ausserhalb { display: grid; gap: var(--space-xs); }
.sos-a-ausserhalb p { margin: 0; }
.sos-a-ausserhalb a:not(.btn) { color: var(--primary); font-weight: 600; }
.sos-a-nochmal { font-weight: 600; }

.sos-f-datei {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-xs);
  border: 2px dashed var(--primary);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--base);
  font: inherit;
}

.sos-f-datei::file-selector-button {
  margin-inline-end: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sos-f-datei:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.sos-f-feld--fehler .sos-f-datei { border-color: var(--danger); border-style: solid; border-width: 3px; }

/* Nur was zum gewählten Weg gehört. Ohne :has erscheint alles (der Server liest nur das Nötige). */
@supports selector(:has(*)) {
  .sos-a-nur-fachstelle,
  .sos-a-nur-kulturlegi,
  .sos-a-nur-beleg,
  .sos-a-weg { display: none; }

  .sos-antragsformular:has(#sos-a-gestellt-fachstelle:checked) .sos-a-nur-fachstelle,
  .sos-antragsformular:has(#sos-a-nachweis-kulturlegi:checked) .sos-a-nur-kulturlegi,
  .sos-antragsformular:has(#sos-a-nachweis-el:checked) .sos-a-nur-beleg,
  .sos-antragsformular:has(#sos-a-nachweis-ipv:checked) .sos-a-nur-beleg,
  .sos-antragsformular:has(#sos-a-nachweis-kulturlegi:checked) .sos-a-nur-beleg,
  .sos-antragsformular:has(#sos-a-nachweis-el:checked) .sos-a-weg[data-weg="el"],
  .sos-antragsformular:has(#sos-a-nachweis-ipv:checked) .sos-a-weg[data-weg="ipv"],
  .sos-antragsformular:has(#sos-a-nachweis-kulturlegi:checked) .sos-a-weg[data-weg="kulturlegi"],
  .sos-antragsformular:has(#sos-a-nachweis-keines:checked) .sos-a-weg[data-weg="keines"] { display: block; }
}

.sos-a-danke {
  scroll-margin-top: var(--space-l);
  display: grid;
  gap: var(--space-s);
  max-width: 46rem;
  padding: var(--space-l);
  border: 2px solid var(--primary);
  border-top-width: 6px;
  border-radius: var(--radius);
  background: var(--primary-ultra-light);
  color: var(--base);
}

.sos-a-danke:focus { outline: 3px solid var(--primary); outline-offset: 3px; }
.sos-a-danke p { margin: 0; }
.sos-a-danke__titel { margin: 0; font-size: var(--h2); color: var(--primary); }
@media (width < 40em) { .sos-a-danke { padding: var(--space-m); } }

/* ---- Rechnung auf /bestaetigung/ ---- */
.sos-rechnung {
  scroll-margin-top: var(--space-l);
  display: grid;
  gap: var(--space-m);
  max-width: 60rem;
  padding: var(--space-l);
  border: 2px solid var(--primary);
  border-top-width: 6px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--base);
}

@media (width < 40em) { .sos-rechnung { padding: var(--space-m); } }

.sos-rechnung > p { margin: 0; line-height: 1.5; }

.sos-rechnung__titel { margin: 0; font-size: var(--h3); color: var(--primary); }

.sos-rechnung__test {
  padding: var(--space-xs) var(--space-s);
  border: 3px dashed var(--danger);
  background: var(--danger-ultra-light);
  font-weight: 600;
}

.sos-rechnung__teile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
}

@media (width >= 40em) {
  .sos-rechnung__teile { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
}

/* Weisser Rand um den Code, damit Kameras ihn sicher finden (Ruhezone). */
.sos-rechnung__qr {
  width: min(100%, 16rem);
  padding: var(--space-xs);
  background: var(--white);
  line-height: 0;
}

.sos-rechnung__qr svg { display: block; width: 100%; height: auto; }

.sos-rechnung__angaben { display: grid; gap: var(--space-s); margin: 0; }
.sos-rechnung__angaben dt { font-weight: 600; font-size: var(--text-s); color: var(--primary); }
.sos-rechnung__angaben dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }

.sos-rechnung__betrag {
  display: block;
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--h3);
  line-height: 1.2;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.sos-rechnung__wirkung { display: block; }
.sos-rechnung__referenz { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (width < 24em) { .sos-rechnung__referenz { white-space: normal; } }

.sos-rechnung--leer { border-style: dashed; }
.sos-rechnung .btn { white-space: normal; }

@media print {
  .sos-rechnung { border: 0; padding: 0; }
}

/* Honeypot (Ticket 19): aus dem Bild, ohne Platz und ohne waagrechtes Scrollen. Für Vorlesehilfen
   aria-hidden, für die Tastatur tabindex=-1 (Schutzfelder.php). Nicht display:none, das
   überspringen manche Programme. */
.sos-f-honig {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}