/* Immobilien Heithecker & Wiesner – Neubau im Stil der Vorlage RealDev (Framer) · statisch, ohne Framework */
:root{
  --schwarz:#000;
  --hell:#EDEDED;
  --weiss:#fff;
  --feld:#EEEEEE;
  --text:#21201B;
  --text-dunkel:#FAFFFF;
  --kicker:rgba(20,20,20,.8);
  --gold:#FFC64D;
  --gruen:#1D322D;
  --chip:rgba(20,20,20,.05);
  --chip-hover:rgba(20,20,20,.1);
  --glas:rgba(255,255,255,.1);
  --linie-hell:rgba(255,255,255,.2);
  --linie-dunkel:rgba(20,20,20,.15);
  --pad-x:50px;
  /* Framer "spring bounce 0" ≈ kritisch gedämpft → ease-out ohne Überschwingen */
  --spring0:cubic-bezier(.19,1,.22,1);
  --easeout:cubic-bezier(.27,0,.51,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--hell);color:var(--text);font-family:"Inter",system-ui,sans-serif;font-optical-sizing:auto;font-weight:300;font-size:18px;line-height:1.3;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:300}
ul{margin:0;padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typo ---------- */
.kicker{font-size:12px;line-height:18px;font-weight:400;letter-spacing:4.68px;text-transform:uppercase;color:var(--kicker);display:inline-flex;align-items:center;gap:6px}
.kicker::after{content:"";width:5px;height:11px;background:currentColor;display:inline-block}
.kicker.gold::after{background:#7a5a18}
.dunkel .kicker,.kicker.kd{color:var(--text-dunkel)}
.dunkel .kicker.gold::after,.kicker.kd.gold::after{background:#8a6a22}
.h1{font-size:60px;line-height:66px;font-weight:300;letter-spacing:-1.4px;font-variation-settings:"opsz" 32}
.h2{font-size:54px;line-height:59.4px;font-weight:300;letter-spacing:-1.8px;font-variation-settings:"opsz" 32}
.h-xl{font-size:80px;line-height:84px;font-weight:300;letter-spacing:-2.4px;font-variation-settings:"opsz" 32}
.h3{font-size:26px;line-height:33.8px;font-weight:300;letter-spacing:-.26px}
.h4{font-size:22px;line-height:28px;font-weight:300}
.fliess{font-size:18px;line-height:23.4px;font-weight:300}
.klein{font-size:16px;line-height:1.35;font-weight:300}
.caps{font-size:14px;line-height:12.6px;font-weight:400;text-transform:uppercase}
.hand{font-family:"Dancing Script",cursive;font-size:34px;font-weight:500}

/* ---------- Sektionen ---------- */
.sek{padding:100px var(--pad-x)}
.dunkel{background:var(--schwarz);color:var(--text-dunkel)}
.hell{background:var(--hell);color:var(--text)}
.sek-kopf{display:flex;flex-direction:column;gap:14px;max-width:900px;margin-bottom:60px}
.rauschen{position:relative;isolation:isolate}
.rauschen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}

/* ---------- Navigation (fixiert, weiße Leiste 20px vom Rand) ---------- */
.nav-blur{position:fixed;top:0;left:0;right:0;height:158px;z-index:40;pointer-events:none;backdrop-filter:blur(0px);mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent);transition:backdrop-filter .4s}
body.gescrollt .nav-blur{backdrop-filter:blur(6px)}
.nav{position:fixed;top:20px;left:30px;right:30px;height:64px;z-index:50;background:var(--weiss);color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 12px}
.logo{display:flex;align-items:center;gap:8px;height:40px;color:var(--text)}
.logo svg{width:34px;height:34px;flex:none}
.logo .wort{display:flex;flex-direction:column;line-height:1}
.logo .wort b{font-weight:700;font-size:19px;letter-spacing:-.6px;font-variation-settings:"opsz" 32}
.logo .wort b i{font-style:normal;font-weight:200}
.logo .wort small{font-size:6.2px;letter-spacing:2.6px;font-weight:600;margin-top:3px;text-transform:uppercase}
.nav-links{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{height:40px;display:flex;align-items:center;padding:0 12px;font-size:14px;font-weight:400;text-transform:uppercase}
.nav-links a[aria-current="page"] .roll{text-decoration:underline;text-underline-offset:5px}
.nav-rechts{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;padding:8px 4px;cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:400;text-transform:uppercase}
.burger i{display:flex;flex-direction:column;gap:3px;width:21px}
.burger i::before,.burger i::after,.burger i span{content:"";display:block;height:2px;background:currentColor;transition:transform .4s var(--spring0),opacity .2s}
.menu-offen .burger i::before{transform:translateY(5px) rotate(45deg)}
.menu-offen .burger i::after{transform:translateY(-5px) rotate(-45deg)}
.menu-offen .burger i span{opacity:0}
.handy-menu{position:fixed;inset:0;z-index:45;background:var(--weiss);color:var(--text);padding:120px 26px 30px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--spring0);visibility:hidden}
.menu-offen .handy-menu{clip-path:inset(0 0 0 0);visibility:visible}
.handy-menu nav a{display:block;font-size:40px;line-height:1.15;letter-spacing:-1.2px;font-weight:300;padding:6px 0;border-bottom:1px solid var(--linie-dunkel)}
.handy-menu .unten{display:flex;flex-direction:column;gap:6px;font-size:16px}

/* ---------- Buchstaben-Roll (Nav + Buttons) ----------
   Jeder Buchstabe liegt doppelt übereinander; Hover: jede Zeichen-Spalte um eine Zeilenhöhe (-12.6px) nach oben,
   gestaffelt (--i × Versatz), per-Zeichen-Dauer 600ms Spring ohne Überschwingen → Gesamt ≈ 780–1.000ms wie gemessen. */
.roll{display:inline-flex;overflow:visible;clip-path:inset(-4px 0 0 0);height:var(--lh,12.6px);line-height:var(--lh,12.6px);white-space:pre}
.roll .z{display:inline-flex;flex-direction:column;transition:transform .6s var(--spring0);transition-delay:calc(var(--i) * var(--st,25ms))}
.roll .z span{display:block;height:var(--lh,12.6px)}
@media (hover:hover) and (pointer:fine){
  a:hover>.roll .z,a:hover .roll .z,button:hover .roll .z,.roll-trigger:hover .roll .z{transform:translateY(calc(-1 * var(--lh,12.6px)))}
}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:18px;height:40px;padding:0 25px;font-size:14px;font-weight:400;text-transform:uppercase;overflow:hidden;cursor:pointer;border:0;white-space:nowrap;isolation:isolate}
.btn .fuell{position:absolute;left:0;right:0;height:100%;top:40px;z-index:-1;transition:top .6s var(--spring0)}
.btn .ico{position:relative;width:14px;height:14px;overflow:hidden;flex:none}
.btn .ico svg{position:absolute;top:0;width:14px;height:14px;transition:left .6s var(--spring0)}
.btn .ico svg:first-child{left:0}
.btn .ico svg:last-child{left:-14px}
@media (hover:hover) and (pointer:fine){
  .btn:hover .ico svg:first-child{left:14px}
  .btn:hover .ico svg:last-child{left:0}
  .btn:hover .fuell{top:0}
}
.btn-dunkel{background:var(--schwarz);color:var(--text-dunkel)}
.btn-dunkel .fuell{background:#1a1a1a}
.btn-hell{background:var(--weiss);color:var(--text)}
.btn-hell .fuell{background:#f4f4f2}
.btn-rahmen{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn-text{padding:0;height:auto;background:none;color:var(--text-dunkel);gap:14px}
/* Füllung Gold (SUBSCRIBE/SUBMIT): Hintergrund → #FFC64D in ~180ms + Roll mit Zeilenhöhe 19.2px */
.btn-gold{height:44px;padding:0 26px;--lh:19.2px;font-size:16px;transition:background-color .18s ease-out,color 0s}
.btn-gold.auf-dunkel{background:var(--weiss);color:var(--text)}
.btn-gold.auf-hell{background:var(--schwarz);color:var(--text-dunkel)}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--gold)!important;color:var(--text)!important}
}

