/* Gemeinsame Effekt-Stile fuer die V3-Entwuerfe (Ports aus Kokonut UI / Magic UI) */

/* Background Paths */
.fx-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-float{animation:fxFloat 8s ease-in-out infinite alternate}
@keyframes fxFloat{from{transform:translateY(0)}to{transform:translateY(-15px)}}

/* Border Beam (Magic UI): ein Lichtpunkt faehrt am Rand entlang */
.fx-beam{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:var(--bw,1.5px) solid transparent;
  -webkit-mask:linear-gradient(transparent,transparent) padding-box,linear-gradient(#000,#000) border-box;
  -webkit-mask-composite:source-in;mask:linear-gradient(transparent,transparent) padding-box,linear-gradient(#000,#000) border-box;mask-composite:intersect}
.fx-beam::after{content:"";position:absolute;aspect-ratio:1;width:var(--bs,160px);
  background:linear-gradient(to left,var(--bf,#9db7ff),var(--bt,#3b6bff),transparent);
  offset-path:rect(0 auto auto 0 round var(--bs,160px));animation:fxBeam var(--bd,7s) linear infinite}
@keyframes fxBeam{from{offset-distance:0%}to{offset-distance:100%}}

/* Shine Border (Magic UI) */
.fx-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:var(--sw,1.5px);
  background-image:radial-gradient(transparent,transparent,var(--sc1,#3b6bff),var(--sc2,#a9c1ff),transparent,transparent);
  background-size:300% 300%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:fxShine 14s linear infinite}
@keyframes fxShine{0%{background-position:0 0}50%{background-position:100% 100%}100%{background-position:0 0}}

/* Marquee (Magic UI) */
.fx-marquee{display:flex;overflow:hidden;gap:var(--gap,0);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee>div{display:flex;flex-shrink:0;gap:var(--gap,0);animation:fxMarq var(--dur,38s) linear infinite}
.fx-marquee:hover>div{animation-play-state:paused}
@keyframes fxMarq{to{transform:translateX(calc(-100% - var(--gap,0px)))}}

/* Spotlight-Karte */
[data-spot]{position:relative;overflow:hidden}
[data-spot]::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(59,107,255,.14)),transparent 60%)}
[data-spot]:hover::before{opacity:1}

/* Einblenden */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.65,.3,.9),transform .8s cubic-bezier(.2,.65,.3,.9)}
[data-reveal].in{opacity:1;transform:none}

/* Hinweis im Entwurf */
.fx-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;background:#0b1a4a;color:#fff;font:500 14px Roboto,sans-serif;padding:13px 20px;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -20px rgba(16,24,40,.14);transition:.3s;z-index:999;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.fx-toast.on{opacity:1;transform:translate(-50%,0)}

/* TUEV-Zeichen mit Pflichtzeile */
.fx-tuev{display:flex;align-items:center;gap:12px}
.fx-tuev img{height:50px;width:auto;flex:0 0 auto;border-radius:6px}
.fx-tuev span{font-size:11.5px;line-height:1.5;max-width:300px}

:focus-visible{outline:2px solid #3b6bff;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .fx-float,.fx-beam::after,.fx-shine,.fx-marquee>div{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}