/* =========================================================================
   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;}
.f-bg .veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.72) 0%,rgba(26,25,23,.86) 42%,rgba(26,25,23,.95) 100%);}
.f-bg .veil-2{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(26,25,23,0) 30%,rgba(26,25,23,.6) 100%);}

/* 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(26,25,23,.95);border-bottom:1px solid rgba(255,255,255,.1);
  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-light);}
.pg-track{height:2px;background:rgba(255,255,255,.12);}
.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:110px var(--pad) 56px;}
.f-wrap-q{max-width:980px;margin:0 auto;padding:150px var(--pad) 90px;}
.f-wrap-wide{max-width:1180px;margin:0 auto;padding:140px var(--pad) 56px;}

/* --------------------------------------------------------------- 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;}
.f-steps{
  list-style:none;margin:0 0 62px;padding:0;display:grid;gap:1px;
  background:rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
.f-steps li{background:rgba(26,25,23,.5);padding:26px 4px;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-light);width:110px;flex:none;}
.f-steps span{font-family:var(--body);font-size:17.5px;color:#fff;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;}
.q-hint{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);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:14px;margin-bottom:52px;}
.opt{
  text-align:left;cursor:pointer;padding:26px 26px 24px;
  background:rgba(35,33,32,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);display:flex;gap:18px;align-items:flex-start;
  transition:border-color .25s,background .25s;
}
.opt:hover{border-color:rgba(255,255,255,.4);}
.opt[aria-checked="true"]{background:rgba(226,83,3,.16);border-color:var(--orange);}
/* Quadratischer Marker statt Häkchen – wie im Entwurf */
.opt .dot{width:14px;height:14px;flex:none;margin-top:5px;border:1px solid rgba(255,255,255,.3);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:#fff;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(255,255,255,.14);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 rgba(255,255,255,.16);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 rgba(255,255,255,.14);background:rgba(35,33,32,.86);backdrop-filter:blur(10px);margin-bottom:56px;}
.res-pic{position:relative;height:340px;overflow:hidden;background:var(--surface-2);}
.res-pic .pic{position:absolute;inset:0;}
.res-pic .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.16),rgba(26,25,23,.86));}
.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 rgba(255,255,255,.1);
}
.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:#fff;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:#fff;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:#fff;}

/* --------------------------------------------------------- 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:14px;margin-bottom:64px;}
.alt{display:block;border:1px solid rgba(255,255,255,.13);background:rgba(35,33,32,.86);backdrop-filter:blur(10px);transition:border-color .25s;}
.alt:hover{border-color:rgba(255,255,255,.32);}
.alt .pic-wrap{height:150px;overflow:hidden;background:var(--surface-2);}
.alt .pic{width:100%;height:100%;opacity:.94;}
.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-light);margin:0 0 12px;}
.alt h4{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase;color:#fff;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:#fff;margin:0;}

/* -------------------------------------------------------------- Formular */
.form-card{
  border:1px solid rgba(255,255,255,.14);background:rgba(35,33,32,.88);
  backdrop-filter:blur(10px);padding:46px 40px 40px;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:#fff;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 rgba(255,255,255,.16);
  color:#fff;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);}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.32);}
.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-light);}

.captcha{margin-bottom:22px;}
.formerr{
  font-family:var(--body);font-size:15.5px;color:var(--orange-light);
  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:#fff;}

/* ---------------------------------------------------------------- Danke */
.done-ok{
  width:52px;height:52px;border:1px solid var(--orange);color:var(--orange-light);
  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:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);margin-bottom:56px;
}
.done-steps div{background:rgba(26,25,23,.45);padding:34px 28px;}
.done-steps b{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--orange-light);margin-bottom:18px;}
.done-steps p{font-family:var(--body);font-size:16.5px;line-height:1.66;color:#fff;margin:0;}
.done-steps strong{color:#fff;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(35,33,32,.88);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:rgba(255,255,255,.1);
    backdrop-filter: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:250px;}
  .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%;}
}