/* A light, tactile extension of the shared Knauz website design. */
.website-motion {
    --motion-shadow: 0 3px 0 #dce8e2, 0 18px 38px -28px #183f4740;
    --motion-radius: 24px;
}
.website-motion main { overflow: clip; }
.website-motion .motion-hero {
    position: relative;
    padding-top: 64px;
    background: radial-gradient(ellipse at 84% 10%, #e0f0e6 0, transparent 46%), linear-gradient(180deg, #f5f9f6, #fff);
}
.website-motion .motion-hero .eyebrow { color: #367f78; }
.website-motion .hero-proof li {
    padding: 7px 12px;
    border: 1px solid #dbe8df;
    background: #ffffffcf;
    border-radius: 999px;
}
.website-motion .hero-proof { gap: 8px; font-size: 12px; }
.website-motion .motion-showcase {
    min-height: 560px;
    border-radius: 30px;
    border: 1px solid #ccded4;
    background: radial-gradient(ellipse at 50% 32%, #fff 0, #eff8f1 39%, #dcece4 76%);
    box-shadow: 0 5px 0 #d5e5db, 0 32px 65px -42px #183f4766;
    perspective: 900px;
}
.website-motion .motion-showcase::before {
    height: 210px;
    background: linear-gradient(180deg, #ffffff72, #ffffff20);
    transform: skewY(-4deg);
    transform-origin: right bottom;
}
.website-motion .motion-showcase .visual-tag {
    top: 25px;
    font-size: 10px;
    letter-spacing: .06em;
}
.website-motion .motion-showcase [data-stage-products] {
    left: 8%;
    right: 8%;
    bottom: 230px;
    height: 242px;
    transform: translateY(var(--stage-parallax, 0px)) rotateY(var(--stage-angle, 0deg));
    transform-style: preserve-3d;
    transform-origin: 50% 68%;
    transition: transform .18s ease-out;
}
.website-motion .motion-showcase [data-stage-products] img {
    filter: drop-shadow(0 20px 14px #183f472b) drop-shadow(0 2px 2px #183f4717);
}
.website-motion .motion-showcase .vp-fox { width: 29%; left: 1%; transform: translateZ(10px); }
.website-motion .motion-showcase .vp-deye { width: 29%; left: 35%; transform: translateZ(35px); }
.website-motion .motion-showcase .vp-sigen { width: 34%; right: 0; transform: translateZ(0); }
.website-motion .motion-showcase .visual-floor { bottom: 215px; height: 24px; opacity: .6; }
.website-motion .motion-showcase .visual-card {
    border: 1px solid #ffffff;
    border-radius: 18px;
    background: #ffffffed;
    box-shadow: 0 5px 0 #d8e7dc, 0 12px 26px -22px #183f4777;
}
.website-motion .motion-showcase .visual-card small { font-size: 11px; }
.website-motion .motion-showcase .visual-card b { font-size: 28px; color: #205d5c; }
.website-motion .stage-control {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 155px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 0 10px;
    color: #40675f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.website-motion .stage-control label { grid-column: 1 / -1; }
.website-motion .stage-control p { grid-column: 1 / -1; margin: 0; font-size: 9px; font-weight: 400; color: #61796f; }
.website-motion .stage-control input[type="range"] {
    min-width: 40px;
    flex: 1;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0;
    accent-color: #367f7b;
    cursor: ew-resize;
}
.website-motion .stage-control input:focus-visible { outline: 3px solid #087f83; outline-offset: 3px; border-radius: 5px; }
.website-motion .stage-control output { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.website-motion .showcase-float {
    position: absolute;
    z-index: 3;
    top: 86px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 47%;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid #ffffff;
    color: #3a7365;
    background: #ffffffdf;
    box-shadow: 0 8px 20px -14px #183f4740;
    font-size: 11px;
    font-weight: 650;
    transform: translateY(calc(var(--stage-parallax, 0px) * -.6)) rotate(-4deg);
    pointer-events: none;
}
.website-motion .showcase-float .ico { width: 17px; height: 17px; flex: none; }
.website-motion .showcase-float + .showcase-float,
.website-motion .showcase-float--second {
    top: 68px;
    left: auto;
    right: 18px;
    transform: translateY(calc(var(--stage-parallax, 0px) * .6)) rotate(4deg);
}
.website-motion .trust { border-top: 1px solid #e3ece5; background: #fbfdfb; }
.website-motion .trust-item .ico { padding: 8px; width: 40px; height: 40px; background: #e8f3ec; border: 1px solid #d4e7d9; border-radius: 12px; }
.website-motion .motion-bento { gap: 20px; align-items: stretch; }
.website-motion .motion-bento .card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--motion-radius);
    border: 1px solid #d5e3da;
    background: linear-gradient(155deg, #fff, #f7fbf8);
    box-shadow: var(--motion-shadow);
}
.website-motion .motion-bento .card-dark,
.website-motion .motion-bento .service-card--oetp { background: linear-gradient(150deg, #e4f1e8, #f5fbf6); color: #183f47; }
.website-motion .motion-bento .card-dark p,
.website-motion .motion-bento .card-dark small { color: #56766b; }
.website-motion .motion-bento .card-dark .card-link { color: #256d64; }
.website-motion .motion-bento .card-dark .card-icon { background: #d2e8db; color: #256d64; }
.website-motion .service-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 145px;
    margin: -3px -5px 21px;
    padding: 14px;
    border: 1px solid #e0ebe3;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 35%, #fff, #e9f3eb);
    isolation: isolate;
}
.website-motion .service-art::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #183f4725, transparent);
    z-index: -1;
}
.website-motion .service-art img { max-width: 72%; height: 118px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 5px #183f471c); }
.website-motion .service-art img + img { max-width: 42%; height: 96px; margin-left: -12px; }
.website-motion .service-art img:first-child:nth-last-child(n + 2) { max-width: 45%; }
.website-motion .motion-bento .card-icon { border: 1px solid #d5e7dc; box-shadow: 0 3px 0 #dcebe2; }
.website-motion [data-motion-card] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-origin: 50% 50%;
    transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}
.website-motion [data-motion-card]:hover { border-color: #9ec4b3; box-shadow: 0 5px 0 #d5e6db, 0 24px 38px -28px #183f4766; }
.website-motion [data-motion-card]:focus-visible { outline: 3px solid #087f83; outline-offset: 5px; }
.website-motion .band {
    position: relative;
    background: linear-gradient(130deg, #dceee4, #edf7ef);
    color: #183f47;
    border-block: 1px solid #cfdfd5;
}
.website-motion .band .eyebrow { color: #367f78; }
.website-motion .band p { color: #466f63; }
.website-motion .band .status-note { background: #ffffff9c; border-color: #c7ddd1; color: #3c655b; }
.website-motion .band .status-note .ico { color: #367f78; }
.website-motion .band .btn-white { background: #205e60; color: #fff; border-color: #205e60; box-shadow: 0 3px 0 #143f4340; }
.website-motion .band .btn-line-light { border-color: #9bbeb0; color: #205d55; background: #ffffff63; }
.website-motion .option { background: #ffffffdb; color: #183f47; border: 1px solid #c9ded2; border-radius: 18px; box-shadow: 0 4px 0 #d2e5d8; }
.website-motion .option:hover { background: #fff; border-color: #98bead; }
.website-motion .option small { color: #5e7a6e; }
.website-motion .option .card-icon { background: #e5f1e8; color: #367f78; }
.website-motion .benefit,
.website-motion .person,
.website-motion .form,
.website-motion .offer-box { border-radius: var(--motion-radius); border: 1px solid #d5e3da; box-shadow: var(--motion-shadow); background: linear-gradient(150deg, #fff, #f8fbf9); }
.website-motion .benefit .card-icon { border: 1px solid #d2e4d8; }
.website-motion .steps { gap: 16px; border: 0; }
.website-motion .step {
    padding: 24px 20px;
    border: 1px solid #d5e3da;
    border-radius: 20px;
    background: linear-gradient(150deg, #fff, #f4f9f5);
    box-shadow: 0 3px 0 #dce8e2;
}
.website-motion .step::before { display: none; }
.website-motion .step-num { display: inline-grid; place-items: center; min-width: 36px; height: 36px; background: #e2efe6; border-radius: 10px; border: 1px solid #d0e1d6; }
.website-motion .person img { border: 4px solid #fff; box-shadow: 0 4px 12px #183f471b; }
.website-motion .map { border-radius: 24px; border: 1px solid #cfdfd5; box-shadow: var(--motion-shadow); }
.website-motion .motion-entered { animation: knauz-enter .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes knauz-enter { from { opacity: .65; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1100px) {
    .website-motion .motion-bento .card { padding: 22px; }
    .website-motion .motion-showcase .visual-tag { flex-direction: column; gap: 5px; align-items: flex-start; }
}
@media (max-width: 900px) {
    .website-motion .motion-showcase { min-height: 540px; max-width: 650px; width: 100%; margin-inline: auto; }
    .website-motion .hero-grid { gap: 34px; }
}
@media (max-width: 640px) {
    .website-motion .motion-hero { padding: 34px 0 56px; }
    .website-motion .motion-showcase { min-height: 490px; border-radius: 24px; }
    .website-motion .motion-showcase .visual-tag { top: 19px; left: 18px; right: 18px; font-size: 9px; }
    .website-motion .motion-showcase [data-stage-products] { bottom: 230px; height: 190px; left: 8%; right: 8%; }
    .website-motion .motion-showcase .visual-floor { bottom: 215px; }
    .website-motion .motion-showcase .visual-card { bottom: 17px; left: 14px; right: 14px; }
    .website-motion .motion-showcase .visual-card div { padding: 13px 12px; }
    .website-motion .motion-showcase .visual-card small { font-size: 10px; }
    .website-motion .motion-showcase .visual-card b { font-size: 23px; }
    .website-motion .stage-control { left: 18px; right: 18px; bottom: 155px; gap: 0 8px; font-size: 10px; }
    .website-motion .showcase-float { top: 94px; font-size: 9px; padding: 8px 9px; left: 12px; max-width: 45%; }
    .website-motion .showcase-float + .showcase-float,
    .website-motion .showcase-float--second { top: 78px; left: auto; right: 12px; }
    .website-motion .hero-proof { font-size: 11px; gap: 6px; }
    .website-motion .hero-proof li { padding: 6px 9px; }
    .website-motion .motion-bento { gap: 16px; }
    .website-motion .service-art { min-height: 160px; }
    .website-motion .service-art img { height: 135px; }
    .website-motion .service-art img + img { height: 115px; }
    .website-motion .steps { border: 0; padding: 0; gap: 14px; }
    .website-motion .step { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .website-motion [data-motion-card],
    .website-motion [data-stage-products],
    .website-motion .showcase-float { transform: none !important; transition: none !important; }
    .website-motion .motion-entered { animation: none !important; }
}
@media print {
    .website-motion .stage-control,
    .website-motion .showcase-float { display: none; }
    .website-motion [data-motion-card],
    .website-motion [data-stage-products] { transform: none !important; box-shadow: none !important; }
    .website-motion .motion-entered { animation: none !important; }
}