/* =========================================================
   Wertwerk – Design System
   Farbwelt aus dem Mockup Immo_Portal.png
   ========================================================= */

:root{
  color-scheme: light;
  --ink:#14171b;
  --ink-soft:#4a5058;
  --ink-faint:#7b818a;
  --rose:#c4787d;
  --rose-dark:#ab5f65;
  --rose-deep:#9d4a52;
  --rose-mist:#efe7e2;
  --rose-tint:#f8e9e5;
  --sand:#f3f0ec;
  --shell:#f9f8f5;
  --white:#ffffff;
  --line:#e7e2dc;
  --line-soft:#efece7;
  --ok:#2e7d5b;
  --warn:#b08a3c;
  --shadow-card:0 1px 2px rgba(20,23,27,.04), 0 8px 24px rgba(20,23,27,.05);
  --shadow-float:0 2px 6px rgba(20,23,27,.06), 0 24px 60px rgba(20,23,27,.14);
  --display:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --script:"Caveat","Segoe Script",cursive;
  --wrap:1180px;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; color:var(--ink); text-wrap:balance; margin:0; letter-spacing:-.022em; line-height:1.1}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--rose-dark); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap--narrow{max-width:760px}

.eyebrow{
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rose-deep); margin:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-pill);
  background:var(--rose); color:var(--white);
  font-family:var(--body); font-weight:600; font-size:16px;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{background:var(--rose-dark); transform:translateY(-1px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn--sm{padding:11px 20px; font-size:15px}
.btn--wide{width:100%}
.btn--ghost{background:var(--white); color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{background:var(--rose-tint); border-color:var(--rose-tint); color:var(--rose-deep)}
.btn--dark{background:var(--ink)}
.btn--dark:hover{background:#2a2f36}
.btn[disabled]{opacity:.45; pointer-events:none}

.link-more{color:var(--rose-deep); font-weight:600; font-size:15px; white-space:nowrap}
.link-more:hover{color:var(--rose-dark)}

/* ---------- Fotoflächen ---------- */
.ph{position:relative; overflow:hidden; background-color:var(--rose-tint); background-position:center; background-size:cover; background-repeat:no-repeat}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(249,248,245,.9); backdrop-filter:blur(12px); border-bottom:1px solid transparent}
.nav.is-stuck{border-bottom-color:var(--line-soft)}
.nav__inner{display:flex; align-items:center; gap:24px; height:76px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:.01em}
.brand__mark{width:34px; height:34px; flex:none}
.nav__links{display:flex; align-items:center; gap:22px; font-size:15px; font-weight:500; color:var(--ink-soft); white-space:nowrap}
.nav__links a{transition:color .15s ease}
.nav__links a:hover,.nav__links a.is-active{color:var(--rose-deep)}
.nav__right{display:flex; align-items:center; gap:12px; margin-left:auto}
.nav__icon{width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--ink-soft); transition:background .15s ease}
.nav__icon:hover{background:var(--rose-tint); color:var(--rose-deep)}
.nav__login{font-size:15px; font-weight:500; color:var(--ink-soft); white-space:nowrap}
.nav__login:hover{color:var(--rose-deep)}
.nav__burger{display:none; width:40px; height:40px; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line)}

/* ---------- Hero Startseite ---------- */
.hero{position:relative; padding-block:56px 72px; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:48px; align-items:center}
.hero__copy{display:flex; flex-direction:column; gap:20px}
.hero h1{font-size:clamp(38px,4.5vw,58px); line-height:1.03; max-width:19ch}
.hero__lead{font-size:18px; color:var(--ink-soft); max-width:36ch}
.hero__cta{align-self:flex-start; margin-top:2px}
.hero__trust{display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:6px}
.trust{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-soft)}
.trust svg{color:var(--rose); flex:none}

.hero__stage{position:relative}
.hero__photo{aspect-ratio:5/4; border-radius:var(--r-lg)}
.hero__note{
  position:absolute; left:-14px; top:22px; z-index:3;
  font-family:var(--script); font-size:clamp(21px,2.2vw,28px); font-weight:600;
  color:var(--rose-deep); line-height:1.25; transform:rotate(-6deg); max-width:9.5em;
  text-shadow:0 1px 12px rgba(249,248,245,.95), 0 0 24px rgba(249,248,245,.8);
}

