/* ===== Base / Animierter Hintergrund ===== */
:root{ --nav-h: 64px; }

* { box-sizing: border-box; }

html { 
  scroll-behavior: smooth; 
}

body { margin:0; font-family:'Roboto',sans-serif; overflow-x:hidden; color:#333; }
a { text-decoration:none; color:inherit; }

@keyframes rainbowBackground {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:linear-gradient(270deg,#ff5f6d,#ffc371,#47fced,#ff5f6d,#ffc371);
  background-size:1000% 1000%; animation:rainbowBackground 30s ease infinite; filter:brightness(.85);
}

/* Überschriften nicht unter die sticky Nav schieben */
section[id], h2[id]{ scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Respekt für weniger Bewegung */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* ===== Hero ===== */
.hero { text-align:center; padding:25px 20px; color:#fff; position:relative; z-index:1; }
.hero h1{ font-family:'Pacifico',cursive; font-size:4em; margin:0; text-shadow:2px 2px 12px rgba(0,0,0,.3); line-height:1.2; margin-bottom: 30px; }
.hero p{ font-size:1.5em; margin-top:10px; text-shadow:1px 1px 6px rgba(0,0,0,.3) }
.btn{ display:inline-block; margin-top:30px; padding:15px 35px; background:#fff; color:#ff4d6d; font-weight:700;
  border-radius:50px; box-shadow:0 5px 15px rgba(0,0,0,.2); transition:.3s ease }
.btn:hover{ background:#ff4d6d; color:#fff; transform:scale(1.06) }
.logo{ filter:drop-shadow(2px 2px 6px rgba(0,0,0,.3)); width:200px; }

/* ===== Sections / Cards ===== */
section h2{ font-size:2em; margin:25px; text-shadow:2px 2px 12px rgba(0,0,0,.3);color:#fff }
section{ text-align:center; position:relative; z-index:1; margin:25px; margin-top:40px; }

/* ===== Feature Cards ===== */
.features{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.feature h3{ margin-bottom:12px; color:#ff4d6d }

.feature{
  background: rgba(255,255,255,.65);
  backdrop-filter: saturate(160%) blur(10px);
  border-radius:25px;
  padding:25px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  overflow:hidden;
  max-width: 400px;
}

.feature img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
}

/* ===== Footer ===== */
.site-footer {
  margin-top: 60px;
  padding: 10px;
  background: rgba(255,255,255,.65);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 -6px 18px rgba(0,0,0,.12);
  display: flex;
  justify-content: center;
}

.site-footer .links {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .links a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  color: #333;
  background: transparent;
  transition: .2s ease;
  text-decoration: none;
}

.site-footer .links a:hover {
  background: rgba(255,255,255,.8);
}