/*
Theme Name: VS Clean
Theme URI: https://www.vs-clean.de
Author: Xpress Webdesign
Author URI: https://xpress-webdesign.de
Description: Individuelles WordPress Theme für VS Clean – Die Gebäudereinigung GmbH.
Version: 1.6.2
Text Domain: vs-clean
*/


/* =========================================================
   ROOT
========================================================= */

:root {

    --vs-primary: #ffd84a;
    --vs-primary-dark: #f3c51f;
    --vs-primary-light: #fff9dc;

    --vs-dark: #0d1b2a;
    --vs-dark-soft: #16283b;

    --vs-white: #ffffff;

    --vs-light: #f5f7f8;
    --vs-light-blue: #fffdf1;

    --vs-gray: #6f7b86;
    --vs-gray-dark: #47535d;
    --vs-gray-light: #dfe5e9;

    --vs-text: #1c2730;

    --vs-whatsapp: #25d366;
    --vs-whatsapp-dark: #1da851;

    --vs-shadow:
        0 20px 50px rgba(13, 27, 42, 0.10);

    --vs-shadow-small:
        0 10px 30px rgba(13, 27, 42, 0.08);

    --vs-radius: 20px;
    --vs-radius-small: 12px;

    --vs-container: 1240px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.65;

    color: var(--vs-text);
    background: var(--vs-white);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body.vs-menu-open,
body.vs-lightbox-open {
    overflow: hidden;
}


img,
video {
    max-width: 100%;
}


img {
    display: block;
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}


/* =========================================================
   TYPOGRAFIE
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--vs-dark);

    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -0.025em;
}


p {
    margin-top: 0;
}


/* =========================================================
   GRUNDGERÜST
========================================================= */

.vs-page {
    width: 100%;
    overflow: hidden;
}


.vs-container {
    width: min(
        calc(100% - 40px),
        var(--vs-container)
    );

    margin-inline: auto;
}


/* =========================================================
   SEKTIONEN
========================================================= */

.vs-section {
    position: relative;

    padding:
        100px
        0;
}


.vs-section--light {
    background: var(--vs-light);
}


.vs-section--blue-light {
    background: var(--vs-light-blue);
}


.vs-section--gray {
    background: #eef1f3;
}


/* =========================================================
   SECTION HEAD
========================================================= */

.vs-section-head {
    width: min(100%, 780px);

    margin:
        0
        auto
        55px;

    text-align: center;
}


.vs-eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--vs-primary);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.vs-section-title {
    margin-bottom: 18px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.35rem
        );

    line-height: 1.08;
}


.vs-section-subtitle {
    margin-bottom: 0;

    color: var(--vs-gray);

    font-size: 1.08rem;
    line-height: 1.7;
}


/* =========================================================
   BUTTONS
========================================================= */

.vs-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding:
        14px
        26px;

    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 800;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
}


.vs-btn:hover {
    transform: translateY(-3px);
}


.vs-btn--primary {
    color: var(--vs-white);
    background: var(--vs-primary);

    box-shadow:
        0 10px 28px rgba(22, 135, 217, 0.28);
}


.vs-btn--primary:hover {
    background: var(--vs-primary-dark);
}


.vs-btn--dark {
    color: var(--vs-white);
    background: var(--vs-dark);
}


.vs-btn--dark:hover {
    background: var(--vs-dark-soft);
}


.vs-btn--white {
    color: var(--vs-dark);
    background: var(--vs-white);
}


.vs-btn--outline {
    border:
        2px
        solid
        rgba(255, 255, 255, 0.58);

    color: var(--vs-white);
    background: transparent;
}


.vs-btn--outline:hover {
    color: var(--vs-dark);
    background: var(--vs-white);
}


.vs-btn--whatsapp {
    color: var(--vs-white);
    background: var(--vs-whatsapp);

    box-shadow:
        0 10px 28px rgba(37, 211, 102, 0.24);
}


.vs-btn--whatsapp:hover {
    background: var(--vs-whatsapp-dark);
}


/* =========================================================
   HEADER
========================================================= */

.vs-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    width: 100%;

    color: var(--vs-white);

    background:
        linear-gradient(
            to bottom,
            rgba(13, 27, 42, 0.72),
            rgba(13, 27, 42, 0)
        );

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}


.vs-header.is-scrolled {
    color: var(--vs-dark);

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 8px 30px
        rgba(13, 27, 42, 0.09);

    backdrop-filter: blur(14px);
}


.vs-header__inner {
    display: flex;

    align-items: center;

    min-height: 82px;

    gap: 28px;
}


.vs-header__brand {
    flex-shrink: 0;
}


.vs-header__logo-link {
    display: flex;
    align-items: center;
}


.vs-header__logo-link .custom-logo {
    width: auto;
    max-width: 190px;
    max-height: 58px;
}


.vs-header__logo-text {
    color: inherit;

    font-size: 1.5rem;
    font-weight: 900;

    letter-spacing: -0.04em;
}


.vs-header__nav {
    display: flex;

    align-items: center;

    gap: 24px;

    margin-left: auto;
}


.vs-header__nav a {
    position: relative;

    color: inherit;

    font-size: 0.9rem;
    font-weight: 700;
}


.vs-header__nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    border-radius: 2px;

    background: var(--vs-primary);

    transition: width 0.2s ease;
}


.vs-header__nav a:hover::after {
    width: 100%;
}


.vs-header__actions {
    display: flex;

    align-items: center;

    gap: 16px;
}


.vs-header__phone {
    display: flex;

    align-items: center;

    gap: 7px;

    color: inherit;

    font-size: 0.88rem;
    font-weight: 800;
}


.vs-header__cta {
    min-height: 46px;

    padding:
        11px
        20px;
}


/* =========================================================
   BURGER
========================================================= */

.vs-menu-toggle {
    display: none;

    flex-direction: column;

    justify-content: center;

    width: 46px;
    height: 46px;

    margin-left: auto;

    gap: 5px;

    border-radius: 12px;

    color: inherit;

    background:
        rgba(255, 255, 255, 0.12);
}


.vs-header.is-scrolled .vs-menu-toggle {
    background: var(--vs-light);
}


.vs-menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    margin-inline: auto;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.vs-menu-toggle.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.vs-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}


.vs-menu-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   OVERLAY MENU
========================================================= */

.vs-overlay-menu {
    position: fixed;

    inset: 0;

    z-index: 1100;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.vs-overlay-menu.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.vs-overlay-menu__backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(6, 15, 24, 0.74);

    backdrop-filter: blur(4px);
}


.vs-overlay-menu__panel {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: min(88%, 430px);

    padding:
        26px
        26px
        40px;

    overflow-y: auto;

    color: var(--vs-dark);

    background: var(--vs-white);

    box-shadow:
        -20px
        0
        60px
        rgba(0, 0, 0, 0.20);

    transform: translateX(100%);

    transition:
        transform 0.32s ease;
}


.vs-overlay-menu.is-open
.vs-overlay-menu__panel {
    transform: translateX(0);
}


.vs-overlay-menu__top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom:
        1px
        solid
        var(--vs-gray-light);
}


.vs-overlay-menu__brand {
    font-size: 1.45rem;
    font-weight: 900;
}


.vs-overlay-menu__close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    color: var(--vs-dark);

    background: var(--vs-light);

    font-size: 1.8rem;
}


.vs-overlay-menu__nav {
    display: flex;

    flex-direction: column;

    padding:
        28px
        0;
}


.vs-overlay-menu__nav a {
    padding:
        13px
        0;

    border-bottom:
        1px
        solid
        rgba(13, 27, 42, 0.08);

    color: var(--vs-dark);

    font-size: 1.15rem;
    font-weight: 800;
}


.vs-overlay-menu__contact {
    display: grid;

    gap: 12px;

    padding-bottom: 26px;
}


.vs-overlay-menu__contact-link {
    display: flex;

    flex-direction: column;

    padding: 15px;

    border-radius: 12px;

    background: var(--vs-light);
}


.vs-overlay-menu__contact-link span {
    margin-bottom: 3px;

    color: var(--vs-gray);

    font-size: 0.75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.vs-overlay-menu__actions {
    display: grid;

    gap: 12px;
}


/* =========================================================
   VIDEO HERO
========================================================= */

.vs-video-hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    color: var(--vs-white);

    background: var(--vs-dark);
}


.vs-video-hero__video {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.vs-video-hero__video--mobile {
    display: none;
}


.vs-video-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(5, 15, 25, 0.58);
}


.vs-video-hero__gradient {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(8, 20, 32, 0.92) 0%,
            rgba(8, 20, 32, 0.70) 44%,
            rgba(8, 20, 32, 0.24) 78%,
            rgba(8, 20, 32, 0.06) 100%
        );
}


.vs-video-hero__inner {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    min-height: 100svh;

    padding-top: 115px;
    padding-bottom: 100px;
}


.vs-video-hero__content {
    width: min(100%, 800px);
}


.vs-eyebrow--hero {
    margin-bottom: 20px;

    color: var(--vs-white);

    font-size: 0.82rem;

    opacity: 0.9;
}


.vs-video-hero__title {
    margin-bottom: 26px;

    color: var(--vs-white);

    font-size:
        clamp(
            3rem,
            6vw,
            5.7rem
        );

    line-height: 0.99;

    letter-spacing: -0.055em;
}


.vs-video-hero__title span {
    display: block;

    margin-top: 20px;

    color: var(--vs-primary);

    font-size:
        clamp(
            1.5rem,
            2.8vw,
            2.7rem
        );

    line-height: 1.1;
}


.vs-video-hero__text {
    width: min(100%, 690px);

    margin-bottom: 34px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.18rem
        );

    line-height: 1.7;
}


.vs-video-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 30px;
}


.vs-video-hero__micro-trust {
    display: flex;

    flex-wrap: wrap;

    gap:
        9px
        20px;
}


.vs-video-hero__micro-trust span {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.84rem;
    font-weight: 650;
}


.vs-video-hero__scroll {
    position: absolute;

    left: 50%;
    bottom: 26px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transform: translateX(-50%);
}


.vs-video-hero__scroll-arrow {
    font-size: 1.3rem;

    animation:
        vsScrollArrow
        1.45s
        ease-in-out
        infinite;
}


@keyframes vsScrollArrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }

}


/* =========================================================
   HERO ENTRANCE ANIMATIONEN
========================================================= */

[data-vs-hero-left],
[data-vs-hero-right],
[data-vs-hero-up] {
    opacity: 0;

    will-change:
        transform,
        opacity;
}


[data-vs-hero-left] {
    transform:
        translateX(-120px);
}


[data-vs-hero-right] {
    transform:
        translateX(120px);
}


[data-vs-hero-up] {
    transform:
        translateY(70px);
}


body.vs-hero-ready
[data-vs-hero-left],
body.vs-hero-ready
[data-vs-hero-right],
body.vs-hero-ready
[data-vs-hero-up] {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform
        0.95s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity
        0.85s
        ease;
}


body.vs-hero-ready
[data-vs-hero-delay="1"] {
    transition-delay: 0.12s;
}


body.vs-hero-ready
[data-vs-hero-delay="2"] {
    transition-delay: 0.25s;
}


body.vs-hero-ready
[data-vs-hero-delay="3"] {
    transition-delay: 0.38s;
}


body.vs-hero-ready
[data-vs-hero-delay="4"] {
    transition-delay: 0.50s;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

[data-vs-reveal],
[data-vs-reveal-item] {

    opacity: 0;

    transform:
        translateY(75px);

    will-change:
        transform,
        opacity;

    transition:
        transform
        0.85s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity
        0.75s
        ease;
}


[data-vs-reveal].is-visible,
[data-vs-reveal-item].is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   STAGGER
========================================================= */

[data-vs-stagger]
[data-vs-reveal-item]:nth-child(1) {
    transition-delay: 0.00s;
}


[data-vs-stagger]
[data-vs-reveal-item]:nth-child(2) {
    transition-delay: 0.10s;
}


[data-vs-stagger]
[data-vs-reveal-item]:nth-child(3) {
    transition-delay: 0.20s;
}


[data-vs-stagger]
[data-vs-reveal-item]:nth-child(4) {
    transition-delay: 0.30s;
}


[data-vs-stagger]
[data-vs-reveal-item]:nth-child(5) {
    transition-delay: 0.40s;
}


[data-vs-stagger]
[data-vs-reveal-item]:nth-child(6) {
    transition-delay: 0.50s;
}


/* =========================================================
   TRUST BAR
========================================================= */

.vs-trustbar {
    position: relative;

    z-index: 20;

    border-bottom:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    background: var(--vs-white);

    box-shadow:
        0 15px 45px
        rgba(13, 27, 42, 0.05);
}


.vs-trustbar__grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


.vs-trustbar__item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 108px;

    padding:
        20px
        24px;

    border-right:
        1px
        solid
        rgba(13, 27, 42, 0.07);
}


.vs-trustbar__item:first-child {
    border-left:
        1px
        solid
        rgba(13, 27, 42, 0.07);
}


.vs-trustbar__icon {
    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: var(--vs-white);

    background: var(--vs-primary);

    font-weight: 900;
}


.vs-trustbar__item strong {
    display: block;

    margin-bottom: 3px;

    color: var(--vs-dark);

    font-size: 0.92rem;
}


.vs-trustbar__item span {
    display: block;

    color: var(--vs-gray);

    font-size: 0.78rem;
}


/* =========================================================
   LEISTUNGEN
========================================================= */

.vs-services-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 24px;
}


.vs-service-card {
    position: relative;

    padding: 32px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.vs-service-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--vs-shadow);
}


.vs-service-card__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    border-radius: 16px;

    background: var(--vs-primary-light);

    font-size: 1.55rem;
}


.vs-service-card h3 {
    margin-bottom: 12px;

    font-size: 1.35rem;
}


.vs-service-card p {
    margin-bottom: 0;

    color: var(--vs-gray);
}


/* =========================================================
   WEITERE LEISTUNGEN DESKTOP
========================================================= */

.vs-more-services {
    margin-top: 42px;

    padding: 34px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    border-radius: var(--vs-radius);

    background: var(--vs-white);
}


.vs-more-services h3 {
    margin-bottom: 20px;

    text-align: center;
}


.vs-more-services__list {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;
}


.vs-chip {
    display: inline-flex;

    align-items: center;

    padding:
        9px
        14px;

    border:
        1px
        solid
        var(--vs-gray-light);

    border-radius: 999px;

    color: var(--vs-dark);
    background: var(--vs-light);

    font-size: 0.87rem;
    font-weight: 700;
}


/* =========================================================
   MOBILE SERVICE MARQUEE
========================================================= */

.vs-service-marquee {
    display: none;
}


/* =========================================================
   BRANCHEN
========================================================= */

.vs-industry-slider {
    position: relative;
}