.vcard{
  position:absolute; right:-16px; bottom:-28px; z-index:2; width:min(300px,88%);
  background:var(--white); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--shadow-float); display:flex; flex-direction:column; gap:14px;
}
.vcard__top{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); font-weight:500}
.vcard__top .dots{margin-left:auto; color:var(--ink-faint); letter-spacing:.08em}
.vcard__label{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-soft)}
.vcard__value{font-family:var(--display); font-size:32px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.vcard__range{font-size:14px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-top:-6px}
.track{position:relative; height:5px; border-radius:var(--r-pill); background:linear-gradient(90deg,#f2ded9,#dfa8a6)}
.track__knob{
  position:absolute; top:50%; left:55%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--ink); border:3px solid var(--white);
  box-shadow:0 2px 6px rgba(20,23,27,.25); transition:left 1.1s cubic-bezier(.22,.75,.3,1);
}
.vcard__pos{display:flex; align-items:center; gap:12px; background:var(--sand); border-radius:var(--r-md); padding:12px 14px}
.vcard__pos .k{font-size:12.5px; color:var(--ink-soft)}
.vcard__pos .v{font-family:var(--display); font-weight:600; font-size:15.5px}
.vcard__pos svg{margin-left:auto; color:var(--rose)}
.scores{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid var(--line-soft); padding-top:14px}
.score .n{font-family:var(--display); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.score .n span{color:var(--ink-faint); font-weight:500; font-size:13px}
.score .k{font-size:12.5px; color:var(--ink-faint)}

/* ---------- Seiten-Kopf (Unterseiten) ---------- */
.pagehead{padding-block:44px 40px; border-bottom:1px solid var(--line-soft); background:var(--white)}
.pagehead__inner{display:flex; flex-direction:column; gap:14px}
.pagehead h1{font-size:clamp(30px,4vw,46px)}
.pagehead p{color:var(--ink-soft); font-size:17px; max-width:56ch}
.crumbs{display:flex; gap:8px; font-size:13.5px; color:var(--ink-faint); flex-wrap:wrap}
.crumbs a:hover{color:var(--rose-deep)}
.crumbs span{color:var(--line)}

/* ---------- Sektionen ---------- */
.section{padding-block:76px}
.section--sm{padding-block:52px}
.section--tint{background:var(--white)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:32px; align-items:end; margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,3.6vw,42px)}
.sec-head p{color:var(--ink-soft); font-size:16.5px; max-width:44ch}
.sec-head--row{grid-template-columns:minmax(0,1fr) auto; align-items:center; margin-bottom:28px}
.sec-head--row h2{font-size:clamp(26px,3vw,34px)}

/* Schritte */
.steps{display:grid; grid-template-columns:repeat(3,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr); gap:30px}
.steps--4 .step{border-right:0; padding:0}
.step{display:flex; gap:18px; padding-right:28px; border-right:1px solid var(--line)}
.step:last-child{border-right:0; padding-right:0}
.step:not(:first-child){padding-left:32px}
.step__icon{flex:none; width:56px; height:56px; border-radius:50%; background:var(--rose-tint); display:grid; place-items:center; color:var(--rose-deep)}
.step h3{font-size:19px; margin-bottom:7px; letter-spacing:-.01em}
.step p{font-size:15.5px; color:var(--ink-soft)}

/* Kennzahlen */
.stats{display:grid; grid-template-columns:repeat(3,1fr); background:var(--sand); border-radius:var(--r-lg); padding:26px 32px; margin-top:52px}
.stat{display:flex; align-items:center; gap:16px; padding-inline:8px}
.stat + .stat{border-left:1px solid #e3ded8; padding-left:32px}
.stat__icon{flex:none; width:44px; height:44px; border-radius:50%; background:var(--white); display:grid; place-items:center; color:var(--rose)}
.stat__n{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.stat__k{font-size:14.5px; color:var(--ink-soft)}

/* ---------- Objektkarten ---------- */
.showcase{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:32px; align-items:start}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)}
.card__media{position:relative; aspect-ratio:16/11}
.card__media > .ph{position:absolute; inset:0}
.card__fav{position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--rose)}
.card__body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px}
.card__type{font-family:var(--display); font-weight:600; font-size:15.5px}
.card__loc{font-size:13.5px; color:var(--ink-faint)}
.card__price{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:6px}
.card__range{font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.card__tag{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--rose-deep); margin-top:10px; font-weight:500}

/* PRO-Panel */
.pro{background:var(--rose-mist); border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden}
.pro > *{position:relative; z-index:1}
.pro h3{font-size:clamp(24px,2.6vw,30px); margin:12px 0 14px; line-height:1.12; max-width:15ch}
.pro p{font-size:15.5px; color:#5c534f; max-width:30ch}
.pro .btn{margin-top:20px}
.pro__photo{position:absolute; z-index:0; right:-18px; top:104px; width:162px; aspect-ratio:3/4; border-radius:var(--r-md)}
.pro__list{display:flex; flex-direction:column; gap:9px; margin-top:22px; font-size:14.5px; color:#4f4744}
.pro__list li{display:flex; align-items:center; gap:10px}
.pro__list svg{color:var(--rose-dark); flex:none}
.pro__badge{display:inline-flex; align-items:center; gap:10px; margin-top:22px; background:var(--white); border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--shadow-card)}
.pro__badge b{font-family:var(--display); font-size:18px; letter-spacing:-.02em}
.pro__badge span{font-size:12.5px; color:var(--ink-soft); line-height:1.3}

/* ---------- Stimmen ---------- */
.voices{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.voice{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:22px; display:flex; flex-direction:column}
.voice__quote{font-size:15.5px; color:var(--ink); margin-bottom:18px; flex:1}
.voice__who{display:flex; align-items:center; gap:12px}
.voice__ava{width:44px; height:44px; flex:none; border-radius:50%}
.voice__name{font-weight:600; font-size:14.5px}
.voice__role{font-size:13px; color:var(--ink-faint)}
.voice__stars{margin-top:10px; color:var(--rose); font-size:13px; letter-spacing:.16em}

.claimline{display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); margin-top:44px; padding-top:26px; font-family:var(--display); font-size:15px; color:var(--ink-soft)}
.claimline::before{content:""; width:52px; height:1px; background:var(--rose); flex:none}

/* ---------- Footer ---------- */
.footer{background:var(--white); border-top:1px solid var(--line-soft); padding-block:52px 30px}
.footer__grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.footer__intro p{font-size:15px; color:var(--ink-soft); max-width:32ch; margin-top:14px}
.footer h4{font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.02em; margin-bottom:14px}
.footer ul{display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--ink-soft)}
.footer ul a:hover{color:var(--rose-deep)}
.footer__base{display:flex; flex-wrap:wrap; gap:16px; align-items:center; border-top:1px solid var(--line-soft); margin-top:40px; padding-top:22px; font-size:13.5px; color:var(--ink-faint)}
.footer__base nav{display:flex; gap:18px; margin-left:auto; flex-wrap:wrap}

