/* VARGA WEBDESIGN – STARTSEITE */

/* 02 – GEMEINSAME BAUSTEINE */

.vw-shell { width: 100%; max-width: none; margin: 0; padding-inline: var(--vw-page-edge); }
.vw-eyebrow {
    margin: 0 0 18px;
    color: var(--vw-color-heading-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.vw-section-heading { width: 100%; max-width: 980px; }
.vw-section-heading--center { margin-inline: auto; text-align: center; }
.vw-section-title {
    margin: 0;
    color: var(--vw-color-heading);
    font-size: clamp(46px, 3.6vw, 66px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}
.vw-section-description {
    max-width: 860px;
    margin: 24px auto 0;
    color: var(--vw-color-text);
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.7;
}
.vw-button {
    min-height: 52px;
    gap: 14px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.vw-button:hover { transform: translateY(-2px); }
.vw-button:focus-visible { outline: 3px solid rgba(8, 123, 211, 0.25); outline-offset: 4px; }
.vw-button--primary {
    color: var(--vw-color-surface);
    background: var(--vw-color-primary);
    box-shadow: 0 12px 28px rgba(8, 123, 211, 0.18);
}
.vw-button--primary:hover {
    color: var(--vw-color-surface);
    background: var(--vw-color-primary-dark);
    box-shadow: 0 16px 34px rgba(8, 123, 211, 0.25);
}
.vw-button--secondary {
    color: var(--vw-color-heading);
    background: var(--vw-color-surface);
    border-color: var(--vw-color-border);
    box-shadow: 0 8px 22px rgba(16, 24, 39, 0.05);
}
.vw-button--secondary:hover {
    color: var(--vw-color-heading);
    background: var(--vw-color-surface-soft);
    border-color: var(--vw-color-border-strong);
}

/* 04 – HOME: HERO */

.vw-hero {
    width: 100%;
    margin: 0;
    padding: clamp(68px, 5vw, 96px) 0 clamp(62px, 4.5vw, 84px);
    background: var(--vw-color-background);
    overflow: hidden;
}
.vw-hero__grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(520px, 0.9fr) minmax(540px, 1.1fr);
    align-items: center;
    gap: clamp(54px, 5vw, 96px);
}
.vw-hero__content { width: 100%; max-width: 720px; animation: vwFadeUp 700ms ease-out both; }
.vw-hero__title {
    margin: 0;
    color: var(--vw-color-heading);
    font-size: clamp(48px, 3.45vw, 68px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.vw-hero__title span { color: var(--vw-color-primary); }
.vw-hero__description {
    max-width: 620px;
    margin: 26px 0 0;
    color: var(--vw-color-text);
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.65;
}
.vw-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    animation: vwFadeUp 700ms 180ms ease-out both;
}
.vw-hero__features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
    color: var(--vw-color-heading);
    font-size: 13px;
    font-weight: 700;
    animation: vwFadeUp 700ms 260ms ease-out both;
}
.vw-hero__features span { display: inline-flex; align-items: center; }
.vw-hero__features span:not(:last-child)::after {
    width: 1px;
    height: 16px;
    margin: 0 13px;
    background: #cdd6df;
    content: "";
}
.vw-hero__visual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: vwFadeInVisual 850ms 120ms ease-out both;
}
.vw-hero__visual img {
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
    transform: none;
}

/* 05 – HOME: VERTRAUEN & LEISTUNGEN */

.vw-trust-section, .vw-services-section { width: 100%; margin: 0; }
.vw-trust-section { padding: clamp(82px, 6vw, 110px) 0 clamp(92px, 7vw, 128px); background: var(--vw-color-surface); }
.vw-services-section { padding: clamp(84px, 6.5vw, 118px) 0 clamp(88px, 7vw, 124px); background: var(--vw-color-background); }
.vw-trust-grid, .vw-services-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vw-trust-grid { margin: 56px 0 0; }
.vw-services-grid { margin-top: 58px; }
.vw-info-card, .vw-service-card {
    min-height: 300px;
    padding: 34px;
    border-radius: 18px;
    background: var(--vw-color-surface);
    box-shadow: var(--vw-shadow-card);
}
.vw-info-card::before, .vw-service-card::before {
    background: var(--vw-color-primary);
    transform: scaleX(0);
    transition: transform 220ms ease;
}
.vw-info-card__number, .vw-service-card__icon {
    color: var(--vw-color-primary);
    background: var(--vw-color-primary-soft);
    font-weight: 800;
    line-height: 1;
    transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}
.vw-info-card__number {
    width: 50px;
    height: 50px;
    margin-bottom: 26px;
    border-radius: 12px;
    font-size: 16px;
}
.vw-service-card__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
    border-radius: 13px;
    font-size: 21px;
}
.vw-service-card__icon--letter { font-size: 18px; }
.vw-info-card__title, .vw-service-card__title {
    margin: 0;
    color: var(--vw-color-heading);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.025em;
    transition: color 220ms ease, transform 220ms ease;
}
.vw-info-card__text, .vw-service-card__text { color: var(--vw-color-text); font-size: 16px; line-height: 1.68; }
.vw-info-card__text { margin: 15px 0 0; }
.vw-service-card__text { margin: 16px 0 0; }
.vw-info-card:hover, .vw-service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8, 123, 211, 0.28);
    box-shadow: 0 26px 60px rgba(16, 24, 39, 0.11);
}
.vw-info-card:hover .vw-info-card__number, .vw-service-card:hover .vw-service-card__icon {
    color: var(--vw-color-surface);
    background: var(--vw-color-primary);
    transform: translateY(-2px);
}
.vw-info-card:hover .vw-info-card__title, .vw-service-card:hover .vw-service-card__title {
    color: var(--vw-color-primary);
    transform: translateY(-1px);
}
.vw-info-card:focus-within, .vw-service-card:focus-within {
    border-color: rgba(8, 123, 211, 0.35);
    box-shadow: 0 26px 60px rgba(16, 24, 39, 0.11);
}
.vw-services-section__action { display: flex; justify-content: center; margin-top: 40px; }

