/* ==========================================================================
   Anfrage (Erstgespraech): Kacheln, Fortschritt, letzter Schritt.
   Gilt auf kontakt.html und erstgespraech.html.
   ========================================================================== */

/* Anfrage nach risem Vorbild: grosse Kacheln mit Symbol, ein Tipp fuehrt weiter */
[data-funnel] { scroll-margin-top: 100px; overflow-anchor: none; }
.funnel__bar { gap: 14px; }
.funnel__count { order: 3; min-width: 3.2em; text-align: right; letter-spacing: .04em; color: var(--fg-2); font-size: .85rem; }
.funnel__track { height: 5px; }
.funnel__back {
  flex: none; background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--fg-2); font: inherit; font-size: .9rem; font-weight: 600;
}
.funnel__back::before { content: "\2190\00a0"; }
.funnel__back:hover { color: var(--fg); }
.funnel__back[hidden] { display: none; }
.funnel__q { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.funnel__options--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt--tile span {
  flex-direction: column; justify-content: center; text-align: center; gap: 14px;
  min-height: 150px; padding: 22px 14px; position: relative;
}
.opt--tile span::before { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
.opt--tile span:not(:hover)::before { opacity: .0; }
.opt--tile input:checked + span::before { opacity: 1; }
.opt--tile .opt__ico { width: 44px; height: 44px; color: var(--mint-300); }
.opt--tile b { font-weight: 600; font-size: 1rem; line-height: 1.3; }
@media (max-width: 560px) {
  .opt--tile span { min-height: 132px; }
  .opt--tile .opt__ico { width: 38px; height: 38px; }
  .opt--tile b { font-size: .95rem; }
}
.funnel__step .funnel__q { margin-bottom: 26px; }
.funnel__step .funnel__q + .funnel__hint { margin-top: -16px; margin-bottom: 20px; }

/* Letzter Schritt: Felder mit Symbol, ohne sichtbare Beschriftung */
.field--ico { position: relative; margin-bottom: 12px; }
.field--ico input { padding-left: 52px; }
.field__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--mint-300); pointer-events: none; }
.field__ico--ch { width: 18px; height: 18px; left: 19px; }
.field--ico + .field--check { margin-top: 18px; }
.funnel__back { order: 0; }
.funnel__track { order: 1; }
.funnel .field--check label a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.funnel .field--check label a:hover { color: var(--accent-2); }
/* Ungerade Anzahl Kacheln: die letzte fuellt die ganze Zeile */
.funnel__options--tiles .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }