/* ==========================================================================
   Deko-Icons an offenen Bausteinen (16.09.2026)
   Feine Neon-Linien im Zwischenraum zum Nachbarbaustein, hinter Text, sehr ruhig animiert.
   Markup: partials/deko.antlers.html, Rahmen in partials/page_builder.antlers.html.
   ========================================================================== */
.k-deko-rahmen { position: relative; }
.k-deko-rahmen + .k-set,
.k-set + .k-deko-rahmen,
.k-deko-rahmen + .k-deko-rahmen { margin-top: clamp(var(--s7), 7vw, var(--s9)); }

.k-deko {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--deko); height: var(--deko);
  color: var(--kyb-neon);
}
.k-deko svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; opacity: .2;
}
.k-deko svg * { vector-effect: non-scaling-stroke; }
.k-deko--faecher { height: calc(var(--deko) * 1.4); }
.k-deko--faecher svg { stroke: #fff; stroke-width: 1.4; opacity: 1; }
.k-deko--faecher line { opacity: .14; }

/* Lage: im Content-Raster, innerhalb des Bausteins in der gewählten Ecke.
   Keine zusätzliche Höhe — im Zweifel liegt das Icon hinter dem Text,
   deshalb sehr geringe Deckkraft. */
.k-deko-rahmen { --deko: clamp(56px, 6vw, 88px); isolation: isolate; }
.k-deko { z-index: -1; }
/* Mittig im Zwischenraum zum Nachbarbaustein (ragt über den Rand, ohne Höhe) */
.k-deko-rahmen { --deko-gap: clamp(var(--s7), 7vw, var(--s9)); }
.k-deko--unten > .k-deko { top: calc(100% + var(--deko-gap) / 2 - var(--deko) / 2); }
.k-deko--oben > .k-deko { bottom: calc(100% + var(--deko-gap) / 2 - var(--deko) / 2); }
.k-deko--unten > .k-deko--faecher { top: calc(100% + var(--deko-gap) / 2 - var(--deko) * .7); }
.k-deko--oben > .k-deko--faecher { bottom: calc(100% + var(--deko-gap) / 2 - var(--deko) * .7); }
.k-deko--links > .k-deko { left: 0; }
.k-deko--rechts > .k-deko { right: 0; }
.k-deko--mitte > .k-deko { left: calc(50% - var(--deko) / 2); }
.k-deko--rechts > .k-deko--faecher svg { transform: scaleX(-1); }

/* --- Ruhige Bewegungen ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .k-deko--faecher line,
  .k-deko--strahlen line { animation: kybDekoWelle 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
  .k-deko--strahlen line { animation-name: kybDekoStrahl; }

  .k-deko--schalen .k-deko__a { animation: kybDekoHoch 9s ease-in-out infinite; }
  .k-deko--schalen .k-deko__b { animation: kybDekoRunter 9s ease-in-out infinite; }

  .k-deko--ellipsen .k-deko__a { animation: kybDekoRechts 10s ease-in-out infinite; }
  .k-deko--ellipsen .k-deko__b { animation: kybDekoLinks 10s ease-in-out infinite; }

  .k-deko--linse svg { animation: kybDekoPendel 12s ease-in-out infinite; transform-origin: 50% 50%; }
  .k-deko--linse .k-deko__a { animation: kybDekoHoch 12s ease-in-out infinite; }

  .k-deko--kreis .k-deko__a { animation: kybDekoKippen 10s ease-in-out infinite; transform-origin: 50% 54%; transform-box: view-box; }
}
@keyframes kybDekoWelle  { 0%, 22%, 100% { opacity: .14; } 11% { opacity: .38; } }
@keyframes kybDekoStrahl { 0%, 22%, 100% { opacity: .5; } 11% { opacity: 1; } }
@keyframes kybDekoHoch   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes kybDekoRunter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes kybDekoRechts { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes kybDekoLinks  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
@keyframes kybDekoPendel { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes kybDekoKippen { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }