/* ═══ v2 · beitritt.css — Beitrittsantrag als Karte von unten (Mockup 80a–80c).
   Die Kartenhülle (pf-wrap / pf-sheet / pf-grip / pf-body) kommt aus css/profil.css —
   gleiche Karte, gleiches Verhalten, kein zweites Rezept. Hier steht nur, was der
   Antrag eigenes hat: der feste Kopf mit Fortschritt und der Inhalt der Schritte. ═══ */

/* Die Karte trägt einen ganzen Vorgang, deshalb höher als die kurzen Karten.
   Sie bleibt beim Tippen stehen: die Tastatur schiebt sich darüber, nur der Scrollbereich
   bekommt unten Polster (sheet.js). Der Griff behält das Maß aus dem Profil. */
.bt-sheet{height:92%}

/* Fester Kopf: sitzt zwischen Griff und Inhalt und scrollt daher nie weg. Er steht STILL —
   das mitscrollende Verdichten brachte Unruhe in ein Formular, das ruhig sein soll. */
.bt-kopf{flex:0 0 auto;padding:0 0 var(--sp-4)}
.bt-kopf.leer{padding:0;border-bottom-color:transparent}
/* Die Mitte sitzt in der MITTE der Karte — genau unter dem Griff. Zwischen zwei Knoepfen
   verschiedener Breite waere sie sonst versetzt und das Bild uneinheitlich. */
.bt-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:0 var(--edge)}
.bt-top .pf-abbr,.bt-top .pf-tun{flex:0 0 auto;position:relative;z-index:1}
/* Die Mitte sagt immer, in welchem Vorgang man steckt — sie bleibt auch beim Verdichten stehen. */
.bt-mini{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:46%;
  text-align:center;font:800 var(--fs-row)/1.2 var(--f);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-gross{padding:var(--sp-6) var(--edge) 0;
  font:800 var(--fs-title)/1.15 var(--f);letter-spacing:-.6px;color:var(--ink)}
.bt-fort{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--edge) 0}
.bt-rule{display:flex;gap:5px;flex:1;min-width:0}
.bt-rule i{flex:1;height:3px;border-radius:99px;background:#3b3f43}
[data-theme="light"] .bt-rule i{background:var(--line)}
.bt-rule i.on{background:var(--hl)}
.bt-fort em{flex:0 0 auto;font-style:normal;font-size:var(--fs-eb);font-weight:800;
  letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--muted)}

/* Lese-Seite im Vorgang: rechts in der Kopfzeile steht nichts, damit die Mitte mittig bleibt. */
.bt-leer{width:52px;flex:0 0 auto}
.bt-stand{padding:var(--sp-5) var(--edge) 0;font-size:var(--fs-sub);color:var(--muted)}
.bt-body.lese{padding-top:0}
.bt-body.lese .dk-body{padding-top:0}

/* Fortgesetzter Entwurf */
.bt-wieder{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);margin-bottom:var(--sp-5)}
.bt-wieder span{flex:1;min-width:0;font-size:var(--fs-sub);color:var(--muted)}
.bt-wieder button{flex:0 0 auto;background:transparent;border:0;padding:var(--sp-2) 0;
  font:700 var(--fs-sub)/1 var(--f);color:var(--hl-text)}

/* Inhalt der Schritte */
.bt-body{padding:var(--sp-5) var(--edge) var(--sp-8)}
/* Abschnittsueberschrift ist immer Vereinsgelb — Gelb = Ueberschrift (Farbkonzept). */
.bt-eb2{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin-top:var(--sp-7)}
/* Zahl rechts in einer Abschnittsueberschrift (z. B. „4 von 6"). */
.bt-eb2{display:flex;align-items:baseline;gap:var(--sp-4)}
.bt-eb-r{margin-left:auto;color:var(--muted)}
/* Abwesende bleiben lesbar, treten aber zurueck. */
.bt-wahl.aus .bt-wahl-tx b{color:var(--muted)}
/* Uebernommene Daten: Beiwerk, deshalb grau. */
.bt-uebern{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-3)}
/* Was unter einer Summe steht, ist Beiwerk. */
.bt-unter{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}

/* Infokasten */
.bt-info{display:flex;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-field);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sub);line-height:1.55;color:var(--muted);text-wrap:pretty}
/* Das Zeichen sitzt genau in der ersten Textzeile: es bekommt deren Höhe und zentriert
   sich darin — dadurch schließt es oben bündig mit dem Text ab, in jedem Kasten gleich. */