/* 06 – HOME: ABLAUF */

.vw-process-section {
    width: 100%;
    margin: 0;
    padding: clamp(84px, 6.5vw, 118px) 0 clamp(92px, 7vw, 128px);
    background: var(--vw-color-surface);
}
.vw-process-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 60px;
}
.vw-process-grid::before {
    position: absolute;
    top: 34px;
    right: 0;
    left: 0;
    height: 2px;
    background: #dfe7ee;
    content: "";
}
.vw-process-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0;
    text-align: center;
}
.vw-process-card__number {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    margin-bottom: 26px;
    border: 2px solid var(--vw-color-border-accent);
    border-radius: 50%;
    color: var(--vw-color-primary);
    background: var(--vw-color-surface);
    box-shadow: 0 10px 24px rgba(16, 24, 39, 0.06);
    font-size: 16px;
    font-weight: 800;
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.vw-process-card__content { max-width: 300px; margin-inline: auto; }
.vw-process-card__title {
    margin: 0;
    color: var(--vw-color-heading);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    transition: color 220ms ease, transform 220ms ease;
}
.vw-process-card__text { margin: 15px 0 0; color: var(--vw-color-text); font-size: 15px; line-height: 1.68; }
.vw-process-card:hover .vw-process-card__number {
    color: var(--vw-color-surface);
    background: var(--vw-color-primary);
    border-color: var(--vw-color-primary);
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(8, 123, 211, 0.22);
}
.vw-process-card:hover .vw-process-card__title { color: var(--vw-color-primary); transform: translateY(-1px); }

/* 07 – HOME: ÜBER MICH */

.vwa-about-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(78px, 6vw, 108px) 0 clamp(82px, 6.5vw, 116px);
    background: radial-gradient(circle at 84% 36%, rgba(8, 123, 211, 0.075), transparent 27%), var(--vw-color-background);
    overflow: hidden;
}
.vwa-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
    align-items: center;
    gap: clamp(58px, 6vw, 104px);
}
.vwa-about-content { width: 100%; max-width: 760px; }
.vwa-about-content > .vw-eyebrow { margin-bottom: 22px; }
.vwa-about-title {
    max-width: 720px;
    margin: 0;
    color: var(--vw-color-heading);
    font-size: clamp(50px, 4.2vw, 76px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.vwa-about-subtitle {
    max-width: 700px;
    margin: 28px 0 0;
    color: #13233d;
    font-size: clamp(27px, 2vw, 38px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.03em;
}
.vwa-about-text {
    max-width: 740px;
    margin: 26px 0 0;
    color: var(--vw-color-text);
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.72;
}
.vwa-about-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 36px 0 32px; }
.vwa-about-feature {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}
.vwa-about-feature__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--vw-color-surface);
    background: var(--vw-color-primary);
    box-shadow: 0 12px 26px rgba(8, 123, 211, 0.18);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.vwa-about-feature__icon svg { width: 23px; height: 23px; fill: currentColor; }
.vwa-about-feature strong {
    display: block;
    margin: 2px 0 5px;
    color: var(--vw-color-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}
.vwa-about-feature p { margin: 0; color: var(--vw-color-text); font-size: 14px; line-height: 1.55; }
.vwa-about-feature:hover .vwa-about-feature__icon { transform: translateY(-4px); box-shadow: 0 17px 32px rgba(8, 123, 211, 0.26); }
.vwa-about-visual {
    position: relative;
    width: 100%;
    max-width: 620px;
    justify-self: end;
    padding: 18px 18px 0 0;
}
.vwa-about-visual__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    width: 86%;
    height: 73%;
    border-radius: 32px;
    background: rgba(8, 123, 211, 0.08);
}
.vwa-about-visual__backdrop::before, .vwa-about-visual__backdrop::after {
    position: absolute;
    border: 1px solid rgba(8, 123, 211, 0.13);
    border-radius: 50%;
    content: "";
}
.vwa-about-visual__backdrop::before { top: -78px; right: -76px; width: 190px; height: 190px; }
.vwa-about-visual__backdrop::after { top: -30px; right: -30px; width: 116px; height: 116px; }
.vwa-about-profile {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    border: 1px solid var(--vw-color-border);
    border-radius: 28px;
    background: var(--vw-color-surface);
    box-shadow: 0 28px 68px rgba(16, 24, 39, 0.11), 0 8px 22px rgba(16, 24, 39, 0.05);
    overflow: hidden;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.vwa-about-profile__image-wrap { position: relative; height: clamp(410px, 34vw, 570px); background: #edf4fa; overflow: hidden; }
.vwa-about-profile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 8%;
    transition: transform 500ms ease;
}
.vwa-about-profile__info { display: grid; padding: 10px 26px 12px; background: var(--vw-color-surface); }
.vwa-about-info-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 17px 0;
}
.vwa-about-info-row:not(:last-child) { border-bottom: 1px solid var(--vw-color-border); }
.vwa-about-info-row__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--vw-color-primary);
    background: var(--vw-color-primary-soft);
}
.vwa-about-info-row__icon svg { width: 21px; height: 21px; fill: currentColor; }
.vwa-about-info-row strong {
    display: block;
    margin: 1px 0 4px;
    color: var(--vw-color-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}
.vwa-about-info-row p { margin: 0; color: var(--vw-color-text); font-size: 14px; line-height: 1.55; }
.vwa-about-profile:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 123, 211, 0.22);
    box-shadow: 0 36px 82px rgba(16, 24, 39, 0.15), 0 12px 28px rgba(16, 24, 39, 0.06);
}
.vwa-about-profile:hover .vwa-about-profile__image { transform: scale(1.025); }

