/* ===== Inhalte-Erweiterung: Highlights, Projekt, Wohnungen, Ausstattung, Lage ===== */
.ph{color:#b0a49c}
section[id]{scroll-margin-top:58px}

/* Visualisierung-Hinweis */
.vis{position:relative}
.vis::before{content:"Visualisierung";position:absolute;right:14px;bottom:11px;z-index:4;font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none}
.banner.vis::before{bottom:14px;right:22px}
.hero-img.vis::before{right:auto;left:auto;right:30px;bottom:12px}

/* Hero */
.hero-txt h1{font-size:clamp(44px,4.5vw,74px);margin:22px 0 24px}
.hero-txt .sub{font-size:16.7px;letter-spacing:.05em;line-height:1.85;max-width:430px;margin-bottom:36px;color:#8d807a}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:22px 34px}
.btn-fill{display:inline-block;background:var(--ink);color:#fff;border-radius:40px;padding:19px 36px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;will-change:transform;transition:background .35s,box-shadow .35s}
.btn-fill:hover{background:#574b47;box-shadow:0 16px 30px -14px rgba(62,53,50,.6)}

/* Intro */
.intro .lead{font-size:clamp(38px,3.8vw,60px);line-height:1.12;font-weight:300;color:#8d807a}

/* Highlights */
.hl{background:#efe9e2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hl-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hl-i{background:#efe9e2;padding:42px 32px 46px;transition:background .5s}
.hl-i small{display:block;font-size:10px;letter-spacing:.3em;font-weight:400;margin-bottom:18px;color:var(--taupe)}
.hl-i b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.25;color:#5b4a41;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.hl-i:hover{background:#f6f2ec}.hl-i:hover b{transform:translateY(-4px)}}

/* Das Projekt */
.proj{background:var(--bg2);padding:130px var(--pad) 140px}
.proj-in{max-width:1160px;margin:0 auto}
.proj-head{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.proj h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(42px,4.4vw,68px);line-height:1.08;color:#8d807a;margin-top:16px}
.proj-p p{font-size:16.7px;letter-spacing:.06em;line-height:2;margin-bottom:22px}

/* Wohnungen */
.wohn{background:var(--bg);padding:130px var(--pad) 150px}
.wohn-in{max-width:1160px;margin:0 auto}
.wohn-cards{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:44px;align-items:start}
.wcard2{margin-top:110px}
.wcard-img{position:relative;aspect-ratio:4/3.3;overflow:hidden;border-top-left-radius:90px}
.wcard2 .wcard-img{border-top-left-radius:0;border-top-right-radius:90px}
.wcard-img img,.aus-img img{width:100%;height:100%;object-fit:cover}
.wcard h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(30px,2.8vw,42px);line-height:1.15;color:#5b4a41;margin:34px 0 18px}
.wcard p{font-size:16.7px;letter-spacing:.06em;line-height:1.95;margin-bottom:26px}
.wcard ul{list-style:none;border-top:1px solid var(--line)}
.wcard li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.7px;letter-spacing:.05em;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .4s}
@media (hover:hover){.wcard li:hover{transform:translateX(10px);color:#5b4a41}}

/* Übersicht */
.uebersicht{margin-top:140px}
.ue-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.ue-head h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(34px,3.4vw,52px);color:#8d807a;line-height:1.1}
.ue-filter{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:400 12px 'Jost';letter-spacing:.1em;color:#6f635e;border:1px solid var(--line);background:none;border-radius:30px;padding:9px 18px;cursor:pointer;transition:all .3s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ue-cols,.ue-sum{display:grid;grid-template-columns:.8fr 1.1fr .8fr 1fr 1fr 1.3fr 1.2fr 36px;gap:12px;align-items:center}
.ue-cols{padding:0 4px 14px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.ue-list{border-top:1px solid var(--line)}
.ue-row{border-bottom:1px solid var(--line);transition:background .4s}
.ue-row.hide{display:none}
.ue-sum{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:20px 4px;font:300 15.7px 'Jost';letter-spacing:.04em;color:#6f635e}
.ue-sum .top{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:400;color:#5b4a41;line-height:1}
.ue-sum .chev{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.ue-sum .chev::before,.ue-sum .chev::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .45s}
.ue-sum .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.ue-row.open .chev{background:var(--ink);border-color:var(--ink);transform:rotate(180deg)}
.ue-row.open .chev::before,.ue-row.open .chev::after{background:#fff}
.ue-row.open .chev::after{transform:translate(-50%,-50%) rotate(0)}
.ue-row.open{background:rgba(255,255,255,.35)}
@media (hover:hover){.ue-row:hover{background:rgba(255,255,255,.35)}.ue-sum:hover .chev{border-color:var(--ink)}}
.st{display:inline-flex;align-items:center;align-self:center;gap:9px;line-height:1}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:#b8ae9d}
.st.ok::before{background:#7f9a76}.st.res::before{background:#c9a24f}.st.sold::before{background:#9b8f89}
.ue-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
.ue-row.open .ue-body{grid-template-rows:1fr}
.ue-body>div{overflow:hidden;min-height:0}
.ue-in{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;padding:14px 4px 48px}
.ue-dl{display:grid;grid-template-columns:auto 1fr;gap:0 40px;align-content:start}
.ue-dl dt,.ue-dl dd{padding:13px 0;border-bottom:1px solid var(--line)}
.ue-dl dt{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;padding-top:17px}
.ue-dl dd{font-size:15.7px;letter-spacing:.04em;color:#5b4a41}
.ue-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;grid-column:1/-1}
.ue-plan{aspect-ratio:4/3;background:#faf8f4;border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ue-plan img{width:100%;height:100%;object-fit:contain;background:#fff}
.ue-plan svg{width:78%;height:auto;color:#c4bab2}
.ue-plan span{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.ue-note{margin-top:28px;font-size:13.7px;letter-spacing:.05em}

/* Ausstattung */
.aus{background:var(--bg2);padding:130px var(--pad) 140px}
.aus-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;gap:100px;align-items:center}
.aus-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-top-left-radius:90px}
.aus h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(40px,4.2vw,64px);line-height:1.08;color:#8d807a;margin:16px 0 26px}
.aus-txt>p{font-size:16.7px;letter-spacing:.06em;line-height:1.95;margin-bottom:34px}
.aus-list{list-style:none;border-top:1px solid var(--line)}
.aus-list li{display:flex;gap:22px;align-items:flex-start;padding:19px 0;border-bottom:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.aus-list svg{flex:none;width:30px;height:30px;fill:none;stroke:#8d807a;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,transform .5s}
.aus-list small{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;margin-bottom:3px}
.aus-list span{font-size:15.7px;letter-spacing:.04em;color:#5b4a41;line-height:1.6}
@media (hover:hover){.aus-list li:hover{transform:translateX(10px)}.aus-list li:hover svg{stroke:var(--ink);transform:scale(1.12)}}

.gallery{background:var(--bg)}

/* Lage */
.graetzl{padding-bottom:120px}
.gz-top h2{font-size:clamp(40px,4.6vw,68px);margin:18px 0 38px}
.gz-top p{margin-bottom:0}
.gz-bot{align-items:stretch;margin-top:90px}
.gz-img{aspect-ratio:auto;min-height:560px;height:100%}
.gz-img img{position:absolute;inset:0}
.gz-list{align-self:center;margin:0;padding:50px 40px 50px clamp(24px,15%,260px)}
.gz-list h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#fff;margin:0 0 12px;max-width:315px}
.gz-list ul{margin-bottom:36px}
.gz-list li b{font-size:25px}
.gz-list li span{white-space:nowrap}
.infra{max-width:1160px;margin:100px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(5,1fr);gap:40px}
.infra>div{border-top:1px solid rgba(255,255,255,.4);padding-top:18px}
.infra small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.infra p{font-size:15.7px;letter-spacing:.04em;line-height:1.75;color:#fff}
.map{max-width:1160px;margin:90px auto 0;padding:0 var(--pad)}
.map-ph,.map iframe{display:block;width:100%;height:440px;border:0;border-top-left-radius:90px;overflow:hidden}
.map-ph{background:rgba(62,53,50,.22);display:flex;align-items:center;justify-content:center;text-align:center;padding:30px}
.map-ph b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:32px;color:#fff;margin-bottom:8px}
.map-ph p{font-size:14px;letter-spacing:.05em;margin-bottom:24px;color:#fff}
.map-ph .btn-pill{color:#fff;border-color:rgba(255,255,255,.7);background:none;cursor:pointer;font-family:'Jost',sans-serif}
.map-ph .btn-pill:hover{background:var(--ink);border-color:var(--ink)}
.map iframe{filter:grayscale(.35) sepia(.12)}

/* Kontakt */
.ct-row em{display:block;font-style:normal;font-size:15.7px;letter-spacing:.04em;margin-top:2px}
.ct-row p{font-size:15.7px;letter-spacing:.04em;line-height:1.8;margin-top:4px}
.ct-row:hover p{color:#5b4a41}
.contact h2{font-size:clamp(46px,4.8vw,76px)}

/* Footer */
.ft-fine{margin-top:60px;max-width:760px;font-size:13.7px;line-height:1.8;letter-spacing:.03em;opacity:.8}
.ft-bot{margin-top:28px}
.ft-bot>span{max-width:70%}

/* ===== Tablet ===== */
@media (max-width:1100px){
  .hl-grid{grid-template-columns:repeat(2,1fr)}
  .proj-head{gap:50px}
  .wohn-cards{gap:44px}
  .aus-in{gap:56px}
  .infra{grid-template-columns:repeat(3,1fr);gap:30px}
  .ue-in{gap:36px}
}

/* ===== Mobil ===== */
@media (max-width:820px){
  .vis::before{font-size:8px;right:10px;bottom:8px}
  .hero-img.vis::before{right:10px;bottom:8px}
  .hero-txt h1{font-size:clamp(44px,12.5vw,60px)}
  .hero-txt .sub{margin-bottom:28px}
  .intro .lead{font-size:38px}
  .hl-i{padding:28px 20px 32px}
  .hl-i b{font-size:21px}
  .hl-grid{border-left:0;border-right:0}
  .proj{padding:76px var(--pad) 80px}
  .proj-head{display:block}
  .proj-p{margin-top:30px}
  .wohn{padding:76px var(--pad) 84px}
  .wohn-cards{grid-template-columns:1fr;gap:64px}
  .wcard2{margin-top:0}
  .wcard-img{border-top-left-radius:56px}
  .wcard2 .wcard-img{border-top-left-radius:0;border-top-right-radius:56px}
  .uebersicht{margin-top:84px}
  .ue-cols{display:none}
  .ue-sum{grid-template-columns:auto 1fr auto 36px;gap:14px;padding:18px 2px}
  .ue-sum>:nth-child(2),.ue-sum>:nth-child(3),.ue-sum>:nth-child(5),.ue-sum>:nth-child(6){display:none}
    .ue-in{grid-template-columns:1fr;gap:28px;padding:6px 2px 36px}
  .ue-dl{gap:0 24px}
  .aus{padding:76px var(--pad) 80px}
  .aus-in{display:block}
  .aus-img{aspect-ratio:4/3.6;border-top-left-radius:56px;margin-bottom:44px}
  .graetzl{padding-bottom:80px}
  .gz-list{padding:0 var(--pad);margin:0 0 56px}
  .gz-img{aspect-ratio:4/3.6;min-height:0;height:auto}
  .gz-list h3{max-width:none}
  .infra{grid-template-columns:1fr;gap:26px;margin-top:70px}
  .map{margin-top:60px}
  .map-ph,.map iframe{height:340px;border-top-left-radius:56px}
  .ft-bot>span{max-width:none}
}
@media (max-width:820px) and (hover:none){.ue-sum .chev{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.ue-body{transition:none}}

.wcard-img img,.aus-img img{scale:1.16;translate:0 var(--py,0px);transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.wcard-img:hover img,.aus-img:hover img{scale:1.22}}
@media (prefers-reduced-motion:reduce){.wcard-img img,.aus-img img{scale:1;translate:none}}

/* Navigation: früher auf Burger umschalten (5 Punkte) */
@media (max-width:1180px){nav.main{gap:20px}nav.main a{letter-spacing:.2em}}
@media (max-width:1100px){
  header{height:68px;grid-template-columns:40px 1fr 40px}
  header.solid{height:58px}
  nav.main,.hdr-r{display:none}
  .burger{display:block;grid-column:3;grid-row:1;justify-self:end;margin-right:-9px}
  header .logo{grid-column:2;justify-self:center;height:40px}
}

/* Kontakt-Logo: höher, läuft beim Scrollen von rechts nach links */
.contact{padding-bottom:170px}
.contact .ghost{left:6vw;bottom:-.4em}
@media (max-width:820px){.contact{padding-bottom:110px}.contact .ghost{left:3vw;bottom:-.38em}}

/* Hero-Logo 40 % kleiner */
.hero .ghost{--f:min(24.6vw,468px);left:43.2vw;top:calc(var(--f)*2.09 + 110px)}
@media (max-width:820px){.hero .ghost{--f:37vw;left:63vw;top:calc(var(--f)*2.09 + 80px)}}

/* Scroll-Hinweis direkt unter dem Button */
.hero-cta{display:inline-flex;flex-direction:column;align-items:center;gap:0}
.hero-cta .scroll-ind{position:static;transform:none;left:auto;bottom:auto;margin-top:34px}
@media (max-width:820px){.hero-cta .scroll-ind{left:auto;bottom:auto;margin-top:28px}.hero-cta .scroll-ind i{height:44px}}

/* ===== Highlights: dunkles Bento-Raster mit Kontrast ===== */
.hl{background:#3e3532;border:0;padding:100px var(--pad);position:relative;overflow:hidden}
.hl::before{content:"";position:absolute;right:-12%;top:-30%;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(circle,rgba(244,240,233,.06),rgba(244,240,233,0) 65%);pointer-events:none}
.hl-grid{position:relative;max-width:1160px;gap:14px;background:none;border:0;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto)}
.hl-i{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:30px 30px 34px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .5s,border-color .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.hl-i::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#cfc6bd;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hl-i small{font-size:11px;letter-spacing:.3em;color:#cfc6bd;margin-bottom:34px;font-weight:500}
.hl-i b{color:#f3f0ea;font-size:clamp(23px,2vw,30px);line-height:1.22;transition:color .5s,transform .5s}
.hl-big{grid-column:1/3;grid-row:1/3;background:#f3efe8;border-color:#f3efe8;padding:38px 40px 44px}
.hl-big small{color:#8d807a}
.hl-big b{color:#5b4a41;font-size:clamp(26px,2.5vw,38px)}
.hl-big .big{display:block;font-size:clamp(120px,14vw,210px);line-height:.85;font-weight:300;color:#8d807a;letter-spacing:-.02em;margin-bottom:18px}
.hl-wide{grid-column:span 2}
@media (hover:hover){
  .hl-i:hover{background:#f3efe8;border-color:#f3efe8;transform:translateY(-6px)}
  .hl-i:hover::after{width:100%}
  .hl-i:hover b{color:#5b4a41;transform:none}
  .hl-i:hover small{color:#8d807a}
  .hl-big:hover{background:#3e3532;border-color:rgba(255,255,255,.3)}
  .hl-big:hover b,.hl-big:hover .big{color:#f3f0ea}
  .hl-big:hover small{color:#cfc6bd}
}
@media (max-width:1100px){.hl-grid{grid-template-columns:repeat(2,1fr)}.hl-big{grid-column:1/-1;grid-row:auto}.hl-wide{grid-column:span 1}}
@media (max-width:820px){.hl{padding:64px var(--pad)}.hl-grid{gap:10px;grid-auto-rows:minmax(150px,auto)}.hl-i{padding:22px 20px 26px}.hl-i small{margin-bottom:22px}.hl-i b{font-size:21px}.hl-big .big{font-size:110px}.hl-wide{grid-column:1/-1}}
.hl-i b{font-size:clamp(21px,1.7vw,27px);hyphens:auto;overflow-wrap:break-word}.hl-big b{font-size:clamp(26px,2.5vw,38px)}@media (max-width:820px){.hl-i b{font-size:21px}}

/* Galerie: Kacheln driften in unterschiedlichem Tempo, Bilder zoomen stärker */
.gal-img{translate:0 var(--ty,0px);will-change:translate}
.gal-img img{scale:1.26}
@media (hover:hover){.gal-img:hover img{scale:1.33}}
@media (max-width:820px){.gal-img{translate:none}}
@media (prefers-reduced-motion:reduce){.gal-img{translate:none}.gal-img img{scale:1}}

/* ===== Footer neu: Tash links, Logo mittig, Kontakt rechts ===== */
.ft-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
.ft-top .logo{height:96px;justify-self:center;color:#f3f0ea}
.ft-by{display:flex;align-items:center;gap:16px;margin:0;color:#f3f0ea;text-decoration:none;justify-self:start}
.ft-by small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.ft-by strong{display:block;font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.ft-by svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.ft-by:hover svg{transform:scale(1.12)}.ft-top .logo:hover{color:#cfc6bd}}
.ft-contact{justify-self:end;text-align:right}
.ft-contact small{margin-bottom:16px}
.ft-contact a{text-decoration:none}
.ft-contact a:hover{color:#fff}
@media (max-width:820px){
  .ft-top{grid-template-columns:1fr;gap:36px;justify-items:center;text-align:center}
  .ft-top>div:first-child{grid-column:auto}
  .ft-top .logo{order:-1;height:84px}
  .ft-by{justify-self:center}
  .ft-contact{justify-self:center;text-align:center}
}

/* Footer-Logo: beim Mouseover nur größer, keine Farbänderung */
.ft-top .logo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.ft-top .logo:hover{color:#f3f0ea;transform:scale(1.12)}}

/* Kein horizontales Scrollen (Mobil) */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}

@media (max-width:820px){.gz-list{align-self:stretch;width:100%}.gz-list li b{font-size:22px}.ue-sum>.st{align-self:center}}

/* Kein "Visualisierung"-Hinweis auf den Bildern */
.vis::before{content:none!important;display:none!important}

/* Hero: zwei Buttons nebeneinander */
.hero-cta{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px}
.btn-line{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);color:#5b4a41;border-radius:40px;padding:18px 32px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;background:transparent;transition:background .4s,color .4s,transform .4s,box-shadow .4s}
.btn-line svg{width:20px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .4s}
@media (hover:hover){.btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(62,53,50,.5)}.btn-line:hover svg{transform:translateX(5px)}}
@media (max-width:820px){.hero-cta{flex-direction:column;align-items:stretch}.btn-fill,.btn-line{text-align:center;justify-content:center;width:100%}}