.vs-industry-slider__viewport {
    overflow: hidden;
}


.vs-industry-slider__track {
    display: flex;

    gap: 24px;

    transition:
        transform
        0.45s
        cubic-bezier(0.22, 0.61, 0.36, 1);

    will-change: transform;
}


.vs-industry-card {
    flex:
        0
        0
        calc(
            (100% - 48px) / 3
        );

    min-width: 0;
}


.vs-industry-card__image {
    position: relative;

    min-height: 420px;

    overflow: hidden;

    border-radius: var(--vs-radius);

    background: var(--vs-dark);

    box-shadow: var(--vs-shadow-small);
}


.vs-industry-card__image > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.vs-industry-card:hover img {
    transform: scale(1.05);
}


.vs-industry-card__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(7, 18, 29, 0.95) 0%,
            rgba(7, 18, 29, 0.64) 45%,
            rgba(7, 18, 29, 0.07) 100%
        );
}


.vs-industry-card__content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 30px;
}


.vs-industry-card__content h3 {
    margin-bottom: 10px;

    color: var(--vs-white);

    font-size: 1.45rem;
}


.vs-industry-card__content p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size: 0.92rem;
}


.vs-industry-card__placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255, 255, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            #1d3950,
            #0d1b2a
        );
}


.vs-slider-arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    color: var(--vs-dark);
    background: var(--vs-white);

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.16);

    font-size: 2rem;

    transform: translateY(-50%);
}


.vs-slider-arrow--prev {
    left: -26px;
}


.vs-slider-arrow--next {
    right: -26px;
}


.vs-slider-arrow:disabled {
    opacity: 0.28;
    cursor: default;
}


/* =========================================================
   WARUM VS CLEAN
========================================================= */

.vs-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;
}


.vs-feature-box {
    padding: 30px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.06);

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);
}


.vs-feature-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: 20px;

    border-radius: 16px;

    color: var(--vs-primary);
    background: var(--vs-primary-light);

    font-size: 1.4rem;
}


.vs-feature-box h3 {
    margin-bottom: 12px;
}


.vs-feature-box p {
    margin-bottom: 0;

    color: var(--vs-gray);
}


/* =========================================================
   KERNKOMPETENZ
========================================================= */

.vs-core-service__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 70px;
}


.vs-core-service__media {
    min-height: 560px;

    overflow: hidden;

    border-radius: var(--vs-radius);

    background: var(--vs-light);

    box-shadow: var(--vs-shadow);
}


.vs-core-service__media img {
    width: 100%;
    height: 100%;

    min-height: 560px;

    object-fit: cover;
}


.vs-core-service__placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 560px;

    color: var(--vs-gray);

    background:
        linear-gradient(
            135deg,
            var(--vs-primary-light),
            var(--vs-light)
        );
}


.vs-core-service__content > p:not(.vs-eyebrow) {
    margin-bottom: 26px;

    color: var(--vs-gray);

    font-size: 1.05rem;
}


.vs-check-list {
    display: grid;

    gap: 13px;

    margin-bottom: 30px;
}


.vs-check-list span {
    position: relative;

    padding-left: 30px;

    color: var(--vs-dark);

    font-weight: 650;
}


.vs-check-list span::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    color: var(--vs-white);
    background: var(--vs-primary);

    font-size: 0.7rem;
}


/* =========================================================
   ÜBER UNS
========================================================= */

.vs-about-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    align-items: center;

    gap: 70px;
}


.vs-about-content p:not(.vs-eyebrow) {
    color: var(--vs-gray);
}


.vs-about-media {
    min-height: 500px;

    overflow: hidden;

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow);
}


.vs-about-media img {
    width: 100%;
    height: 100%;

    min-height: 500px;

    object-fit: cover;
}


.vs-about-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 500px;

    color: var(--vs-gray);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #e9f2f7
        );
}


/* =========================================================
   GALERIE
========================================================= */

.vs-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.vs-gallery__item {
    overflow: hidden;

    border-radius: var(--vs-radius);

    color: var(--vs-dark);
    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);

    text-align: left;
}


.vs-gallery__image-wrap {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;
}


.vs-gallery__image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.vs-gallery__zoom {
    position: absolute;

    top: 14px;
    right: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: var(--vs-dark);
    background: var(--vs-white);
}


.vs-gallery__caption {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 18px;
}


.vs-gallery__caption span {
    color: var(--vs-gray);

    font-size: 0.82rem;
}


.vs-content-placeholder {
    max-width: 700px;

    margin-inline: auto;

    padding: 45px;

    border:
        1px
        dashed
        rgba(13, 27, 42, 0.2);

    border-radius: var(--vs-radius);

    color: var(--vs-gray);
    background: var(--vs-light);

    text-align: center;
}


.vs-content-placeholder strong {
    display: block;

    margin-bottom: 7px;

    color: var(--vs-dark);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.vs-lightbox {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: flex;

    align-items: center;
    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.vs-lightbox.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.vs-lightbox__backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(4, 10, 16, 0.90);

    backdrop-filter: blur(8px);
}


.vs-lightbox__content {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 40px),
        1100px
    );
}


.vs-lightbox__image-area {
    display: flex;

    align-items: center;
    justify-content: center;
}


.vs-lightbox__image {
    max-width: 100%;
    max-height: 78vh;

    border-radius: 12px;

    object-fit: contain;
}


.vs-lightbox__close {
    position: absolute;

    top: -48px;
    right: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    color: var(--vs-white);

    background:
        rgba(255, 255, 255, 0.12);

    font-size: 1.8rem;
}


.vs-lightbox__arrow {
    position: absolute;

    top: 50%;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    color: var(--vs-dark);
    background: var(--vs-white);

    font-size: 2rem;

    transform: translateY(-50%);
}


.vs-lightbox__arrow--prev {
    left: -65px;
}


.vs-lightbox__arrow--next {
    right: -65px;
}


.vs-lightbox__caption {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-top: 14px;

    color: var(--vs-white);

    text-align: center;
}


/* =========================================================
   REVIEWS
========================================================= */

.vs-review-slider {
    position: relative;
}


.vs-review-slider__viewport {
    overflow: hidden;
}


.vs-review-slider__track {
    display: flex;

    gap: 22px;

    transition:
        transform
        0.45s
        cubic-bezier(0.22, 0.61, 0.36, 1);

    will-change: transform;
}


.vs-review-card {
    flex:
        0
        0
        calc(
            (100% - 44px) / 3
        );

    display: flex;

    flex-direction: column;

    min-height: 330px;

    padding: 30px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.06);

    border-radius: var(--vs-radius);

    color: var(--vs-dark);
    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);
}


.vs-review-card__stars {
    margin-bottom: 18px;

    color: #f2b01e;

    letter-spacing: 0.06em;
}


.vs-review-card__text {
    flex: 1;

    color: var(--vs-gray-dark);
}


.vs-review-card__person {
    display: flex;

    flex-direction: column;
}


.vs-review-card__person span {
    color: var(--vs-gray);

    font-size: 0.82rem;
}


.vs-review-slider__arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    color: var(--vs-dark);
    background: var(--vs-white);

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.14);

    font-size: 2rem;

    transform: translateY(-50%);
}


.vs-review-slider__arrow--prev {
    left: -25px;
}


.vs-review-slider__arrow--next {
    right: -25px;
}


/* =========================================================
   BUNDESWEIT
========================================================= */

.vs-national-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 70px;
}


.vs-national-map__visual {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 500px;

    padding: 40px;

    border-radius: var(--vs-radius);

    color: var(--vs-white);

    background:
        radial-gradient(
            circle at 50% 30%,
            #24547a 0%,
            #15324b 40%,
            var(--vs-dark) 100%
        );

    box-shadow: var(--vs-shadow);

    text-align: center;
}


.vs-national-map__flag {
    margin-bottom: 24px;

    font-size: 6rem;
}


.vs-national-map__visual strong {
    margin-bottom: 8px;

    color: var(--vs-white);

    font-size: 2rem;
}


.vs-national-map__visual span {
    color:
        rgba(255, 255, 255, 0.67);
}


.vs-national-content > p:not(.vs-eyebrow) {
    margin-bottom: 28px;

    color: var(--vs-gray);

    font-size: 1.05rem;
}


.vs-national-highlights {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 30px;
}


.vs-national-highlights > div {
    padding: 18px;

    border-radius: var(--vs-radius-small);

    background: var(--vs-light);
}


.vs-national-highlights strong {
    display: block;

    margin-bottom: 5px;
}


.vs-national-highlights span {
    color: var(--vs-gray);

    font-size: 0.8rem;
}


/* =========================================================
   ABLAUF
========================================================= */

.vs-steps {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.vs-step {
    padding: 32px;

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);
}


.vs-step__number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 22px;

    border-radius: 50%;

    color: var(--vs-white);
    background: var(--vs-primary);

    font-weight: 900;
}


.vs-step p {
    margin-bottom: 0;

    color: var(--vs-gray);
}


/* =========================================================
   KONTAKT
========================================================= */

.vs-section--contact {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            var(--vs-light-blue)
        );
}


.vs-contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 30px;
}


.vs-contact-box,
.vs-form-box {
    padding: 38px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow);
}


.vs-contact-box h3,
.vs-form-box h3 {
    margin-bottom: 25px;

    font-size: 1.4rem;
}


.vs-contact-item {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding:
        17px
        0;

    border-bottom:
        1px
        solid
        rgba(13, 27, 42, 0.08);
}


.vs-contact-item span {
    color: var(--vs-gray);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.vs-contact-item strong {
    color: var(--vs-dark);
}


.vs-contact-box .vs-btn {
    margin-top: 28px;
}


.vs-form-box > p {
    margin-bottom: 25px;

    color: var(--vs-gray);
}


.vs-form-placeholder {
    padding: 30px;

    border:
        1px
        dashed
        var(--vs-gray-light);

    border-radius: var(--vs-radius-small);

    background: var(--vs-light);

    text-align: center;
}


/* =========================================================
   FORMINATOR
========================================================= */

.vs-form-box .forminator-ui.forminator-custom-form {
    margin: 0 !important;
}


.vs-form-box .forminator-label {
    color: var(--vs-dark) !important;

    font-size: 0.85rem !important;
    font-weight: 700 !important;
}


.vs-form-box .forminator-input,
.vs-form-box .forminator-textarea {
    border:
        1px
        solid
        var(--vs-gray-light) !important;

    border-radius: 10px !important;

    background: var(--vs-white) !important;
}


.vs-form-box .forminator-button-submit {
    min-height: 52px !important;

    padding:
        13px
        26px !important;

    border-radius: 999px !important;

    color: var(--vs-white) !important;

    background: var(--vs-primary) !important;

    font-weight: 800 !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.vs-final-cta-section {
    padding-top: 0;
}


.vs-final-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding:
        60px
        65px;

    border-radius:
        calc(
            var(--vs-radius) + 8px
        );

    color: var(--vs-white);

    background:
        linear-gradient(
            135deg,
            var(--vs-dark),
            #173c59
        );

    box-shadow: var(--vs-shadow);
}


.vs-final-cta__content {
    max-width: 760px;
}


.vs-final-cta h2 {
    margin-bottom: 16px;

    color: var(--vs-white);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );
}


.vs-final-cta p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.72);
}


.vs-final-cta__actions {
    display: flex;

    flex-direction: column;

    flex-shrink: 0;

    gap: 10px;
}

/* =========================================================
   FOOTER
========================================================= */

.vs-footer {
    position: relative;

    padding-top: 78px;

    color: rgba(255, 255, 255, 0.72);

    background: var(--vs-dark);
}


