/* ============================================================
   Anfrageformular
   ------------------------------------------------------------
   Liegt innerhalb von #site-root und nutzt dessen Farbtokens
   (--bg, --fg, --muted, --surface, --border, --accent).
   Gehört zu formular.js.
   ============================================================ */

/* Ansprache oben, darunter das Formular über die volle Breite.
   Dadurch bekommen die Eingaben deutlich mehr Luft. */
#preis-raster { display: block; }

#preis-text {
  max-width: 640px;
  margin: 0 auto clamp(28px, 3vw, 40px);
  text-align: center;
}

#preis-text .preis-einleitung { margin-left: auto; margin-right: auto; }

#anfrage {
  --fehler: #9a2f14;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 12px 40px rgba(24, 22, 15, .07);
}

#anfrage * { box-sizing: border-box; }

/* ---------- Raster ---------- */

.af-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 20px;
}

.af-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.af-breit { grid-column: 1 / -1; }

/* ---------- Beschriftungen ---------- */

.af-feld > label,
.af-legende {
  font: 700 11.5px 'Manrope', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.af-optional {
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 400;
  font-size: 11.5px;
  opacity: .8;
}

/* ---------- Eingabefelder ---------- */

#anfrage input[type="text"],
#anfrage input[type="email"],
#anfrage input[type="tel"],
#anfrage input[type="number"],
#anfrage select,
#anfrage textarea {
  width: 100%;
  font: 400 15.5px/1.5 'Manrope', sans-serif;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

#anfrage textarea { min-height: 74px; resize: vertical; }

#anfrage select {
  cursor: pointer;
  /* Eigener Pfeil, weil das Systemsymbol durch appearance:none entfällt. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6a5c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

#anfrage input::placeholder,
#anfrage textarea::placeholder { color: var(--muted); opacity: .62; }

#anfrage input:focus,
#anfrage select:focus,
#anfrage textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

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

.af-fehler {
  font: 400 13px/1.45 'Manrope', sans-serif;
  color: var(--fehler);
  min-height: 0;
}

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

/* ---------- Leistungen als Auswahlchips ---------- */

.af-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }

.af-gruppe > legend { padding: 0; margin: 0 0 9px; }

.af-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.af-chip { position: relative; }

.af-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.af-chip span {
  display: block;
  font: 600 13.5px/1 'Manrope', sans-serif;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.af-chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.af-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.af-chip:hover span { border-color: var(--accent); }
.af-chip input:checked:hover + span { border-color: var(--accent); opacity: .9; }

/* ---------- Einwilligung ---------- */

.af-einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font: 400 13.5px/1.55 'Manrope', sans-serif;
  color: var(--muted);
  cursor: pointer;
}

.af-einwilligung input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.af-einwilligung a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.af-einwilligung a:hover { color: var(--accent); }

/* ---------- Absenden ---------- */

.af-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.af-senden {
  font: 700 14px/1 'Manrope', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  transition: opacity .16s ease;
}

.af-senden:hover { opacity: .88; }
.af-senden:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.af-senden[disabled] { opacity: .55; cursor: not-allowed; }

.af-hinweis {
  font: 400 13px/1.5 'Manrope', sans-serif;
  color: var(--muted);
  margin: 0;
}

/* ---------- Rückmeldung ---------- */

.af-meldung {
  font: 400 14.5px/1.55 'Manrope', sans-serif;
  border-radius: 12px;
  padding: 14px 17px;
  margin: 0 0 18px;
}

.af-meldung:empty { display: none; }

.af-meldung[data-art="gut"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--fg);
}

.af-meldung[data-art="schlecht"] {
  background: color-mix(in srgb, var(--fehler) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--fehler) 34%, transparent);
  color: var(--fehler);
}

/* Spamfalle: für Menschen unsichtbar, für Bots ausfüllbar. */
.af-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Direkte E-Mail als Pille ---------- */

.direkt-frage {
  font: 400 15px/1.6 'Manrope', sans-serif;
  color: var(--muted);
  margin: 0 0 12px;
}

.direkt-pille {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 600 clamp(16.5px, 1.45vw, 19.5px)/1 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--accent-fg);
  text-decoration: none;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 15px 24px;
  box-shadow: 0 6px 18px rgba(24, 22, 15, .12);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.direkt-pille svg { color: currentColor; flex: none; }

/* Beim Darüberfahren dreht sich das Verhältnis um: aus Gold wird Weiß. */
.direkt-pille:hover {
  background: var(--surface);
  color: var(--fg);
  transform: translateY(-1px);
}

.direkt-pille:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .direkt-pille, .direkt-pille svg { transition: none; }
  .direkt-pille:hover { transform: none; }
}

