/* deep-anims-katalog.css — aus layering.css getrimmt (W25e, 2026-09-22).
   Nur auf /loesungen/katalog/ genutzte Regeln. layering.js wird hier nicht geladen. */
@import url("/assets/tokens.css?v=20260927a");
::selection { background: var(--lyr-accent); color: rgb(255, 255, 255); }
html { scrollbar-color: rgba(255,255,255,.22) var(--lyr-l0); }
.lyr-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lyr-accent-ink); margin: 0 0 var(--lyr-s2); }
.lyr-cta, .lyr-scene .voice-trigger, .lyr-close .lf-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-height: 52px; padding: 0 var(--space-4); border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-copy); line-height: var(--lh-title); text-decoration: none; cursor: pointer; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1); position: relative; z-index: 6; isolation: isolate; }
.lyr-cta, .lyr-close .lf-cta { background: var(--cta-bg); color: var(--cta-fg); border: 1px solid var(--cta-2-border); box-shadow: var(--lyr-e3); }
.lyr-cta--ghost, .lyr-scene .voice-trigger { background: transparent; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--t-accent); color: var(--t-accent); box-shadow: var(--lyr-e2); }
.lyr-cta:active, .lyr-scene .voice-trigger:active, .lyr-close .lf-cta:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine){.lyr-cta:hover, .lyr-close .lf-cta:hover { transform: translateY(-2px); box-shadow: var(--lyr-e4); }.lyr-cta--ghost:hover, .lyr-scene .voice-trigger:hover { transform: translateY(-2px); background: var(--t-surface-hover); }}
@keyframes lyr-marquee { 
  0% { transform: translate3d(0px, 0px, 0px); }
  100% { transform: translate3d(-50%, 0px, 0px); }
}
@media (max-width: 560px){.lyr-cta, .lyr-scene .voice-trigger, .lyr-close .lf-cta { width: 100%; }}
@media (prefers-reduced-motion: reduce){.lyr-cta, .lyr-place, .lyr-scene .voice-trigger, .lyr-close .lf-cta { transition: none; }}
@keyframes layer-reveal-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
html.layer-js .layer-reveal > * { opacity: 1; transform: none; } /* W29: Grundzustand sichtbar, Animation nur bei .is-in */
@keyframes layerPxBg { 
  0% { transform: translateY(-7%); }
  100% { transform: translateY(7%); }
}
@keyframes layerPxMid { 
  0% { transform: translateY(-3.5%); }
  100% { transform: translateY(3.5%); }
}
@keyframes layerStackBack { 
  100% { transform: scale(0.96); filter: brightness(0.72); }
}
@media (prefers-reduced-motion: reduce){html.layer-js .layer-reveal > * { opacity: 1; transform: none; transition: none; }}
html .fx-cursor-dot, html .fx-cursor-ring.text { mix-blend-mode: normal; }
html { background: var(--lyr-l0); }
body { background: transparent; }
#lyr-spine { position: absolute; left: 14px; top: 50vh; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); transition: opacity 250ms var(--ease-smooth, ease-out), visibility 0s linear 0s; }
.lyr-spine__track { position: relative; width: 2px; height: 128px; background: rgba(255, 255, 255, 0.12); border-radius: var(--r-1); overflow: hidden; }
.lyr-spine__fill { position: absolute; inset: 0px; transform-origin: 50% 0px; transform: scaleY(0); background: var(--lyr-accent-ink); }
@media (max-width: 1180px){#lyr-spine { display: none; }}
.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { background: transparent; color: var(--t-accent); border: 1px solid var(--cta-2-border); box-shadow: var(--lyr-e3), 0 18px 44px -16px rgba(255,178,122,.45); }
.lyr-cta:not(.lyr-cta--ghost):focus-visible, .lyr-close .lf-cta:focus-visible { box-shadow: 0 0 0 3px rgba(255,178,122,.4), var(--lyr-e3); }
@media (hover: hover) and (pointer: fine){.lyr-cta:not(.lyr-cta--ghost):hover, .lyr-close .lf-cta:hover { background: var(--t-surface-hover); }}
.lyr-cta--ghost, .lyr-scene .voice-trigger { border-color: var(--cta-2-border); }
#lyr-spine .lyr-spine__fill { background: var(--brand-orange); }
.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { min-height: 56px; min-width: 200px; padding: 0px 32px; box-shadow: var(--lyr-e3); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms; }
.lyr-cta:not(.lyr-cta--ghost):focus-visible, .lyr-close .lf-cta:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; box-shadow: var(--lyr-e3); }
@media (hover: hover) and (pointer: fine){.lyr-cta:not(.lyr-cta--ghost):hover, .lyr-close .lf-cta:hover { transform: translateY(-1px) scale(1.03); box-shadow: var(--lyr-e4), 0 18px 44px -16px rgba(255,178,122,.45); }}
.lyr-cta--ghost, .lyr-scene .voice-trigger, #content .rack-cta { background: transparent; border: 0px; box-shadow: none; border-radius: 0; min-height: 44px; padding: 0px; min-width: 0px; color: var(--t-accent); font-weight: 500; text-decoration: underline rgba(143, 193, 255, 0.35); text-underline-offset: 6px; transition: text-decoration-color 150ms, color 150ms; }
.lyr-cta--ghost::after, .lyr-scene .voice-trigger::after { content: "→"; margin-left: var(--space-0); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine){.lyr-cta--ghost:hover, .lyr-scene .voice-trigger:hover, #content .rack-cta:hover { transform: none; background: transparent; color: var(--t-ink); text-decoration-color: var(--t-ink); }.lyr-cta--ghost:hover::after, .lyr-scene .voice-trigger:hover::after { transform: translateX(4px); }}
@media (max-width: 900px){.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { min-height: 52px; width: 100%; }.lyr-cta--ghost, .lyr-scene .voice-trigger { width: auto; justify-content: flex-start; }}
:root { --lyr-lane-w: min(272px, 24vw); --lyr-lane-bleed: 0px; --lyr-lane-edge: 24px; --lyr-lane: calc(var(--lyr-lane-w) + var(--lyr-lane-edge)); --lyr-lane-pad: calc(var(--lyr-lane) + var(--lyr-s3)); --lyr-lane-y: max(12vh, 110px); }
html.is-kin .lyr-kin { filter: blur(var(--kb, 0px)); transform: skewY(var(--ks, 0deg)); will-change: filter, transform; }
@media (prefers-reduced-motion: reduce){html.is-kin .lyr-kin { filter: none; transform: none; will-change: auto; }}
@media (max-width: 900px){main *, main ::before, main ::after, #lyr-bg, #lyr-bg::before, #lyr-bg::after, #lyr-travel, .lyr-kin { will-change: auto !important; }html.is-kin .lyr-kin { filter: none !important; transform: none !important; }}