/* Date-Frage 2 – „Pastell-Polaroid“ */
:root {
  --bg: #ffe3f1; --pink: #ff5fa2; --rose: #ff8cc6; --peach: #ffc3a6; --lilac: #c9a7ff;
  --ink: #5a2147; --paper: #fffdfb;
}
body {
  min-height: 100svh; overflow-x: hidden; color: var(--ink);
  font-family: 'Fredoka', system-ui, sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 95, 162, .14) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
}
/* weiche Farbflecken, die langsam wandern */
.blobs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; filter: blur(60px); opacity: .75; }
.blobs i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; animation: wander 18s ease-in-out infinite alternate; }
.blobs i:nth-child(1) { background: var(--rose); top: -18vmax; left: -12vmax; }
.blobs i:nth-child(2) { background: var(--peach); bottom: -20vmax; right: -14vmax; animation-duration: 22s; }
.blobs i:nth-child(3) { background: var(--lilac); top: 30%; left: 55%; width: 30vmax; height: 30vmax; animation-duration: 26s; }
@keyframes wander { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

.page {
  position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 48px 18px 70px;
  text-align: center; transition: opacity .6s ease, transform .6s ease;
}
.page.leaving { opacity: 0; transform: scale(.96) translateY(-10px); }
.tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px;
  background: #fff; color: var(--pink); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(255, 95, 162, .2); animation: bob 3s ease-in-out infinite;
}
.tag svg { width: 15px; height: 15px; }
@keyframes bob { 50% { transform: translateY(-5px); } }
h1 {
  margin: 20px auto 22px; max-width: 18ch; font-size: clamp(32px, 7.5vw, 56px); line-height: 1.08; font-weight: 700;
  animation: drop .8s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes drop { from { opacity: 0; transform: translateY(-24px) scale(.95); } }
.hl {
  background: linear-gradient(transparent 58%, rgba(255, 140, 198, .55) 58%);
  padding: 0 .12em; border-radius: 4px; white-space: nowrap;
}
.chips { list-style: none; padding: 0; margin: 0 auto 34px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .78); border: 2px solid #fff; font-weight: 500; font-size: 16px;
  box-shadow: 0 8px 24px rgba(90, 33, 71, .08);
  animation: drop .7s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both;
}
.chips svg { width: 20px; height: 20px; color: var(--pink); flex: none; }

.polaroids { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0 auto 38px; }
.pol {
  margin: 0; width: clamp(130px, 38vw, 170px); padding: 10px 10px 4px; background: var(--paper);
  border-radius: 6px; box-shadow: 0 12px 30px rgba(90, 33, 71, .16);
  transform: rotate(var(--r)); animation: land .8s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both, sway 6s ease-in-out calc(var(--d, 0s) + 1s) infinite;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pol:hover { animation: none; transform: rotate(0) scale(1.08); box-shadow: 0 20px 44px rgba(90, 33, 71, .24); z-index: 3; }
@keyframes land { from { opacity: 0; transform: translateY(40px) rotate(calc(var(--r) * -2)) scale(.8); } }
@keyframes sway { 50% { transform: rotate(calc(var(--r) * .4)) translateY(-4px); } }
.pol img, .pol video { width: 100%; aspect-ratio: 1; object-fit: cover; background: #ffeef7; border-radius: 2px; }
.pol figcaption { font-family: 'Caveat', cursive; font-size: 24px; font-weight: 600; color: var(--ink); padding: 4px 0 2px; }

.btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; min-height: 64px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0;
  padding: 15px 36px; border-radius: 999px; font-size: 20px; font-weight: 600;
}
.btn svg { width: 22px; height: 22px; }
.yes { color: #fff; background: linear-gradient(120deg, var(--pink), #ff7ab8); box-shadow: 0 12px 30px rgba(255, 95, 162, .45); }
.yes:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(255, 95, 162, .55); }
.yes svg { animation: beat 1.2s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.95); } }
.no { background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(90, 33, 71, .1); }

/* Ja-Seite */
.wave { display: inline-block; white-space: nowrap; font-size: clamp(28px, 8.4vw, 74px); font-weight: 700; color: var(--pink); margin: 18px 0 8px; letter-spacing: .01em; }
.wave span { display: inline-block; animation: hop 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); text-shadow: 0 6px 0 rgba(255, 95, 162, .18); }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px) rotate(-4deg); } }
.msg { max-width: 34ch; margin: 0 auto 30px; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.45; font-weight: 500; }
.pol.big { width: clamp(200px, 62vw, 260px); }
.wa { text-decoration: none; color: #fff; background: linear-gradient(120deg, #25d366, #12a38e); box-shadow: 0 12px 30px rgba(37, 211, 102, .4); }
.wa:hover { transform: translateY(-3px); }