/* ---------- Gold-Textlinks (Footer, Ort-Links auf Karten): sofortiger Wechsel, Unterstreichung ---------- */
.goldlink{transition:all 0s}
@media (hover:hover) and (pointer:fine){
  .goldlink:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
}
.textlink{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){ .textlink:hover{color:#324F07} }

/* ---------- Footer-Seitenliste: vertikaler Text-Tausch (Top 0→-41px, Bottom 41→0) ---------- */
.swap{position:relative;display:block;height:41px;overflow:hidden;font-size:14px;font-weight:400;text-transform:uppercase}
.swap span{position:absolute;left:10px;right:0;height:41px;line-height:41px;transition:top .6s var(--spring0)}
.swap span:first-child{top:0}
.swap span:last-child{top:41px}
@media (hover:hover) and (pointer:fine){
  .swap:hover span:first-child{top:-41px}
  .swap:hover span:last-child{top:0}
}

/* ---------- Chips / Filter: rgba(20,20,20,.05) → .10 in ~300ms ease-out ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:34px;padding:0 14px;display:inline-flex;align-items:center;font-size:12px;letter-spacing:.4px;font-weight:400;text-transform:uppercase;background:var(--chip);border:0;cursor:pointer;transition:background-color .3s ease-out;color:var(--text)}
@media (hover:hover) and (pointer:fine){ .chip:not(.aktiv):hover{background:var(--chip-hover)} }
.chip.aktiv{background:var(--schwarz);color:var(--text-dunkel);cursor:pointer}
.tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;font-size:12px;font-weight:400;text-transform:uppercase;background:rgba(20,20,20,.72);color:#fff;backdrop-filter:blur(5px)}
.tag svg{width:14px;height:14px}

/* ---------- Bild-Zoom in Karten (+5%, zentriert, Spring ~1s) ---------- */
.bildbox{position:relative;overflow:hidden;background:#d8d8d6}
.bildbox>img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1s var(--spring0)}
@media (hover:hover) and (pointer:fine){ .zoomkarte:hover .bildbox>img{transform:scale(1.05)} }

/* ---------- Eigener Kreis-Cursor über Bildkarten ---------- */
.cursor{position:fixed;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;pointer-events:none;z-index:90;display:grid;place-items:center;opacity:0;transform:translate(-200px,-200px);transition:opacity .25s ease-out}
.cursor.an{opacity:1}
.cursor .kreis{width:65px;height:65px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transform:scale(.6);transition:transform .4s cubic-bezier(.34,1.3,.64,1)}
.cursor.an .kreis{transform:scale(1)}
.cursor .rausch{position:absolute;inset:17px;border-radius:50%;opacity:.10;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cursor .pfeil{width:15px;height:6px;color:#fff;transform:scale(1.06);transition:transform .2s ease-out}
.cursor.bewegt .pfeil{transform:scale(1.26)}
@media (hover:hover) and (pointer:fine){ .cursor-zone,.cursor-zone *{cursor:none} }

/* ---------- Einblenden beim Scrollen ---------- */
.js .rein{opacity:0;filter:blur(8px);transform:translateY(24px);transition:opacity 1s var(--spring0),filter 1s var(--spring0),transform 1s var(--spring0);transition-delay:var(--d,0s)}
.js .rein.sichtbar{opacity:1;filter:blur(0);transform:none}
.js .zeichen .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(10px);transition:opacity .8s var(--spring0),filter .8s var(--spring0),transform .8s var(--spring0);transition-delay:calc(var(--wi) * 40ms)}
.js .zeichen.sichtbar .w{opacity:1;filter:blur(0);transform:none}
.js .bild-rein img{transform:scale(1.1);transition:transform 1.4s var(--spring0)}
.js .bild-rein.sichtbar img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.js .rein,.js .zeichen .w{opacity:1;filter:none;transform:none;transition:none}}

/* ================= HOME ================= */
.hero{position:relative;height:100vh;min-height:720px;padding:130px var(--pad-x) 100px;color:var(--text-dunkel);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#222}
.hero>.hbild{position:absolute;inset:0;z-index:0}
.hero>.hbild img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 35%,rgba(10,6,4,.7) 100%)}
.hero>*:not(.hbild){position:relative;z-index:2}
.hero-zeile{display:flex;align-items:center;gap:40px;font-size:12px;letter-spacing:4.68px;text-transform:uppercase;font-weight:500}
.hero-zeile .strich{flex:1;height:1px;background:rgba(255,255,255,.8);transform-origin:left;transition:transform 1.4s var(--spring0) .3s}
.js .hero-zeile .strich{transform:scaleX(0)}
.js .geladen .hero-zeile .strich{transform:scaleX(1)}
.hero-unten{display:flex;flex-direction:column;gap:40px;align-items:flex-start;max-width:1040px}

.about-scroll{height:260vh;position:relative}
.about-scroll .sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0 var(--pad-x)}
.about-inner{display:flex;gap:28px;max-width:760px}
.about-inner .skala{width:26px;flex:none;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.about-inner .skala i{height:1px;background:#fff;width:var(--b,6px);transition:width .3s}
.about-text{font-size:26px;line-height:34px;font-weight:300;letter-spacing:-.26px}
.about-text .w{opacity:.14;transition:opacity .3s}
.about-text .w.an{opacity:1}
.about-scroll .unterschrift{margin-top:26px;font-size:14px;letter-spacing:4px;text-transform:uppercase;opacity:.7}

.stats{padding:100px var(--pad-x);display:flex;flex-direction:column;align-items:center}
.stats-liste{border-left:1px solid rgba(20,20,20,.35);display:flex;flex-direction:column;gap:80px;padding:40px 0;margin-left:-100px}
.stat{position:relative;padding-left:40px;max-width:420px}
.stat::before{content:"";position:absolute;left:-2px;top:0;bottom:36%;width:4px;background:var(--text)}
.stat .zahl{font-size:48px;line-height:48px;font-weight:500;letter-spacing:-2.5px;display:flex;align-items:flex-start;gap:6px;font-variation-settings:"opsz" 32}
.stat .zahl sup{font-size:34px;line-height:34px;font-weight:400;letter-spacing:0}
.stat .titel{margin-top:28px;font-size:26px;line-height:33.8px;letter-spacing:-.26px}
.stat .text{margin-top:10px;font-size:18px;line-height:23.4px;max-width:260px;opacity:.85}

.featured{padding:100px 0}
.featured .sek-kopf{padding:0 var(--pad-x)}
.fstapel{position:relative}
.fkarte{position:sticky;top:0;height:100vh;overflow:hidden;display:block;color:var(--text-dunkel)}
.fkarte .bildbox{position:absolute;inset:0;background:#333}
.fkarte .bildbox::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45))}
.fkarte .inhalt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:0 var(--pad-x);text-align:center}
.fkarte .titel{font-size:60px;line-height:66px;letter-spacing:-1.8px;font-weight:300;max-width:1100px;font-variation-settings:"opsz" 32}
.fkarte .leiste{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;background:rgba(0,0,0,.85);padding:10px 18px}
.fkarte .leiste .tag{background:rgba(255,255,255,.1);font-size:14px;height:30px}
.fkarte .preis{font-size:14px;letter-spacing:4.68px;text-transform:uppercase;font-weight:400}
.featured .unten{display:flex;justify-content:center;padding-top:60px}