.vs-footer__grid {
    display: grid;

    grid-template-columns:
        1.35fr
        0.8fr
        1fr
        1.2fr;

    gap: 55px;

    padding-bottom: 65px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.vs-footer__brand {
    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;
}


.vs-footer__brand .custom-logo {
    width: auto;
    max-width: 190px;
    max-height: 58px;
}


.vs-footer__brand-text {
    color: var(--vs-white);

    font-size: 2rem;
    font-weight: 900;

    letter-spacing: -0.05em;
}


.vs-footer__description {
    max-width: 390px;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.95rem;
    line-height: 1.75;
}


.vs-footer__trust {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.vs-footer__trust span {
    display: inline-flex;

    align-items: center;

    padding:
        7px
        11px;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.10);

    border-radius: 999px;

    color: rgba(255, 255, 255, 0.76);

    background:
        rgba(255, 255, 255, 0.05);

    font-size: 0.76rem;
    font-weight: 700;
}


/* =========================================================
   FOOTER TITEL
========================================================= */

.vs-footer__title {
    margin-bottom: 22px;

    color: var(--vs-white);

    font-size: 1rem;
    font-weight: 800;

    letter-spacing: 0;
}


/* =========================================================
   FOOTER NAVIGATION
========================================================= */

.vs-footer__nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.vs-footer__nav a {
    position: relative;

    display: inline-block;

    color: rgba(255, 255, 255, 0.63);

    font-size: 0.9rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.vs-footer__nav a:hover {
    color: var(--vs-white);

    transform: translateX(4px);
}


/* =========================================================
   FOOTER KONTAKT
========================================================= */

.vs-footer__contact-item {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding:
        0
        0
        14px;

    margin-bottom: 14px;

    border-bottom:
        1px
        solid
        rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.88rem;
}


.vs-footer__contact-item:last-child {
    margin-bottom: 0;
}


.vs-footer__contact-label {
    color: rgba(255, 255, 255, 0.38);

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.vs-footer__contact-item strong {
    color: var(--vs-white);

    font-size: 0.9rem;
    line-height: 1.5;
}


.vs-footer__contact-item a {
    color: rgba(255, 255, 255, 0.78);

    transition: color 0.2s ease;
}


.vs-footer__contact-item a:hover {
    color: var(--vs-primary);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.vs-footer__bottom {
    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(0, 0, 0, 0.12);
}


.vs-footer__bottom-inner {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 24px;

    min-height: 78px;
}


.vs-footer__copyright p {
    margin: 0;

    color: rgba(255, 255, 255, 0.44);

    font-size: 0.78rem;
}


.vs-footer__legal {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;
}


.vs-footer__legal a {
    color: rgba(255, 255, 255, 0.52);

    font-size: 0.78rem;

    transition: color 0.2s ease;
}


.vs-footer__legal a:hover {
    color: var(--vs-white);
}


.vs-footer__credit {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.75rem;
}


.vs-footer__credit a {
    color: rgba(255, 255, 255, 0.70);

    font-weight: 700;

    transition: color 0.2s ease;
}


.vs-footer__credit a:hover {
    color: var(--vs-primary);
}


/* =========================================================
   FOOTER TABLET
========================================================= */

@media (max-width: 1024px) {

    .vs-footer__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            45px
            50px;
    }


    .vs-footer__bottom-inner {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            22px
            0;

        text-align: center;
    }


    .vs-footer__legal,
    .vs-footer__credit {
        justify-content: center;
    }

}


/* =========================================================
   FOOTER MOBILE
========================================================= */

@media (max-width: 767px) {

    .vs-footer {
        padding-top: 55px;
    }


    .vs-footer__grid {
        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 48px;
    }


    .vs-footer__col {
        width: 100%;
    }


    .vs-footer__brand-text {
        font-size: 1.75rem;
    }


    .vs-footer__description {
        max-width: 100%;

        font-size: 0.92rem;
    }


    .vs-footer__trust {
        gap: 7px;
    }


    .vs-footer__title {
        margin-bottom: 18px;

        font-size: 1.05rem;
    }


    .vs-footer__nav {
        gap: 0;
    }


    .vs-footer__nav a {
        display: block;

        width: 100%;

        padding:
            11px
            0;

        border-bottom:
            1px
            solid
            rgba(255, 255, 255, 0.07);

        color: rgba(255, 255, 255, 0.67);

        font-size: 0.92rem;
    }


    .vs-footer__nav a:hover {
        transform: none;
    }


    .vs-footer__contact-item {
        padding-bottom: 13px;

        margin-bottom: 13px;
    }


    .vs-footer__contact-item strong,
    .vs-footer__contact-item a,
    .vs-footer__contact-item div {
        overflow-wrap: anywhere;
    }


    .vs-footer__bottom-inner {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding:
            24px
            0
            30px;

        text-align: left;
    }


    .vs-footer__legal {
        justify-content: flex-start;

        gap: 16px;
    }


    .vs-footer__credit {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

}
/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.vs-whatsapp-float {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    color: var(--vs-white);
    background: var(--vs-whatsapp);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.22);

    font-size: 1.45rem;
}


/* =========================================================
   SCROLL TOP
========================================================= */

.vs-scroll-top {
    position: fixed;

    right: 27px;
    bottom: 96px;

    z-index: 890;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    color: var(--vs-dark);
    background: var(--vs-white);

    box-shadow:
        0 10px 28px
        rgba(13, 27, 42, 0.16);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}


.vs-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .vs-section {
        padding:
            80px
            0;
    }


    .vs-services-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vs-feature-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vs-industry-card {
        flex:
            0
            0
            calc(
                (100% - 24px) / 2
            );
    }


    .vs-review-card {
        flex:
            0
            0
            calc(
                (100% - 22px) / 2
            );
    }


    .vs-steps {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vs-gallery {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vs-trustbar__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 900px) {

    .vs-header__inner {
        min-height: 70px;
    }


    .vs-header__nav,
    .vs-header__actions {
        display: none;
    }


    .vs-menu-toggle {
        display: flex;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .vs-container {
        width:
            min(
                calc(100% - 28px),
                var(--vs-container)
            );
    }


    .vs-section {
        padding:
            64px
            0;
    }


    .vs-section-head {
        margin-bottom: 38px;

        text-align: left;
    }


    .vs-section-title {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.55rem
            );
    }


    /* HERO */

    .vs-video-hero {
        min-height: 92svh;
    }


    .vs-video-hero__video--desktop {
        display: none;
    }


    .vs-video-hero__video--mobile {
        display: block;
    }


    .vs-video-hero__gradient {
        background:
            linear-gradient(
                180deg,
                rgba(4, 13, 21, 0.22) 0%,
                rgba(4, 13, 21, 0.55) 42%,
                rgba(4, 13, 21, 0.94) 100%
            );
    }


    .vs-video-hero__inner {
        align-items: flex-end;

        min-height: 92svh;

        padding-top: 110px;
        padding-bottom: 80px;
    }


    .vs-video-hero__title {
        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            );
    }


    .vs-video-hero__title span {
        margin-top: 15px;

        font-size:
            clamp(
                1.25rem,
                6vw,
                1.8rem
            );
    }


    .vs-video-hero__actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .vs-video-hero__micro-trust {
        display: grid;

        gap: 7px;
    }


    .vs-video-hero__scroll {
        display: none;
    }


    /* HERO ANIMATION MOBILE ETWAS KOMPAKTER */

    [data-vs-hero-left] {
        transform:
            translateX(-80px);
    }


    [data-vs-hero-right] {
        transform:
            translateX(80px);
    }


    [data-vs-hero-up] {
        transform:
            translateY(55px);
    }


    /* SCROLL REVEAL */

    [data-vs-reveal],
    [data-vs-reveal-item] {
        transform:
            translateY(55px);
    }


    /* TRUST */

    .vs-trustbar__grid {
        grid-template-columns: 1fr;
    }


    .vs-trustbar__item,
    .vs-trustbar__item:first-child {
        min-height: auto;

        padding:
            17px
            4px;

        border-left: 0;
        border-right: 0;

        border-bottom:
            1px
            solid
            rgba(13, 27, 42, 0.07);
    }


    /* LEISTUNGEN */

    .vs-services-grid {
        grid-template-columns: 1fr;
    }


    /* DESKTOP WEITERE LEISTUNGEN AUS */

    .vs-more-services--desktop {
        display: none;
    }


    /* =====================================================
       MOBILE SERVICE MARQUEE
    ====================================================== */

    .vs-service-marquee {
        position: relative;

        display: block;

        margin-top: 42px;

        margin-left: -14px;
        margin-right: -14px;

        padding:
            32px
            0
            28px;

        overflow: hidden;

        border:
            1px
            solid
            rgba(13, 27, 42, 0.07);

        border-radius: var(--vs-radius);

        background: var(--vs-white);

        box-shadow: var(--vs-shadow-small);
    }


    .vs-service-marquee::before,
    .vs-service-marquee::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        z-index: 5;

        width: 48px;

        pointer-events: none;
    }


    .vs-service-marquee::before {

        left: 0;

        background:
            linear-gradient(
                90deg,
                #ffffff 12%,
                rgba(255,255,255,0)
            );
    }


    .vs-service-marquee::after {

        right: 0;

        background:
            linear-gradient(
                270deg,
                #ffffff 12%,
                rgba(255,255,255,0)
            );
    }


    .vs-service-marquee__head {
        padding:
            0
            24px
            22px;

        text-align: left;
    }


    .vs-service-marquee__head .vs-eyebrow {
        margin-bottom: 7px;
    }


    .vs-service-marquee__head h3 {
        margin-bottom: 6px;

        font-size: 1.55rem;
    }


    .vs-service-marquee__head p {
        margin-bottom: 0;

        color: var(--vs-gray);

        font-size: 0.9rem;
    }


    .vs-service-marquee__viewport {
        overflow: hidden;

        padding:
            5px
            0;
    }


    .vs-service-marquee__track {
        display: flex;

        width: max-content;

        gap: 10px;

        padding-right: 10px;

        will-change: transform;
    }


    .vs-service-marquee__track--left {

        animation:
            vsMarqueeLeft
            26s
            linear
            infinite;
    }


    .vs-service-marquee__track--right {

        animation:
            vsMarqueeRight
            30s
            linear
            infinite;
    }


    .vs-service-marquee__chip {
        display: inline-flex;

        align-items: center;

        flex-shrink: 0;

        gap: 7px;

        padding:
            10px
            14px;

        border:
            1px
            solid
            var(--vs-gray-light);

        border-radius: 999px;

        color: var(--vs-dark);

        background: #f7f9fa;

        font-size: 0.88rem;
        font-weight: 750;

        white-space: nowrap;
    }


    .vs-service-marquee__chip strong {
        color: var(--vs-primary);

        font-size: 0.85rem;
    }


    @keyframes vsMarqueeLeft {

        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }

    }


    @keyframes vsMarqueeRight {

        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(0);
        }

    }


    /* BRANCHEN */

    .vs-industry-card {
        flex:
            0
            0
            88%;
    }


    .vs-industry-card__image {
        min-height: 390px;
    }


    .vs-slider-arrow {
        display: none;
    }


    .vs-industry-slider__viewport {
        overflow: visible;
    }


    /* WARUM */

    .vs-feature-grid {
        grid-template-columns: 1fr;
    }


    /* CORE */

    .vs-core-service__layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vs-core-service__media,
    .vs-core-service__media img,
    .vs-core-service__placeholder {
        min-height: 390px;
    }


    /* ÜBER */

    .vs-about-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vs-about-media,
    .vs-about-media img,
    .vs-about-placeholder {
        min-height: 390px;
    }


    /* GALERIE */

    .vs-gallery {
        grid-template-columns: 1fr;
    }


    /* REVIEWS */

    .vs-review-card {
        flex:
            0
            0
            88%;
    }


    .vs-review-slider__arrow {
        display: none;
    }


    .vs-review-slider__viewport {
        overflow: visible;
    }


    /* BUNDESWEIT */

    .vs-national-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vs-national-map__visual {
        min-height: 380px;
    }


    .vs-national-highlights {
        grid-template-columns: 1fr;
    }


    /* ABLAUF */

    .vs-steps {
        grid-template-columns: 1fr;
    }


    /* KONTAKT */

    .vs-contact-layout {
        grid-template-columns: 1fr;
    }


    .vs-contact-box,
    .vs-form-box {
        padding: 26px;
    }


    .vs-contact-item strong {
        overflow-wrap: anywhere;
    }


    /* FINAL CTA */

    .vs-final-cta {
        display: block;

        padding:
            42px
            28px;
    }


    .vs-final-cta__actions {
        margin-top: 28px;
    }


    .vs-btn {
        width: 100%;
    }


    /* FLOAT */

    .vs-whatsapp-float {
        right: 16px;
        bottom: 16px;

        width: 54px;
        height: 54px;
    }


    .vs-scroll-top {
        right: 20px;
        bottom: 82px;

        width: 42px;
        height: 42px;
    }

}


/* =========================================================
   KLEINE MOBILE
========================================================= */

@media (max-width: 480px) {

    .vs-overlay-menu__panel {
        width: 92%;

        padding:
            22px
            20px
            32px;
    }


    .vs-service-marquee {
        margin-left: -8px;
        margin-right: -8px;
    }


    .vs-industry-card,
    .vs-review-card {
        flex-basis: 92%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    [data-vs-hero-left],
    [data-vs-hero-right],
    [data-vs-hero-up],
    [data-vs-reveal],
    [data-vs-reveal-item] {

        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    .vs-service-marquee__track {
        animation: none !important;
    }


    .vs-video-hero__scroll-arrow {
        animation: none !important;
    }

}
/* =========================================================
   INDEX / BLOG / FALLBACK
========================================================= */

.vs-index-page {
    min-height: 70vh;
    padding-top: 82px;
    background: var(--vs-white);
}


.vs-index-header {
    position: relative;

    padding:
        90px
        0
        55px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--vs-light-blue) 0%,
            var(--vs-white) 100%
        );
}


.vs-index-header__inner {
    width: min(100%, 820px);
}


.vs-index-header .vs-eyebrow {
    margin-bottom: 12px;
}


.vs-index-title {
    margin-bottom: 16px;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4rem
        );

    line-height: 1.05;
}


.vs-index-description {
    max-width: 720px;

    margin-bottom: 0;

    color: var(--vs-gray);

    font-size: 1.05rem;
    line-height: 1.7;
}


/* =========================================================
   POST BEREICH
========================================================= */

.vs-post-section {
    padding:
        80px
        0
        100px;
}


.vs-post-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}


/* =========================================================
   POST CARD
========================================================= */

.vs-post-card {
    position: relative;

    overflow: hidden;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    border-radius: var(--vs-radius);

    background: var(--vs-white);

    box-shadow: var(--vs-shadow-small);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.vs-post-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(22, 135, 217, 0.18);

    box-shadow: var(--vs-shadow);
}


/* =========================================================
   POST IMAGE
========================================================= */

.vs-post-card__image {
    position: relative;

    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--vs-primary-light),
            var(--vs-light)
        );
}


.vs-post-card__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(13, 27, 42, 0) 50%,
            rgba(13, 27, 42, 0.12) 100%
        );

    pointer-events: none;
}


.vs-post-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.55s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.vs-post-card:hover
.vs-post-card__image img {
    transform: scale(1.055);
}


/* =========================================================
   POST CONTENT
========================================================= */

.vs-post-card__body {
    padding: 28px;
}


.vs-post-card__meta {
    margin-bottom: 10px;

    color: var(--vs-primary);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.vs-post-card__title {
    margin-bottom: 14px;

    font-size: 1.45rem;
    line-height: 1.2;
}


.vs-post-card__title a {
    color: var(--vs-dark);

    transition:
        color 0.2s ease;
}


.vs-post-card__title a:hover {
    color: var(--vs-primary);
}


.vs-post-card__excerpt {
    margin-bottom: 22px;

    color: var(--vs-gray);

    line-height: 1.7;
}


.vs-post-card__excerpt p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   WEITERLESEN LINK
========================================================= */

.vs-post-card__link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--vs-primary);

    font-size: 0.9rem;
    font-weight: 800;
}


.vs-post-card__link span {
    display: inline-block;

    transition:
        transform 0.22s ease;
}


.vs-post-card__link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   INDEX SCROLL ANIMATIONEN
========================================================= */

.vs-index-header[data-vs-reveal],
.vs-post-card[data-vs-reveal-item] {
    opacity: 0;

    transform: translateY(70px);

    will-change:
        transform,
        opacity;

    transition:
        transform
        0.85s
        cubic-bezier(0.16, 1, 0.3, 1),

        opacity
        0.75s
        ease;
}


.vs-index-header[data-vs-reveal].is-visible,
.vs-post-card[data-vs-reveal-item].is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   PAGINATION
========================================================= */

.vs-pagination {
    margin-top: 60px;
}


.vs-pagination .nav-links {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 8px;
}


.vs-pagination .page-numbers {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 46px;
    min-height: 46px;

    padding:
        8px
        14px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.06);

    border-radius: 12px;

    color: var(--vs-dark);
    background: var(--vs-light);

    font-size: 0.9rem;
    font-weight: 750;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.vs-pagination .page-numbers:hover {
    color: var(--vs-white);

    border-color: var(--vs-primary);
    background: var(--vs-primary);

    transform: translateY(-2px);
}


