/* ═══════════════════════════════════════════════
   Penzberger TeamTrail — Anmeldung
   Styles
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ──────────────────────────── */
:root {
  /* Akzentfarbe der Anmeldung — dasselbe Orange wie auf der übrigen
     Website (css/style.css: --orange / --orange-dark). Hieß früher
     --blue; der Name ist jetzt neutral, damit ein späterer Farbwechsel
     nicht wieder unpassende Namen hinterlässt. */
  --primary:      #FF8030;
  --primary-dk:   #E85D04;
  --primary-bg:   rgba(255,128,48,.10);
  --primary-ring: rgba(255,128,48,.28);
  /* Für Text auf hellem Grund: kräftiger als das Orange, damit kleine
     Schrift lesbar bleibt. */
  --primary-tx:   #9A3412;
  --bg:        #FFF6EE;
  --card:      #ffffff;
  --label:     #1c1c1e;
  --secondary: #8e8e93;
  --input-bg:  rgba(120,120,128,.12);
  --div:       rgba(60,60,67,.13);
  --div-thick: #f2f2f7;
  --danger:    #ff3b30;
  --success:   #34c759;
  --orange:    #FF8030;
  --ri:        8px;
  --card-r:    12px;
}

/* ── Base ───────────────────────────────────── */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--label);
  min-height: 100vh;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────── */
.hdr {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--div);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.hdr-logo {
  width: 36px; height: 36px;
  background: linear-gradient(145deg,#FF8030,#E85D04);
  border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.hdr-logo svg { width: 20px; height: 20px; fill: #fff; }
.hdr-titles { flex: 1; }
.hdr-titles h1 { font-size: 17px; font-weight: 600; }
.hdr-titles span { font-size: 13px; color: var(--secondary); }

.hdr-nav { display: flex; gap: 4px; }
.nav-btn {
  background: none; border: none; border-radius: 6px;
  padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--orange); font-family: inherit; transition: background .15s;
}
.nav-btn:hover { background: rgba(255,128,48,.1); }

/* ── Sections ───────────────────────────────── */
.section { display: none; }
.section.active { display: block; }

/* ── Registration wrapper ───────────────────── */
.reg-wrap { max-width: 540px; margin: 0 auto; padding: 20px 20px 80px; }

/* ── Step Indicator ─────────────────────────── */
.stepper {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.step-item { display: flex; align-items: center; }
.step-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 2px solid var(--div); color: var(--secondary);
  background: var(--card); transition: all .2s; flex-shrink: 0;
}
.step-circle.active { border-color: var(--primary); color: var(--primary-tx); background: var(--primary-bg); }
.step-circle.done   { border-color: var(--primary); color: #fff; background: var(--primary); }
.step-label {
  font-size: 12px; font-weight: 500; color: var(--secondary);
  margin: 0 6px; transition: color .2s; white-space: nowrap;
}
.step-label.active { color: var(--primary-tx); font-weight: 600; }
.step-label.done   { color: var(--primary-tx); }
.step-line { width: 32px; height: 2px; background: var(--div); transition: background .2s; flex-shrink: 0; }
.step-line.done { background: var(--primary); }

/* ── Sheet (Card) ───────────────────────────── */
.sheet {
  background: var(--card); border-radius: var(--card-r);
  border: 1px solid var(--div);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  overflow: hidden;
}
.sheet-title {
  text-align: center; font-size: 17px; font-weight: 700;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--div);
}
.sheet-body { padding: 4px 0; }
.sheet-footer {
  display: flex; justify-content: center; gap: 12px;
  padding: 14px 20px 18px; border-top: 1px solid var(--div);
}

/* ── Form Rows (macOS style) ────────────────── */
.frow {
  display: flex; align-items: center;
  padding: 0 18px; min-height: 44px; gap: 12px;
}
.frow + .frow { border-top: 1px solid var(--div); }
.sep { border-top: 5px solid var(--div-thick) !important; min-height: 0 !important; padding: 0 !important; }

.flbl {
  width: 105px; min-width: 105px; text-align: right;
  font-size: 14px; font-weight: 500; color: var(--label); flex-shrink: 0;
}
.flbl.r::after { content: ' *'; color: var(--danger); font-size: 12px; }

.finput {
  flex: 1; padding: 8px 10px;
  background: var(--input-bg); border: 1.5px solid transparent; border-radius: var(--ri);
  font-size: 15px; font-family: inherit; color: var(--label);
  outline: none; transition: border .15s, box-shadow .15s; min-width: 0;
}
.finput:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.finput::placeholder { color: var(--secondary); }
.finput.err { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(255,59,48,.18) !important; }

/* ── Segmented Control (Geschlecht) ─────────── */
.seg { display: flex; background: var(--input-bg); border-radius: var(--ri); padding: 2px; border: 1.5px solid transparent; transition: border .15s, box-shadow .15s; }
.seg.err { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,59,48,.18); }
.seg-opt { flex: 1; position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-lbl {
  display: block; padding: 5px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--secondary);
  cursor: pointer; text-align: center; transition: all .15s;
  user-select: none; white-space: nowrap;
}
.seg-opt input:checked + .seg-lbl {
  background: #fff; color: var(--label);
  box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

/* ── Wettbewerb States ──────────────────────── */
.wk-pending {
  flex: 1; font-size: 13px; color: var(--secondary);
  padding: 8px 10px; background: var(--input-bg); border-radius: var(--ri);
}
.wk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(52,199,89,.11); color: #1d8a36;
  border-radius: 20px; padding: 5px 14px;
  font-size: 14px; font-weight: 600; border: 1.5px solid rgba(52,199,89,.28);
}
.wk-opts { flex: 1; flex-wrap: wrap; gap: 6px; }
.wk-opt-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 14px; border-radius: var(--ri);
  border: 1.5px solid var(--div); background: var(--input-bg);
  color: var(--label); font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: left; transition: all .15s;
}
.wk-opt-btn strong { font-weight: 600; }
.wk-opt-sub { font-size: 11px; color: var(--secondary); font-weight: 400; }
/* Zeigen, worauf die Maus steht — aber nur dezent, in Grau. Wäre der
   Hover ebenfalls orange, sähe er aus wie eine getroffene Auswahl, und
   man wüsste nicht mehr, was wirklich gewählt ist. Die Farbe bleibt
   also der Auswahl vorbehalten. */
