/* ===== Design-Variablen ===== */
:root{
  --primary-color:#414141;            /* Anthrazit */
  --secondary-color:#f8f9fa;          /* Heller Hintergrund */
  --accent-color-blue:#1c4479;        /* Dunkelblau */
  --accent-color-orange:#f0802e;      /* Orange */
  --text-color:#333;
  --light-text-color:#666;
  --card-shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:12px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--secondary-color);
  color:var(--text-color);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

/* ===== Container ===== */
.container{max-width:1100px;margin:0 auto;padding:24px 18px}

/* ===== Header / Nav ===== */
header{
  background:#fff;
  border-bottom:1px solid #e7e7e7;
}
.header-inner{display:flex;align-items:center;gap:18px}
.logo{width:160px;height:auto}
.nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--accent-color-blue);font-weight:600;
  padding:8px 10px;border-radius:8px
}
.nav a:hover{background:#eef3fa}

/* ===== Headings ===== */
h1{font-size:2rem;margin:18px 0 8px;color:var(--accent-color-blue)}
h2{font-size:1.35rem;margin:28px 0 10px;color:var(--primary-color);border-bottom:3px solid #eee;padding-bottom:6px}

/* small helper */
.muted{color:var(--light-text-color)}

/* ===== Hero / Intro ===== */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.hero img.hero-img{border-radius:12px;box-shadow:var(--card-shadow)}
.badge{font-size:.82rem;color:#fff;background:var(--accent-color-blue);display:inline-block;padding:6px 10px;border-radius:999px}

/* ===== Feature-Liste ===== */
.features{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--card-shadow);
  padding:18px 18px 8px;margin-top:18px}
.features ul{margin:0 0 8px 18px}
.features li{margin:6px 0}
.features b{color:var(--accent-color-blue)}

/* ===== Marken-Grid ===== */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.brand{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid #eee;border-radius:10px;padding:14px;text-decoration:none;color:var(--text-color);
  box-shadow:0 1px 4px rgba(0,0,0,.03);transition:transform .15s, box-shadow .15s
}
.brand:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.brand img{max-width:120px;max-height:54px;object-fit:contain;margin-bottom:8px}
.brand span{font-weight:600}

/* ===== Footer ===== */
footer{margin-top:28px;padding:20px 0;text-align:center;color:#888}
footer a{color:inherit}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:18px}
  .logo{width:140px}
}
@media (max-width:520px){
  .nav{gap:10px}
  .logo{width:120px}
  h1{font-size:1.7rem}
}