/* ============================================================================
   antrag.css - der Online-Mitgliedsantrag (web/mitgliedsantrag.php).
   Sieben Teile in der Reihenfolge des Papierantrags, je ein Kasten wie die
   Karten der Seite. Felder zweispaltig ab 641px, darunter untereinander.
   Farben und Masse aus bbc08.css (Variablen), daher hell und dunkel gleich.
   ========================================================================= */
.antrag-einleitung { max-width: var(--p-lesemass, 78ch); margin-bottom: var(--p-sp-oben); }
.antrag-einleitung p + p { margin-top: var(--s4); }
.antrag-form { display: grid; gap: var(--s7); max-width: 900px; }
.antrag-teil { margin: 0; padding: var(--s7); min-width: 0;
               border: 1px solid var(--border-default); border-radius: var(--r-lg);
               background: var(--surface-1); }
/* Eigene [hidden]-Regeln: display (grid) wuerde das Attribut sonst schlagen -
   dann blieben etwa die Anschriftsfelder bei "gleiche Anschrift" sichtbar. */
.antrag-teil[hidden], .antrag-raster[hidden], .antrag-summe[hidden] { display: none; }
/* Tastaturfokus gut sichtbar, auch im dunklen Thema (mind. 3:1). */
.antrag-form :is(input, button, a):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px;
                                                  box-shadow: none; }
/* Die schwebenden Knoepfe lagen am Telefon ueber den Feldern. */
.antrag-seite .p-fab { display: none !important; }
/* Der Titel steht als Kopfzeile IM Kasten: float holt die legend in den
   Rahmen (sonst laeuft der Rand mitten durch den Titel), die Linie
   darunter trennt sie vom Inhalt.
   Nummernkreis und Titel stehen auf derselben Grundlinie (baseline), der
   Kreis sitzt mit seiner Mitte auf der Mitte der Versalhoehe der ERSTEN
   Titelzeile (Designvorgabe 01.10.2026). align-items: center mittete den
   Zeilenkasten - die Versalien lagen darin oben, der Titel hing oben am
   Kreis, bei zwei Zeilen stand der Kreis zwischen beiden. */
.antrag-teil > legend { float: left; width: 100%; display: flex; align-items: baseline; gap: var(--s4);
                        margin: 0 0 var(--s6); padding: 0 0 var(--s5); border-bottom: 1px solid var(--border-subtle);
                        font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700;
                        font-size: var(--p-t-h3); text-transform: uppercase; line-height: 1.1; color: var(--fg-1); }
/* Jedes Kind nach dem Titel beginnt unter ihm - auch wenn das Skript das
   erste (etwa den Hinweis fuer Seiten ohne Skript) versteckt. */
.antrag-teil > legend ~ * { clear: both; }
.antrag-teil > legend + .antrag-raster,
.antrag-teil > legend + .antrag-gruppe { margin-top: 0; }
/* Der Kreis: Ziffer in der Mitte, auf der Grundlinie des Titels. Die
   Ziffer ist kleiner (.75em) - ihre Versalhoehe auch. Damit die Mitten
   gleich liegen, rueckt der Kreis um die halbe Differenz der Versalhoehen
   hoeher: (1/.75 - 1) / 2 = 1/6 seiner eigenen Versalhoehe (cap). */
.antrag-teil > legend span { display: block; flex: none; width: 1.6em; height: 1.6em; line-height: 1.6em;
                             text-align: center; position: relative; top: calc(-1cap / 6);
                             border-radius: 50%; background: var(--accent-500); color: var(--accent-fg);
                             font-size: .75em; }
/* text-box schneidet den Kasten der Ziffer auf Versalhoehe bis Grundlinie -
   gleicher Innenabstand oben und unten stellt die Ziffer genau in die
   Kreismitte, bei jeder Schrift. Ohne text-box gilt die Zeilenhoehe oben. */