.bt-info-ic{flex:0 0 auto;color:var(--hl-text);height:calc(var(--fs-sub) * 1.55);
  display:flex;align-items:center}
.bt-info-ic svg{width:16px;height:16px;display:block}
.bt-info b{color:var(--ink);font-weight:700}
.bt-body > .bt-info:first-child{margin-top:0}

/* Feld */
.bt-feld{margin-top:var(--sp-5)}
.bt-feld i{display:block;font-style:normal;font-size:var(--fs-eb);font-weight:800;
  letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--hl-text)}
/* Alle Felder gleich hoch: das Datumsfeld bringt von sich aus eine kleinere Zeile mit. */
.bt-feld input{display:block;width:100%;max-width:100%;box-sizing:border-box;height:53px;
  -webkit-appearance:none;appearance:none;margin-top:var(--sp-3);
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-field);padding:var(--sp-5);
  color:var(--ink);font:400 var(--fs-input)/1.2 var(--f)}
.bt-feld input[type="date"]{height:53px;line-height:1.2}
.bt-feld input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.bt-feld input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7)}
[data-theme="light"] .bt-feld input[type="date"]::-webkit-calendar-picker-indicator{filter:none}
.bt-feld input::placeholder{color:var(--muted)}
.bt-feld input:focus{outline:none;border-color:var(--hl)}
.bt-hint{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-3)}
.bt-hint.rot{color:var(--bad)}

/* Wahlzeile mit Haken rechts */
.bt-wahl{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--sp-4) 0;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font:inherit}
.bt-ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bt-ic i{width:9px;height:9px;border-radius:99px}
.bt-wahl-tx{flex:1;min-width:0}
.bt-wahl-tx b{display:block;font-size:var(--fs-row);font-weight:700}
.bt-wahl-tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.bt-haken{width:22px;height:22px;border-radius:99px;border:1.5px solid #4a4f54;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--hl-ink)}
[data-theme="light"] .bt-haken{border-color:var(--line)}
.bt-haken.an{background:var(--hl);border-color:var(--hl)}
.bt-haken svg{width:14px;height:14px}

/* Schalter */
.bt-schalt{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--line)}
.bt-schalt-tx{flex:1;min-width:0}
.bt-schalt-tx b{display:block;font-size:var(--fs-row);font-weight:700}
.bt-schalt-tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.bt-sw{width:44px;height:26px;border-radius:99px;background:var(--line);border:0;position:relative;flex-shrink:0;padding:0}
.bt-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:99px;background:var(--muted);
  transition:left .18s ease,background .18s ease}
.bt-sw.on{background:var(--hl)}
.bt-sw.on i{left:21px;background:var(--hl-ink)}

