

:root {
  --navy:#082d69;
  --navy-dark:#061f4d;
  --red:#d91f26;
  --ink:#172033;
  --muted:#596375;
  --line:#d9e1eb;
  --soft:#f5f7fa;
  --paper:#fff;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1,h2,h3 { text-wrap:balance; }

.siteHeader { height:108px; max-width:1440px; margin:0 auto; padding:0 5.5vw; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; }
.brand { width:270px; height:100px; display:block; overflow:hidden; text-decoration:none; }
.brandCrop { position:relative; display:block; width:270px; height:100px; overflow:hidden; }
.brandCrop img { position:absolute; width:270px; max-width:none; height:auto; left:0; top:-30px; }
.headerContact { display:flex; align-items:center; gap:12px; }
.phone { color:var(--navy); text-decoration:none; }
.phone strong { display:block; font-size:1.18rem; letter-spacing:.01em; }
.phone small { display:block; margin-top:3px; color:var(--ink); }
.phoneIcon { width:42px; height:42px; border:1.5px solid #15191f; border-radius:50%; display:grid; place-items:center; color:#15191f; font-size:1.25rem; }

.hero { position:relative; min-height:625px; overflow:hidden; border-top:1px solid #edf0f4; }
.heroImage { position:absolute; inset:0; background:url('hausbewertung-hero.png') center/cover no-repeat; }
.heroShade { position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.985) 36%,rgba(255,255,255,.82) 52%,rgba(255,255,255,.08) 75%); }
.heroContent { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:64px 5.5vw 54px; }
.heroContent>* { max-width:620px; }
.eyebrow,.sectionKicker { margin:0 0 12px; color:var(--red); text-transform:uppercase; font-size:.75rem; line-height:1.2; letter-spacing:.14em; font-weight:800; }
h1 { margin:0 0 17px; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.7rem,4.7vw,4.65rem); line-height:1.02; letter-spacing:-.035em; }
.lead { margin:0 0 22px; color:#242b38; font-size:clamp(1.05rem,1.7vw,1.25rem); line-height:1.45; font-weight:600; }
.heroContent>p:not(.eyebrow):not(.lead) { margin:10px 0; font-size:.98rem; line-height:1.6; }
.benefits { display:flex; gap:28px; margin:25px 0 28px; font-weight:700; }
.benefits>span { display:flex; align-items:center; gap:8px; }
.check { display:inline-grid; place-items:center; width:20px; height:20px; flex:0 0 auto; border-radius:50%; color:#fff; background:var(--navy); font-size:.75rem; font-weight:900; }
.primaryButton { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:55px; padding:0 23px; border:0; border-radius:3px; background:var(--red); color:#fff; text-decoration:none; font-weight:800; box-shadow:0 10px 24px rgba(217,31,38,.18); transition:transform .2s ease,background .2s ease; }
.primaryButton:hover,.primaryButton:focus-visible { background:#bb171d; transform:translateY(-2px); }
.primaryButton span { font-size:1.35rem; }

.stepsSection { max-width:1280px; margin:0 auto; padding:62px 5.5vw 72px; text-align:center; }
.stepsSection h2 { margin:0; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.8rem,3vw,2.45rem); letter-spacing:-.02em; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); margin-top:43px; }
.step { position:relative; padding:4px 5vw 0; }
.step+.step { border-left:1px solid #c3ccd8; }
.stepNumber { position:absolute; left:max(18px,3vw); top:3px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--navy); font-weight:800; font-size:1.08rem; }
.stepIcon { display:block; height:50px; color:var(--navy); font-family:Georgia,serif; font-size:3rem; line-height:1; }
.step h3 { margin:18px 0 8px; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:1.12rem; }
.step p { margin:0 auto; max-width:330px; color:var(--muted); font-size:.91rem; line-height:1.55; }

.infoSection { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1280px; margin:0 auto; padding:0 5.5vw 75px; }
.infoCard { min-width:0; padding:35px; border:1px solid var(--line); border-radius:5px; background:linear-gradient(145deg,#fcfdfe,#f3f6fa); box-shadow:0 14px 36px rgba(9,46,112,.055); }
.cardEyebrow { margin:0 0 9px; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.infoCard h2,.profile h2,.formPanel h2,.finalCta h2 { margin:0; color:var(--navy); font-family:Georgia,'Times New Roman',serif; letter-spacing:-.02em; }
.infoCard h2 { font-size:1.5rem; }
.infoCard>p:not(.cardEyebrow) { margin:13px 0 23px; color:var(--muted); line-height:1.58; }
.tickGrid { display:grid; grid-template-columns:1fr 1fr; gap:13px 20px; margin:0; padding:0; list-style:none; }
.tickGrid li { display:flex; align-items:flex-start; gap:9px; font-size:.9rem; line-height:1.35; }
.tickGrid .check { width:18px; height:18px; margin-top:1px; background:transparent; color:var(--navy); font-size:1rem; }

.contactSection { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.28fr); gap:50px; max-width:1280px; margin:0 auto; padding:18px 5.5vw 78px; }
.profile { min-width:0; padding-right:42px; border-right:1px solid #c4ccd8; }
.profile h2,.formPanel h2 { font-size:clamp(1.8rem,3vw,2.3rem); }
.profileIntro { display:grid; grid-template-columns:185px 1fr; gap:23px; margin-top:23px; }
.portrait { width:185px; height:292px; border-radius:4px; object-fit:cover; object-position:center 13%; box-shadow:0 12px 30px rgba(15,32,60,.14); }
.profileIntro p { margin:0 0 17px; font-size:.94rem; line-height:1.57; }
.contactCard { display:grid; gap:14px; margin-top:24px; padding:25px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:0 12px 30px rgba(9,46,112,.055); }
.contactCard p,.contactCard a { position:relative; margin:0; padding-left:36px; color:var(--ink); line-height:1.45; text-decoration:none; overflow-wrap:anywhere; }
.contactCard a { color:#0b47a8; font-weight:800; }
.contactCard p>span,.contactCard a>span { position:absolute; left:0; top:0; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--navy); border-radius:50%; color:var(--navy); }
.trustNote { margin-top:22px; padding:20px 22px; border-left:3px solid var(--red); background:#f7f8fa; }
.trustNote strong { color:var(--navy); }
.trustNote p { margin:7px 0 0; color:var(--muted); font-size:.87rem; line-height:1.52; }

.formIntro { margin:9px 0 24px; color:var(--muted); line-height:1.52; }
.formGrid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px 16px; }
.formGrid label { grid-column:span 3; display:flex; flex-direction:column; gap:6px; color:#2b3444; font-size:.78rem; font-weight:700; }
.formGrid label.wide { grid-column:span 4; }
.formGrid label.full { grid-column:1/-1; }
.formGrid label:nth-of-type(8),.formGrid label:nth-of-type(9),.formGrid label:nth-of-type(10),.formGrid label:nth-of-type(11) { grid-column:span 2; }
.formGrid b,.consent b { color:var(--red); }
.optional { color:#7b8492; font-weight:400; }
input,select,textarea { width:100%; border:1px solid #c7d1de; border-radius:3px; background:#fff; color:var(--ink); font:inherit; font-weight:400; outline:none; transition:border-color .2s,box-shadow .2s; }
input,select { height:43px; padding:0 11px; }
textarea { padding:10px 11px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:#2d5fa8; box-shadow:0 0 0 3px rgba(45,95,168,.12); }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; }
.consent { display:flex; align-items:flex-start; gap:9px; margin:16px 0 0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.consent+.consent { margin-top:10px; }
.consent input { width:17px; height:17px; flex:0 0 auto; margin-top:1px; }
.consent a { color:#0b47a8; font-weight:700; }
.privacyHint { margin:12px 0 17px; color:#727b89; font-size:.73rem; line-height:1.45; }
.submitButton { width:100%; min-height:53px; display:flex; align-items:center; justify-content:center; gap:20px; border:0; border-radius:3px; background:var(--red); color:#fff; font-size:1rem; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(217,31,38,.17); }
.submitButton:hover,.submitButton:focus-visible { background:#bb171d; }
.submitButton:disabled { background:#9c6a6d; cursor:wait; box-shadow:none; }
.submitButton span { font-size:1.35rem; }
.formStatus { margin:12px 0 0; padding:12px 14px; border-radius:3px; background:#edf5ff; color:var(--navy); font-size:.85rem; }
.formStatus.error { background:#fff0f0; color:#8c151a; }
.successPanel { min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:45px; border:1px solid #cbdacf; border-radius:5px; background:#f4f8f4; text-align:center; }
.successPanel>span { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:#1c6f39; color:#fff; font-size:1.5rem; }
.successPanel h3 { margin:19px 0 8px; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:1.65rem; }
.successPanel p { max-width:520px; color:var(--muted); line-height:1.6; }
.successPanel button { margin-top:12px; border:0; background:transparent; color:#0b47a8; font-weight:700; text-decoration:underline; cursor:pointer; }

.finalCta { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; max-width:1160px; margin:0 auto 14px; padding:21px 32px; border-radius:4px; background:linear-gradient(110deg,#0b3b89,var(--navy-dark)); color:#fff; box-shadow:0 12px 30px rgba(6,31,79,.18); }
.finalCta h2 { color:#fff; font-size:1.28rem; }
.finalCta p { margin:5px 0 0; color:#d9e5f9; }
.finalCta>a { min-height:44px; display:inline-grid; place-items:center; padding:0 24px; border-radius:3px; background:#fff; color:var(--navy); text-decoration:none; font-weight:800; }
.houseMark { width:58px; height:58px; display:grid; place-items:center; border:1px solid #fff; border-radius:50%; font-size:2.1rem; }
footer { display:grid; grid-template-columns:1.2fr 1.4fr .8fr 1fr; gap:38px; padding:35px max(5.5vw,calc((100vw - 1280px)/2)); background:#151a21; color:#f4f6fa; font-size:.82rem; }
footer>div { display:flex; flex-direction:column; gap:8px; }
footer a { color:#f4f6fa; text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer span { line-height:1.45; }

.legalPage { min-height:100vh; background:#f5f7fa; }
.legalHeader { height:108px; display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:auto; padding:0 30px; background:#fff; }
.legalHeader>a:last-child { color:var(--navy); font-weight:700; text-decoration:none; }
.legalContent { max-width:900px; margin:44px auto 60px; padding:48px 56px; border:1px solid var(--line); background:#fff; box-shadow:0 18px 50px rgba(9,46,112,.07); }
.legalContent h1 { font-size:clamp(2.4rem,5vw,3.7rem); }
.legalContent h2 { margin:31px 0 10px; color:var(--navy); font-family:Georgia,'Times New Roman',serif; font-size:1.25rem; }
.legalContent p { margin:9px 0; color:#3d4655; line-height:1.68; }
.legalContent a { color:#0b47a8; }
.legalNote { margin-top:36px!important; color:#737c89!important; font-size:.85rem; }
.legalFooter { display:flex; justify-content:center; gap:28px; padding:28px; }

@media (max-width:820px) {
  .siteHeader,.legalHeader { height:86px; padding:0 22px; }
  .brand,.brandCrop { width:205px; height:82px; }
  .brandCrop img { width:205px; top:-23px; }
  .phone small { display:none; }
  .phone strong { font-size:.95rem; }
  .phoneIcon { width:35px; height:35px; }
  .hero { min-height:auto; }
  .heroImage { inset:0 0 auto; height:315px; background-position:62% center; }
  .heroShade { background:linear-gradient(180deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.08) 210px,#fff 310px); }
  .heroContent { padding:255px 22px 48px; }
  .heroContent>* { max-width:100%; }
  .eyebrow { margin-top:25px; }
  h1 { font-size:clamp(2.5rem,11vw,4rem); }
  .benefits { gap:12px; flex-wrap:wrap; }
  .steps { grid-template-columns:1fr; gap:30px; }
  .step { padding:10px 24px 30px; }
  .step+.step { border-left:0; border-top:1px solid var(--line); padding-top:36px; }
  .stepNumber { left:4px; top:7px; }
  .infoSection { grid-template-columns:1fr; padding:0 22px 58px; }
  .infoCard { padding:27px 23px; }
  .contactSection { grid-template-columns:1fr; gap:44px; padding:12px 22px 58px; }
  .profile { padding-right:0; border-right:0; }
  .finalCta { grid-template-columns:auto 1fr; margin:0 22px 14px; }
  .finalCta>a { grid-column:1/-1; }
  footer { grid-template-columns:1fr 1fr; padding:35px 22px; }
  .legalHeader>a:last-child { font-size:.82rem; }
  .legalContent { margin:25px 20px 45px; padding:34px 28px; }
}

@media (max-width:540px) {
  .brand,.brandCrop { width:175px; height:74px; }
  .brandCrop img { width:175px; top:-20px; }
  .phoneIcon { display:none; }
  .phone strong { font-size:0; }
  .phone strong::after { content:'Anrufen'; font-size:.88rem; }
  .primaryButton { width:100%; font-size:.92rem; }
  .tickGrid { grid-template-columns:1fr; }
  .profileIntro { grid-template-columns:1fr; }
  .portrait { width:185px; height:278px; }
  .formGrid { grid-template-columns:1fr; }
  .formGrid label,.formGrid label.wide,.formGrid label.full,.formGrid label:nth-of-type(8),.formGrid label:nth-of-type(9),.formGrid label:nth-of-type(10),.formGrid label:nth-of-type(11) { grid-column:1; }
  .successPanel { min-height:380px; padding:30px 20px; }
  .finalCta { grid-template-columns:1fr; text-align:center; }
  .houseMark { margin:auto; }
  .finalCta>a { grid-column:1; }
  footer { grid-template-columns:1fr; }
  .legalHeader .brandCrop { width:150px; }
  .legalHeader .brandCrop img { width:150px; top:-17px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