@supports (text-box: trim-both cap alphabetic) {
  .antrag-teil > legend span { height: auto; line-height: inherit; padding-block: calc((1.6em - 1cap) / 2);
                               text-box: trim-both cap alphabetic; }
}
.antrag-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); margin-top: var(--s5); }
@media (min-width: 641px) {
  .antrag-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .antrag-feld--breit { grid-column: 1 / -1; }
}
.antrag-feld { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.antrag-feld label, .antrag-gruppe > legend { font-size: var(--t-sm); font-weight: 600; color: var(--fg-1); }
/* Rand der Felder und Kacheln: hell --fg-3 (#767676 auf Weiss 4,54:1),
   dunkel --fg-3 mit 15 % --fg-2 (#858585, auf #121212 5,1:1, auf #191919
   4,8:1) - #7c7c7c allein erreichte auf #121212 nur 4,49:1 (Schluss-
   pruefung 01.10.2026). --border-strong erreichte 2,2:1 und 1,7:1 - unter
   den 3:1 fuer Bedienelemente (Pruefung 01.10.2026). Derselbe Rand steht
   in sponsoren.css und intern.css. */
.antrag-feld input { width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--s4);
                     border: 1px solid light-dark(var(--fg-3), color-mix(in srgb, var(--fg-3) 85%, var(--fg-2))); border-radius: var(--r-md);
                     background: var(--surface-1); color: var(--fg-1); font: inherit; }
.antrag-feld input:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.antrag-feld input[aria-invalid="true"] { border-color: var(--danger); }
.antrag-frei { font-weight: 400; color: var(--fg-3); }
.antrag-hilfe { font-size: var(--t-xs); color: var(--fg-3); }
.antrag-fehler { font-size: var(--t-xs); font-weight: 600; color: var(--danger); }
.antrag-gruppe { margin: var(--s5) 0 0; padding: 0; border: 0; min-width: 0; }
.antrag-gruppe > legend { margin-bottom: var(--s3); padding: 0; }
.antrag-wahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) {
  .antrag-wahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .antrag-wahlen { grid-template-columns: minmax(0, 1fr); }
  .antrag-wahlen:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .antrag-wahlen:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}
/* Fuenf Wahlen (Mannschaft): die letzte, "Passives Mitglied/Foerderndes
   Mitglied", ist die laengste. In einer Spalte brach sie ab 641px drei-
   zeilig um und streckte ihre Reihe (Befund 8, Auftraggeber: "Ja").
   Sie nimmt zwei Spalten: ab 901px 3 + 2, die Reihe ist voll; 641-900px
   2 + 2 + 1 ueber die ganze Breite. Bis 640px eine Spalte wie bisher. */
@media (min-width: 641px) {
  .antrag-wahlen:has(> :nth-child(5):last-child) > :last-child { grid-column: span 2; }
}
/* Geschlecht (m/w/d): drei kurze Wahlen nebeneinander, auf jeder Breite.
   Art des Antrags: vier lange Wahlen, ab 641px zu zweit. */