.vs-pagination .page-numbers.current {
    color: var(--vs-white);

    border-color: var(--vs-primary);
    background: var(--vs-primary);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.vs-empty-state {
    width: min(100%, 700px);

    margin-inline: auto;

    padding:
        90px
        30px;

    border:
        1px
        solid
        rgba(13, 27, 42, 0.06);

    border-radius: var(--vs-radius);

    background: var(--vs-light);

    text-align: center;
}


.vs-empty-state h2 {
    margin-bottom: 14px;
}


.vs-empty-state p {
    margin-bottom: 24px;

    color: var(--vs-gray);
}


/* =========================================================
   RESPONSIVE INDEX
========================================================= */

@media (max-width: 1024px) {

    .vs-post-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 767px) {

    .vs-index-page {
        padding-top: 70px;
    }


    .vs-index-header {
        padding:
            60px
            0
            38px;
    }


    .vs-index-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    .vs-index-description {
        font-size: 0.98rem;
    }


    .vs-post-section {
        padding:
            50px
            0
            70px;
    }


    .vs-post-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .vs-post-card__body {
        padding: 24px;
    }


    .vs-post-card__title {
        font-size: 1.3rem;
    }


    .vs-empty-state {
        padding:
            50px
            22px;
    }


    .vs-pagination {
        margin-top: 42px;
    }


    .vs-pagination .page-numbers {
        min-width: 42px;
        min-height: 42px;

        padding:
            7px
            12px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vs-index-header[data-vs-reveal],
    .vs-post-card[data-vs-reveal-item] {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}


/* =========================================================
   KONTAKT-ICONS / GESCHÄFTSFÜHRUNG – UPDATE 1.2
========================================================= */

/* Buttons mit Icon sauber ausrichten */
.vs-btn > span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    line-height: 1;
}


/* =========================================================
   MOBILE OVERLAY – KONTAKT ALS ICON-KACHELN
========================================================= */

.vs-overlay-menu__contact-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 26px;
}

.vs-overlay-menu__icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 104px;
    padding: 16px 12px;
    border: 1px solid rgba(13, 27, 42, 0.06);
    border-radius: 18px;
    color: var(--vs-dark);
    background: var(--vs-light);
    text-align: center;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.vs-overlay-menu__icon-link:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 135, 217, 0.18);
    background: var(--vs-white);
    box-shadow: var(--vs-shadow-small);
}

.vs-overlay-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--vs-primary);
    background: var(--vs-white);
    box-shadow: 0 8px 20px rgba(13, 27, 42, 0.08);
    font-size: 1.3rem;
    line-height: 1;
}

.vs-overlay-menu__icon-label {
    color: var(--vs-dark);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   ÜBER UNS – MOTTO / GESCHÄFTSFÜHRER
========================================================= */

.vs-about-media {
    position: relative;
}

.vs-about-slogan-box {
    position: relative;
    margin: 27px 0 30px;
    padding: 24px 26px 24px 30px;
    overflow: hidden;
    border: 1px solid rgba(22, 135, 217, 0.13);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(22, 135, 217, 0.10),
            rgba(255, 255, 255, 0.88)
        );
}

.vs-about-slogan-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    background: var(--vs-primary);
}

