/* IntelliTuning Konfigurator-Lizenz – Hintergrund-Engine (fx.css): das Canvas .itkl-fx füllt sein Elternelement und liegt
   unter dem Inhalt (z-index 0; .itkl-wrap bzw. die Inhalte der Werbeflächen haben z-index 1). Keine Mausereignisse, kein
   Einfluss auf das Layout. Das Elternelement muss position:relative haben (fx.js setzt es, wenn es static ist). */
.itkl canvas.itkl-fx,.itkp canvas.itkl-fx{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;display:block;pointer-events:none;z-index:0;opacity:1;background:transparent;border-radius:inherit}
/* weicher Rand oben/unten, damit Partikel nicht an Abschnittsgrenzen „abschneiden“ */
.itkl canvas.itkl-fx[data-fx="hero"],.itkl canvas.itkl-fx[data-fx="fin"],.itkl canvas.itkl-fx[data-fx="soft"]{-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
/* Werbeflächen (promo.js fügt data-fx="banner" in .itkp-card / .itkp-buyin ein): Inhalte darüber */
.itkp .itkp-card>*:not(.itkl-fx):not(.itkp-glow),.itkp .itkp-buyin>*:not(.itkl-fx):not(.itkp-glow){position:relative;z-index:1}
/* Handy: Banner-Partikel etwas zurücknehmen, Regen/Linien sind dort schon per Fläche begrenzt */
@media (max-width:560px){.itkp canvas.itkl-fx[data-fx="banner"]{opacity:.8}}
/* ohne Bewegung: fx.js zeichnet einmal statisch; das Canvas bleibt sichtbar, nur gedämpft */
@media (prefers-reduced-motion:reduce){.itkl canvas.itkl-fx,.itkp canvas.itkl-fx{opacity:.7}}

/* 1.1.0: helle Website-Darstellung – Partikel und Code-Regen multiplizieren statt leuchten (weiße Kerne verschwinden, Gold/Türkis bleiben als Tönung) */
html[data-it-theme="light"] .itkl canvas.itkl-fx,html[data-it-theme="light"] .itkp canvas.itkl-fx{mix-blend-mode:multiply;opacity:.85}