
:root{
 --bg:#f6f3ee;
 --paper:#fffdfa;
 --white:#ffffff;
 --ink:#14263a;
 --muted:#627083;
 --line:#e4e6e2;
 --navy:#122943;
 --navy2:#1b3b5b;
 --sage:#6f8d7c;
 --sage-soft:#e9f0eb;
 --gold:#b48a58;
 --gold-soft:#f5eadb;
 --blue-soft:#edf4f8;
 --danger:#9b2f2f;
 --shadow:0 22px 70px rgba(24,43,63,.10);
 --shadow-soft:0 10px 32px rgba(24,43,63,.07);
 --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:var(--ink);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1180px,92vw);margin:0 auto}
.topbar{
 position:sticky;top:0;z-index:50;
 background:rgba(255,253,250,.94);
 border-bottom:1px solid rgba(20,38,58,.08);
 backdrop-filter:blur(14px);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0}
.brand{font-weight:950;letter-spacing:-.035em;font-size:1.12rem;color:var(--navy)}
.brand small{display:block;font-weight:700;color:var(--muted);font-size:.68rem;letter-spacing:.01em;margin-top:2px}
.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:.88rem;font-weight:800;color:#43536a}
.navcta{background:var(--navy)!important;color:white!important;padding:11px 15px;border-radius:999px}
.hero{
 position:relative;overflow:hidden;
 background:
  radial-gradient(circle at 80% 20%,rgba(111,141,124,.18),transparent 28%),
  radial-gradient(circle at 10% 80%,rgba(180,138,88,.14),transparent 26%),
  linear-gradient(135deg,#fbf8f3,#f2eee6);
 padding:62px 0 48px;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(255,255,255,.72);
 border:1px solid rgba(20,38,58,.08);
 padding:8px 12px;border-radius:999px;
 font-size:.73rem;font-weight:950;text-transform:uppercase;letter-spacing:.09em;
 color:var(--navy);
}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 5px rgba(111,141,124,.12)}
h1{font-size:clamp(3rem,6.6vw,5.6rem);line-height:.94;letter-spacing:-.065em;margin:18px 0 20px;color:var(--navy)}
.hero-copy{font-size:1.12rem;line-height:1.68;color:#526277;max-width:680px}
.hero-copy strong{color:var(--navy)}
.trustrow{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 0}
.trustrow span{background:rgba(255,255,255,.72);border:1px solid rgba(20,38,58,.08);border-radius:999px;padding:9px 12px;font-size:.82rem;font-weight:850;color:#405168}
.hero-note{margin-top:18px;color:#6b7789;font-size:.79rem;line-height:1.55;max-width:650px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 border:0;border-radius:14px;padding:14px 18px;font-weight:900;cursor:pointer;
 transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(18,41,67,.18)}
.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}
.hero-visual{
 position:relative;
 background:rgba(255,255,255,.72);
 border:1px solid rgba(20,38,58,.08);
 border-radius:30px;
 padding:18px;
 box-shadow:var(--shadow);
}
.visual-inner{
 position:relative;overflow:hidden;
 min-height:430px;border-radius:22px;
 background:linear-gradient(155deg,#17314d,#284d68 72%,#496c6b);
}
.visual-grid{
 position:absolute;inset:0;opacity:.22;
 background-image:
  linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
 background-size:38px 38px;
}
.house-svg{position:absolute;inset:38px 34px 96px 34px;width:calc(100% - 68px);height:calc(100% - 134px)}
.house-line{
 fill:none;stroke:#f5eadb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
 stroke-dasharray:950;stroke-dashoffset:950;
 animation:drawHouse 2.1s cubic-bezier(.2,.8,.2,1) forwards;
}
.market-line{
 fill:none;stroke:#cfe0d5;stroke-width:4;stroke-linecap:round;
 stroke-dasharray:580;stroke-dashoffset:580;
 animation:drawLine 2s .45s ease forwards;
}
.scan{
 position:absolute;left:7%;right:7%;height:2px;top:22%;
 background:linear-gradient(90deg,transparent,#d9e8de,transparent);
 box-shadow:0 0 18px rgba(217,232,222,.65);
 animation:scan 4.4s ease-in-out infinite;
 opacity:.85;
}
.value-card{
 position:absolute;left:22px;right:22px;bottom:20px;
 display:flex;justify-content:space-between;gap:18px;align-items:center;
 background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.8);
 border-radius:18px;padding:15px 17px;box-shadow:var(--shadow-soft)
}
.value-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}
.value-main{font-size:1.3rem;font-weight:950;letter-spacing:-.03em;color:var(--navy);margin-top:4px}
.live-pill{background:var(--sage-soft);color:#3f6753;padding:8px 10px;border-radius:999px;font-size:.74rem;font-weight:900;white-space:nowrap}
@keyframes drawHouse{to{stroke-dashoffset:0}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes scan{0%,100%{top:22%;opacity:.2}50%{top:72%;opacity:1}}
.section{padding:68px 0}
.section.alt{background:#efece5}
.title{text-align:center;max-width:790px;margin:0 auto 30px}
.title h2{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.05em;line-height:1.04;margin:0 0 12px;color:var(--navy)}
.title p{color:var(--muted);line-height:1.7;margin:0}
.trust-strip{
 margin-top:-20px;position:relative;z-index:5;
 display:grid;grid-template-columns:repeat(4,1fr);gap:12px
}
.trust-card{
 background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px;
 box-shadow:var(--shadow-soft)
}
.trust-card strong{display:block;color:var(--navy);margin-bottom:5px}
.trust-card span{font-size:.84rem;color:var(--muted);line-height:1.5}
.main-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:28px;align-items:start}
.formbox{
 background:var(--white);border:1px solid var(--line);border-radius:28px;padding:26px;
 box-shadow:var(--shadow);position:sticky;top:86px
}
.form-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.form-head strong{font-size:1rem;color:var(--navy)}
.form-head span{font-size:.78rem;color:var(--muted);font-weight:800}
.progress{height:7px;background:#edf0ef;border-radius:999px;overflow:hidden;margin-bottom:20px}
.progress div{height:100%;background:linear-gradient(90deg,var(--sage),#90ab9a);transition:width .25s ease}
.step{display:none}
.step.active{display:block;animation:stepIn .24s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step h3{font-size:1.55rem;line-height:1.15;letter-spacing:-.03em;margin:0 0 8px;color:var(--navy)}
.sub{font-size:.91rem;color:var(--muted);line-height:1.55;margin-bottom:16px}
.options{display:grid;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 border:1px solid var(--line);border-radius:14px;padding:14px 15px;
 font-weight:850;cursor:pointer;background:#fff;
 transition:border-color .15s ease,background .15s ease,transform .15s ease
}
.choice label:hover{border-color:#cbd5d0;transform:translateY(-1px)}
.choice input:checked+label{border-color:var(--sage);background:var(--sage-soft);box-shadow:0 0 0 2px rgba(111,141,124,.08)}
.field{display:grid;gap:6px;margin:11px 0}
.field label{font-size:.82rem;font-weight:900;color:#34465d}
.field input,.field select{
 width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
 background:#fff;color:var(--ink);outline:none
}
.field input:focus,.field select:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(111,141,124,.12)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:10px;margin-top:18px}
.actions .btn{flex:1}
.btn.back{background:#eef1f2;color:#44536a}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:12px}
.consent input{margin-top:4px}
.error{display:none;background:#fff1f1;border:1px solid #efcaca;color:#922;padding:11px 12px;border-radius:11px;font-size:.84rem;margin-bottom:13px}
.assurance{
 display:grid;gap:12px
}
.assurance-card{
 display:flex;gap:14px;align-items:flex-start;
 background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow-soft)
}
.icon{
 flex:0 0 42px;width:42px;height:42px;border-radius:14px;
 display:grid;place-items:center;background:var(--gold-soft);color:#7c5b33;font-weight:950
}
.assurance-card strong{display:block;color:var(--navy);margin:2px 0 5px}
.assurance-card p{margin:0;color:var(--muted);line-height:1.62;font-size:.92rem}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.process-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft)}
.process-card .num{width:38px;height:38px;border-radius:12px;background:var(--sage-soft);display:grid;place-items:center;font-weight:950;color:#4c6e5b}
.process-card h3{color:var(--navy);margin:14px 0 8px}
.process-card p{color:var(--muted);line-height:1.62;margin:0}
.experience{
 display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
 background:linear-gradient(135deg,#132b44,#1f4563);
 color:#fff;border-radius:30px;padding:clamp(28px,5vw,52px);overflow:hidden;position:relative
}
.experience:after{
 content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-120px;top:-130px;
 background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)
}
.experience h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.045em;margin:0 0 14px}
.experience p{color:#d6e0e9;line-height:1.72;max-width:650px}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:2}
.fact{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);border-radius:18px;padding:18px}
.fact strong{display:block;font-size:1.15rem;margin-bottom:5px}
.fact span{font-size:.82rem;color:#cbd8e4;line-height:1.45}
.network{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.network a{
 background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;
 box-shadow:var(--shadow-soft);transition:transform .18s ease,border-color .18s ease
}
.network a:hover{transform:translateY(-2px);border-color:#cfd8d2}
.network strong{display:block;color:var(--navy);margin-bottom:7px}
.network span{color:var(--muted);font-size:.9rem;line-height:1.55}
.network em{display:block;margin-top:12px;font-style:normal;color:#587766;font-weight:900;font-size:.83rem}
.faq{display:grid;gap:10px;max-width:900px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-soft)}
summary{cursor:pointer;font-weight:900;color:var(--navy)}
details p{color:var(--muted);line-height:1.65;margin:10px 0 0}
footer{background:#10253d;color:#c8d3de;padding:34px 0;font-size:.84rem}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footerlinks{display:flex;gap:12px;flex-wrap:wrap}
footer a{color:#fff}
.footer-small{margin-top:15px;max-width:960px;line-height:1.55;color:#9eb0c2}
.chat-launch{
 position:fixed;right:20px;bottom:20px;z-index:60;
 border:0;border-radius:999px;background:var(--navy);color:#fff;
 padding:13px 16px;box-shadow:0 16px 38px rgba(18,41,67,.28);
 font-weight:900;cursor:pointer
}
.chat{
 position:fixed;right:20px;bottom:78px;z-index:65;width:min(370px,calc(100vw - 30px));
 background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(20,38,58,.25);
 overflow:hidden;display:none
}
.chat.open{display:block;animation:chatIn .18s ease}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-head{background:var(--navy);color:#fff;padding:15px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-head strong{font-size:.96rem}
.chat-close{border:0;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer}
.chat-body{padding:15px;max-height:430px;overflow:auto}
.botmsg{background:#f2f5f4;border-radius:14px 14px 14px 4px;padding:11px 12px;color:#43536a;line-height:1.5;font-size:.88rem;margin-bottom:11px}
.quick{display:grid;gap:8px}
.quick button{
 border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 11px;text-align:left;
 color:var(--navy);font-weight:800;cursor:pointer
}
.quick button:hover{background:var(--sage-soft);border-color:#cad8cf}
.chat-note{font-size:.7rem;color:#8893a2;margin-top:10px;line-height:1.45}
.legalmain{padding:56px 0}
.legal{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:25px;padding:clamp(25px,5vw,50px);box-shadow:var(--shadow)}
.legal h1{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.05em;color:var(--navy);margin-top:0}
.legal h2,.legal h3{color:var(--navy);margin-top:28px}
.legal p,.legal li{color:var(--muted);line-height:1.72}
.verify-wrap{min-height:76vh;display:grid;place-items:center;padding:45px 0}
.verify-card{max-width:620px;width:92vw;background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.code-input{font-size:2rem;letter-spacing:.32em;text-align:center;font-weight:950}
.phone-code{font-size:2.1rem;letter-spacing:.16em;font-weight:950;color:var(--navy);background:var(--gold-soft);border-radius:16px;padding:16px 18px;text-align:center;margin:16px 0}

/* Smartphone Funnel V3 – kompakter 3-Schritt-Leadgenerator */
.smartphone-funnel{overflow:visible}
.funnel-kicker{font-size:.72rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:#587766;margin-bottom:9px}
.form-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 9px}
.form-overview span{display:flex;align-items:center;gap:7px;background:#f5f7f6;border:1px solid var(--line);border-radius:11px;padding:8px 9px;font-size:.73rem;font-weight:850;color:#425268;line-height:1.2}
.form-overview b{width:21px;height:21px;flex:0 0 21px;display:grid;place-items:center;border-radius:7px;background:var(--sage-soft);color:#4f705e;font-size:.7rem}
.form-overview-note{margin:0 0 13px;color:var(--muted);font-size:.79rem;line-height:1.4}
.compact-options{grid-template-columns:1fr 1fr;gap:8px}
.compact-options .choice label{min-height:52px;padding:11px 12px;font-size:.84rem;line-height:1.22}
.compact-fields{gap:9px}
.question-label{margin:6px 0 8px;font-size:.78rem;font-weight:950;color:#34465d;text-transform:uppercase;letter-spacing:.04em}
.goal-label{margin-top:17px}
.verification-note{text-align:center;font-size:.76rem;color:var(--muted);font-weight:750;margin-top:10px}

@media(max-width:960px){
 .hero-grid,.main-grid,.experience{grid-template-columns:1fr}
 .formbox{position:static}
 .trust-strip,.process,.network{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .navlinks a:not(.navcta){display:none}
 .hero{padding-top:42px}
 .trust-strip,.process,.network,.fact-grid,.two{grid-template-columns:1fr}
 .visual-inner{min-height:350px}
 .hero-visual{padding:12px}
 .section{padding:52px 0}
 .chat-launch{right:12px;bottom:12px}
 .chat{right:12px;bottom:66px}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


@media(max-width:620px){
 .hero-grid{display:block}
 .hero-visual{display:none}
 .hero{padding:28px 0 34px}
 .hero h1{font-size:clamp(2.35rem,12vw,3.6rem);margin-bottom:12px}
 .hero-copy{font-size:.98rem;line-height:1.55}
 .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
 .hero-actions .secondary{display:none}
 .trustrow{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;font-size:.78rem}
 .hero-note{font-size:.72rem}
 .trust-strip{display:none}
 #bewertung{padding-top:18px}
 .main-grid{display:flex;flex-direction:column;gap:22px}
 .formbox{order:-1;border-radius:20px;padding:17px 14px 14px;box-shadow:0 14px 34px rgba(20,38,58,.11)}
 .assurance{order:2}
 .form-head{margin-bottom:9px}
 .form-head strong{font-size:.95rem}
 .progress{height:6px;margin-bottom:15px}
 .step h3{font-size:1.34rem;margin-bottom:5px}
 .sub{font-size:.82rem;line-height:1.38;margin-bottom:11px}
 .form-overview{gap:5px}
 .form-overview span{display:block;text-align:center;padding:7px 4px;font-size:.66rem}
 .form-overview b{margin:0 auto 4px}
 .compact-options{grid-template-columns:1fr 1fr;gap:7px}
 .compact-options .choice label{min-height:48px;padding:9px 9px;font-size:.79rem;border-radius:12px}
 .field{margin:8px 0;gap:4px}
 .field label{font-size:.75rem}
 .field input,.field select{padding:11px 12px;border-radius:11px;font-size:16px}
 .compact-fields{grid-template-columns:1fr 1fr!important;gap:7px}
 .question-label{margin:4px 0 6px;font-size:.7rem}
 .goal-label{margin-top:12px}
 .consent{font-size:.69rem;line-height:1.35;margin-top:9px}
 .actions{margin-top:11px;gap:7px}
 .mobile-sticky-actions{position:sticky;bottom:0;z-index:8;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 24%);padding-top:15px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
 .actions .btn{padding:12px 10px;font-size:.84rem}
 .verification-note{font-size:.69rem;margin-top:7px}
 .assurance .title{display:none}
 .assurance-card{padding:15px;border-radius:16px}
 .assurance-card:nth-of-type(2){display:none}
 .section{padding:38px 0}
}


/* Mobile Startseiten-Fix 2026-09-04
   - kein Abschneiden mehr unter der Kopfzeile
   - kompaktere mobile Kopfzeile
   - Hero/Einleitung bleibt als sauberer Start sichtbar
   - Sprung zum Formular endet mit Luft oberhalb der Karte
*/
@media(max-width:620px){
  .topbar{
    position:relative;
    top:auto;
    backdrop-filter:none;
  }
  .nav{
    padding:10px 0;
    gap:10px;
    align-items:center;
  }
  .brand{
    font-size:1.02rem;
    line-height:1.05;
    max-width:61%;
  }
  .brand small{
    font-size:.58rem;
    line-height:1.25;
    margin-top:4px;
  }
  .navcta{
    padding:10px 13px!important;
    font-size:.78rem!important;
    line-height:1.15;
    text-align:center;
    flex:0 0 auto;
  }
  .hero{
    display:block!important;
    padding:26px 0 24px;
  }
  .hero-grid{display:block!important}
  .hero h1{
    font-size:clamp(2.35rem,10.8vw,3.15rem);
    line-height:.98;
    margin:14px 0 14px;
  }
  .hero-copy{
    font-size:.94rem;
    line-height:1.52;
    margin-bottom:0;
  }
  .hero-actions{margin-top:17px}
  .hero-actions .btn.primary{
    width:100%;
    min-height:50px;
    font-size:.94rem;
  }
  .trustrow{
    margin-top:14px;
    grid-template-columns:1fr 1fr;
  }
  .trustrow span{
    padding:7px 9px;
    font-size:.7rem;
  }
  .hero-note{display:none}
  #bewertung{
    scroll-margin-top:14px;
    padding-top:18px;
  }
  .formbox{
    scroll-margin-top:14px;
  }
}
