/* =========================================================================
   SÜSS GRUPPE · GRUNDSTÜCKS-FINDER (Funnel)
   Umsetzung von "Suess Gruppe Website.dc.html". Setzt base.css voraus.
   ========================================================================= */

/* Kein min-height:100vh: der Body ist eine Flex-Spalte mit min-height:100vh
   und main{flex:1}, die Fusszeile sitzt also schon ohne Zutun am unteren Rand.
   Zusammen mit einer eigenen Mindesthoehe wurde die Seite immer eine ganze
   Fensterhoehe zu lang - auf hohen Fenstern stand unter dem letzten Inhalt
   entsprechend viel leere Bildflaeche. */
.funnel-main{position:relative;padding-top:var(--nav-h);background:var(--bg);}

/* Ruhig treibendes Luftbild hinter dem gesamten Funnel */
.f-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.f-bg .pic{position:absolute;inset:0;background-position:center 40%;animation:sg-drift 44s ease-in-out infinite;}
/* Aufhellender statt abdunkelnder Schleier (helle Fassung). Das Luftbild soll
   als Baugebiet erkennbar bleiben – Kundenfeedback vom 03.09.2026 – deshalb
   bleibt es oben am duennsten und deckt nach unten zu, wo Fragen und Formular
   stehen. Die Werte sind bewusst hoch: hier steht Schrift direkt auf dem Foto,
   nicht auf einer eigenen Flaeche, und --ink braucht dafuer einen Grund von
   mindestens etwa 80 % Weiss. */
.f-bg .veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,.93) 100%);}
.f-bg .veil-2{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.34) 100%);}
/* Weisser Hof statt dunklem Schatten: faengt die Stellen auf, an denen ein
   dunkles Bilddetail durch den Schleier bis unter die Schrift reicht. */
.f-stage .dsp,.f-stage .lede,.f-stage .label,.q-sub,.q-hint,.f-cta .note,
.alts-label,.f-loading p{text-shadow:0 1px 20px rgba(255,255,255,.92),0 1px 3px rgba(255,255,255,.8);}

/* Wird ein Feld nach einer Fehleingabe angesprungen (finder.js setzt den Fokus
   auf das erste ungueltige), scrollt der Browser nur so weit wie noetig – die
   fixierte Kopfzeile kennt er dabei nicht, das Feld kann also dahinter landen.
   Der Abstand haelt es frei. */
input,select,textarea,.consent{scroll-margin-top:calc(var(--nav-h) + 24px);}

/* --------------------------------------------------------- Fortschritt */
.pg{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:80;
  background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.pg[hidden]{display:none;}
.pg-in{max-width:980px;margin:0 auto;padding:16px var(--pad) 14px;}
.pg-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.pg-step{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70);}
.pg-pct{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.16em;color:var(--orange-ink);}
.pg-track{height:2px;background:rgba(26,25,23,.14);}
.pg-bar{height:2px;width:0;background:var(--orange);transition:width .45s cubic-bezier(.16,.84,.24,1);}

/* --------------------------------------------------------------- Bühne */
/* Die Fragen fliegen aus 48 px Abstand von rechts ein (sg-inR). Während dieser
   halben Sekunde ragt der Bildschirm über den Fensterrand: auf dem Desktop
   blitzte eine waagerechte Bildlaufleiste auf, auf Touch-Geräten liess sich
   die Seite kurz seitlich schieben. clip statt hidden – hidden würde hier
   einen Scroll-Container erzeugen. Im Funnel gibt es kein sticky, das darunter
   leiden könnte (das einzige steht auf der Detailseite). */
.f-stage{position:relative;z-index:1;overflow-x:clip;}
.screen{display:none;}
.screen.on{display:block;}
/* Richtungsabhängiger Einflug der Fragen */
.screen.on.in-fwd{animation:sg-inR .5s cubic-bezier(.16,.84,.24,1) both;}
.screen.on.in-back{animation:sg-inL .5s cubic-bezier(.16,.84,.24,1) both;}

/* Unterer Abstand bewusst knapp: darunter folgt direkt die Fusszeile. Mit den
   alten 120-130 px stand unter dem letzten Inhalt eine leere Bildflaeche. */
.f-wrap{max-width:980px;margin:0 auto;padding:120px var(--pad) 72px;}
.f-wrap-q{max-width:980px;margin:0 auto;padding:160px var(--pad) 100px;}
.f-wrap-wide{max-width:1180px;margin:0 auto;padding:150px var(--pad) 72px;}

