/* Kristall-Motion (24.10.2026): Licht bewegt sich, Koerper kaum. Ideen und Attribut-Konvention:
   C:\tmp\zl-kristall\motion\IDEEN.md. Alles hier greift erst, wenn kristall-motion.js html.k-an setzt,
   ohne Skript bleibt die Seite unveraendert. Nur transform, opacity und filter: kein Layout, kein CLS.
   Kurven sind die vorhandenen der Seite (E1 --ease, E2 Produkt, E3 Produkt-Flug), keine neuen. */

:root{
  --k-e1:cubic-bezier(.22,1,.36,1);
  --k-e2:cubic-bezier(.23,1,.32,1);
  --k-e3:cubic-bezier(.77,0,.175,1);
  --k-licht:#f4ecff;
  --k-glut:115,79,250;
  --k-spektrum:linear-gradient(90deg,#c13cff,#8c30fc 22%,#5c1ffc 42%,#2f6bff 64%,#1e9bff 82%,#56d8fb);
}

/* Einschweben: Elemente unterhalb des Bildes warten unsichtbar, behalten aber ihren Platz.
   Die Bewegung selbst laeuft per WAAPI, damit fremde transition-Listen unberuehrt bleiben. */
html.k-an .k-wartet{opacity:0}

/* Kantenlicht: ein Band aus Kantenlicht im Spektrum faehrt einmal ueber eine 1-px-Kante. */
/* 7 px hohes Fenster um die 1-px-Kante: die Linie bleibt 1 px, ihr weicher Schein (Glow S) darf um sie herum liegen. */
.k-glint{position:absolute;left:0;right:0;top:-3px;height:7px;overflow:hidden;pointer-events:none;z-index:2;contain:strict}
.k-glint>i{position:absolute;top:3px;left:0;height:1px;width:55%;opacity:0;filter:drop-shadow(0 0 3px rgba(var(--k-glut),.7));
  background:linear-gradient(90deg,transparent,rgba(193,60,255,.9) 18%,rgba(92,31,252,.9) 36%,var(--k-licht) 50%,rgba(30,155,255,.9) 66%,rgba(86,216,251,.9) 82%,transparent);
  transform:translate3d(-100%,0,0)}
.k-glint.k-unten{top:auto;bottom:-3px}
.k-glint.k-laeuft>i{animation:k-glint 1.1s var(--k-e3) both;will-change:transform,opacity}
@keyframes k-glint{
  0%{transform:translate3d(-100%,0,0);opacity:0}
  14%{opacity:1}
  80%{opacity:1}
  100%{transform:translate3d(190%,0,0);opacity:0}
}

/* Facetten-Glint ueber eine Squircle-Kachel: Schraegband, Kachel schneidet es mit overflow:hidden zu. */
.k-glint.k-flaeche{inset:0;height:auto;border-radius:inherit;z-index:2}
.k-glint.k-flaeche>i{top:-30%;height:160%;width:50%;filter:none;
  background:linear-gradient(90deg,transparent,rgba(193,60,255,.12) 22%,rgba(244,236,255,.2) 44%,rgba(244,236,255,.3) 50%,rgba(86,216,251,.16) 58%,transparent 80%);
  transform:translate3d(-130%,0,0) skewX(-18deg)}
.k-glint.k-flaeche.k-laeuft>i{animation:k-glint-flaeche 1.1s var(--k-e3) both;will-change:transform,opacity}
@keyframes k-glint-flaeche{
  0%{transform:translate3d(-130%,0,0) skewX(-18deg);opacity:0}
  18%{opacity:1}
  78%{opacity:1}
  100%{transform:translate3d(300%,0,0) skewX(-18deg);opacity:0}
}

/* Facetten-Aufleuchten: das Icon hellt auf, ein kleiner Glow wie im Desktop-Icon. Fokus immer, Hover nur mit Maus. */
[data-k-facette] img,[data-k-facette].k-facette-selbst{transition:filter var(--zl-k-dauer,.24s) var(--k-e2)}
[data-k-facette]:focus-visible img,[data-k-facette]:focus-within img,[data-k-facette].k-facette-selbst:focus-visible{filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 10px rgba(var(--k-glut),.45))}
@media (hover:hover) and (pointer:fine){
  [data-k-facette]:hover img,[data-k-facette].k-facette-selbst:hover{filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 10px rgba(var(--k-glut),.45))}
}
/* Kachel mit eigenem Glint: kein Drop-Shadow auf dem beschnittenen Bild, der Halo liefert das Licht. */
.p-icon[data-k-facette] img{filter:none}
@media (hover:hover) and (pointer:fine){.p-icon[data-k-facette]:hover img{filter:brightness(1.1)}}
/* Marke im Kopf ist 30 px: kein Glow unter 32 px (MASTER), nur Aufhellen. */
.brand[data-k-facette]:focus-visible img,.brand[data-k-facette]:focus-within img{filter:brightness(1.15)}
@media (hover:hover) and (pointer:fine){.brand[data-k-facette]:hover img{filter:brightness(1.15)}}

/* Glow-Atmen: Halo hinter dem Hero-Subjekt, die eine Schleife je Bildschirm. Liegt im Elternblock des Subjekts. */
.k-halo{position:absolute;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--k-glut),.26),rgba(var(--k-glut),.11) 45%,rgba(30,155,255,.06) 70%,transparent);
  opacity:.75;transform:scale(1)}
html.k-an .k-halo.k-atmet{animation:k-atmen 7s ease-in-out 3s infinite alternate both}
html.k-an .k-halo.k-pause{animation-play-state:paused}
/* Atmen, nicht Pulsieren (MASTER: kein Dauerpulsieren): kleiner Hub, langsame Periode. */
@keyframes k-atmen{from{opacity:.68;transform:scale(.97)}to{opacity:.95;transform:scale(1.02)}}

/* Trennlinie zieht aus der Mitte auf. */
html.k-an .k-trenner-wartet{opacity:0;transform:scaleX(.15)}

/* Druck-Rueckmeldung: alle Knoepfe geben beim Druecken kurz nach. Doppelte Klasse schlaegt Hover-Regeln
   der Startseite (.hero-actions .primary:hover{transform:none}) ohne !important. */
/* MASTER: Koerper verschiebt sich hoechstens 1 px. */
html.k-an .button.button:active,html.k-an .zl-k-knopf.zl-k-knopf:active{transform:translateY(1px) scale(.992);transition-duration:.12s;transition-timing-function:var(--k-e2)}

@media (prefers-reduced-motion:reduce){
  html.k-an .k-wartet,html.k-an .k-trenner-wartet{opacity:1;transform:none}
  .k-glint{display:none}
  html.k-an .k-halo.k-atmet{animation:none}
  [data-k-facette] img,[data-k-facette].k-facette-selbst{transition:none}
  html.k-an .button.button:active,html.k-an .zl-k-knopf.zl-k-knopf:active{transform:none}
}
@media print{
  html.k-an .k-wartet,html.k-an .k-trenner-wartet{opacity:1!important;transform:none!important}
  .k-glint,.k-halo{display:none}
}
@media (forced-colors:active){.k-glint,.k-halo{display:none}}