/* ============================================================
   PLAYGROUND — Playful Layer v1
   Kleine, sparsame Verspieltheiten: Handschrift-Randnotizen,
   Tape-Effekt, Highlight-Kringel, Hover-Emoji, Micro-Freude.
   ============================================================ */

/* ---------- 1. HANDSCHRIFT-RANDNOTIZEN ---------- */
.pg-note {
  display: inline-block;
  font-family: 'Caveat', 'Bricolage Grotesque', cursive;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--lime, #D6FE09);
  line-height: 1.2;
  transform: rotate(-2.4deg);
  transform-origin: left center;
  position: relative;
  padding: 4px 2px;
}
.pg-note.right { transform: rotate(2.4deg); transform-origin: right center; }
.pg-note.hot { color: var(--hot, #FE90E0); }
.pg-note.flame { color: var(--flame, #FC5A27); }
.pg-note::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 0 6px;
  transform: translateY(-50%) rotate(-40deg);
  opacity: .55;
}
.pg-note.right::before {
  left: auto;
  right: -14px;
  transform: translateY(-50%) rotate(140deg);
}

/* Als eigenständige Floating-Notiz (absolute) */
.pg-note-float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}


/* ---------- 2. TAPE-EFFEKT (Washi-Tape) ---------- */
.pg-tape {
  position: relative;
}
.pg-tape::before,
.pg-tape::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 22px;
  background: rgba(214, 254, 9, .82);
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(0,0,0,.08) 48%, transparent 52%),
    linear-gradient(45deg, transparent 46%, rgba(0,0,0,.08) 48%, transparent 52%);
  background-size: 12px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  z-index: 5;
  pointer-events: none;
}
.pg-tape::before {
  top: -10px;
  left: -18px;
  transform: rotate(-8deg);
}
.pg-tape::after {
  bottom: -10px;
  right: -18px;
  transform: rotate(-4deg);
  background: rgba(254, 144, 224, .82);
}
.pg-tape.single::after { display: none; }
.pg-tape.hot::before { background-color: rgba(254, 144, 224, .82); }
.pg-tape.flame::before { background-color: rgba(252, 90, 39, .82); }


/* ---------- 3. HIGHLIGHT-KRINGEL (SVG-Underline-Loop) ---------- */
.pg-circle {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.pg-circle::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: -8%;
  bottom: -8%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M20 40 C20 15, 60 8, 100 8 C170 8, 195 30, 190 45 C185 65, 130 76, 90 74 C40 72, 8 60, 12 42 C14 30, 30 22, 60 22' fill='none' stroke='%23D6FE09' stroke-width='2.6' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 700ms cubic-bezier(.19,1,.22,1) 200ms,
              transform 700ms cubic-bezier(.19,1,.22,1) 200ms;
}
.pg-circle.in::after,
.pg-circle:hover::after {
  opacity: 1;
  transform: scale(1);
}
.pg-circle.hot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M20 40 C20 15, 60 8, 100 8 C170 8, 195 30, 190 45 C185 65, 130 76, 90 74 C40 72, 8 60, 12 42 C14 30, 30 22, 60 22' fill='none' stroke='%23FE90E0' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.pg-circle.flame::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M20 40 C20 15, 60 8, 100 8 C170 8, 195 30, 190 45 C185 65, 130 76, 90 74 C40 72, 8 60, 12 42 C14 30, 30 22, 60 22' fill='none' stroke='%23FC5A27' stroke-width='2.6' stroke-linecap='round'/></svg>");
}


/* ---------- 4. UNTERSTREICHUNG (handgezeichnet) ---------- */
.pg-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.pg-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.12em;
  height: .28em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 30 2, 70 8, 100 5 C 140 2, 170 8, 198 5' fill='none' stroke='%23D6FE09' stroke-width='2.6' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pg-underline.hot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 30 2, 70 8, 100 5 C 140 2, 170 8, 198 5' fill='none' stroke='%23FE90E0' stroke-width='2.6' stroke-linecap='round'/></svg>");
}


/* ---------- 5. HOVER-EMOJI auf Testimonial-Karten ---------- */
.pg-testi {
  position: relative;
}
.pg-testi::after {
  content: attr(data-emoji);
  position: absolute;
  right: 18px;
  top: 14px;
  font-size: 26px;
  opacity: 0;
  transform: translateY(6px) scale(.7) rotate(-8deg);
  transition: opacity 320ms cubic-bezier(.34, 1.56, .64, 1),
              transform 380ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.pg-testi:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}


/* ---------- 6. STICKER-BADGE (Section-Anker sanft) ---------- */
.pg-stamp {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  color: var(--lime, #D6FE09);
  background: rgba(214, 254, 9, .05);
}


/* ---------- 7. MICRO-INTERACTION: WACKELN auf Hover ---------- */
@keyframes pgWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
.pg-wiggle:hover {
  animation: pgWiggle 500ms ease-in-out;
}


/* ---------- 8. RESPONSIVE: playful Elemente auf Mobile subtiler ---------- */
@media (max-width: 640px) {
  .pg-note { font-size: 16px; }
  .pg-tape::before, .pg-tape::after {
    width: 64px;
    height: 16px;
  }
  .pg-note-float { display: none; } /* auf Mobile floating-notes weglassen */
}


/* ---------- 9. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-circle::after,
  .pg-testi::after,
  .pg-wiggle:hover {
    transition: opacity 200ms ease !important;
    animation: none !important;
    transform: none !important;
  }
}