/* --------------------------------------------------------------- Intro */
.f-intro h1{margin:0 0 30px;font-size:clamp(34px,4.8vw,72px);line-height:1.02;letter-spacing:.015em;}
.f-intro .lede{font-size:19px;line-height:1.68;color:var(--ink-70);max-width:720px;margin:0 0 64px;}
/* Die Trennlinien entstehen aus dem 1-px-Raster: der Grund scheint durch die
   Luecken zwischen den Zeilen. */
.f-steps{
  list-style:none;margin:0 0 62px;padding:0;display:grid;gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.f-steps li{background:rgba(255,255,255,.86);padding:28px 16px;display:flex;gap:32px;align-items:baseline;flex-wrap:wrap;}
.f-steps b{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-ink);width:110px;flex:none;}
.f-steps span{font-family:var(--body);font-size:17.5px;color:var(--ink);flex:1;min-width:260px;}
.f-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.f-cta .note{font-family:var(--body);font-size:15px;color:var(--ink-70);}

/* --------------------------------------------------------------- Fragen */
.q-title{margin:0 0 20px;font-size:clamp(28px,3.6vw,52px);line-height:1.06;}
.q-sub{font-family:var(--body);font-size:17.5px;line-height:1.68;color:var(--ink-70);max-width:680px;margin:0 0 14px;}
/* Der Hinweis steht direkt auf dem Luftbild, nur der Schleier schuetzt ihn.
   Gegen die echten Bildpixel gemessen erreichte --sand-ink dort 3,50:1 –
   der warme Ton traegt auf dem hellen Grund nicht. --ink-62 kommt auf 5,78:1.
   Fuer .d-lede auf weissem Grund bleibt --sand-ink im Einsatz (6,56:1). */
.q-hint{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-62);margin:0 0 44px;}
.q-sub+.q-hint{margin-top:0;}
.q-sub:last-of-type{margin-bottom:44px;}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-bottom:60px;}
.opt{
  text-align:left;cursor:pointer;padding:28px 28px 26px;
  /* Weisses Glas ueber dem Luftbild – deckend genug fuer Lesetext, aber das
     Motiv bleibt darunter zu erahnen. */
  background:rgba(255,255,255,.88);border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);display:flex;gap:18px;align-items:flex-start;
  transition:border-color .25s,background .25s;
}
.opt:hover{border-color:var(--ink);}
/* Gewaehlte Antwort: heller Orangeschleier, dazu der tiefere Randton – auf
   Weiss ist der helle --orange als Rand kaum vom Grundrand zu unterscheiden. */
.opt[aria-checked="true"]{background:rgba(226,83,3,.10);border-color:var(--orange-dark);}
/* Quadratischer Marker statt Häkchen – wie im Entwurf */
.opt .dot{width:14px;height:14px;flex:none;margin-top:5px;border:1px solid var(--line-strong);background:transparent;transition:border-color .2s,background .2s;}
.opt[aria-checked="true"] .dot{border-color:var(--orange);background:var(--orange);}
.opt .tx{display:block;}
.opt .tx b{display:block;font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:8px;}
.opt .tx small{display:block;font-family:var(--body);font-size:15.5px;line-height:1.55;color:var(--ink-70);}

.q-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px;}
.q-nav .btn-next{margin-left:auto;padding:19px 40px;}
.q-nav .btn-next:disabled{background:rgba(26,25,23,.11);color:var(--ink-45);}

/* ----------------------------------------------------------- Berechnung */
.f-loading{text-align:center;padding:190px var(--pad);max-width:980px;margin:0 auto;}
.f-loading .spin{
  width:38px;height:38px;border:1px solid var(--line);border-top-color:var(--orange);
  border-radius:50%;margin:0 auto 40px;animation:sg-spin 1s linear infinite;
}
.f-loading h2{font-size:clamp(24px,2.6vw,38px);letter-spacing:.04em;margin:0 0 18px;}
.f-loading p{font-family:var(--body);font-size:17px;color:var(--ink-70);margin:0;}

/* ------------------------------------------------------------- Ergebnis */
.res-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:48px;}
.res-head h2{font-size:clamp(28px,3.4vw,50px);line-height:1.06;}

