:root { --vereinsfarbe:#003CA0; --vereinsfarbe-hell:#eef3fb; --grau:#f4f4f5;
        --rand:#d4d4d8; --text:#18181b; }
* { box-sizing:border-box; }
/* Seitenfuss unten halten: Bei wenig Inhalt -- etwa auf der Startseite mit ihren
   zwei Knoepfen -- klebte der Fussteil sonst mitten auf der Seite. Als Spalte mit
   dehnbarem main rutscht er nach unten, fliesst bei langen Seiten (Datenschutz,
   Assistentenschritte) aber ganz normal mit. Absichtlich KEIN position:fixed --
   das laege sonst ueber dem Formular. dvh statt vh, weil vh auf Telefonen die
   ein- und ausblendende Browserleiste nicht beruecksichtigt. */
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
       color:var(--text); background:#fff;
       display:flex; flex-direction:column; min-height:100vh; }
@supports (min-height:100dvh) { body { min-height:100dvh; } }
main { flex:1 0 auto; }
header { padding:.6rem 1rem; background:var(--vereinsfarbe); }
footer { padding:1rem; background:var(--grau); }
header a { display:inline-block; line-height:0; }
header img { display:block; height:40px; width:auto; }
footer a { color:var(--vereinsfarbe); }

@media (max-width:420px) {
  header img { height:30px; }
}
main { max-width:38rem; margin:0 auto; padding:1.5rem 1rem 4rem; }
h1 { font-size:1.5rem; line-height:1.3; }
label { display:block; margin:1rem 0 .25rem; font-weight:600; }
/* Optionsfelder und Kaestchen sind ausgenommen: Sie sind keine Eingabefelder und
   wuerden sonst auf volle Breite gezogen, mit Innenabstand und Rahmen. Die beiden
   Auswahlmuster weiter unten mussten das bisher je einzeln mit width:auto
   zuruecknehmen -- besser gleich hier ausnehmen, sonst faellt das naechste
   Kaestchen ohne eigene Klasse wieder auf. */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width:100%; padding:.7rem; font-size:1rem;
  border:1px solid var(--rand); border-radius:6px; }
/* textarea fehlte in der Regel darueber und blieb damit voellig ungestaltet:
   168px breit, 2px Innenabstand, Schreibmaschinenschrift -- und weil textarea
   von Haus aus inline-block ist, rutschte der Knopf daneben statt darunter.
   Betroffen ist die Begruendung einer Ablehnung; sie geht woertlich in die Mail
   an den Antragsteller, und ein Feld von der Groesse eines Suchschlitzes laedt
   nicht dazu ein, sie sorgfaeltig zu schreiben.
   font-family gesondert: Nur textarea erbt sonst Schreibmaschinenschrift, bei
   input und select ist die Oberflaechenschrift schon die Voreinstellung. */
textarea { display:block; font-family:inherit; line-height:1.5; resize:vertical; }
.knopf { display:inline-block; padding:.8rem 1.4rem; background:var(--vereinsfarbe);
         color:#fff; border:0; border-radius:6px; font-size:1rem;
         text-decoration:none; cursor:pointer; }
.knopf.gross { display:block; margin:.75rem 0; text-align:center; }
/* Der Absendeknopf braucht Luft nach oben -- er klebte unmittelbar am letzten
   Eingabefeld (gemessen: 0px).
   [novalidate] trifft genau die ausgefuellten Formulare dieser Anwendung: die
   vierzehn Assistentenschritte und die Anmeldung der Verwaltung. Alle schalten
   die Browserpruefung ab, weil der Server prueft -- das ist kein Zufall,
   sondern ihr gemeinsames Merkmal. Die kurzen Formulare der Verwaltung
   (Filter, Export, Nachweisliste) tragen es nicht; dort stehen die Knoepfe in
   Zeilen und wuerden nach unten wegrutschen.
   .leise bleibt aussen vor -- Nebenknoepfe wie "Neu zeichnen" haben ihren
   eigenen, kleineren Abstand.
   .entscheidung sind die drei Formulare am Fuss des Antragsblatts (In Pruefung
   nehmen, Annehmen, Ablehnen). Sie tragen kein [novalidate] -- dort prueft der
   Browser mit, das required auf den Feldern soll wirken -- brauchen den
   Abstand aber genauso. */
form[novalidate] > .knopf:not(.leise),
.entscheidung > .knopf { margin-top:1.5rem; }
.fehler { color:#b91c1c; font-size:.9rem; margin-top:.25rem; }

.fortschritt ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem;
                  padding:0; margin:0 0 1rem; font-size:.8rem; }
