@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* --- Farbkombinationen -------------------- */
.theme-1  { background-color: #F4E6B8; color: #184F3A; }
.theme-2  { background-color: #184F3A; color: #F4E6B8; }
.theme-3  { background-color: #F5C3C3; color: #702418; }
.theme-4  { background-color: #702418; color: #F5C3C3; }
.theme-5  { background-color: #F4E6B8; color: #394174; }
.theme-6  { background-color: #394174; color: #F4E6B8; }
.theme-7  { background-color: #F5C3C3; color: #184F3A; }
.theme-8  { background-color: #702418; color: #F4E6B8; }
.theme-9  { background-color: #F8774C; color: #184F3A; }
.theme-10 { background-color: #184F3A; color: #F8774C; }
.theme-11 { background-color: #F8774C; color: #394174; }
.theme-12 { background-color: #394174; color: #F5C3C3; }

/* --- Falling Icons ------------------------ */
@keyframes fall {
  0%   { transform: translateY(-60px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.falling-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.falling-icons.paused .falling-icon {
  animation-play-state: paused;
}

.falling-icon {
  position: absolute;
  top: 0;
  animation: fall linear forwards;
  color: currentColor;
  opacity: 0;
}

.falling-icon svg {
  width: 100%;
  height: 100%;
}

.falling-icon svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: 2px;
}

/* --- Layout ------------------------------- */
.coming-soon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 2rem;
}

.coming-soon__logo {
  display: block;
  text-decoration: none;
  color: inherit;
}

.coming-soon__logo-svg {
  display: block;
  height: 8rem;
  width: auto;
}

.coming-soon__text {
  font-size: 1.125rem;
}