.res-card{border:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);margin-bottom:72px;}
.res-pic{position:relative;height:380px;overflow:hidden;background:var(--surface-2);}
.res-pic .pic{position:absolute;inset:0;}
/* Nur der Fuss der Bildflaeche dunkelt fuer die Bildunterschrift ab. Dieser
   Teil bleibt auch in der hellen Fassung dunkel mit weisser Schrift – die
   Unterschrift liegt auf dem Foto, nicht auf dem Kartengrund.
   07.09.2026: Die Unterschrift sitzt bei etwa 64-93 % der Flaechenhoehe, der
   alte Verlauf lag dort aber nur bei .32-.71 – fuer das 11,5-px-Label zu
   duenn (3,61:1 bei Luetzschena). Rampe jetzt ab 60 %, Fuss dichter;
   schlechtester Wert ueber alle sieben Titelbilder 5,3:1. Die oberen zwei
   Drittel des Fotos sind unberuehrt. */
.res-pic .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.06) 0%,rgba(26,25,23,0) 34%,rgba(26,25,23,.46) 60%,rgba(26,25,23,.90) 100%);}
.res-pic .cap{text-shadow:0 1px 18px rgba(26,25,23,.7);}
.res-pic .match-tag{position:absolute;top:26px;left:26px;font-size:11.5px;padding:10px 15px;}
.res-pic .cap{position:absolute;bottom:28px;left:30px;right:30px;}
.res-pic .cap .label{margin:0 0 12px;font-size:11.5px;color:#fff;}
.res-pic .cap h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:0 0 22px;}
.res-match{display:flex;align-items:center;gap:16px;}
.res-match .track{flex:1;height:3px;background:rgba(255,255,255,.2);}
.res-match .fill{height:3px;width:0;background:var(--orange);transition:width 1.3s cubic-bezier(.16,.84,.24,1);}
.res-match .num{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;color:#fff;white-space:nowrap;}

.res-figures{
  padding:36px 30px 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px;border-bottom:1px solid var(--line);
}
.res-figures .label{margin:0 0 10px;font-size:11px;letter-spacing:.2em;}
.res-figures b{font-family:var(--display);font-weight:300;font-size:30px;color:var(--ink-strong);display:block;}
.res-figures b span{font-size:14px;color:var(--ink-70);}

.res-body{padding:34px 30px 38px;}
.res-body .desc{font-family:var(--body);font-size:17.5px;line-height:1.7;color:var(--ink);margin:0 0 30px;max-width:760px;}
.res-why{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;}
.res-why li{display:flex;gap:14px;align-items:baseline;}
.res-why li::before{content:"";width:6px;height:6px;background:var(--orange);flex:none;display:block;}
.res-why span{font-family:var(--body);font-size:16.5px;color:var(--ink);}

/* --------------------------------------------------------- Alternativen */
.alts-label{margin:0 0 22px;font-size:12px;letter-spacing:.22em;color:var(--ink-70);}
.alt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:80px;}
.alt{display:block;border:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);transition:border-color .25s;}
.alt:hover{border-color:var(--ink);}
.alt .pic-wrap{height:170px;overflow:hidden;background:var(--surface-2);}
.alt .pic{width:100%;height:100%;}
.alt .bd{padding:22px;}
.alt .m{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 12px;}
.alt h4{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-strong);margin:0 0 8px;}
.alt .loc{font-family:var(--body);font-size:15px;color:var(--ink-70);margin:0 0 16px;}
.alt .p{font-family:var(--body);font-size:16px;color:var(--ink);margin:0;}

/* -------------------------------------------------------------- Formular */
.form-card{
  border:1px solid var(--line);background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);padding:52px 44px 44px;max-width:820px;
}
.form-card h3{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,30px);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-strong);margin:0 0 14px;}
.form-card .lead{font-family:var(--body);font-size:17px;line-height:1.68;color:var(--ink-70);margin:0 0 38px;}
.f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-bottom:22px;}
.f{display:block;margin-bottom:22px;}
.f>span,.f>label{
  display:block;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);margin-bottom:10px;
}
.f input,.f select,.f textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-strong);
  color:var(--ink);font-family:var(--body);font-size:17px;padding:16px 16px;outline:none;
  transition:border-color .2s;
}
.f textarea{resize:vertical;min-height:104px;}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--orange);}
/* 42 % Tinte ergaben auf Weiss nur 2,67:1. Platzhalter tragen hier echte
   Hinweise („Vorname“, Beispielformate), muessen also lesbar sein: 60 %
   bringen 4,57:1 und bleiben deutlich leiser als der Eingabetext (17,6:1). */
