/* Digitaler Mitgliedsantrag im Browser – ergänzt simple.css / style.css */

#antrag {
  --antrag-farbe: #007AFF;
  --fehler: #c62828;
}

#antrag [hidden] {
  display: none !important;
}

#antrag fieldset {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--antrag-farbe);
  border-radius: var(--standard-border-radius);
  background: var(--bg);
}

#antrag legend {
  padding: 0 0.4rem;
  font-weight: bold;
  font-size: 1.15rem;
}

#antrag h4 {
  margin: 1rem 0 0.5rem;
}

.so-gehts {
  float: none;
  width: auto;
  margin: 1rem 0;
  padding: 1rem;
  border: 2px dashed var(--text-light);
  border-radius: 1rem;
  background: var(--bg);
  font-size: 1rem;
}

.so-gehts ol {
  margin: 0.5rem 0 0;
}

.so-gehts li {
  margin-bottom: 0.4rem;
}

.antrag-text {
  white-space: pre-wrap;
}

/* Felder */

.feld {
  display: flex;
  flex-direction: column;
  margin: 0.4rem 0;
  min-width: 0;
}

.feld > label,
.feld-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-light);
}

.feld input:not([type="checkbox"]):not([type="radio"]),
.feld select,
.feld textarea {
  width: 100%;
  margin: 0.2rem 0 0;
}

.feld-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.feld-zeile > .feld {
  flex: 1 1 12rem;
}

.feld-zeile > .feld-schmal {
  flex: 0 1 10rem;
}

.abteilung .feld-label {
  display: inline;
}

.pflicht {
  color: var(--fehler);
}

.feld-fehler {
  min-height: 0;
  font-size: 0.85rem;
  color: var(--fehler);
}

.feld-fehler:empty {
  display: none;
}

#antrag [aria-invalid="true"] {
  border-color: var(--fehler);
  outline-color: var(--fehler);
}

.feld-checkbox > label {
  color: var(--text);
  font-size: 1rem;
}

.feld-checkbox input[type="checkbox"] {
  margin-right: 0.3rem;
  vertical-align: middle;
}

.feld-hinweis {
  font-size: 0.85rem;
  color: var(--text-light);
}

.feld-lesen .feld-wert {
  display: block;
  padding: 0.2rem 0;
}

.feld-link a {
  overflow-wrap: anywhere;
}

.feld-zahlart label {
  display: inline-block;
  margin-right: 1.5rem;
  color: var(--text);
  font-size: 1rem;
}

.sepa-text {
  font-size: 0.85rem;
  color: var(--text-light);
}

.zahlart-bereich {
  margin-top: 0.5rem;
}

.familienliste .feld {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.familienliste .feld button {
  align-self: flex-start;
}

.abteilung + .abteilung {
  border-top: 1px solid var(--border);
}

/* Buttons */

#antrag .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#antrag button,
#antrag .button {
  margin: 0.25rem 0;
}

#antrag .button-sekundaer {
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
}

#antrag .button-sekundaer:enabled:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

#antrag a.button,
#antrag a.button:visited {
  color: var(--accent-text);
  text-decoration: none;
}

/* Abschluss / Ergebnis */

.fehler-zusammenfassung {
  font-size: 0.9rem;
  color: var(--fehler);
}

.fehler-zusammenfassung a,
.fehler-zusammenfassung a:visited {
  color: var(--fehler);
}

.fehler-zusammenfassung ul {
  margin-top: 0;
}

.antrag-fehler {
  color: var(--fehler);
}

iframe.vorschau {
  width: 100%;
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--standard-border-radius);
  background: #fff;
}

.ergebnis dt {
  margin-top: 0.5rem;
}

.ergebnis dd {
  overflow-wrap: anywhere;
}

.ergebnis-schritte li {
  margin-bottom: 1rem;
}

.teilen {
  margin: 1rem 0;
}

.hinweis {
  font-size: 0.9rem;
  color: var(--text-light);
}

@media (max-width: 480px) {
  #antrag fieldset {
    padding: 0.5rem 0.6rem 0.8rem;
  }

  #antrag .buttons > * {
    flex: 1 1 100%;
  }
}