/* Wertzeile und Summe */
.bt-z{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.bt-z .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
/* Die eingegebenen Werte sind Inhalt, keine Titel: normale Strichstaerke, damit die
   Zusammenfassung nicht schwerer wirkt als der Rest des Antrags. */
.bt-z .wert{font-size:var(--fs-row);font-weight:400;text-align:right}
.bt-z .wert.leise{color:var(--muted)}
.bt-z .wert.hell{color:var(--hl-text)}
.bt-summe{display:flex;align-items:baseline;gap:var(--sp-4);padding-top:var(--sp-5)}
.bt-summe span{flex:1;min-width:0;font-size:var(--fs-row);font-weight:700}
.bt-summe b{font-size:var(--fs-title);font-weight:800;letter-spacing:-.6px;color:var(--hl-text)}

/* Haken zum Bestätigen */
.bt-check{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;margin-top:var(--sp-5);
  background:transparent;border:0;padding:0;text-align:left;
  font:400 var(--fs-sub)/1.5 var(--f);color:var(--muted)}
.bt-check .kasten{position:relative;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--hl);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--hl-text);margin-top:2px;padding:0;background:transparent}
.bt-check .kasten::after{content:"";position:absolute;inset:-12px}   /* 44px Trefferfeld */
.bt-link{background:transparent;border:0;padding:0;font:700 var(--fs-sub)/1.5 var(--f);color:var(--hl-text);
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.bt-check.an .kasten{background:var(--hl);color:var(--hl-ink)}
.bt-check .kasten svg{width:13px;height:13px}

/* Unterschrift */
.bt-sig{position:relative;height:168px;margin-top:var(--sp-3);border:1.5px dashed #4a4f54;border-radius:var(--r-field)}
[data-theme="light"] .bt-sig{border-color:var(--line)}
.bt-sig canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.bt-sig-hint{position:absolute;left:0;right:0;bottom:var(--sp-4);text-align:center;
  font-size:var(--fs-sub);color:var(--muted);pointer-events:none}
.bt-sig.voll{border-style:solid;border-color:var(--hl)}
.bt-sig.voll .bt-sig-hint{display:none}
.bt-sig-weg{position:absolute;right:var(--sp-3);top:var(--sp-3);background:transparent;border:0;padding:var(--sp-2);
  font:700 var(--fs-sub)/1 var(--f);color:var(--muted)}
.bt-sig.voll .bt-sig-weg{color:var(--hl-text)}

/* Kuendigung: das errechnete Datum ist die eine Information, die zaehlt — gross und rot,
   weil ein Enddatum zerstoerend ist. */
.ku-termin{display:flex;align-items:baseline;gap:var(--sp-4);padding-top:var(--sp-3)}
.ku-datum{flex:0 0 auto;font-size:var(--fs-zahl);font-weight:800;letter-spacing:-1.2px;line-height:1.1;color:var(--bad)}
.ku-neben{flex:1;min-width:0;font-size:var(--fs-sub);color:var(--muted)}
.bt-av{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);color:var(--hl-text)}
.bt-z .wert.rot{color:var(--bad)}

.bt-fertig-tx b{color:var(--ink);font-weight:700}

/* Betragsvorschlaege (83a): nehmen die schwerste Frage des Formulars ab. */
.fv-chips{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.fv-chip{flex:1;padding:11px 0;border-radius:12px;border:1px solid var(--line);background:var(--field);
  font:700 var(--fs-row)/1 var(--f);color:var(--muted)}
.fv-chip.an{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);font-weight:800}

/* Hinweis, wenn im Konto noch keine Mitgliedschaft liegt (82a) */
.bt-leer-tx{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin-top:var(--sp-5);text-wrap:pretty}

/* Fertig */
.bt-fertig{padding-top:var(--sp-7);text-align:center}
.bt-fertig-ic{width:56px;height:56px;border-radius:99px;background:var(--hl);color:var(--hl-ink);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5)}
.bt-fertig-ic svg{width:28px;height:28px}
.bt-fertig-h{font-size:var(--fs-title);font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.bt-fertig-tx{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin-top:var(--sp-4);text-wrap:pretty}
.bt-weiter{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-7);background:transparent;border:0;
  font:800 var(--fs-row)/1 var(--f);color:var(--hl-text)}
.bt-chev{width:16px;height:16px}

/* Zerstoerende Handlung in der Kopfzeile einer Karte — selten, deshalb nur hier. */
.pf-tun.rot{color:var(--bad)}

/* Stand-Zeile unter dem Kartentitel (94c) */
.bt-stand2{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--edge) 0;
  font-size:var(--fs-sub);color:var(--muted)}
.bt-punkt{width:9px;height:9px;border-radius:99px;flex-shrink:0}
.ku-datum.hell{color:var(--hl-text)}
.kd-ic.hl{border-color:var(--hl);color:var(--hl-text)}

/* Karten zum Nachschlagen tragen nur den Titel: Griff runterziehen oder daneben tippen
   schliesst sie — ein Knopf dafuer waere ein Wort fuer das Selbstverstaendliche. */
.bt-top.nur-titel{justify-content:center}
.bt-top.nur-titel .bt-mini{position:static;transform:none;max-width:100%}

/* ── PDF in der Karte ──
   Der PDF-Betrachter des Systems laeuft in einem Rahmen INNERHALB der Karte: die App
   bleibt stehen, Griff runterziehen schliesst. Die Flaeche ist randlos, damit das
   Dokument die ganze Breite hat. */
.pdf-sheet{height:92%}
.pdf-sheet .pf-body{padding:0;overflow:hidden}
/* Die Flaeche scrollt, nicht der Rahmen — iOS laesst ein PDF im Rahmen nicht scrollen und
   verschluckt die Geste. EINE Regel, sonst gewinnt ein spaeteres overflow:hidden. */
