#landing {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: rgba(76, 175, 80, 0.3);
  font-family: 'Poppins', sans-serif;
  text-align: center;
  position: relative;
}

#landing.active { display: flex; }

.content-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 3rem 2.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  position: relative;
  z-index: 5;
}

.landing-logo { width: 550px; height: auto; margin: 20px 0; transition: transform 0.4s ease; }
.landing-logo:hover { transform: scale(1.1); }

#landing p { font-size: 1.6rem; margin-bottom: 2rem; font-weight: 700; }

#landing .btn {
  background-color: #FFE59B;
  color: #8B5E00;
  padding: 1rem 2rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
}
#landing .btn:hover { background-color: #FFD966; color: #5C3B00; }

/* Tropfen Animation außerhalb des Rahmens, über ganze Breite verteilt */
.rain-drop {
  position: absolute;
  width: 30px;
  height: auto;
  left: var(--left);
  top: -50px;
  animation: drop 4s linear infinite;
  animation-delay: var(--delay);
  z-index: 1;
}

@keyframes drop {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0.9; }
}

/* ----------------- Responsive ----------------- */
@media (max-width: 1024px) {
  .landing-logo { width: 400px; }
  #landing p { font-size: 1.4rem; }
  .content-container { padding: 2.5rem 2rem; }
}

@media (max-width: 768px) {
  .landing-logo { width: 300px; }
  #landing p { font-size: 1.2rem; }
  .content-container { margin: 2rem 1rem; padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .landing-logo { width: 220px; }
  #landing p { font-size: 1rem; }
  .content-container { padding: 1.5rem 1rem; margin: 1.5rem 0.5rem; }
  .rain-drop { width: 20px; }
}