/* Projekt-Fragebogen (anfrage.html). Baut auf scrollcraft.css + site.css auf und nutzt
   nur deren Tokens: --sc-canvas, --sc-surface, --sc-ink, --sc-ink-soft, --sc-accent,
   --sc-hairline(-strong), --sc-1 … --sc-9, --sc-t-*, --sc-ease-out. Keine neuen Farben
   außer dem Fehlerton, der auf der Seite bisher fehlt. */

/* Native Bedienelemente (Select-Liste, Checkbox, Scrollbars, Autofill) dunkel statt hell. */
:root { color-scheme: dark; }

.anfrage {
  --fb-radius: 14px;
  --fb-error: #E57B6B;
  --fb-side: clamp(18rem, 26vw, 23rem); /* Desktop: Spalte für „Ich empfehle“ und das zweite Feld eines Paars */
  max-width: 64rem;
  margin-inline: auto;
  padding: var(--sc-8) var(--sc-gutter) var(--sc-9);
}

.anfrage__head { margin: var(--sc-6) 0 var(--sc-7); }
/* Logo wie in der Navigation von ehrlich-digital.de (ME.-Monogramm, Punkt in Bernstein) */
.anfrage__brand { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--sc-6); color: var(--sc-ink); }
.anfrage__logo { display: block; height: var(--logo-h, 24px); width: calc(var(--logo-h, 24px) * 1322 / 710); fill: currentColor; } /* gleiche Größe wie in der Navigation der Hauptseite */
.anfrage__logo-dot { fill: var(--sc-accent); }
.anfrage__brand:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 4px; }
.anfrage__kicker { margin-bottom: var(--sc-3); font-size: var(--sc-t-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent); }
.anfrage__title {
  max-width: 20ch;
  margin: 0 0 var(--sc-4);
  font-size: var(--sc-t-2xl);
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.anfrage__lede { max-width: 52ch; color: var(--sc-ink-soft); text-wrap: pretty; }

/* ---------------------------------------------------------------- Rahmen -- */
.fb { display: grid; gap: var(--sc-6); }
.fb[hidden] { display: none; }

.fb__progress { display: none; gap: var(--sc-2); }
.fb.is-stepped .fb__progress { display: grid; }
.fb__bar { height: 3px; border-radius: 999px; background: var(--sc-hairline); overflow: hidden; }
.fb__fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--sc-accent);
  border-radius: inherit;
  transition: width 420ms var(--sc-ease-out);
}
.fb__count { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.fb__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fb__step { display: grid; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; }
/* Ohne JS stehen alle Schritte untereinander, getrennt durch eine Linie. */
.fb__step + .fb__step { padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.fb.is-stepped .fb__step { display: none; padding-top: 0; border-top: 0; }
.fb.is-stepped .fb__step.is-current { display: grid; animation: fb-in 360ms var(--sc-ease-out); }
@keyframes fb-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* .btn setzt display:inline-flex und würde das hidden-Attribut sonst überstimmen. */
.fb [hidden] { display: none !important; }

/* Die legend ist kein Grid-Item des fieldset, darum eigener Abstand statt gap. */
.fb__legend {
  padding: 0;
  margin-bottom: var(--sc-5);
  font-size: var(--sc-t-xl);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fb__hint { margin-top: calc(-1 * var(--sc-1)); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; }
.fb__num { display: block; margin-bottom: var(--sc-2); font-size: var(--sc-t-sm); font-weight: 460; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent); }
.fb__saved { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.fb__finish { display: grid; gap: var(--sc-5); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.fb__keep { display: grid; justify-items: start; gap: var(--sc-2); }
.fb__keep .fb-ghost { margin-top: var(--sc-2); }
.fb__send { display: grid; gap: var(--sc-2); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.fb__group { display: grid; gap: var(--sc-3); }
.fb__label { font-size: var(--sc-t-sm); font-weight: 520; color: var(--sc-ink); }
.fb__opt { font-weight: 400; color: var(--sc-ink-soft); }
.fb__row { display: grid; gap: var(--sc-5); }
@media (min-width: 640px) { .fb__row { grid-template-columns: 1fr 1fr; } }
.fb__req { color: var(--sc-accent); }
.fb__intro { max-width: 56ch; margin: calc(-1 * var(--sc-3)) 0 var(--sc-5); color: var(--sc-ink-soft); text-wrap: pretty; }

/* ---------------------------------------------- Frage + „Ich empfehle“ -- */
/* Wie im Hegify-Fragebogen: Frage links, Empfehlung rechts daneben; mobil darunter. */
.fb-q {
  display: grid;
  gap: var(--sc-4);
  padding-block: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
}
.fb-q__main { display: grid; gap: var(--sc-2); align-content: start; min-width: 0; }
.fb-q__main > .fb__chips { margin-top: var(--sc-1); }
.fb-q__inline { margin-top: var(--sc-2); display: grid; gap: var(--sc-1); }
@media (min-width: 640px) { .fb-q--pair { grid-template-columns: 1fr 1fr; column-gap: var(--sc-5); } }
@media (min-width: 900px) {
  .fb-q { grid-template-columns: minmax(0, 1fr) var(--fb-side); column-gap: var(--sc-6); }
  /* Paare (Name + Unternehmen, E-Mail + Telefon): links die Hauptspalte, rechts die Empfehlungs-Spalte,
     damit alle Felder auf denselben Kanten stehen. */
  .fb-q--pair { grid-template-columns: minmax(0, 1fr) var(--fb-side); column-gap: var(--sc-6); }
  .fb-q:not(.fb-q--tip):not(.fb-q--pair) > .fb-q__main { grid-column: 1; }
}

.fb-tip {
  align-self: start;
  padding: var(--sc-4) var(--sc-5);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent);
  border-radius: var(--fb-radius);
  background: color-mix(in oklab, var(--sc-accent) 6%, var(--sc-canvas));
}
.fb-tip__kicker { margin-bottom: var(--sc-2); font-size: var(--sc-t-xs); font-weight: 520; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.fb-tip__kicker::before { content: "→ "; }
.fb-tip__text { font-size: var(--sc-t-sm); line-height: 1.55; color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-ink-soft)); text-wrap: pretty; }

.fb__parts { display: grid; gap: var(--sc-3); }
@media (min-width: 640px) {
  .fb__parts { grid-template-columns: 1fr 1fr; }
  .fb__part { grid-column: 1 / -1; }
  .fb__part--half { grid-column: auto; }
}
/* align-content: start, sonst strecken sich die Nachbarfelder, wenn unter einem Feld eine Fehlermeldung steht */
.fb__part { display: grid; gap: var(--sc-1); min-width: 0; align-content: start; }

.chip.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------- Auswahl-Karten -- */
.fb__options { display: grid; gap: var(--sc-3); }
@media (min-width: 640px) { .fb__options--compact { grid-template-columns: 1fr 1fr; } }

.opt, .chip, .fb-check { position: relative; cursor: pointer; }
.opt input, .chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.opt__box {
  display: grid;
  gap: 0.15em;
  min-height: 64px;
  padding: var(--sc-4) var(--sc-5);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--fb-radius);
  background: var(--sc-surface);
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.opt__title { font-weight: 540; letter-spacing: -0.01em; color: var(--sc-ink); }
.opt__price { margin-left: 0.35em; font-weight: 400; color: var(--sc-accent); white-space: nowrap; }
.opt__sub { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.45; }
.opt input:checked + .opt__box {
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface));
}
.opt input:focus-visible + .opt__box,
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.fb__chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chip span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.05em;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 999px;
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-size: var(--sc-t-sm);
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
/* Platz für die fette Schrift im ausgewählten Zustand reservieren: Der Chip wird beim Antippen
   nicht breiter, die Chips daneben springen nicht. Unsichtbar, auch für Screenreader. */
.chip span::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 540;
  pointer-events: none;
}
.chip input:checked + span {
  border-color: var(--sc-accent);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-weight: 540;
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover .opt__box, .chip:hover span { border-color: color-mix(in oklab, var(--sc-accent) 55%, var(--sc-hairline-strong)); }
}

