/* Container bleibt wie bei dir */
.fortune-cookie-widget {
  text-align: center;
}

/* Cookie */
.fortune-cookie-widget .cookie {
  width: 140px;
  height: 100px;
  margin: 20px auto;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease;
}

/* Grundform */
.fortune-cookie-widget .half {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e7b676, #c88e45);
  border-radius: 60% 60% 50% 50%;
  box-shadow:
    inset -6px -8px 10px rgba(0,0,0,0.15),
    inset 6px 8px 10px rgba(255,255,255,0.25);
  transition: transform 0.6s ease;
}

/* linke Seite (gefaltet) */
.fortune-cookie-widget .left {
  clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
}

/* rechte Seite */
.fortune-cookie-widget .right {
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
}

/* typische Glückskeks-Falte */
.fortune-cookie-widget .cookie::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: 65%;
  height: 10px;
  background: rgba(120, 70, 30, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(2px);
}

/* Papierstreifen */
.fortune-cookie-widget .paper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(0);
  background: #fff;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 0.9em;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.6s ease;
}

/* Öffnungsanimation */
.fortune-cookie-widget .open .left {
  transform: rotate(-50deg) translateX(-8px);
}

.fortune-cookie-widget .open .right {
  transform: rotate(50deg) translateX(8px);
}

.fortune-cookie-widget .open .paper {
  transform: translate(-50%, -50%) translateY(55px);
  opacity: 1;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
  .fortune-cookie-widget .cookie {
    width: 120px;
    height: 90px;
  }

  .fortune-cookie-widget .half {
    width: 60px;
    height: 90px;
  }

  .fortune-cookie-widget .paper {
    font-size: 0.8em;
    padding: 6px 10px;
  }

  .fortune-cookie-widget .message {
    font-size: 1em;
    margin-top: 50px;
       visibility: hidden;
  }
}

.fortune-cookie-widget .message {
  margin-top: 60px;
  font-size: 1.2em;
  color: #5a3e2b;
     visibility: hidden;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
  .fortune-cookie-widget .cookie {
    width: 120px;
    height: 90px;
  }

  .fortune-cookie-widget .half {
    width: 60px;
    height: 90px;
  }

  .fortune-cookie-widget .paper {
    font-size: 0.8em;
    padding: 6px 10px;
  }

  .fortune-cookie-widget .message {
    font-size: 1em;
    margin-top: 50px;
       visibility: hidden;
  }
}