/* ============================================================
   Page-scoped styles for the Mitmachen (join / donate) page.
   Composes the shared pages.css vocabulary; only the membership +
   bank cards and the signup layout are bespoke here.
   Namespaced .bu-mitmachen__* to avoid collisions.
   ============================================================ */

/* ---- Membership + bank two-card band ---- */
.bu-mitmachen__join {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 30px;
	align-items: stretch;
}

.bu-joincard {
	background: var(--bu-panel);
	border: 1px solid var(--bu-border);
	border-radius: var(--bu-radius);
	padding: 40px 40px 42px;
	display: flex;
	flex-direction: column;
}
.bu-joincard__eyebrow { margin-bottom: 16px; }
.bu-joincard h3 {
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.1;
	margin-bottom: 14px;
}
.bu-joincard > p {
	font-size: 16.5px;
	line-height: 1.66;
	color: var(--bu-ink-3);
	margin-bottom: 24px;
}

/* Membership tiers */
.bu-tiers { display: grid; gap: 14px; margin-bottom: 26px; }
.bu-tier {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--bu-border);
	border-radius: var(--bu-radius-sm);
	background: var(--bu-cream);
}
.bu-tier__amount {
	font-family: var(--bu-serif);
	font-weight: 700;
	font-size: 26px;
	color: var(--bu-gold-ink);
	white-space: nowrap;
}
.bu-tier__amount small { font-size: 14px; font-weight: 600; color: var(--bu-muted); }
.bu-tier__label { font-size: 16px; font-weight: 600; color: var(--bu-navy); }
.bu-tier__note { font-size: 14.5px; color: var(--bu-ink-3); margin-top: 2px; }
.bu-joincard .bu-btn { align-self: flex-start; margin-top: auto; }

/* Bank card (navy) */
.bu-joincard--bank {
	background: var(--bu-navy);
	border-color: var(--bu-navy);
	color: #C7D3DC;
}
.bu-joincard--bank h3 { color: #F7F1E5; }
.bu-joincard--bank > p { color: #AFC0CC; }
.bu-bank {
	display: grid;
	gap: 2px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--bu-radius-sm);
	padding: 26px 28px;
	margin-top: auto;
}
.bu-bank__row { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bu-bank__row:last-child { border-bottom: 0; }
.bu-bank__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bu-gold-hi); flex: 0 0 auto; }
.bu-bank__v { font-size: 16px; color: #E7EDF1; text-align: right; font-variant-numeric: tabular-nums; }
.bu-bank__name { font-family: var(--bu-serif); font-weight: 700; font-size: 20px; color: #FFFDF8; margin-bottom: 12px; }

/* ---- Signup: form beside supporting aside ---- */
.bu-mitmachen__signup {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: start;
}
.bu-mitmachen__aside p { font-size: 17px; line-height: 1.7; color: var(--bu-ink-2); }
.bu-mitmachen__aside p + p { margin-top: 16px; }

@media (max-width: 980px) {
	.bu-mitmachen__join,
	.bu-mitmachen__signup { grid-template-columns: 1fr; gap: 30px; }
	.bu-mitmachen__signup { gap: 40px; }
}