/* =========================================================================
   seite-offerte.css  --  Anfrage (views/offerte.ejs, formular-p1 und
   Ticket-Bild t8-e1-1) und Danke-Seite (views/danke.ejs, formular-p2).
   Nur Tokens aus theme.css; Komponenten (.wahl, .fortschritt, .schritt,
   .erfolg, .ablauf, .foto-fuss) kommen aus styles.css.
   Wie in den Entwuerfen fuellt ein Schritt den Bildschirm: Kopf, Frage,
   Antworten, unten die Landschaft mit «Zurueck» (und «Weiter») darauf; der
   Footer folgt darunter. Ab 48rem dieselbe Spalte mittig (36rem), die
   Landschaft bleibt bis an die Kanten.
   ========================================================================= */

/* ---------- Flaeche: Weiss bis Himmel, unten die Landschaft --------------- */
.anfrage, .danke { --spalte: 36rem; --fuss-grund: var(--himmel); display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.anfrage { background: linear-gradient(180deg, var(--bg) 0, var(--bg) 6rem, var(--himmel) calc(100% - 20rem), var(--himmel) 100%); }
.danke__flaeche { flex: 1 0 auto; background: linear-gradient(180deg, var(--bg) 0, var(--bg) 8rem, var(--himmel) 100%); }
.anfrage__page, .danke__page { max-width: calc(var(--spalte) + 2 * var(--gutter)); }
/* Formular ueber der Landschaft (z-index), ohne eigenen Grund: das Bild scheint unter Zurueck und Weiter durch */
.anfrage__form { position: relative; z-index: 2; flex: 1 0 auto; display: flex; flex-direction: column; }
.anfrage__page { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 1.25rem; }
.anfrage__fuss, .danke__fuss { flex: none; height: clamp(12rem, 56vw, 20rem); margin-top: -8rem; }
.anfrage__fuss img { object-position: 50% 64%; }
.danke__fuss { margin-top: -2rem; }
.danke__fuss img { object-position: 50% 55%; }

/* ---------- Kopf: Logo, Schliessen-X; in Schritt 7 und 8 mit Zurueck-Pfeil -- */
.anfrage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.anfrage__kopf .brand__logo { height: 1.75rem; }
@media (min-width: 64rem) { .anfrage__kopf { min-height: 4.75rem; } .anfrage__kopf .brand__logo { height: 2.125rem; } }
.anfrage__zurueck {
  display: none; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -0.25rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--mint); color: var(--marine); cursor: pointer;
}
.anfrage__zurueck .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
@media (hover: hover) { .anfrage__zurueck:hover { background: var(--mint-2); } }
.funnel.is-live [data-jetzt="7"] .anfrage__kopf,
.funnel.is-live [data-jetzt="8"] .anfrage__kopf { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
.funnel.is-live [data-jetzt="7"] .anfrage__zurueck,
.funnel.is-live [data-jetzt="8"] .anfrage__zurueck { display: inline-grid; }
.funnel.is-live [data-jetzt="7"] .anfrage__kopf .brand,
.funnel.is-live [data-jetzt="8"] .anfrage__kopf .brand { justify-self: center; }

/* ---------- Fortschritt: Balken und «Schritt 1 von 8» in einer Zeile -------- */
.anfrage .fortschritt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.anfrage .fortschritt__balken { height: 0.5rem; }
.anfrage .fortschritt__text { font-size: 0.8125rem; white-space: nowrap; }
html:not(.js) .anfrage .fortschritt { display: none; }
html:not(.js) .anfrage fieldset.schritt:first-of-type { margin-top: 1.5rem; }
.anfrage__alert { margin-bottom: 1.5rem; }

/* ---------- Schritte ------------------------------------------------------ */
/* bis main.js laeuft nur der erste Schritt (kein Aufblitzen aller acht) */
html.js .funnel:not(.is-live) .schritt + .schritt { display: none; }
/* der aktive Schritt fuellt die Hoehe, Zurueck und Weiter stehen unten auf der Landschaft:
   absolut zur Spalte, weil ein fieldset seinen Inhalt weder als Flex-Spalte streckt noch
   Bezug fuer absolute Kinder ist (anonyme Inhaltsbox in Chrome) */
.anfrage__page { position: relative; }
.anfrage.is-live .schritt.is-now { flex: 1 0 auto; }
.anfrage.is-live .schritt--mit-nav.is-now { padding-bottom: 5.25rem; }
/* ohne Knoepfe unten (Schritte 1, 7, 8): Abstand, damit kein Text auf dem Bild liegt */
.anfrage.is-live .schritt.is-now:not(.schritt--mit-nav) { padding-bottom: 5rem; }
.anfrage.is-live .schritt__nav { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.25rem; margin: 0; padding: 0; }
.anfrage .schritt__legend { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.schritt__titel { font: inherit; letter-spacing: inherit; color: inherit; }
.anfrage .schritt__hint { margin-top: 0.625rem; font-size: var(--fs-lead); line-height: 1.45; }

/* Auswahl: Linien-Icon ohne Kachel wie die Bilder der Entwuerfe (das versteckte Radio: styles.css) */
.anfrage .wahl__bild { width: 3rem; height: 3rem; background: none; }
.anfrage .wahl__bild .icon { width: 2.375rem; height: 2.375rem; stroke-width: 1.5; }
.anfrage .wahl__item--text { min-height: 5.5rem; }
/* Schritt 1: zwei grosse Karten wie im Entwurf */
.anfrage .schritt[data-step="1"] .wahl__item { min-height: 7rem; }
.anfrage .schritt[data-step="1"] .wahl__bild { width: 4rem; height: 4rem; }
.anfrage .schritt[data-step="1"] .wahl__bild .icon { width: 3.25rem; height: 3.25rem; stroke-width: 1.25; }

/* Zurueck (und Weiter) unten auf der Landschaft; Zurueck links wie im Entwurf */
.anfrage .schritt__nav { z-index: 2; justify-content: flex-start; }
.anfrage .schritt__nav > .knopf { min-width: 9rem; }
.anfrage .schritt__nav > :only-child { margin-left: 0; }
.anfrage .schritt__nav--zwei > .knopf { flex: 1 1 0; }
.anfrage .knopf--weiss .icon { color: var(--marine); }
.funnel:not(.is-live) .schritt__nav { display: none; }

/* Schritt 6: Haken im Feld, sobald es gueltig gefuellt ist; Hinweis mit Ortsmarke */
.feld-haken { position: relative; }
.feld-haken > input { padding-right: 3rem; }
.feld-haken > .icon {
  position: absolute; right: 0.875rem; top: 50%; translate: 0 -50%;
  width: 1.375rem; height: 1.375rem; color: var(--gruen); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.feld-haken > input:valid:not(:placeholder-shown) + .icon { opacity: 1; }
.anfrage__info { margin-top: 1.25rem; padding: 1rem 1.25rem; gap: 1rem; }
.anfrage__info > .icon { width: 2rem; height: 2rem; color: var(--gruen); }
.anfrage__info p { color: var(--text); font-size: 0.9375rem; line-height: 1.5; }

/* Schritt 8 */
.anfrage__senden { margin-top: 1.5rem; }
.anfrage .form-klein { position: relative; z-index: 2; margin-top: 0.875rem; font-size: 0.8125rem; }

/* ---------- Schritt 7: Pruefung (Ticket-Bild t8-e1-1) ---------------------- */
.pruefung { margin-top: 1.25rem; }
/* Bild im blassen Kreis: Karte Zuerich und Thurgau mit Pin, danach Icons */
.pruefung__bild { position: relative; display: grid; place-items: center; height: 13.5rem; }
.pruefung__bild::before { content: ''; position: absolute; width: 12.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--himmel); }
.pruefung__bild > * { position: relative; grid-area: 1 / 1; }
.pruefung__karte .karte-ch svg { width: auto; max-width: 100%; height: 11.75rem; margin-inline: auto; }
.pruefung__karte .karte-ch__quelle { text-align: center; }
.pruefung__icon { display: grid; place-items: center; width: 9rem; height: 9rem; border-radius: 50%; background: #fff; box-shadow: var(--schatten); color: var(--gruen); }
.pruefung__icon .icon { width: 4rem; height: 4rem; stroke-width: 1.4; }
/* Statuskarte: Ring oder Haken, Titel, Text, Balken */
.pruefung__karte-status { margin-top: 1rem; padding: 1rem 1.125rem 1.125rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
.pruefung__liste { margin: 0; padding: 0; list-style: none; }
.pruefung__status { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.125rem 1rem; align-items: start; align-content: start; min-height: 4.25rem; }
.pruefung__zeichen { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.pruefung__zeichen svg { width: 100%; height: 100%; }
.pruefung__ring, .pruefung__bogen { fill: none; stroke-width: 5; }
.pruefung__ring { stroke: var(--mint-2); }
.pruefung__bogen { stroke: var(--gruen); stroke-linecap: round; stroke-dasharray: 28 72; }
.pruefung__zeichen--laeuft svg { animation: pruefung-dreht 0.9s linear infinite; }
@keyframes pruefung-dreht { to { transform: rotate(360deg); } }
.pruefung__zeichen--ok { background: var(--gruen); color: #fff; }
.pruefung__zeichen--ok .icon { width: 1.375rem; height: 1.375rem; stroke-width: 3; }
.pruefung__zeichen--info { background: var(--mint); color: var(--gruen-dunkel); }
.pruefung__zeichen--info .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }
.pruefung__titel { color: var(--marine); font: 700 1rem/1.3 var(--font-titel); }
.pruefung__text { color: var(--text); font-size: var(--fs-klein); line-height: 1.45; }
.pruefung__balken { display: block; height: 0.375rem; margin-top: 0.875rem; overflow: hidden; border-radius: var(--r-rund); background: var(--linie); }
.pruefung__balken i { display: block; height: 100%; border-radius: inherit; background: var(--gruen); transform-origin: left center; transform: scaleX(var(--anteil, 0.15)); transition: transform 400ms var(--ease); }
.pruefung__punkte { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pruefung__punkte li { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--mint-2); }
.pruefung__punkte li.is-jetzt { background: var(--gruen); }
.pruefung__pin { animation: pruefung-pin 300ms var(--ease) both; }
@keyframes pruefung-pin { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pruefung__zeichen--laeuft svg, .pruefung__pin { animation: none; }
}
@media (min-width: 48rem) {
  .pruefung__bild { height: 15rem; }
  .pruefung__bild::before { width: 14rem; }
  .pruefung__karte .karte-ch svg { height: 13rem; }
}

/* ---------- Danke-Seite (formular-p2) ------------------------------------- */
.danke__page { padding-bottom: 2.25rem; text-align: center; }
/* Groesse von Haken und Titel: styles.css (gleich auf allen Danke-Seiten) */
.danke .erfolg { margin-top: 1rem; }
.danke__titel { margin-top: 1.75rem; }
.danke__lead { margin-inline: auto; }
.danke__karte { margin-top: 1.75rem; text-align: left; }
.danke .ablauf__item { grid-template-columns: 2rem 1.75rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.875rem; }
.danke .ablauf__item:last-child { padding-bottom: 0.25rem; }
.danke .ablauf__nr { width: 2rem; height: 2rem; }
.danke .ablauf__item > .icon { width: 1.625rem; height: 1.625rem; }
.danke .ablauf__text { padding-left: 0.875rem; font-size: var(--fs-klein); }
@media (min-width: 30rem) { .danke .ablauf__text { font-size: var(--fs-text); } }
.danke__zurueck { position: relative; z-index: 2; margin-top: 1.5rem; }