.f input::placeholder,.f textarea::placeholder{color:rgba(26,25,23,.60);}
.f.err input,.f.err select{border-color:var(--orange);}
.f .msg{display:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.consent{display:flex;gap:14px;align-items:flex-start;margin:4px 0 30px;cursor:pointer;}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--orange);flex:none;}
.consent span{font-family:var(--body);font-size:15.5px;line-height:1.62;color:var(--ink-70);}
.consent.err span{color:var(--orange-ink);}

.captcha{margin-bottom:22px;}
.formerr{
  font-family:var(--body);font-size:15.5px;color:var(--orange-ink);
  border-left:2px solid var(--orange);padding:12px 16px;margin:0 0 24px;
  background:rgba(226,83,3,.07);
}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;}
.trust span{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-62);}

.restart{margin-top:30px;}
.restart button{
  font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-62);background:none;border:0;cursor:pointer;padding:10px 0;
}
.restart button:hover{color:var(--ink);}

/* ---------------------------------------------------------------- Danke */
.done-ok{
  width:52px;height:52px;border:1px solid var(--orange);color:var(--orange-ink);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:38px;
}
.f-done h2{margin:0 0 20px;font-size:clamp(30px,3.6vw,54px);line-height:1.06;}
.f-done .lede{font-size:18.5px;line-height:1.68;color:var(--ink-70);margin:0 0 62px;max-width:680px;}
.done-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);margin-bottom:56px;
}
.done-steps div{background:rgba(255,255,255,.9);padding:34px 28px;}
.done-steps b{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--orange-ink);margin-bottom:18px;}
.done-steps p{font-family:var(--body);font-size:16.5px;line-height:1.66;color:var(--ink);margin:0;}
.done-steps strong{color:var(--ink-strong);font-weight:700;}
.done-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.done-actions .last{margin-left:auto;}

/* ---------------------------------------------------------------- Fehler */
.errbox{border:1px solid var(--line);background:rgba(255,255,255,.94);padding:70px 34px;text-align:center;}
.errbox h2{margin:0 0 16px;}
.errbox p{font-family:var(--body);color:var(--ink-62);max-width:52ch;margin:0 auto 32px;}
.errbox .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;}

/* ------------------------------------------------------------ Responsive */
@media(max-width:860px){
  /* Die Fortschrittsleiste läuft hier mit, statt über dem Inhalt zu schweben.
     Fixiert verdeckte sie die Frage, sobald man scrollte – und auf dem Handy
     muss man scrollen: ein Fragebildschirm ist höher als das Fenster. Sie
     steht im Dokument direkt über den Fragen, sitzt also weiterhin an der
     richtigen Stelle, und zusammen mit der kleineren Einrückung rückt der
     Inhalt rund 80 px nach oben – es bleibt weniger zu scrollen. */
  /* relative, nicht static: static verliert die Stapelposition, dann malt der
     fixierte Funnel-Hintergrund (.f-bg, z-index 0) über die Leiste und sie
     ist nicht mehr zu sehen. */
  .pg{position:relative;top:auto;backdrop-filter:none;}

  /* Die Kopfzeile ist fixiert, die Leiste läuft beim Scrollen darunter hinweg.
     Sie braucht hier deshalb von Anfang an eine deckende Füllung – ohne sie
     schien die Leiste durch und lag über Marke und Menü. Auf den anderen
     Seiten bleibt es beim Verlauf über dem Bild: finder.css wird nur von
     dieser Seite geladen. */
  .site-hd, .site-hd.is-solid{
    background:var(--bg);
    border-bottom-color:var(--line);
    backdrop-filter:none;
    box-shadow:none;
  }
  .f-wrap{padding:76px var(--pad) 44px;}
  .f-wrap-q{padding:34px var(--pad) 70px;}
  .f-wrap-wide{padding:104px var(--pad) 44px;}
  .f-loading{padding:140px var(--pad);}
  .f-steps b{width:auto;}
  .opts{grid-template-columns:1fr;}
  .form-card{padding:34px 24px 30px;}
  .res-pic{height:270px;}
  .opts{gap:14px;}
  .res-figures,.res-body{padding-left:22px;padding-right:22px;}
  .done-steps div{padding:28px 22px;}
}
@media(max-width:560px){
  .f-wrap,.f-wrap-q,.f-wrap-wide{padding-left:var(--pad);padding-right:var(--pad);}
  .f-cta{width:100%;}
  .f-cta .btn{width:100%;}
  .q-nav .btn-next{width:100%;margin-left:0;}
  .done-actions .last{margin-left:0;}
  .done-actions .btn{width:100%;}
}