/* 08 – HOME: ABSCHLUSS-CTA */

.vw-home-cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(84px, 7vw, 112px) var(--vw-page-edge, clamp(24px, 6vw, 118px));
    background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.12), transparent 34%), linear-gradient(135deg, #0d6db9 0%, #0a7dce 54%, #1689df 100%);
    color: var(--vw-color-surface);
    text-align: center;
    overflow: hidden;
}
.vw-home-cta::before {
    position: absolute;
    top: -190px;
    right: -110px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    animation: vwCtaCircle 12s ease-in-out infinite;
}
.vw-home-cta__content {
    position: relative;
    z-index: 1;
    width: min(100%, 1180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    text-align: center;
}
.vw-home-cta__stack { width: 100%; display: flex; flex-direction: column; align-items: center; }
.vw-home-cta__title {
    width: 100%;
    max-width: 1100px;
    margin: 0;
    padding: 0;
    color: var(--vw-color-surface) !important;
    font-size: clamp(38px, 3.25vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.2px;
    text-wrap: balance;
}
.vw-home-cta__title-line { display: block; }
.vw-home-cta__actions { display: flex; justify-content: center; margin-top: 72px; }
.vw-home-cta__content > .vw-home-cta__button, .vw-home-cta__stack > .vw-home-cta__button { margin-top: 72px; }
.vw-home-cta__button {
    min-height: 54px;
    gap: 14px;
    align-self: center;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    color: #0875c9 !important;
    background: var(--vw-color-surface);
    box-shadow: 0 14px 30px rgba(5, 48, 84, 0.18);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.vw-home-cta__button-label, .vw-home-cta__button-arrow { color: inherit; }
.vw-home-cta__button-arrow { display: inline-block; font-size: 18px; }
.vw-home-cta__button:hover, .vw-home-cta__button:focus-visible {
    color: #0668b3 !important;
    background: #f7fbff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(5, 48, 84, 0.25);
}
.vw-home-cta__button:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.58); outline-offset: 5px; }

/* Mockup-Ränder exakt mit dem Hero-Hintergrund verschmelzen */

.vw-hero__visual {
    position: relative;
    isolation: isolate;
}

.vw-hero__visual::after {
    position: absolute;
    inset: -2px;
    z-index: 2;
    pointer-events: none;
    content: "";

    background:
        linear-gradient(
            to right,
            #e2edf7 0,
            rgba(226, 237, 247, 0) 10%
        ),
        linear-gradient(
            to left,
            #e2edf7 0,
            rgba(226, 237, 247, 0) 10%
        ),
        linear-gradient(
            to bottom,
            #e2edf7 0,
            rgba(226, 237, 247, 0) 10%
        ),
        linear-gradient(
            to top,
            #e2edf7 0,
            rgba(226, 237, 247, 0) 10%
        );
}

.vw-hero__visual img {
    position: relative;
    z-index: 1;
    display: block;
}

/* Home-Hero: Abstand zwischen Label und Überschrift korrigieren */

.vw-hero .vw-eyebrow {
    margin: 0 0 28px !important;
}

.vw-hero .vw-eyebrow + .vw-hero__title {
    margin-top: 0 !important;
}

/* =========================================
   HOME – LABELS AUSRICHTEN
========================================= */

.vw-home .vw-eyebrow {
    width: 100%;
    max-width: none;
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: var(--vw-color-heading-soft) !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    text-align: inherit;
}

/* Hero-Label ebenfalls näher an die Überschrift */

.vw-home .vw-hero .vw-eyebrow {
    margin-bottom: 20px !important;
}

/* Über-mich-Bereich: Label und Überschrift exakt auf einer Achse */

.vw-home .vwa-about-content > .vw-eyebrow {
    margin-left: 0 !important;
    margin-bottom: 20px !important;
}

.vw-home .vwa-about-content > .vw-eyebrow + .vwa-about-title {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

/* HOME – CTA mit sehr dünnem weißen Seitenrand */

.vw-home-cta,
.vw-cta,
.vw-home .vw-contact,
.vw-home .vw-cta-section {
    width: calc(100% - 2px) !important;
    max-width: none !important;
    margin-right: 1px !important;
    margin-left: 1px !important;
}