/* Objektseite — nutzt Farb-/Font-Variablen aus style.css */

.obj-hero{
  position: relative; height: 78vh; min-height: 520px;
  display:flex; align-items:flex-end;
  background-size: cover; background-position: center;
}
.obj-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,14,16,0.25) 0%, rgba(13,14,16,0.55) 60%, rgba(13,14,16,0.95) 100%);
}
.obj-hero-content{ position:relative; z-index:2; padding: 0 72px 60px; max-width: 800px; }
.obj-hero h1{ font-family: var(--font-display); font-size: clamp(34px,5vw,64px); font-weight:300; color:var(--ivory); margin: 10px 0 6px; }
.obj-hero-sub{ color: var(--stone); font-size: 15px; margin-bottom: 26px; }

.pdf-btn{
  display:inline-block; border:1px solid var(--gold); color: var(--gold);
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  padding: 14px 30px; text-decoration:none; transition: all 0.25s ease;
}
.pdf-btn:hover{ background: var(--gold); color: var(--bg); }

.obj-facts{ background: var(--panel); padding: 40px 72px; border-bottom: 1px solid var(--hairline); }
.obj-facts-grid{ max-width: var(--max-width); margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.obj-facts-grid > div{ display:flex; flex-direction:column; gap:6px; }
.fact-label{ font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color: var(--gold); }
.fact-value{ font-size:14px; color: var(--ivory); }

.obj-text{ max-width: 760px; margin: 0 auto; padding: 90px 24px 20px; }
.obj-text h2{ font-size: clamp(26px,3vw,38px); font-weight:300; margin: 14px 0 24px; }
.obj-text p{ color: var(--stone); font-size:15px; line-height:1.8; margin-bottom:16px; }

.obj-split{ display:grid; grid-template-columns: 1fr 1fr; min-height: 60vh; margin-top: 40px; }
.obj-split-image{ background-size: cover; background-position:center; }
.obj-split-text{ background: var(--panel); display:flex; flex-direction:column; justify-content:center; gap:20px; padding: 70px 60px; }
.obj-split-text h2{ font-size: clamp(24px,2.8vw,34px); font-weight:300; }
.obj-split-text p{ color: var(--stone); font-size:15px; line-height:1.8; max-width: 42ch; }

@media (max-width: 900px){
  .obj-split{ grid-template-columns: 1fr; }
  .obj-split-image{ min-height: 320px; }
  .obj-split-text{ padding: 50px 26px; }
  .obj-facts-grid{ grid-template-columns: 1fr 1fr; }
}

.obj-timeline{ max-width: 760px; margin: 90px auto 0; padding: 0 24px; }
.obj-timeline h2{ font-size: clamp(26px,3vw,38px); font-weight:300; margin: 14px 0 34px; }
.timeline{ display:flex; flex-direction:column; border-top:1px solid var(--hairline); }
.timeline-item{
  display:grid; grid-template-columns: 110px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline); align-items:baseline;
}
.timeline-year{ font-family: var(--font-display); color: var(--gold); font-size:15px; }
.timeline-item span:last-child{ color: var(--stone); font-size:14px; line-height:1.6; }

.obj-grid-features{ max-width: var(--max-width); margin: 90px auto 0; padding: 0 72px; }
.obj-grid-features h2{ font-size: clamp(26px,3vw,38px); font-weight:300; margin:14px 0 34px; }
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.feature-card{ border:1px solid var(--hairline); padding: 30px; }
.feature-card h3{ font-family: var(--font-display); font-weight:400; font-size:20px; color:var(--ivory); margin:0 0 12px; }
.feature-card p{ color: var(--stone); font-size:14px; line-height:1.7; }

@media (max-width: 900px){
  .feature-grid{ grid-template-columns:1fr; }
  .obj-grid-features{ padding: 0 24px; }
}

.obj-cta{ text-align:center; max-width:700px; margin: 100px auto; padding: 0 24px; }
.obj-cta h2{ font-size: clamp(24px,2.8vw,32px); font-weight:300; margin-bottom:14px; }
.obj-cta p{ color: var(--stone); margin-bottom: 30px; }

/* ---------- Galerie ---------- */
.gallery-grid{
  max-width: var(--max-width); margin: 0 auto 90px; padding: 0 72px;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}
.gallery-item{
  aspect-ratio: 4/3; background-size:cover; background-position:center;
  cursor: pointer; transition: opacity 0.25s ease;
}
.gallery-item:hover{ opacity: 0.85; }

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); padding: 0 24px; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(6,7,8,0.97);
  display:none; align-items:center; justify-content:center; padding:60px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:80vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:34px; right:44px; font-size:2.1rem; color:var(--ivory); cursor:pointer; background:none; border:none; }
.lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--gold); font-size:2.4rem; cursor:pointer; padding:14px 20px; opacity:.65; transition:opacity .2s;
}
.lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-prev{ left:14px; } .lightbox-next{ right:14px; }
@media (max-width: 900px){
  .lightbox{ padding:20px; }
  .lightbox-prev, .lightbox-next{ font-size:1.8rem; padding:10px 12px; }
}

/* ---------- 360°-Viewer (echte Kugelprojektion via eigenem WebGL-Shader, panoviewer.js) ---------- */
.pano-wrap{ max-width: var(--max-width); margin: 0 auto 100px; padding: 0 72px; }
.pano-viewer{
  width:100%; height: 460px; overflow: hidden; position: relative;
  border: 1px solid var(--hairline); cursor: grab; background: #000;
}
.pano-viewer canvas{ display:block; }
.pano-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  border: 1px solid var(--gold-soft); color: var(--gold);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 8px 16px;
}
.pano-hint{ text-align:center; font-size:12px; color: var(--stone); margin-top:12px; letter-spacing:0.05em; }

@media (max-width: 900px){
  .pano-wrap{ padding: 0 24px; }
  .pano-viewer{ height: 300px; }
}

/* ---------- Lage & Anfahrt ---------- */
.obj-lage{ max-width: var(--max-width); margin: 100px auto 0; padding: 0 72px; }
.obj-lage h2{ font-size: clamp(26px,3vw,38px); font-weight:300; margin:14px 0 20px; }
.lage-intro{ color: var(--ivory); opacity: 0.88; font-size:16px; line-height:1.9; max-width:60ch; margin-bottom:44px; }

.distance-table{ border-top:1px solid var(--hairline); max-width: 640px; margin-bottom: 70px; }
.distance-row{
  display:flex; justify-content:space-between; gap: 20px;
  padding: 14px 0; border-bottom:1px solid var(--hairline); font-size:14px;
}
.distance-row span:first-child{ color: var(--ivory); }
.distance-row span:last-child{ color: var(--gold); text-align:right; }

.umgebung-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 70px; }
.umgebung-item{ display:flex; flex-direction:column; gap:10px; }
.umgebung-img{ aspect-ratio: 4/5; background-size:cover; background-position:center; }
.umgebung-item span{ font-size:12px; letter-spacing:0.05em; color: var(--stone); text-align:center; }

.map-illustration{ border:1px solid var(--hairline); }
.map-illustration svg{ display:block; width:100%; height:auto; }

@media (max-width: 900px){
  .obj-lage{ padding: 0 24px; }
  .umgebung-grid{ grid-template-columns: repeat(2,1fr); }
}