body{margin:0;font-family:-apple-system,Segoe UI;background:#fff;color:#111;text-align:center}
header {
  background: url("hero.jpg") center/cover no-repeat;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* dunkler Overlay für bessere Lesbarkeit */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Stärke anpassbar */
}

/* Inhalt über das Overlay legen */
.overlay {
  position: relative;
  color: white;
  text-align: center;
  z-index: 1;
}


header{padding:20px;font-size:20px}
header h1{margin-bottom:1px;margin-top:1px}
header p{margin-top:0.5px;margin-bottom:0.5px}
nav{background:#f5f5f7;padding:10px}
nav a{margin:0 10px;text-decoration:none;color:#000}
.hero{padding:100px 20px}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px; padding:40px;}
img{width:100%;height:200px;object-fit:cover;border-radius:12px;cursor:pointer;transition:0.3s}
img:hover{transform:scale(1.08)}
#modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center}
#modal img{max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain;}
.card{padding:20px;margin:20px auto;max-width:500px;background:#f5f5f7;border-radius:12px}
.fade{animation:fadein 1s}
@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
form{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:auto}
input,textarea{padding:10px;border-radius:8px;border:1px solid #ccc}
button{padding:10px;background:black;color:white;border:none;border-radius:10px}
footer{padding:20px;color:gray}