@font-face {
  font-family: 'Flowerworld Serif';
  src: url('assets/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Flowerworld Sans';
  src: url('assets/dm-sans.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}
body {
  --fw-night: #141220;
  --fw-cream: #fbebe3;
  --fw-muted: #dbbfcc;
  --fw-gold: #f2d199;
  --fw-pink: #f3b1c8;
  --fw-line: #b489a354;
  --fw-serif: 'Flowerworld Serif', Georgia, serif;
  margin: 0;
  background: var(--fw-night);
  color: var(--fw-cream);
  font-family: 'Flowerworld Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
.fw-hero {
  position: relative;
  display: grid;
  min-height: 338px;
  place-items: center;
  isolation: isolate;
  padding: 48px 18px 52px;
  overflow: hidden;
  background: linear-gradient(180deg, #17132924 10%, #19132538 70%, var(--fw-night)),
    url('assets/rosengarten.jpg') center 78% / cover;
  text-align: center;
}
.fw-sky { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.fw-moon {
  position: absolute;
  width: clamp(52px, 9vw, 83px);
  aspect-ratio: 1;
  top: 25px;
  right: clamp(14px, 11%, 116px);
  border-radius: 50%;
  background: linear-gradient(140deg, #fff2d1, #f2ca8c);
  mask-image: radial-gradient(circle at 68% 31%, transparent 54%, #000 55%);
}
.fw-star {
  position: absolute;
  left: var(--left);
  top: var(--top);
  color: var(--fw-gold);
  font: 400 1.04rem/1 Georgia, serif;
  text-shadow: 0 0 9px #f5d49d95;
  opacity: .82;
  animation: fw-twinkle 2.4s var(--delay) ease-in-out 2;
}
.fw-star:nth-of-type(2) { --left: 12%; --top: 18%; --delay: -.5s; }
.fw-star:nth-of-type(3) { --left: 23%; --top: 27%; --delay: -1.6s; }
.fw-star:nth-of-type(4) { --left: 36%; --top: 11%; --delay: -.2s; }
.fw-star:nth-of-type(5) { --left: 62%; --top: 17%; --delay: -1s; }
.fw-star:nth-of-type(6) { --left: 90%; --top: 19%; --delay: -1.2s; }
.fw-star:nth-of-type(7) { --left: 84%; --top: 40%; --delay: -.1s; }
.fw-star:nth-of-type(8) { --left: 17%; --top: 59%; --delay: -1.4s; }
.fw-star:nth-of-type(9) { --left: 88%; --top: 63%; --delay: -.7s; }
.fw-heart { color: var(--fw-pink); font-size: .7rem; }
@keyframes fw-twinkle {
  0%, 100% { opacity: .82; }
  50% { opacity: .29; }
}
.fw-heading { max-width: 100%; }
h1, h2, h3 {
  margin: 0;
  color: inherit;
  font-family: var(--fw-serif);
}
h1 {
  font-size: clamp(3.15rem, 9.3vw, 6.8rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.065em;
  text-shadow: 0 6px 32px #0c091cbd;
}
.fw-heading p { margin: 12px 0 22px; color: var(--fw-gold); font-size: 1rem; }
.fw-jump {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid #f0b4c9;
  border-radius: 9px;
  background: #eeb3c6;
  color: #29192b;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}
.fw-jump:hover { background: #f8c5d6; }
.fw-jump:focus-visible, .fw-card:focus-visible { outline: 2px solid var(--fw-gold); outline-offset: 4px; }
.fw-games { width: min(100% - 52px, 862px); margin: 0 auto; padding: 8px 0 42px; }
#spiele { scroll-margin-top: 12px; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 650; letter-spacing: -.04em; }
.fw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 13px 0 0; padding: 0; list-style: none; }
.fw-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 16px;
  gap: 13px;
  align-items: center;
  min-height: 105px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--fw-line);
  border-radius: 13px;
  background: linear-gradient(155deg, #2b233a, #1e192c);
  color: inherit;
  text-decoration: none;
}
.fw-card[href]:hover { border-color: #d7a6bd; background: linear-gradient(155deg, #372940, #251d33); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.65rem); font-weight: 650; line-height: 1.06; letter-spacing: -.03em; }
.fw-card p { margin: 5px 0 0; color: var(--fw-muted); font-size: .83rem; line-height: 1.38; }
.fw-arrow { color: var(--fw-gold); font-size: 1.02rem; align-self: start; }
.fw-art {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #b991ac47;
  border-radius: 10px;
  background: radial-gradient(circle at 53% 60%, #51334e, #261e35 78%);
  color: var(--fw-gold);
}
.fw-board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 7px; }
.fw-board span { display: grid; place-items: center; border: solid #b991ac45; border-width: 0 1px 1px 0; font: 400 .69rem/1 Georgia, serif; }
.fw-board span:nth-child(3n) { border-right: 0; }
.fw-board span:nth-child(n+7) { border-bottom: 0; }
.fw-board span:nth-child(5) { color: var(--fw-pink); }
.fw-memory span { position: absolute; display: grid; width: 23px; height: 32px; top: 12px; left: 11px; place-items: center; border: 1px solid #d4a3ba9e; border-radius: 5px; background: #35243c; font: 400 .9rem/1 Georgia, serif; transform: rotate(-15deg); }
.fw-memory span + span { top: 14px; left: 23px; color: var(--fw-pink); transform: rotate(12deg); }
.fw-vote span { position: absolute; display: grid; width: 23px; height: 21px; top: 11px; left: 10px; place-items: center; border: 1px solid #e9bd8a87; border-radius: 7px 7px 7px 2px; background: #392a41; font: 600 1rem/1 var(--fw-serif); }
.fw-vote span + span { top: 25px; left: 24px; border-radius: 7px 7px 2px 7px; border-color: #dda4bf94; color: var(--fw-pink); }
.fw-story span { position: absolute; width: 18px; height: 26px; left: 11px; top: 16px; border: 1px solid #efc692aa; border-radius: 4px 1px 1px 4px; background: repeating-linear-gradient(180deg, transparent 0 5px, #f1c99f4c 5px 6px) center / 9px 17px no-repeat, #382a40; transform: skewY(9deg); }
.fw-story span + span { left: 28px; border-radius: 1px 4px 4px 1px; transform: skewY(-9deg); }
@media (max-width: 630px) {
  .fw-hero { min-height: 278px; padding-top: 61px; background-position: center bottom; }
  .fw-games { width: calc(100% - 30px); padding-bottom: 25px; }
  .fw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fw-card { min-height: 91px; padding: 12px; grid-template-columns: 58px minmax(0, 1fr) 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fw-star { animation: none; } }