@keyframes reveal-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @keyframes reveal-left {
from {
opacity: 0;
transform: translateX(-24px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @keyframes reveal-right {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @keyframes reveal-scale {
from {
opacity: 0;
transform: scale(0.88);
}
to {
opacity: 1;
transform: scale(1);
}
} .reveal-up {
opacity: 0;
transform: translateY(24px);
transition:
opacity   var(--transition-reveal) ease,
transform var(--transition-reveal) ease;
transition-delay: var(--delay, 0ms);
}
.reveal-left {
opacity: 0;
transform: translateX(-24px);
transition:
opacity   var(--transition-reveal) ease,
transform var(--transition-reveal) ease;
transition-delay: var(--delay, 0ms);
}
.reveal-right {
opacity: 0;
transform: translateX(24px);
transition:
opacity   var(--transition-reveal) ease,
transform var(--transition-reveal) ease;
transition-delay: var(--delay, 0ms);
}
.reveal-scale {
opacity: 0;
transform: scale(0.88);
transition:
opacity   var(--transition-reveal) ease,
transform var(--transition-reveal) ease;
transition-delay: var(--delay, 0ms);
} .reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
opacity: 1;
transform: none;
} .reveal-stagger > *:nth-child(1)  { --delay: 0ms;   }
.reveal-stagger > *:nth-child(2)  { --delay: 80ms;  }
.reveal-stagger > *:nth-child(3)  { --delay: 160ms; }
.reveal-stagger > *:nth-child(4)  { --delay: 240ms; }
.reveal-stagger > *:nth-child(5)  { --delay: 320ms; }
.reveal-stagger > *:nth-child(6)  { --delay: 400ms; }  @keyframes cta-pulse {
0%   { box-shadow: 0 0 0 0 rgba(139, 94, 82, 0.4); }
70%  { box-shadow: 0 0 0 10px rgba(139, 94, 82, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 94, 82, 0); }
} .hero__actions .btn--primary.pulse-once {
animation: cta-pulse 1.2s ease-out 1.5s 1 forwards;
} @keyframes grain-drift {
0%   { background-position: 0% 0%; }
25%  { background-position: 100% 0%; }
50%  { background-position: 100% 100%; }
75%  { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
} @media (prefers-reduced-motion: no-preference) {
.section--alt::before {
animation: grain-drift 12s linear infinite;
background-size: 200px 200px;
}
} @keyframes pill-entrance {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.trust-pill {
animation: pill-entrance 0.4s ease-out 0.6s both;
} @media (prefers-reduced-motion: reduce) {
.trust-pill {
animation: none;
opacity: 1;
transform: none;
}
} @keyframes bar-grow {
from {
transform: scaleY(0);
transform-origin: top;
}
to {
transform: scaleY(1);
transform-origin: top;
}
}
@media (prefers-reduced-motion: no-preference) {
.hero__photo-frame.is-visible::before,
.over__photo-frame.is-visible::before {
animation: bar-grow 0.5s ease-out 0.3s both;
}
} .site-header {
will-change: background-color, box-shadow;
} .dienst-card {
position: relative;
overflow: hidden;
}
.dienst-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--color-cta);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base) ease;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.dienst-card:hover::before,
.dienst-card:focus-within::before {
transform: scaleX(1);
}  @keyframes skeleton-shimmer {
0%   { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--color-bg-alt) 25%,
var(--color-border) 50%,
var(--color-bg-alt) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-md);
} @keyframes page-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
body {
animation: page-fade-in 0.25s ease-out both;
}
} .stap__number {
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stap:hover .stap__number {
transform: scale(1.08);
box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
.stap:hover .stap__number {
transform: none;
}
} @keyframes feedback-slide-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-feedback.is-success,
.form-feedback.is-error {
animation: feedback-slide-in 0.25s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.form-feedback.is-success,
.form-feedback.is-error {
animation: none;
}
} .mobile-nav__link.is-active .mobile-nav__icon {
position: relative;
}
.mobile-nav__link.is-active .mobile-nav__icon::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-cta);
}