@charset "UTF-8";
/* wirverkaufenihreimmobilie.at – Gestaltung wie eigenheim-homes.at, Schriften lokal */
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url("cormorant-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant";font-weight:600;font-display:swap;src:url("cormorant-600.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:300;font-display:swap;src:url("jost-300.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url("jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url("jost-500.woff2") format("woff2")}

:root{--blau:#07396f;--blau-dunkel:#021d38;--blau-hell:#eef3f8;--akzent:#1f5fbf;--gold:#c6a15b;--gold-hell:#dfc98e;--gold-dunkel:#8f6d2e;
  --tinte:#122033;--leise:#5a6878;--linie:#dce4ec;--serif:"Cormorant",Georgia,serif;--sans:"Jost",-apple-system,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--tinte);background:#fff;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.huelle{width:min(1140px,calc(100% - 40px));margin:auto}
.schmal{width:min(800px,calc(100% - 40px))}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0}
h2{font-size:clamp(30px,3.8vw,44px);color:var(--blau-dunkel);margin:8px 0 34px}
.dach{font-size:11px;letter-spacing:.16em;font-weight:500;color:var(--gold-hell);margin:0}
.dach.blau{color:var(--gold-dunkel)}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:3px;
  font-size:12px;font-weight:500;letter-spacing:.06em;border:1px solid var(--gold);transition:transform .15s,box-shadow .15s;cursor:pointer;font-family:var(--sans)}
.knopf:hover{transform:translateY(-1px)}
.knopf-voll{background:var(--blau-dunkel);color:var(--gold-hell);box-shadow:0 8px 24px rgba(2,29,56,.18)}
.knopf-hell{background:#fff;color:var(--blau-dunkel);border-color:#fff}
.breit{width:100%}

/* Kopf */
.kopf{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 20px rgba(0,0,0,.07)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.marke img{height:62px;width:auto}
.kopf-rechts{display:flex;align-items:center;gap:22px}
.kopf-tel{font-weight:500;color:var(--blau)}

/* Bühne */
.buehne{position:relative;background-size:cover;background-position:center;color:#fff;padding:96px 0 70px}
.buehne::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,29,56,.92) 0%,rgba(7,57,111,.78) 50%,rgba(7,57,111,.25) 100%)}
.buehne-innen{position:relative}
.buehne h1{font-size:clamp(46px,7vw,86px);margin:16px 0 20px;color:#f8f4e8}
.buehne-text{max-width:56ch;font-size:17px;color:rgba(255,255,255,.9);margin:0}
.buehne-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.buehne-punkte{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:28px}
.buehne-punkte li{border-left:2px solid var(--gold);padding-left:14px}
.buehne-punkte b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:#fff}
.buehne-punkte span{font-size:13px;color:rgba(255,255,255,.8)}

/* Abschnitte */
.abschnitt{padding:84px 0}
.abschnitt-hell{background:var(--blau-hell)}
.abschnitt-blau{background:var(--blau-dunkel);color:#fff}
.abschnitt-blau h2{color:#f8f4e8}

.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.schritte li{border-top:2px solid var(--blau);padding-top:18px}
.schritte span{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--gold-dunkel);line-height:1}
.schritte b{display:block;font-weight:500;font-size:17px;margin:10px 0 6px;color:var(--blau-dunkel)}
.schritte p{margin:0;color:var(--leise);font-size:14.5px}

.gruende{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gruende div{border:1px solid rgba(198,161,91,.35);border-radius:10px;padding:28px}
.gruende h3{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 8px;color:var(--gold-hell)}
.gruende p{margin:0;color:rgba(255,255,255,.85)}

.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}
.person{display:flex;gap:18px;align-items:center;border:1px solid var(--linie);border-radius:10px;padding:16px;background:#fff}
.person img{width:96px;height:120px;object-fit:cover;object-position:center 18%;border-radius:6px;flex-shrink:0;background:var(--blau-hell)}
.person div{display:flex;flex-direction:column;gap:2px;min-width:0}
.person-laender{margin:0 0 4px;font-size:11px;letter-spacing:.12em;font-weight:500;color:var(--gold-dunkel);text-transform:uppercase}
.person b{font-weight:500;font-size:17px;color:var(--blau-dunkel)}
.person a{color:var(--akzent);font-size:14px;word-break:break-word}

/* Formular */
.formular-raster{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.formular-raster>div>p{color:var(--leise);font-size:16px}
.haken{list-style:none;padding:0;margin:20px 0}
.haken li{position:relative;padding-left:28px;margin:9px 0}
.haken li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--gold-dunkel);border-bottom:2px solid var(--gold-dunkel);transform:rotate(-45deg)}
.empfaenger{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--gold);border-radius:8px;padding:12px 16px;margin-top:26px}
.empfaenger[hidden]{display:none}
.empfaenger img{width:56px;height:70px;object-fit:cover;object-position:center 18%;border-radius:4px}
.empfaenger div{display:flex;flex-direction:column}
.empfaenger span{font-size:12px;color:var(--leise)}
.empfaenger b{font-weight:500;color:var(--blau-dunkel)}
.empfaenger a{color:var(--akzent);font-size:14px}

.karte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:30px;box-shadow:0 16px 45px rgba(13,42,72,.10);position:relative}
.karte label{display:block;font-size:12px;font-weight:500;color:var(--leise);margin-bottom:14px}
.karte input,.karte select,.karte textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid #ccd6e0;border-radius:4px;
  font:300 15px var(--sans);color:var(--tinte);background:#fff}
.karte input:focus,.karte select:focus,.karte textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 2px rgba(198,161,91,.2)}
.zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pruef{display:flex!important;gap:10px;align-items:flex-start;font-size:12.5px!important;line-height:1.5;margin:6px 0 18px!important}
.pruef input{width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--gold-dunkel)}
.pruef a{border-bottom:1px solid var(--gold)}
.fehler{border-color:#b4552a!important;background:#fdf6f2!important}
.hinweis{display:block;color:#9c3115;font-size:12px;margin-top:4px;font-weight:400}
.status{margin:14px 0 0;font-size:14px;min-height:20px}
.status.error{color:#9c3115}
.status.erfolg{color:#1c6b46;font-weight:500}
.karte button[disabled]{opacity:.65;cursor:default}

/* Fragen */
.fragen details{border-bottom:1px solid var(--linie);padding:16px 0}
.fragen summary{cursor:pointer;font-weight:500;font-size:17px;color:var(--blau-dunkel);list-style:none;position:relative;padding-right:30px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:22px;color:var(--gold-dunkel)}
.fragen details[open] summary::after{content:"–"}
.fragen p{margin:10px 0 0;color:var(--leise)}

/* Fuß */
.fuss{background:var(--blau-dunkel);color:rgba(255,255,255,.82);padding:56px 0 0;font-size:14px}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.fuss-logo{height:70px;width:auto;margin-bottom:14px}
.fuss a:hover{color:#fff}
.unterstrichen{border-bottom:1px solid var(--gold)}
.fuss-unten{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);
  margin-top:36px;padding:18px 0;font-size:12.5px;color:rgba(255,255,255,.6)}

@media (max-width:980px){
  .schritte{grid-template-columns:1fr 1fr}
  .gruende{grid-template-columns:1fr}
  .formular-raster{grid-template-columns:1fr;gap:30px}
}
@media (max-width:620px){
  .kopf-innen{min-height:70px}
  .marke img{height:48px}
  .kopf-tel{display:none}
  .kopf .knopf{min-height:40px;padding:0 14px;font-size:11px}
  .buehne{padding:64px 0 50px}
  .buehne-punkte{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .abschnitt{padding:60px 0}
  .schritte,.zeile{grid-template-columns:1fr}
  .zeile{gap:0}
  .karte{padding:22px}
  .fuss-raster{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.knopf{transition:none}}