/* ------------------------------------------------------------- Felder -- */
.field { display: grid; gap: var(--sc-2); min-width: 0; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0.75em 1em;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 12px;
  background: var(--sc-surface);
  color: var(--sc-ink);
  font: inherit;
  font-size: max(16px, var(--sc-t-base)); /* kein Auto-Zoom auf iOS */
  transition: border-color 160ms var(--sc-ease-out);
}
.field__input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.field__input:focus { outline: none; border-color: var(--sc-accent); }
.field__input--area { min-height: 120px; resize: vertical; line-height: 1.5; }
.field__input--select {
  appearance: none;
  padding-right: 2.6em;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.25em) 52%, calc(100% - 0.9em) 52%;
  background-size: 0.35em 0.35em, 0.35em 0.35em;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field__input--select option { background: var(--sc-surface); color: var(--sc-ink); }
.field--other { margin-top: var(--sc-1); }
.field--other[hidden] { display: none; }
.field__input[aria-invalid="true"] { border-color: var(--fb-error); }
.field__input:disabled { opacity: 0.45; }

/* Autofill: Browser färben ausgefüllte Felder sonst hellgelb/hellblau mit dunkler Schrift.
   Die Fläche wird per Inset-Schatten übermalt, die Schrift bleibt hell. Getrennte Regeln, weil ein
   unbekannter Pseudo-Selektor sonst die ganze Regel ungültig macht. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sc-ink);
  -webkit-box-shadow: 0 0 0 100px var(--sc-surface) inset;
  box-shadow: 0 0 0 100px var(--sc-surface) inset;
  caret-color: var(--sc-ink);
  transition: background-color 9999s 0s, border-color 160ms var(--sc-ease-out);
}
.field__input:autofill {
  -webkit-text-fill-color: var(--sc-ink);
  box-shadow: 0 0 0 100px var(--sc-surface) inset;
  filter: none; /* Firefox legt sonst einen Farbfilter darüber */
}