.stimmen{padding:100px 0 130px;overflow:hidden}
.stimmen .sek-kopf{padding:0 var(--pad-x)}
.sreihe{display:flex;gap:20px;padding:0 var(--pad-x);overflow-x:auto;scrollbar-width:none;cursor:grab}
.sreihe::-webkit-scrollbar{display:none}
.skarte{flex:none;width:428px;min-height:360px;background:var(--schwarz);color:var(--text-dunkel);padding:24px 20px;display:flex;flex-direction:column;gap:20px;cursor:pointer}
.skarte:nth-child(3n+2){margin-top:60px}
.skarte:nth-child(3n){margin-top:120px}
.skarte .kopf{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px dashed rgba(255,255,255,.4)}
.skarte .ini{width:60px;height:60px;background:#1f1f1f;display:grid;place-items:center;font-size:20px;font-weight:400;flex:none}
.skarte .name{font-size:18px;font-weight:400}
.skarte .rolle{font-size:12px;text-transform:uppercase;font-weight:500;margin-top:4px;opacity:.9}
.skarte .zitat{font-size:22px;line-height:28px;background:rgba(255,255,255,.08);padding:2px 6px;align-self:flex-start}
.skarte .voll{font-size:16px;line-height:22px;margin-top:auto}
.sterne{color:var(--gold);letter-spacing:2px;font-size:14px}

.benefits{padding:100px var(--pad-x)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.35);border-left:1px solid rgba(255,255,255,.35);position:relative}
.bzelle{position:relative;min-height:333px;padding:30px 29px;border-right:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35);display:flex;flex-direction:column;justify-content:space-between;gap:40px;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:6px 6px}
.bzelle::before,.bzelle::after{content:"";position:absolute;width:7px;height:7px;background:#fff}
.bzelle::before{right:-4px;top:-4px}
.bzelle::after{right:-4px;bottom:-4px}
.bzelle .ecke,.bzelle .ecke2{display:none}
.bgrid>.bzelle:nth-child(3n+1) .ecke{display:block;position:absolute;left:-4px;top:-4px;width:7px;height:7px;background:#fff}
.bgrid>.bzelle:nth-child(3n+1) .ecke2{display:block;position:absolute;left:-4px;bottom:-4px;width:7px;height:7px;background:#fff}
.bkopf{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);height:40px;padding-right:14px}
.bkopf .ic{width:40px;height:40px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.bkopf .ic svg{width:18px;height:18px}
.bkopf h3{font-size:22px;font-weight:300;letter-spacing:-.3px}
.bzelle p{font-size:16px;line-height:22.5px;max-width:390px}

/* ---------- Footer ---------- */
.footer{padding:100px var(--pad-x) 40px;color:var(--text-dunkel)}
.fspalten{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.fkopf{height:38px;display:flex;align-items:center;padding:0 18px;background:rgba(255,255,255,.1);border-left:1px solid rgba(255,255,255,.4);margin-bottom:30px}
.fspalte .zeile{display:block;padding:0 10px;font-size:14px;line-height:41px;font-weight:400;text-transform:uppercase}
.fspalte .adr{padding:8px 10px;font-size:16px;line-height:1.5}
.fmitte>*{min-width:0}
.fmitte{display:grid;grid-template-columns:775px 1fr;gap:65px;margin-top:70px}
.fcta{position:relative;height:315px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 20px 30px;gap:12px}
.fcta .bildbox{position:absolute;inset:0;z-index:-1}
.fcta .bildbox::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25))}
.fcta h3{font-size:26px;line-height:33.8px;letter-spacing:-.4px}
.fcta p{font-size:16px;line-height:22.5px;max-width:320px}
.fcta .btn-text{margin-top:14px;align-self:flex-start}
.fform{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.fform .zeile{display:flex;gap:10px;align-items:flex-end}
.fform input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.7);height:44px;padding:0 4px;color:#fff;font-size:16px;outline:none;cursor:text}
.fform input:focus{border-bottom-color:var(--gold)}
.fform input::placeholder{color:rgba(255,255,255,.5)}
.fform .hinweis{font-size:13px;opacity:.6;line-height:1.4}
.wortmarke{margin-top:60px;display:flex;align-items:center;gap:.2em;font-size:7.9vw;line-height:.8;color:var(--text-dunkel);white-space:nowrap;overflow:hidden}
.wortmarke svg{width:1.2em;height:1.2em;flex:none}
.wortmarke span{font-size:1em;letter-spacing:-.05em;font-variation-settings:"opsz" 32}
.wortmarke b{font-weight:700}
.wortmarke i{font-style:normal;font-weight:200}
.funten{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:24px;font-size:12px;font-weight:400;text-transform:uppercase}
.funten div{display:flex;gap:32px}

/* ================= Unterseiten ================= */
.phero{padding:170px var(--pad-x) 70px;display:flex;flex-direction:column;gap:18px}
.phero .h2{max-width:1000px}
.phero p.fliess{max-width:640px;opacity:.8}

/* Immobilien-Liste */
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:40px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 20px}
.pkarte{display:flex;flex-direction:column;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--linie-dunkel)}
.pkarte .bildbox{aspect-ratio:454/272;will-change:transform}
.pkarte .bildbox>img{transition:transform 1s var(--spring0)}
.pkarte .tags{position:absolute;left:18px;top:18px;display:flex;gap:4px;z-index:2}
.pkarte .neu{position:absolute;right:-34px;top:18px;z-index:2;background:var(--gold);color:var(--text);font-size:11px;font-weight:600;letter-spacing:1px;padding:4px 40px;transform:rotate(45deg)}
.pkarte .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;font-weight:400}
.pkarte .meta .ort{display:flex;gap:6px;align-items:center}
.status{padding:2px 6px;background:rgba(20,20,20,.06);border-left:4px solid var(--gold)}
.status.miete{border-left-color:#7fc3e8}
.status.gewerbe{border-left-color:#9ACD32}
.pkarte h3{font-size:22px;line-height:28px}
.pkarte .werte{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;text-transform:uppercase;font-weight:400}
.pkarte .werte span{display:inline-flex;gap:6px;align-items:center;padding-right:16px;border-right:1px solid var(--linie-dunkel)}
.pkarte .werte span:last-child{border-right:0}
.pkarte[hidden]{display:none}

/* Objekt-Detail */
.ohero{position:relative;height:810px;color:var(--text-dunkel);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px var(--pad-x) 0;overflow:hidden;background:#222}
.ohero .bildbox{position:absolute;inset:0;z-index:0}
.ohero .bildbox::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.7))}
.ohero>*:not(.bildbox){position:relative;z-index:1}
.ohero .h-xl{max-width:1150px;margin:18px 0 26px}
.ohero .chips{justify-content:center}
.ohero .ort a{font-size:14px;text-transform:uppercase;font-weight:400}
.odaten{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:100px var(--pad-x)}
.dliste{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.2)}
.dliste div{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:4px;padding-right:20px}
.dliste dt{font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.65;font-weight:400}
.dliste dd{margin:0;font-size:18px}
.otexte{display:flex;flex-direction:column;gap:40px;padding:0 var(--pad-x) 100px;max-width:1100px}
.otexte h3{margin-bottom:12px}
.otexte p{font-size:18px;line-height:26px;opacity:.9;margin-bottom:10px}
.galerie{padding:0 var(--pad-x) 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.galerie .bildbox{aspect-ratio:4/3}
.galerie .bildbox:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ansprech{background:#111;padding:30px;display:flex;flex-direction:column;gap:18px;align-self:start}
.ansprech .person{display:flex;gap:16px;align-items:center}
.ansprech img{width:84px;height:84px;object-fit:cover}

/* Formulare */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:400}
.form input,.form textarea{background:transparent;border:0;border-bottom:1px solid currentColor;padding:10px 2px;font-size:18px;font-weight:300;letter-spacing:0;text-transform:none;outline:none;border-radius:0;cursor:text}
.form textarea{min-height:140px;resize:vertical}
.form .voll{grid-column:1/-1}
.form input:focus,.form textarea:focus{border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.form .check{flex-direction:row;align-items:flex-start;gap:10px;letter-spacing:0;text-transform:none;font-size:14px;font-weight:300}
.form .check input{width:16px;height:16px;margin-top:2px}

/* Kontakt / Team / Leistungen */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.infoliste{display:flex;flex-direction:column;border-top:1px solid var(--linie-dunkel)}
.infoliste div{display:grid;grid-template-columns:200px 1fr;padding:18px 0;border-bottom:1px solid var(--linie-dunkel);gap:20px}
.infoliste dt{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:400;opacity:.7}
.infoliste dd{margin:0;font-size:18px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tkarte{display:flex;flex-direction:column;gap:14px}
.tkarte .bildbox{aspect-ratio:1/1}
.tkarte .punkt{position:absolute;right:14px;top:14px;width:20px;height:20px;background:var(--gold);transition:all 0s;z-index:2}
@media (hover:hover) and (pointer:fine){ .tkarte:hover .punkt{width:14px;height:14px} }
.timeline{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie-dunkel)}
.timeline>div{padding:30px 30px 30px 0;border-right:1px solid var(--linie-dunkel);display:flex;flex-direction:column;gap:12px}
.timeline>div:last-child{border-right:0}
.timeline .jahr{font-size:48px;font-weight:500;letter-spacing:-2.5px}
.lliste{border-top:1px solid rgba(255,255,255,.3)}
.lliste li{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.3);align-items:start}
.lliste .nr{font-size:14px;letter-spacing:4px;opacity:.6}
.lliste h3{font-size:26px;line-height:33.8px}
.faq details{border-bottom:1px solid var(--linie-dunkel);padding:24px 0;cursor:pointer}
.faq summary{font-size:22px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:14px;max-width:760px;opacity:.85}
.rgrid{columns:3;column-gap:20px}
.rgrid .skarte{width:auto;min-height:0;margin:0 0 20px!important;break-inside:avoid}
.recht{padding:0 var(--pad-x) 100px;max-width:980px}
.recht h2{font-size:30px;line-height:1.2;margin:44px 0 14px;font-weight:300;letter-spacing:-.6px}
.recht h3{font-size:21px;margin:26px 0 10px;font-weight:400}
.recht p,.recht li{font-size:17px;line-height:1.6;opacity:.92}
.recht ul{list-style:disc;padding-left:20px;margin:8px 0}
.hinweisbox{border-left:4px solid var(--gold);background:rgba(255,198,77,.12);padding:14px 18px;font-size:15px;margin:20px 0}
.fehler404{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:170px var(--pad-x) 80px}
.fehler404 .riesig{font-size:22vw;line-height:.8;font-weight:200;letter-spacing:-.06em}

/* ================= Responsiv ================= */
@media (max-width:1180px){
  .nav-links a{padding:0 7px}
  .fmitte{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  :root{--pad-x:20px}
  .nav{top:0;left:0;right:0;height:62px;padding:0 20px 0 12px}
  .nav-links,.nav-rechts .btn{display:none}
  .burger{display:inline-flex}
  .pgrid{grid-template-columns:1fr 1fr}
  .bgrid{grid-template-columns:1fr 1fr}
  .odaten,.zwei{grid-template-columns:1fr}
  .team,.timeline{grid-template-columns:1fr 1fr}
  .rgrid{columns:2}
}
@media (max-width:700px){
  body{font-size:16px}
  .sek{padding:70px var(--pad-x)}
  .h1{font-size:40px;line-height:44px;letter-spacing:-1px}
  .h2,.h-xl{font-size:36px;line-height:40px;letter-spacing:-1.1px}
  .h3{font-size:22px;line-height:28px}
  .hero{min-height:640px;padding:100px var(--pad-x) 60px}
  .hero-zeile{gap:20px}
  .about-text{font-size:20px;line-height:27px}
  .about-inner{gap:16px}
  .stats-liste{margin-left:0;gap:56px}
  .stats{align-items:stretch}
  .fkarte .titel{font-size:34px;line-height:38px;letter-spacing:-1px}
  .fkarte .leiste{padding:8px}
  .fkarte .leiste .tag{font-size:12px}
  .skarte{width:300px;min-height:0}
  .skarte:nth-child(n){margin-top:0}
  .bgrid,.pgrid,.team,.timeline,.galerie,.fspalten,.fmitte,.form,.dliste{grid-template-columns:1fr}
  .galerie .bildbox:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .timeline>div{border-right:0;border-bottom:1px solid var(--linie-dunkel)}
  .bzelle{min-height:260px}
  .fspalten{gap:26px}
  .fmitte{gap:40px}
  .fcta{height:auto;min-height:315px}
  .funten{flex-direction:column}
  .phero{padding:120px var(--pad-x) 50px}
  .ohero{height:640px;padding-bottom:40px}
  .odaten{padding:70px var(--pad-x);gap:40px}
  .infoliste div{grid-template-columns:1fr;gap:4px}
  .rgrid{columns:1}
  .lliste li{grid-template-columns:1fr;gap:10px}
  .filter{flex-direction:column;align-items:flex-start}
  .handy-menu nav a{font-size:34px}
}