.pdf-flaeche{position:relative;width:100%;height:100%;background:#fff;
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pdf-halter{position:relative;width:100%}
/* Der Rahmen traegt die volle Dokumentbreite und wird auf die Karte verkleinert
   (Faktor setzt dokumente.js). Zoomen im Dokument bleibt moeglich. */
.pdf-rahmen{border:0;display:block;background:#fff;transform-origin:top left;pointer-events:none}
.pdf-hinweis{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:var(--fs-sub);color:#6c7176;padding:0 var(--edge)}
.pdf-raus{background:transparent;border:0;padding:var(--sp-2);
  font:700 var(--fs-sub)/1 var(--f);color:var(--hl-text);text-decoration:underline}
/* Teilen-Zeichen in der Kopfzeile: 26px Umriss, 44px Trefferfeld. */
.pdf-teilen{position:relative;flex:0 0 auto;width:26px;height:26px;padding:0;
  background:transparent;border:0;color:var(--hl-text);display:flex;align-items:center;justify-content:center}
.pdf-teilen svg{width:20px;height:20px}
.pdf-teilen::after{content:"";position:absolute;inset:-9px}

/* Mehr als vier Vorschlaege brechen um. */
.fv-chips.wrap{flex-wrap:wrap}
.fv-chips.wrap .fv-chip{flex:0 0 auto;padding:9px 14px;
  font-size:var(--fs-eb);letter-spacing:var(--lsp-eb);text-transform:uppercase}

/* Von und Bis gehoeren zusammen — nebeneinander statt in zwei Reihen. */
.bt-paar{display:flex;gap:var(--sp-4)}
.bt-paar .bt-feld{flex:1;min-width:0}
/* „Alle Tage zeigen" — still, mittig, wie „Alle 14 zeigen" in den Listen. */
.bt-mehr{display:block;width:100%;background:transparent;border:0;padding:var(--sp-4) 0 0;
  font:700 var(--fs-sub)/1 var(--f);color:var(--muted);text-align:center}
.bt-wahl-tx b.leise{color:var(--muted)}
.bt-unter2{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-3)}

/* Auswahllisten aus dem Verband: der Name ist Inhalt, keine Ueberschrift — 400 statt 700. */
.bt-wahl-tx.ruhig b{font-weight:400}

/* ── Fund beim Verband (Turn 103a) ──
   Wappen, Name kraeftig, Liga darunter: er ist die Antwort auf die Frage darueber. */
.kd-fund{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0 var(--sp-4)}
.kd-fund .tx{min-width:0}
.kd-fund .tx b{display:block;font-size:var(--fs-val);font-weight:700;color:var(--ink)}
.kd-fund .tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
/* Wappenkachel — wie die Symbolkacheln, nur mit Bild. */
.kd-wappen{width:38px;height:38px;border-radius:12px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.kd-wappen img{width:26px;height:26px;object-fit:contain;display:block}
/* Eine nicht gewaehlte Antwort tritt zurueck, bleibt aber lesbar. */
.bt-wahl-tx.ruhig.leise b{color:var(--muted)}
/* Fremdlogo in der Symbolkachel: eigene Farbe, kein Einfaerben. */
.bt-ic svg[viewBox="0 0 545 360"]{width:17px;height:12px}

/* ── Ein Schritt gleitet zum naechsten (Einrichtungskette) ──
   Die Karte bleibt stehen, nur ihr Inhalt wechselt: der alte geht nach links, der neue
   kommt von rechts. Kein Oeffnen und Schliessen mehr zwischen den Schritten. */
.bt-body.kd-slide,.kd-slide{transition:transform .18s ease, opacity .18s ease}
.kd-slide.rein{transform:translateX(22px);opacity:0}
.kd-slide.raus{transform:translateX(-22px);opacity:0}
@media (prefers-reduced-motion:reduce){
  .kd-slide{transition:none}
  .kd-slide.rein,.kd-slide.raus{transform:none;opacity:1}
}

/* Viele Zeilen mit Haken: eine volle gelbe Fläche je Zeile ist zu laut. Nur Rand und
   Zeichen tragen die Farbe — die Auswahl bleibt erkennbar, die Liste ruhig. */
.bt-wahl .bt-haken.an{background:transparent;border:1.5px solid var(--hl);color:var(--hl-text)}