.wk-opt-btn:hover { border-color: var(--secondary); background: rgba(120,120,128,.18); }

/* Gewählt: orange, kräftigerer Rahmen und ein Haken davor — auch ohne
   Farbe erkennbar. */
.wk-opt-btn.sel {
  border-color: var(--primary); border-width: 2px; padding: 6.5px 13px;
  background: var(--primary-bg); color: var(--primary-tx); font-weight: 600;
}
.wk-opt-btn.sel .wk-opt-sub { color: var(--primary-tx); }

/* Der Haken ist immer da, aber nur bei Auswahl sichtbar — so bleibt die
   Breite gleich und der Knopf springt beim Anklicken nicht. */
.wk-opt-btn strong::before { content: "✓ "; visibility: hidden; font-weight: 700; }
.wk-opt-btn.sel strong::before { visibility: visible; }

/* Über einer bereits gewählten Fläche: etwas kräftiger, damit klar ist,
   dass ein Klick sie wieder aufhebt. */
.wk-opt-btn.sel:hover { background: rgba(255,128,48,.18); border-color: var(--primary-dk); }

/* Ältere Gruppe gewählt: Statt des Vorschlags steht oben der neue
   Wettbewerb in einer grauen Box. Der Vorschlag wird nur per CSS
   versteckt — sein style.display bleibt unangetastet, denn daran liest
   anmeldung.js ab, was gerade gewählt ist. */
.wk-ersetzt { display: none; }
#wk-row.elder-aktiv .wk-ersetzt {
  display: inline-flex; flex-direction: column; gap: 2px; min-width: 0;
  background: rgba(120,120,128,.14); color: var(--label);
  border: 1.5px solid rgba(120,120,128,.28); border-radius: var(--ri);
  padding: 6px 14px; font-size: 14px; font-weight: 600;
}
#wk-row.elder-aktiv .wk-ersetzt small { font-size: 11px; font-weight: 400; color: var(--secondary); }
#wk-row.elder-aktiv #wk-pill,
#wk-row.elder-aktiv #wk-opts { display: none !important; }