.vs-about-slogan-box__label {
    display: block;
    margin-bottom: 8px;
    color: var(--vs-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.vs-about-slogan-box__text {
    display: block;
    color: var(--vs-dark);
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.5;
}

.vs-about-slogan-box__author {
    display: block;
    margin-top: 10px;
    color: var(--vs-gray);
    font-size: 0.82rem;
    font-weight: 700;
}

.vs-about-owner-card {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    color: var(--vs-white);
    background: rgba(13, 27, 42, 0.84);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vs-about-owner-card__label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.vs-about-owner-card__quote {
    display: block;
    color: var(--vs-white);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.45;
}

.vs-about-owner-card__name {
    display: block;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 700;
}


/* =========================================================
   KONTAKTBEREICH – ICON-KARTEN
========================================================= */

.vs-contact-icon-list {
    display: grid;
    gap: 13px;
}

.vs-contact-icon-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid rgba(13, 27, 42, 0.07);
    border-radius: 17px;
    color: var(--vs-dark);
    background: var(--vs-light);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.vs-contact-icon-card:not(.vs-contact-icon-card--static):hover {
    transform: translateY(-3px);
    border-color: rgba(22, 135, 217, 0.20);
    background: var(--vs-white);
    box-shadow: var(--vs-shadow-small);
}

.vs-contact-icon-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 15px;
    color: var(--vs-primary);
    background: var(--vs-white);
    box-shadow: 0 7px 20px rgba(13, 27, 42, 0.07);
    font-size: 1.25rem;
    line-height: 1;
}

.vs-contact-icon-card__content {
    min-width: 0;
}

.vs-contact-icon-card__label {
    display: block;
    margin-bottom: 3px;
    color: var(--vs-gray);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vs-contact-icon-card__content strong {
    display: block;
    color: var(--vs-dark);
    font-size: 0.94rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.vs-contact-box .vs-contact-icon-list + .vs-btn {
    margin-top: 24px;
}


/* =========================================================
   FOOTER – ICON-KONTAKT VORBEREITET
========================================================= */

.vs-footer__contact-list {
    display: grid;
    gap: 13px;
}

.vs-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.vs-footer a.vs-footer__contact-row:hover {
    color: var(--vs-white);
    transform: translateX(3px);
}

.vs-footer__contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    color: var(--vs-white);
    background: rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    line-height: 1;
}

.vs-footer__contact-content {
    min-width: 0;
}

.vs-footer__contact-content .vs-footer__contact-label {
    display: block;
    margin-bottom: 3px;
}

.vs-footer__contact-content strong,
.vs-footer__contact-content div {
    display: block;
    color: var(--vs-white);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* =========================================================
   MOBILE – KONTAKT / ÜBER UNS
========================================================= */

@media (max-width: 767px) {

    .vs-overlay-menu__contact-icons {
        gap: 10px;
    }

    .vs-overlay-menu__icon-link {
        min-height: 96px;
        padding: 14px 10px;
        border-radius: 16px;
    }

    .vs-overlay-menu__icon {
        width: 44px;
        height: 44px;
        font-size: 1.18rem;
    }

    .vs-about-slogan-box {
        margin: 23px 0 27px;
        padding: 21px 20px 21px 25px;
    }

    .vs-about-slogan-box__text {
        font-size: 1.02rem;
    }

    .vs-about-owner-card {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 17px 18px;
        border-radius: 15px;
    }

    .vs-about-owner-card__quote {
        font-size: 0.94rem;
    }

    .vs-contact-icon-list {
        gap: 10px;
    }

    .vs-contact-icon-card {
        gap: 13px;
        padding: 15px;
        border-radius: 15px;
    }

    .vs-contact-icon-card__icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
        font-size: 1.15rem;
    }

    .vs-contact-icon-card__content strong {
        font-size: 0.9rem;
    }

}


/* =========================================================
   REDUCED MOTION – NEUE KONTAKT-ELEMENTE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vs-overlay-menu__icon-link,
    .vs-contact-icon-card,
    .vs-footer__contact-row {
        transition: none !important;
    }

}

/* =========================================================
   VS CLEAN – FINAL UPDATE 1.5
   Zentrierung aller Frontpage-Inhalte
   Ausnahmen:
   - Google Rezensionen linksbündig
   - Direkter Kontakt linksbündig
   - Header-Struktur bleibt unverändert
========================================================= */


/* =========================================================
   HEADER
   Struktur NICHT verändern – nur Texte innerhalb zentrieren
========================================================= */

.vs-header__nav a,
.vs-header__phone,
.vs-header__cta {
    text-align: center;
}

.vs-header__logo-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 156px;
    max-height: 68px;
    object-fit: contain;
}

.vs-header.is-scrolled .vs-header__logo-image {
    max-height: 62px;
}


/* =========================================================
   HERO – ALLE TEXTE UND BUTTONS MITTIG
========================================================= */

.vs-video-hero__content {
    width: min(100%, 820px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.vs-video-hero__text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.vs-video-hero__actions,
.vs-video-hero__micro-trust {
    justify-content: center;
}

.vs-video-hero__micro-trust span {
    text-align: center;
}


/* =========================================================
   SECTION HEADS – IMMER MITTIG
========================================================= */

.vs-section-head,
.vs-section-title,
.vs-section-subtitle,
.vs-eyebrow {
    text-align: center;
}


/* =========================================================
   TRUST BAR
   Desktop sauber, Mobile Kreise exakt untereinander
========================================================= */

.vs-trustbar__item {
    text-align: center;
}

.vs-trustbar__item > div:not(.vs-trustbar__icon) {
    text-align: center;
}

.vs-trustbar__item strong,
.vs-trustbar__item span {
    text-align: center;
}

@media (max-width: 767px) {

    .vs-trustbar__grid {
        grid-template-columns: 1fr;
    }

    .vs-trustbar__item,
    .vs-trustbar__item:first-child {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;

        width: min(100%, 620px);
        min-height: 108px;

        margin-left: auto;
        margin-right: auto;

        padding: 18px 20px;

        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(13, 27, 42, 0.07);
    }

    .vs-trustbar__icon {
        grid-column: 1;
        justify-self: center;
        margin: 0;
    }

    .vs-trustbar__item > div:not(.vs-trustbar__icon) {
        grid-column: 2;
        min-width: 0;
        text-align: center;
    }

}


/* =========================================================
   LEISTUNGEN – BILDER + TEXTE MITTIG
========================================================= */

.vs-service-card {
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.vs-service-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dfe8ee;
}

.vs-service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.vs-service-card:hover .vs-service-card__image img {
    transform: scale(1.045);
}

.vs-service-card__image-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    color: var(--vs-gray-dark);

    background:
        linear-gradient(
            135deg,
            #edf3f6,
            #dce9f0
        );

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.vs-service-card__content {
    padding: 28px 30px 31px;
    text-align: center;
}

.vs-service-card__content h3,
.vs-service-card__content p {
    text-align: center;
}


/* =========================================================
   WEITERE LEISTUNGEN – MITTIG
========================================================= */

.vs-more-services,
.vs-more-services h3,
.vs-more-services__list,
.vs-service-marquee,
.vs-service-marquee__head,
.vs-service-marquee__head h3,
.vs-service-marquee__head p {
    text-align: center;
}

.vs-more-services__list {
    justify-content: center;
}


/* =========================================================
   MOBILE SERVICE MARQUEE
========================================================= */

@media (max-width: 767px) {

    .vs-service-marquee__head {
        text-align: center;
    }

}


/* =========================================================
   BRANCHEN – TEXTE MITTIG
========================================================= */

.vs-industry-card__content,
.vs-industry-card__content h3,
.vs-industry-card__content p {
    text-align: center;
}


/* =========================================================
   WARUM VS CLEAN – ICONS UND TEXTE MITTIG
========================================================= */

.vs-feature-box,
.vs-feature-box h3,
.vs-feature-box p {
    text-align: center;
}

.vs-feature-icon {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   KERNKOMPETENZ – ALLES MITTIG
   CHECK-KREISE SAUBER UNTEREINANDER
========================================================= */

.vs-core-service__content,
.vs-core-service__content h2,
.vs-core-service__content > p {
    text-align: center;
}

.vs-core-service__content > .vs-btn {
    margin-left: auto;
    margin-right: auto;
}

.vs-check-list {
    width: min(100%, 610px);

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;

    gap: 13px;
}

.vs-check-list span {
    position: relative;

    display: block;

    width: 100%;
    min-height: 28px;

    padding-left: 48px;
    padding-right: 12px;

    text-align: left;
}

.vs-check-list span::before {
    left: 10px;
    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   ÜBER VS CLEAN – ALLES MITTIG
========================================================= */

.vs-about-content,
.vs-about-content h2,
.vs-about-content > p,
.vs-about-slogan-box,
.vs-about-owner-card,
.vs-about-owner-card__quote,
.vs-about-owner-card__name {
    text-align: center;
}

.vs-about-content > .vs-btn {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   GALERIE – BESCHRIFTUNGEN MITTIG
========================================================= */

.vs-gallery__caption,
.vs-gallery__caption strong,
.vs-gallery__caption span,
.vs-content-placeholder {
    text-align: center;
}


/* =========================================================
   GOOGLE REVIEWS
   ABSICHTLICH LINKS – NICHT MITTIG
========================================================= */

.vs-review-slider__track {
    align-items: flex-start;
}

.vs-review-card {
    position: relative;

    height: 360px;
    min-height: 0 !important;

    text-align: left !important;
}

.vs-review-card,
.vs-review-card__text,
.vs-review-card__person,
.vs-review-card__person strong,
.vs-review-card__person span,
.vs-review-card__details,
.vs-review-card__summary,
.vs-review-card__expanded,
.vs-review-card__google-link {
    text-align: left !important;
}

.vs-review-card__details {
    flex: 1;
}

.vs-review-card__summary {
    display: block;
    cursor: pointer;
    list-style: none;
}

.vs-review-card__summary::-webkit-details-marker {
    display: none;
}

.vs-review-card__summary::marker {
    content: "";
}

.vs-review-card__text--preview {
    display: -webkit-box;

    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;

    overflow: hidden;

    margin-bottom: 0;

    text-overflow: ellipsis;
}

.vs-review-card__more,
.vs-review-card__less {
    display: inline-flex;
    align-items: center;

    margin-top: 12px;

    color: var(--vs-primary);

    font-size: 0.84rem;
    font-weight: 800;

    cursor: pointer;
}

.vs-review-card__less {
    display: none;
}

.vs-review-card__expanded {
    display: none;
    margin-top: 4px;
}

.vs-review-card__expanded .vs-review-card__text {
    display: block;

    margin-bottom: 0;

    overflow: visible;

    -webkit-line-clamp: unset;
}

.vs-review-card__details[open]
.vs-review-card__text--preview {
    display: none;
}

.vs-review-card__details[open]
.vs-review-card__more {
    display: none;
}

.vs-review-card__details[open]
.vs-review-card__less {
    display: inline-flex;
}

.vs-review-card__details[open]
.vs-review-card__expanded {
    display: block;
}

.vs-review-card:has(.vs-review-card__details[open]) {
    height: auto;
    min-height: 360px !important;
}

.vs-review-card__google-link {
    display: inline-block;

    margin-top: 14px;

    color: var(--vs-primary);

    font-size: 0.78rem;
    font-weight: 800;
}


/* =========================================================
   BUNDESWEIT – KARTE + TEXTE MITTIG
========================================================= */

.vs-national-content,
.vs-national-content h2,
.vs-national-content > p,
.vs-national-highlights,
.vs-national-highlights > div,
.vs-national-highlights strong,
.vs-national-highlights span {
    text-align: center;
}

.vs-national-content > .vs-btn {
    margin-left: auto;
    margin-right: auto;
}

.vs-national-map__visual {
    position: relative;

    display: block;

    min-height: 500px;

    padding: 0;

    overflow: hidden;

    border-radius: var(--vs-radius);

    background: var(--vs-light);

    box-shadow: var(--vs-shadow);

    text-align: left;
}

.vs-national-map__iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
    min-height: 500px;

    border: 0;
}

.vs-national-map__badge {
    position: absolute;

    left: 22px;
    bottom: 22px;

    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 2px;

    max-width: calc(100% - 44px);

    padding: 15px 18px;

    border-radius: 15px;

    color: var(--vs-white);

    background: rgba(13, 27, 42, 0.88);

    text-align: center;
}


/* =========================================================
   ABLAUF – NUMMERNKREISE + TEXTE MITTIG
========================================================= */

.vs-step,
.vs-step h3,
.vs-step p {
    text-align: center;
}

.vs-step__number {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   KONTAKT SECTION HEAD MITTIG
========================================================= */

.vs-section--contact > .vs-container > .vs-section-head {
    text-align: center;
}


/* =========================================================
   DIREKTER KONTAKT
   ABSICHTLICH LINKS – WIE VORHER
========================================================= */

.vs-contact-box,
.vs-contact-box h3,
.vs-contact-box > .vs-eyebrow,
.vs-contact-icon-list,
.vs-contact-icon-card,
.vs-contact-icon-card__content,
.vs-contact-icon-card__label,
.vs-contact-icon-card__content strong {
    text-align: left !important;
}

.vs-contact-icon-card {
    justify-content: flex-start !important;
}

.vs-contact-icon-card__icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.vs-contact-box .vs-btn--whatsapp {
    justify-content: center;
}


/* =========================================================
   FORMULAR – INHALTE MITTIG
========================================================= */

.vs-form-box,
.vs-form-box h3,
.vs-form-box > p,
.vs-form-placeholder {
    text-align: center;
}

.vs-form-box .forminator-ui,
.vs-form-box .forminator-label,
.vs-form-box .forminator-description,
.vs-form-box .forminator-error-message {
    text-align: center !important;
}


/* =========================================================
   FINAL CTA – MITTIG
========================================================= */

.vs-final-cta {
    text-align: center;
}

.vs-final-cta__content,
.vs-final-cta__content h2,
.vs-final-cta__content p {
    text-align: center;
}

.vs-final-cta__actions {
    align-items: center;
}


/* =========================================================
   MOBILE OVERLAY – 3 ICONS IN EINER REIHE
========================================================= */

.vs-overlay-menu__contact-icons {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 10px;

    padding:
        2px
        0
        24px;
}

.vs-overlay-menu__icon-link {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 94px;

    padding:
        13px
        6px;

    gap: 8px;

    border-radius: 16px;

    background: var(--vs-light);

    text-align: center;
}

.vs-overlay-menu__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    color: var(--vs-primary);

    background: var(--vs-white);
}

.vs-overlay-menu__icon svg {
    display: block;

    width: 23px;
    height: 23px;
}

.vs-overlay-menu__icon-label {
    text-align: center;
}

.vs-overlay-menu__icon-link--whatsapp
.vs-overlay-menu__icon {
    color: var(--vs-white);
    background: var(--vs-whatsapp);
}


/* =========================================================
   FOOTER – KOMPLETT MITTIG
========================================================= */

.vs-footer,
.vs-footer__grid,
.vs-footer__col,
.vs-footer__title,
.vs-footer__description,
.vs-footer__trust,
.vs-footer__nav,
.vs-footer__bottom,
.vs-footer__bottom-inner,
.vs-footer__copyright,
.vs-footer__legal,
.vs-footer__credit {
    text-align: center;
}

.vs-footer__grid {
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 0.8fr)
        minmax(0, 1fr);

    gap: 50px;
}

.vs-footer__brand {
    display: flex;
    justify-content: center;
}

.vs-footer__description {
    margin-left: auto;
    margin-right: auto;
}

.vs-footer__trust,
.vs-footer__legal,
.vs-footer__credit,
.vs-footer__bottom-inner {
    justify-content: center;
    align-items: center;
}

.vs-footer__nav {
    align-items: center;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .vs-header__inner {
        min-height: 74px;
    }

    .vs-header__logo-image,
    .vs-header.is-scrolled .vs-header__logo-image {
        max-width: 104px;
        max-height: 58px;
    }


    /* Hero */
    .vs-video-hero__content,
    .vs-video-hero__title,
    .vs-video-hero__text,
    .vs-eyebrow--hero {
        text-align: center;
    }

    .vs-video-hero__actions,
    .vs-video-hero__micro-trust {
        justify-content: center;
    }


    /* Leistungen */
    .vs-service-card__image {
        aspect-ratio: 16 / 9;
    }

    .vs-service-card__content {
        padding: 24px 23px 26px;
    }


    /* Warum VS Clean */
    .vs-feature-icon {
        margin-left: auto;
        margin-right: auto;
    }


    /* Kernkompetenz */
    .vs-check-list {
        width: min(100%, 570px);
    }

    .vs-check-list span {
        padding-left: 44px;
        padding-right: 6px;
        text-align: left;
    }

    .vs-check-list span::before {
        left: 7px;
    }


    /* Reviews */
    .vs-review-slider__viewport {
        overflow: hidden;
        margin-right: -14px;
    }

    .vs-review-card {
        flex-basis: 86%;

        height: 330px;
        min-height: 330px !important;

        padding: 25px 23px;
    }

    .vs-review-card:has(.vs-review-card__details[open]) {
        height: auto;
        min-height: 330px !important;
    }


    /* Karte */
    .vs-national-map__visual,
    .vs-national-map__iframe {
        min-height: 390px;
    }


    /* Footer */
    .vs-footer {
        padding-top: 48px;
    }

    .vs-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            34px
            22px;
    }

    .vs-footer__col--brand {
        grid-column: 1 / -1;
    }

    .vs-footer__nav {
        align-items: center;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 420px) {

    .vs-trustbar__item,
    .vs-trustbar__item:first-child {
        grid-template-columns: 46px minmax(0, 1fr);

        padding:
            17px
            8px;
    }

    .vs-trustbar__icon {
        width: 40px;
        height: 40px;
    }

    .vs-check-list span {
        padding-left: 40px;
    }

    .vs-check-list span::before {
        left: 4px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vs-service-card__image img,
    .vs-review-card,
    .vs-overlay-menu__icon-link {
        transition: none !important;
    }

}


/* =========================================================
   INTEGRIERTE ZUSÄTZLICHE CSS (BISHER CUSTOMIZER)
========================================================= */
/* =========================================================
   VIDEO HERO
========================================================= */

.vs-video-hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    color: var(--vs-white);

    background: var(--vs-dark);
}


/* =========================================================
   HERO VIDEO
========================================================= */

.vs-video-hero__video {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.vs-video-hero__video--mobile {
    display: none;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.vs-video-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(5, 15, 25, 0.60);
}


.vs-video-hero__gradient {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(8, 20, 32, 0.86) 0%,
            rgba(8, 20, 32, 0.63) 44%,
            rgba(8, 20, 32, 0.20) 76%,
            rgba(8, 20, 32, 0.08) 100%
        );
}


/* =========================================================
   HERO INNER
========================================================= */

.vs-video-hero__inner {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    min-height: 100svh;

    padding-top: 115px;
    padding-bottom: 100px;
}


.vs-video-hero__content {
    width: min(100%, 790px);
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.vs-eyebrow--hero {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 0.82rem;

    letter-spacing: 0.14em;

    opacity: 0.86;
}


/* =========================================================
   HERO TITLE
========================================================= */

.vs-video-hero__title {
    margin-bottom: 26px;

    color: var(--vs-white);

    font-size:
        clamp(
            3rem,
            6.1vw,
            5.8rem
        );

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.vs-video-hero__title span {
    display: block;

    margin-top: 20px;

    color: var(--vs-primary);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2.8rem
        );

    line-height: 1.1;

    letter-spacing: -0.035em;
}


/* =========================================================
   HERO TEXT
========================================================= */

.vs-video-hero__text {
    width: min(100%, 690px);

    margin-bottom: 34px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height: 1.7;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.vs-video-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 32px;
}


/* =========================================================
   HERO MICRO TRUST
========================================================= */

.vs-video-hero__micro-trust {
    display: flex;

    flex-wrap: wrap;

    gap:
        9px
        20px;
}


.vs-video-hero__micro-trust span {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.84rem;
    font-weight: 650;
}


/* =========================================================
   HERO SCROLL
========================================================= */

.vs-video-hero__scroll {
    position: absolute;

    left: 50%;
    bottom: 26px;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transform: translateX(-50%);
}


.vs-video-hero__scroll-arrow {
    font-size: 1.3rem;

    animation:
        vsHeroScroll
        1.5s
        ease-in-out
        infinite;
}


@keyframes vsHeroScroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* =========================================================
   TRUST BAR
========================================================= */

.vs-trustbar {
    position: relative;

    z-index: 20;

    border-bottom:
        1px
        solid
        rgba(13, 27, 42, 0.07);

    background: var(--vs-white);

    box-shadow:
        0 15px 45px
        rgba(13, 27, 42, 0.05);
}


.vs-trustbar__grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/* =========================================================
   TRUST ITEMS
========================================================= */

.vs-trustbar__item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 108px;

    padding:
        20px
        25px;

    border-right:
        1px
        solid
        rgba(13, 27, 42, 0.07);
}


.vs-trustbar__item:first-child {
    border-left:
        1px
        solid
        rgba(13, 27, 42, 0.07);
}


.vs-trustbar__icon {
    flex:
        0
        0
        auto;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: var(--vs-white);

    background: var(--vs-primary);

    font-size: 0.9rem;
    font-weight: 900;
}


.vs-trustbar__item strong {
    display: block;

    margin-bottom: 3px;

    color: var(--vs-dark);

    font-size: 0.92rem;
}


.vs-trustbar__item span {
    display: block;

    color: var(--vs-gray);

    font-size: 0.78rem;

    line-height: 1.4;
}


/* =========================================================
   HERO TABLET
========================================================= */

@media (max-width: 1024px) {

    .vs-video-hero__content {
        width: min(100%, 700px);
    }


    .vs-trustbar__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vs-trustbar__item {
        border-bottom:
            1px
            solid
            rgba(13, 27, 42, 0.07);
    }


    .vs-trustbar__item:nth-child(2n) {
        border-right:
            1px
            solid
            rgba(13, 27, 42, 0.07);
    }

}


/* =========================================================
   HERO MOBILE
========================================================= */

@media (max-width: 767px) {

    .vs-video-hero {
        min-height: 92svh;
    }


    .vs-video-hero__video--desktop {
        display: none;
    }


    .vs-video-hero__video--mobile {
        display: block;
    }


    .vs-video-hero__overlay {
        background:
            rgba(4, 13, 21, 0.64);
    }


    .vs-video-hero__gradient {
        background:
            linear-gradient(
                180deg,
                rgba(4, 13, 21, 0.30) 0%,
                rgba(4, 13, 21, 0.60) 38%,
                rgba(4, 13, 21, 0.91) 100%
            );
    }


    .vs-video-hero__inner {
        align-items: flex-end;

        min-height: 92svh;

        padding-top: 120px;
        padding-bottom: 95px;
    }


    .vs-video-hero__content {
        width: 100%;
    }


    .vs-video-hero__title {
        font-size:
            clamp(
                2.65rem,
                12vw,
                4rem
            );
    }


    .vs-video-hero__title span {
        margin-top: 16px;

        font-size:
            clamp(
                1.25rem,
                6vw,
                1.8rem
            );
    }


    .vs-video-hero__text {
        margin-bottom: 28px;

        font-size: 1rem;
    }


    .vs-video-hero__actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 25px;
    }


    .vs-video-hero__micro-trust {
        display: grid;

        gap: 7px;
    }


    .vs-video-hero__scroll {
        display: none;
    }


    .vs-trustbar__grid {
        grid-template-columns: 1fr;
    }


    .vs-trustbar__item,
    .vs-trustbar__item:first-child {
        min-height: auto;

        padding:
            18px
            5px;

        border-left: 0;
        border-right: 0;

        border-bottom:
            1px
            solid
            rgba(13, 27, 42, 0.07);
    }


    .vs-trustbar__item:last-child {
        border-bottom: 0;
    }

}

/* =========================================================
   VS CLEAN 1.6.2 – FINAL RESPONSIVE / DEKO KORREKTUREN
   Diese Regeln sind bewusst zuletzt gesetzt und bilden
   die verbindliche Darstellung für die neue Frontpage.
========================================================= */

:root {
    --vs-primary: #ffd84a;
    --vs-primary-dark: #f3c51f;
    --vs-primary-light: #fff9dc;
    --vs-light-blue: #fffdf1;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.vs-page {
    overflow: visible;
}

/* GELBE MARKENFARBE KONSEQUENT */
.vs-btn--primary {
    color: var(--vs-dark) !important;
    background: var(--vs-primary) !important;
    box-shadow: 0 10px 28px rgba(255, 216, 74, .28) !important;
}
.vs-btn--primary:hover {
    color: var(--vs-dark) !important;
    background: var(--vs-primary-dark) !important;
}
.vs-video-hero__title span,
.vs-trustbar__icon,
.vs-step__number {
    background-color: var(--vs-primary);
}
.vs-video-hero__title span { background: none; color: var(--vs-primary) !important; }
.vs-trustbar__icon,
.vs-step__number { color: var(--vs-dark) !important; }
.vs-eyebrow,
.vs-review-card__google-link,
.vs-review-card__more,
.vs-review-card__less {
    color: #deb100 !important;
}
.vs-feature-icon,
.vs-service-card__icon,
.vs-contact-icon-card__icon {
    color: #deb100 !important;
    background: var(--vs-primary-light) !important;
}
.vs-check-list span::before {
    color: var(--vs-dark) !important;
    background: var(--vs-primary) !important;
}
.vs-section--blue-light { background: var(--vs-light-blue) !important; }

/* =========================================================
   HEADER – BESTEHENDE OPTIK BEIBEHALTEN
========================================================= */
.vs-header {
    transition:
        transform .42s cubic-bezier(.16,1,.3,1),
        opacity .32s ease,
        filter .32s ease,
        background .28s ease,
        box-shadow .28s ease !important;
    will-change: transform, opacity, filter;
}
.vs-header.is-hidden {
    transform: translateY(-112%);
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
}
.vs-header:not(.is-hidden) {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}
.vs-header.is-scrolled {
    background: rgba(13, 27, 42, .88) !important;
    box-shadow: 0 9px 30px rgba(0,0,0,.13) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.vs-header__logo-image,
.vs-header.is-scrolled .vs-header__logo-image {
    width: auto !important;
    height: 92px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* =========================================================
   ALLGEMEINE REVEAL-RICHTUNGEN
========================================================= */
[data-vs-reveal],
[data-vs-reveal-item] {
    opacity: 0;
    transition:
        opacity .75s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
[data-vs-reveal="up"],
[data-vs-reveal-item] { transform: translate3d(0, 46px, 0); }
[data-vs-reveal="left"] { transform: translate3d(-64px, 0, 0); }
[data-vs-reveal="right"] { transform: translate3d(64px, 0, 0); }
[data-vs-reveal="scale"] { transform: scale(.94); }
[data-vs-reveal].is-visible,
[data-vs-reveal-item].is-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

/* =========================================================
   SCHWEBENDE DEKO – WIRKLICH ÜBER DER SEKTION
========================================================= */
.vs-section--decorated {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}
.vs-section--decorated > .vs-container {
    position: relative;
    z-index: 2;
}
.vs-floating-deco {
    position: absolute !important;
    z-index: 6 !important;
    display: block !important;
    width: auto;
    max-width: none !important;
    height: auto !important;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    filter: drop-shadow(0 17px 22px rgba(13,27,42,.16));
    transform-origin: center;
    animation: vsCleanDecoFloat 5.5s ease-in-out infinite;
}
@keyframes vsCleanDecoFloat {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* Desktop: über dem oberen Sektionsrand, nicht darunter */
.vs-floating-deco--bucket {
    width: 205px !important;
    top: -105px !important;
    right: clamp(26px, 5vw, 90px) !important;
    transform: rotate(7deg);
}
.vs-floating-deco--brush {
    width: 205px !important;
    top: -88px !important;
    left: clamp(22px, 4vw, 75px) !important;
    transform: rotate(-11deg);
}
.vs-floating-deco--vacuum {
    width: 200px !important;
    top: -92px !important;
    right: clamp(20px, 4vw, 72px) !important;
    transform: rotate(3deg);
}
.vs-floating-deco--sponge {
    width: 150px !important;
    top: -62px !important;
    right: clamp(24px, 5vw, 90px) !important;
    transform: rotate(12deg);
}
.vs-floating-deco--sign {
    width: 165px !important;
    top: -86px !important;
    right: clamp(24px, 4vw, 72px) !important;
    transform: rotate(6deg);
}

/* =========================================================
   ÜBER UNS – OHNE PERSONENBILD
========================================================= */
.vs-about-company { overflow: visible; }
.vs-about-company__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 48px;
    align-items: center;
}
.vs-about-company__content { max-width: 650px; }
.vs-about-company__content p {
    color: var(--vs-gray);
    font-size: 1.02rem;
    line-height: 1.75;
}
.vs-about-company__values {
    display: grid;
    gap: 16px;
}
.vs-about-value {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
    border: 1px solid rgba(13,27,42,.07);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(13,27,42,.065);
}
.vs-about-value__number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--vs-dark);
    background: var(--vs-primary);
    font-size: .78rem;
    font-weight: 900;
}
.vs-about-value h3 { margin: 1px 0 6px; font-size: 1.02rem; }
.vs-about-value p { margin: 0; color: var(--vs-gray); line-height: 1.65; }

/* =========================================================
   MARKEN-ZWISCHENBILD – MANN MIT SCHWAMM
========================================================= */
.vs-brand-break {
    position: relative;
    overflow: hidden;
    padding: 58px 0 0;
    background: linear-gradient(135deg,#fff 0%,#fffdf4 58%,#fff5c6 100%);
}
.vs-brand-break__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
    gap: 26px;
    align-items: end;
    min-height: 430px;
}
.vs-brand-break__content {
    align-self: center;
    max-width: 650px;
    padding-bottom: 58px;
}
.vs-brand-break__content h2 {
    margin-bottom: 18px;
    font-size: clamp(2.35rem,4.2vw,4.4rem);
    line-height: 1.02;
}
.vs-brand-break__content > p:not(.vs-eyebrow) {
    max-width: 620px;
    margin-bottom: 26px;
    color: var(--vs-gray);
    font-size: 1.05rem;
    line-height: 1.72;
}
.vs-brand-break__visual {
    position: relative;
    align-self: stretch;
    min-height: 405px;
}
.vs-brand-break__visual img {
    position: absolute;
    right: -24px;
    bottom: -10px;
    width: min(510px, 45vw) !important;
    max-width: none !important;
    height: auto !important;
    filter: drop-shadow(0 24px 28px rgba(13,27,42,.15));
}

/* =========================================================
   WARUM VS CLEAN – VIER CARDS SAUBER
========================================================= */
.vs-feature-grid--why {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}
.vs-feature-grid--why .vs-feature-box { height: 100%; }

/* =========================================================
   FOOTER MANN
========================================================= */
.vs-footer {
    position: relative;
    overflow: visible !important;
}
.vs-footer__deco-man {
    position: absolute !important;
    z-index: 4;
    top: -150px;
    right: max(24px, calc((100vw - 1240px) / 2));
    width: 220px;
    pointer-events: none;
}
.vs-footer__deco-man img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.22));
}
.vs-footer > .vs-container,
.vs-footer__bottom { position: relative; z-index: 3; }

/* =========================================================
   MOBILE / TABLET – KORREKTUR AUS SCREENSHOTS
========================================================= */
@media (max-width: 1100px) {
    .vs-floating-deco--bucket { width: 165px !important; top: -82px !important; right: 24px !important; }
    .vs-floating-deco--brush { width: 165px !important; top: -72px !important; left: 18px !important; }
    .vs-floating-deco--vacuum { width: 165px !important; top: -76px !important; right: 18px !important; }
    .vs-floating-deco--sponge { width: 125px !important; top: -56px !important; right: 20px !important; }
    .vs-floating-deco--sign { width: 135px !important; top: -76px !important; right: 20px !important; }
}

@media (max-width: 767px) {
    html, body { overflow-x: clip !important; }
    .vs-page { overflow: visible !important; }

    .vs-container {
        width: min(calc(100% - 28px), var(--vs-container));
    }

    .vs-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .vs-section-head {
        width: 100%;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .vs-section-title {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(2rem, 9.2vw, 2.72rem) !important;
        line-height: 1.06 !important;
        overflow-wrap: anywhere;
    }

    .vs-section-subtitle {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
        line-height: 1.65;
    }

    /* Header */
    .vs-header__inner { min-height: 78px !important; }
    .vs-header__logo-image,
    .vs-header.is-scrolled .vs-header__logo-image {
        height: 68px !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Deko muss über der Kante hängen */
    .vs-section--decorated {
        overflow: visible !important;
    }
    .vs-floating-deco {
        z-index: 8 !important;
        animation-duration: 6s;
    }
    .vs-floating-deco--bucket {
        width: 124px !important;
        top: -62px !important;
        right: -10px !important;
        transform: rotate(8deg);
    }
    .vs-floating-deco--brush {
        width: 126px !important;
        top: -58px !important;
        left: -14px !important;
        transform: rotate(-10deg);
    }
    .vs-floating-deco--vacuum {
        width: 132px !important;
        top: -62px !important;
        right: -12px !important;
        transform: rotate(2deg);
    }
    .vs-floating-deco--sponge {
        width: 96px !important;
        top: -45px !important;
        right: 8px !important;
        transform: rotate(12deg);
    }
    .vs-floating-deco--sign {
        width: 108px !important;
        top: -69px !important;
        right: 10px !important;
        transform: rotate(5deg);
    }

    /* Leistungen: genug Luft, damit der Eimer nicht Überschrift verdeckt */
    #leistungen { padding-top: 76px !important; }
    #branchen { padding-top: 78px !important; }
    #warum-wir { padding-top: 74px !important; }
    #kontakt { padding-top: 82px !important; }
    .vs-core-service { padding-top: 80px !important; }

    /* Weitere Leistungen – sauberer Lauf mit weichen Kanten */
    .vs-service-marquee {
        margin: 34px 0 0 !important;
        border-radius: 24px;
        overflow: hidden !important;
    }
    .vs-service-marquee__head {
        padding: 0 20px 22px !important;
        text-align: center !important;
    }
    .vs-service-marquee__viewport {
        overflow: hidden;
        padding: 6px 0;
        -webkit-mask-image: linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
        mask-image: linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
    }
    .vs-service-marquee__track { gap: 12px; }
    .vs-service-marquee__chip {
        padding: 10px 15px;
        font-size: .84rem;
    }

    /* Über uns */
    .vs-about-company__layout { grid-template-columns: 1fr; gap: 28px; }
    .vs-about-company__content { max-width: none; text-align: center; }
    .vs-about-company__content p { font-size: .97rem; }
    .vs-about-company__values { gap: 14px; }
    .vs-about-value {
        grid-template-columns: 48px minmax(0,1fr);
        gap: 14px;
        padding: 20px 18px;
        border-radius: 22px;
        text-align: left;
    }

    /* Mann mit Schwamm – kein riesiges Loch mehr */
    .vs-brand-break {
        padding: 50px 0 0 !important;
    }
    .vs-brand-break__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 0;
    }
    .vs-brand-break__content {
        width: 100%;
        max-width: none;
        padding-bottom: 8px;
        text-align: center;
    }
    .vs-brand-break__content h2 {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(2.35rem, 11.2vw, 3.15rem) !important;
        line-height: 1.02;
    }
    .vs-brand-break__content > p:not(.vs-eyebrow) {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        font-size: .98rem;
    }
    .vs-brand-break__visual {
        width: 100%;
        min-height: 245px !important;
        margin-top: 2px;
    }
    .vs-brand-break__visual img {
        left: 50% !important;
        right: auto !important;
        bottom: -18px !important;
        width: min(330px, 88vw) !important;
        transform: translateX(-50%);
    }

    /* Kernkompetenz */
    .vs-core-service__layout { gap: 28px !important; }

    /* Warum VS Clean */
    .vs-feature-grid--why {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Reviews: zweite Karte nur leicht anteasern */
    .vs-review-slider__viewport {
        margin-right: 0 !important;
        overflow: hidden;
        padding-right: 22px;
    }
    .vs-review-slider__track { gap: 14px !important; }
    .vs-review-card {
        flex: 0 0 calc(100% - 32px) !important;
        min-width: calc(100% - 32px) !important;
        height: auto !important;
        min-height: 330px !important;
        padding: 25px 22px !important;
    }

    /* Kontakt */
    #kontakt .vs-section-title {
        max-width: 355px;
        font-size: clamp(2.1rem, 10vw, 2.7rem) !important;
    }
    .vs-contact-layout { gap: 22px !important; }
    .vs-contact-box,
    .vs-form-box { border-radius: 24px; }

    /* Final CTA */
    .vs-final-cta-section {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }
    .vs-final-cta {
        border-radius: 24px;
        padding: 40px 22px 34px !important;
    }
    .vs-final-cta h2,
    .vs-final-cta__content h2 {
        font-size: clamp(2rem, 9.5vw, 2.7rem) !important;
        line-height: 1.08 !important;
    }

    /* Footer – zwei Spalten, aber lesbar */
    .vs-footer {
        padding-top: 74px !important;
        overflow: visible !important;
    }
    .vs-footer__deco-man {
        display: block !important;
        width: 126px !important;
        top: -86px !important;
        right: 10px !important;
        z-index: 5 !important;
    }
    .vs-footer__grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 34px 18px !important;
    }
    .vs-footer__col--brand { grid-column: 1 / -1; }
    .vs-footer__title { font-size: 1.08rem !important; }
    .vs-footer__nav { gap: 0 !important; }
    .vs-footer__nav a {
        display: block;
        width: 100%;
        padding: 12px 2px !important;
        font-size: .88rem !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .vs-footer__description {
        max-width: 570px;
        font-size: .94rem !important;
        line-height: 1.7;
    }
    .vs-footer__trust {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    .vs-footer__trust span { font-size: .78rem !important; }
    .vs-footer__bottom-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .vs-footer__copyright,
    .vs-footer__copyright p {
        width: 100%;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center !important;
        font-size: .78rem !important;
        line-height: 1.5;
    }
    .vs-footer__legal,
    .vs-footer__credit {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 10px 18px !important;
        font-size: .8rem !important;
    }

    /* Floating Buttons kleiner und außerhalb wichtiger Texte */
    .vs-whatsapp-float {
        right: 14px !important;
        bottom: 18px !important;
        width: 58px !important;
        height: 58px !important;
    }
    .vs-whatsapp-float svg { width: 27px; height: 27px; }
    .vs-scroll-top {
        right: 14px !important;
        bottom: 88px !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 1.18rem !important;
    }
}

@media (max-width: 420px) {
    .vs-section-title { font-size: clamp(1.95rem, 9vw, 2.45rem) !important; }
    .vs-floating-deco--bucket { width: 110px !important; top: -56px !important; right: -10px !important; }
    .vs-floating-deco--brush { width: 112px !important; top: -54px !important; left: -15px !important; }
    .vs-floating-deco--vacuum { width: 118px !important; top: -58px !important; right: -14px !important; }
    .vs-floating-deco--sponge { width: 88px !important; top: -42px !important; right: 6px !important; }
    .vs-floating-deco--sign { width: 98px !important; top: -64px !important; right: 8px !important; }
    .vs-brand-break__visual { min-height: 225px !important; }
    .vs-brand-break__visual img { width: min(300px, 86vw) !important; }
    .vs-footer__deco-man { width: 112px !important; top: -76px !important; }
    .vs-footer__nav a { font-size: .82rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-floating-deco { animation: none !important; }
    [data-vs-reveal], [data-vs-reveal-item] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   VS CLEAN – FINAL LAYOUT REFINEMENT 2026-09-18
   Neue Verteilung der Deko-Assets + zentrierte Inhalte
========================================================= */

/* ---------------------------------------------------------
   BASIS / SICHERHEIT
--------------------------------------------------------- */
html,
body {
    overflow-x: clip !important;
}

body,
.vs-page {
    width: 100%;
    max-width: 100%;
}

/* Die alte 4-Punkte-Leiste unter dem Hero ist endgültig raus. */
.vs-trustbar {
    display: none !important;
}

/* ---------------------------------------------------------
   ALLE INHALTE AUF DER STARTSEITE ZENTRIEREN
--------------------------------------------------------- */
.vs-page .vs-section-head,
.vs-page .vs-section-title,
.vs-page .vs-section-subtitle,
.vs-page .vs-eyebrow,
.vs-page .vs-service-card__content,
.vs-page .vs-industry-card__content,
.vs-page .vs-about-company__content,
.vs-page .vs-about-value,
.vs-page .vs-brand-break__content,
.vs-page .vs-core-service__content,
.vs-page .vs-feature-box,
.vs-page .vs-gallery__head,
.vs-page .vs-review-section__head,
.vs-page .vs-national-content,
.vs-page .vs-process-section .vs-section-head,
.vs-page .vs-step,
.vs-page .vs-contact-box,
.vs-page .vs-form-box,
.vs-page .vs-final-cta__content {
    text-align: center !important;
}

.vs-page .vs-section-head,
.vs-page .vs-section-subtitle,
.vs-page .vs-about-company__content,
.vs-page .vs-core-service__content,
.vs-page .vs-brand-break__content,
.vs-page .vs-national-content,
.vs-page .vs-final-cta__content {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-page .vs-section-subtitle,
.vs-page .vs-core-service__content > p,
.vs-page .vs-about-company__content > p,
.vs-page .vs-brand-break__content > p,
.vs-page .vs-contact-box > p,
.vs-page .vs-form-box > p,
.vs-page .vs-final-cta__content > p {
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-page .vs-service-card__content p,
.vs-page .vs-industry-card__content p,
.vs-page .vs-feature-box p,
.vs-page .vs-step p,
.vs-page .vs-about-value p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Listen ebenfalls sauber mittig, ohne unruhig zu wirken. */
.vs-page .vs-check-list {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.vs-page .vs-check-list span {
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.vs-page .vs-video-hero__content,
.vs-page .vs-video-hero__text,
.vs-page .vs-video-hero__title,
.vs-page .vs-video-hero__actions,
.vs-page .vs-video-hero__micro-trust {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-page .vs-video-hero__actions,
.vs-page .vs-video-hero__micro-trust {
    justify-content: center !important;
}

/* ---------------------------------------------------------
   SEKTIONEN / ÜBERSTÄNDE
--------------------------------------------------------- */
.vs-section--decorated,
.vs-video-hero,
.vs-brand-break,
.vs-footer {
    position: relative !important;
    overflow: visible !important;
}

.vs-section--decorated > .vs-container,
.vs-video-hero > .vs-container,
.vs-brand-break > .vs-container,
.vs-footer > .vs-container {
    position: relative;
    z-index: 3;
}

/* ---------------------------------------------------------
   FLOATING ASSETS – GEMEINSAME BASIS
--------------------------------------------------------- */
.vs-floating-deco {
    position: absolute !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    pointer-events: none !important;
    user-select: none !important;
    object-fit: contain !important;
    z-index: 12 !important;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 24px 28px rgba(13, 27, 42, .18));
    animation: vsDecoFloatLarge 5.8s ease-in-out infinite;
}

@keyframes vsDecoFloatLarge {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

/* ---------------------------------------------------------
   HERO – EIMER MIT BÜRSTE
   Er sitzt jetzt im Hero und ragt sichtbar in den Header.
--------------------------------------------------------- */
.vs-video-hero .vs-floating-deco--bucket {
    width: clamp(230px, 19vw, 360px) !important;
    top: -74px !important;
    right: clamp(25px, 7vw, 120px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1205 !important;
    transform: rotate(7deg) !important;
}

/* Header bleibt über Video/Overlay, Eimer darf aber sichtbar hineinragen. */
.vs-header {
    z-index: 1200 !important;
}

/* ---------------------------------------------------------
   LEISTUNGEN – STAUBSAUGER
--------------------------------------------------------- */
#leistungen {
    padding-top: 105px !important;
}

#leistungen .vs-floating-deco--vacuum {
    width: clamp(235px, 18vw, 340px) !important;
    top: -105px !important;
    right: clamp(28px, 6vw, 100px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(3deg) !important;
}

/* ---------------------------------------------------------
   BRANCHEN – BÜRSTE
--------------------------------------------------------- */
#branchen {
    padding-top: 105px !important;
}

#branchen .vs-floating-deco--brush {
    width: clamp(230px, 17vw, 330px) !important;
    top: -90px !important;
    left: clamp(22px, 5vw, 88px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-12deg) !important;
}

/* ---------------------------------------------------------
   WARUM VS CLEAN – SCHWAMM
--------------------------------------------------------- */
#warum-wir {
    padding-top: 105px !important;
}

#warum-wir .vs-floating-deco--sponge {
    width: clamp(175px, 13vw, 245px) !important;
    top: -72px !important;
    right: clamp(30px, 7vw, 115px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(12deg) !important;
}

/* ---------------------------------------------------------
   KONTAKT – AUFSTELLER
--------------------------------------------------------- */
#kontakt {
    padding-top: 120px !important;
}

#kontakt .vs-floating-deco--sign {
    width: clamp(190px, 14vw, 265px) !important;
    top: -98px !important;
    left: clamp(25px, 7vw, 120px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-5deg) !important;
}

/* ---------------------------------------------------------
   MARKENBEREICH – MANN MIT SCHWAMM
--------------------------------------------------------- */
.vs-brand-break {
    padding: 82px 0 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf0 62%, #fff5bb 100%) !important;
}

.vs-brand-break__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr) !important;
    align-items: end !important;
    gap: 35px !important;
    min-height: 500px !important;
}

.vs-brand-break__content {
    align-self: center !important;
    padding-bottom: 75px !important;
    max-width: 700px !important;
}

.vs-brand-break__content h2 {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-brand-break__visual {
    position: relative !important;
    min-height: 470px !important;
    align-self: end !important;
}

.vs-brand-break__visual img {
    position: absolute !important;
    width: min(620px, 48vw) !important;
    max-width: none !important;
    height: auto !important;
    right: -35px !important;
    bottom: -2px !important;
    left: auto !important;
    filter: drop-shadow(0 30px 35px rgba(13, 27, 42, .16)) !important;
}

/* ---------------------------------------------------------
   ÜBER VS CLEAN / WERTE
--------------------------------------------------------- */
.vs-about-company__layout {
    align-items: center !important;
}

.vs-about-company__content {
    max-width: 760px !important;
}

.vs-about-company__content .vs-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-about-company__values {
    text-align: center !important;
}

.vs-about-value {
    justify-content: center !important;
    align-items: center !important;
}

.vs-about-value > div {
    text-align: center !important;
}

/* ---------------------------------------------------------
   KERNKOMPETENZ
--------------------------------------------------------- */
.vs-core-service__content .vs-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-core-service__media {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------
   FEATURE / ABLAUF / KONTAKT
--------------------------------------------------------- */
.vs-feature-box,
.vs-step,
.vs-contact-icon-card {
    text-align: center !important;
}

.vs-feature-icon,
.vs-step__number,
.vs-contact-icon-card__icon {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-contact-icon-card,
.vs-contact-icon-list {
    justify-content: center !important;
}

.vs-contact-icon-card__content,
.vs-contact-icon-card__content * {
    text-align: center !important;
}

/* ---------------------------------------------------------
   FOOTER – MANN GROSS UND IN VORHERIGE SEKTION HINEIN
--------------------------------------------------------- */
.vs-footer {
    overflow: visible !important;
    padding-top: 150px !important;
}

.vs-footer__deco-man {
    position: absolute !important;
    width: clamp(310px, 26vw, 470px) !important;
    max-width: none !important;
    top: -295px !important;
    right: clamp(20px, 6vw, 110px) !important;
    left: auto !important;
    z-index: 20 !important;
    pointer-events: none !important;
}

.vs-footer__deco-man img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .22)) !important;
}

.vs-footer__grid,
.vs-footer__bottom-inner,
.vs-footer__col,
.vs-footer__description,
.vs-footer__title,
.vs-footer__nav,
.vs-footer__trust,
.vs-footer__copyright,
.vs-footer__legal,
.vs-footer__credit {
    text-align: center !important;
}

.vs-footer__brand,
.vs-footer__trust,
.vs-footer__legal,
.vs-footer__credit {
    justify-content: center !important;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
    .vs-video-hero .vs-floating-deco--bucket {
        width: 245px !important;
        top: -62px !important;
        right: 30px !important;
    }

    #leistungen .vs-floating-deco--vacuum {
        width: 235px !important;
        top: -95px !important;
        right: 25px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 220px !important;
        top: -82px !important;
        left: 20px !important;
    }

    #warum-wir .vs-floating-deco--sponge {
        width: 165px !important;
        top: -66px !important;
        right: 25px !important;
    }

    #kontakt .vs-floating-deco--sign {
        width: 180px !important;
        top: -90px !important;
        left: 24px !important;
    }

    .vs-brand-break__inner {
        grid-template-columns: 1fr .9fr !important;
        min-height: 450px !important;
    }

    .vs-brand-break__visual {
        min-height: 430px !important;
    }

    .vs-brand-break__visual img {
        width: 470px !important;
        right: -55px !important;
    }

    .vs-footer {
        padding-top: 130px !important;
    }

    .vs-footer__deco-man {
        width: 320px !important;
        top: -225px !important;
        right: 10px !important;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media (max-width: 767px) {
    .vs-page .vs-section,
    .vs-brand-break {
        overflow: visible !important;
    }

    /* allgemeine Typografie kompakter, damit nichts aus dem Viewport läuft */
    .vs-page .vs-section-title,
    .vs-page .vs-brand-break__content h2,
    .vs-page .vs-final-cta h2 {
        max-width: 92vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-wrap: anywhere;
    }

    .vs-page .vs-section-title {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        line-height: 1.08 !important;
    }

    .vs-page .vs-section-subtitle,
    .vs-page .vs-about-company__content p,
    .vs-page .vs-core-service__content > p,
    .vs-page .vs-brand-break__content > p,
    .vs-page .vs-step p,
    .vs-page .vs-feature-box p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    /* Hero-Eimer: größer und deutlich in den Header hinein */
    .vs-video-hero .vs-floating-deco--bucket {
        width: 185px !important;
        top: -52px !important;
        right: -12px !important;
        left: auto !important;
        transform: rotate(8deg) !important;
        z-index: 1205 !important;
    }

    /* Hero erhält genug Luft, damit das Motiv nicht den Text erschlägt */
    .vs-video-hero__inner {
        padding-top: 118px !important;
    }

    /* Leistungen / Staubsauger */
    #leistungen {
        padding-top: 108px !important;
    }

    #leistungen .vs-floating-deco--vacuum {
        width: 180px !important;
        top: -83px !important;
        right: -20px !important;
        left: auto !important;
    }

    /* Branchen / Bürste */
    #branchen {
        padding-top: 105px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 170px !important;
        top: -72px !important;
        left: -30px !important;
        right: auto !important;
    }

    /* Warum / Schwamm */
    #warum-wir {
        padding-top: 105px !important;
    }

    #warum-wir .vs-floating-deco--sponge {
        width: 145px !important;
        top: -62px !important;
        right: -12px !important;
        left: auto !important;
    }

    /* Kontakt / Aufsteller */
    #kontakt {
        padding-top: 118px !important;
    }

    #kontakt .vs-floating-deco--sign {
        width: 150px !important;
        top: -82px !important;
        left: -8px !important;
        right: auto !important;
        transform: rotate(-5deg) !important;
    }

    /* Über uns Werte auf Mobile komplett mittig */
    .vs-about-company__layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .vs-about-value {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Markenbereich kompakter + Mann groß */
    .vs-brand-break {
        padding: 58px 0 0 !important;
    }

    .vs-brand-break__inner {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        gap: 0 !important;
    }

    .vs-brand-break__content {
        padding: 0 0 28px !important;
        max-width: 100% !important;
    }

    .vs-brand-break__content h2 {
        font-size: clamp(2.3rem, 11vw, 3.35rem) !important;
        line-height: 1.01 !important;
    }

    .vs-brand-break__visual {
        min-height: 365px !important;
        width: 100% !important;
        align-self: stretch !important;
    }

    .vs-brand-break__visual img {
        width: min(430px, 112vw) !important;
        left: 50% !important;
        right: auto !important;
        bottom: -5px !important;
        transform: translateX(-50%) !important;
    }

    /* Kernkompetenz vollständig zentriert */
    .vs-core-service__layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .vs-core-service__content {
        text-align: center !important;
    }

    .vs-check-list span {
        padding-left: 0 !important;
    }

    /* Karten und Kontakt */
    .vs-feature-grid--why,
    .vs-contact-layout {
        grid-template-columns: 1fr !important;
    }

    /* Footer: großer Mann ragt sichtbar hoch */
    .vs-footer {
        padding-top: 155px !important;
        overflow: visible !important;
    }

    .vs-footer__deco-man {
        width: 230px !important;
        top: -165px !important;
        right: -12px !important;
        left: auto !important;
    }

    .vs-footer__grid {
        position: relative !important;
        z-index: 3 !important;
    }

    .vs-footer__col--brand {
        padding-top: 12px !important;
    }

    /* Floating Buttons etwas kleiner, damit sie weniger verdecken */
    .vs-whatsapp-float {
        width: 66px !important;
        height: 66px !important;
        right: 14px !important;
        bottom: 82px !important;
    }

    .vs-scroll-top {
        width: 54px !important;
        height: 54px !important;
        right: 20px !important;
        bottom: 158px !important;
    }
}