/* ---------- Formulare ---------- */
.field{display:flex; flex-direction:column; gap:7px}
.field > label{font-size:14px; font-weight:600}
.field small{font-size:13px; color:var(--ink-faint)}
.input,select.input,textarea.input{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  font:inherit; font-size:15.5px; transition:border-color .15s ease, box-shadow .15s ease;
}
.input,select.input{height:50px}
textarea.input{height:auto}
.input:focus{outline:0; border-color:var(--rose); box-shadow:0 0 0 3px rgba(196,120,125,.18)}
.filterbar .btn{height:50px}
textarea.input{min-height:120px; resize:vertical}
.fieldrow{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.checkline{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-soft)}
.checkline input{margin-top:4px; accent-color:var(--rose)}

.choices{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.choice{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  padding:18px 14px; display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; text-align:center; transition:all .15s ease;
}
.choice svg{color:var(--rose)}
.choice:hover{border-color:var(--rose); background:var(--rose-tint)}
.choice.is-selected{border-color:var(--rose); background:var(--rose-tint); color:var(--rose-deep)}

/* ---------- Wizard ---------- */
.wizard{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:36px; align-items:start}
.wizard__panel{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-card)}
.wizard__bar{height:5px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden; margin-bottom:8px}
.wizard__fill{display:block; height:100%; width:25%; background:var(--rose); border-radius:var(--r-pill); transition:width .35s ease}
.wizard__meta{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-faint); margin-bottom:24px}
.wizard__step{display:flex; flex-direction:column; gap:20px}
.wizard__step h2{font-size:24px}
.wizard__step > p{color:var(--ink-soft); font-size:15.5px; margin-top:-10px}
.wizard__nav{display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap}
.wizard__nav .btn{flex:none}
.wizard__hint{font-size:13px; color:var(--ink-faint); margin-left:auto; text-align:right}
.aside-card{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; gap:16px}
.aside-card h3{font-size:18px}
.aside-card ul{display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:var(--ink-soft)}
.aside-card li{display:flex; gap:11px; align-items:flex-start}
.aside-card li svg{color:var(--rose); flex:none; margin-top:3px}

/* ---------- Ergebnis ---------- */
.result{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:start}
.result__main{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; gap:24px}
.result__value{font-family:var(--display); font-size:clamp(40px,5.5vw,60px); font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1}
.result__range{font-size:17px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.meterrow{display:flex; flex-direction:column; gap:14px}
.meter{display:grid; grid-template-columns:130px 1fr 56px; gap:14px; align-items:center; font-size:14.5px}
.meter__track{display:block; height:8px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden}
.meter__fill{display:block; height:100%; border-radius:var(--r-pill); background:var(--rose)}
.meter__val{text-align:right; font-family:var(--display); font-weight:600; font-variant-numeric:tabular-nums}
.factgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.fact{background:var(--white); padding:16px 18px}
.fact dt{font-size:13px; color:var(--ink-faint)}
.fact dd{margin:2px 0 0; font-family:var(--display); font-weight:600; font-size:16.5px}

/* ---------- Makler ---------- */
.filterbar{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:20px; display:grid; grid-template-columns:repeat(4,1fr) auto; gap:14px; align-items:end; box-shadow:var(--shadow-card)}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.chip{border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 16px; font-size:14px; background:var(--white); color:var(--ink-soft); transition:all .15s ease}
.chip:hover{border-color:var(--rose); color:var(--rose-deep)}
.chip.is-on{background:var(--rose-tint); border-color:var(--rose-tint); color:var(--rose-deep); font-weight:600}

.brokerlist{display:flex; flex-direction:column; gap:16px}
.broker{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:20px; display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:20px; align-items:center;
  transition:box-shadow .2s ease, transform .2s ease;
}
.broker:hover{box-shadow:var(--shadow-card); transform:translateY(-2px)}
.broker__photo{width:84px; height:84px; border-radius:var(--r-md); flex:none}
.broker__name{font-family:var(--display); font-weight:700; font-size:19px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.broker__meta{font-size:14px; color:var(--ink-faint); margin-top:2px}
.broker__tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.tag{font-size:12.5px; background:var(--sand); border-radius:var(--r-pill); padding:5px 11px; color:var(--ink-soft)}
.broker__right{display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right}
.scorebadge{display:flex; align-items:baseline; gap:5px; font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.03em; color:var(--rose-deep)}
.scorebadge span{font-size:13px; font-weight:500; color:var(--ink-faint)}
.verified{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ok); background:rgba(46,125,91,.1); border-radius:var(--r-pill); padding:4px 10px}

/* Maklerprofil */
.profilehead{display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:26px; align-items:center; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-card)}
.profilehead__photo{width:132px; height:132px; border-radius:var(--r-md)}
.profilehead h1{font-size:clamp(26px,3vw,34px)}
.profilecols{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:32px; align-items:start; margin-top:32px}
.profilecols > *{min-width:0}
.block{min-width:0}
.gallery{max-width:100%}
.block{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:26px; display:flex; flex-direction:column; gap:16px}
.block h2{font-size:21px}
.block p{color:var(--ink-soft); font-size:15.5px}
.dimgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 26px}
.review{border-top:1px solid var(--line-soft); padding-top:18px; display:flex; flex-direction:column; gap:9px}
.review:first-of-type{border-top:0; padding-top:0}
.review__head{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.review__name{font-weight:600; font-size:15px}
.review__date{font-size:13px; color:var(--ink-faint); margin-left:auto}
.review__stars{color:var(--rose); font-size:13px; letter-spacing:.14em}
.review__text{font-size:15.5px; color:var(--ink-soft)}
.review__answer{background:var(--sand); border-radius:var(--r-md); padding:14px 16px; font-size:14.5px; color:var(--ink-soft)}
.review__answer b{color:var(--ink); font-family:var(--display)}

/* ---------- Preis / FAQ ---------- */
.pricegrid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.price{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; gap:16px}
.price--hero{background:var(--rose-mist); border-color:var(--rose-mist)}
.price__amount{font-family:var(--display); font-size:44px; font-weight:700; letter-spacing:-.035em; line-height:1}
.price__amount span{font-size:16px; font-weight:500; color:var(--ink-soft); letter-spacing:0}
.price ul{display:flex; flex-direction:column; gap:11px; font-size:15px; color:var(--ink-soft)}
.price li{display:flex; gap:10px; align-items:flex-start}
.price li svg{color:var(--rose-dark); flex:none; margin-top:4px}

.faq{display:flex; flex-direction:column; gap:0}
.faq details{border-bottom:1px solid var(--line-soft); padding:18px 0}
.faq summary{font-family:var(--display); font-weight:600; font-size:17px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--rose); font-size:22px; font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px; color:var(--ink-soft); font-size:15.5px; max-width:70ch}