.wk-elder-row {
  align-items: center; gap: 10px;
  padding: 0 18px 12px calc(105px + 18px + 12px);
}
.wk-elder-lbl { font-size: 12px; color: var(--secondary); white-space: nowrap; flex-shrink: 0; }
.wk-elder-sel  { flex: 1; font-size: 13px; padding: 6px 8px; }

.wk-warn { display: none; flex: 1; flex-direction: column; gap: 6px; }
.wk-warn-txt {
  font-size: 13px; color: var(--danger);
  background: rgba(255,59,48,.07); border-radius: var(--ri);
  padding: 7px 12px; border: 1.5px solid rgba(255,59,48,.18);
}
.fselect {
  flex: 1; padding: 8px 10px;
  background: var(--input-bg); border: 1.5px solid transparent; border-radius: var(--ri);
  font-size: 15px; font-family: inherit; color: var(--label);
  outline: none; cursor: pointer; transition: border .15s;
}
.fselect:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.fselect.err { border-color: var(--danger) !important; }
.ta-hint { font-size: 12px; color: var(--secondary); padding: 0 18px 10px; display: none; }
.ta-hint.show { display: block; }

/* ── Buttons ────────────────────────────────── */
.btn {
  padding: 9px 26px; border: none; border-radius: 20px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: filter .15s; white-space: nowrap;
}
a.btn       { display: inline-block; text-decoration: none; }
.btn:hover  { filter: brightness(.93); }
.btn:active { filter: brightness(.87); }
.btn-primary { background: var(--primary); color: #fff; font-weight: 600; }
.btn-cancel  { background: rgba(120,120,128,.2); color: var(--label); }
.btn-sm      { padding: 6px 16px; font-size: 13px; border-radius: 14px; }
.btn-del     { background: rgba(255,59,48,.1); color: var(--danger); }
.btn-copy,
.btn-edit,
.btn-del.btn-sm { padding: 6px 10px; display: flex; align-items: center; }
.btn-copy    { background: rgba(120,120,128,.15); color: var(--secondary); }
.btn-edit    { background: rgba(255,128,48,.1); color: var(--primary-tx); }

/* ── Back link ──────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; color: var(--primary-tx); cursor: pointer;
  background: none; border: none; font-family: inherit;
  padding: 0; margin-bottom: 18px;
}
.back-link:hover { text-decoration: underline; }

/* ── Step 2: Team List ──────────────────────── */
.team-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--div);
}
.team-item:last-child { border-bottom: none; }
.team-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary-tx);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.team-info { flex: 1; min-width: 0; }
.team-names { font-size: 15px; font-weight: 600; }
.team-meta  { font-size: 12px; color: var(--secondary); margin-top: 2px; }
.team-wk    { font-size: 13px; color: var(--primary-tx); font-weight: 500; margin-top: 3px; }
.team-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.team-price { font-size: 15px; font-weight: 600; }

.list-empty { padding: 40px 20px; text-align: center; color: var(--secondary); font-size: 15px; }

.total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-top: 2px solid var(--div);
  font-weight: 700; font-size: 16px;
}
.total-row .total-val { font-size: 20px; color: var(--primary-tx); }

.add-another {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  cursor: pointer; color: var(--primary-tx); font-size: 14px; font-weight: 500;
  background: none; border: none; border-top: 1px solid var(--div);
  width: 100%; font-family: inherit; text-align: left;
  transition: background .15s;
}
.add-another:hover { background: var(--primary-bg); }
.add-another .plus {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* ── Step 3: Summary ────────────────────────── */
.summary-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--div); font-size: 14px;
}
.summary-item:last-child { border-bottom: none; }
.si-name  { font-weight: 600; }
.si-wk    { font-size: 12px; color: var(--secondary); margin-top: 2px; }
.si-price { font-weight: 600; }

/* ── Info Banner ────────────────────────────── */
.info-banner {
  background: var(--primary-bg); border: 1.5px solid rgba(255,128,48,.2);
  border-radius: var(--ri); padding: 12px 16px;
  font-size: 13px; color: var(--primary-tx); margin-bottom: 16px;
  display: flex; gap: 10px; align-items: flex-start;
}
.info-banner svg { flex-shrink: 0; margin-top: 1px; }