/* ---------------------------------------------------------
   SEHR KLEINE HANDYS
--------------------------------------------------------- */
@media (max-width: 430px) {
    .vs-video-hero .vs-floating-deco--bucket {
        width: 162px !important;
        top: -46px !important;
        right: -20px !important;
    }

    #leistungen .vs-floating-deco--vacuum {
        width: 160px !important;
        top: -76px !important;
        right: -26px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 150px !important;
        top: -68px !important;
        left: -34px !important;
    }

    #warum-wir .vs-floating-deco--sponge {
        width: 132px !important;
        top: -58px !important;
        right: -18px !important;
    }

    #kontakt .vs-floating-deco--sign {
        width: 138px !important;
        top: -78px !important;
        left: -12px !important;
    }

    .vs-brand-break__visual {
        min-height: 330px !important;
    }

    .vs-brand-break__visual img {
        width: 385px !important;
    }

    .vs-footer__deco-man {
        width: 205px !important;
        top: -148px !important;
        right: -18px !important;
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vs-floating-deco {
        animation: none !important;
    }
}


/* =========================================================
   VS CLEAN – FINALER UMBAU 19.09.2026
   Abstimmung auf:
   - front-page-vs-clean-final-umbau.php
   - footer-vs-clean-final-umbau.php
========================================================= */

