:root{
  --bg:#f8f4ee;
  --text:#161514;
  --brown:#5d3a20;
  --brown-dark:#43270f;
  --line:#d8cbbd;
  --grey:#8d857d;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body.lightbox-open{overflow:hidden}
.no-break{white-space:nowrap}

.site-section{padding:24px 24px 54px}
.property-section{max-width:1536px;margin:0 auto}
.property-container{
  display:grid;
  grid-template-columns:minmax(0,48%) minmax(0,52%);
  gap:28px;
  align-items:stretch;
}
.map-wrap{width:100%;min-width:0;height:100%}
.map-button{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:left}
.map-button picture{display:block;width:100%;height:100%}
.map-button img{
  display:block;
  width:100%;
  height:100%;
  min-height:610px;
  max-height:760px;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:0;
}
.tap-hint{display:none;margin:8px 2px 0;font-size:12px;line-height:1.35;color:var(--grey)}
.property-content{padding-top:4px;min-width:0}
h2{font-size:clamp(30px,2.45vw,36px);line-height:1.12;margin:0;color:var(--text);letter-spacing:-.025em;font-weight:700}
.section-line{width:82px;height:3px;background:var(--brown);margin:20px 0 26px}
.benefits-list{display:grid;gap:27px}
.benefit-item{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:18px;align-items:start}
.check{font-size:29px;line-height:1;color:var(--brown);font-weight:700;margin-top:-2px}
.benefit-item h3{font-size:20px;line-height:1.2;margin:0 0 6px;color:var(--brown-dark);font-weight:700;letter-spacing:-.005em}
.benefit-item p{font-size:16px;line-height:1.42;margin:0;color:#161514}
.property-card{margin-top:25px;background:rgba(93,58,32,.06);border:1px solid var(--line);border-radius:8px;padding:18px 20px 19px}
.property-card h3{font-size:21px;line-height:1.24;margin:0 0 8px;color:var(--brown-dark);font-weight:700;letter-spacing:-.012em}
.property-card p{font-size:16px;line-height:1.42;margin:0}
.property-note{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;display:grid;grid-template-columns:31px minmax(0,1fr);column-gap:14px;align-items:start}
.info-dot{width:28px;height:28px;border:2px solid #aa9d90;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#8d8176;font-weight:700;font-size:18px;font-family:Georgia,serif}
.property-note p{font-size:15px;line-height:1.4;margin:0;color:#25221f}
.source-note{font-size:12.5px!important;color:var(--grey)!important;margin-top:2px!important}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1000;display:none;align-items:center;justify-content:center;padding:22px}
.lightbox.is-open{display:flex}
.lightbox-close{position:absolute;top:18px;right:20px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#2b211a;font-size:32px;line-height:1;cursor:pointer;z-index:2}
.lightbox-image-wrap{width:min(96vw,1500px);max-height:88vh;overflow:auto;background:#111;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;cursor:grab;user-select:none}
.lightbox-image-wrap.is-dragging{cursor:grabbing}
.lightbox-image-wrap img{display:block;max-width:none;width:max(1400px,145vw);height:auto}

/* Tablet: kompakte 50/50-Aufteilung, Karte auf das Neubaugebiet zentriert. */
@media (min-width:768px) and (max-width:1199px){
  .site-section{padding:20px 16px 44px}
  .property-container{grid-template-columns:minmax(0,48%) minmax(0,52%);gap:16px;align-items:stretch}
  .map-wrap,
  .map-button,
  .map-button picture{height:100%}
  .map-button img{min-height:0;max-height:none;height:100%;object-fit:cover;object-position:50% 50%}
  .property-content{padding-top:1px}
  h2{font-size:clamp(24px,2.85vw,30px);line-height:1.1}
  .section-line{margin:14px 0 18px;width:66px;height:3px}
  .benefits-list{gap:clamp(14px,2vh,20px)}
  .benefit-item{grid-template-columns:22px minmax(0,1fr);column-gap:10px}
  .check{font-size:23px;margin-top:-1px}
  .benefit-item h3{font-size:clamp(15px,1.7vw,18px);line-height:1.18;margin-bottom:3px}
  .benefit-item p{font-size:clamp(12.5px,1.45vw,14.5px);line-height:1.34}
  .property-card{padding:14px 15px 15px;margin-top:16px}
  .property-card h3{font-size:clamp(16px,1.8vw,19px);line-height:1.2;margin-bottom:6px}
  .property-card p{font-size:clamp(12.5px,1.45vw,14px);line-height:1.36}
  .property-note{margin-top:16px;padding-top:12px;grid-template-columns:25px minmax(0,1fr);column-gap:10px}
  .info-dot{width:24px;height:24px;font-size:15px}
  .property-note p{font-size:12.5px;line-height:1.36}
  .source-note{font-size:11px!important}
}

/* Smartphone: kompakte Typografie wie im Hero; Text zuerst, Karte danach. */
@media (max-width:767px){
  .site-section{padding:18px 14px 42px}
  .property-container{display:flex;flex-direction:column;gap:15px}
  .property-content{display:contents}
  .property-content h2{order:1}
  .section-line{order:2;margin:10px 0 2px}
  .benefits-list{order:3;gap:10px;width:100%}
  .map-wrap{order:4;width:100%}
  .property-card{order:5;width:100%;margin-top:0}
  h2{font-size:clamp(23px,6.5vw,27px);line-height:1.08;letter-spacing:-.022em}
  .section-line{width:58px;height:3px}
  .benefit-item{grid-template-columns:19px minmax(0,1fr);column-gap:8px}
  .check{font-size:20px;margin-top:0}
  .benefit-item h3{font-size:clamp(14.5px,4.15vw,16.5px);line-height:1.14;margin-bottom:1px}
  .benefit-item p{font-size:clamp(12px,3.35vw,13.5px);line-height:1.28}
  .map-button img{height:auto;min-height:0;max-height:none;aspect-ratio:16/11;object-fit:cover;object-position:58% 50%;border-radius:8px}
  .tap-hint{display:block;font-size:11.5px;margin-top:6px}
  .property-card{padding:13px 14px 14px;border-radius:8px}
  .property-card h3{font-size:clamp(15.5px,4.5vw,17.5px);line-height:1.17;margin-bottom:6px}
  .property-card p{font-size:clamp(12px,3.35vw,13.5px);line-height:1.34}
  .property-note{grid-template-columns:22px minmax(0,1fr);column-gap:8px;margin-top:14px;padding-top:11px}
  .info-dot{width:21px;height:21px;font-size:13px}
  .property-note p{font-size:12px;line-height:1.34}
  .source-note{font-size:10.8px!important}
  .lightbox{padding:8px;align-items:center}
  .lightbox-image-wrap{width:100vw;max-width:100vw;max-height:84vh}
  .lightbox-image-wrap img{width:max(1250px,250vw)}
}

@media (max-width:380px), (max-width:767px) and (max-height:700px){
  .site-section{padding-top:14px}
  h2{font-size:22px}
  .benefits-list{gap:8px}
  .benefit-item{grid-template-columns:18px minmax(0,1fr);column-gap:7px}
  .check{font-size:19px}
  .benefit-item h3{font-size:14px}
  .benefit-item p{font-size:11.5px;line-height:1.24}
  .property-card{padding:12px 13px}
  .property-card h3{font-size:15px}
  .property-card p{font-size:11.8px}
}

/* Master v3: tighter section transitions only */
.site-section{padding-top:16px;padding-bottom:22px}
@media (max-width:1100px){.site-section{padding-top:14px;padding-bottom:20px}}
@media (max-width:767px){.site-section{padding-top:12px;padding-bottom:18px}}

/* Master v5 – tablet section spacing only */
@media (min-width:601px) and (max-width:1100px){
  .site-section{padding-top:8px;padding-bottom:10px}
}