.antrag-wahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.antrag-wahlen--zwei { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) {
  .antrag-wahlen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Eine Wahlgruppe im Feldraster steht buendig mit dem Feld daneben. */
.antrag-raster > .antrag-gruppe { margin-top: 0; }
.antrag-raster > .antrag-gruppe > legend { margin-bottom: var(--s2); }
/* Jede Wahl eine Kachel wie die Beitragsgruppen - gleiche Linie, gleiche
   Groesse wie die Eingabefelder, die gewaehlte gruen getoent. */
/* Der Auswahlkreis steht an der ERSTEN Zeile (siehe Kaestchen unten), der
   Text oben in der Kachel; alles richtet sich nach der Grundlinie der
   ersten Zeile (baseline), "01.01." steht auf der von "jaehrlich". Der
   Innenabstand oben und unten ist so gross, dass eine einzeilige Kachel
   genau 44px hoch ist (42px ohne Rand) - die Zeile steht dort weiter in der
   Mitte. align-items: center mittete den Kreis zwischen allen Zeilen eines
   langen Textes. */
.antrag-wahl { display: flex; align-items: baseline; gap: var(--s3); min-height: 44px; min-width: 0; cursor: pointer;
               overflow-wrap: anywhere;
               padding: max(var(--s3), calc((42px - 1lh) / 2)) var(--s5);
               border: 1px solid light-dark(var(--fg-3), color-mix(in srgb, var(--fg-3) 85%, var(--fg-2))); border-radius: var(--r-md);
               background: var(--surface-1); color: var(--fg-1); line-height: 1.3;
               transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
/* Gewaehlt: Rand und Kreis in --accent-text (hell #0c5729 wie bisher,
   dunkel #17ab52, 6,3:1 - #0c5729 erreichte auf #121212 nur 2,2:1), der
   Rand 2px ohne Verschieben (innerer Schatten); im Dunkeln die Flaeche
   eine Stufe kraeftiger (--accent-tint-strong). */
.antrag-wahl:hover { border-color: var(--accent-text); }
.antrag-wahl:has(input:checked) { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text);
                                  background: var(--accent-tint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .antrag-wahl:has(input:checked) { background: var(--accent-tint-strong); }
}
:root[data-thema="dunkel"] .antrag-wahl:has(input:checked) { background: var(--accent-tint-strong); }
.antrag-wahl .antrag-hilfe { margin-left: var(--s2); }
.antrag-gruppe > .antrag-hilfe { margin-top: var(--s4); }
.antrag-wahlen--beitrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 901px) {
  .antrag-wahlen--beitrag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.antrag-wahl--karte { align-items: baseline; padding: var(--s5); }
.antrag-wahl--karte b { font-weight: 600; line-height: 1.35; }
/* Der Betrag steht in allen drei Karten auf derselben Hoehe - am Fuss. */
.antrag-wahl--karte > span { display: grid; gap: var(--s2); align-content: space-between; height: 100%; }
.antrag-betrag { font-size: var(--t-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
/* Kaestchen und Auswahlkreis (20px) stehen mit ihrer Mitte auf der Mitte
   der Versalhoehe der ERSTEN Textzeile (Designvorgabe 01.10.2026). Die
   Grundlinie richtet aus (align-items: baseline): die Unterkante des
   Kaestchens steht auf der Grundlinie der ersten Zeile, top schiebt es um
   seine halbe Hoehe weniger die halbe Versalhoehe (cap) nach unten.
   font: inherit, damit cap die Versalhoehe des Textes daneben ist.
   margin-top -10px: das Kaestchen drueckt die erste Zeile nicht nach unten.
   Vorher stand es mit margin-top 2px bis 2px zu tief - der Text hing oben. */
.antrag-wahl input, .antrag-haken input { flex: none; width: 20px; height: 20px; font: inherit;
                                          align-self: baseline; margin: -10px 0 0;
                                          position: relative; top: calc(10px - .5cap);
                                          accent-color: var(--accent-text); }
.antrag-haken { display: flex; align-items: baseline; gap: var(--s4); margin-top: var(--s5);
                font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2); cursor: pointer; }
.antrag-haken b { color: var(--fg-1); }
/* Ein Hinweis direkt unter einem Haekchen steht buendig mit dessen Text. */
.antrag-haken + .antrag-hilfe { margin-top: var(--s3); padding-left: calc(20px + var(--s4)); }
.antrag-summe { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-md);
                background: var(--accent-tint); color: var(--fg-1); font-weight: 600; }
.antrag-absenden { display: grid; gap: var(--s4); justify-items: start; }
.antrag-meldung { max-width: 900px; margin-bottom: var(--s7); padding: var(--s6);
                  border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--r-md);
                  background: var(--surface-1); }
.antrag-meldung ul { margin: var(--s4) 0 0; padding-left: var(--s7); display: grid; gap: var(--s2); }
.antrag-meldung a { color: var(--danger); text-decoration: underline; }
.antrag-fertig { max-width: 760px; display: grid; gap: var(--s5); }
.antrag-schritte { margin: 0; padding-left: var(--s7); display: grid; gap: var(--s4); }
/* Das Leerfeld gegen Programme: fuer Menschen unsichtbar, fuer
   Vorleseprogramme ebenfalls (aria-hidden am Kasten). */
.antrag-leer { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) {
  .antrag-teil { padding: var(--s5); }
}