:root{
  --bg: #ffffff;
  --panel: #f7f7f7;
  --text: #1b1b1b;
  --muted:#6b7280;
  --primary:#b43027;   /* Kontbay-Rot */
  --accent:#245435;    /* Kontbay-Grün */
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212; --panel:#181818; --text:#f1f5f9; --muted:#94a3b8;
    --card:#161616; --shadow: 0 10px 30px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#121212; --panel:#181818; --text:#f1f5f9; --muted:#94a3b8;
  --card:#161616; --shadow: 0 10px 30px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f7; --text:#1b1b1b; --muted:#6b7280;
  --card:#ffffff; --shadow: 0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  background:var(--bg); color:var(--text);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{
  display:flex; align-items:center; justify-content:space-between; padding:20px 0;
}
.brand{display:flex; gap:14px; align-items:center}
.logo{width:64px; height:64px; object-fit:contain; border-radius:12px; background:#fff; padding:6px; box-shadow:var(--shadow)}
.brand h1{margin:0; font-size:28px; letter-spacing:.4px}
.brand h1 span{color:var(--accent)}
.tagline{margin:0; color:var(--muted); font-size:14px}

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid transparent; background:var(--panel); color:var(--text); text-decoration:none; box-shadow:var(--shadow)}
.btn.primary{background:var(--primary); color:#fff}
.btn.ghost{background:transparent;border-color:var(--panel)}
.btn.small{padding:8px 12px; font-size:14px}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch; padding:20px 0}
.hero-card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.hero-card h3{margin-top:0}
.hero-text h2{font-size:34px; margin-top:12px}
.hero-text p{color:var(--muted); max-width:55ch}

.section{padding:30px 0}
.section-head{display:flex; align-items:center; justify-content:space-between}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card img{width:100%; height:190px; object-fit:cover}
.card-body{padding:14px}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}
.badge{background:var(--panel); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--muted)}
.price-row{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.price{font-weight:700; font-size:18px; color:var(--accent)}

.map-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--card)}
.map-wrap iframe{width:100%; height:360px; border:0}

.site-footer{padding:30px 0; color:var(--muted); border-top:1px solid rgba(0,0,0,.06)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
}