/* ═══════════════════════════════════════════════════════════════
   ANFRAGE-FUNNEL · Styles. AUSGELAGERT aus index.html (15.07.26), damit
   Startseite UND die 50 Leistungsseiten denselben Funnel benutzen.
   Alle Regeln hängen an #af-root -> keine Kollision mit den Seiten-Styles.
   ═══════════════════════════════════════════════════════════════ */
/* Alle Regeln hängen an #af-root -> keine Kollision mit den Seiten-Styles.
   Die Tokens stehen bewusst auf #af-root und NICHT auf :root, sonst würden
   sie die gleichnamigen Variablen der Seite (--green, --body, --radius …)
   überschreiben. */
#af-root{
  --green:#039B54; --green-dark:#02753f; --green-soft:rgba(3,155,84,.14);
  --af-orange:#FF6B00; --af-orange-dark:#e05f00;
  --af-ink:#F8FAFC; --af-muted:#94A3B8; --af-line:rgba(255,255,255,.14);
  --af-card:rgba(255,255,255,.05); --af-red:#F87171; --af-radius:14px;
  --af-body:'Montserrat',system-ui,-apple-system,sans-serif;
  font-family:var(--af-body); color:var(--af-ink); width:100%;
}
#af-root .af-wrap{max-width:520px;margin:0 auto}
/* Fortschritt — bewusst NICHT sticky: im Seitenkontext würde der Balken
   sonst unter der Navigation kleben. */
#af-root .af-progress{padding:2px 0 10px}
#af-root .af-bar{height:6px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
#af-root .af-bar-fill{height:100%;width:0;background:var(--green);border-radius:99px;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
#af-root .af-steplabel{display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;font-size:.78rem;color:var(--af-muted);font-weight:600}
#af-root .af-back{background:none;border:0;color:var(--af-muted);font-family:var(--af-body);
  font-size:.78rem;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px;visibility:hidden}
#af-root .af-back:hover{color:#6EE7A8;background:var(--green-soft)}
#af-root .af-back.show{visibility:visible}
#af-root .af-step{display:none;animation:af-in .38s cubic-bezier(.2,.7,.3,1) both}
#af-root .af-step.active{display:block}
@keyframes af-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #af-root .af-step{animation:none}
  #af-root .af-bar-fill{transition:none}
}
#af-root .af-frage{font-family:var(--af-body);font-size:clamp(1.3rem,4vw,1.7rem);font-weight:800;
  line-height:1.22;text-align:center;margin:18px 0 6px;text-wrap:balance;color:var(--af-ink)}
