/* =========================================================================
   Page flourishes - Mitglied werden / Join   (loaded after styles.css)
   Layout signature: step-by-step. Ledger banner + numbered features +
   "who" clip grid + bring checklist + youth-free callout.
   Only page-specific touches here; shared components live in styles.css.
   ========================================================================= */

/* --- Banner: lead column + ledger rail ---------------------------------- */
.join-banner { background: var(--paper); }
.join-banner__grid {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) { .join-banner__grid { grid-template-columns: 1fr; } }

.join-banner__lead h1 { font-size: var(--fs-h1); margin-top: .6rem; }

/* The "way in" ledger - a bordered index-style rail */
.join-ledger {
  border: 2px solid var(--ink);
  background: var(--card);
  align-self: stretch;
}
.join-ledger__head {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .6rem 1rem;
}
.join-ledger__list {
  list-style: none; margin: 0; padding: .6rem 1.1rem 1rem;
  display: grid; gap: .2rem;
  counter-reset: none;
}
.join-ledger__list li {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink);
  padding: .7rem 0; border-bottom: 1px dotted var(--rule-strong);
}
.join-ledger__list li:last-child { border-bottom: 0; }
.join-ledger__no {
  font-family: var(--mono); font-weight: 700; font-size: .82rem;
  color: var(--accent); letter-spacing: .04em; min-width: 1.8rem;
}

/* --- Steps: tune shared .features for a numbered process spine ---------- */
.join-steps { gap: clamp(1.4rem, 3vw, 2.1rem); max-width: 52rem; }
.join-steps > li { padding-left: .2rem; }
.join-steps .no {
  font-size: 2.6rem;
  border-bottom: 3px solid var(--accent);
  padding-bottom: .05rem;
}

/* --- "Für wen" clip cards: mono tag above the heading ------------------- */
.join-who__tag {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* --- "Für wen" intro photo -------------------------------------------- */
.join-who__media { margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.join-who__media figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--muted); }

/* --- "Was du mitbringst" split ----------------------------------------- */
.join-bring { align-items: center; }
.join-bring__media { position: sticky; top: 7rem; }
@media (max-width: 52rem) {
  .join-bring__media { position: static; order: 2; margin-top: 1.4rem; }
}

/* --- Community band (green): keep copy + markers readable on dark ------ */
.section--green p,
.section--green .checklist li { color: #e6f1e9; }
.section--green .checklist li::before { color: #bfe0c9; }

/* --- Youth-free note: info callout (not todo) -------------------------- */
.join-note {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  border-left: 4px solid var(--accent);
}
.join-note__mark {
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  line-height: 1; color: var(--paper); background: var(--accent);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
}
.join-note p { color: var(--body); }