/* ===================================================================
   Flora – verspielte Deko: Maler, Farbstreifen, Tropfen, Spritzer
   Alles rein dekorativ (aria-hidden, pointer-events:none).
   =================================================================== */
:root{--c1:#1a5fdc;--c2:#12b5e5;--c3:#1fb35a;--c4:#ffb400;--c5:#ff6a1a;--c6:#e5322d}

/* ---------- Maler-SVG ---------- */
.painter{display:block;width:100%;height:auto;overflow:visible}
.pt-arm{transform-origin:72px 71px;animation:pt-swing 1.3s ease-in-out infinite alternate}
.pt-roll{animation:pt-color 6s linear infinite}
.pt-body{transform-origin:60px 140px;animation:pt-sway 2.6s ease-in-out infinite alternate}
@keyframes pt-swing{from{transform:rotate(-26deg)}to{transform:rotate(18deg)}}
@keyframes pt-sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes pt-color{0%,100%{fill:var(--c5)}20%{fill:var(--c4)}40%{fill:var(--c3)}60%{fill:var(--c2)}80%{fill:var(--c1)}}

/* ---------- Kante: Farbstreifen + Maler + Tropfen ---------- */
.edge{position:fixed;inset:0;pointer-events:none;z-index:120;display:none}
@media(min-width:1024px){.edge{display:block}}
.edge__stripe{position:absolute;left:0;top:0;width:8px;height:calc(var(--p,0) * (100vh - 120px) + 70px);max-height:100vh;border-radius:0 0 10px 0;background:linear-gradient(180deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));background-size:8px 100vh;box-shadow:2px 0 10px -2px rgba(10,61,145,.25)}
.edge__stripe::after{content:"";position:absolute;left:0;bottom:-14px;width:8px;height:16px;border-radius:0 0 8px 8px;background:var(--c5);animation:drip 2.4s ease-in infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(.2);opacity:1}70%{transform:scaleY(1.6);opacity:1}100%{transform:scaleY(2.2) translateY(14px);opacity:0}}
.edge__painter{display:none;position:absolute;left:0;top:calc(var(--p,0) * (100vh - 150px) + 20px);width:86px;transform:scaleX(-1);transform-origin:center}
@media(min-width:1440px){.edge__painter{display:block}}
.edge__right{display:none;position:absolute;right:0;top:0;width:96px;height:100%;overflow:hidden}
@media(min-width:1440px){.edge__right{display:block}}
.drop{position:absolute;top:-40px;width:var(--s,14px);height:var(--s,14px);background:var(--c);border-radius:50% 0 50% 50%;opacity:.8;animation:fall var(--d,16s) linear var(--dl,0s) infinite;will-change:transform}
@keyframes fall{0%{transform:translate(0,-40px) rotate(45deg)}25%{transform:translate(var(--sw,12px),25vh) rotate(45deg)}50%{transform:translate(calc(var(--sw,12px) * -1),55vh) rotate(45deg)}100%{transform:translate(0,112vh) rotate(45deg)}}

/* ---------- Hero-/Subhero-Deko ---------- */
.hd{position:absolute;z-index:1;pointer-events:none;animation:bob var(--d,6s) ease-in-out var(--dl,0s) infinite alternate}
.hd svg{display:block;width:100%;height:auto}
@keyframes bob{from{transform:translateY(-8px) rotate(var(--r0,-6deg))}to{transform:translateY(10px) rotate(var(--r1,6deg))}}
.hd--drop{background:var(--c);border-radius:50% 0 50% 50%;opacity:.85;transform:rotate(45deg)}
.hd--drop{animation:bobd var(--d,5s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes bobd{from{transform:translateY(-8px) rotate(45deg)}to{transform:translateY(10px) rotate(45deg)}}
@media(max-width:640px){.hd{transform:scale(.7)}.hd--drop{opacity:.6}}

/* ---------- CTA-Band: Maler obendrauf, Tropfen darunter ---------- */
.fcta{position:relative}
.fcta__painter{position:absolute;right:46px;top:-112px;width:92px;pointer-events:none;transform:scaleX(-1)}
.fcta__drips{position:absolute;left:0;right:0;bottom:-34px;height:36px;width:100%;pointer-events:none;overflow:visible}
.fcta__drips path{fill:#ff7a1a;transform-box:fill-box;transform-origin:top;animation:dripY 3.2s ease-in-out infinite alternate}
.fcta__drips path:nth-child(2){animation-delay:.6s}.fcta__drips path:nth-child(3){animation-delay:1.2s}.fcta__drips path:nth-child(4){animation-delay:.3s}
@keyframes dripY{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(max-width:640px){.fcta__painter{width:64px;right:22px;top:-78px}.fcta__drips{bottom:-26px;height:28px}}

/* ---------- Pinselstrich unter Hervorhebungen ---------- */
h1 em,h2 em{position:relative;display:inline-block}
h1 em::after,h2 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.06em;height:.16em;border-radius:99px;background:linear-gradient(90deg,var(--c4),var(--c5));opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .35s}
h1 em::after,.reveal.in h2 em::after,.in h2 em::after{transform:scaleX(1)}
.hero h1 em::after,.subhero h1 em::after{animation:stroke 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes stroke{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Farbspritzer beim Klick ---------- */
.splat{position:fixed;width:var(--s,9px);height:var(--s,9px);border-radius:50%;background:var(--c);pointer-events:none;z-index:300;animation:splat .75s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes splat{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}

@media(prefers-reduced-motion:reduce){.edge,.hd,.fcta__painter,.fcta__drips{display:none!important}}
@media(max-width:900px){.hd--sm-off{display:none}}