#af-root .af-hint{text-align:center;color:var(--af-muted);font-size:.9rem;margin:0 0 20px;font-weight:400}
#af-root .af-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#af-root .af-grid.list{grid-template-columns:1fr}
#af-root .af-card{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--af-card);border:2px solid var(--af-line);border-radius:var(--af-radius);
  padding:16px 14px;font-family:var(--af-body);font-size:.95rem;font-weight:600;
  color:var(--af-ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
#af-root .af-card:hover{border-color:var(--green);background:var(--green-soft)}
#af-root .af-card:active{transform:scale(.985)}
#af-root .af-card:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* Icons: DERSELBE Satz wie die Gewerke-Kacheln oben auf der Seite (.gw-icon-box).
   Vorher standen hier Emojis – auf einer Seite mit zwei Icon-Sprachen.
   Oben steht der Satz auf Weiß mit navy Strich, hier auf Navy -> heller
   Grünton, sonst wäre der Strich unsichtbar. Maße 38/18px = wie oben. */
#af-root .af-card .ic{flex:none;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s}
#af-root .af-card .ic svg{width:22px;height:22px;stroke:#6EE7B7;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
#af-root .af-card:hover .ic{background:var(--green-soft)}
#af-root .af-grid.tiles .af-card{flex-direction:column;text-align:center;gap:11px;padding:22px 12px;font-size:.98rem}
#af-root .af-grid.tiles .af-card:hover .ic{transform:scale(1.08)}
/* Handy: die Karte ist innen nur ~278px breit – mit minmax(140px) passen
   zwei Kacheln um 2px NICHT nebeneinander und die 12 Gewerke werden zur
   endlosen Einer-Spalte. Darum hier fest zweispaltig. */
@media(max-width:520px){
  /* minmax(0,1fr) statt 1fr: 1fr = minmax(auto,1fr) – das auto-Minimum lässt eine
     Spalte durch lange Wörter (Gebäudereinigung, Schlüsseldienst) über ihren Anteil
     wachsen, die rechte Kachelspalte lief dadurch aus dem Kasten. minmax(0,…)
     erzwingt exakt gleich breite Spalten, der Text bricht sauber um. */
  #af-root .af-grid.tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #af-root .af-grid.tiles .af-card{padding:16px 6px;font-size:.88rem;min-width:0;overflow-wrap:anywhere;hyphens:auto}
  #af-root .af-card .ic{width:40px;height:40px}
}
#af-root .af-card.sel{border-color:var(--green);background:var(--green-soft)}
#af-root .af-card.sel::after{content:'✓';margin-left:auto;color:var(--green);font-weight:800}
/* Schritt 2 (Leistungen): Foto-Banner statt Textzeile – Vorbild fixly.pl.
   Eigene Klasse, weil .af-grid.list auch von afFrageOpts/afStart benutzt wird
   und dort weiter Textkarten stehen müssen. Höhe fest -> kein Layout-Sprung,
   object-fit schneidet die 900x386-Banner sauber zu. */
#af-root .af-grid.fotos{grid-template-columns:1fr}
#af-root .af-card.foto{position:relative;display:block;padding:0;height:104px;
  overflow:hidden;background:#0d1420;text-align:center}
#af-root .af-card.foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .25s ease,filter .25s ease}
/* Verlauf: die Schrift sitzt MITTIG, dort muss der Kontrast stimmen – die Bilder
   sind bewusst hell. Die Werte sind gegen alle 50 Motive durchgerechnet: mit .42
   in der Kartenmitte liegt der schlechteste bei 5.2:1 (Heizungsanlage), alle über
   WCAG AA 4.5:1 – und zwar OHNE den text-shadow mitzuzählen. Wer hier den mittleren
   Stop senkt, macht auf den hellsten Motiven die Beschriftung unlesbar. */
#af-root .af-card.foto::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,14,24,.22) 0%,rgba(9,14,24,.42) 50%,rgba(9,14,24,.78) 100%)}
#af-root .af-card.foto .txt{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:center;height:100%;padding:10px 14px;color:#fff;font-weight:800;
  font-size:1.05rem;text-shadow:0 2px 10px rgba(0,0,0,.55);text-wrap:balance}
#af-root .af-card.foto:hover img{transform:scale(1.04);filter:brightness(1.06)}
@media(max-width:520px){
  #af-root .af-card.foto{height:88px}
  #af-root .af-card.foto .txt{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  #af-root .af-card.foto img{transition:none}
  #af-root .af-card.foto:hover img{transform:none}
}
#af-root .af-field{max-width:360px;margin:0 auto}
#af-root .af-label{display:block;font-size:.82rem;font-weight:700;margin:0 0 5px;color:var(--af-ink)}
#af-root .af-input{width:100%;padding:14px 15px;border:2px solid var(--af-line);border-radius:12px;
  font-family:var(--af-body);font-size:1rem;background:var(--af-card);color:var(--af-ink);
  transition:border-color .15s}
#af-root .af-input:focus{outline:none;border-color:var(--green)}
#af-root .af-input.err{border-color:var(--af-red)}
#af-root select.af-input option{background:#121824;color:#F8FAFC}
#af-root .af-plz{text-align:center;letter-spacing:.32em;font-size:1.5rem;font-weight:700;padding:16px 10px}
#af-root .af-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){#af-root .af-row{grid-template-columns:1fr}}
#af-root .af-err{color:var(--af-red);font-size:.8rem;font-weight:600;margin:6px 0 0;min-height:1.1em}
#af-root .af-ort-info{color:var(--af-muted);font-size:.8rem;font-weight:600;margin:6px 0 0;min-height:1.1em}
#af-root .af-btn{width:100%;margin-top:16px;padding:16px;border:0;border-radius:12px;
  background:var(--af-orange);color:#fff;font-family:var(--af-body);font-size:1.02rem;
  font-weight:800;cursor:pointer;transition:background .15s,transform .1s}
#af-root .af-btn:hover{background:var(--af-orange-dark)}
#af-root .af-btn:active{transform:scale(.99)}
#af-root .af-btn:focus-visible{outline:3px solid var(--af-ink);outline-offset:2px}
#af-root .af-btn[disabled]{opacity:.55;cursor:not-allowed}
#af-root .af-btn.ghost{background:var(--green)}
#af-root .af-btn.ghost:hover{background:var(--green-dark)}
#af-root .af-btn.af-link{background:none;color:var(--af-muted);font-weight:600;font-size:.88rem;
  margin-top:6px;padding:10px}
#af-root .af-btn.af-link:hover{background:none;color:#6EE7A8;text-decoration:underline}
#af-root .af-menge{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--af-card);border:2px solid var(--af-line);border-radius:var(--af-radius);
  padding:12px 14px;font-size:.92rem;font-weight:600}
#af-root .af-menge select{width:auto;min-width:76px;padding:8px 10px;font-size:.92rem}
#af-root .af-check{display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  font-size:.85rem;font-weight:400;line-height:1.45;color:var(--af-ink);cursor:pointer}
#af-root .af-check input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--green);cursor:pointer}
#af-root .af-check a{color:#6EE7B7;font-weight:700}
#af-root .af-check.err{color:var(--af-red)}
#af-root .af-check.err input{outline:2px solid var(--af-red);outline-offset:2px;border-radius:3px}
#af-root .af-schutz{background:var(--green-soft);border-radius:10px;padding:11px 13px;margin-top:14px;
  font-size:.82rem;font-weight:400;line-height:1.5;color:var(--af-ink)}
#af-root .af-wl-box{background:var(--green-soft);border-radius:10px;padding:13px 15px;
  margin:0 0 16px;font-size:.9rem;font-weight:400;line-height:1.55;color:var(--af-ink)}
#af-root .af-live{display:flex;align-items:flex-start;gap:9px;margin-top:14px;
  background:var(--green-soft);border-radius:10px;padding:11px 13px;
  font-size:.82rem;color:#6EE7A8;line-height:1.45;font-weight:600}
#af-root .af-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);
  margin-top:5px;animation:af-blink 1.6s ease-in-out infinite}
@keyframes af-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(3,155,84,.5)}
  50%{opacity:.45;box-shadow:0 0 0 6px rgba(3,155,84,0)}}
@media (prefers-reduced-motion:reduce){#af-root .af-dot{animation:none}}
#af-root .af-summary{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 20px}
#af-root .af-chip{background:var(--af-card);border:1px solid var(--af-line);border-radius:99px;
  padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--af-muted)}
#af-root .af-chip b{color:var(--af-ink);font-weight:700}
#af-root .af-done{text-align:center;padding:30px 0}
/* eigener Name — hieß im Widget ebenfalls .af-check und hat dort die
   Zustimmungs-Haken zu 64px-Kreisen gemacht. */
#af-root .af-done-ic{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px}
/* Handwerker-Abzweig: im alten Formular ein Tab, hier ein Link unter Schritt 1. */
#af-root .af-hw{margin-top:22px;padding-top:16px;border-top:1px solid var(--af-line);
  text-align:center;font-size:.82rem;font-weight:400;color:var(--af-muted)}
#af-root .af-hw a{color:#6EE7B7;font-weight:700;text-decoration:none}
#af-root .af-hw a:hover{text-decoration:underline}
/* Umschalter alt/neu – erscheint NUR, wenn der Modus bewusst gesetzt wurde
   (?formular=… oder localStorage). Normale Kunden sehen ihn nie. */