/* ---------- Ratgeber ---------- */
.postcard{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.postcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)}
.postcard__media{position:relative; aspect-ratio:16/10}
.postcard__media > .ph{position:absolute; inset:0}
.postcard__body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.postcard__cat{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--rose-deep)}
.postcard h3{font-size:18.5px; line-height:1.25}
.postcard p{font-size:14.5px; color:var(--ink-soft); flex:1}
.postcard__meta{font-size:13px; color:var(--ink-faint)}

.article{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:44px; align-items:start}
.prose{max-width:68ch; display:flex; flex-direction:column; gap:20px}
.prose h2{font-size:26px; margin-top:18px}
.prose h3{font-size:20px; margin-top:10px}
.prose p{font-size:17px; color:#2f353c; line-height:1.72}
.prose ul{display:flex; flex-direction:column; gap:10px; font-size:17px; color:#2f353c}
.prose ul li{display:flex; gap:12px}
.prose ul li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rose); flex:none; margin-top:11px}
.prose__figure{border-radius:var(--r-md); aspect-ratio:16/9; margin-block:8px}
.callout{background:var(--rose-tint); border-radius:var(--r-md); padding:22px 24px; display:flex; flex-direction:column; gap:9px}
.callout b{font-family:var(--display); font-size:16.5px}
.callout p{font-size:15.5px; color:#5c4a4a}
.toc{position:sticky; top:100px; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column; gap:11px}
.toc h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px}
.toc a{font-size:14.5px; color:var(--ink-soft)}
.toc a:hover{color:var(--rose-deep)}

