/* Kontakt-, Karriere- und Stromsteuer-Formular. */

.contact-desk {
  padding: clamp(2.25rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--surface-2);
}
#anfrage,
#contact-form,
#anspruch,
#stromsteuer-form {
  scroll-margin-top: 5.5rem;
}
.contact-desk .contact-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  margin-top: var(--s5);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ————————————————————————————————————————————— Formulare
   Punkt 3 und 7: Zustände sichtbar, Beschriftung über dem Feld. */

.form { display: grid; gap: var(--s4); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shade); }
.form label { display: grid; gap: var(--s2); font-size: var(--t-sm); font-weight: var(--w-semi); }
.form input, .form textarea, .form select {
  width: 100%; padding: 0.9rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.form input::placeholder, .form textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--danger); }
.form .field-error { display: block; margin-top: var(--s1); font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--on-danger); }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 520px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form__consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: var(--t-sm); font-weight: var(--w-book); }
.form__consent input { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; margin-top: 0; accent-color: var(--accent); }
.form__consent a { color: var(--accent); text-decoration: underline; }
.form__notice {
  margin: 0;
  padding: var(--s4);
  background: var(--danger-soft);
  color: var(--on-danger);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.form__notice a { color: inherit; font-weight: var(--w-semi); }
.form-done {
  display: none;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--ok-soft);
  color: var(--ink);
  border-radius: var(--r);
}
.form-done:not([hidden]) { display: grid; }
.form-done__kicker {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--ok);
}
.form-done h2 { margin: 0; font-size: var(--t-xl); }
.form-done p { margin: 0; color: var(--ink-2); }
.form-done a { color: var(--accent); font-weight: var(--w-semi); }
.form.is-sent > :not(.form-done) { display: none; }
.form__fieldset { margin: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); display: grid; gap: var(--s4); }
.form [hidden] { display: none !important; }
.form__fieldset legend { padding: 0 var(--s2); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--accent); }
.form__status { display: none; padding: var(--s4); border-radius: var(--r-sm); font-size: var(--t-sm); }
.form__status.is-error { display: block; background: var(--danger-soft); color: var(--on-danger); }
.form__status.is-success { display: block; background: var(--ok-soft); color: var(--ok); }
.form input[type="checkbox"] {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  accent-color: var(--accent);
}

.contact-card { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--deep); color: var(--on-deep); border-radius: var(--r); }
.contact-card h2 { color: var(--on-deep); font-size: var(--t-xl); margin-bottom: var(--s5); }
.contact-card dl { display: grid; gap: var(--s4); }
.contact-card dt { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--accent); margin-bottom: var(--s1); }
.contact-card dd { margin: 0; }
.contact-card a { color: var(--on-deep); font-weight: var(--w-semi); }
.contact-card a:hover { color: var(--accent); }
.contact-layout { display: grid; gap: var(--s7); }
.contact-main { display: grid; gap: var(--s5); min-width: 0; order: -1; }
.contact-main > h1 {
  margin: 0;
  max-width: 14ch;
  font-size: var(--t-3xl);
}
.contact-main > .lead {
  margin: 0;
  color: var(--ink-2);
  max-width: 42ch;
}
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
}

/* Eine Frage pro Schritt, für alle Formulare (Kontakt, Stromsteuer, Karriere,
   Fahrplan). Gleiche Regeln wie im Fahrplan (tools.css), hier für Seiten ohne tools.css. */
.fp-form .form-step__meta { margin: var(--s3) 0 0; }
.fp-form .form-steps__track { margin: 0; }
.fp-step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s4); }
/* legend liegt außerhalb des Grid-Gaps: Abstand direkt am legend. */
.fp-step .form-step__q { padding: 0; margin: 0 0 var(--s4); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
.fp-step__hint { margin: calc(var(--s3) * -1) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.fp-step .form-step__actions { margin-top: var(--s2); }
.fp-choice { display: grid; gap: var(--s3); }
@media (min-width: 520px) {
  .fp-choice { grid-template-columns: 1fr 1fr; }
}
.form .fp-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.85rem 1rem 0.85rem 3rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.fp-opt::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -0.575rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.form .fp-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
@media (hover: hover) {
  .form .fp-opt:hover { border-color: var(--accent); }
}
.form .fp-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fp-opt:has(input:checked)::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 45%, var(--surface) 50%);
}
.fp-opt:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.fp-field input { font-size: var(--t-md); }
.fp-field { display: grid; gap: var(--s2); font-weight: var(--w-semi); }
.fp-form .form__consent { margin-top: var(--s2); }
.fp-form .form__status:empty { display: none; }