.af-switch{margin-top:14px;text-align:center;font-size:.75rem;color:#94A3B8;font-weight:400}
.af-switch a{color:#6EE7B7;font-weight:700}

/* ═══════════════════════════════════════════════════════════════
   HELLE VARIANTE · <div id="af-mount" data-theme="hell">
   Für die Leistungsseiten unter /leistung/: dort steht der Funnel auf weißem
   Grund und nicht im dunklen Kontakt-Kasten der Startseite.
   NUR Tokens + die wenigen Stellen, die feste dunkle Farben hatten.
   Wer hier etwas ändert: --af-ink/--af-muted/--af-line/--af-card gehören
   zusammen gedreht, sonst wird Text unlesbar.
   ═══════════════════════════════════════════════════════════════ */
#af-root.af-hell{
  --af-ink:#1b2430; --af-muted:#5b6472; --af-line:#e3e6ea;
  --af-card:#ffffff;
  background:#fff; border:1.5px solid #e3e6ea; border-radius:18px;
  padding:26px 20px;
}
#af-root.af-hell .af-bar{background:#e9edf2}
#af-root.af-hell .af-card{box-shadow:0 1px 2px rgba(16,24,40,.04);border-color:#e8ebef}
/* Marken-Look im Hell-Theme: grüne Icon-Chips (statt weiß auf weiß = unsichtbar),
   Karten heben sich beim Hover leicht an. Das nimmt die „leere" Wirkung raus. */
#af-root.af-hell .af-card .ic{background:var(--green-soft)}
#af-root.af-hell .af-card .ic svg{stroke:var(--green)}
#af-root.af-hell .af-grid.tiles .af-card{transition:border-color .15s,background .15s,transform .18s,box-shadow .18s}
#af-root.af-hell .af-grid.tiles .af-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(3,155,84,.14);border-color:var(--green)}
#af-root.af-hell .af-card:hover .ic{background:#fff}
#af-root.af-hell .af-card.sel .ic{background:#fff}
#af-root.af-hell .af-hw a,
#af-root.af-hell .af-switch a{color:var(--green)}
#af-root.af-hell .af-back{color:var(--af-muted)}
@media(max-width:520px){
  #af-root.af-hell{padding:18px 14px;border-radius:14px}
}

/* Situative Foto-Empfehlung an Detailfragen (optional, aus fragen-katalog Feld foto).
   Dezent, in beiden Themes lesbar; kein Zwang. */
#af-root .af-foto-tip{display:flex;gap:10px;align-items:flex-start;text-align:left;
  margin:16px auto 6px;max-width:520px;padding:11px 13px;
  background:rgba(6,178,110,.10);border:1px solid rgba(6,178,110,.30);
  border-radius:12px;font-size:.9rem;line-height:1.42;color:var(--af-ink)}
#af-root .af-foto-ic{font-size:1.15rem;line-height:1.25;flex:0 0 auto}
#af-root .af-foto-tx{flex:1;min-width:0}
#af-root .af-foto-head b{color:#06B274;font-weight:800}
#af-root .af-foto-opt{color:var(--af-muted);font-weight:600;font-size:.82em}
#af-root .af-foto-wenn{color:var(--af-muted);font-style:italic;margin-top:2px}
#af-root .af-foto-was{margin-top:3px;font-weight:600}
#af-root .af-foto-note{margin-top:4px;font-size:.84em;color:var(--af-muted)}
#af-root .af-foto-end{margin-top:7px;padding-top:6px;border-top:1px dashed rgba(6,178,110,.28);
  font-size:.83em;font-weight:600;color:#06B274}

/* Foto-Vorschau im Kontaktschritt (Thumbnails + Status). Feedback 25.08. */
#af-root .af-fotos-preview{margin-top:10px}
#af-root .af-fotos-head{font-weight:700;color:#06B274;font-size:.9rem;margin-bottom:8px}
#af-root .af-fotos-thumbs{display:flex;flex-wrap:wrap;gap:8px}
#af-root .af-fotos-thumb{width:66px;height:66px;border-radius:10px;overflow:hidden;border:1px solid var(--af-line);background:var(--af-card)}
#af-root .af-fotos-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#af-root .af-fotos-note{margin-top:7px;font-size:.8rem;color:var(--af-muted)}
#af-root .af-fotos-note.warn{color:#e08a00;font-weight:600}

/* Foto-Schritt: gebündelte Kategorie-Karten (nach dem Fragenkatalog, Dominik 26.08.) */
#af-root .af-fotokat{border:1px solid var(--af-line);border-radius:var(--af-radius,12px);background:var(--af-card);padding:14px 15px;margin:0 0 12px;text-align:left}
#af-root .af-fotokat-h{font-weight:800;color:var(--af-ink);font-size:.98rem;line-height:1.3}
#af-root .af-fotokat-why{margin-top:4px;color:var(--af-ink);font-weight:400;line-height:1.5;font-size:.9rem}
#af-root .af-fotokat .af-foto-was{margin-top:6px;font-size:.9rem}
#af-root .af-fotokat-note{margin-top:8px;font-size:.82rem;color:#8a5a00;background:#fff7e6;border:1px solid #f0d38a;border-radius:8px;padding:7px 10px;line-height:1.45}
#af-root .af-fotokat-inp{margin-top:10px;padding:10px}