/* ---------- Auth ---------- */
.authwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; min-height:560px; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card)}
.authform{padding:44px; display:flex; flex-direction:column; gap:18px; justify-content:center}
.authform h1{font-size:30px}
.authform > p{color:var(--ink-soft); font-size:15.5px}
.authside{position:relative; background:var(--rose-mist)}
.authside__inner{position:absolute; inset:auto 0 0 0; padding:30px; background:linear-gradient(to top,rgba(20,23,27,.72),rgba(20,23,27,0)); color:#fff}
.authside__inner p{font-size:16px; max-width:26ch}
.authside__inner b{font-family:var(--display); font-size:20px; display:block; margin-bottom:6px}

/* ---------- Legal ---------- */
.legal{display:flex; flex-direction:column; gap:22px; max-width:72ch}
.legal h2{font-size:21px; margin-top:14px}
.legal p{color:var(--ink-soft); font-size:16px}
.notice{background:var(--rose-tint); border-radius:var(--r-md); padding:18px 20px; font-size:15px; color:#6b4a4a}


/* ---------- Sterne ---------- */
.stars{display:inline-flex; gap:2px; color:var(--rose); font-size:15px; letter-spacing:.05em; line-height:1}
.stars--lg{font-size:21px}
.stars .off{color:#dfd8d1}

/* ---------- Profil-Banner ---------- */
.pbanner{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1000/240}
.pbanner::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,23,27,.55),rgba(20,23,27,.05))}
.plogo{
  position:relative; z-index:2; width:104px; height:104px; margin-top:-52px; margin-left:28px;
  border-radius:var(--r-md); border:4px solid var(--white); background:var(--white); box-shadow:var(--shadow-card);
}
.phead{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:14px 28px 0}
.phead h1{font-size:clamp(26px,3.2vw,36px)}
.phead__meta{color:var(--ink-soft); font-size:15px; margin-top:6px}
.phead__cta{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Tab-Navigation ---------- */
.tabnav{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-top:22px; overflow-x:auto; scrollbar-width:none}
.tabnav::-webkit-scrollbar{display:none}
.tabnav a{
  padding:13px 18px; font-size:15px; font-weight:600; color:var(--ink-soft);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
.tabnav a:hover{color:var(--rose-deep)}
.tabnav a.is-active{color:var(--ink); border-bottom-color:var(--rose)}
.tabnav a span{color:var(--ink-faint); font-weight:500}

/* ---------- Bewertungsübersicht ---------- */
.ratingbox{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.ratingbox > div{padding:24px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center}
.ratingbox > div + div{border-left:1px solid var(--line-soft)}
.ratingbox .big{font-family:var(--display); font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1}
.ratingbox .k{font-size:13.5px; color:var(--ink-faint)}
.ratingbox .lbl{font-size:14.5px; font-weight:600}
.recobar{width:100%; max-width:190px; height:6px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden}
.recobar span{display:block; height:100%; background:var(--ok); border-radius:var(--r-pill)}

.dist{display:flex; flex-direction:column; gap:8px}
.dist__row{display:grid; grid-template-columns:58px 1fr 42px; gap:12px; align-items:center; font-size:13.5px; color:var(--ink-soft)}
.dist__track{display:block; height:9px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden}
.dist__fill{display:block; height:100%; background:var(--rose); border-radius:var(--r-pill)}
.dist__n{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-faint)}

.bench{display:flex; align-items:center; gap:14px; background:var(--sand); border-radius:var(--r-md); padding:14px 18px; font-size:14.5px; color:var(--ink-soft)}
.bench b{font-family:var(--display); color:var(--ink)}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px}
.gallery .ph{aspect-ratio:4/3; border-radius:var(--r-md); scroll-snap-align:start}

/* ---------- Hilfreich ---------- */
.helpful{display:flex; align-items:center; gap:14px; margin-top:4px}
.helpful button{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 14px; font-size:13.5px; color:var(--ink-soft); transition:all .15s ease;
}
.helpful button:hover{border-color:var(--rose); color:var(--rose-deep)}
.helpful button.is-on{background:var(--rose-tint); border-color:var(--rose-tint); color:var(--rose-deep); font-weight:600}
.helpful span{font-size:13px; color:var(--ink-faint)}
.review__badges{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Ergebniskopf / Paginierung ---------- */
.reshead{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.reshead p{font-size:15px; color:var(--ink-soft)}
.reshead b{font-family:var(--display); color:var(--ink)}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:28px}
.pagination a,.pagination span{
  min-width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); padding-inline:12px;
}
.pagination a:hover{border-color:var(--rose); color:var(--rose-deep)}
.pagination .is-current{background:var(--rose); border-color:var(--rose); color:var(--white); font-weight:600}

.mapbox{position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sand)}
.mapbox__note{position:absolute; inset:auto 0 0 0; background:rgba(255,255,255,.92); padding:12px 16px; font-size:13px; color:var(--ink-soft)}
.mapbox__pin{position:absolute; width:26px; height:26px; border-radius:50%; background:var(--rose); border:3px solid var(--white); box-shadow:0 2px 8px rgba(20,23,27,.25); display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700}

.compare-bar{
  position:sticky; bottom:16px; z-index:30; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:12px 12px 12px 22px; margin-top:24px;
  box-shadow:var(--shadow-float);
}
.compare-bar p{font-size:14.5px}
.compare-bar .btn{margin-left:auto}
.pick{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); cursor:pointer}
.pick input{accent-color:var(--rose); width:16px; height:16px}

