/* layering-pricing.css — aus layering.css destilliert: nur auf /pricing/ genutzte Regeln.
   Methode: CDP CSS-Coverage (Playwright startCSSCoverage) + CSSOM-Regelabgleich, 1440 & 360 px, voll gescrollt, Menue geoeffnet.
   Quelle: /assets/layering.css  ·  Datum: 2026-09-22  ·  layering.css selbst bleibt fuer die uebrigen Seiten unveraendert. */
@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: 10px; min-height: 52px; padding: 0px 28px; 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: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-interactive) 100%); color: var(--cta-fg); border: 1px solid var(--cta-line); box-shadow: var(--lyr-e3); }
.lyr-cta:active, .lyr-scene .voice-trigger:active, .lyr-close .lf-cta:active { transform: scale(0.985); }
.lyr-cta:focus-visible, .lyr-scene .voice-trigger:focus-visible, .lyr-close .lf-cta:focus-visible, .lyr-place:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px; box-shadow: var(--shadow-ring); }
@media (hover: hover) and (pointer: fine){.lyr-cta:hover, .lyr-close .lf-cta:hover { transform: translateY(-2px); box-shadow: var(--lyr-e4); }}
@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; }}
/* cc2c3475-Muster (aus layering.css): Grundzustand SICHTBAR, damit oberhalb-der-Falte-Inhalt
   nicht als Leerfläche stehenbleibt, falls .is-in nie kommt (JS/Observer). Reveal nur per Keyframe bei .is-in. */
@keyframes layer-reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.layer-js .layer-reveal > * { opacity: 1; transform: none; }
/* W33 G-Nachlauf W10: Gruppe blendet ein, Kinder nicht einzeln (Zahl der Animationen skaliert nicht mehr mit der Absatzzahl). :where() = Spezifitaet 0: eine eigene Gruppenanimation der Familie (.w8-fly, animation:none!important) gewinnt immer; Startbild (.is-static) und Heros bleiben ohne Animation (R15). */:where(html.layer-js .layer-reveal.is-in:not(.is-static):not(.ds-hero,[class*="hero"])){animation:layer-reveal-in var(--layer-reveal-dur) var(--layer-reveal-ease) both;}
.layer-halo { position: relative; isolation: isolate; }
.layer-halo::before { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -28%; width: min(58%, 640px); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(closest-side,
    color-mix(in oklch, var(--layer-accent) 30%, transparent) 0%,
    color-mix(in oklch, var(--layer-accent) 10%, transparent) 45%,
    transparent 72%); filter: blur(72px); opacity: 0.8; pointer-events: none; }
@media (max-width: 767px){.layer-halo::before { width: 72%; right: -24%; bottom: -18%; filter: blur(48px); }}
@media (min-width: 1024px) and (min-height: 640px){@supports (animation-timeline: view()) {
  .layer-stack__card:not(:last-child) { animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: layerStackBack; animation-timeline: auto; animation-range: entry; }
  .layer-stack__card:nth-child(1) { animation-timeline: --ls-2; }
  .layer-stack__card:nth-child(2) { animation-timeline: --ls-3; }
  .layer-stack__card:nth-child(3) { animation-timeline: --ls-4; }
  .layer-stack__card:nth-child(4) { animation-timeline: --ls-5; }
  .layer-stack__card:nth-child(5) { animation-timeline: --ls-6; }
}}
.chapter.module-card .wrap { max-width: none; padding: 0px; display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-areas: "head" "body" "screen" "sim"; gap: var(--space-3); align-content: start; }
@media (min-width: 768px){.chapter.module-card .wrap { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); grid-template-areas: "head screen" "body screen" "sim sim"; gap: 24px clamp(24px, 4vw, 56px); }.module-card--sim-right .wrap { grid-template-areas: "head screen" "body screen"; }}
@media (prefers-reduced-motion: reduce){html.layer-js .layer-reveal > * { opacity: 1; transform: none; transition: none; }}
.module-wrap { max-width: var(--module-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.module-grid { display: grid; grid-template-columns: minmax(0px, 1fr); gap: var(--space-2); align-items: stretch; }
@media (min-width: 768px){.module-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }}
@media (min-width: 1280px){.module-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--space-3); }}
.ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.module-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in oklch, currentcolor 12%, transparent); margin-bottom: var(--space-1); }
.module-head { position: relative; }
.module-head h1, .module-head h2 { text-wrap: balance; }
.module-head p { max-width: 62ch; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; background: linear-gradient(90deg,  var(--raised, #121214) 40%, transparent) left  / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--raised, #121214) 40%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,0.55), transparent) left  / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.55), transparent) right / 14px 100% no-repeat scroll,
    var(--raised, #121214); }
.table-scroll > table { min-width: 640px; background: transparent; }
html .fx-cursor-dot, html .fx-cursor-ring.text { mix-blend-mode: normal; }
html { background: var(--lyr-l0); }
body { background: transparent; }
.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { background: var(--cta-bg); color: var(--cta-fg); border: 1px solid var(--cta-line-strong); box-shadow: var(--lyr-e3); } /* W28: CTA-Token (E1-A), s. layering.css */
.lyr-cta:not(.lyr-cta--ghost):focus-visible, .lyr-close .lf-cta:focus-visible { box-shadow: var(--cta-ring), var(--lyr-e3); }
@media (hover: hover) and (pointer: fine){.lyr-cta:not(.lyr-cta--ghost):hover, .lyr-close .lf-cta:hover { background: var(--cta-bg-hover); }}
#content .customer-quote .eyebrow, #content .vd-eyebrow, #content .rack-eyebrow, #content .locations-links a, #content .trust-badge-strip a, #content .rack-cta, #callflow-mount .gk, #content .lyr-int__note strong, #content .lyr-ablauf__reach a { color: var(--cta-ghost-fg); }
.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(--cta-bg); 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); }}
@media (max-width: 900px){.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { min-height: 52px; width: 100%; }}
: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); }
@media (min-width: 901px) and (max-height: 800px) and (prefers-reduced-motion: no-preference){.lyr-ablauf__head .lyr-eyebrow { margin-bottom: var(--lyr-s1); }}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference){.locations-links .wrap, .trust-badge-strip .wrap, .trust-badge-strip > div, .customer-quote .wrap, .customer-quote > div { padding-right: var(--lyr-lane-pad); max-width: none; }}
#content #rack-stage .lyr-cta { display: inline-flex; }
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){html.is-kin .lyr-kin { filter: none !important; transform: none !important; }.layer-halo::before { filter: blur(20px); }}
.callflow__chip.active { color: rgb(169, 206, 255); }
@keyframes layerStackBack { 
  100% { transform: scale(0.96); filter: brightness(0.72); }
}