:root {
  --bg:#e5e7eb;          /* etwas dunkleres Grau */
  --text:#1a1a1a;
  --muted:#444444;
  --card:#f0f0f0;
  --border:#d1d5db;
  --accent:#7b1111;      /* Dunkelrot */
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header / Nav */
header{position:sticky;top:0;background:#f0f0f0;border-bottom:1px solid var(--border);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;color:#111}
nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
nav a{padding:8px 12px;border-radius:8px;color:#111}
nav a:hover{background:#ddd}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;border:0}
.btn-outline{background:transparent;color:#111;border:1px solid var(--accent)}

/* Hero / Slider */
.hero-wrap{padding:6vh 0 10vh}
.hero{position:relative;height:65vh;max-height:540px;min-height:260px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#ddd}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center}

/* bottom overlay on slider */
.overlay{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.65) 100%);color:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.overlay .text h1{margin:0 0 6px;font-size:clamp(20px,3.5vw,28px)}
.overlay .text p{margin:0;color:#e5e7eb}
.overlay .actions{display:flex;gap:10px;flex-wrap:wrap}

/* slider controls */
.controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none}
.ctrl{pointer-events:auto;background:rgba(0,0,0,.35);border:0;color:#fff;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55);border:0;cursor:pointer}
.dot.active{background:#fff}

/* Sections / Cards */
.section{padding:36px 0}
.section h2{margin:0 0 10px;font-size:clamp(22px,3.2vw,28px)}
.lead{color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card .thumb{aspect-ratio:16/10;background:#d9d9d9;border-radius:12px;border:1px solid var(--border);margin-bottom:10px;object-fit:cover;width:100%;height:auto}

/* Footer */
.footer{border-top:1px solid var(--border);margin-top:40px;background:#f0f0f0}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:28px 0}
.footer a{color:#111}

/* ========== Responsive Tweaks ========== */

/* Tablet: <= 900px */
@media (max-width: 900px) {
  .container { padding: 0 16px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 14px; }

  .hero { height: 50vh; max-height: 420px; }
  .overlay { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .overlay .text h1 { font-size: clamp(18px, 4.5vw, 24px); }
  .overlay .text p { font-size: 14px; }

  header .nav { gap: 8px; }
  header nav ul { flex-wrap: wrap; gap: 8px; }
  header nav a { padding: 6px 10px; }

  .card { padding: 14px; }
  .card .thumb { border-radius: 10px; }
  .ctrl { width: 44px; height: 44px; }
  .dot { width: 12px; height: 12px; }
}

/* Handy: <= 600px */
@media (max-width: 600px) {
  .container { padding: 0 12px; }
  .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  .hero { height: 42vh; max-height: 360px; min-height: 220px; }
  .overlay .actions { width: 100%; }
  .overlay .actions .btn,
  .overlay .actions .btn.btn-outline { width: 100%; text-align: center; }

  h1 { font-size: clamp(22px, 7vw, 28px); }
  h2 { font-size: clamp(18px, 6vw, 24px); }
  h3 { font-size: clamp(16px, 5.5vw, 20px); }

  .footer .cols { grid-template-columns: 1fr; gap: 12px; }
}