/* ==========================================================================
   Formular-Hero „wie bei Vali“ (Hero-Typ F)
   Die Formular-Logik (.lead-form, .schritt, .pick in app.js) bleibt unverändert,
   hier wird nur angeordnet und umgestaltet. Klassen mit Präfix hf-.
   Aufbau: Grundwerte = Desktop, darunter je Breakpoint ein Block (nur max-width).
   Breakpoints: 1180 (ab hier passen 6 Kacheln nebeneinander) · 980 · 900
   (Handy-Leiste) · 620 · 400.
   ========================================================================== */
.hf{--hf-signal:#A7B0BD;--hf-wa:#1a9e4f;--hf-rand:#dde1e6;
  padding:0;overflow:visible;background:#fff;color:#fff}

/* Bühne: dunkler Markenverlauf mit zwei kühlen Lichtpunkten, kein Foto.
   Der helle Schein rechts hebt das schwarze Fahrzeug vom Grund ab. */
.hf__buehne{position:relative;overflow:hidden;padding-top:calc(82px + .6rem);
  background:
    radial-gradient(48% 70% at 74% 62%,rgba(167,176,189,.34) 0%,rgba(167,176,189,.12) 42%,rgba(167,176,189,0) 72%),
    radial-gradient(40% 60% at 100% 0,rgba(167,176,189,.12) 0%,rgba(167,176,189,0) 70%),
    linear-gradient(112deg,#07090c 0%,#0E1116 42%,#2a3240 100%)}
.hf__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:1.5rem}
.hf__text{position:relative;z-index:2;align-self:center;padding-bottom:6.6rem}

/* H1 = kleine Kicker-Zeile (Keyword + Ort aus der Anzeige) */
.hf h1{font:600 .9375rem/1.45 var(--f-b);color:var(--acc-3);letter-spacing:.01em;margin:0 0 .6rem}
.hf__titel{font:800 clamp(2.6rem,3.5vw,3.35rem)/.98 var(--f-d);text-transform:uppercase;
  letter-spacing:-.008em;color:#fff;margin:0;text-wrap:balance}
.hf__titel span{display:block;color:var(--hf-signal)}
.hf__lead{margin:1.1rem 0 0;font-size:1.0625rem;line-height:1.45;color:rgba(255,255,255,.8);max-width:31rem}
.hf__punkte{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.35rem}
.hf__punkte li{display:flex;align-items:center;gap:.55rem;font-size:.9375rem;font-weight:600;line-height:1.3;color:#fff}
.hf__punkte svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:var(--hf-signal);color:#0E1116}
.hf .hf__sterne{margin-top:.85rem;font-size:.875rem}

/* Visual: Freisteller, sitzt auf dem Bogen */
.hf__visual{position:relative;z-index:1;margin:0 0 56px;width:92%;justify-self:end}
.hf__visual img{display:block;width:100%;height:auto}
/* Kennzeichnung des KI-Bildes, klein, aber lesbar; oben, weil der Bogen die Unterkante überdeckt */
.hf__ki{position:absolute;right:0;top:0;padding:.15rem .45rem;border-radius:4px;
  background:rgba(7,9,12,.62);font:500 .6875rem/1.3 var(--f-b);color:rgba(255,255,255,.86);letter-spacing:.01em}

/* Bogen mit Signallinie, überlappt die Bühne, danach weiße Formularfläche */
.hf__formular{position:relative;z-index:3;margin-top:-118px;color:var(--txt)}
.hf__bogen{display:block;width:100%;height:90px;filter:drop-shadow(0 -10px 18px rgba(7,9,12,.30))}
.hf__weiss{position:relative;background:#fff;margin-top:-1px;padding:.4rem 0 2.2rem}
.hf__raster{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-areas:"kopf form";column-gap:2.6rem;align-items:start}
.hf__kopf{grid-area:kopf;display:flex;flex-direction:column}
.hf__qf{grid-area:form;min-width:0}
.hf__ftitel{margin:0;font:800 1.7rem/1 var(--f-d);text-transform:uppercase;letter-spacing:-.005em;color:var(--txt);white-space:nowrap}
.hf__unter{display:flex;align-items:center;gap:.4rem;margin:.4rem 0 0;font-size:.9375rem;font-weight:600;color:var(--txt-2)}
.hf__unter svg{width:16px;height:16px;flex:none;color:var(--gut)}

/* WhatsApp-Weg direkt am Formular */
.hf__wa{display:flex;align-items:center;justify-content:flex-start;gap:.45rem;margin-top:1.2rem;padding:.8rem .75rem;white-space:nowrap;
  border:1.5px solid rgba(26,158,79,.35);border-radius:8px;background:rgba(26,158,79,.06);
  font-size:.875rem;font-weight:700;color:#137a3c;transition:background .2s var(--ease),border-color .2s var(--ease)}
.hf__wa svg{width:22px;height:22px;flex:none;color:var(--hf-wa)}
.hf__wa:hover{background:rgba(26,158,79,.12);border-color:var(--hf-wa)}
.hf__kopf .hf__wa{order:3}

/* Formular ohne Kartenoptik: eigener Kopf links ersetzt Kopf und Störer der Karte */
.hf .karte-form{background:none;box-shadow:none;border-radius:0;padding:0;max-width:none;margin:0}
.hf .form__kopf,.hf .stoerer{display:none}
.hf .fortschritt{margin:.4rem 0 .6rem}
/* Fortschritt in 4 Segmenten, app.js schaltet .is-an */
.fortschritt__seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:.45rem}
.fortschritt__seg i{display:block;height:6px;border-radius:3px;background:#E6E9ED;transition:background .3s var(--ease)}
.fortschritt__seg i.is-an{background:var(--acc,#0E1116)}
.hf .schritt__f{font-size:1.0625rem;font-weight:700;margin-bottom:.6rem}
.hf .picks{grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.hf .pick{min-height:124px;justify-content:flex-start;padding:.7rem .5rem .6rem;border-radius:8px;border-color:var(--hf-rand)}
.hf .pick__ill{max-width:none;width:auto}
.hf__ico{display:block;width:64px;height:64px;margin-inline:auto;object-fit:contain;transition:transform .3s var(--ease)}
.hf .pick:hover .hf__ico{transform:scale(1.05)}
.hf .pick__t{font-size:.9375rem;font-weight:700}
/* Schritte 2 und 3: Text-Kacheln, ein Tippen führt weiter */
.hf .picks--dauer{grid-template-columns:repeat(4,minmax(0,1fr))}
.hf .picks--anlass{grid-template-columns:repeat(3,minmax(0,1fr))}
.hf .pick--txt{min-height:64px;justify-content:center;padding:.8rem .6rem}
.hf .feld input,.hf .feld textarea{font-size:16px}
.hf .feld input{min-height:56px}
/* Fehler direkt am Feld */
.lead-form [aria-invalid="true"],.lead-form [aria-invalid="true"]:focus{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
/* Datenschutz-Hinweis statt Pflicht-Checkbox */
.f-hinweis{margin:.6rem 0 0;font-size:.79rem;line-height:1.5;color:var(--txt-2)}
.f-hinweis a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}

/* Kachel-Schritte brauchen keinen Weiter-Knopf: Tippen führt weiter */
.hf .schritt[data-schritt="1"].is-an ~ .form__nav .weiter,
.hf .schritt[data-schritt="2"].is-an ~ .form__nav .weiter,
.hf .schritt[data-schritt="3"].is-an ~ .form__nav .weiter{display:none!important}
.hf .schritt[data-schritt="1"].is-an ~ .form__nav{display:none}

/* Handy: feste Leiste unten, links Anrufen (breiter), rechts WhatsApp */
.hf-leiste{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  box-shadow:0 -6px 24px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom);background:#0E1116}
.hf-leiste a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;font:700 1rem/1 var(--f-b);color:#fff;white-space:nowrap}
.hf-leiste svg{width:20px;height:20px;flex:none}
.hf-leiste__tel{background:#0E1116}
.hf-leiste__wa{background:var(--hf-wa)}

/* Honeypot: für Menschen unsichtbar, nicht per display:none (Bots füllen sonst nicht) */
.hp-feld{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Quelle der Bewertungen */
.bew-quelle{margin:.6rem 0 0;font-size:.875rem;color:var(--txt-2)}

/* Bestand: Tab-Bild wuchs über aspect-ratio + min-height:100 % in die Breite
   (bis 224 px Querscrollen bei 1000–1400 px); Tab-Knöpfe 44 px Tippfläche */
.tabp>*{min-width:0}
.tabp__bild{aspect-ratio:auto;height:100%;min-height:340px;min-width:0}
.tabs__k{min-height:44px}
/* Zertifikats-Punkte: Tippfläche 44 px hoch, ohne Überlappung */
.zert__punkt{position:relative}
.zert__punkt::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}

/* Bestand, Kontrast (Messlauf R2): Chat-Uhrzeiten und Fußnote Referenzen auf ≥ 4,5:1 */
.blase__zeit{color:#3A444C}
.faelle__fuss{color:#3F4652}

/* ---------- unter 1180 px: 3 Kacheln je Reihe ---------- */
@media (max-width:1180px){
  .hf .picks{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Tablet und Handy ---------- */
@media (max-width:980px){
  /* Kopfleiste mobil 56–64 px, Rufnummer sichtbar */
  .kopfleiste,.kopfleiste.is-fest{padding:.35rem 0}
  .marke img,.kopfleiste.is-fest .marke img{height:44px}
  .kopf-mob a{width:44px;height:44px}
  .kopf-mob .m-tel{width:auto;padding:0 .8rem;gap:.4rem;display:flex;align-items:center;font:700 .875rem/1 var(--f-b);white-space:nowrap}

  .hf__buehne{padding-top:calc(56px + 1.2rem)}
  .hf__in{grid-template-columns:minmax(0,1fr);gap:0}
  .hf__text{align-self:auto;padding-bottom:0}
  .hf h1{font-size:.8125rem}
  .hf__titel{font-size:clamp(2.05rem,8.6vw,2.75rem)}
  .hf__lead{font-size:1rem;margin-top:.7rem}
  .hf__punkte{margin-top:.8rem}
  .hf__visual{margin:30px 0 0 auto;width:78%;justify-self:auto}
  .hf__formular{margin-top:-52px}
  .hf__bogen{height:44px}
  .hf__weiss{padding:.2rem 0 1.4rem}
  /* WhatsApp-Link unter das Formular, damit die Kacheln höher rücken */
  .hf__raster{display:flex;flex-direction:column}
  .hf__kopf{display:contents}
  .hf__ftitel{order:1;font-size:clamp(1.3rem,6.4vw,2rem)}
  .hf__unter{order:2}
  .hf__qf{order:3}
  .hf__kopf .hf__wa{order:4;margin-top:1rem;justify-content:center;gap:.55rem;padding:.85rem 1rem;font-size:.9375rem}
  .hf .fortschritt{margin:.75rem 0 .9rem}
  .hf .pick{padding:.95rem .5rem .75rem}
  .hf .picks--dauer,.hf .picks--anlass{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabp__bild{height:auto}
}

/* ---------- Handy-Leiste unter 901 px, darüber Schnellkontakt ---------- */
@media (max-width:900px){
  .hf-leiste{display:grid}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .fab{display:none}
}

/* ---------- Handy: erste Kachelreihe im ersten Bildschirm ---------- */
@media (max-width:620px){
  .hf__titel{font-size:clamp(1.85rem,8vw,2.3rem)}
  .hf__lead{font-size:.9375rem;margin-top:.55rem}
  .hf__punkte{margin-top:.6rem;gap:.25rem}
  .hf .hf__sterne{margin-top:.6rem}
  .hf__visual{width:84%;margin-inline:auto}
  .hf__formular{margin-top:-46px}
  .hf .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf .fortschritt{margin:.5rem 0 .6rem}
  .hf__kopf .hf__wa{margin-top:.7rem;padding:.7rem 1rem}
}

/* ---------- kleine Handys ---------- */
@media (max-width:400px){
  .marke__txt{display:none}
  .kopf-mob .m-tel{font-size:.8125rem;padding:0 .6rem}
  .hf__lead{font-size:.875rem;line-height:1.4}
  .hf__visual{width:74%}
  /* Sternezeile einzeilig halten */
  .hf .hf__sterne{font-size:.8125rem;gap:.3rem}
  .hf .hf__sterne .sterne svg{width:13px;height:13px}
  /* Panel-Knöpfe: volle Breite, einzeilig, kleiner gesetzt, damit nichts über den Rand ragt */
  .tabp__text{padding-inline:0}
  .tabp__text,.tabp__cta{min-width:0;max-width:100%}
  .tabp__cta .btn{flex:1 1 100%;min-width:0;white-space:nowrap;font-size:.8125rem;padding-inline:.75rem;gap:.4rem}
  .handy-sp,.chat__inhalt{max-width:100%;min-width:0}
  /* FAQ-Überschrift höchstens 3 Zeilen */
  .faq-sec .kopf h2{font-size:1.45rem}
}

/* Hero-Visual am Handy volle Breite (Florian 28.10.2026: „Typ und Auto größer“, gilt für alle LPs) */
@media (max-width:620px){
  .hf__visual{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:0;justify-self:auto}
  .hf__visual img{width:100%;margin-left:0}
}