/* ---------------------------------------------------------
   GLOBALE AUSRICHTUNG
--------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.vs-page .vs-section-head,
.vs-page .vs-section-title,
.vs-page .vs-section-subtitle,
.vs-page .vs-eyebrow,
.vs-page .vs-about-company__content,
.vs-page .vs-core-service__content,
.vs-page .vs-feature-box,
.vs-page .vs-step,
.vs-page .vs-contact-box,
.vs-page .vs-form-box,
.vs-page .vs-final-cta__content {
    text-align: center !important;
}

.vs-page .vs-section-head,
.vs-page .vs-section-subtitle,
.vs-page .vs-about-company__content,
.vs-page .vs-core-service__content,
.vs-page .vs-final-cta__content {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-page .vs-section-subtitle,
.vs-page .vs-about-company__content > p,
.vs-page .vs-core-service__content > p,
.vs-page .vs-final-cta__content > p {
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------
   DEKO-GRUNDBASIS
--------------------------------------------------------- */
.vs-section--decorated {
    position: relative !important;
    overflow: visible !important;
}

.vs-section--decorated > .vs-container {
    position: relative;
    z-index: 3;
}

.vs-floating-deco {
    position: absolute !important;
    display: block !important;
    height: auto !important;
    max-width: none !important;
    pointer-events: none !important;
    user-select: none !important;
    object-fit: contain !important;
    z-index: 15 !important;
    filter: drop-shadow(0 24px 28px rgba(13, 27, 42, .18));
    transform-origin: 50% 50%;
    animation: vsFinalDecoFloat 6s ease-in-out infinite;
}

