html, body {
  margin: 0;
  color: #8a1450;
  font-family: 'Nunito', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #ffd6ea;
  background-image:
    radial-gradient(circle, #fff 1.2px, transparent 1.6px),
    radial-gradient(circle, #ff9fd0 1px, transparent 1.4px),
    radial-gradient(circle, #fff6 2px, transparent 2.5px);
  background-size: 38px 38px, 57px 57px, 91px 91px;
  background-position: 0 0, 19px 23px, 40px 11px;
}
* { box-sizing: border-box; }
a { color: #e0368a; }
a:hover { color: #8a1450; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes pop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* PIN-Schloss */
html:not(.unlocked) .page { display: none; }
html.unlocked .pin-gate { display: none; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.pin-gate {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.pin-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(44px, 10vw, 72px);
  line-height: 1.2;
  color: #e0368a;
  text-shadow: 3px 3px 0 #fff;
}
.pin-input {
  width: min(280px, 100%);
  padding: 14px 20px;
  border: 3px solid #ff9fd0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 0 #ff9fd0;
  font: 800 32px 'Nunito', sans-serif;
  letter-spacing: .4em;
  text-indent: .4em;
  text-align: center;
  color: #8a1450;
  outline: none;
}
.pin-input::placeholder {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ff9fd0;
}
.pin-input:placeholder-shown { text-indent: 0; }
.pin-input:focus { border-color: #e0368a; }
.pin-input.wrong { animation: shake .4s ease-in-out; border-color: #e0368a; }
.pin-error { min-height: 1.4em; font-weight: 700; color: #e0368a; }
.pin-button {
  padding: 14px 36px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6fb5, #e0368a);
  box-shadow: 0 5px 0 #c2287a;
  font: 700 20px 'Nunito', sans-serif;
  color: #fff;
  cursor: pointer;
}
.pin-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c2287a; }

/* Ufmach-Animation */
@keyframes gate-out {
  to { opacity: 0; transform: scale(1.15); filter: blur(4px); }
}
@keyframes drop-in {
  0% { opacity: 0; transform: translateY(-90px) scale(.6); }
  60% { opacity: 1; transform: translateY(12px) scale(1.06); }
  80% { transform: translateY(-5px) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes spin-in {
  0% { opacity: 0; transform: scale(0) rotate(-200deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(10deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes bounce-in {
  0% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.1); }
  80% { transform: scale(.95); }
  100% { opacity: 1; transform: none; }
}
@keyframes burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); }
}
@keyframes fall {
  0% { opacity: 0; transform: translate(0, -10vh) rotate(0); }
  10% { opacity: 1; }
  50% { transform: translate(var(--sway), 50vh) rotate(calc(var(--r) / 2)); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 110vh) rotate(var(--r)); }
}
.pin-gate.leaving { animation: gate-out .45s ease-in forwards; }
.fx { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.fx span { position: absolute; text-shadow: 0 0 8px #fff; }
.fx-burst { animation: burst 1.3s cubic-bezier(.15, .8, .3, 1) both; }
.fx-rain { top: 0; opacity: 0; animation-name: fall; animation-timing-function: linear; animation-fill-mode: both; }
html.intro .start h1 { animation: drop-in .9s ease-out both; }
html.intro .hero-frame { animation: spin-in 1s cubic-bezier(.3, 1.2, .5, 1) .25s both; }
html.intro .greeting { animation: fade-up .7s ease-out .7s both; }
html.intro .counter { animation: bounce-in .7s ease-out .85s both; }
html.intro .reasons h2 { animation: fade-up .7s ease-out 1.1s both; }
.reason.tile-hidden { opacity: 0; }
.reason.tile-in { animation: bounce-in .55s ease-out both; }

.page { position: relative; overflow: hidden; min-height: 100vh; }

.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles span {
  position: absolute;
  text-shadow: 0 0 8px #fff;
  pointer-events: none;
  opacity: 0;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

main {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* 01 Start */
.start { padding-top: 72px; }
h1 {
  margin: 0;
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(52px, 10vw, 96px);
  line-height: 1.15;
  color: #e0368a;
  text-shadow: 3px 3px 0 #fff;
}
.hero-frame {
  width: min(420px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 0 6px #ff9fd0, 0 0 40px #ff6fb5;
}
.hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 75%;
}
.greeting {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  max-width: 28em;
  text-wrap: pretty;
}
.counter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 0 #ff9fd0;
}
.counter-days {
  font-family: 'Pacifico', cursive;
  font-size: clamp(44px, 8vw, 64px);
  line-height: 1.3;
  color: #e0368a;
}
.counter-label { font-size: 17px; font-weight: 700; }

/* 02 Gründ */
h2 {
  margin: 0;
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(36px, 7vw, 56px);
  line-height: 1.3;
  color: #e0368a;
  text-shadow: 2px 2px 0 #fff;
}
.reason-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.reason {
  min-height: 150px;
  padding: 12px;
  overflow-wrap: anywhere;
  border-radius: 20px;
  font: inherit;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
  border: 0;
  background: linear-gradient(135deg, #ff6fb5, #e0368a);
  color: #fff;
  box-shadow: 0 5px 0 #c2287a;
}
.reason.open {
  font-size: 17px;
  font-weight: 700;
  cursor: default;
  border: 3px solid #ff9fd0;
  background: #fff;
  color: #8a1450;
  animation: pop .35s ease-out;
}

/* Handy: 3 Spalte statt 5, chlini Schrift */
@media (max-width: 640px) {
  main { gap: 64px; padding: 0 16px; }
  .start { padding-top: 48px; }
  .greeting { font-size: 18px; }
  .counter { padding: 16px 32px; }
  .reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .reason { min-height: 120px; padding: 8px; border-radius: 16px; font-size: 40px; }
  .reason.open { font-size: 14px; line-height: 1.3; overflow-wrap: break-word; }
}
@media (max-width: 360px) {
  .reason { padding: 6px 4px; }
  .reason.open { font-size: 13px; }
}

footer {
  padding: 0 0 64px;
  font-family: 'Pacifico', cursive;
  font-size: 28px;
  text-align: center;
  color: #e0368a;
}