@media (max-width: 700px) {
  .direkt-pille { padding: 14px 20px; gap: 9px; }
}

/* ============================================================
   Konfigurator: Fortschritt, Schritte, Auswahlkarten, Zähler
   ============================================================ */

.af-nurvorlese {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------- Fortschritt ---------- */

.af-fortschritt {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--border);
}

.af-fortschritt li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.af-fs-nr {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: 700 12px 'Manrope', sans-serif;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.af-fs-text {
  font: 700 11px 'Manrope', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.af-fortschritt .af-erledigt .af-fs-nr {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.af-fortschritt .af-jetzt .af-fs-nr {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.af-fortschritt .af-jetzt .af-fs-text { color: var(--fg); }

/* ---------- Schrittseiten ---------- */

.af-seite[hidden] { display: none; }

.af-frage {
  font: 600 clamp(19px, 1.8vw, 23px)/1.3 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--fg);
  margin: 0 0 16px;
}

.af-block { margin-top: 18px; }
.af-block:first-of-type { margin-top: 0; }

.af-pflicht {
  display: inline-block;
  font: 700 9.5px 'Manrope', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 2px;
}

.af-hilfe {
  font: 400 13px/1.6 'Manrope', sans-serif;
  color: var(--muted);
  margin: 12px 0 0;
  padding: 11px 14px;
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.af-trenner {
  font: 700 11px 'Manrope', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---------- Auswahlkarten (eine Wahl) ---------- */

.af-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 9px;
}

.af-karten--schmal { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }

/* Lange Begriffe dürfen umbrechen, sonst drücken sie die Spalte auf. */
.af-karte span { overflow-wrap: break-word; hyphens: auto; }

.af-karte { position: relative; display: block; }

.af-karte input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}

.af-karte span {
  display: flex;
  align-items: center;
  min-height: 48px;
  font: 500 14.5px/1.3 'Manrope', sans-serif;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.af-karte:hover span { border-color: var(--accent); }

.af-karte input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.af-karte input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.af-chips--gross .af-chip span { padding: 12px 18px; font-size: 14.5px; }

/* Fehlerhafte Gruppen bekommen einen dezenten Rahmen. */
.af-gruppe.af-hat-fehler .af-karten,
.af-gruppe.af-hat-fehler .af-chips {
  outline: 1px solid color-mix(in srgb, var(--fehler) 45%, transparent);
  outline-offset: 8px;
  border-radius: 4px;
}

/* ---------- Bildkarten für die Leistungen ---------- */

.af-bildkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.af-bildkarte { position: relative; display: block; }

.af-bildkarte input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
  z-index: 2;
}

.af-bk-flaeche {
  display: block;
  position: relative;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .16s ease;
}

.af-bk-flaeche img {
  display: block;
  width: 100%;
  /* height:auto ist nötig, sonst gewinnt das height-Attribut aus dem HTML
     und aspect-ratio bleibt wirkungslos. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.82);
  transition: filter .2s ease, transform .3s ease;
}

.af-bk-titel {
  display: block;
  font: 600 13.5px/1.3 'Manrope', sans-serif;
  color: var(--fg);
  background: var(--surface);
  padding: 11px 13px;
  border-top: 1px solid var(--border);
  transition: background-color .16s ease, color .16s ease;
}

.af-bk-haken {
  position: absolute;
  top: 9px; right: 9px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(24, 22, 15, .32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color .16s ease, border-color .16s ease;
}

.af-bk-haken::after {
  content: '';
  position: absolute;
  left: 8px; top: 4px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg) scale(.6);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}

.af-bildkarte:hover .af-bk-flaeche { border-color: var(--accent); }
.af-bildkarte:hover .af-bk-flaeche img { filter: saturate(1); }

.af-bildkarte input:checked + .af-bk-flaeche { border-color: var(--accent); }
.af-bildkarte input:checked + .af-bk-flaeche img { filter: saturate(1); }

.af-bildkarte input:checked + .af-bk-flaeche .af-bk-titel {
  background: var(--accent);
  color: var(--accent-fg);
  border-top-color: var(--accent);
}

.af-bildkarte input:checked + .af-bk-flaeche .af-bk-haken {
  background: var(--accent);
  border-color: var(--accent);
}

.af-bildkarte input:checked + .af-bk-flaeche .af-bk-haken::after {
  opacity: 1;
  transform: rotate(43deg) scale(1);
}

.af-bildkarte input:focus-visible + .af-bk-flaeche {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Ruhige Höhe: der Fußbereich soll beim Schrittwechsel stehen bleiben ---------- */

.af-seiten {
  position: relative;
  transition: min-height .3s cubic-bezier(.3, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .af-seiten { transition: none; }
}

/* ---------- Zahlen und Zähler ---------- */

.af-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px 14px;
}

/* justify-content sorgt dafür, dass die Zähler unten bündig sitzen,
   auch wenn eine Beschriftung einmal umbricht. */
.af-zahl { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }

.af-zahl > label,
.af-zahl-titel {
  font: 700 11.5px 'Manrope', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.af-stepper {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.af-stepper button {
  flex: none;
  width: 38px;
  border: 0;
  background: none;
  color: var(--fg);
  font: 400 19px/1 'Manrope', sans-serif;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

.af-stepper button:hover { background: var(--accent); color: var(--accent-fg); }
.af-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

#anfrage .af-stepper input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  padding: 11px 4px;
  font-variant-numeric: tabular-nums;
}

#anfrage .af-stepper input:focus { box-shadow: none; }

/* Systemeigene Pfeilchen ausblenden, die Knöpfe übernehmen das. */
#anfrage input[type="number"]::-webkit-outer-spin-button,
#anfrage input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#anfrage input[type="number"] { -moz-appearance: textfield; }

/* ---------- Zusammenfassung ---------- */

/* Zwei Spalten, damit die Übersicht nicht in die Länge läuft. */
.af-zus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.af-zus-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
}

.af-zus-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}

.af-zus-kopf h4 {
  font: 600 15.5px 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--fg);
}

.af-aendern {
  border: 0;
  background: none;
  padding: 2px 0;
  font: 700 11px 'Manrope', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  cursor: pointer;
}

.af-aendern:hover { color: var(--fg); border-color: var(--fg); }
.af-aendern:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.af-zus dl { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.af-zus dl > div {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.af-zus dt {
  font: 400 12px/1.45 'Manrope', sans-serif;
  color: var(--muted);
}

.af-zus dd {
  margin: 0;
  font: 500 13.5px/1.45 'Manrope', sans-serif;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* ---------- Fußzeile mit Navigation ---------- */

.af-zurueck {
  font: 700 13px/1 'Manrope', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 15px 24px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.af-zurueck:hover { border-color: var(--accent); color: var(--accent); }
.af-zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.af-fuss .af-hinweis { margin-left: auto; }

/* ---------- Enger Bildschirm ---------- */

@media (max-width: 700px) {
  .af-fortschritt { gap: 4px; justify-content: space-between; }
  .af-fortschritt li { flex: 0 0 auto; gap: 7px; }
  .af-fortschritt .af-jetzt { flex: 0 1 auto; min-width: 0; }
  .af-fs-text { display: none; }
  .af-fortschritt .af-jetzt .af-fs-text {
    display: block;
    font-size: 10px;
    letter-spacing: .08em;
  }
  /* minmax(0, ...) statt 1fr: sonst diktiert das längste Wort die Spaltenbreite. */
  .af-karten, .af-karten--schmal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .af-bildkarten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
  .af-bk-titel { font-size: 12.5px; padding: 9px 10px; }
  .af-bk-haken { width: 21px; height: 21px; top: 7px; right: 7px; }
  .af-bk-haken::after { left: 7px; top: 3px; width: 5px; height: 10px; }
  .af-karte span { font-size: 13.5px; min-height: 44px; padding: 9px 12px; }
  .af-zahlen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .af-stepper button { width: 34px; }
  .af-zus { grid-template-columns: 1fr; }
  .af-zus dl > div { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 10px; }
  .af-fuss .af-hinweis { margin-left: 0; }
  .af-zurueck { width: 100%; padding: 17px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .af-karte span, .af-fs-nr, .af-stepper button, .af-zurueck { transition: none; }
}

/* ---------- Umbruch auf eine Spalte ---------- */

/* ---------- Mobil ---------- */

@media (max-width: 700px) {
  #anfrage {
    padding: 22px 18px;
    border-radius: 14px;
  }
  .af-raster { grid-template-columns: 1fr; gap: 16px; }
  .af-fuss { flex-direction: column; align-items: stretch; }
  .af-senden { width: 100%; padding: 19px 24px; }
  .af-hinweis { text-align: center; }
  #anfrage input[type="text"],
  #anfrage input[type="email"],
  #anfrage input[type="tel"],
  #anfrage input[type="number"],
  #anfrage select,
  #anfrage textarea {
    font-size: 16px;   /* verhindert das Hineinzoomen auf iPhones */
  }
}

@media (prefers-reduced-motion: reduce) {
  #anfrage input, #anfrage select, #anfrage textarea,
  .af-chip span, .af-senden { transition: none; }
}