/* Formular-Bauteil (Projekt Formulare, 22.10.2026). Farben und Schrift kommen von der Website; anpassbar
   über die Variablen. Die Köder-Hülle .formular__koeder NIE sichtbar machen. */
.formular { --f-rand: #c9ced6; --f-akzent: #0a7cc4; --f-fehler: #b3261e; --f-hinweis: #5b6470;
  display: grid; gap: 1.1rem; max-width: 42rem; margin: 2.5rem auto 3rem; text-align: left; }
/* Mehr Luft zum farbigen Abschnitt oben und unten (Tim, 23.10.2026) */
.formular__vorspann { max-width: 42rem; margin: 2.5rem auto 0; }
.formular__vorspann + .formular { margin-top: 1.2rem; }
.formular__feld { display: grid; gap: .35rem; }
.formular label, .formular legend { font-weight: 600; }
.formular__hilfe { margin: 0; font-size: .9em; color: var(--f-hinweis); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="url"],
.formular select, .formular textarea {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem; font: inherit; color: inherit;
  border: 1px solid var(--f-rand); border-radius: 6px; background: #fff; }
.formular textarea { min-height: 8rem; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--f-akzent); outline-offset: 1px; }
.formular fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .4rem; }
.formular fieldset label { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; }
.formular .pflicht::after { content: " *"; color: var(--f-fehler); }
.formular__hinweis { margin: .2rem 0 0; font-size: .9em; color: var(--f-hinweis); }
.formular__hinweis--wichtig { color: var(--f-fehler); font-weight: 700; font-size: 1.15em; line-height: 1.4;
  padding: .6rem .8rem; border-left: 4px solid var(--f-fehler); background: #fdecea; border-radius: 4px; }
.formular input:user-invalid, .formular select:user-invalid, .formular textarea:user-invalid { border-color: var(--f-fehler); }
.formular__datenschutz { font-size: .85em; color: var(--f-hinweis); }
.formular__knopf { justify-self: start; padding: .8rem 1.6rem; font: inherit; font-weight: 700; color: #fff;
  background: var(--f-akzent); border: 0; border-radius: 6px; cursor: pointer; }
.formular__vertrag { max-height: 28rem; overflow: auto; padding: 1rem; border: 1px solid var(--f-rand); border-radius: 6px; background: #fafbfc; }

/* Danke-Seite. #nicht-angekommen setzt WF601 bei menschlichen Abweisungsgründen; :target zeigt den Hinweis
   auch ohne JavaScript und blendet den Dank aus. */
.danke__fehler { display: none; }
.danke__ok, .danke__fehler:target { max-width: 42rem; margin: 0 auto; padding-top: 2.5rem; }
.danke__fehler:target { display: block; }
.danke__fehler:target ~ .danke__ok, .danke__fehler:target ~ .danke__kopie, .danke__fehler:target ~ .danke__knoepfe { display: none !important; }
.danke__kopie { max-width: 42rem; margin: 1.5rem auto; padding: 1rem 1.2rem; border: 1px solid #c9ced6; border-radius: 6px; text-align: left; }
.danke__liste { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: .4rem 1rem; margin: 0; }
.danke__liste dt { font-weight: 600; }
.danke__liste dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.danke__aufzaehlung { margin: 0; padding-left: 1.2em; white-space: normal; }
.danke__aufzaehlung li { margin: 0 0 .2em; }
.danke__vertrag { margin-top: 1.5rem; }
.danke__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1rem auto 3rem; }
.danke__knoepfe button { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; font: inherit; font-weight: 700;
  color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
.danke__knoepfe svg { width: 1.3em; height: 1.3em; flex: none; }
.danke__drucken { background: #3c4450; }
.danke__pdf { background: #c62828; }
@media (max-width: 34rem) { .danke__liste { grid-template-columns: 1fr; } .danke__liste dd { margin-bottom: .5rem; } }
@media print {
  body * { visibility: hidden; }
  .danke__kopie, .danke__kopie * { visibility: visible; }
  .danke__kopie { position: absolute; left: 0; top: 0; width: 100%; border: 0; margin: 0; }
  .danke__knoepfe { display: none !important; }
}