/* ============================================================
   PAGE: MITGLIED
   ============================================================
   Inhaltsverzeichnis
   1) Page-Layout
   2) Header (Titel)
   3) Form-Card & Sections
   4) Inputs (einheitlich schön)
   5) Beitrag-Auswahl (Radio Cards)
   6) Checkboxes (Rechtliches)
   7) Info-Box (SEPA/Start)
   8) Responsive
   ============================================================ */

/* 1) Page-Layout */
.page-mitglied {
  background: var(--farbe-himmel);
  padding: var(--spacing-xl) 0;
}

/* 2) Header */
.page-mitglied .page-header {
  text-align: center;
  margin: 1rem auto 1.2rem;
}

.page-mitglied .page-title {
  margin: 0 0 0.35rem;
  font-weight: 800;
}

.page-mitglied .page-subtitle {
  margin: 0;
  opacity: 0.8;
}

/* 3) Form-Card */
.form-card.panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-sm);
  padding: 1.2rem 1.2rem;
}

.form-section {
  margin-top: 1.2rem;
}

.form-section:first-child {
  margin-top: 0;
}

.form-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
}

.form-intro {
  margin: 0 0 0.75rem;
  color: var(--text-grau);
  line-height: 1.6;
}

/* 4) Grid + Inputs */
.form-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field.full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-weight: 700;
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.field input {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  outline: none;
}

.field input:focus {
  border-color: rgba(60,172,194,.65); /* mint-kraeftig */
  box-shadow: 0 0 0 4px rgba(60,172,194,.18);
}

input[readonly] {
  background: #f2f2f2;
  cursor: not-allowed;
}

/* Inline number input im Beitragsfeld */
.inline-input {
  width: 110px;
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  font: inherit;
}
.inline-input:disabled {
  background: #f2f2f2;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 5) Beitrag-Auswahl (Radio Cards) */
.choice-list {
  display: grid;
  gap: 0.65rem;
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.03);
  cursor: pointer;
}

.choice input[type="radio"] {
  margin-top: 0.25rem;
}

.choice-body { display: block; }

.choice-title {
  display: block;
  font-weight: 800;
}

.choice-amount {
  display: block;
  font-weight: 700;
  margin: 0.1rem 0 0.15rem;
  color: #274957;
}

.choice-desc {
  display: block;
  color: var(--text-grau);
  line-height: 1.45;
}

.choice:hover {
  border-color: rgba(60,172,194,.35);
}

.choice:has(input[type="radio"]:checked) {
  border-color: rgba(60,172,194,.85);
  box-shadow: 0 0 0 4px rgba(60,172,194,.12);
}

/* 6) Checkboxes – Rechtliches */
.check-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.check input[type="checkbox"] {
  margin-top: 0.25rem;
}

.hint {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  color: var(--text-grau);
}

/* 7) Info-Box */
.info-box {
  margin-top: 0.85rem;
  background: #f1faff;
  border: 1px solid #d6ecf8;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* 8) Actions */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.3rem;
}

/* 9) Responsive */
@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.full { grid-column: auto; }

  .inline-input {
    width: 100%;
  }
}
/* Button mittig */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Button-Text */
.button-pdf {
  position: relative;         /* wichtig für ::before */
  display: inline-block;
  padding: 0.55rem 1.8rem;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2b32;
  cursor: pointer;
  z-index: 0;                 /* stacking context */
}