/* Gemeinsames Aussehen – Farben und Schrift wie auf dem Flyer */
:root{
  --rosa:#f684a5;        /* Flyer-Hintergrund */
  --rosa-d:#d7679f;      /* Kontur der Flyer-Schrift */
  --rosa-h:#ffd3e0;      /* Ring ums Foto */
  --pflaume:#6d1f45;     /* dunkle Schrift auf hellem Grund */
  --pflaume-m:#9b4a73;
  --tuerkis:#2fbfd6;
  --mint:#7fd6a0;
  --gelb:#f6de58;
  --karte:#fff7fa;
  --linie:#f3c3d4;
  --regenbogen:linear-gradient(90deg,#2fbfd6 0%,#5ccfb4 30%,#9ad98a 55%,#e9df5c 80%,#f6c35a 100%);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Montserrat',system-ui,Arial,sans-serif; color:var(--pflaume);
  background:var(--rosa);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.wimpel{height:clamp(56px,9vw,96px); background:url(bilder/wimpel.svg) repeat-x 0 0 / auto 100%; pointer-events:none}

/* Überschrift wie "KOSTÜMPARTY": runde Schrift, Regenbogen-Füllung, rosa Kante */
.flyertitel{
  font-family:'Fredoka',system-ui,sans-serif; font-weight:700; text-transform:uppercase; line-height:.95; margin:0;
  background:var(--regenbogen); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 var(--rosa-d)) drop-shadow(0 0 1px var(--rosa-d));
  letter-spacing:.01em;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .flyertitel{color:#fff; -webkit-text-fill-color:#fff} }
/* Schrift wie "KOSTÜMPARTY" auf dem Flyer (siehe flyerschrift.js) */
.flyerschrift{font-family:'Londrina Solid','Fredoka',system-ui,sans-serif; font-weight:900; text-transform:uppercase;
  line-height:.92; letter-spacing:.015em; margin:0}
.flyerschrift .fs-b{display:inline-block;
  text-shadow:.045em 0 var(--rosa-d), -.045em 0 var(--rosa-d), 0 .045em var(--rosa-d), 0 -.045em var(--rosa-d),
              .032em .032em var(--rosa-d), -.032em -.032em var(--rosa-d), .032em -.032em var(--rosa-d), -.032em .032em var(--rosa-d),
              0 .09em 0 rgba(109,31,69,.25)}
.flyerschrift .fs-duenn{font-weight:300}
.flyerschrift .fs-wort{white-space:nowrap}
.fs-huepf .fs-b{animation:fsHuepf 3.2s ease-in-out infinite}
@keyframes fsHuepf{0%,70%,100%{transform:none} 78%{transform:translateY(-.12em) rotate(-3deg)} 86%{transform:translateY(0) rotate(2deg)}}
.flyerzeile{font-family:'Montserrat',sans-serif; font-style:italic; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:#a8e8f0}

.rundfoto{border-radius:50%; overflow:hidden; aspect-ratio:1/1; background:var(--rosa-h);
  box-shadow:0 0 0 5px var(--rosa-h), 0 0 0 9px #f9a8c6, 0 14px 34px rgba(109,31,69,.28)}
.rundfoto img{width:100%; height:100%; object-fit:cover; display:block}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }