/* ============================================================
   Bausteinlager „Deine neue Webseite" — holofolie.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-holofolie-20261029
   Schillernde Folie wie auf Kreditkarten, Gutscheinen oder Sammelkarten. Die Farben wandern beim Scrollen
   und folgen dem Finger bzw. der Maus, die Karte kippt dabei leicht. Reine Verläufe, keine Bilder, keine Pakete.
   EINBAU:
     <div class="holofolie" data-holofolie> …Inhalt der Karte… </div>
   Varianten: .-hell (heller Kartengrund), .-zart (weniger Farbe, für Karten mit viel Text)
   Nur ein Teil soll schillern (z. B. das Logo als Siegel): data-holo-maske="bilder/logo-maske.png"
   Farben: --hf-grund (Kartengrund, Standard --marke), --hf-staerke (0–1, Standard .62)
   REGELN: Die Folie liegt UNTER dem Inhalt (z-index 1), Schrift bleibt scharf und kontraststark.
   Kippen nur während Zeiger/Finger auf der Karte ist; in Ruhe kein transform.
   ============================================================ */
.holofolie{
  --hf-x:50;--hf-y:50;--hf-staerke:.62;
  --hf-grund:var(--marke,#121E36);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--hf-r,var(--r,22px));
  background-color:var(--hf-grund);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 26px 60px -30px rgba(0,0,0,.6);
  transition:transform .55s cubic-bezier(.2,.9,.25,1),box-shadow .4s ease;
  -webkit-tap-highlight-color:transparent
}
.holofolie > *{position:relative;z-index:2}
.holofolie:not(.-hell){text-shadow:0 1px 2px rgba(0,0,0,.22)}
.holofolie > .hf-folie,.holofolie > .hf-glanz,.holofolie > .hf-funkeln{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}
.hf-folie{
  background:
    repeating-linear-gradient(calc(96deg + var(--hf-x) * .5deg),rgba(255,255,255,0) 0 7px,rgba(255,255,255,.07) 7px 8px),
    /* Regenbogen mit ausgeglichener Helligkeit: kräftig, aber ohne grelle Stellen hinter weißer Schrift */
    linear-gradient(115deg,#ff5fc0 0%,#f0a850 14%,#3cc89a 28%,#4aa8ff 42%,#a07cff 56%,#ff5fc0 70%,#f0a850 84%,#3cc89a 100%);
  background-size:100% 100%,420% 420%;
  background-position:0 0,calc(var(--hf-x) * 1%) calc(var(--hf-y) * 1%);
  mix-blend-mode:color-dodge;opacity:var(--hf-staerke)
}
.hf-funkeln{
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 .7px,rgba(255,255,255,0) 1.3px),
    radial-gradient(circle,rgba(255,255,255,.8) 0 .6px,rgba(255,255,255,0) 1.2px);
  background-size:37px 41px,53px 47px;
  background-position:calc(var(--hf-x) * -.6px) calc(var(--hf-y) * -.4px),calc(var(--hf-x) * .5px) calc(var(--hf-y) * .7px);
  mix-blend-mode:overlay;opacity:calc(var(--hf-staerke) * .9)
}
.hf-glanz{
  background:radial-gradient(circle at calc(var(--hf-x) * 1%) calc(var(--hf-y) * 1%),rgba(255,255,255,.62),rgba(255,255,255,.14) 24%,rgba(255,255,255,0) 52%);
  mix-blend-mode:soft-light
}
.holofolie.-hell{--hf-grund:#F4F2EE;color:var(--tinte,#14213A)}
.holofolie.-hell .hf-folie{mix-blend-mode:multiply;opacity:calc(var(--hf-staerke) * .55)}
.holofolie.-hell .hf-funkeln{opacity:.25}
.holofolie.-zart{--hf-staerke:.36}
.holofolie.-maske .hf-folie,.holofolie.-maske .hf-funkeln,.holofolie.-maske .hf-glanz{
  -webkit-mask-image:var(--hf-maske);mask-image:var(--hf-maske);
  -webkit-mask-size:var(--hf-maske-groesse,contain);mask-size:var(--hf-maske-groesse,contain);
  -webkit-mask-position:var(--hf-maske-ort,center);mask-position:var(--hf-maske-ort,center);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
.holofolie.-aktiv{transition:transform .08s linear,box-shadow .4s ease;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 34px 70px -30px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.holofolie{transition:none}}