@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");

:root {
  --pflaume: #4B2380;
  --pflaume-hell: #7B55B8;
  --himmel: #E6EFFF;
  --wolke: #FFFFFF;
  --sonne: #FFC83D;
  --minze: #5CCBA6;
  --koralle: #FF6F61;
  --beere: #C2337A;
  --holz: #F7D9B0;
  --schatten: 0 6px 0 rgba(75, 35, 128, .18);
  --rund-gross: 28px;
  --rund: 18px;
  font-family: "Fredoka", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  color: var(--pflaume);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--himmel);
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 38px, transparent 39px),
    radial-gradient(circle at 16% 20%, #fff 0 28px, transparent 29px),
    radial-gradient(circle at 86% 12%, #fff 0 32px, transparent 33px),
    radial-gradient(circle at 90% 15%, #fff 0 24px, transparent 25px);
  background-attachment: fixed;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button {
  font: inherit; color: inherit; cursor: pointer;
  border: 0; background: none;
  touch-action: manipulation;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 4px solid var(--sonne); outline-offset: 3px;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 56px; padding: 0 22px;
  font-size: 1.25rem; font-weight: 600;
  background: var(--wolke); color: var(--pflaume);
  border-radius: 999px;
  box-shadow: var(--schatten);
  transition: transform .08s;
}
.knopf:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(75, 35, 128, .18); }
.knopf.haupt { background: var(--pflaume); color: #fff; }

#meldung {
  position: fixed; left: 50%; bottom: 28px; z-index: 50;
  transform: translate(-50%, 140%);
  background: var(--pflaume); color: #fff;
  padding: 14px 26px; border-radius: 999px;
  font-size: 1.2rem; font-weight: 500;
  max-width: calc(100vw - 32px); text-align: center;
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
#meldung.zeigen { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}