/* style.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700');

/* Body background with tiled watermark */
body {
  font-family: 'Inter','Open Sans',sans-serif;
  color: #eee;
  margin: 0;
  padding: 0;
  background: #054696 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ctext x='50%25' y='50%25' dy='.35em' text-anchor='middle' font-family='Inter' font-size='28' fill='rgba(255,255,255,0.15)' transform='rotate(-25,200,200)'%3EExposé%20exklusiv%20f%C3%BCr%20In%20Praxi%3C/text%3E%3C/svg%3E") repeat;
}

/* Main content container */
.expose-container {
  max-width:1024px;
  margin:auto;
  background:#444;
  padding:20px;
  border-radius:10px;
  position: relative;
}

/* Header */
header.header {
  text-align:center;
  margin-bottom:30px;
}

header h1 {
  font-size: 64px;
  color:#fff;
  font-weight:600;
  line-height:1.4;
}

header .address {
  color:#ddd;
  margin:5px 0;
}

header .price {
  color:#e6e6e6;
  font-size:1.2em;
  margin:5px 0;
  font-weight:500;
}

/* Slider container */
.gallery {
  position: relative;
  max-width: 1024px;
  margin: auto;
  overflow: hidden;
  border-radius: 20px;
}

/* Slides wrapper */
.slides img {
  width: 100%;
  display: none;
  transition: opacity 0.5s ease-in-out;
  border-radius: 20px;
}

.slides img.active {
  display: block;
}

/* Navigation buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  background-color: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  user-select: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transform: translateY(-50%);
  transition: background-color 0.3s, transform 0.2s;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.9);
  transform: translateY(-50%) scale(1.1);
}

/* Highlight Box */
.highlight-box {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content: left;
  margin:20px auto;
  max-width: 1024px;
}

.highlight-box div {
  background: linear-gradient(135deg, #C4C4C4, #F4F4F4);
  color: #333;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.95em;
  font-weight: 500;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.highlight-box div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Sections */
.description, .fakten, .energie, .lage, .cta {
  max-width:1024px;
  margin:20px auto;
  padding:20px;
  border-radius:10px;
  box-sizing: border-box;
  line-height:1.6;
  font-size:1em;
}

/* Section backgrounds */
.description { background:#4a4a4a; }
.fakten, .energie, .lage { background:#555; }

/* Facts & Energieausweis grid */
.facts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:15px;
  max-width: 1024px;
  margin: auto;
}

.facts-grid div {
  background:#666;
  padding:10px 15px;
  border-radius:6px;
  line-height:1.3;
  color:#eee;
}

.facts-grid div .caption {
  font-weight:normal;
  display:block;
  font-size:0.8em;
}

.facts-grid div .content {
  font-weight:bold;
  display:block;
  font-size:0.85em;
}

/* Map */
.map iframe {
  width:100%;
  border-radius:8px;
}

/* CTA button */
#ctaBtn {
  display:inline-block;
  padding:12px 25px;
  background:#054696;
  color:#fff;
  border:none;
  cursor:pointer;
  border-radius:6px;
  font-size:1em;
  text-decoration:none;
  font-weight:500;
}

/* Disclaimer */
.disclaimer {
  background:#4a4a4a;
  color:#ccc;
  font-size:0.85em;
  padding:15px 20px;
  border-radius:10px;
  max-width:1024px;
  width: 100%;              /* fill the container */
  display: block;           /* ensure it’s block-level */
  box-sizing: border-box;   /* include padding in width */
  padding: 20px;            /* match other sections */
  margin:20px auto;
  line-height:1.5;
  box-sizing:border-box;
}

/* Responsive */
@media (max-width:768px){
  header h1{font-size:2.4em;}
  .slides { height:400px; }
  .expose-container, .description, .fakten, .energie, .lage, .cta, .facts-grid, .highlight-box, .disclaimer { 
    max-width: 90%;
  }
}

@media (max-width:480px){
  header h1{font-size:2.2em;}
  .facts-grid{grid-template-columns:1fr;}
  .highlight-box{grid-template-columns:1fr 1fr;}
  .slides { height:250px; }
  .expose-container, .description, .fakten, .energie, .lage, .cta, .facts-grid, .highlight-box, .disclaimer { 
    max-width: 95%; 
  }
}