/* St. Birgid Formulare – Akzentfarbe kommt aus seite.css (--akzent). */

.pf {
  --pf-akzent: var(--akzent, #b8161c);
  --pf-text-leise: #5b6670;
  --pf-rand: #c5ccd3;
  --pf-flaeche: #f3f6f8;
  --pf-fehler: #b3261e;
  max-width: 46rem;
}

.pf [hidden] { display: none !important; }

/* Ohne JavaScript: Assistenten-Steuerung ausblenden, Formular als lange Seite */
.pf .pf-start,
.pf .pf-fortschritt,
.pf .pf-weiter,
.pf .pf-zurueck,
.pf .pf-js-only { display: none; }
.pf--js .pf-start,
.pf--js .pf-weiter,
.pf--js .pf-zurueck { display: inline-block; }
.pf--js .pf-fortschritt { display: flex; }
.pf--js .pf-js-only { display: block; }

/* Einstieg */
.pf-intro { margin-bottom: 1.5em; }
.pf-intro ul { margin-bottom: 1.2em; }

/* Fortschritt */
.pf-fortschritt {
  list-style: none;
  margin: 0 0 1.75em;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.25em 0.5em;
}
.pf-fortschritt li { display: flex; align-items: center; gap: 0.5em; margin: 0; }
.pf-fortschritt li:not(:last-child)::after {
  content: "";
  width: 1.5em;
  height: 2px;
  background: var(--pf-rand);
}
.pf-fortschritt button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--pf-text-leise);
  cursor: pointer;
}
.pf-fortschritt button:disabled { cursor: default; opacity: 0.6; }
.pf-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 600;
}
.pf-fortschritt [aria-current="step"] button { color: var(--pf-akzent); font-weight: 600; opacity: 1; }
.pf-fortschritt [aria-current="step"] .pf-nr { background: var(--pf-akzent); border-color: var(--pf-akzent); color: #fff; }

@media (max-width: 600px) {
  .pf-fortschritt li:not([aria-current]) .pf-titel { display: none; }
}

/* Schritte und Gruppen */
.pf-schritt > h2 { margin-top: 0; }
.pf-schritt > h2:focus { outline: none; }
.pf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pf fieldset.pf-feld { margin: 0 0 1.4em; }
.pf-gruppe { margin-top: 1.75em; }
.pf-gruppe > legend {
  width: 100%;
  padding: 0 0 0.3em;
  margin-bottom: 0.6em;
  border-bottom: 2px solid var(--pf-akzent);
  color: var(--pf-akzent);
  font-size: 1.1em;
  font-weight: 600;
}
.pf-hinweis { margin: 0 0 1em; color: var(--pf-text-leise); }

/* Felder */
.pf-feld { margin: 0 0 1.15em; }
.pf-feld > label,
.pf-feld > legend { display: block; margin-bottom: 0.25em; padding: 0; font-weight: 600; }
.pf-stern { color: var(--pf-fehler); }
.pf-hilfe { display: block; margin: 0 0 0.35em; font-size: 0.875em; color: var(--pf-text-leise); }

.pf input[type="text"],
.pf input[type="email"],
.pf input[type="tel"],
.pf input[type="date"],
.pf input[type="time"],
.pf select,
.pf textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 32em;
  padding: 0.55em 0.7em;
  border: 1px solid var(--pf-rand);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  color: inherit;
}
.pf-feld--kurz input,
.pf-feld--kurz select { max-width: 13em; }
.pf textarea { resize: vertical; }

.pf input:focus-visible,
.pf select:focus-visible,
.pf textarea:focus-visible,
.pf button:focus-visible {
  outline: 2px solid var(--pf-akzent);
  outline-offset: 2px;
}

.pf-optionen { display: flex; flex-wrap: wrap; margin-top: 0.2em; }
.pf-optionen label { margin: 0.2em 2.25em 0.2em 0; }
.pf-optionen label,
.pf-feld--checkbox label { display: inline-flex; align-items: center; font-weight: normal; cursor: pointer; }
.pf-optionen input,
.pf-feld--checkbox input { margin-right: 0.6em !important; }
.pf input[type="radio"],
.pf input[type="checkbox"] { accent-color: var(--pf-akzent); margin: 0; flex-shrink: 0; width: 1.1em; height: 1.1em; }

/* Fehler */
.pf-feld--fehler input,
.pf-feld--fehler select,
.pf-feld--fehler textarea { border-color: var(--pf-fehler); }
.pf-fehlertext { margin: 0.3em 0 0; font-size: 0.875em; color: var(--pf-fehler); }
.pf-fehlerliste {
  margin: 0 0 1.5em;
  padding: 0.8em 1em;
  border-left: 4px solid var(--pf-fehler);
  background: #fdf1f0;
}
.pf-fehlerliste p { margin: 0.2em 0; }

/* Buttons */
.pf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 2em;
  padding-top: 1.25em;
  border-top: 1px solid var(--pf-rand);
}
.pf-nav .pf-weiter,
.pf-nav .pf-senden { margin-left: auto; }
.pf-btn {
  padding: 0.6em 1.25em;
  border: 1px solid var(--pf-akzent);
  border-radius: 3px;
  background: #fff;
  color: var(--pf-akzent);
  font: inherit;
  cursor: pointer;
}
.pf-btn--primaer { background: var(--pf-akzent); color: #fff; }
.pf-btn:hover { filter: brightness(0.9); }
.pf-btn:disabled { opacity: 0.6; cursor: progress; }
.pf-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pf-akzent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Zusammenfassung */
.pf-zusammenfassung { margin: 1em 0 1.75em; }
.pf-zf-schritt { margin-bottom: 1.5em; }
.pf-zf-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--pf-rand);
}
.pf-zf-kopf h3 { margin: 0 0 0.3em; font-size: 1.05em; }
.pf-zusammenfassung dl {
  display: grid;
  grid-template-columns: minmax(9em, 40%) 1fr;
  gap: 0.3em 1em;
  margin: 0;
}
.pf-zusammenfassung dt { color: var(--pf-text-leise); font-weight: normal; }
.pf-zusammenfassung dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pf-leer { color: var(--pf-text-leise); font-style: italic; }
@media (max-width: 600px) {
  .pf-zusammenfassung dl { grid-template-columns: 1fr; }
  .pf-zusammenfassung dd { margin-bottom: 0.5em; }
}

/* Datenschutz, Honeypot, Erfolg */
.pf-feld--checkbox { padding: 0.9em 1em; background: var(--pf-flaeche); border-radius: 3px; }
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pf--erfolg {
  padding: 1.1em 1.3em;
  border-left: 4px solid var(--pf-akzent);
  background: var(--pf-flaeche);
}
.pf--erfolg:focus { outline: none; }
.pf--erfolg > :first-child { margin-top: 0; }
.pf--erfolg > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .pf-schritt:not([hidden]) { animation: pf-ein 0.18s ease-out; }
  @keyframes pf-ein { from { opacity: 0; } to { opacity: 1; } }
}

.pf-vorschau .pf-link { margin-right: 1.75em; }