/* ============ Grunddesign ============ */ * { box-sizing: border-box; } :root{ --brand:#002f6c; --accent:#d00000; --text:#222; --bg:#f5f5f5; --card:#fff; --shadow:0 8px 24px rgba(0,0,0,.08); } html,body{ margin:0; padding:0; } body{ font-family: Arial, Helvetica, sans-serif; color:var(--text); background:var(--bg); line-height:1.5; } .container{ max-width:1100px; margin:0 auto; padding:0 20px; } /* ============ Header mit Text im Bild ============ */ .header{ color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); position: relative; } .header-mit-bild{ background-image: url('https://kfzwerkstatt-nettetal.de/images/werkstatt-header.jpg'); background-size: cover; background-position: center 30%; background-repeat: no-repeat; height: 420px; color:#fff; position: relative; overflow: hidden; } .header-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.45); display:flex; flex-direction:column; justify-content:space-between; padding-top: 20px; } .header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; } .logo{ font-weight:bold; font-size:1.2rem; } .header nav ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; } .header nav a{ color:#fff; text-decoration:none; font-size:.95rem; } .header nav a:hover{ text-decoration:underline; } /* ===== Textblock im Header ===== */ .header-hero{ text-align:center; padding-bottom:40px; } .header-hero h1{ font-size:2.4rem; margin:0 0 10px; color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); } .header-hero p{ font-size:1.1rem; margin:0 0 18px; color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); } .btn{ display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:12px 22px; border-radius:6px; transition:filter .2s ease, transform .02s ease; } .btn:hover{ filter:brightness(.9) } .btn:active{ transform:translateY(1px) } /* ===== Verlauf am unteren Rand ===== */ .header-gradient{ position:absolute; bottom:0; left:0; right:0; height:100px; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); pointer-events:none; } /* ============ Info-Blöcke ============ */ .info{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:22px; padding:42px 20px; max-width:1100px; margin:-30px auto 40px; } .block{ background:var(--card); padding:22px; border-radius:14px; box-shadow:var(--shadow); text-align:center; } .block h2{ font-size:1.15rem; margin:0 0 8px } .block p{ margin:0 0 12px } .link{ color:var(--brand); font-weight:bold; text-decoration:none } .link:hover{ text-decoration:underline } /* ============ Footer ============ */ .footer{ background:var(--brand); color:#fff; text-align:center; padding:16px 10px; font-size:.92rem; } .footer a{ color:#fff; text-decoration:underline } /* ============ Responsiv ============ */ @media (max-width: 768px){ .header-mit-bild{ height: 320px; } .header-hero h1{ font-size:2rem; } .header-hero p{ font-size:1rem; } .header nav ul{ gap:12px; } } @media (max-width: 480px){ .logo{ font-size:1.05rem; } .info{ gap:16px; padding:32px 16px; } }