@keyframes vsFinalDecoFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* ---------------------------------------------------------
   LEISTUNGEN
   Mann mit Schwamm + Schaum hängt über der Sektion
   und greift sichtbar in den dunklen Bereich darüber.
--------------------------------------------------------- */
#leistungen {
    position: relative;
    padding-top: 145px !important;
}

#leistungen .vs-floating-deco--foam-man {
    width: clamp(285px, 23vw, 430px) !important;
    top: -235px !important;
    right: clamp(26px, 6vw, 110px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(1deg) !important;
    z-index: 22 !important;
}

/* ---------------------------------------------------------
   BRANCHEN – Bürste
--------------------------------------------------------- */
#branchen {
    position: relative;
    padding-top: 115px !important;
}

#branchen .vs-floating-deco--brush {
    width: clamp(235px, 18vw, 340px) !important;
    top: -92px !important;
    left: clamp(25px, 5vw, 90px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-11deg) !important;
}

/* ---------------------------------------------------------
   ÜBER VS CLEAN – Text + Duo statt vier Kästchen
--------------------------------------------------------- */
.vs-about-company {
    position: relative;
    overflow: visible !important;
}

.vs-about-company__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
    align-items: center !important;
    gap: clamp(35px, 5vw, 75px) !important;
}

.vs-about-company__content {
    max-width: 720px !important;
    margin-inline: auto !important;
}

.vs-about-company__content .vs-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-about-company__visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.vs-about-company__visual img {
    display: block;
    width: min(520px, 42vw) !important;
    max-width: none !important;
    height: auto !important;
    margin-inline: auto;
    filter: drop-shadow(0 28px 32px rgba(13, 27, 42, .18));
}

/* ---------------------------------------------------------
   KERNKOMPETENZ
--------------------------------------------------------- */
.vs-core-service__content > .vs-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-check-list {
    width: min(100%, 650px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------
   WARUM VS CLEAN – Eimer oben
--------------------------------------------------------- */
#warum-wir {
    position: relative;
    padding-top: 120px !important;
    overflow: visible !important;
}

#warum-wir .vs-floating-deco--bucket {
    width: clamp(205px, 15vw, 285px) !important;
    top: -96px !important;
    right: clamp(28px, 6vw, 105px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(6deg) !important;
}

/* Schwamm genau als Übergang zum nächsten Bereich */
.vs-why-transition-sponge {
    position: relative;
    z-index: 9;
    display: block;
    width: clamp(150px, 11vw, 215px);
    height: auto;
    margin: 36px auto -105px;
    transform: rotate(-8deg);
    filter: drop-shadow(0 20px 24px rgba(13, 27, 42, .17));
    pointer-events: none;
}

/* ---------------------------------------------------------
   FINAL CTA / FOOTER BRIDGE
   Zusätzlicher Raum unten verhindert, dass das Duo
   die CTA-Buttons verdeckt.
--------------------------------------------------------- */
.vs-final-cta-section--footer-bridge {
    position: relative !important;
    padding-bottom: 205px !important;
    overflow: visible !important;
}

.vs-footer {
    position: relative !important;
    overflow: visible !important;
    padding-top: 180px !important;
}

/* Der bestehende Klassenname bleibt bewusst erhalten. */
.vs-footer__deco-man {
    position: absolute !important;
    width: clamp(430px, 36vw, 650px) !important;
    max-width: none !important;
    top: -365px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 18 !important;
    pointer-events: none !important;
}

.vs-footer__deco-man img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .24)) !important;
}

.vs-footer > .vs-container,
.vs-footer__bottom {
    position: relative;
    z-index: 20;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {

    #leistungen {
        padding-top: 130px !important;
    }

    #leistungen .vs-floating-deco--foam-man {
        width: 320px !important;
        top: -205px !important;
        right: 18px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 220px !important;
        top: -82px !important;
        left: 26px !important;
    }

    .vs-about-company__layout {
        grid-template-columns: 1fr .9fr !important;
        gap: 35px !important;
    }

    .vs-about-company__visual {
        min-height: 440px;
    }

    .vs-about-company__visual img {
        width: 430px !important;
    }

    #warum-wir .vs-floating-deco--bucket {
        width: 210px !important;
        top: -85px !important;
        right: 40px !important;
    }

    .vs-why-transition-sponge {
        width: 170px;
        margin-bottom: -88px;
    }

    .vs-final-cta-section--footer-bridge {
        padding-bottom: 175px !important;
    }

    .vs-footer {
        padding-top: 150px !important;
    }

    .vs-footer__deco-man {
        width: 470px !important;
        top: -300px !important;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media (max-width: 767px) {

    .vs-page .vs-section-title {
        max-width: 94vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: clamp(2rem, 9.2vw, 2.85rem) !important;
        line-height: 1.07 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .vs-page .vs-section-subtitle,
    .vs-page .vs-about-company__content > p,
    .vs-page .vs-core-service__content > p,
    .vs-page .vs-feature-box p {
        font-size: 1rem !important;
        line-height: 1.62 !important;
    }

    /* Leistungen: Schaum-Mann weit genug über die obere Kante */
    #leistungen {
        padding-top: 132px !important;
    }

    #leistungen .vs-floating-deco--foam-man {
        width: min(245px, 60vw) !important;
        top: -158px !important;
        right: -10px !important;
        left: auto !important;
        transform: rotate(0deg) !important;
    }

    /* Bürste auf Mobile bewusst weiter in die Mitte */
    #branchen {
        padding-top: 105px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 158px !important;
        top: -68px !important;
        left: 8vw !important;
        right: auto !important;
    }

    /* Über uns: erst Text, dann Duo */
    .vs-about-company__layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .vs-about-company__content {
        max-width: none !important;
        text-align: center !important;
    }

    .vs-about-company__visual {
        min-height: 0 !important;
        padding-top: 6px;
    }

    .vs-about-company__visual img {
        width: min(360px, 92vw) !important;
    }

    /* Kernkompetenz: Bild kompakter, Liste ohne kollidierende Häkchen */
    .vs-core-service__layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .vs-core-service__media {
        min-height: 0 !important;
        width: min(100%, 680px) !important;
        margin-inline: auto !important;
        border-radius: 24px !important;
    }

    .vs-core-service__media img {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    .vs-core-service__content {
        text-align: center !important;
    }

    .vs-check-list {
        display: grid !important;
        gap: 12px !important;
        width: min(100%, 440px) !important;
        margin: 24px auto 30px !important;
    }

    .vs-check-list span {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        line-height: 1.35 !important;
    }

    .vs-check-list span::before {
        position: static !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        transform: none !important;
        font-size: .78rem !important;
    }

    /* Warum VS Clean: Eimer etwas nach links zur Mitte */
    #warum-wir {
        padding-top: 112px !important;
    }

    #warum-wir .vs-floating-deco--bucket {
        width: 165px !important;
        top: -78px !important;
        right: 11vw !important;
        left: auto !important;
        transform: rotate(5deg) !important;
    }

    /* Vier Punkte: auf Mobile EIN Kasten zur Zeit */
    .vs-feature-grid--why[data-vs-why-rotator] {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 320px !important;
        margin: 12px auto 0 !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item] {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(18px) scale(.985) !important;
        pointer-events: none !important;
        animation: vsWhyCardCycle 16s linear infinite !important;
        transition: none !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item]:nth-child(1) {
        animation-delay: 0s !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item]:nth-child(2) {
        animation-delay: 4s !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item]:nth-child(3) {
        animation-delay: 8s !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item]:nth-child(4) {
        animation-delay: 12s !important;
    }

    @keyframes vsWhyCardCycle {
        0% {
            opacity: 0;
            visibility: hidden;
            transform: translateY(18px) scale(.985);
        }
        5% {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        20% {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        24% {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-12px) scale(.99);
        }
        100% {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-12px) scale(.99);
        }
    }

    .vs-why-transition-sponge {
        width: 145px !important;
        margin: 28px auto -78px !important;
        transform: rotate(-7deg) !important;
    }

    /* Final CTA erhält unten einen reservierten Bildbereich */
    .vs-final-cta-section--footer-bridge {
        padding-bottom: 165px !important;
    }

    .vs-final-cta {
        position: relative;
        z-index: 4;
    }

    /* Duo über beide Bereiche, aber unterhalb der CTA-Aktionen */
    .vs-footer {
        padding-top: 145px !important;
    }

    .vs-footer__deco-man {
        width: min(325px, 82vw) !important;
        top: -220px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 15 !important;
    }

    .vs-footer__grid {
        position: relative !important;
        z-index: 20 !important;
    }

    /* Floating Controls etwas zurückhaltender */
    .vs-whatsapp-float {
        width: 64px !important;
        height: 64px !important;
        right: 14px !important;
    }

    .vs-scroll-top {
        width: 52px !important;
        height: 52px !important;
        right: 20px !important;
    }
}

/* ---------------------------------------------------------
   SEHR KLEINE HANDYS
--------------------------------------------------------- */
@media (max-width: 430px) {

    #leistungen .vs-floating-deco--foam-man {
        width: 220px !important;
        top: -146px !important;
        right: -18px !important;
    }

    #branchen .vs-floating-deco--brush {
        width: 145px !important;
        left: 7vw !important;
    }

    #warum-wir .vs-floating-deco--bucket {
        width: 150px !important;
        right: 9vw !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] {
        min-height: 335px !important;
    }

    .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item] {
        min-height: 315px !important;
        padding: 28px 22px !important;
    }

    .vs-why-transition-sponge {
        width: 132px !important;
        margin-bottom: -70px !important;
    }

    .vs-final-cta-section--footer-bridge {
        padding-bottom: 150px !important;
    }

    .vs-footer {
        padding-top: 130px !important;
    }

    .vs-footer__deco-man {
        width: min(290px, 80vw) !important;
        top: -195px !important;
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .vs-floating-deco {
        animation: none !important;
    }

    @media (max-width: 767px) {
        .vs-feature-grid--why[data-vs-why-rotator] {
            display: grid !important;
            min-height: 0 !important;
            gap: 16px !important;
        }

        .vs-feature-grid--why[data-vs-why-rotator] [data-vs-why-item] {
            position: static !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
            animation: none !important;
            min-height: 0 !important;
        }
    }
}


/* =========================================================
   MOBILE MENU – FULLSCREEN FIX
========================================================= */
@media (max-width: 900px) {
    .vs-overlay-menu {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 9999 !important;
    }
    .vs-overlay-menu__backdrop {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(6, 15, 24, .82) !important;
    }
    .vs-overlay-menu__panel {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        padding: calc(24px + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: translateX(100%) !important;
    }
    .vs-overlay-menu.is-open .vs-overlay-menu__panel {
        transform: translateX(0) !important;
    }
    body.vs-menu-open .vs-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.vs-menu-open {
        overflow: hidden !important;
        touch-action: none;
    }
}
@media (max-width: 480px) {
    .vs-overlay-menu__panel {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================================
   HERO – VS CLEAN DUO ZENTRAL
========================================================= */
.vs-video-hero {
    overflow: hidden !important;
}

.vs-video-hero__content {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin-inline: auto !important;
    text-align: center !important;
}

.vs-video-hero__title {
    max-width: 1080px !important;
    margin-inline: auto !important;
}

.vs-video-hero__text {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vs-video-hero__duo {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    margin: 14px auto 6px;
    pointer-events: none;
}

.vs-video-hero__duo img {
    display: block;
    width: clamp(430px, 38vw, 620px);
    max-width: 92vw;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 28px 34px rgba(0,0,0,.34));
}

.vs-video-hero__actions {
    position: relative;
    z-index: 6;
    justify-content: center !important;
    margin-top: 8px !important;
}

.vs-video-hero__micro-trust {
    display: none !important;
}

/* Der alte einzelne Schaum-Mann ist komplett entfernt. */
#leistungen {
    padding-top: clamp(80px, 7vw, 115px) !important;
}

#leistungen .vs-floating-deco--foam-man {
    display: none !important;
}

@media (min-width: 901px) {
    .vs-video-hero__inner {
        padding-top: clamp(120px, 9vw, 165px) !important;
        padding-bottom: 72px !important;
    }

    .vs-video-hero__title {
        font-size: clamp(3.65rem, 5vw, 5.35rem) !important;
        line-height: .98 !important;
    }

    .vs-video-hero__title span {
        display: block;
        margin-top: 18px;
        font-size: clamp(1.7rem, 2.4vw, 2.6rem) !important;
        line-height: 1.08 !important;
    }

    .vs-video-hero__scroll {
        bottom: 20px !important;
    }
}

@media (max-width: 900px) {
    .vs-video-hero__inner {
        min-height: 0 !important;
        padding-top: 126px !important;
        padding-bottom: 46px !important;
    }

    .vs-eyebrow--hero {
        max-width: 92%;
        margin-inline: auto !important;
        font-size: .94rem !important;
        line-height: 1.4 !important;
        letter-spacing: .16em !important;
    }

    .vs-video-hero__title {
        max-width: 94vw !important;
        margin-top: 22px !important;
        font-size: clamp(2.7rem, 10.8vw, 4rem) !important;
        line-height: .98 !important;
    }

    .vs-video-hero__title span {
        display: block;
        margin-top: 18px !important;
        font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
        line-height: 1.08 !important;
    }

    /* Auf Mobile sparen wir den langen Erklärtext im Hero ein. */
    .vs-video-hero__text {
        display: none !important;
    }

    .vs-video-hero__duo {
        margin-top: 16px !important;
        margin-bottom: 4px !important;
    }

    .vs-video-hero__duo img {
        width: min(390px, 94vw) !important;
        max-width: 94vw !important;
    }

    .vs-video-hero__actions {
        width: min(100%, 680px) !important;
        margin: 4px auto 0 !important;
        gap: 14px !important;
    }

    .vs-video-hero__actions .vs-btn {
        width: 100% !important;
        min-height: 58px !important;
        justify-content: center !important;
    }

    .vs-video-hero__scroll {
        display: none !important;
    }

    #leistungen {
        padding-top: 82px !important;
    }
}

@media (max-width: 430px) {
    .vs-video-hero__inner {
        padding-top: 118px !important;
        padding-bottom: 38px !important;
    }

    .vs-video-hero__title {
        font-size: clamp(2.45rem, 11.2vw, 3.25rem) !important;
    }

    .vs-video-hero__duo img {
        width: min(350px, 96vw) !important;
        max-width: 96vw !important;
    }
}