/* =====================
   Grundeinstellungen
===================== */


img {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  user-select: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

:root {
  --braun: #6e6257;
  --button-braun: #7b6557;
  --beige-border: #c7ad96;
  --hell-beige: rgba(255, 248, 238, 0.45);
  --sprechblase-bg: rgba(255, 248, 238, 0.94);

  --button-size: 100px;
  --button-abstand: 35px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}

body {
  width: 100vw;
  height: 100vh;
  padding: 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-family: "Nunito", sans-serif;

  background-image: url("Bilder/background3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

img {
  display: block;
}

button {
  font-family: inherit;
}

.d-none {
  display: none !important;
}

/* =====================
   Textkarte
===================== */

.karte {
  position: relative;
  left: 50px;
  z-index: 30;

  width: 65%;
  max-width: 1100px;
  min-width: 650px;
  padding: 20px;
}

.karte h1 {
  display: flex;
  justify-content: center;
  margin-bottom: 55px;
}

.karte h1 img {
  width: 80%;
  max-width: 520px;

  animation: schweben 3s ease-in-out infinite;
}

.karte p {
  margin: 0;

  text-align: center;
  font-size: 25px;
  line-height: 1.4;
  font-weight: bold;
  color: var(--braun);
}

.kopfbereich {
  flex-shrink: 0;
}

.sprechblasenbereich {
  position: relative;
  height: 330px;
}

/* =====================
   Fragen-Kreise
===================== */

.fragen-kreise {
  position: relative;

  display: flex;
  justify-content: center;
  gap: 28px;

  margin: 50px 0 30px;
}

.hinweis {
  position: absolute;
  top: -100px;
  left: -50px;
  z-index: -1;

  width: 250px;
  pointer-events: none;

  animation: schweben 3s ease-in-out infinite;
}

.frage-kreis {
  position: relative;

  width: 160px;
  height: 160px;

  border: 3px solid #a8927d;
  border-radius: 50%;
  box-shadow: 0 8px 15px rgba(90, 60, 40, 0.18);

  cursor: pointer;
  transition: transform 0.3s ease;
}

.frage-kreis::before {
  content: "";
  position: absolute;
  inset: 8px;

  border-radius: 50%;
  border: 2px dashed rgba(180, 150, 120, 0.35);

  pointer-events: none;
}

.frage-kreis:nth-child(2) {
  background: #f1dec9;
}

.frage-kreis:nth-child(3) {
  background: #edcdbb;
}

.frage-kreis:nth-child(4) {
  background: #e3b7a0;
}

.frage-kreis:nth-child(5) {
  background: #dabbaa;
}

.frage-kreis:hover,
.frage-kreis.aktiv {
  transform: scale(1.06);
}

.frage-kreis img {
  width: 80px;
  margin: 0 auto 8px;
}

.frage-kreis p {
  font-size: 18px;
}

/* =====================
   Auswahl / Sprechblase
===================== */

.auswahl-box {
  width: 90%;
  margin: 0 auto;

  animation: boxPlop 0.35s ease;
}

.sprechblase {
  position: relative;

  padding: 24px 28px 30px;

  background: var(--sprechblase-bg);
  border: 2px solid var(--beige-border);
  border-radius: 32px;
  box-shadow: 0 10px 24px rgba(92, 65, 45, 0.16);
}

.sprechblase::before {
  content: "";
  position: absolute;
  top: -14px;

  width: 26px;
  height: 26px;

  background: var(--sprechblase-bg);
  border-left: 2px solid var(--beige-border);
  border-top: 2px solid var(--beige-border);

  transform: rotate(45deg);
}

/* Pfeil-Position je nach Frage */
.auswahl-box.frage-1 .sprechblase::before {
  left: 65px;
}

.auswahl-box.frage-2 .sprechblase::before {
  left: 255px;
}

.auswahl-box.frage-3 .sprechblase::before {
  left: 442px;
}

.auswahl-box.frage-4 .sprechblase::before {
  left: 629px;
}

.frage-hinweis {
  margin-bottom: 22px;

  text-align: center;
  color: #6f5b52;
}

.frage-hinweis h3 {
  margin: 0;
  font-size: 24px;
}

.frage-hinweis p {
  margin: 8px 0 0;
  font-size: 18px;
}

/* =====================
   Antwort-Wolken
===================== */

.antwort-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
}

.antwort-blase {
  position: relative;

  width: 180px;
  height: 180px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: none;
  background: none;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.antwort-blase:hover {
  transform: scale(1.08);
}

.antwort-blase.aktiv {
  transform: scale(1.05);
  filter: brightness(1.08);
}

.antwort-blase.aktiv .wolke-bg {
  filter: drop-shadow(0 0 12px rgba(255, 215, 120, 0.8));
}

.wolke-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.antwort-icon {
  position: relative;
  z-index: 2;

  width: 80px;
  margin-bottom: 10px;
}

.antwort-blase span {
  position: relative;
  z-index: 2;

  color: #6f5b52;
  font-size: 22px;
  font-weight: 500;
}

/* =====================
   Blume
===================== */

.flower {
  position: relative;
  right: 70px;
  z-index: 10;

  flex: 1;
  min-width: 280px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.flowerInner {
  position: relative;

  width: min(42vw, 520px);
  aspect-ratio: 1 / 1;

  display: flex;
  justify-content: center;
  align-items: center;
}

.flowerParts {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.flowerInner img,
.flowerParts img {
  position: absolute;
  pointer-events: none;

  max-width: 200%;
  max-height: 200%;

  width: auto;
  height: auto;
}

/* =====================
   Buttons allgemein
===================== */

.fertig-button,
.reset-btn,
.rolle-button {
  position: absolute;

  border: none;
  border-radius: 50%;

  background: var(--hell-beige);
  backdrop-filter: blur(8px);

  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.4),
    0 8px 20px rgba(80, 60, 40, 0.12);

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  transition: 0.25s ease;

  color: var(--button-braun);
}

.fertig-button::before,
.reset-btn::before,
.rolle-button::before {
  content: "";
  position: absolute;
  inset: 10px;

  border-radius: 50%;
  border: 2px dashed rgba(180, 150, 120, 0.35);

  pointer-events: none;
}

.fertig-button:hover,
.reset-btn:hover,
.rolle-button:hover {
  transform: scale(1.06);
  background: rgba(255, 248, 238, 0.65);
}

.fertig-button:active,
.reset-btn:active {
  transform: scale(0.96);
}

/* =====================
   Reset- und Fertig-Button
===================== */

.reset-btn,
.fertig-button {
  bottom: var(--button-abstand);

  width: var(--button-size);
  height: var(--button-size);
}

.reset-btn {
  left: var(--button-abstand);
}

.fertig-button {
  right: var(--button-abstand);
}

.reset-icon,
.rolle-icon,
.fertig-icon {
  font-size: 60px;
  line-height: 1;
}

/* =====================
   Farbkleckse
===================== */

.klecks {
  position: fixed;
  z-index: 0;

  display: none;
  pointer-events: none;

  mix-blend-mode: hard-light;
}

.klecks.sichtbar {
  display: block;
}

.links-gelb {
  left: -250px;
  top: 400px;
  width: 500px;
  transform: rotate(-20deg);
}

.links-blau {
  left: -250px;
  top: 300px;
  width: 500px;
  opacity: 0.6;
}

.links-rot {
  left: -250px;
  bottom: 160px;
  width: 500px;
  opacity: 0.7;
  transform: rotate(45deg);
}

.rechts-gelb {
  right: -250px;
  top: 350px;
  width: 500px;
  transform: rotate(25deg);
}

.rechts-rot {
  right: -350px;
  top: 90px;
  width: 700px;
  opacity: 0.7;
  transform: rotate(10deg);
}

.rechts-blau {
  right: -400px;
  bottom: 70px;
  width: 700px;
  opacity: 0.6;
  transform: rotate(10deg);
}

.oben-gelb {
  left: 200px;
  top: -450px;
  width: 800px;
  transform: rotate(25deg);
}

.oben-blau {
  left: 300px;
  top: -450px;
  width: 700px;
  opacity: 0.6;
  transform: rotate(-90deg);
}

.oben-rot {
  left: 400px;
  top: -450px;
  width: 800px;
  opacity: 0.7;
}

.unten-gelb {
  left: 200px;
  top: 700px;
  width: 800px;
  transform: rotate(-25deg);
}

.unten-blau {
  left: 300px;
  top: 700px;
  width: 700px;
  opacity: 0.6;
  transform: rotate(45deg);
}

.unten-rot {
  left: 400px;
  top: 700px;
  width: 800px;
  opacity: 0.7;
  transform: rotate(10deg);
}

/* =====================
   Ergebnis-Overlay
===================== */

.ergebnis-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;

  background: rgba(190, 187, 187, 0.88);
  backdrop-filter: blur(8px);

  animation: overlayEinblenden 0.5s ease forwards;
}

.ergebnis-titel {
  position: absolute;
  top: 120px;
  left: 50%;

  margin: 0;

  transform: translateX(-50%);

  font-family: "Fredoka", sans-serif;
  font-size: 46px;
  color: var(--braun);
  text-align: center;
  animation: titelSchwebt 2.5s ease-in-out infinite;
}

.ergebnis-blume {
  position: relative;

  width: 520px;
  height: 520px;

  display: flex;
  justify-content: center;
  align-items: center;

  animation: blumeFliegtEin 1s ease forwards;
}

.ergebnis-blume::before {
  content: "";
  position: absolute;
  inset: 40px -70px 20px -70px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(255, 247, 210, 0.95) 0%,
      rgba(255, 232, 170, 0.85) 20%,
      rgba(255, 210, 140, 0.45) 45%,
      rgba(255, 190, 120, 0.12) 70%,
      transparent 100%);

  animation: starkesLeuchten 2.5s ease-in-out infinite;
}

#ergebnisBlume {
  position: relative;
  width: 100%;
  height: 100%;
}

#ergebnisBlume img {
  position: absolute;
  left: 50%;
  top: 50%;

  width: auto;
  height: auto;

  transform: translate(-50%, -50%);
}

.gewinn-base,
.gewinn-bluete,
.gewinn-blaetter {
  width: auto;
  height: auto;

  max-width: 155%;
  max-height: 155%;
}

/* =====================
   Weiter-Button im Ergebnis
===================== */

.rolle-button {
  right: 50px;
  bottom: 50px;

  width: 150px;
  height: 150px;

  font-size: 25px;
  font-weight: bold;
}

.gewinn-code {
  position: absolute;
  left: 50%;
  top: 125%;
  /* Abstand unter der Blume */
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: bold;
  color: #5f4634;
  white-space: nowrap;
}

/* =====================
   Glitzer
===================== */

.glitzer-container {
  position: absolute;
  inset: 0;
  z-index: 10;

  pointer-events: none;
}

.glitzer-stern {
  position: absolute;

  width: 9px;
  height: 9px;

  background: #fff3c4;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffcc00;

  opacity: 0;
  animation: glitzerFlug 2s ease-out infinite;
}

/* =====================
   Animationen
===================== */

.magische-blume {
  animation: sanftGemalt 1.4s ease-out forwards;
}

.blume-wackelt {
  animation: blumeWackelt 0.45s ease;
}

@keyframes sanftGemalt {
  0% {
    opacity: 0;
    filter: brightness(1.4) blur(3px);
  }

  45% {
    opacity: 0.45;
    filter: brightness(1.6) blur(1px);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes blumeWackelt {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-8px);
  }

  50% {
    transform: translateX(8px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes glitzerFlug {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.8) translateY(-80px);
  }
}

@keyframes overlayEinblenden {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes blumeFliegtEin {
  from {
    opacity: 0;
    transform: translateY(120px) scale(0.5);
  }

  to {
    opacity: 1;
    transform: translateY(40px) scale(1);
  }
}

@keyframes starkesLeuchten {

  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.98);
    filter: blur(20px);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.06);
    filter: blur(28px);
  }
}

@keyframes titelSchwebt {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}

@keyframes boxPlop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes schweben {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* =====================
   Tablet / iPad
===================== */

@media (max-width: 1366px) {
  body {
    padding: 30px;
    gap: 30px;
  }

  .karte {
    min-width: 0;
  }

  .karte p {
    font-size: 18px;
  }

  .flowerInner {
    width: min(38vw, 420px);
  }
}

/* Browser-Fokus entfernen */
.frage-kreis:focus,
.frage-kreis:focus-visible,
.antwort-blase:focus,
.antwort-blase:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Falls es Buttons sind */
button:focus,
button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}