/* ---------- Städte ---------- */
.citygrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.citycard{position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; display:block}
.citycard .ph{position:absolute; inset:0}
.citycard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,23,27,.72),rgba(20,23,27,.05))}
.citycard__label{position:absolute; z-index:2; left:16px; bottom:14px; color:#fff}
.citycard__label b{font-family:var(--display); font-size:18px; display:block}
.citycard__label span{font-size:13px; opacity:.85}
.citycard:hover .ph img{transform:scale(1.04)}
.citycard .ph img{transition:transform .35s ease}

/* ---------- Preistabelle ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--white)}
table.data{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
table.data th,table.data td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft)}
table.data th{font-family:var(--display); font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--sand)}
table.data td.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:#fdfcfb}
.trend{font-size:13.5px; font-weight:600}
.trend--up{color:var(--ok)}
.trend--down{color:#b84a4a}

/* ---------- Vergleich ---------- */
.comparegrid{display:grid; grid-template-columns:180px repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; background:var(--white); min-width:760px}
.comparegrid > div{padding:16px 18px; border-bottom:1px solid var(--line-soft)}
.comparegrid .rowlabel{background:var(--sand); font-size:13.5px; color:var(--ink-soft); font-weight:600; display:flex; align-items:center}
.comparegrid .head{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.comparegrid .head .ph{width:64px; height:64px; border-radius:var(--r-sm)}
.comparegrid .head b{font-family:var(--display); font-size:16.5px}
.comparegrid .val{font-size:15px; display:flex; align-items:center}
.comparegrid .val b{font-family:var(--display)}

/* ---------- Dashboard ---------- */
.dash{display:grid; grid-template-columns:236px minmax(0,1fr); gap:28px; align-items:start}
.dashnav{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:12px; position:sticky; top:96px; display:flex; flex-direction:column; gap:2px}
.dashnav a{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-sm); font-size:14.5px; color:var(--ink-soft); font-weight:500}
.dashnav a:hover{background:var(--sand)}
.dashnav a.is-active{background:var(--rose-tint); color:var(--rose-deep); font-weight:600}
.dashnav a .n{margin-left:auto; font-size:12px; background:var(--rose); color:#fff; border-radius:var(--r-pill); padding:1px 8px; font-weight:600}
.dashnav hr{border:0; border-top:1px solid var(--line-soft); margin:8px 4px}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:18px 20px; display:flex; flex-direction:column; gap:5px}
.kpi__k{font-size:13px; color:var(--ink-faint)}
.kpi__v{font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.1}
.kpi__d{font-size:12.5px; font-weight:600}

.panel{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.panel__head{display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line-soft)}
.panel__head h2,.panel__head h3{font-size:17px}
.panel__head .link-more{margin-left:auto}
.panel__body{padding:20px}

.leadrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line-soft); align-items:center}
.leadrow:last-child{border-bottom:0}
.leadrow__t{font-family:var(--display); font-weight:600; font-size:15.5px}
.leadrow__m{font-size:13.5px; color:var(--ink-faint); margin-top:2px}
.leadrow__a{display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.status{font-size:12.5px; font-weight:600; border-radius:var(--r-pill); padding:4px 11px; white-space:nowrap}
.status--neu{background:rgba(196,120,125,.14); color:var(--rose-deep)}
.status--offen{background:rgba(176,138,60,.15); color:#8a6b28}
.status--gewonnen{background:rgba(46,125,91,.13); color:var(--ok)}
.status--verloren{background:#efeceb; color:var(--ink-faint)}

.spark{display:flex; align-items:flex-end; gap:5px; height:76px}
.spark span{flex:1; background:var(--rose-tint); border-radius:4px 4px 0 0; position:relative}
.spark span.hi{background:var(--rose)}
.sparkx{display:flex; gap:5px; margin-top:7px; font-size:11.5px; color:var(--ink-faint)}
.sparkx span{flex:1; text-align:center}

.demo-note{
  display:flex; gap:12px; align-items:flex-start; background:var(--rose-tint); border-radius:var(--r-md);
  padding:16px 18px; font-size:14.5px; color:#6b4a4a;
}
.demo-note b{font-family:var(--display); display:block; margin-bottom:3px; color:var(--ink)}
.demo-note svg{flex:none; margin-top:2px; color:var(--rose-dark)}

/* ---------- Bewertungsformular ---------- */
.ratebar{display:flex; gap:8px; flex-wrap:wrap}
.ratebar button{
  width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--white);
  font-family:var(--display); font-weight:600; color:var(--ink-soft); transition:all .15s ease;
}
.ratebar button:hover{border-color:var(--rose); color:var(--rose-deep)}
.ratebar button.is-on{background:var(--rose); border-color:var(--rose); color:#fff}
.dimrate{display:flex; flex-direction:column; gap:18px}
.dimrate__row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center}
.dimrate__row > div p{font-size:13px; color:var(--ink-faint); margin-top:2px}
.dimrate__row > div b{font-size:15px; font-family:var(--display)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:34px}
  .hero h1{max-width:none}
  .vcard{position:static; width:100%; max-width:360px; margin:-46px auto 0}
  .hero__note{left:6px; top:14px}
  .showcase,.wizard,.result,.profilecols,.article{grid-template-columns:minmax(0,1fr)}
  .sec-head{grid-template-columns:1fr; align-items:start}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .filterbar{grid-template-columns:repeat(2,1fr)}
  .toc{position:static}
  .dash{grid-template-columns:minmax(0,1fr)}
  .dashnav{position:static; flex-direction:row; overflow-x:auto; padding:8px}
  .dashnav hr{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .citygrid{grid-template-columns:repeat(2,1fr)}
  .phead{grid-template-columns:1fr; align-items:start}
  .authwrap{grid-template-columns:1fr}
  .authside{min-height:220px}
  .profilehead{grid-template-columns:100px minmax(0,1fr); gap:18px}
  .profilehead__photo{width:100px; height:100px}
  .profilehead__cta{grid-column:1 / -1}
  .pro__photo{display:none}
}
@media (max-width:1140px){
  .nav__rate{display:none}
}
@media (max-width:980px){
  .nav__links,.nav__login{display:none}
  .nav__burger{display:grid}
  .nav.is-open .nav__links{
    display:flex; position:absolute; left:0; right:0; top:76px;
    flex-direction:column; align-items:flex-start; gap:2px;
    background:var(--white); border-bottom:1px solid var(--line-soft); padding:12px 24px 20px;
  }
  .nav.is-open .nav__links a{padding-block:10px; width:100%}
}
@media (max-width:820px){
  .steps{grid-template-columns:1fr; gap:26px}
  .step{border-right:0; padding:0 0 26px !important; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0; padding-bottom:0 !important}
  .stats{grid-template-columns:1fr; gap:18px; padding:22px}
  .stat + .stat{border-left:0; border-top:1px solid #e3ded8; padding-left:8px; padding-top:18px}
  .cards--3,.pricegrid,.dimgrid{grid-template-columns:1fr}
  .steps--4{grid-template-columns:repeat(2,1fr)}
  .steps--4 .step{border-bottom:0; padding-bottom:0 !important}
  .voices{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(258px,78%);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:-24px; padding:2px 24px 12px;
  }
  .voice{scroll-snap-align:start}
  .broker{grid-template-columns:64px minmax(0,1fr); gap:16px}
  .broker__photo{width:64px; height:64px}
  .broker__right{grid-column:1 / -1; flex-direction:row; align-items:center; text-align:left}
  .choices{grid-template-columns:repeat(2,1fr)}
  .meter{grid-template-columns:104px 1fr 48px; gap:10px; font-size:13.5px}
}
@media (max-width:560px){
  .section{padding-block:56px}
  .cards,.fieldrow,.factgrid,.steps--4{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .ratingbox{grid-template-columns:1fr}
  .ratingbox > div + div{border-left:0; border-top:1px solid var(--line-soft)}
  .plogo{width:82px; height:82px; margin-top:-40px; margin-left:18px}
  .phead{padding-inline:18px}
  .leadrow{grid-template-columns:1fr}
  .pbanner{aspect-ratio:16/9}
  .tabnav a{padding-inline:13px; font-size:14px}
  .leadrow__a{justify-content:flex-start}
  .footer__grid{grid-template-columns:1fr}
  .wizard__panel,.result__main,.block,.authform{padding:22px}
  .sec-head--row{grid-template-columns:1fr; align-items:start; gap:12px}
  .filterbar{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav__inner{gap:14px}
  .nav__right{gap:10px}
  .nav__icon{display:none}
  .nav__right .btn--sm{padding:10px 16px; font-size:14.5px}
  .nav__right .btn--sm .arw{display:none}
  .brand{font-size:18.5px; gap:9px}
  .brand__mark{width:30px; height:30px}
}
@media (max-width:430px){
  .nav__right .btn--sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* FALLBACK-GRAFIKEN */
/* Automatisch erzeugte Rückfall-Illustrationen */
.ph--haus{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20220%22%3E%3Crect%20width%3D%22320%22%20height%3D%22220%22%20fill%3D%22%23f4e3dd%22%2F%3E%3Crect%20y%3D%22150%22%20width%3D%22320%22%20height%3D%2270%22%20fill%3D%22%23e3d5c6%22%2F%3E%3Cpath%20d%3D%22M64%20150V96l96-56%2096%2056v54Z%22%20fill%3D%22%23fbf7f2%22%2F%3E%3Cpath%20d%3D%22M52%20100%20160%2034l108%2066%22%20stroke%3D%22%23c4787d%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%2298%22%20y%3D%22112%22%20width%3D%2236%22%20height%3D%2238%22%20fill%3D%22%23e8b48c%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22112%22%20width%3D%2234%22%20height%3D%2238%22%20fill%3D%22%23efc7a6%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22106%22%20width%3D%2234%22%20height%3D%2244%22%20fill%3D%22%23d9c8b8%22%2F%3E%3C%2Fsvg%3E")}
.ph--wohnung{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20220%22%3E%3Crect%20width%3D%22320%22%20height%3D%22220%22%20fill%3D%22%23f2e6e2%22%2F%3E%3Crect%20y%3D%22160%22%20width%3D%22320%22%20height%3D%2260%22%20fill%3D%22%23e0d4c8%22%2F%3E%3Crect%20x%3D%2256%22%20y%3D%2244%22%20width%3D%22208%22%20height%3D%22116%22%20fill%3D%22%23fbf7f2%22%2F%3E%3Crect%20x%3D%2256%22%20y%3D%2238%22%20width%3D%22208%22%20height%3D%2210%22%20fill%3D%22%23c4787d%22%2F%3E%3Cg%20fill%3D%22%23e8b48c%22%3E%3Crect%20x%3D%2276%22%20y%3D%2264%22%20width%3D%2240%22%20height%3D%2226%22%2F%3E%3Crect%20x%3D%22132%22%20y%3D%2264%22%20width%3D%2240%22%20height%3D%2226%22%2F%3E%3Crect%20x%3D%22188%22%20y%3D%2264%22%20width%3D%2240%22%20height%3D%2226%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22106%22%20width%3D%2240%22%20height%3D%2226%22%20opacity%3D%22.8%22%2F%3E%3Crect%20x%3D%22132%22%20y%3D%22106%22%20width%3D%2240%22%20height%3D%2226%22%20opacity%3D%22.8%22%2F%3E%3Crect%20x%3D%22188%22%20y%3D%22106%22%20width%3D%2240%22%20height%3D%2226%22%20opacity%3D%22.8%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22146%22%20y%3D%22134%22%20width%3D%2228%22%20height%3D%2226%22%20fill%3D%22%23cfbcae%22%2F%3E%3C%2Fsvg%3E")}
.ph--villa{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20220%22%3E%3Crect%20width%3D%22320%22%20height%3D%22220%22%20fill%3D%22%23f5e5df%22%2F%3E%3Crect%20y%3D%22158%22%20width%3D%22320%22%20height%3D%2262%22%20fill%3D%22%23e2d6c7%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2286%22%20width%3D%22150%22%20height%3D%2272%22%20fill%3D%22%23fbf7f2%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2260%22%20width%3D%2296%22%20height%3D%2298%22%20fill%3D%22%23f5efe8%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2280%22%20width%3D%22156%22%20height%3D%229%22%20fill%3D%22%23c4787d%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2254%22%20width%3D%22102%22%20height%3D%229%22%20fill%3D%22%23c4787d%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%22104%22%20width%3D%2246%22%20height%3D%2234%22%20fill%3D%22%23e8b48c%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%22104%22%20width%3D%2246%22%20height%3D%2234%22%20fill%3D%22%23efc7a6%22%2F%3E%3Crect%20x%3D%22212%22%20y%3D%2282%22%20width%3D%2254%22%20height%3D%2230%22%20fill%3D%22%23e8b48c%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%22212%22%20y%3D%22122%22%20width%3D%2254%22%20height%3D%2236%22%20fill%3D%22%23d9c8b8%22%2F%3E%3C%2Fsvg%3E")}
.ph--reihe{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20220%22%3E%3Crect%20width%3D%22320%22%20height%3D%22220%22%20fill%3D%22%23f3e7e1%22%2F%3E%3Crect%20y%3D%22158%22%20width%3D%22320%22%20height%3D%2262%22%20fill%3D%22%23e1d5c6%22%2F%3E%3Cpath%20d%3D%22M20%20158V96l52-34%2052%2034v62Z%22%20fill%3D%22%23fbf7f2%22%2F%3E%3Cpath%20d%3D%22M124%20158V96l52-34%2052%2034v62Z%22%20fill%3D%22%23f6efe8%22%2F%3E%3Cpath%20d%3D%22M228%20158V96l52-34%2052%2034v62Z%22%20fill%3D%22%23fbf7f2%22%2F%3E%3Cpath%20d%3D%22M12%20100%2072%2058l60%2042M116%20100l60-42%2060%2042M220%20100l60-42%2060%2042%22%20stroke%3D%22%23c4787d%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20fill%3D%22%23e8b48c%22%3E%3Crect%20x%3D%2254%22%20y%3D%22112%22%20width%3D%2234%22%20height%3D%2246%22%2F%3E%3Crect%20x%3D%22158%22%20y%3D%22112%22%20width%3D%2234%22%20height%3D%2246%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%22262%22%20y%3D%22112%22%20width%3D%2234%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.ph--person{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23f8e9e5%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2278%22%20r%3D%2234%22%20fill%3D%22%23dfb3ae%22%2F%3E%3Cpath%20d%3D%22M28%20200c6-40%2034-62%2072-62s66%2022%2072%2062Z%22%20fill%3D%22%23c4787d%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E")}
.ph--innen{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%3E%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%23f5ece7%22%2F%3E%3Crect%20y%3D%22150%22%20width%3D%22320%22%20height%3D%2250%22%20fill%3D%22%23e0d3c6%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%2240%22%20width%3D%2286%22%20height%3D%2266%22%20fill%3D%22%23efe0d4%22%2F%3E%3Crect%20x%3D%2242%22%20y%3D%2248%22%20width%3D%2270%22%20height%3D%2250%22%20fill%3D%22%23f8d6b4%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22104%22%20width%3D%22140%22%20height%3D%2246%22%20rx%3D%2210%22%20fill%3D%22%23d8beb6%22%2F%3E%3Crect%20x%3D%22164%22%20y%3D%2288%22%20width%3D%2244%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23e8cfc8%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%2288%22%20width%3D%2244%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23e8cfc8%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%22132%22%20width%3D%2260%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23cbb6a6%22%2F%3E%3C%2Fsvg%3E")}
.ph--hero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Crect%20width%3D%22640%22%20height%3D%22512%22%20fill%3D%22%23f6dcd6%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22150%22%20r%3D%2290%22%20fill%3D%22%23ffe3d0%22%20opacity%3D%22.7%22%2F%3E%3Crect%20y%3D%22360%22%20width%3D%22640%22%20height%3D%22152%22%20fill%3D%22%23d6cbba%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%22180%22%20width%3D%22300%22%20height%3D%22180%22%20fill%3D%22%23fbf8f4%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%22172%22%20width%3D%22316%22%20height%3D%2212%22%20fill%3D%22%23c4787d%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%22200%22%20width%3D%22150%22%20height%3D%2266%22%20fill%3D%22%232a2622%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22206%22%20width%3D%2266%22%20height%3D%2254%22%20fill%3D%22%23f2c08e%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%22206%22%20width%3D%2264%22%20height%3D%2254%22%20fill%3D%22%23e8ac78%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%22286%22%20width%3D%22188%22%20height%3D%2274%22%20fill%3D%22%232a2622%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%22148%22%20y%3D%22294%22%20width%3D%2256%22%20height%3D%2258%22%20fill%3D%22%23f2c08e%22%2F%3E%3Crect%20x%3D%22212%22%20y%3D%22294%22%20width%3D%2256%22%20height%3D%2258%22%20fill%3D%22%23e8ac78%22%2F%3E%3Crect%20x%3D%22420%22%20y%3D%22236%22%20width%3D%2286%22%20height%3D%22124%22%20fill%3D%22%23f4efe9%22%2F%3E%3Crect%20x%3D%22420%22%20y%3D%22228%22%20width%3D%2294%22%20height%3D%2210%22%20fill%3D%22%23c4787d%22%2F%3E%3Crect%20x%3D%22438%22%20y%3D%22264%22%20width%3D%2250%22%20height%3D%2252%22%20fill%3D%22%23eab98c%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M556%20216c26%2016%2038%2046%2038%2074s-16%2054-38%2064c-22-10-38-36-38-64s12-58%2038-74Z%22%20fill%3D%22%23cbb9ad%22%2F%3E%3C%2Fsvg%3E")}