/* layering-kontakt.css — aus layering.css destilliert: nur auf /kontakt/ 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(--text-muted); margin: 0 0 var(--lyr-s2); } /* W33 R11 (#21): Eyebrow-Blau (--lyr-accent-ink) gelöscht → Hausrolle --text-muted wie styles.css .ds-eyebrow */
.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;}
@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; }}
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: 10px; 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.is-veiled { opacity: 0; visibility: hidden; transition-delay: 0s, 250ms; }
.lyr-spine__track { position: relative; width: 2px; height: 128px; background: rgba(255, 255, 255, 0.12); border-radius: 1px; 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; }}
#content { --fs-label: 13px; --fs-caption: 13px; }
.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); }}
#lyr-spine .lyr-spine__fill { background: var(--brand-orange); }
#lyr-spine .lyr-spine__num { color: var(--brand-orange); }
#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); }
#voice-demo .vd-who, #voice-demo .vd-vorschau-kopf, #callflow-mount .gc-note, #callflow-mount .callflow__chip, #callflow-mount .callflow__station-meta, #content .trust-badge, #content .lyr-fan__card span { font-size: 13px; }
#content .vd-sub { max-width: 66ch; }
.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); }}
.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(--cta-ghost-fg); font-weight: 500; text-decoration: underline rgba(143, 193, 255, 0.35); text-underline-offset: 6px; transition: text-decoration-color 150ms, color 150ms; }
@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(--brand-blue-ink); }}
.lyr-cta--ghost:focus-visible, .lyr-scene .voice-trigger:focus-visible, #content .rack-cta:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; box-shadow: none; }
#content .rack-cta { font-family: var(--font-sans); font-size: var(--fs-copy); max-width: none; display: inline-flex; align-items: center; }
@media (max-width: 900px){.lyr-cta:not(.lyr-cta--ghost), .lyr-close .lf-cta { min-height: 52px; width: 100%; }}
#content .gk { color: var(--brand-blue-ink); }
#content .gc-method { color: var(--lyr-l0); background: var(--t-emerald); padding: 1px 7px; border-radius: 5px; }
#content a[style*="--accent"] { color: var(--brand-blue-ink) !important; }
#content .gc-note { color: var(--ink); }
: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; }}
@keyframes layerStackBack { 
  100% { transform: scale(0.96); filter: brightness(0.72); }
}