.fortschritt li { padding:.2rem .5rem; border-radius:99px; background:var(--grau);
                  color:#71717a; }
.fortschritt li.jetzt { background:var(--vereinsfarbe); color:#fff; }
.fortschritt li.erledigt a { color:var(--vereinsfarbe); text-decoration:none; }

.karte { display:flex; gap:.7rem; align-items:flex-start; padding:.9rem;
         margin:.5rem 0; border:1px solid var(--rand); border-radius:8px;
         cursor:pointer; font-weight:400; }
.karte:has(input:checked) { border-color:var(--vereinsfarbe); background:var(--vereinsfarbe-hell); }
.karte input { margin-top:.25rem; }
.karte-text strong { display:block; }
.karte-text em { color:#52525b; font-style:normal; font-size:.9rem; }
.hinweis { background:var(--grau); padding:.9rem; border-radius:8px; font-size:.9rem; }
fieldset { border:0; padding:0; margin:1rem 0; }
legend { font-weight:600; padding:0; }

/* Ein Formularfeld als Block (siehe teile/feld.ejs): Der Abstand zum naechsten
   Feld haengt hier und nicht mehr am oberen Rand der Beschriftung. Vorher trug
   jede Beschriftung ihren eigenen Abstand, und alles, was zwischen zwei Feldern
   stand, kam obendrauf. */
.feld { margin-top:1rem; }
.feld label { margin:0 0 .25rem; }
/* Ein Feld mit Statuszeile (die IBAN, siehe .befund weiter unten) haelt deren
   Platz auch dann frei, wenn nichts darin steht. Dieser Platz traegt den
   groessten Teil des Abstands zum naechsten Feld -- ohne diese Regel kaeme der
   volle Feldabstand obendrauf, und unter der IBAN stuenden 39px, wo zwischen
   allen anderen Feldern 16px stehen. Gemessen sind es so 27px.
   Wo :has() fehlt (Safari vor 15.4), bleibt es beim alten, groesseren
   Abstand -- unschoen, aber nichts geht kaputt. */
.feld:has(.befund) + .feld { margin-top:.4rem; }

/* Kurze Auswahl aus wenigen gleichrangigen Moeglichkeiten (Geschlecht) --
   anders als .karte, das mehrzeilige Eintraege mit Erlaeuterung traegt.
   Nebeneinander, umbrechend auf schmalen Anzeigen. Der ganze Bereich ist
   anklickbar, nicht nur das kleine Feld: Das ist am Telefon der Unterschied
   zwischen "geht" und "geht nicht".
   Heisst NICHT .auswahl -- diesen Namen tragen bereits fuenf fieldset-Elemente
   (Mitgliedschaft, Spielbetrieb) als Bezeichnung ohne eigene Regel. Eine Regel
   darauf haette dort die Karten nebeneinandergestellt und Ueberschrift wie
   Fehlermeldung mit in die Reihe gezogen. */
.auswahlreihe { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.auswahlreihe label { display:flex; align-items:center; gap:.5rem; margin:0;
                      padding:.6rem .9rem; border:1px solid var(--rand);
                      border-radius:6px; font-weight:400; cursor:pointer; }
.auswahlreihe label:has(input:checked) { border-color:var(--vereinsfarbe);
                                         background:var(--vereinsfarbe-hell); }
.auswahlreihe input { margin:0; accent-color:var(--vereinsfarbe); }
/* Sichtbarer Fokusring fuer alle, die mit der Tastatur durchgehen -- ohne ihn
   waere beim Tabben nicht erkennbar, wo man steht. */
.auswahlreihe label:focus-within { outline:2px solid var(--vereinsfarbe);
                                   outline-offset:2px; }

.haken { display:flex; gap:.6rem; align-items:flex-start; font-weight:400;
         margin:.8rem 0; }
.haken input { margin-top:.3rem; }
.warnung { border-left:4px solid #d97706; background:#fffbeb;
           padding:.8rem 1rem; border-radius:0 8px 8px 0; font-size:.9rem; }

/* Die Statuszeile der IBAN-Pruefung haelt ihren Platz frei, damit die Seite
   nicht springt, sobald ein Befund erscheint. Dafuer muss die freigehaltene
   Hoehe der tatsaechlichen Zeilenhoehe entsprechen -- mit 1.2em gegen die
   geerbten 1.6 Zeilenhoehe wuchs die Zeile beim Erscheinen um 6px, und alles
   darunter rutschte mit. Eigene, engere Zeilenhoehe statt hoeherer
   min-height: sonst stuende im Ruhezustand eine unnoetig grosse Luecke. */
.befund { font-size:.9rem; line-height:1.35; margin:.25rem 0 0; min-height:1.35em; }
/* Im Formular rueckt die Zeile eng an ihr Feld: So gehoert sie sichtbar zur
   IBAN darueber und nicht zum Feld darunter (siehe .feld:has(.befund) oben). */
.feld .befund { margin-top:.1rem; }
.befund.gut { color:#15803d; }
.befund.schlecht { color:#b91c1c; }

.einwilligung { padding:.8rem 0; border-bottom:1px solid var(--rand); }
.einwilligung details { margin-left:2rem; font-size:.85rem; color:#52525b; }
.einwilligung summary { cursor:pointer; color:var(--vereinsfarbe); }
h2 { font-size:1.1rem; margin-top:2rem; }

.pruefblock { margin:1.5rem 0; }
.pruefblock h2 { display:flex; justify-content:space-between; align-items:baseline;
                 border-bottom:1px solid var(--rand); padding-bottom:.3rem; }
.aendern { font-size:.85rem; font-weight:400; color:var(--vereinsfarbe); }
.pruefblock dl { display:grid; grid-template-columns:1fr 1.4fr; gap:.3rem .8rem;
                 margin:.6rem 0; font-size:.95rem; }
.pruefblock dt { color:#52525b; }
.pruefblock dd { margin:0; }
.unterschriftsfeld canvas { width:100%; height:200px; border:2px dashed var(--rand);
                            border-radius:8px; touch-action:none; background:#fff; }
.knopf.leise { background:transparent; color:var(--vereinsfarbe); border:1px solid var(--rand);
               margin-top:.5rem; }
.ortdatum { color:#52525b; font-size:.9rem; }
.gross { font-size:1.2rem; }

.nachweisliste { list-style:none; padding:0; margin:1rem 0; }
.nachweiszeile { padding:.9rem 0; border-bottom:1px solid var(--rand); }
.nachweisbezeichnung { display:block; font-weight:600; margin-bottom:.4rem; }
.nachweisdatei { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.nachweishochladen { display:flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap; }
.nachweishochladen label { margin:0; font-weight:400; font-size:.85rem; color:#52525b; }
.nachweishochladen input[type="file"] { width:auto; padding:.3rem 0; border:0; }
form.inline { display:inline; margin:0; }