@font-face{font-family:"Fira Sans Condensed";font-weight:800;font-display:swap;src:url(fonts/fira-sans-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:400;font-display:swap;src:url(fonts/fira-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:600;font-display:swap;src:url(fonts/fira-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:700;font-display:swap;src:url(fonts/fira-sans-latin-700-normal.woff2) format("woff2")}
:root{
  --veld:#F3F8F4; --veld-2:#E4EFE7; --inkt:#0F2A1C; --zacht:#4A6656; --club:#07A04E; --club-diep:#066532; --lijn:rgba(15,42,28,.22); --glas:rgba(15,42,28,.72); color-scheme:light;
  --bier:#E8A317; --bier-diep:#B86E00; --schuim:#FFF6DC; --kaart:#FFD21F; --kaart-inkt:#2A2100; --rood:#D7263D;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --veld:#076734; --veld-2:#055A2C; --inkt:#FFFFFF; --zacht:#B5D3C0; --club:#2BB866; --club-diep:#066532; --lijn:rgba(255,255,255,.24); --glas:rgba(255,255,255,.8); color-scheme:dark; } }
:root[data-theme="dark"]{ --veld:#076734; --veld-2:#055A2C; --inkt:#FFFFFF; --zacht:#B5D3C0; --club:#2BB866; --club-diep:#066532; --lijn:rgba(255,255,255,.24); --glas:rgba(255,255,255,.8); color-scheme:dark; }
:root[data-theme="light"]{ --veld:#F3F8F4; --veld-2:#E4EFE7; --inkt:#0F2A1C; --zacht:#4A6656; --club:#07A04E; --club-diep:#066532; --lijn:rgba(15,42,28,.22); --glas:rgba(15,42,28,.72); color-scheme:light; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; min-height:100%; background:var(--veld); color:var(--inkt);
  font-family:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.45; overflow-x:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 72px,var(--veld-2) 72px 144px);
}
.display{font-family:"Fira Sans Condensed","Arial Narrow",sans-serif; font-weight:800; letter-spacing:0}
.num{font-variant-numeric:tabular-nums}

.clubbalk{background:#066532; color:#fff; border-bottom:8px solid #07A04E}
.clubbalk .binnen{max-width:920px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px}
.embleem{width:72px; height:76px; flex:none; display:grid; place-items:center}
.embleem img{max-width:100%; max-height:100%; display:block}
.monogram{width:64px; height:64px; border-radius:50%; background:#fff; color:var(--club-diep); display:grid; place-items:center; text-align:center; font-size:.92rem; line-height:1; border:3px solid var(--club)}
.clubnaam{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.clubnaam strong{font-size:1.5rem; text-transform:uppercase}
.clubnaam span{opacity:.85; font-size:.95rem}
.pagina{max-width:920px; margin:0 auto; padding:28px 20px 96px}
.kop h1{font-size:clamp(1.8rem,6.5vw,2.8rem); margin:0; line-height:1.05}
.kop p{margin:.5rem 0 0; color:var(--zacht); max-width:46ch}

.podium{display:grid; grid-template-columns:1fr; gap:8px; align-items:center; margin-top:20px}
@media (min-width:700px){ .podium{grid-template-columns:300px 1fr; gap:36px; margin-top:36px} }

.laars{width:min(64vw,300px); margin:0 auto; display:block; overflow:visible}
.laars .glas{fill:none; stroke:var(--glas); stroke-width:6; stroke-linejoin:round}
.laars .glans{stroke:var(--schuim); stroke-width:5; stroke-linecap:round; opacity:.45; fill:none}
.laars .niveau{transition:transform 2.4s cubic-bezier(.5,0,.2,1)}
.laars.leeg .niveau{transform:translateY(250px)}
.laars .bel{fill:var(--schuim); opacity:.7; animation:bel 3.2s linear infinite}
.laars .bel:nth-of-type(2){animation-duration:4.1s; animation-delay:-1.3s}
.laars .bel:nth-of-type(3){animation-duration:3.6s; animation-delay:-2.2s}
.laars .bel:nth-of-type(4){animation-duration:4.6s; animation-delay:-.6s}
.laars .bel:nth-of-type(5){animation-duration:3.9s; animation-delay:-3s}
@keyframes bel{from{transform:translateY(0);opacity:0}15%{opacity:.75}to{transform:translateY(-190px);opacity:0}}
.laars.schud{animation:schud .5s ease-in-out 3}
@keyframes schud{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

.stand{text-align:center}
@media (min-width:700px){ .stand{text-align:left} }
.stand .onderschrift{color:var(--zacht); margin:0}
.bedrag{font-size:clamp(3.6rem,17vw,8rem); line-height:.95; margin:.1em 0 .12em; color:var(--club); text-shadow:0 5px 0 var(--club-diep)}
.bedrag.plof{animation:plof .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes plof{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.status{font-size:1.15rem; margin:0; font-weight:600}

.klok{margin-top:22px}
.klok .regel{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px}
.klok .over{font-size:1.5rem}
.baan{height:16px; border-radius:99px; background:var(--veld-2); border:2px solid var(--lijn); overflow:hidden}
.baan i{display:block; height:100%; width:0; background:var(--club); border-radius:99px}

.cijfers{display:flex; gap:28px; flex-wrap:wrap; margin:22px 0 0; padding:0; justify-content:center}
@media (min-width:700px){ .cijfers{justify-content:flex-start} }
.cijfers div{min-width:0}
.cijfers dt{color:var(--zacht); font-size:.9rem}
.cijfers dd{margin:0; font-size:1.35rem; font-weight:700}

.knoppen{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; justify-content:center}
@media (min-width:700px){ .knoppen{justify-content:flex-start} }
button{font:inherit; cursor:pointer; border-radius:12px; border:2px solid var(--lijn); background:transparent; color:var(--inkt); padding:10px 16px; font-weight:600}
button:hover{border-color:var(--inkt)}
button.vol{background:var(--club-diep); border-color:var(--club-diep); color:#fff}
button.gevaar{border-color:var(--rood); color:var(--inkt)}
button:focus-visible,input:focus-visible{outline:3px solid var(--bier); outline-offset:2px}
[hidden]{display:none !important}

/* het signaal */
.kaartlaag{position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:24px; cursor:pointer}
.signaal{position:fixed; inset:0; z-index:20; background:rgba(215,38,61,.9); animation:flits .9s ease-out}
@keyframes flits{0%{background:rgba(255,246,220,1)}30%{background:rgba(215,38,61,1)}100%{background:rgba(215,38,61,.9)}}
.gelekaart{width:min(78vw,340px); aspect-ratio:3/4.1; background:var(--kaart); color:var(--kaart-inkt); border-radius:22px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:22px; box-shadow:0 22px 0 rgba(0,0,0,.28); transform:rotate(-7deg); animation:kaart .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes kaart{from{transform:translateY(-120vh) rotate(24deg)}to{transform:translateY(0) rotate(-7deg)}}
.gelekaart .plus{font-size:clamp(3rem,15vw,4.6rem); line-height:1}
.gelekaart p{margin:.7rem 0 0; font-weight:700; font-size:1.15rem}
.gelekaart small{margin-top:.9rem; font-size:.9rem; opacity:.75}

.regen{position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden}
.biljet{position:absolute; top:-70px; left:var(--x); width:92px; height:48px; border-radius:5px; color:#fff; font-family:"Fira Sans Condensed","Arial Narrow",sans-serif; font-weight:800; display:flex; align-items:center; justify-content:space-between; padding:0 9px; font-size:1.25rem; box-shadow:0 3px 0 rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.55); animation:val var(--duur) linear var(--wacht) forwards; opacity:0}
.biljet span{font-family:"Fira Sans",sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.06em}
.biljet.tien{background:linear-gradient(120deg,#C8402F,#E9806B)}
.biljet.vijf{background:linear-gradient(120deg,#5E7F73,#9DB8A6)}
@keyframes val{
  0%{transform:translate3d(0,0,0) rotate(var(--r0)); opacity:1}
  50%{transform:translate3d(var(--zwaai),60vh,0) rotate(var(--r1)); opacity:1}
  100%{transform:translate3d(0,125vh,0) rotate(var(--r2)); opacity:1}
}

/* beheer */
dialog{border:0; border-radius:18px; padding:0; width:min(92vw,440px); background:var(--veld-2); color:var(--inkt); border:2px solid var(--lijn)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.beheer{padding:22px}
.beheer h2{margin:0 0 4px; font-size:1.35rem}
.beheer .uitleg{margin:0 0 16px; color:var(--zacht); font-size:.95rem}
.beheer label{display:block; font-weight:600; margin:14px 0 6px}
.beheer input{width:100%; font:inherit; padding:11px 12px; border-radius:10px; border:2px solid var(--lijn); background:var(--veld); color:var(--inkt)}
.beheer .rij{display:flex; gap:8px}
.beheer .rij input{flex:1; min-width:0}
.beheer .acties{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.beheer input[type=file]{padding:8px}
.beheer .melding{margin:14px 0 0; min-height:1.4em; color:var(--inkt); font-weight:600; font-size:.95rem}

@media (prefers-reduced-motion: reduce){
  .laars .bel,.laars.schud,.bedrag.plof,.signaal,.gelekaart{animation:none}
  .laars .niveau{transition:none}
}

.beheerlink{margin-top:34px; text-align:center; font-size:.9rem}
.beheerlink button{border:0; padding:6px 10px; color:var(--zacht); font-weight:400; text-decoration:underline}

/* alles op één scherm, zonder scrollen */
html{height:100%}
@supports (height:100dvh){ html{height:100dvh} }
body{height:100%; min-height:0; overflow:hidden; display:flex; flex-direction:column; font-size:clamp(12px,2.05vh,18px); line-height:1.35}
.clubbalk{flex:none; border-bottom-width:clamp(4px,.8vh,8px)}
.clubbalk .binnen{padding:clamp(6px,1.4vh,14px) 20px; gap:12px}
.embleem{width:auto; height:auto; flex:none}
.embleem img{height:clamp(40px,8vh,76px); width:auto; max-width:none; max-height:none}
.monogram{width:clamp(40px,8vh,64px); height:clamp(40px,8vh,64px)}
.clubnaam strong{font-size:clamp(1rem,3.2vh,1.6rem)}
.clubnaam span{font-size:clamp(.75rem,1.9vh,.95rem)}
.pagina{flex:1; min-height:0; width:100%; padding:clamp(8px,2vh,28px) 20px clamp(8px,1.6vh,24px); display:flex; flex-direction:column}
.kop{flex:none}
.kop h1{font-size:clamp(1.25rem,min(6.5vw,4.4vh),2.8rem)}
.kop p{margin-top:.35em; max-width:60ch}
.podium{flex:1; min-height:0; margin-top:clamp(4px,1.2vh,24px); gap:clamp(2px,1vh,12px); grid-template-rows:minmax(0,1fr) auto; align-items:stretch}
.laars{width:auto; height:100%; min-height:0; max-height:42vh; max-width:70vw}
.stand{min-height:0}
.bedrag{font-size:clamp(2.6rem,min(17vw,10.5vh),8rem); text-shadow:0 .045em 0 var(--club-diep)}
.status{font-size:clamp(1rem,2.7vh,1.35rem); font-weight:700}
.klok{margin-top:clamp(6px,1.6vh,22px)}
.klok .regel{margin-bottom:.35em}
.klok .over{font-size:clamp(1.1rem,3vh,1.5rem)}
.baan{height:clamp(8px,1.6vh,16px)}
.cijfers{margin-top:clamp(6px,1.5vh,22px); gap:clamp(16px,4vw,32px)}
.cijfers dd{font-size:clamp(1rem,2.6vh,1.35rem)}
.cijfers dt{font-size:.85em}
.knoppen{margin-top:clamp(6px,1.6vh,26px); align-items:center}
.knoppen button,.beheerlink button{padding:clamp(5px,1vh,10px) 14px}
.beheerlink{margin:0; font-size:.85em}
@media (min-width:700px), (orientation:landscape){
  .podium{grid-template-columns:minmax(0,38%) 1fr; grid-template-rows:minmax(0,1fr); gap:clamp(16px,4vw,48px); align-items:center}
  .laars{max-height:62vh; max-width:100%; justify-self:center}
  .stand{text-align:left}
  .cijfers,.knoppen{justify-content:flex-start}
  .bedrag{font-size:clamp(2.6rem,min(9vw,15vh),8rem)}
}
@media (orientation:landscape) and (max-height:480px){
  .kop{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .kop p{margin:0; font-size:.95em}
  .pagina{padding-top:6px}
}
@media (max-height:600px){ .stand .onderschrift{display:none} }
@media (min-width:1200px){ .pagina,.clubbalk .binnen{max-width:1240px} }

/* laarsje: vak dat de vrije ruimte vult; svg absoluut erin (werkt ook in Safari/iOS) */
.podium{display:flex; flex-direction:column; align-items:stretch}
.laarsvak{flex:1 1 0; min-height:70px; position:relative}
.laarsvak .laars{position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; max-height:none; margin:0}
.stand{flex:none}
@media (min-width:700px), (orientation:landscape){
  .podium{flex-direction:row; align-items:center; gap:clamp(16px,4vw,48px)}
  .laarsvak{flex:0 0 36%; align-self:center; min-height:0; height:min(55vh,640px)}
  .stand{flex:1 1 0; min-width:0}
}

/* Mallorca */
.mallorca{display:block; width:100%; text-align:left; margin-top:clamp(6px,1.5vh,20px); padding:clamp(6px,1.1vh,12px) 14px; border-radius:14px; border:2px solid #F28C28; background:linear-gradient(100deg,rgba(242,140,40,.16),rgba(255,210,31,.16)); color:var(--inkt)}
.mallorca:hover{border-color:#D7263D}
.mallorca .ml-kop{display:flex; align-items:center; gap:8px; font-size:.85em; font-weight:600; color:var(--zacht)}
.mallorca strong{display:block; font-size:clamp(.95rem,2.3vh,1.15rem); margin:.1em 0 .35em}
.mallorca .baan{display:block; height:clamp(6px,1.1vh,10px)}
.mallorca .baan i{background:linear-gradient(90deg,#F28C28,#FFD21F)}
.feest{position:fixed; inset:0; z-index:25; overflow:hidden; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:calc(env(safe-area-inset-top,0px) + 64px) 22px calc(env(safe-area-inset-bottom,0px) + 20px)}
.feest-decor{position:absolute; top:0; left:0; width:100%; height:100%}
.feest-inhoud{position:relative; max-width:560px; text-shadow:0 2px 10px rgba(0,0,0,.45)}
.feest-sponsor{margin:0; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase}
.feest-naam{margin:.1em 0 0; font-size:clamp(1.6rem,6vh,3rem); line-height:1; color:#FFD21F}
.feest h2{margin:.35em 0 0; font-size:clamp(2rem,8vh,4.2rem); line-height:.95}
.feest-aantal{margin:.2em 0 0; font-size:clamp(3rem,14vh,7rem); line-height:1; color:#fff}
.feest-onder{margin:0 auto; max-width:30ch; font-weight:600}
.feest-spreuk{margin:1em auto 0; max-width:32ch; font-style:italic}
.feest-knoppen{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:1.4em}
.feest-knoppen button{background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.7); color:#fff; text-shadow:none}
.feest-knoppen button.vol{background:#fff; border-color:#fff; color:#0F2A1C}
.vlieger{position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); left:0; display:flex; align-items:center; gap:0; white-space:nowrap; animation:vlieg 11s linear infinite}
.vlieger .doek{background:#fff; color:#066532; padding:4px 12px; font-size:clamp(.8rem,2.2vh,1.05rem); border-radius:3px; margin-right:14px; position:relative}
.vlieger .doek::after{content:""; position:absolute; right:-14px; top:50%; width:14px; border-top:2px solid #fff}
@keyframes vlieg{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}
.snipper{position:absolute; top:-30px; left:var(--x); width:10px; height:16px; border-radius:2px; opacity:0; animation:val var(--duur) linear var(--wacht) forwards}
@media (prefers-reduced-motion: reduce){ .vlieger{animation:none; left:50%; transform:translateX(-50%)} }

.mallorca{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; row-gap:.35em}
.mallorca .ml-kop{color:#B4550A; font-weight:700; white-space:nowrap}
.mallorca strong{margin:0; text-align:right}
.mallorca .baan{grid-column:1 / -1}
:root[data-theme="dark"] .mallorca .ml-kop{color:#FFC857}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mallorca .ml-kop{color:#FFC857} }
.onderrij{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:clamp(6px,1.5vh,22px)}
.onderrij .cijfers,.onderrij .knoppen{margin-top:0}
.onderrij .cijfers{justify-content:flex-start; text-align:left; gap:clamp(12px,4vw,28px)}
@media (max-width:699px) and (orientation:portrait){ .stand .onderschrift{display:none} }
.feest-inhoud{background:rgba(8,30,40,.38); border-radius:22px; padding:22px 18px}
.onderrij{flex-wrap:nowrap}
.onderrij .knoppen{flex:none}
.mallorca strong{font-size:clamp(.9rem,2.2vh,1.1rem)}

/* Mallorca-balk, feestelijk */
.mallorca{display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:12px; row-gap:.4em; position:relative; overflow:hidden; border:0; color:#2A1200; padding:clamp(7px,1.2vh,12px) 14px;
  background:repeating-linear-gradient(115deg,#FFD21F 0 26px,#FFB627 26px 52px); background-size:200% 100%; box-shadow:0 3px 0 #C2410C, inset 0 0 0 2px rgba(255,255,255,.55); animation:ml-schuif 6s linear infinite}
.mallorca:hover{filter:brightness(1.05)}
.mallorca::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:ml-glans 3.2s ease-in-out infinite}
@keyframes ml-schuif{to{background-position:-104px 0}}
@keyframes ml-glans{0%,55%{left:-50%}100%{left:120%}}
.mallorca .ml-pul{width:clamp(22px,4vh,34px); height:auto; flex:none; animation:ml-proost 1.4s ease-in-out infinite; transform-origin:50% 90%}
@keyframes ml-proost{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.mallorca .ml-tekst{display:flex; flex-direction:column; min-width:0; text-align:left; line-height:1.15}
.mallorca .ml-kop{display:block; color:#9A2C00; font-size:.8em; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:normal}
:root[data-theme="dark"] .mallorca .ml-kop{color:#9A2C00}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mallorca .ml-kop{color:#9A2C00} }
.mallorca strong{display:block; margin:0; text-align:left; font-family:"Fira Sans Condensed","Arial Narrow",sans-serif; font-weight:800; font-size:clamp(1.05rem,2.7vh,1.5rem)}
.mallorca .ml-tik{background:#D7263D; color:#fff; font-weight:700; font-size:.8em; padding:.3em .7em; border-radius:99px; transform:rotate(-6deg); white-space:nowrap}
.mallorca .baan{grid-column:1 / -1; background:rgba(255,255,255,.6); border-color:rgba(154,44,0,.35); height:clamp(6px,1vh,9px)}
.mallorca .baan i{background:#D7263D}
.mallorca.betaald .baan i{background:#C97A06}

/* feestscherm in Megapark-sfeer */
.feest{background:linear-gradient(#1A1147 0%,#5B1A78 38%,#D7263D 70%,#F28C28 100%)}
.lichtsnoer{position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 54px); height:16px;
  background:radial-gradient(circle,#FFD21F 0 5px,transparent 6px) 0 0/48px 16px repeat-x, radial-gradient(circle,#2BE38A 0 5px,transparent 6px) 16px 0/48px 16px repeat-x, radial-gradient(circle,#FF4FA3 0 5px,transparent 6px) 32px 0/48px 16px repeat-x; animation:knipper 1s steps(2) infinite}
@keyframes knipper{50%{filter:brightness(.55) saturate(1.6)}}
.straal{position:absolute; bottom:26%; width:34vmin; height:130vh; margin-left:-17vmin; transform-origin:50% 100%; clip-path:polygon(46% 100%,54% 100%,100% 0,0 0); opacity:.5; mix-blend-mode:screen; animation:zwaai 4s ease-in-out infinite alternate}
.s1{left:12%; background:linear-gradient(to top,#FFD21F,transparent 75%); --a:-28deg; --b:18deg}
.s2{left:38%; background:linear-gradient(to top,#FF4FA3,transparent 75%); --a:22deg; --b:-16deg; animation-duration:3.2s}
.s3{left:62%; background:linear-gradient(to top,#38D6FF,transparent 75%); --a:-20deg; --b:24deg; animation-duration:3.6s}
.s4{left:88%; background:linear-gradient(to top,#2BE38A,transparent 75%); --a:26deg; --b:-22deg; animation-duration:4.4s}
@keyframes zwaai{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
.palmboom{position:absolute; bottom:12%; height:min(74vh,620px); width:auto; aspect-ratio:220/420}
.palmboom.links{left:-3vw}
.palmboom.rechts{right:-3vw; transform:scaleX(-1)}
.bierzee{position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(#F6C445,#C97A06)}
.schuimrand{position:absolute; left:0; right:0; top:-22px; height:40px; background:radial-gradient(circle at 24px 24px,#FFF6DC 23px,transparent 24px) 0 0/44px 48px repeat-x, linear-gradient(transparent 22px,#FFF6DC 22px); animation:schuim 5s linear infinite}
@keyframes schuim{to{background-position:-88px 0,0 0}}
.bub{position:absolute; bottom:-20px; border-radius:50%; background:rgba(255,246,220,.55); animation:bub linear infinite}
@keyframes bub{to{transform:translateY(-34vh); opacity:0}}
.pullen{position:absolute; left:-20px; right:-20px; bottom:-3vh; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none}
.pul{width:clamp(70px,13vh,130px); height:auto; flex:none; transform-origin:50% 100%; animation:proost 1.2s ease-in-out infinite; filter:drop-shadow(0 6px 0 rgba(0,0,0,.2))}
.pul.l{--k:14deg} .pul.r{--k:-14deg}
@keyframes proost{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3vh) rotate(var(--k))}}
.feest-inhoud{background:rgba(20,8,40,.55); border:2px solid rgba(255,255,255,.35); box-shadow:0 0 0 6px rgba(255,79,163,.25), 0 0 40px rgba(255,210,31,.35)}
.feest-aantal{color:#FFD21F; text-shadow:0 0 18px rgba(255,210,31,.7), 0 4px 0 #9A2C00}
.feest h2{text-shadow:0 0 16px rgba(255,79,163,.9), 0 3px 0 #5B1A78}
@media (prefers-reduced-motion: reduce){ .mallorca,.mallorca::after,.mallorca .ml-pul,.lichtsnoer,.straal,.schuimrand,.bub,.pul{animation:none} }