.fb-check { display: flex; align-items: flex-start; gap: var(--sc-3); min-height: 44px; padding-top: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.fb-check input { flex: none; width: 20px; height: 20px; margin: 0.15em 0 0; accent-color: var(--sc-accent); }
.fb-check a { color: var(--sc-ink); text-underline-offset: 0.2em; }
.fb-check--consent { color: var(--sc-ink); }

/* Zeichenzähler unter langen Textfeldern (ab 70 % sichtbar) */
.fb__chars { justify-self: end; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.fb__chars.is-full { color: var(--sc-accent); }
.fb [hidden].fb__chars, .fb [hidden].fb__suggest { display: none !important; }

/* „Meintest du …?“ bei Tippfehlern in der Mail-Domain */
.fb__suggest { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.fb__suggest-btn {
  padding: 0.5em 0.1em;
  margin: -0.5em 0;
  border: 0;
  background: none;
  color: var(--sc-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.fb__error:empty { display: none; }
.fb__error { color: var(--fb-error); font-size: var(--sc-t-sm); line-height: 1.4; }
.fb__error--form { padding: var(--sc-3) var(--sc-4); border: 1px solid color-mix(in oklab, var(--fb-error) 45%, transparent); border-radius: 12px; }

/* ------------------------------------------------------- Navigation -- */
.fb__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--sc-4); flex-wrap: wrap; }
.fb__back {
  margin-right: auto;
  min-height: 48px;
  padding: 0 0.4em;
  border: 0;
  background: none;
  color: var(--sc-ink-soft);
  font: inherit;
  cursor: pointer;
  transition: color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .fb__back:hover { color: var(--sc-ink); } }
.fb .btn { border: 0; font: inherit; font-weight: 560; cursor: pointer; }
.fb .btn[disabled] { opacity: 0.6; cursor: progress; }
.fb__fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 479px) {
  .fb__nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* Zweiter Button neben .btn: gleiche Pille, nur Kontur. */
.fb-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.4em;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--sc-ink);
  font: inherit;
  font-weight: 520;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.fb-ghost:active { transform: scale(0.97); }
.fb-ghost:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .fb-ghost:hover { border-color: var(--sc-accent); } }

/* Textlink als Button; Padding + negativer Margin vergrößern die Trefferfläche, ohne die Zeile zu sprengen. */
.fb__link {
  padding: 0.75em 0;
  margin: -0.75em 0;
  border: 0;
  background: none;
  color: var(--sc-ink-soft);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .fb__link:hover { color: var(--sc-ink); } }

/* ------------------------------------------------------- Erfolg -- */
.fb-done { display: grid; justify-items: start; gap: var(--sc-4); padding: var(--sc-7) 0; outline: none; }
.fb-done[hidden] { display: none; }
.fb-done__title { margin: 0; font-size: var(--sc-t-xl); font-weight: 540; letter-spacing: -0.02em; line-height: 1.2; }
.fb-done__text { max-width: 52ch; color: var(--sc-ink-soft); margin-bottom: var(--sc-3); }
.fb-done__note { color: #C29462; font-size: var(--sc-t-sm); }
.fb-done__copy { margin-top: var(--sc-4); }

/* ------------------------------------------------- Desktop: kompakt -- */
/* Ab 900 px breiter und dichter, damit ein Schritt möglichst auf einen Bildschirm passt.
   Mobil bleibt alles wie oben (große Touch-Ziele, 16 px Schrift gegen den iOS-Zoom). */
@media (min-width: 900px) {
  .anfrage { max-width: 80rem; padding-top: var(--sc-6); padding-bottom: var(--sc-7); }
  .anfrage__head { margin: 0 0 var(--sc-5); }
  .anfrage__brand { margin-bottom: var(--sc-4); }
  .anfrage__kicker { margin-bottom: var(--sc-2); }
  .anfrage__title { max-width: none; margin-bottom: var(--sc-3); font-size: var(--sc-t-xl); }
  .anfrage__lede { max-width: 90ch; }

  .fb { gap: var(--sc-5); }
  .fb__num { margin-bottom: var(--sc-1); }
  .fb__legend { margin-bottom: var(--sc-3); font-size: var(--sc-t-lg); }
  .fb__intro { max-width: 90ch; margin: calc(-1 * var(--sc-1)) 0 var(--sc-4); }
  .fb-q { padding-block: var(--sc-4); }
  .fb__finish, .fb__send { gap: var(--sc-3); padding-top: var(--sc-4); }

  .fb-tip { padding: var(--sc-3) var(--sc-4); }
  .fb-tip__kicker { margin-bottom: var(--sc-1); }
  .fb-tip__text { font-size: 0.875rem; line-height: 1.5; }

  /* Mehrteilige Felder mit row: true (Adresse) in einer Zeile: ganze Teile doppelt so breit wie halbe. */
  .fb__parts--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .fb__parts--row > .fb__part { grid-column: span 2; }
  .fb__parts--row > .fb__part--half { grid-column: span 1; }

  /* Textfelder starten mit drei Zeilen und wachsen beim Schreiben mit (wo unterstützt). */
  .field__input.field__input--area { min-height: 0; }
  @supports (field-sizing: content) {
    .field__input.field__input--area { field-sizing: content; min-height: calc(3lh + 1.2em + 2px); max-height: 22lh; }
  }

  .anfrage .legal__foot { margin-top: var(--sc-7); }
}
/* Kleinere Klickziele nur mit Maus/Trackpad, Touch-Geräte behalten 44 px. */
@media (min-width: 900px) and (pointer: fine) {
  .field__input { min-height: 44px; padding: 0.6em 0.9em; font-size: 1rem; }
  .chip span { min-height: 36px; padding: 0 0.95em; }
  .fb__back, .fb-ghost { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb.is-stepped .fb__step.is-current { animation: none; }
  .fb__fill { transition: none; }
}