/* =====================================================================
   elifto.de – Gravity-Forms-Styling (GF 2.8+/2.9, Formular-Theme „Gravity Forms 2.5 Theme“)
   Ziel: Gravity Forms sieht exakt aus wie die Prototyp-Formularstrecke (angebot.html).
   Einbinden NACH elifto.css. Benötigt die Tokens aus elifto.css (:root).
   Setup im Formular:
     – Formular-CSS-Klasse:      elifto-funnel
     – Kachel-Felder (Radio):    CSS-Klasse  elifto-tiles  (+ elifto-tiles--3 / --1 / --row)
                                 und Icon-Set-Klasse, z. B. icons-lifttyp
     – Einwilligungen:           Feldtyp „Einwilligung“ (Consent), CSS-Klasse elifto-consent
     – PLZ-Feld:                 CSS-Klasse elifto-plz
   ===================================================================== */

.elifto-funnel.gform_wrapper,
.gform_wrapper.elifto-funnel_wrapper {
  --gf-ctrl-border-color: var(--c-border-strong);
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--c-text);
}
.elifto-funnel_wrapper .gform_heading { display: none; }

/* ---------- Fortschritt ---------- */
.elifto-funnel_wrapper .gf_progressbar_wrapper { margin-bottom: 1.6rem; }
.elifto-funnel_wrapper .gf_progressbar_title { font-size: var(--fs-small) !important; font-weight: 700; color: var(--c-text-muted); margin-bottom: .5rem; }
.elifto-funnel_wrapper .gf_progressbar { height: 12px; border-radius: 99px; background: var(--c-primary-light) !important; overflow: hidden; padding: 0 !important; }
.elifto-funnel_wrapper .gf_progressbar_percentage { height: 12px !important; border-radius: 99px !important; background: linear-gradient(90deg, var(--c-primary), #13808C) !important; transition: width .35s ease; }
.elifto-funnel_wrapper .gf_progressbar_percentage span { display: none; }

/* ---------- Seitentitel = Frage ---------- */
/* Jede Seite beginnt mit einem HTML-Feld:  <h2 class="step-title">Frage?</h2><p class="step-hint">Hinweis</p> */
.elifto-funnel_wrapper .step-title { font-size: var(--fs-h2); color: var(--c-primary-dark); margin: 0 0 .4rem; line-height: 1.25; }
.elifto-funnel_wrapper .step-hint { color: var(--c-text-muted); margin: 0 0 .4rem; }
.elifto-funnel_wrapper .step-motivation { display: flex; gap: .6rem; align-items: center; background: #E8F5EC; color: #145A2A; font-weight: 700; border-radius: var(--radius); padding: .7rem 1rem; margin: .6rem 0 0; }

/* ---------- Labels & Felder ---------- */
.elifto-funnel_wrapper .gfield_label,
.elifto-funnel_wrapper .gform-field-label--type-sub { font-weight: 700 !important; font-size: 1.1rem !important; color: var(--c-text) !important; margin-bottom: .4rem !important; }
.elifto-funnel_wrapper .gfield_required { color: var(--c-error) !important; }
.elifto-funnel_wrapper .gfield_description { font-size: var(--fs-small) !important; color: var(--c-text-muted) !important; padding-top: .3rem !important; }
.elifto-funnel_wrapper input[type=text],
.elifto-funnel_wrapper input[type=tel],
.elifto-funnel_wrapper input[type=email],
.elifto-funnel_wrapper input[type=number],
.elifto-funnel_wrapper select,
.elifto-funnel_wrapper textarea {
  min-height: 58px !important; padding: .8rem 1rem !important; border: 2px solid var(--c-border-strong) !important; border-radius: 12px !important;
  font: 400 1.1875rem var(--font-body) !important; color: var(--c-text) !important; background: #fff !important; box-shadow: none !important;
}
.elifto-funnel_wrapper textarea { min-height: 120px !important; }
.elifto-funnel_wrapper input:focus, .elifto-funnel_wrapper select:focus, .elifto-funnel_wrapper textarea:focus { outline: 3px solid var(--c-focus) !important; outline-offset: 1px; border-color: var(--c-focus) !important; }
.elifto-funnel_wrapper .elifto-plz input { max-width: 220px; font-size: 1.5rem !important; letter-spacing: .12em; text-align: center; }

/* ---------- Kachel-Auswahl (Radio-Felder mit Klasse elifto-tiles) ---------- */
.elifto-funnel_wrapper .elifto-tiles .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Frage steht im HTML-Feld darüber */
.elifto-funnel_wrapper .elifto-tiles .gfield_radio { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: .9rem !important; }
.elifto-funnel_wrapper .elifto-tiles--3 .gfield_radio { grid-template-columns: repeat(3, 1fr); }
.elifto-funnel_wrapper .elifto-tiles--1 .gfield_radio { grid-template-columns: 1fr; }
@media (max-width: 560px) { .elifto-funnel_wrapper .elifto-tiles .gfield_radio { grid-template-columns: 1fr; } }
.elifto-funnel_wrapper .elifto-tiles .gchoice { position: relative; margin: 0 !important; display: block !important; }
.elifto-funnel_wrapper .elifto-tiles .gchoice input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; margin: 0 !important; cursor: pointer; z-index: 2; }
.elifto-funnel_wrapper .elifto-tiles .gchoice label {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; max-width: none !important;
  min-height: 132px; padding: 1.1rem .9rem !important; margin: 0 !important; border-radius: var(--radius); border: 2px solid var(--c-border); background: #fff;
  font: 700 1.125rem/1.25 var(--font-body) !important; text-align: center; color: var(--c-text) !important; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.elifto-funnel_wrapper .elifto-tiles--row .gchoice label { flex-direction: row; justify-content: flex-start; min-height: 72px; text-align: left; gap: 1rem; padding: .9rem 1.2rem !important; }
.elifto-funnel_wrapper .elifto-tiles .gchoice:hover label { border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.elifto-funnel_wrapper .elifto-tiles .gchoice input:checked + label { border-color: var(--c-primary); background: var(--c-primary-light); box-shadow: inset 0 0 0 2px var(--c-primary); }
.elifto-funnel_wrapper .elifto-tiles .gchoice input:checked + label::after { content: "✓"; position: absolute; top: .5rem; right: .7rem; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.elifto-funnel_wrapper .elifto-tiles .gchoice input:focus-visible + label { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/* Unterzeile in der Kachel: Choice-Label „Sitzlift|Sie fahren sitzend“ wird per gf-elifto.js in <small> umgewandelt */
.elifto-funnel_wrapper .elifto-tiles .gchoice label small { font-weight: 400; font-size: 1rem; color: var(--c-text-muted); display: block; }

/* Icons: eigener Satz im Stil der personenaufzuege-Strecke (tools/formular-icons.py): feine Petrol-Linie,
   ein Orange-Akzent, zart getönter Kreis dahinter. Farben stehen in den SVGs, daher Hintergrundbild statt Maske. */
.elifto-funnel_wrapper .elifto-tiles .gchoice label::before {
  content: ""; width: 72px; height: 72px; flex: none; border-radius: 50%;
  background: var(--ico) center / 46px no-repeat, radial-gradient(120% 120% at 30% 20%, #fff 0%, #EEF6F6 55%, #DCEBEC 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 90, 99, .08), 0 6px 14px -10px rgba(9, 62, 69, .45);
  transition: transform .15s;
}
.elifto-funnel_wrapper .elifto-tiles--row .gchoice label::before { width: 56px; height: 56px; background-size: 36px, auto; }
.elifto-funnel_wrapper .elifto-tiles .gchoice:hover label::before { transform: scale(1.04); }
.elifto-funnel_wrapper .elifto-tiles .gchoice input:checked + label::before { background: var(--ico) center / 46px no-repeat, #fff; }
.elifto-funnel_wrapper .elifto-tiles--row .gchoice input:checked + label::before { background-size: 36px, auto; }
/* Zuordnung Antwort -> Icon (Reihenfolge = Reihenfolge der Auswahlmöglichkeiten) */
.icons-lifttyp .gchoice:nth-child(1) { --ico: url(../icons/formular/sitzlift.svg); }
.icons-lifttyp .gchoice:nth-child(2) { --ico: url(../icons/formular/plattformlift.svg); }
.icons-lifttyp .gchoice:nth-child(3) { --ico: url(../icons/formular/hublift.svg); }
.icons-lifttyp .gchoice:nth-child(4) { --ico: url(../icons/formular/unklar.svg); }
.icons-ort .gchoice:nth-child(1) { --ico: url(../icons/formular/innen.svg); }
.icons-ort .gchoice:nth-child(2) { --ico: url(../icons/formular/aussen.svg); }
.icons-ort .gchoice:nth-child(3) { --ico: url(../icons/formular/beides.svg); }
.icons-treppe .gchoice:nth-child(1) { --ico: url(../icons/formular/gerade.svg); }
.icons-treppe .gchoice:nth-child(2) { --ico: url(../icons/formular/kurvig.svg); }
.icons-treppe .gchoice:nth-child(3) { --ico: url(../icons/formular/wendel.svg); }
.icons-treppe .gchoice:nth-child(4) { --ico: url(../icons/formular/unklar.svg); }
.icons-etagen .gchoice:nth-child(1) { --ico: url(../icons/formular/etage-eine.svg); }
.icons-etagen .gchoice:nth-child(2) { --ico: url(../icons/formular/etage-zwei.svg); }
.icons-etagen .gchoice:nth-child(3) { --ico: url(../icons/formular/etage-mehr.svg); }
.icons-etagen .gchoice:nth-child(4) { --ico: url(../icons/formular/stufen.svg); }
.icons-zuhause .gchoice:nth-child(1) { --ico: url(../icons/formular/zuhause.svg); }
.icons-zuhause .gchoice:nth-child(2) { --ico: url(../icons/formular/angehoerige.svg); }
.icons-zuhause .gchoice:nth-child(3) { --ico: url(../icons/formular/anderes.svg); }
.icons-zuschuss .gchoice:nth-child(1) { --ico: url(../icons/formular/zuschuss-ja.svg); }
.icons-zuschuss .gchoice:nth-child(2) { --ico: url(../icons/formular/zuschuss-nein.svg); }
.icons-zuschuss .gchoice:nth-child(3) { --ico: url(../icons/formular/zuschuss-offen.svg); }
.icons-zeitpunkt .gchoice:nth-child(1) { --ico: url(../icons/formular/zeit-sofort.svg); }
.icons-zeitpunkt .gchoice:nth-child(2) { --ico: url(../icons/formular/zeit-bald.svg); }
.icons-zeitpunkt .gchoice:nth-child(3) { --ico: url(../icons/formular/zeit-mittel.svg); }
.icons-zeitpunkt .gchoice:nth-child(4) { --ico: url(../icons/formular/zeit-info.svg); }
.icons-eigentum .gchoice:nth-child(1) { --ico: url(../icons/formular/eigentum.svg); }
.icons-eigentum .gchoice:nth-child(2) { --ico: url(../icons/formular/miete.svg); }
.icons-eigentum .gchoice:nth-child(3) { --ico: url(../icons/formular/sonstiges.svg); }
.icons-none .gchoice label::before { display: none; }
.icons-none .gchoice label { min-height: 58px; }

/* ---------- Einwilligungen ---------- */
.elifto-funnel_wrapper .elifto-consent .ginput_container_consent { display: grid; grid-template-columns: 32px 1fr; gap: .8rem; align-items: start; background: #F8F5EF; border-radius: var(--radius); padding: 1rem 1.1rem; font-size: 1.0625rem; }
.elifto-funnel_wrapper .elifto-consent input[type=checkbox] { width: 28px !important; height: 28px !important; margin: .1rem 0 0 !important; accent-color: var(--c-primary); }
.elifto-funnel_wrapper .elifto-consent .gfield_consent_label { font-weight: 400 !important; font-size: 1.0625rem !important; }
/* Feld-Label nur für Screenreader; Pflicht-Sternchen an den Einwilligungstext hängen */
.elifto-funnel_wrapper .elifto-consent .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.elifto-funnel_wrapper .elifto-consent.gfield_contains_required .gfield_consent_label::after { content: " *"; color: var(--c-error); font-weight: 700; }

/* ---------- Buttons ---------- */
.elifto-funnel_wrapper .gform_page_footer, .elifto-funnel_wrapper .gform_footer { display: flex !important; flex-direction: row; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.8rem !important; padding: 0 !important; border: 0 !important; }
.elifto-funnel_wrapper .gform_next_button, .elifto-funnel_wrapper .gform_button {
  min-height: 56px !important; padding: .8rem 1.8rem !important; border-radius: 999px !important; border: 0 !important;
  font: 700 1.15rem var(--font-body) !important; cursor: pointer; color: #fff !important;
}
.elifto-funnel_wrapper .gform_next_button { background: var(--c-primary) !important; }
.elifto-funnel_wrapper .gform_next_button:hover { background: var(--c-primary-dark) !important; }
.elifto-funnel_wrapper .gform_button { background: var(--c-cta) !important; width: 100%; min-height: 60px !important; font-size: 1.25rem !important; box-shadow: 0 4px 14px rgba(196, 82, 10, .3); }
.elifto-funnel_wrapper .gform_button:hover { background: var(--c-cta-hover) !important; }
.elifto-funnel_wrapper .gform_previous_button { margin-right: auto !important; order: -1; background: none !important; border: 0 !important; color: var(--c-primary) !important; font: 700 1.0625rem var(--font-body) !important; text-decoration: underline; text-underline-offset: .2em; min-height: 52px; padding: 0 .4rem !important; cursor: pointer; }
.elifto-funnel_wrapper .gform_footer { flex-direction: column; align-items: stretch; }

/* ---------- Fehler ---------- */
.elifto-funnel_wrapper .gform_validation_errors { border-radius: var(--radius) !important; border: 2px solid var(--c-error) !important; background: #FFF6F5 !important; box-shadow: none !important; }
.elifto-funnel_wrapper .gform_validation_errors h2 { font-size: 1.1rem !important; color: var(--c-error) !important; }
.elifto-funnel_wrapper .gfield_error input, .elifto-funnel_wrapper .gfield_error select { border-color: var(--c-error) !important; background: #FFF6F5 !important; }
.elifto-funnel_wrapper .validation_message { color: var(--c-error) !important; font-weight: 700; font-size: var(--fs-small) !important; background: none !important; border: 0 !important; padding: .35rem 0 0 !important; }

/* Ladeanimation (AJAX) */
.elifto-funnel_wrapper .gform-loader { border-top-color: var(--c-primary) !important; }

/* Nachgezogen für Gravity Forms 3.2 */
.elifto-funnel_wrapper .step-title { font-weight: 700; }
.elifto-funnel_wrapper .gf_progressbar_title { opacity: 1 !important; color: var(--c-text-muted) !important; }
.elifto-funnel_wrapper .elifto-tiles .gfield_radio, .elifto-funnel_wrapper .elifto-tiles .ginput_container { width: 100%; max-width: none; }
.elifto-funnel_wrapper .elifto-tiles .gchoice { width: 100%; max-width: none; }

/* Alle Kacheln einer Frage gleich groß, auch mit Unterzeile */
.elifto-funnel_wrapper .elifto-tiles .gfield_radio { grid-auto-rows: 1fr; align-items: stretch; }
.elifto-funnel_wrapper .elifto-tiles .gchoice { display: flex !important; height: 100%; }
.elifto-funnel_wrapper .elifto-tiles .gchoice label { width: 100%; height: 100%; max-width: none; margin: 0; box-sizing: border-box; }
.elifto-funnel_wrapper .elifto-tiles:not(.elifto-tiles--row) .gchoice label { min-height: 156px; }

/* Prozentangabe wie im Prototyp rechts über dem Balken, im 12 px hohen Balken würde sie abgeschnitten */
.elifto-funnel_wrapper .gf_progressbar_wrapper { position: relative; }
.elifto-funnel_wrapper .gf_progressbar, .elifto-funnel_wrapper .gf_progressbar_percentage { position: static !important; }
.elifto-funnel_wrapper .gf_progressbar_percentage span {
  display: block !important; position: absolute !important; top: 0; right: 0; width: auto !important; margin: 0 !important; padding: 0 !important;
  font: 700 var(--fs-small)/1.65 var(--font-body) !important; color: var(--c-text-muted) !important; white-space: nowrap;
}
.elifto-funnel_wrapper .gf_progressbar_percentage span::after { content: " geschafft"; }

/* ---------- Schrittwechsel: neue Frage schiebt sich herein (gf-elifto.js, Punkt 5) ---------- */
.elifto-funnel_wrapper .gform_body { overflow-x: clip; }
.elifto-funnel_wrapper .gform_page.el-raus-links { animation: el-raus-links .17s ease-in forwards; }
.elifto-funnel_wrapper .gform_page.el-raus-rechts { animation: el-raus-rechts .17s ease-in forwards; }
.elifto-funnel_wrapper .gform_page.el-rein-rechts { animation: el-rein-rechts .4s cubic-bezier(.22, .8, .3, 1) both; }
.elifto-funnel_wrapper .gform_page.el-rein-links { animation: el-rein-links .4s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes el-raus-links { to { opacity: 0; transform: translateX(-48px); } }
@keyframes el-raus-rechts { to { opacity: 0; transform: translateX(48px); } }
@keyframes el-rein-rechts { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: none; } }
@keyframes el-rein-links { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .elifto-funnel_wrapper .gform_page { animation: none !important; } }

/* ---------- Handy (02.11.2026) ---------- */
/* Gravity setzt Feldgrößen „klein/mittel“ (25 %/75 %): bei uns füllen alle Felder die Breite, die PLZ bis 220 px */
.elifto-funnel_wrapper .ginput_container input:not([type=radio]):not([type=checkbox]),
.elifto-funnel_wrapper .ginput_container textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.elifto-funnel_wrapper .elifto-plz input { max-width: 220px !important; }
/* Zeichenzähler von Gravity („0 of 5 max characters“) ist englisch und überflüssig, die Begrenzung bleibt */
.elifto-funnel_wrapper .ginput_counter { display: none !important; }
.elifto-funnel_wrapper .step-motivation + .step-title, .elifto-funnel_wrapper .step-motivation + * .step-title { margin-top: 1.1rem; }
@media (max-width: 560px) {
  /* Kacheln quer: Icon links, Text daneben – so passen vier Antworten und „Weiter“ auf einen Bildschirm */
  .elifto-funnel_wrapper .elifto-tiles:not(.elifto-tiles--row) .gchoice label {
    display: grid !important; grid-template-columns: 60px 1fr; column-gap: 1rem; row-gap: .1rem; align-content: center;
    text-align: left; min-height: 84px; padding: .75rem 1rem !important;
  }
  .elifto-funnel_wrapper .elifto-tiles:not(.elifto-tiles--row) .gchoice label::before { grid-row: 1 / span 2; width: 60px; height: 60px; background-size: 40px, auto; }
  .elifto-funnel_wrapper .elifto-tiles:not(.elifto-tiles--row) .gchoice input:checked + label::before { background-size: 40px, auto; }
  .elifto-funnel_wrapper .elifto-tiles .gfield_radio { gap: .6rem !important; }
  .elifto-funnel_wrapper .elifto-tiles .gchoice:hover label { transform: none; }
  /* Anrede: drei kurze Wörter nebeneinander statt drei Zeilen untereinander */
  .elifto-funnel_wrapper .elifto-tiles--3.icons-none .gfield_radio { grid-template-columns: repeat(3, 1fr); gap: .5rem !important; }
  .elifto-funnel_wrapper .elifto-tiles--3.icons-none .gchoice label { justify-content: center; text-align: center; padding: .6rem .3rem !important; min-height: 58px; font-size: 1rem !important; }
  .elifto-funnel_wrapper .elifto-tiles--3.icons-none .gchoice input:checked + label::after { top: -.5rem; right: -.4rem; width: 24px; height: 24px; font-size: .85rem; }
  .elifto-funnel_wrapper .gf_progressbar_wrapper { margin-bottom: 1.1rem; }
}