/* ============================================================
   Lorbass v2 – Bandbewerbung (nur auf /bewerbung + /apply)
   ============================================================ */

.survey { max-width: 46rem; margin-inline: auto; padding: 0 1rem 3rem; }

.required-note { font-size: .85rem; color: var(--muted); margin: .75rem 0 1.25rem; }

/* Drei-Boxen-Layout */
.form-cards { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }

.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.5rem;
}

.form-card-title {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--accent);
  margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}

.form-card-hint { font-size: .85rem; color: var(--muted); margin: -.5rem 0 1rem; }

/* Grid-Layouts innerhalb der Karten */
.form-grid { display: grid; gap: 1rem; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 600px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.required-note b { color: var(--red); }

/* Aufklappbare Info-/Datenschutz-Blöcke (nativ, kein JS) */
.info-collapse {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); margin: 1rem 0; padding: 0 1rem;
}
.info-collapse > summary {
  cursor: pointer; padding: .9rem 0; color: var(--accent); font-size: .95rem;
  list-style: none;
}
.info-collapse > summary::-webkit-details-marker { display: none; }
.info-collapse > summary::before { content: "▸ "; }
.info-collapse[open] > summary::before { content: "▾ "; }
.info-collapse p { color: var(--text); opacity: .85; line-height: 1.7; font-size: .9rem; margin: .6rem 0; }
.info-collapse p:last-child { margin-bottom: 1rem; }
.info-collapse a { color: var(--accent); }

/* Felder */
.field { margin-bottom: 1.1rem; }
.field > label, .field-label {
  display: block; color: var(--text); font-size: .95rem; margin-bottom: .3rem;
}
.req { color: var(--red); }
.field-hint { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .4rem; line-height: 1.4; }

.survey input[type="text"],
.survey input[type="email"],
.survey input[type="tel"],
.survey input[type="url"],
.survey input[type="number"],
.survey select,
.survey textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .7rem .85rem; font-family: inherit; font-size: 1rem;
  transition: border-color .15s;
}
.survey input:focus, .survey select:focus, .survey textarea:focus {
  outline: none; border-color: var(--accent);
}
.survey textarea { min-height: 120px; resize: vertical; }
.survey .is-invalid { border-color: var(--red); }

/* Radio-Gruppe – K7-FIX: Radios sind versteckt, aber TASTATUR-FOKUSSIERBAR
   (kein display:none mehr). Tab/Pfeiltasten funktionieren, Fokus sichtbar. */
.radio-group { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio-group input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.radio-group label {
  cursor: pointer; padding: .55rem 1.5rem; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text);
  transition: all .15s;
}
.radio-group input[type="radio"]:checked + label {
  border-color: var(--accent); background: var(--accent); color: var(--bg);
}
.radio-group input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Fehlerbox */
.form-error-box {
  border: 1px solid var(--red); background: var(--red-dim);
  border-radius: var(--radius-md); padding: 1rem 1.25rem; margin: 1rem 0;
}
.form-error-box strong { color: #ffb3b3; }
.form-error-box ul { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.form-error-box li { color: var(--text); font-size: .9rem; }

/* Honeypot wirklich verstecken (aber im DOM lassen) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit-btn { width: 100%; margin-top: 1.5rem; }