/* Beanlings Booster: Folie (31.10.2026, js/folie.js). Bewusste Ausnahme von „keine Verläufe“ (illustration/STIL.md „Folie“):
   dezent in Ruhe (--fo-a ~ .3), deutlich beim Bewegen (bis ~ .95), nie grell. Variablen an der Karte:
   --lx/--ly Lichtlage in %, --fx/--fy 0..1, --fw Winkel in Grad, --fo-a Stärke 0..1. */
@property --fo-a{syntax:'<number>';inherits:true;initial-value:.32}
.kt.mit-folie{--lx:30%;--ly:22%;--fx:.3;--fy:.22;--fw:100;--fo-a:.32;transition:--fo-a .35s ease-out}
.kt-fo{position:absolute;inset:0;pointer-events:none}
.kt-fo[hidden]{display:none}
.kt-fo>i{position:absolute;inset:0;display:block;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Regenbogen für Bild-/Reverse-/Prismafolie: Pastell, wiederholt, wandert mit dem Licht */
.fo-bild .fo-farbe,.fo-reverse .fo-farbe{
  background:repeating-linear-gradient(118deg,#ff5f86 0,#ffc145 7%,#7fe06f 14%,#3fc3ff 21%,#9a6bff 28%,#ff5f86 35%);
  background-size:280% 280%;background-position:calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  mix-blend-mode:color;opacity:calc(var(--fo-a) * .5)}
.fo-bild .fo-farbe2,.fo-reverse .fo-farbe2{
  background:repeating-linear-gradient(118deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 3%,rgba(255,255,255,0) 7%);
  background-size:280% 280%;background-position:calc(var(--fx) * -120%) calc(var(--fy) * 100%);
  mix-blend-mode:soft-light;opacity:var(--fo-a)}
.kt-fo .fo-licht{background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,255,255,.75) 0,rgba(255,255,255,.22) 22%,rgba(255,255,255,0) 48%);
  mix-blend-mode:overlay;opacity:var(--fo-a)}
/* Sternfolie: zwei Sternmuster, je von einem eigenen Lichtfleck getroffen -> beim Kippen blitzen andere Sterne auf */
.fo-stern .fo-stern-a{background:radial-gradient(circle at var(--lx) var(--ly),#fffbe8 0,#ffe7a0 13%,#a8e8ff 28%,rgba(160,220,255,.22) 48%,rgba(255,255,255,.1) 100%);
  mix-blend-mode:color-dodge;opacity:calc(.2 + var(--fo-a) * .8)}
.fo-stern .fo-stern-b{background:radial-gradient(circle at calc(100% - var(--lx)) calc(100% - var(--ly)),#eef8ff 0,#c8b8ff 16%,rgba(200,184,255,.15) 40%,rgba(255,255,255,0) 70%);
  mix-blend-mode:color-dodge;opacity:calc(var(--fo-a) * .8)}
.fo-stern .fo-licht{opacity:calc(var(--fo-a) * .55)}
/* Strukturfolie: Prägung mit Licht- und Schattenkante (versetzte Masken), Lichtband wandert über die Linien */
.fo-struktur .fo-praeg-d{background:#2a1f1a;mix-blend-mode:multiply;opacity:.32}
.fo-struktur .fo-praeg-h{background:#fff8e0;mix-blend-mode:soft-light;opacity:.85}
.fo-struktur .fo-band{background:linear-gradient(102deg,rgba(255,250,230,0) 40%,rgba(255,250,230,.95) 50%,rgba(170,220,255,.5) 53%,rgba(255,250,230,0) 62%);
  background-size:260% 100%;background-position:calc(var(--fx) * 100%) 0;mix-blend-mode:color-dodge;opacity:calc(.15 + var(--fo-a) * .85)}
/* Prismafolie: Facetten mit Regenbogen + weiche Brechung über die ganze Karte */
.fo-prisma .fo-farbe{background:repeating-linear-gradient(calc(var(--fw) * 1deg),#ff7b9c 0,#ffcf6b 4%,#9af08f 8%,#6fd2ff 12%,#a98bff 16%,#ff7b9c 20%);
  background-size:220% 220%;background-position:calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  mix-blend-mode:color-dodge;opacity:calc(var(--fo-a) * .42)}
.fo-prisma .fo-farbe2{background:conic-gradient(from calc(var(--fw) * 1deg) at var(--lx) var(--ly),#ff8fa8,#ffd27a,#a9f0a0,#7fd8ff,#b99bff,#ff8fa8);
  mix-blend-mode:soft-light;opacity:calc(var(--fo-a) * .45)}
/* Goldfolie: warmes Gold über Rahmen/Tafel, schwächer über dem Bild; heller Fleck folgt dem Licht */
.fo-gold .fo-farbe{background:linear-gradient(115deg,#6b4410 0,#c9902e 20%,#ffe9a8 38%,#fff6d8 45%,#e2ac36 56%,#8a5a1a 76%,#c9902e 90%,#ffe9a8 100%);
  background-size:260% 260%;background-position:calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  mix-blend-mode:overlay;opacity:calc(.32 + var(--fo-a) * .6)}
.fo-gold .fo-licht{background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,243,196,.85) 0,rgba(255,226,150,.25) 24%,rgba(255,226,150,0) 50%);
  mix-blend-mode:color-dodge;opacity:calc(var(--fo-a) * .85)}
/* Auto-Qualität (schwaches Gerät oder ruckelnde Bilder): nur die Farbebene */
.fo-leicht .kt-fo .fo-licht,.fo-leicht .kt-fo .fo-farbe2,.fo-leicht .kt-fo .fo-stern-b{display:none}
/* Binder-Plakette: Zeichen je Folienart auf ruhigem Perlmutt (statisch) */
.kt-plak-var i.kt-v-folie{background:conic-gradient(from 200deg,#ffd6de,#fff0c2,#d8f5d0,#cdeeff,#e2d6ff,#ffd6de)}
.kt-plak-var i.kt-v-folie svg{display:block}
.kt-plak-var i.fo-z-gold{background:#fbe08a}
/* Großansicht: Knopf „Folie bewegen“ und Hinweis */
.gross-folie{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:4px 0 0;font:700 13px/1.3 'Grandstander',system-ui,sans-serif;color:#f3e3c3;text-align:center}
.gross-folie .knopf svg{vertical-align:-3px;margin-right:4px}
@media (prefers-reduced-motion:reduce){.kt.mit-folie{transition:none}}
.fo-bild .fo-farbe{opacity:calc(var(--fo-a) * .36)}