/* Vereinskontor – Ergänzungen für Mitglieder, Beiträge, Aufnahme, Mitgliedsausweis.
   Wird automatisch zusätzlich zu app.css eingebunden. */

/* Dokumente am Mitglied: Upload-Zeile */
.mem-doc-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.mem-doc-upload .field { flex: 1 1 220px; }
.mem-doc-upload .hint { flex-basis: 100%; }

/* Export-Spaltenauswahl */
.exp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; max-height: 46vh; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.exp-cols label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
@media (max-width: 560px) { .exp-cols { grid-template-columns: 1fr; } }

/* details/summary als Button-Leiste */
details > summary { list-style: none; cursor: pointer; display: inline-flex; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Mitgliedsausweis (Kreditkartenformat 85,6 × 54 mm) */
.mcards { display: flex; flex-wrap: wrap; gap: 22px; }
.mcard-wrap { display: flex; flex-direction: column; gap: 10px; width: min(428px, 100%); }
.mcard {
  --c: var(--brand);
  position: relative; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 16px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 62%, #000) 100%);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
  container-type: inline-size; font-size: 3.4cqw;
}
.mcard::after { content: ""; position: absolute; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.mcard-in { position: absolute; inset: 0; padding: 5.2cqw 5.6cqw; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; gap: 2.2cqw 4cqw; }
.mcard-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.6cqw; min-width: 0; }
.mcard-logo { width: 9cqw; height: 9cqw; border-radius: 2cqw; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; color: var(--c); font-weight: 800; font-size: 3.4cqw; }
.mcard-logo img { width: 100%; height: 100%; object-fit: contain; }
.mcard-club { font-weight: 700; font-size: 3.9cqw; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcard-kind { font-size: 2.6cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.mcard-photo { width: 19cqw; aspect-ratio: 3 / 4; border-radius: 2cqw; background: rgba(255, 255, 255, .18); overflow: hidden; display: grid; place-items: center; font-size: 7cqw; font-weight: 700; align-self: start; border: .5cqw solid rgba(255, 255, 255, .55); }
.mcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.mcard-data { min-width: 0; display: flex; flex-direction: column; gap: 1cqw; align-self: start; }
.mcard-name { font-size: 5.2cqw; font-weight: 750; line-height: 1.1; overflow-wrap: anywhere; }
.mcard-row { display: flex; gap: 3cqw; flex-wrap: wrap; }
.mcard-row div { display: flex; flex-direction: column; }
.mcard-row small { font-size: 2.3cqw; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.mcard-row b { font-size: 3.3cqw; font-weight: 650; }
.mcard-qr { width: 25cqw; background: #fff; border-radius: 2cqw; padding: 1.1cqw; align-self: start; }
.mcard-qr svg, .mcard-qr img { display: block; width: 100%; height: auto; }
.mcard-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; font-size: 2.6cqw; opacity: .9; }
.mcard-status { display: inline-block; padding: .5cqw 2cqw; border-radius: 99px; background: rgba(255, 255, 255, .2); font-weight: 700; font-size: 2.6cqw; letter-spacing: .04em; }
.mcard.invalid { filter: grayscale(.85); }
.mcard.invalid .mcard-status { background: #d64545; }

/* Öffentliche Prüfseite verify.php */
.verify { text-align: center; }
.verify-ico { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 12px; color: #fff; }
.verify-ico svg { width: 44px; height: 44px; stroke-width: 2.4; }
.verify.ok .verify-ico { background: var(--ok); }
.verify.bad .verify-ico { background: var(--danger); }
.verify h1 { font-size: 1.6rem; margin: 0 0 4px; }
.verify.ok h1 { color: var(--ok); }
.verify.bad h1 { color: var(--danger); }
.verify-person { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 18px 0 8px; text-align: left; }
.verify-photo { width: 84px; height: 108px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); flex: none; }
.verify-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Aufnahmeformulare: Feld-Konfiguration */
.jf-table td { vertical-align: middle; }
.jf-table select { min-height: 32px; padding: 4px 8px; }
.jf-custom .row-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.jf-custom .row-item textarea { min-height: 38px; grid-column: 1 / -1; }
@media (max-width: 760px) { .jf-custom .row-item { grid-template-columns: 1fr 1fr; } }
.jf-qr { background: #fff; border-radius: 10px; padding: 8px; display: inline-block; border: 1px solid var(--line); }
.jf-qr svg { display: block; width: 180px; height: 180px; }
.jf-code { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* Eingebettetes Formular (iframe): ohne Hintergrund, kompakter */
body.embed { background: transparent !important; }
body.embed .main { min-height: 0; padding: 0; }
body.embed .content { max-width: none; padding: 4px; }
body.embed .auth-card { box-shadow: none; border: 0; padding: 4px; background: transparent; }
body.embed .tabbar { display: none; }

@media print {
  .mcards { gap: 6mm; }
  .mcard { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Gruppenansicht: Funktion direkt bearbeiten */
.grp-role { width: 140px; min-width: 110px; min-height: 30px; padding: 4px 8px; }