:root{
  --brand:#0a4d68;
  --brand-2:#088395;
  --bg:#f4f6f8;
  --card:#fff;
  --muted:#666;
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  background:var(--bg);
  color:#222;
  line-height:1.5;
}

.container{max-width:1200px;margin:auto;padding:20px}

header{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;
  padding:32px 20px 40px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
}

header h1{margin:0;font-size:32px;font-weight:700;}
.claim{margin-top:6px;font-size:18px;font-weight:500}

.hero{
  margin-top:20px;
  height:280px;
  border-radius:12px;
  background:linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35)),url("https://via.placeholder.com/1200x600?text=RundumRhein") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:600;
  color:#fff;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}

.grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px;
  margin-top:30px;
}

.card{
  background:var(--card);
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.leistungen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:20px;
}

.leistung{
  background:var(--card);
  padding:18px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
  transition:transform .2s;
}

.leistung:hover{transform:translateY(-3px)}

.leistung img{
  width:100%;
  max-height:140px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:12px;
}

.action-buttons{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}

.action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
  transition:.15s;
}

.action-btn:hover{transform:translateY(-3px)}

.btn-whatsapp{background:#25D366}
.btn-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.btn-phone{background:#0A84FF}

.floating-buttons{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:9999;
}

input,select,button{
  width:100%;
  padding:10px;
  margin-top:6px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:14px;
}

button{
  background:var(--brand);
  color:#fff;
  border:none;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s;
}

button:hover{transform:translateY(-2px)}

.ergebnis{font-weight:700;margin-top:10px;color:var(--brand)}

footer{
  background:#111;
  color:#ddd;
  padding:20px;
  text-align:center;
  margin-top:40px;
}

footer a{color:#ccc;text-decoration:none}

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