/* Grundlayout */
:root{
  --bg:#f9f9f9;
  --text:#111;
  --muted:#666;
  --brand:#ff6600;
  --card:#f4f4f4;
  --header:#000;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}

/* Header */
.site-header{background:var(--header);color:#fff}
.container{width:90%;max-width:1200px;margin:0 auto}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo{height:56px}
.main-nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:700}
.btn{display:inline-block;padding:10px 16px;border-radius:6px;text-decoration:none}
.btn-cta{background:var(--brand);color:#fff}

/* Hero */
.hero{background:linear-gradient(135deg,#1f1f1f,#4a4a4a);color:#fff;text-align:center;padding:70px 16px}
.hero h1{margin:0 0 8px;font-size:2.2rem}
.hero p{margin:0 0 16px;opacity:.95}

/* Leistungen */
.leistungen{padding:44px 0;background:#fff}
.leistungen h2{text-align:center;margin:0 0 24px}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.card-media{
  aspect-ratio: 4 / 3; /* sorgt für einheitliche Höhe */
  background:#ddd;
  overflow:hidden;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-body{padding:12px 14px}
.card-body h3{margin:0 0 6px;color:#000;font-size:1.1rem}
.card-body p{margin:0;color:#000;font-size:.95rem;line-height:1.35}

/* Footer */
.site-footer{background:var(--header);color:#fff;padding:18px 0;text-align:center}
.site-footer a{color:#fff;text-decoration:none}

/* Responsive */
@media (max-width: 1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px){
  .cards{grid-template-columns:1fr}
  .logo{height:46px}
  .hero{padding:48px 12px}
}