body{margin:0;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;background:#fbfcfd;color:#263238;}
.header{background:#e8f4fb;padding:18px 36px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;height:92px;}
.header .logo img{height:120px;width:257px;margin-right:100px;}
.header .brand{line-height:1;}
.header .brand .title{font-weight:800;font-size:18px;color:#12355b;}
.header .brand .sub{font-size:12px;color:#607d8b;margin-top:2px;}
.nav{margin-left:auto;display:flex;gap:10px;align-items:center;}
.nav a{display:inline-block;padding:10px 14px;border-radius:12px;background:white;color:#1565c0;font-weight:700;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,0.04);}
.container{width:1000px;margin:140px auto 60px;background:white;padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06);}
.container2{max-width:1100px; margin:28px auto; padding:0 18px;}
.quote{color:#7a7a7a;font-size:20px;font-weight:600;text-align:center;margin:8px 0 6px 0;}
.welcome{color:#455a64;text-align:center;margin:0 0 18px 0;font-size:16px;}
.buttons{display:flex;gap:16px;justify-content:center;margin-top:12px;margin-bottom:18px;}
.btn{padding:12px 18px;border-radius:12px;background:#64b5f6;color:white;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(100,181,246,0.18);}
.btn.secondary{background:#81c784;}
.btn.tertiary{background:#ffcc80;color:#5d4037;}
.svg-illustration{margin-top:18px;border-top:1px solid #eef6fb;padding-top:18px;}
.footer{margin-top:22px;text-align:center;color:#607d8b;font-size:13px;padding:14px 0;border-top:1px dashed #eef6fb;}
.card{padding:18px;border-radius:10px;background:#ffffff;}
.card2{background:var(--card); padding:18px; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,0.04); margin-top:18px;}
.staff{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px;}
.person{display:flex; gap:12px; align-items:center; padding:12px; background:linear-gradient(180deg,#ffffff,#f8f9fb); border-radius:12px; border:1px solid rgba(0,0,0,0.03);}
.person img{width:64px; height:64px; border-radius:10px; object-fit:cover; background:#f0f4f8;}
.person .name{font-weight:800; color:var(--text);}
.person .role{font-size:13px; color:var(--muted);}
.embed-wrap{height:520px;}

.hero {
  background-image: url("../images/kinder_spielen0.png"); /* aktuelles Bild */
  background-size: cover;
  background-position: center;
  height: 50vh;
  display: flex;
  align-items: center;
}

.hero-overlay {
  background-color: rgba(0, 0, 0, 0.45); /* Abdunklung */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-content {
  color: #ffffff;
  max-width: 800px;
  padding: 2rem 3rem;
  padding-top: 0rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 300;
}

.hero-content p {
  font-size: 1.2rem;
  line-height: 1;
}

.impressum a:link {
  color: black;
  text-decoration: none;
}

.impressum a:visited {
  color: black;
  text-decoration: none;
}

.impressum a:hover {
  color: blue;
  text-decoration: underline;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding: 10px;
  }

  header, nav, footer {
    flex-direction: column;
    text-align: center;
  }

  nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  main, section, div {
    width: 100%;
    padding: 15px;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}