/* ============================================================
   Unterstützen-Wizard — /projekte/<slug>/unterstuetzen
   Zentrierte Karte auf section--warm; alles Weitere kommt
   aus dem PAGE-KIT (stepper, radio-cards, note, form-success).
   ============================================================ */

.support-wrap { max-width: 720px; margin: 0 auto; }

.support-card {
  background: #fff;
  border: 1px solid var(--line-onW);
  border-radius: var(--r-4);
  padding: clamp(28px, 4.5vw, 48px);
}
.support-card .stepper { margin-bottom: clamp(28px, 4vw, 40px); }
.support-card .eyebrow { margin-bottom: 20px; }

/* Frage-Gruppen innerhalb eines Schritts */
.support-legend {
  font-size: 14px; font-weight: 500; color: var(--ink);
  margin: 0 0 12px;
}
.support-group { margin-top: 28px; }
.support-reveal { margin-top: 16px; }

/* IBAN als Mono-Akzent in der Überweisungs-Note */
.support-iban {
  display: inline-block;
  margin: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}

/* Abschluss: „Was als Nächstes passiert" */
.support-next {
  list-style: none;
  max-width: 480px;
  margin: 28px auto 0; padding: 0;
  text-align: left;
}
.support-next li {
  padding: 12px 0;
  border-top: 1px solid var(--line-onW);
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.support-next li strong { color: var(--ink); font-weight: 500; }

.support-success-actions {
  display: flex; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}

/* Ruhige Fußzeile unter der Karte */
.support-foot-note {
  margin: 24px 0 0;
  text-align: center;
  font-size: 14px; color: var(--muted);
}
.support-foot-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   P2-Umbau — Kanal-Tabs über der Karte, EPC-QR, Anliegen-Liste
   ============================================================ */

/* Kanal-Umschalter (generische Tabs) zentriert über der Karte */
.support-tabs {
  display: flex; justify-content: center;
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* Fürbitte — Anliegen-Checkliste (vom Ministry gepflegt) */
.support-checks { display: grid; gap: 14px; margin-top: 4px; }

/* Spende — Bankdaten + Live-QR nebeneinander (ab ~700px), sonst gestapelt */
.support-pay { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .support-pay { grid-template-columns: 1fr auto; align-items: start; }
}
.support-bank { display: grid; gap: 8px; margin-top: 10px; }
.support-bank__row {
  display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px;
  align-items: baseline;
}
.support-bank__k {
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.support-bank__v { font-size: 14px; line-height: 1.45; color: var(--ink); }
.support-bank__v--mono {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.03em;
  word-break: break-word;
}

/* Live-QR — weiße Karte, QR max ~200px */
.support-qr {
  background: #fff;
  border: 1px solid var(--line-onW);
  border-radius: var(--r-4);
  padding: 16px;
  text-align: center;
}
.support-qr [data-epc-canvas] { display: block; margin: 0 auto; max-width: 200px; }
.support-qr [data-epc-canvas] img,
.support-qr [data-epc-canvas] canvas,
.support-qr [data-epc-canvas] svg {
  display: block; width: 100%; height: auto; max-width: 200px;
}
.support-qr__caption { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* Dauerauftrag-Hinweis unter Bankdaten/QR */
.support-hint { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Spendenbestätigungs-Zeile im Danke-Schritt */
.support-fineprint { margin: 20px auto 0; max-width: 480px; font-size: 14px; color: var(--muted); }
.support-fineprint a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   P4c-Erweiterungen — Empfänger-Box (F6), Bank-Block (F3), Copy,
   QR fixe Breite (F2), Dauerauftrag (F4), Fürbitte (F1),
   Mitarbeit-Jobs (F5/F9), Material-Multiselect (F7)
   ============================================================ */

/* F6 — Empfänger-Box direkt unter dem Step-Indicator */
.empfaenger-box {
  border: 1px solid var(--line-onW);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-4);
  background: var(--blue-lt);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.empfaenger-box .eyebrow { margin-bottom: 6px; }
.empfaenger-box__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink);
}
.empfaenger-box__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.empfaenger-box__ministry { font-size: 14px; color: var(--blue); text-decoration: none; font-weight: 500; }
.empfaenger-box__ministry:hover { text-decoration: underline; }

/* F3 — Empfänger/IBAN/BIC/Zweck: je eigene Zeile mit Label + Wert + Copy */
.support-bank { display: grid; gap: 16px; margin-top: 14px; }
.bankrow { display: grid; gap: 5px; }
.bankrow__k { margin: 0; }
.bankrow__vwrap { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.bankrow__v { font-size: 15px; line-height: 1.45; color: var(--ink); word-break: break-word; }
.bankrow__v--mono { font-family: var(--font-mono); letter-spacing: 0.04em; font-size: 14px; }

.copy-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: var(--r-pill); padding: 5px 12px;
  font-size: 12px; font-weight: 500; font-family: var(--font-body, inherit);
  cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.copy-btn:hover { background: var(--bg-warm); color: var(--ink); border-color: var(--ink); }
.copy-btn.is-copied { background: #E5E8DA; color: var(--moss-dk); border-color: #E5E8DA; }
.copy-btn__ico { font-size: 14px; line-height: 1; }
/* O2 Mobile-Pass: „Kopieren“-Buttons (IBAN/BIC/Fürbitte) auf komfortable Tap-Höhe. */
@media (max-width: 1024px) {
  .copy-btn { min-height: 44px; padding: 8px 14px; }
}

/* F2 — QR fixe Breite: Container ändert sich NIE mit dem Betrag */
.support-qr { width: 220px; max-width: 100%; margin-inline: auto; box-sizing: border-box; }
.support-qr [data-epc-canvas] { max-width: 184px; }
.support-qr [data-epc-canvas] img,
.support-qr [data-epc-canvas] canvas,
.support-qr [data-epc-canvas] svg { max-width: 184px; }

/* F4 — Dauerauftrag-Hinweisbox */
.support-hint-box {
  margin-top: 16px;
  border: 1px dashed var(--blue-acct);
  border-radius: var(--r-4);
  background: var(--blue-lt);
  padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.support-hint-box__zweck { font-family: var(--font-mono); font-size: 13px; color: var(--blue); }

/* F1 — Fürbitte: kopierbare Anliegen-Karte */
.gebets-card {
  position: relative;
  border: 1px solid var(--line-onW);
  border-radius: var(--r-4);
  background: var(--bg-warm);
  padding: 22px 24px;
  margin-top: 6px;
}
.gebets-card__copy { position: absolute; top: 16px; right: 16px; }
.gebets-list { list-style: none; margin: 0; padding: 0; padding-right: 96px; display: grid; gap: 14px; }
.gebets-list li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}
.gebets-list li::before { content: "•"; position: absolute; left: 4px; color: var(--blue); font-weight: 700; }
@media (max-width: 520px) {
  .gebets-card__copy { position: static; margin-bottom: 14px; }
  .gebets-list { padding-right: 0; }
}

/* F5/F9 — Mitarbeit: Job-Liste (Volontariat / Festanstellung) */
.job-group { margin-top: 18px; }
.job-group__head { margin-bottom: 10px; }
.job-list { display: grid; gap: 10px; }
.job-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line-onW); border-radius: var(--r-4); background: #fff;
  padding: 14px 16px; text-decoration: none; transition: all 0.15s ease;
}
.job-row:hover { border-color: var(--ink); background: var(--bg-warm); }
.job-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.job-row__title { font-weight: 600; color: var(--ink); font-size: 16px; }
.job-row__meta { font-size: 13px; color: var(--muted); }
.job-row__arrow { color: var(--blue); font-size: 18px; flex: 0 0 auto; }

/* Übergabe-Optionen einspaltig (lange Beschreibungen) */
.radio-cards--stack { grid-template-columns: 1fr; }

/* F7 — Material-Multiselect (Dropdown + Suche + Pills) */
.mat-select { position: relative; }
.mat-select__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-4); background: #fff;
  padding: 12px 14px; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left;
}
.mat-select__toggle:hover, .mat-select.is-open .mat-select__toggle { border-color: var(--ink); }
.mat-select__placeholder { color: var(--muted); }
.mat-select__chev { color: var(--muted); transition: transform 0.15s ease; }
.mat-select.is-open .mat-select__chev { transform: rotate(180deg); }
.mat-select__menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12); padding: 10px;
}
.mat-select__search { margin-bottom: 8px; }
.mat-select__options { max-height: 264px; overflow: auto; display: grid; gap: 2px; }
.mat-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-4);
  cursor: pointer; font-size: 15px; color: var(--ink);
}
.mat-option:hover { background: var(--bg-warm); }
.mat-option input { flex: 0 0 auto; }
.mat-option__label { flex: 1 1 auto; }
.mat-option__menge { font-size: 12px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.mat-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.mat-option.is-disabled .mat-option__menge { color: var(--moss-dk); }

.mat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--blue-lt); color: var(--blue);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.mat-pill:hover { border-color: var(--blue); }
.mat-pill__x { font-size: 15px; line-height: 1; }
.mat-hint { margin-top: 12px; font-size: 13px; color: var(--muted); }

.mat-error {
  margin-top: 16px; color: #b3261e;
  border-color: #e6c4c0; background: #fbeeec;
}
.mat-summary { margin: 22px auto 0; max-width: 480px; text-align: left; }
.mat-summary__k {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 14px 0 6px;
}
.mat-summary__items { margin: 0; padding-left: 20px; color: var(--ink-soft); }