/* ============================================================================
   Anfrageformular Green Vision · Gestaltung
   ----------------------------------------------------------------------------
   Nur .anfrage*-Klassen. Farben und Schriften aus css/tokens.*.css; die
   Flächen-Variablen (--ink, --ink-70, --ink-55, --hair, --focus-ring) kommen
   aus css/cinematic.css und schalten auf dunklen Flächen (.theme-dark) mit um.
   Kein Glas, keine Schatten-Show: ruhige Karten, Petrol für Auswahl,
   Amber nur für den Hauptknopf und den Fortschrittsbalken.
   ========================================================================== */

.anfrage-mount {
  --anfrage-fehler: #9B2C2C;            /* Rot-Braun: 6,9:1 auf Paper, 7,4:1 auf Weiß */
  --anfrage-flaeche: var(--white, #FFFFFF);
  --anfrage-rand: var(--stone, #DCDAD0);
  --anfrage-marke: var(--slate, #7A7A75); /* Radio-Kreis: 4,2:1 auf Weiß */
  --anfrage-wahl: var(--brand, #1F6B5A);
  max-width: 760px;
  margin-inline: auto;
  scroll-margin-top: calc(var(--header-h, 72px) + 1rem);
  color: var(--ink, #1A1A1A);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  /* Keine automatische Trennung: Auswahl- und Übersichtstexte sind kurz und
     sollen als ganze Wörter lesbar bleiben; überlange Wörter brechen trotzdem. */
  hyphens: manual;
  overflow-wrap: break-word;
}
/* Platz für Schritt 1 freihalten, bis anfrage.js gerendert hat (m28: sonst
   springt die Fußzeile). Werte = gemessene Höhe von Schritt 1 auf
   kontakt.html; nach dem Rendern setzt anfrage.js .is-ready. Ohne
   JavaScript bleibt nur der noscript-Hinweis, daher nur unter .js. */
.js .anfrage-mount:not(.is-ready) { min-height: 1370px; }
@media (max-width: 359px) { .js .anfrage-mount:not(.is-ready) { min-height: 1700px; } }
@media (min-width: 400px) { .js .anfrage-mount:not(.is-ready) { min-height: 1180px; } }
@media (min-width: 560px) { .js .anfrage-mount:not(.is-ready) { min-height: 1000px; } }
@media (min-width: 768px) { .js .anfrage-mount:not(.is-ready) { min-height: 960px; } }
.theme-dark .anfrage-mount {
  --anfrage-fehler: #FFB4A8;            /* hell auf dunklem Verlauf, ≥ 4,5:1 */
  --anfrage-flaeche: rgba(255, 255, 255, 0.05);
  --anfrage-rand: rgba(255, 255, 255, 0.24);
  --anfrage-marke: rgba(255, 255, 255, 0.72);
  --anfrage-wahl: var(--accent-bright, #EABE68);
}

.anfrage-noscript {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--anfrage-rand, #DCDAD0);
  border-radius: 12px;
  background: var(--anfrage-flaeche, #FFFFFF);
  color: var(--ink-70, rgba(26, 26, 26, .82));
  line-height: 1.6;
}
.anfrage-noscript a { color: inherit; text-underline-offset: 3px; }

.anfrage-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ Rahmen */
.anfrage-form {
  position: relative;
  border: 1px solid var(--anfrage-rand);
  border-radius: 16px;
  background: var(--anfrage-flaeche);
  padding: clamp(1.25rem, 4.5vw, 2.4rem);
}

.anfrage-fortschritt { margin-bottom: 1.4rem; }
.anfrage-fortschritt__text {
  margin: 0 0 .6rem;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-55, #6D6D67);
}
.anfrage-fortschritt__balken {
  height: 3px;
  border-radius: 999px;
  background: var(--anfrage-rand);
  overflow: hidden;
}
.anfrage-fortschritt__fill {
  display: block;
  height: 100%;
  width: 10%;
  background: var(--accent, #E0A43B);
  border-radius: 999px;
  transition: width .35s var(--ease, ease);
}

/* Feste Mindesthöhe: Knöpfe springen zwischen den Schritten nicht. */
.anfrage-karte { min-height: 30rem; }
@media (min-width: 640px) { .anfrage-karte { min-height: 31rem; } }
.anfrage-karte--neu { animation: anfrage-ein .26s var(--ease, ease) both; }
@keyframes anfrage-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ Fragen */
.anfrage-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.anfrage-legende { padding: 0; margin: 0 0 1rem; width: 100%; }
.anfrage-legende--klein {
  margin: 1.4rem 0 .7rem;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kicker, #1F6B5A);
}
.anfrage-frage {
  margin: 0;
  font-family: var(--font-display, 'Jost', sans-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
  hyphens: manual;
}
.anfrage-frage:focus { outline: none; }
.anfrage-frage:focus-visible { outline: 2px solid var(--focus-ring, #1F6B5A); outline-offset: 4px; }
.anfrage-schritt--mehrteilig > .anfrage-frage { margin-bottom: .6rem; }
.anfrage-pruefen > .anfrage-frage { margin-bottom: .6rem; }

.anfrage-hinweis {
  margin: -.4rem 0 1.1rem;
  color: var(--ink-70);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 60ch;
  text-wrap: pretty;
}
.anfrage-schritt--mehrteilig > .anfrage-hinweis { margin-top: 0; }
.anfrage-gruppe--vorbelegt .anfrage-hinweis {
  padding-left: .8rem;
  border-left: 2px solid var(--accent, #E0A43B);
}

/* ------------------------------------------------------------ Auswahlkarten */
.anfrage-optionen { display: grid; gap: .55rem; }
@media (min-width: 640px) {
  .anfrage-gruppe:not([data-feld="anliegen"]) .anfrage-optionen { grid-template-columns: 1fr 1fr; }
}

.anfrage-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  min-height: 56px;
  padding: .9rem 1rem;
  border: 1px solid var(--anfrage-rand);
  border-radius: 12px;
  background: var(--anfrage-flaeche);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.anfrage-option__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.anfrage-option__marke {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: .1rem;
  border-radius: 50%;
  border: 2px solid var(--anfrage-marke);
  transition: border-color .15s ease;
}
.anfrage-option__marke::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--anfrage-wahl);
  transform: scale(0);
  transition: transform .16s ease;
}
.anfrage-option__text { display: grid; gap: .2rem; min-width: 0; }
.anfrage-option__label {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: manual; /* keine Trennung mitten in kurzen Auswahltexten */
}
.anfrage-option__hinweis {
  hyphens: manual;
  overflow-wrap: break-word;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-70);
  text-wrap: pretty;
}
.anfrage-option:hover { border-color: var(--anfrage-wahl); }
.anfrage-option:hover .anfrage-option__marke { border-color: var(--anfrage-wahl); }
.anfrage-option:has(.anfrage-option__input:focus-visible) {
  outline: 2px solid var(--focus-ring, #1F6B5A);
  outline-offset: 2px;
}
.anfrage-option:has(.anfrage-option__input:checked) {
  border-color: var(--anfrage-wahl);
  box-shadow: inset 0 0 0 1px var(--anfrage-wahl);
  background: var(--brand-tint, rgba(31, 107, 90, .08));
}
.anfrage-option:has(.anfrage-option__input:checked) .anfrage-option__marke { border-color: var(--anfrage-wahl); }
.anfrage-option:has(.anfrage-option__input:checked) .anfrage-option__marke::after { transform: scale(1); }
.theme-dark .anfrage-option:has(.anfrage-option__input:checked) { background: rgba(234, 190, 104, .10); }

.ist-fehlerhaft .anfrage-option { border-color: var(--anfrage-fehler); }

/* ------------------------------------------------------------ Auswahlhilfe */
.anfrage-hilfe { margin-top: 1.1rem; }
.anfrage-hilfe__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .95rem;
  color: var(--accent-text, #1F6B5A);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.anfrage-hilfe__knopf::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: .55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.anfrage-hilfe__knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.anfrage-hilfe__panel {
  margin-top: .5rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--accent, #E0A43B);
  background: var(--paper, #F6F5F1);
  border-radius: 0 10px 10px 0;
}
.theme-dark .anfrage-hilfe__panel { background: rgba(255, 255, 255, .06); }
.anfrage-hilfe__einleitung { margin: 0 0 .6rem; color: var(--ink-70); font-size: .95rem; }
.anfrage-hilfe__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.anfrage-hilfe__satz {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  text-align: left;
  background: var(--anfrage-flaeche);
  border: 1px solid var(--anfrage-rand);
  border-radius: 10px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.anfrage-hilfe__satz:hover { border-color: var(--anfrage-wahl); }

/* ------------------------------------------------------------ Textfelder */
.anfrage-raster { display: grid; gap: 1rem 1.2rem; }
@media (min-width: 640px) {
  .anfrage-raster { grid-template-columns: 1fr 1fr; }
  .anfrage-raster--standort { grid-template-columns: 11rem 1fr; }
}
.anfrage-feld { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.anfrage-feld__label {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kicker, #1F6B5A);
}
.anfrage-feld__hinweis { margin: 0; font-size: .88rem; color: var(--ink-70); }
.anfrage-feld__input,
.anfrage-feld__select {
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  border: 1px solid var(--anfrage-marke);
  border-radius: 10px;
  background: var(--anfrage-flaeche);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16 px: iOS zoomt nicht */
}
.theme-dark .anfrage-feld__input,
.theme-dark .anfrage-feld__select { background: rgba(255, 255, 255, .08); }
.anfrage-feld__input:focus-visible,
.anfrage-feld__select:focus-visible {
  outline: 2px solid var(--focus-ring, #1F6B5A);
  outline-offset: 1px;
  border-color: var(--anfrage-wahl);
}
.anfrage-feld__zeile { display: flex; gap: .6rem; max-width: 22rem; }
.anfrage-feld__input--zahl { flex: 1 1 auto; min-width: 0; }
.anfrage-feld__select { flex: 0 0 6.5rem; width: 6.5rem; }
.anfrage-feld--zahl { margin-top: 1.4rem; }
.ist-fehlerhaft .anfrage-feld__input,
.anfrage-feld__input[aria-invalid="true"] { border-color: var(--anfrage-fehler); border-width: 2px; }

.anfrage-check {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  margin-top: 1rem;
}
.anfrage-check__input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--brand, #1F6B5A);
  cursor: pointer;
}
.anfrage-check__label { cursor: pointer; font-size: 1rem; }

.anfrage-datenschutz {
  margin: 1.4rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 60ch;
}
.anfrage-datenschutz a { color: inherit; text-underline-offset: 3px; }

/* ------------------------------------------------------------ Fehler */
.anfrage-feldfehler {
  margin: .5rem 0 0;
  font-size: .92rem;
  font-weight: 500;
  color: var(--anfrage-fehler);
}
.anfrage-feldfehler[hidden] { display: none; }
.anfrage-meldung { margin: 0; min-height: 0; }
.anfrage-meldung--fehler {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--anfrage-fehler);
  background: color-mix(in srgb, var(--anfrage-fehler) 7%, transparent);
  border-radius: 0 8px 8px 0;
  color: var(--anfrage-fehler);
  font-weight: 500;
  line-height: 1.5;
}

/* ------------------------------------------------------------ Knöpfe */
.anfrage-nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair-soft, rgba(26, 26, 26, .08));
}
.anfrage-nav .btn { min-height: 48px; }
.anfrage-zurueck[hidden] { display: inline-flex; visibility: hidden; }
.anfrage-weiter { margin-left: auto; min-width: 9rem; }
.anfrage-weiter:disabled { cursor: progress; }
@media (max-width: 380px) {
  .anfrage-nav .btn { padding-inline: 1.1rem; }
  .anfrage-weiter { min-width: 0; }
}

/* Honigtopf: für Menschen unsichtbar, bewusst nicht display:none. */
.anfrage-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Prüfen */
.anfrage-zusammenfassung { margin: .4rem 0 0; }
.anfrage-zusammenfassung__zeile {
  display: grid;
  gap: .2rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--hair, #DCDAD0);
}
.anfrage-zusammenfassung__zeile:first-child { border-top: 1px solid var(--hair, #DCDAD0); }
.anfrage-zusammenfassung dt {
  font-size: .85rem;
  color: var(--ink-55);
  line-height: 1.4;
}
.anfrage-zusammenfassung dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.anfrage-zusammenfassung__wert { color: var(--ink); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .anfrage-zusammenfassung__zeile { grid-template-columns: 15rem 1fr; gap: 1.2rem; align-items: baseline; }
}
.anfrage-aendern {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .2rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: .9rem;
  color: var(--accent-text, #1F6B5A);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ------------------------------------------------------------ Erfolg */
.anfrage-erfolg {
  display: grid;
  justify-items: start;
  gap: .6rem;
  padding: clamp(1.5rem, 5vw, 2.6rem);
  border: 1px solid var(--anfrage-rand);
  border-radius: 16px;
  background: var(--anfrage-flaeche);
}
.anfrage-erfolg__haken {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--brand, #1F6B5A);
}
.anfrage-erfolg__haken::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 9px;
  width: 10px;
  height: 18px;
  border-right: 2.5px solid var(--brand, #1F6B5A);
  border-bottom: 2.5px solid var(--brand, #1F6B5A);
  transform: rotate(45deg);
}
.theme-dark .anfrage-erfolg__haken,
.theme-dark .anfrage-erfolg__haken::after { border-color: var(--accent-bright, #EABE68); }
.anfrage-erfolg__titel {
  margin: .4rem 0 0;
  font-family: var(--font-display, 'Jost', sans-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  line-height: 1.2;
  text-wrap: balance;
}
.anfrage-erfolg__titel:focus { outline: none; }
.anfrage-erfolg__text { margin: 0; color: var(--ink-70); line-height: 1.6; }
.anfrage-erfolg__id {
  margin: .4rem 0 0;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-55);
}
.anfrage-erfolg__id strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ Vorschau */
.anfrage-vorschau {
  padding: clamp(1.25rem, 4.5vw, 2.4rem);
  border: 1px solid var(--anfrage-rand);
  border-top: 3px solid var(--accent, #E0A43B);
  border-radius: 16px;
  background: var(--white, #FFFFFF);
  color: var(--anthrazit, #1A1A1A);
}
.anfrage-vorschau__eyebrow {
  margin: 0 0 .5rem;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand, #1F6B5A);
}
.anfrage-vorschau__titel {
  margin: 0;
  font-family: var(--font-display, 'Jost', sans-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  line-height: 1.2;
  text-wrap: balance;
}
.anfrage-vorschau__titel:focus { outline: none; }
.anfrage-vorschau__hinweis { margin: .6rem 0 1.2rem; color: #4A4A46; line-height: 1.55; }
.anfrage-vorschau__meta { margin: 0 0 1.2rem; display: grid; gap: .3rem; font-size: .92rem; }
.anfrage-vorschau__meta div { display: flex; gap: .8rem; }
.anfrage-vorschau__meta dt { flex: 0 0 4.5rem; color: var(--slate-ink, #6D6D67); }
.anfrage-vorschau__meta dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.anfrage-vorschau__steckbrief,
.anfrage-vorschau__bestaetigung {
  padding: 1rem 1.1rem;
  border: 1px solid var(--stone, #DCDAD0);
  border-radius: 10px;
  background: var(--paper-pure, #FAF9F5);
  overflow-x: auto;
}
.anfrage-vorschau__zwischen {
  margin: 1.8rem 0 .7rem;
  font-family: var(--font-display, 'Jost', sans-serif);
  font-weight: 500;
  font-size: 1.15rem;
}
/* Knopf unabhängig vom Seitenkontext gestalten (gleiche Anmutung wie
   „Zurück“): die Vorschau-Karte ist immer hell, auch auf dunklen Flächen. */
.anfrage-vorschau .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.4rem;
  border: 1px solid var(--slate, #7A7A75);
  border-radius: 999px;
  background: transparent;
  color: var(--anthrazit, #1A1A1A);
  font-family: var(--font-display, 'Jost', sans-serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.anfrage-vorschau .btn:hover { border-color: var(--brand, #1F6B5A); background: var(--brand-tint, rgba(31, 107, 90, .08)); }
.anfrage-vorschau .btn:focus-visible { outline: 2px solid var(--brand, #1F6B5A); outline-offset: 3px; }
.anfrage-vorschau__neu { margin-top: 1.6rem; }
@media (max-width: 560px) {
  .anfrage-vorschau__steckbrief td,
  .anfrage-vorschau__bestaetigung td { display: block; width: auto !important; padding-right: 0 !important; }
}

/* ------------------------------------------------------------ Bewegung */
@media (prefers-reduced-motion: reduce) {
  .anfrage-karte--neu { animation: none; }
  .anfrage-fortschritt__fill,
  .anfrage-option,
  .anfrage-option__marke,
  .anfrage-option__marke::after,
  .anfrage-hilfe__knopf::after { transition: none; }
}

/* ------------------------------------------------------------ Kontaktseite */
/* kontakt.html: Formular als Hauptinhalt, einspaltig, zentriert. */
.anfrage-seite { max-width: 760px; margin-inline: auto; }
.anfrage-seite .res-hero__title { max-width: 18ch; text-wrap: balance; }
.anfrage-seite__lead { margin: 0 0 2.2rem; color: var(--ink-70); font-size: var(--fs-lead, 1.1rem); line-height: 1.6; text-wrap: pretty; }
.anfrage-seite .close__seat { margin-top: 2rem; }