/* ── Success Screen ─────────────────────────── */
.success-sheet {
  display: none; background: var(--card); border-radius: var(--card-r);
  border: 1px solid var(--div);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  padding: 52px 32px; text-align: center;
  flex-direction: column; align-items: center; gap: 14px;
}
.success-sheet.show { display: flex; }
.success-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(52,199,89,.12); color: var(--success);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.success-sheet h3 { font-size: 22px; font-weight: 700; }
.success-sheet p  { color: var(--secondary); font-size: 15px; max-width: 300px; line-height: 1.5; }
.success-ref {
  font-size: 13px; color: var(--secondary);
  background: var(--input-bg); border-radius: var(--ri); padding: 8px 16px;
}

/* ── Admin ──────────────────────────────────── */
.admin-wrap { max-width: 1400px; margin: 32px auto; padding: 0 20px 80px; }

.stats-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-pill {
  background: var(--card); border: 1px solid var(--div);
  border-radius: 10px; padding: 12px 20px; flex: 1; min-width: 90px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.stat-pill .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.stat-pill .lbl { font-size: 11px; color: var(--secondary); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-top: 2px; }
.c-akzent { color: var(--primary-tx); }
.c-pur  { color: #af52de; }
.c-ora  { color: var(--orange); }
.c-grn  { color: var(--success); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.toolbar-r { display: flex; gap: 8px; }

/* ── Filter über der Admin-Tabelle ──────────────── */
.admin-filter {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px;
}
.admin-filter .finput  { flex: 2 1 260px; min-width: 0; }
.admin-filter .fselect { flex: 1 1 170px; min-width: 0; }

/* Alle drei Bedienelemente gleich hoch. Nötig, weil Safari einem
   <input type="search"> ein eigenes Aussehen mit abweichender Höhe gibt
   und der Knopf sonst niedriger ausfällt als die Felder daneben. */
.admin-filter .finput,
.admin-filter .fselect,
.admin-filter .btn {
  height: 38px;
  box-sizing: border-box;
  line-height: normal;
}
.admin-filter .finput[type="search"] {
  -webkit-appearance: textfield;
          appearance: textfield;
}
/* Der Knopf zentriert seinen Text bei fester Höhe von selbst — das
   Standard-Padding würde ihn nur unnötig breit machen. */
.admin-filter .btn { padding: 0 16px; }

.admin-sheet {
  background: var(--card); border-radius: var(--card-r);
  border: 1px solid var(--div); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden;
}
.ox { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead { background: var(--bg); }
th {
  padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 700;
  color: var(--secondary); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--div); white-space: nowrap;
}
/* Sortierbare Überschrift: anklickbar, mit Pfeil an der aktiven Spalte.
   Der Pfeil kommt aus data-pfeil, das renderAdmin() setzt. */
th.th-sort { cursor: pointer; user-select: none; }
th.th-sort:hover { color: var(--primary-tx); background: var(--primary-bg); }
th.th-sort::after {
  content: attr(data-pfeil); font-size: 9px; margin-left: 5px;
  vertical-align: 1px; letter-spacing: 0;
}
th.th-sort.sortiert { color: var(--primary-tx); }

td { padding: 11px 14px; border-bottom: 1px solid var(--div); font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,128,48,.04); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill-m { background: rgba(255,128,48,.1); color: var(--primary-tx); }
.pill-w { background: rgba(175,82,222,.1); color: #9333ea; }
.pill-x { background: rgba(120,120,128,.15); color: #4a4a4f; }
/* Mehrfach gemeldetes Team — soll in der Tabelle auffallen. */
.pill-dub { background: rgba(220,53,69,.12); color: #c0392b; }

.empty {
  padding: 52px 20px; text-align: center; color: var(--secondary);
  font-size: 15px; display: none; flex-direction: column; align-items: center; gap: 8px;
}
.empty svg { width: 40px; height: 40px; opacity: .22; margin-bottom: 4px; }

/* ── Modal (Admin Login) ────────────────────── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 200; align-items: center; justify-content: center;
}
.overlay.show { display: flex; }
.modal-sheet {
  background: var(--card); border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  padding: 28px 28px 22px; width: 310px; max-width: 90vw;
}
.modal-sheet h3 { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.modal-sheet p  { font-size: 13px; color: var(--secondary); text-align: center; margin-bottom: 16px; }
.modal-footer { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.pw-err { font-size: 13px; color: var(--danger); text-align: center; margin-top: 8px; display: none; }

/* ── Toast ──────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: rgba(28,28,30,.92); color: #fff;
  padding: 11px 22px; border-radius: 20px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 300;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 500px) {
  .flbl { width: 82px; min-width: 82px; font-size: 13px; }
  .stats-row .stat-pill { flex: 1 1 40%; }
  .step-label { display: none; }
  .step-line { width: 20px; }
}

/* ── Kopfleiste (Bearbeiten / Admin) ─────────── */
.topbar {
  display: flex; justify-content: flex-end; gap: 8px; align-items: center;
  padding: 0.5rem 1.5rem; background: #f9f9f9; border-bottom: 1px solid #eee;
}
.topbar .btn { font-size: 0.8rem; }

/* ── Hinweis außerhalb des Meldezeitraums ────── */
.hinweis-box {
  margin: 2rem auto; max-width: 540px;
  background: #FFF6EE; border: 2px solid var(--orange);
  border-radius: 10px; padding: 2rem; text-align: center;
}
.hinweis-icon  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.hinweis-box h2 { color: var(--orange); margin: 0 0 0.5rem; font-size: 1.3rem; }
.hinweis-box p  { color: #555; margin: 0; line-height: 1.6; }

/* ── Banner im Bearbeiten-Modus ──────────────── */
.edit-banner {
  background: var(--primary-bg); border: 1.5px solid var(--primary-ring);
  border-radius: var(--ri); padding: 12px 16px; margin-bottom: 16px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.eb-main    { flex: 1 1 220px; min-width: 0; }
.eb-title   { font-size: 14px; font-weight: 650; color: var(--primary-tx); }
.eb-sub     { font-size: 12.5px; color: var(--secondary); margin-top: 2px; }
.eb-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 520px) {
  .eb-actions { width: 100%; }
  .eb-actions .btn { flex: 1; justify-content: center; }
}

/* ── Alles bleibt in der Anmeldebox ──────────────
   Die Box schneidet Überstehendes ab (.sheet: overflow hidden). Auf
   schmalen Handys ragten sonst mehrere Elemente über den rechten Rand
   und waren nur halb zu sehen. */

/* Auswahlfelder und Knopfgruppen dürfen schmaler werden als ihr
   längster Eintrag — ein <select> ist sonst so breit wie
   „— kein weiterer Wettbewerb —". */
.fselect, .wk-opts, .wk-warn, .wk-pill { min-width: 0; }
.fselect { max-width: 100%; text-overflow: ellipsis; }
.wk-opt-btn { max-width: 100%; }

/* Geschlecht: die drei Felder teilen sich die verfügbare Breite. */
.seg { flex: 1; min-width: 0; }

/* Fußzeile mit bis zu drei Knöpfen: bricht um, statt abgeschnitten zu werden. */
.sheet-footer { flex-wrap: wrap; }

/* „In älterer Gruppe starten" rückt auf dem Handy nicht mehr um die
   volle Beschriftungsbreite ein und darf umbrechen. */
.wk-elder-row { flex-wrap: wrap; }

@media (max-width: 500px) {
  .frow { padding: 0 12px; gap: 8px; }
  .seg-lbl { padding: 5px 6px; font-size: 12.5px; }
  .wk-elder-row { padding: 0 12px 12px calc(82px + 12px + 8px); }
  .wk-elder-lbl { white-space: normal; }
  .wk-elder-sel { flex: 1 1 100%; }
  .wk-opt-btn { padding: 7px 10px; }
  .wk-opt-btn.sel { padding: 6.5px 9px; }
  .sheet-footer { padding: 12px 12px 16px; gap: 8px; }
  .sheet-footer .btn { padding: 9px 16px; }
  .ta-hint { padding: 0 12px 10px; }
}