/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from services.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 7
 */
/* =============================================================
   Inverta — Section: Services
   Modular CSS Architecture (Split for Readability & Performance)
   ============================================================= */

/* 01. Base: Tokens, Capsule Containers, Edit Shortcuts & Header */

/* ── services-base.css ── */
/* =============================================================
   Inverta — Section: Services
   Module 1: Base Tokens, Containers, Shortcuts & Header
   ============================================================= */

:root {
    --brand: #24a9b3;
    --brand-deep: #062a2e;
    --vf-services-radius: var(--inv-radius-capsule, 20px);

    /* The parallax card width is measured against the viewport, so the
       section's own side padding has to come out of it. Without that, widening
       the edge distance shrank the capsule while the cards stayed put and were
       clipped by it — the setting looked like it did nothing. */
    --card-w: min(
        var(--vf-services-card-max-w, 760px),
        calc(94vw - 2 * var(--inv-section-px, var(--inv-edge, 10px)))
    );
    --card-r: 0.44;      /* height ratio — flatter card leaves plenty of room for the full dip clear */
    --peek: 44px;       /* sliver height: clears the number badge */
    --step: 0.04;        /* scale lost per slot = depth */
    --dip: 260px;       /* how far below the deck the leaving card travels to clear deck completely */
    --gap: 18px;        /* deck opens to let the card in */
    --fwd: 0.022;       /* how far the deck steps toward the viewer */
    --lowsc: 0.76;      /* size at the low point */
    --turn: 0.55;       /* where the descent ends and the tuck-under starts */
    --smooth: 0.14;
}

.vf-section-services {
    position: relative;
    width: 100%;
    z-index: 10;
    overflow: visible !important;
}


/* Capsule Mode */
.vf-section-services.vf-services-capsule-mode {
    background: transparent !important;
    border: none !important;
    padding: 4px var(--inv-section-px, var(--inv-edge, 10px)) 16px var(--inv-section-px, var(--inv-edge, 10px));
    margin-top: var(--vf-services-margin-top, 24px) !important;
    display: flex;
    justify-content: center;
    overflow: visible !important;
}

.vf-section-services.vf-services-capsule-mode .vf-services-capsule {
    position: relative;
    width: 100%;
    max-width: min(var(--vf-services-max-width, 100%), var(--inv-shell-max, 100%));
    margin: 0 auto;
    border-radius: var(--vf-services-radius, 20px);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    overflow: hidden !important;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
    box-shadow: var(--inv-shadow-capsule);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 75%, transparent) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Fullwidth Mode */
.vf-section-services.vf-services-fullwidth-mode {
    margin-top: var(--vf-services-margin-top, 24px) !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    overflow: visible !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.75) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

.vf-section-services.vf-services-fullwidth-mode .vf-services-capsule {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
    overflow: visible !important;
}

/* -------------------------------------------------------------
   Background Image & Overlay Layers (Customizer Background Option)
   ------------------------------------------------------------- */
.vf-services-section-bg,
.vf-services-capsule-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--vf-services-bg-color, transparent);
    background-image: var(--vf-services-bg-img, none);
    background-size: var(--vf-services-bg-fit, cover);
    background-position: center center;
    background-repeat: no-repeat;
    opacity: var(--vf-services-bg-opacity, 1);
    transition: opacity 0.25s ease, background-image 0.25s ease;
    display: none;
}

/* Show section bg when mode is 'section' */
.vf-section-services.vf-services-bg-mode-section > .vf-services-section-bg,
.vf-section-services.vf-services-has-bg-img.vf-services-bg-mode-section > .vf-services-section-bg {
    display: block;
}

/* Show capsule bg when mode is 'capsule' */
.vf-section-services.vf-services-bg-mode-capsule .vf-services-capsule-bg,
.vf-section-services.vf-services-has-bg-img.vf-services-bg-mode-capsule .vf-services-capsule-bg {
    display: block;
}

.vf-services-capsule-bg {
    border-radius: inherit;
}

/* Tactile grain matrix on capsule background matching Über die Firma */
.vf-services-capsule-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}

.vf-services-bg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, var(--vf-services-bg-overlay, 0));
    pointer-events: none;
    z-index: 2;
    transition: background 0.2s ease;
}

/* When background image is placed inside the capsule, soften the capsule solid background */
.vf-section-services.vf-services-has-bg-img.vf-services-bg-mode-capsule .vf-services-capsule {
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 45%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 25%, transparent) 100%) !important;
}

/* When mode is 'section', soften the capsule so full-width section background and overlay are visible */
.vf-section-services.vf-services-bg-mode-section .vf-services-capsule,
.vf-section-services.vf-services-has-bg-img.vf-services-bg-mode-section .vf-services-capsule {
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 35%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 15%, transparent) 100%) !important;
}

.vf-services-capsule > *:not(.vf-services-capsule-bg) {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------
   Scroll Track & Sticky Viewport Pin
   ------------------------------------------------------------- */
.vf-services-track {
    position: relative;
    width: 100%;
    height: calc(var(--steps, 6) * 92vh);
    overflow: visible !important;
}

.vf-services-stick {
    position: sticky !important;
    top: 0;
    height: 100vh;
    /* The stable viewport, so the address bar sliding away does not resize a
       pinned panel mid-scroll. Identical to 100vh on desktop. */
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: calc(var(--inv-header-h, 60px) + var(--vf-services-padding-top, 40px)) !important;
    padding-bottom: var(--vf-services-padding-bottom, 60px) !important;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    pointer-events: auto;
}

/* -------------------------------------------------------------
   2-Column Editorial Header (Title Far Left, Subtitle Far Right)
   ------------------------------------------------------------- */
.vf-services-head.vf-services-header {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(1360px, 94vw);
    margin: 0 auto 0;
    padding: var(--vf-services-header-pad-top, 42px) clamp(16px, 3.5vw, 44px) var(--vf-services-header-spacing-bottom, 18px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.vf-services-header__left {
    flex: 0 1 auto;
    min-width: 0;
    max-width: var(--vf-services-title-max-width, 580px);
    text-align: start;
}

.vf-services-title {
    margin: 0;
    font-size: clamp(26px, 3.4vw, var(--vf-services-title-size, 40px));
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: var(--vf-services-title-weight, 700);
    color: var(--vf-services-title-color, var(--inv-fg, #0f172a));
}

.vf-services-header__right {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    text-align: end;
    padding-top: 3px;
}

.vf-services-subtitle {
    margin: 0;
    font-size: var(--vf-services-subtitle-size, 15px);
    line-height: 1.55;
    color: var(--vf-services-subtitle-color, #475569);
    max-width: var(--vf-services-subtitle-max-width, 480px);
    text-align: start;
}

/* =============================================================
   Schema-driven variables

   The Customizer writes these; the rules below are what makes
   them take effect. Breakpoint variants read as a fallback chain
   so a blank tablet or mobile value inherits the one above it.
   ============================================================= */

/* Glass plate padding behind the card text. */
.vf-services-readability-glass .card__body,
.vf-services-readability-both .card__body {
  padding: var(--vf-services-card-plate-pad, 18px);
}

/* Card imagery height. */
.vf-section-services .card__bg-img,
.vf-section-services .vf-services-parallax-img {
  height: var(--vf-services-img-height, 240px);
  object-fit: var(--vf-services-img-fit, cover);
}

/* Card geometry and type resolve per breakpoint in the compiled stylesheet. */
@media (max-width: 640px) {
.vf-services-readability-glass .card__body,
.vf-services-readability-both .card__body {
    padding: var(--vf-services-card-plate-pad, 14px);
  }
}


/* 02. Layout 1: Closed-Loop Kinetic Card Deck & Photo Cards */

/* ── services-deck.css ── */
/* =============================================================
   Inverta — Section: Services
   Module 2: Kinetic Card Deck & Photo Card Layers
   ============================================================= */

/* -------------------------------------------------------------
   Closed-Loop Deck
   ------------------------------------------------------------- */
.vf-services-deck {
    position: relative;
    width: var(--card-w);
    margin: 0 auto;
    height: calc(var(--card-w) * var(--card-r) + var(--peek) * 4);
}

/* -------------------------------------------------------------
   The Card: Full-Area Image Photo Card
   ------------------------------------------------------------- */
.vf-service-card.card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--card-w) * var(--card-r));
    padding: 32px 38px 24px;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    overflow: hidden;
    transform-origin: center bottom;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);

    /* Clean base with NO heavy layered shadows — pure, flat, crystal-clear */
    background: var(--vf-services-card-bg, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none !important;
}

/* Card Base Background Disabled (Transparent mode: pure image only) */
.vf-section-services.vf-services-card-bg-disabled .vf-service-card.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Depth Veil completely disabled to eliminate wavy visual artifacts */
.vf-service-card.card::after {
    display: none !important;
}

/* -------------------------------------------------------------
   Full-Area Image Media Layer
   ------------------------------------------------------------- */
.card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.card__bg-img {
    width: 100%;
    height: 100%;
    object-fit: var(--vf-services-img-fit, cover);
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.vf-service-card:hover .card__bg-img {
    transform: scale(1.02);
}

/* Luminous directional gradient scrim (brightens the left text area while keeping right photo crisp) */
.card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vf-services-scrim-light .card__media::after,
.card__media::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.88) 32%,
        rgba(255, 255, 255, 0.35) 60%,
        transparent 85%
    );
}

/* Dark Shadow Scrim (Schwarz / Tiefes Slate) */
.vf-services-scrim-dark .card__media::after {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.96) 0%,
        rgba(15, 23, 42, 0.88) 32%,
        rgba(15, 23, 42, 0.35) 60%,
        transparent 85%
    );
}

.vf-services-readability-gradient .vf-service-card--has-custom-img .card__media::after,
.vf-services-readability-both .vf-service-card--has-custom-img .card__media::after {
    opacity: var(--vf-services-card-scrim-opacity, 0.85);
}

/* Default Fallback Backdrop (when no custom image uploaded yet) */
.card__default-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6%;
    background: radial-gradient(circle at 82% 50%, rgba(36, 169, 179, 0.18) 0%, rgba(241, 245, 249, 0.95) 72%), #f8fafc;
}

.card__default-backdrop svg {
    max-height: 82%;
    width: auto;
    opacity: 0.45;
    filter: drop-shadow(0 14px 28px rgba(36, 169, 179, 0.25));
}

/* -------------------------------------------------------------
   Content Layer (Above Bright Image)
   ------------------------------------------------------------- */
.card__body,
.card__foot {
    position: relative;
    z-index: 2;
}

.card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--vf-services-card-desc-max-w, 540px);
    transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

/* Frosted Glass Plate for maximum text legibility over any photo */
.vf-services-readability-glass .vf-service-card--has-custom-img .card__body,
.vf-services-readability-both .vf-service-card--has-custom-img .card__body {
    background: rgba(255, 255, 255, var(--vf-services-card-plate-opacity, 0.78));
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    padding: clamp(18px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    box-shadow: 
        0 6px 24px -2px rgba(15, 23, 42, 0.08),
        0 1px 4px rgba(15, 23, 42, 0.04),
        inset 0 1px 1px 0 rgba(255, 255, 255, 1);
    align-self: flex-start;
    margin: auto 0;
    width: 100%;
    max-width: var(--vf-services-card-desc-max-w, 540px);
}

/* Dark mode glass plate when dark scrim tone is active */
.vf-services-scrim-dark.vf-services-readability-glass .vf-service-card--has-custom-img .card__body,
.vf-services-scrim-dark.vf-services-readability-both .vf-service-card--has-custom-img .card__body {
    background: rgba(15, 23, 42, var(--vf-services-card-plate-opacity, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 12px 32px -4px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.vf-services-scrim-dark .card__body h3 {
    color: #ffffff;
}

.vf-services-scrim-dark .card__body p {
    color: #cbd5e1;
}

.vf-services-scrim-dark .tag {
    background: rgba(30, 41, 59, 0.85);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.16);
}

.card__body h3 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, var(--vf-services-card-title-size, 34px));
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: var(--vf-services-card-title-weight, 700);
    color: var(--vf-services-card-title-color, var(--inv-accent, #24a9b3));
}

.card__body p {
    margin: 12px 0 0;
    font-size: var(--vf-services-card-desc-size, 15px);
    line-height: 1.6;
    color: var(--vf-services-card-desc-color, #334155);
    max-width: var(--vf-services-card-desc-max-w, 50ch);
    font-weight: var(--vf-services-card-desc-weight, 500);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.tag {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-services-tag-color, #0f172a);
    background: var(--vf-services-tag-bg, rgba(255, 255, 255, 0.85));
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hide tags when disabled in Customizer */
.vf-section-services.vf-services-hide-tags .tags {
    display: none !important;
}

/* -------------------------------------------------------------
   Card Foot Layer & Number Styling (Configurable Color, Size, Pos)
   ------------------------------------------------------------- */
.card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 12px;
}

.num {
    position: relative;
    font-size: var(--vf-services-num-size, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: .86;
    color: var(--vf-services-num-color, #0f172a);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Frosted glass badge around card number over photos */
.vf-service-card--has-custom-img .num {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.num::before {
    display: none !important;
}

/* Number Position Variants */
.vf-section-services.vf-services-num-pos-bottom-right .card__foot {
    justify-content: flex-end;
}

.vf-section-services.vf-services-num-pos-bottom-left .card__foot {
    justify-content: flex-start;
}

.vf-section-services.vf-services-num-pos-top-right .card__foot {
    position: absolute;
    top: 24px;
    right: 32px;
    margin: 0;
    z-index: 5;
}

.vf-section-services.vf-services-num-pos-top-left .card__foot {
    position: absolute;
    top: 24px;
    left: 32px;
    margin: 0;
    z-index: 5;
}

/* -------------------------------------------------------------
   The deck needs the capsule to stop clipping

   The kinetic deck pins itself with `position: sticky` on
   .vf-services-stick, inside a .vf-services-track several
   viewports tall. Sticky is defeated by any ancestor that clips,
   and in capsule mode the capsule does exactly that —
   `overflow: hidden !important`, so the rounded corners cut the
   background image.

   The result was a deck that never pinned and never scrolled. All
   five cards are absolutely positioned in the same place and the
   JavaScript spreads them apart as the pin advances, so with the
   pin gone there was exactly one card on screen and nothing moved.
   That is the whole of "kinetisches Deck zeigt nur eine Karte".

   The capsule's own rounding survives: its background sits in
   .vf-services-capsule-bg, which clips itself.
   ------------------------------------------------------------- */
.vf-section-services.vf-services-layout-mode-kinetic_deck.vf-services-capsule-mode .vf-services-capsule {
    overflow: visible !important;
}


/* 03. Layout 2 & 3: Static Grids (Bento & 3-Column Columns) */

/* ── services-grid.css ── */
/* =============================================================
   Inverta — Section: Services
   Module 3: Static Grids (Bento & 3-Column Columns)
   ============================================================= */

/* -------------------------------------------------------------
   Static Grid Layouts (Bento & Columns)
   ------------------------------------------------------------- */
.vf-services-static-wrap {
    width: 100%;
    max-width: min(1360px, 94vw);
    margin: 0 auto;
    padding-top: var(--vf-services-padding-top, 40px);
    padding-bottom: var(--vf-services-padding-bottom, 60px);
    padding-left: clamp(16px, 3.5vw, 44px);
    padding-right: clamp(16px, 3.5vw, 44px);
}

.vf-services-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    margin-top: 24px;
}

/* 1. Bento Grid Architecture */
.vf-services-grid--bento {
    grid-template-columns: repeat(12, 1fr);
}

.vf-services-grid--bento .vf-service-card--static:nth-child(1) {
    grid-column: span 7;
}

.vf-services-grid--bento .vf-service-card--static:nth-child(2) {
    grid-column: span 5;
}

.vf-services-grid--bento .vf-service-card--static:nth-child(3) {
    grid-column: span 4;
}

.vf-services-grid--bento .vf-service-card--static:nth-child(4) {
    grid-column: span 4;
}

.vf-services-grid--bento .vf-service-card--static:nth-child(5) {
    grid-column: span 4;
}

/* 2. 3-Column Standard Card Grid */
.vf-services-grid--columns {
    grid-template-columns: repeat(3, 1fr);
}

/* Static Card Base */
.vf-service-card--static {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    padding: 32px 30px 24px;
    min-height: var(--vf-services-card-min-h, 340px);
    background: var(--vf-services-card-bg, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.vf-service-card--static:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.12);
}

.vf-service-card--static .card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.vf-service-card--static .card__bg-img {
    width: 100%;
    height: 100%;
    object-fit: var(--vf-services-img-fit, cover);
    object-position: center;
    display: block;
}

.vf-service-card--static .card__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vf-service-card--static .card__foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 16px;
}


/* 04. Layout 4: Über-die-Firma Style (Glass-Cut & Chip Pillars) */

/* ── services-pillars.css ── */
/* =============================================================
   Inverta — Section: Services
   Module 5: Layout Variant 4 (Über-die-Firma Style: Glass-Cut & Chip)
   ============================================================= */

.vf-services-about-layout {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px);
}

.vf-services-about-pillars-wrap {
    position: relative;
    width: 100%;
    margin-top: clamp(28px, 4vw, 48px);
}

.vf-services-pillars-glow {
    position: absolute;
    inset: -20px -30px;
    z-index: 0;
    pointer-events: none;
    background: 
        radial-gradient(ellipse 55% 48% at 20% 45%, rgba(36, 169, 179, 0.40) 0%, transparent 68%),
        radial-gradient(ellipse 52% 48% at 80% 55%, rgba(14, 165, 233, 0.35) 0%, transparent 62%),
        radial-gradient(ellipse 75% 40% at 50% 50%, rgba(20, 184, 166, 0.30) 0%, transparent 70%);
    /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
       jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
    opacity: 0.85;
    /* Die Lichter reichen bis an die Kante ihres Kastens. Mit filter: blur()
       war die Kante weich; seit 1.7.23 ist der Filter weg (Safari ruckelte),
       und durch das Glas der Karten stand sie als senkrechter Strich — in
       Firefox noch deutlicher. Die Maske blendet zum Rand hin aus. */
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

.vf-services-about-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: start;
    position: relative;
    z-index: 2;
    --accent: var(--vf-services-accent-color, var(--inv-accent, #24a9b3));
    --ink: var(--vf-services-title-color, var(--inv-fg, #0f172a));
    --ink-dim: var(--vf-services-subtitle-color, #475569);
    --glass-blur: 20px;
    --card-bg: var(--vf-services-card-bg, #ffffff);
    --card-path: path("M44 0 H477 A44 44 0 0 1 521 44 V356 A44 44 0 0 1 477 400 H339.9 A60 60 0 0 0 297.4 417.6 L206.7 508.3 A40 40 0 0 1 178.4 520 H44 A44 44 0 0 1 0 476 V44 A44 44 0 0 1 44 0 Z");
    --chip-path: path("M82.9 0 H230 A34 34 0 0 1 264 34 V66 A34 34 0 0 1 230 100 H24.3 A24 24 0 0 1 7.3 59 L54.6 11.7 A40 40 0 0 1 82.9 0 Z");
}

@media (min-width: 992px) {
    .vf-services-about-pillars {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .vf-services-about-pillars {
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    }
}

.vf-services-about-pillars .stage {
    position: relative;
    width: 100%;
    aspect-ratio: 521 / 520;
    isolation: isolate;
    transition: filter 0.3s ease;
    will-change: transform, opacity;
    filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.05));
}

.vf-services-about-pillars .stage:hover {
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.10));
}

.vf-services-about-pillars .glass {
    position: absolute;
    inset: 0;
    clip-path: var(--card-path);
    -webkit-clip-path: var(--card-path);
    clip-path: url(#vf-services-card-clip);
    -webkit-clip-path: url(#vf-services-card-clip);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.vf-services-about-pillars .chip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50.67%;
    height: 19.23%;
    clip-path: var(--chip-path);
    -webkit-clip-path: var(--chip-path);
    clip-path: url(#vf-services-chip-clip);
    -webkit-clip-path: url(#vf-services-chip-clip);
    display: grid;
    place-items: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.vf-services-about-pillars .stage:hover .glass {
    transform: translate(-3px, -3px);
}

.vf-services-about-pillars .stage:hover .chip {
    transform: translate(5px, 5px);
}

.vf-services-about-pillars .body {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.04);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.04);
    background: 
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 94%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 80%, transparent) 100%),
        var(--card-bg);
}

.vf-services-about-pillars .grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.85;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.vf-services-about-pillars .edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vf-services-about-pillars .edge path {
    fill: none;
    stroke: url(#edgeGradServicesLight);
    stroke-width: 1.5;
}

.vf-services-about-pillars .edge path.inner {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2.5;
    opacity: 0.6;
}

.vf-services-about-pillars .content {
    position: relative;
    z-index: 3;
    padding: clamp(1.2rem, 2.2vw, 1.8rem);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vf-services-about-pillars .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.vf-services-about-pillars .title {
    font-size: var(--vf-services-card-title-size, 20px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--vf-services-card-title-color, var(--inv-accent, #24a9b3));
    margin: 0;
}

.vf-services-about-pillars .title em {
    font-style: normal;
    color: var(--accent);
    display: inline;
}

.vf-services-about-pillars .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: var(--vf-services-tag-bg, rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vf-services-tag-color, var(--ink));
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.vf-services-about-pillars .badge svg {
    width: 13px;
    height: 13px;
    stroke: var(--accent);
    flex-shrink: 0;
}

.vf-services-about-pillars .caption {
    font-size: var(--vf-services-card-desc-size, 14px);
    line-height: 1.5;
    color: var(--vf-services-card-desc-color, var(--ink-dim));
    margin: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vf-services-about-pillars .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    padding-right: 48%; /* leaves space for bottom-right chip */
}

.vf-services-about-pillars .tags .tag {
    font-size: 11px;
    font-weight: 500;
    padding: 2.5px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--vf-services-subtitle-color, #475569);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.vf-services-about-pillars .chip .content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-bottom: 4px;
}

.vf-services-about-pillars .chip .num {
    font-size: var(--vf-services-num-size, 26px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--vf-services-num-color, var(--ink));
    line-height: 1;
}

.vf-services-about-vector-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68%;
    height: 68%;
    opacity: 0.16;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.vf-services-about-pillars .stage:hover .vf-services-about-vector-wrap {
    opacity: 0.30;
    transform: translate(-50%, -52%) scale(1.05);
}

.vf-services-about-vector-wrap svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vf-services-about-pillars .vf-pillar-media--cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    opacity: 0.22;
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.vf-services-about-pillars .stage:hover .vf-pillar-media--cover {
    opacity: 0.38;
    transform: scale(1.04);
}

.vf-services-about-pillars .vf-pillar-media--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 05. Layout 5: Full-Capsule Parallax Scroll (Codrops Style) */

/* ── services-parallax.css ── */
/* =============================================================
   Inverta — Section: Services
   Module 6: Layout Variant 5 (Full-Capsule Parallax Scroll: Codrops Style)
   ============================================================= */

.vf-section-services.vf-services-layout-mode-infinite_parallax.vf-services-capsule-mode .vf-services-capsule {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--vf-services-radius, 20px) !important;
}

.vf-section-services.vf-services-layout-mode-infinite_parallax .vf-services-capsule-bg {
    display: none !important;
}

/* Sizing the pinned deck to the screen.
 *
 * The whole section is given the free height of the viewport, and inside it
 * the capsule is a column: the intro heading takes what it needs, and the card
 * takes everything that is left. That last part is the point — the heading is
 * two lines on a wide screen and four on a narrow one, and no arithmetic here
 * can know which.
 *
 * Two earlier attempts got this wrong in instructive ways. The first wrote an
 * inline pixel height from JavaScript, capped at 760px: the deck never grew on
 * a large monitor, and no rule could reach the value because an inline style
 * outranks every stylesheet. The second measured the viewport correctly but
 * gave that whole height to the card alone — then the heading above it pushed
 * the card down by its own height, and the bottom of the card fell off the
 * screen. Hence a section you had to scroll to finish.
 *
 * 100svh, not 100dvh: the stable viewport, so a phone's address bar sliding
 * away cannot resize a pinned deck mid-scroll. */
.vf-section-services.vf-services-layout-mode-infinite_parallax {
    --vf-services-h-avail:
        calc(100svh
            - var(--vf-adminbar-h, 0px)
            - var(--inv-header-bar-pt, 10px)
            - var(--inv-header-bar-h, 60px)
            - var(--vf-services-h-gap, 28px));

    box-sizing: border-box;
    height: min(var(--vf-services-h-avail), var(--vf-services-h-max, 920px));
    min-height: min(var(--vf-services-h-min, 420px), var(--vf-services-h-avail));
}

.vf-section-services.vf-services-layout-mode-infinite_parallax .vf-services-capsule {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The heading keeps its natural height... */
.vf-section-services.vf-services-layout-mode-infinite_parallax .vf-services-parallax-head {
    flex: 0 0 auto;
}

/* ...and the card takes the rest, whatever that turns out to be. */
.vf-services-parallax-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--vf-services-radius, 20px) !important;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The intro header, above the card.
 *
 * It is a sibling of the card now rather than its first child, so it needs no
 * positioning of its own — the shared rule in services-base.css lays it out,
 * and this only adds the breathing room the parallax card wants underneath.
 *
 * The previous version made it absolute and floated it over the photograph.
 * That took two attempts to get wrong in two different ways: first the shared
 * rule outranked it and the header dropped into flow inside the card, then it
 * floated and sat on a picture that was never meant to carry type.
 */
.vf-services-layout-mode-infinite_parallax .vf-services-head.vf-services-parallax-head {
    margin-bottom: clamp(14px, 2vw, 26px);
}

.vf-services-parallax-head * {
    pointer-events: auto;
}

/* The card is the whole capsule now, so the picture has the full height to
   fill. The header floats over its top edge and the number sits in the corner
   of the photograph, not in a strip of background below it. */
.vf-services-layout-mode-infinite_parallax .vf-services-capsule {
    display: block;
}

.vf-services-parallax-head .vf-services-title {
    color: var(--vf-services-title-color, #ffffff) !important;
    text-shadow: none !important;
}

.vf-services-parallax-head .vf-services-subtitle {
    color: var(--vf-services-subtitle-color, rgba(241, 245, 249, 0.92)) !important;
    text-shadow: none !important;
}

/* Stacked Full-Capsule Slides */
.vf-services-parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--vf-services-radius, 20px) !important;
}

.vf-services-parallax-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--vf-services-radius, 20px) !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(28px, 4vw, 54px) clamp(24px, 4vw, 56px);
    padding-bottom: var(--vf-services-card-content-bottom, clamp(28px, 4vw, 54px)) !important;
    box-sizing: border-box;
    will-change: clip-path, transform;
    clip-path: inset(0% 0% 0% 0%);
    isolation: isolate;
    contain: paint;
}

.vf-services-parallax-hero:not(:first-child) {
    clip-path: inset(100% 0% 0% 0%);
}

.vf-services-parallax-hero:nth-child(1) { z-index: 1; }

.vf-services-parallax-hero:nth-child(2) { z-index: 2; }

.vf-services-parallax-hero:nth-child(3) { z-index: 3; }

.vf-services-parallax-hero:nth-child(4) { z-index: 4; }

.vf-services-parallax-hero:nth-child(5) { z-index: 5; }

.vf-services-parallax-hero:nth-child(6) { z-index: 6; }

.vf-services-parallax-hero:nth-child(7) { z-index: 7; }

.vf-services-parallax-hero:nth-child(8) { z-index: 8; }

/* Parallax Picture & Image */
/* Two absolute fills, not a chain of percentage heights.
 *
 * `height: 100%` only resolves when every ancestor above it has a height the
 * browser can already answer. One link in that chain resolving to `auto` — a
 * flex item, a pinned container mid-refresh, a <picture> that is inline by
 * default — and the image stops short, leaving the card's own background
 * showing underneath it as a band. Pinning the image to its own edges cannot
 * collapse that way. */
.vf-services-parallax-picture {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: block;
    overflow: hidden;
    will-change: transform;
}

.vf-services-parallax-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* The card is the picture: nothing of the card should be visible beside it. */
.vf-services-parallax-hero,
.vf-services-parallax-container {
    min-height: 100%;
}

/* Light, Natural Scrim for High Image Brightness */
.vf-services-parallax-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.48) 100%);
    opacity: var(--vf-services-card-scrim-opacity, 0.8);
    transition: opacity 0.3s ease, background 0.3s ease;
}

/* Slide Content */
.vf-services-parallax-content {
    position: relative;
    z-index: 3;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0;
    will-change: transform;
    transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

/* Readability Mode 1: Glass Plate */
.vf-section-services.vf-services-readability-glass .vf-services-parallax-content,
.vf-section-services.vf-services-readability-both .vf-services-parallax-content {
    background: rgba(15, 23, 42, calc(var(--vf-services-card-plate-opacity, 0.75) * 0.75));
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.45);
}

.vf-section-services.vf-services-scrim-light.vf-services-readability-glass .vf-services-parallax-content,
.vf-section-services.vf-services-scrim-light.vf-services-readability-both .vf-services-parallax-content {
    background: rgba(255, 255, 255, calc(var(--vf-services-card-plate-opacity, 0.75) * 0.85));
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.15);
}

/* Readability Mode 2: Gradient only (Luminous Gradient without glass plate container) */
.vf-section-services.vf-services-readability-gradient .vf-services-parallax-content {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.vf-section-services.vf-services-readability-gradient .vf-services-parallax-scrim,
.vf-section-services.vf-services-readability-both .vf-services-parallax-scrim {
    display: block !important;
    opacity: var(--vf-services-card-scrim-opacity, 0.85) !important;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.55) 50%, transparent 100%),
                linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.75) 100%) !important;
}

.vf-section-services.vf-services-scrim-light.vf-services-readability-gradient .vf-services-parallax-scrim,
.vf-section-services.vf-services-scrim-light.vf-services-readability-both .vf-services-parallax-scrim {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%),
                linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.85) 100%) !important;
}

/* Readability Mode 4: None */
.vf-section-services.vf-services-readability-none .vf-services-parallax-scrim {
    display: none !important;
    opacity: 0 !important;
}

.vf-section-services.vf-services-readability-none .vf-services-parallax-content {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Scrim Tone: Light vs Dark */
.vf-section-services.vf-services-scrim-light .vf-services-parallax-scrim {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(248, 250, 252, 0.95) 100%) !important;
}

.vf-section-services.vf-services-scrim-light .vf-services-parallax-head .vf-services-title {
    color: var(--vf-services-title-color, var(--inv-fg, #0f172a)) !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-light .vf-services-parallax-head .vf-services-subtitle {
    color: var(--vf-services-subtitle-color, #334155) !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-light:not(.vf-services-readability-glass):not(.vf-services-readability-both) .vf-services-parallax-title {
    color: #0f172a !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-light:not(.vf-services-readability-glass):not(.vf-services-readability-both) .vf-services-parallax-desc {
    color: #334155 !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-light.vf-services-readability-glass .vf-services-parallax-title,
.vf-section-services.vf-services-scrim-light.vf-services-readability-both .vf-services-parallax-title {
    color: #0f172a !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-light.vf-services-readability-glass .vf-services-parallax-desc,
.vf-section-services.vf-services-scrim-light.vf-services-readability-both .vf-services-parallax-desc {
    color: #334155 !important;
    text-shadow: none !important;
}

.vf-section-services.vf-services-scrim-dark .vf-services-parallax-scrim {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.45) 40%, rgba(15, 23, 42, 0.92) 100%) !important;
}

.vf-services-parallax-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    width: fit-content;
}

.vf-services-parallax-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--vf-services-accent-color, var(--inv-accent, #24a9b3));
    font-variant-numeric: tabular-nums;
}

.vf-services-parallax-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.vf-services-parallax-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}

.vf-services-parallax-title {
    font-size: var(--vf-services-card-title-size, clamp(30px, 4.8vw, 52px)) !important;
    font-weight: var(--vf-services-card-title-weight, 800) !important;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--vf-services-card-title-color, var(--inv-accent, #24a9b3)) !important;
    text-shadow: none !important;
    margin: 0 0 var(--vf-services-card-title-spacing, 12px) 0 !important;
}

.vf-services-parallax-desc {
    font-size: var(--vf-services-card-desc-size, clamp(14px, 1.5vw, 17px)) !important;
    font-weight: var(--vf-services-card-desc-weight, 400) !important;
    line-height: 1.55;
    color: var(--vf-services-card-desc-color, rgba(241, 245, 249, 0.92)) !important;
    max-width: var(--vf-services-card-desc-max-w, 540px) !important;
    margin: 0 0 var(--vf-services-card-desc-spacing, 16px) 0 !important;
    text-shadow: none !important;
}

.vf-services-parallax-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 14px;
}

.vf-services-parallax-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.vf-services-parallax-hero:hover .vf-services-parallax-tag {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(36, 169, 179, 0.4);
}

.vf-services-parallax-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 4px;
}

/* "Ausrichtung" als Klasse, nicht als Variable.
   Als Variable musste der Renderer links/rechts erst auf CSS-Woerter
   uebersetzen; wer das vergass, bekam justify-content: left — das wirkt wie
   flex-start, dreht aber in einer RTL-Sprache nicht mit. */
.vf-services-cta-align-center .vf-services-parallax-actions { justify-content: center; }
.vf-services-cta-align-right  .vf-services-parallax-actions { justify-content: flex-end; }

/* "Button anzeigen" aus. Vorher taten das drei Dinge gleichzeitig: diese
   Klasse gab es nicht, --vf-services-cta-show setzte das <a> auf none, und der
   Renderer schrieb zusaetzlich style="display:none" an den Wrapper. */
.vf-services-cta-off .vf-services-parallax-actions { display: none; }

/* Identical to "Termin buchen" button in header */
.vf-services-parallax-cta.inv-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 20px;
    height: 38px;
    border-radius: var(--vf-services-cta-radius, 10px) !important;
    background: var(--vf-services-cta-bg, linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%)) !important;
    color: var(--vf-services-cta-color, #0f172a) !important;
    font-size: var(--vf-services-cta-size, 14.5px) !important;
    font-weight: var(--vf-services-cta-weight, 550) !important;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 
        0 4px 16px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        0 0 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease !important;
    cursor: pointer;
}

.vf-services-parallax-cta.inv-cta:hover {
    /* Eigene Hover-Farbe, sonst die gewaehlte Grundfarbe, sonst der
       Standardverlauf. Das Schema schreibt --vf-services-cta-hover-bg als Alias
       von "Button-Hintergrund"; die mittlere Stufe greift, falls jemand nur die
       Grundfarbe setzt. */
    background: var(--vf-services-cta-hover-bg, var(--vf-services-cta-bg, linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35) 100%))) !important;
    color: var(--vf-services-cta-color, #0f172a) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) !important;
    border-top-color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 
        0 6px 22px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55),
        0 0 20px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        inset 0 1.5px 1px 0 #ffffff !important;
}

.vf-services-parallax-cta.inv-cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.vf-services-parallax-cta > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.vf-services-parallax-cta .txt-anim {
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    height: 1.4em !important;
    vertical-align: middle !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.vf-services-parallax-cta .txt-anim__inner {
    display: block !important;
    position: relative !important;
    transform: translateY(0);
    will-change: transform;
    text-align: center !important;
    width: 100% !important;
}

.vf-services-parallax-cta .txt-anim__inner::after {
    content: attr(data-text);
    position: absolute !important;
    top: 130% !important;
    left: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
}

html:not(.js-gsap) .vf-services-parallax-cta .txt-anim__inner {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html:not(.js-gsap) .vf-services-parallax-cta:hover .txt-anim__inner {
    transform: translateY(-130%);
}

/* Corner Number (01, 02, 03...) - Responsive Positioning & Variable Size */
/* The photo fills the whole card, so the number needs to sit above every
   layer of it and carry its own contrast. */
.vf-services-parallax-corner-num {
    position: absolute;
    z-index: 12;
    display: flex;
    align-items: baseline;
    pointer-events: none;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vf-services-parallax-corner-num span {
    font-family: var(--font-heading, "Inter Tight", sans-serif);
    font-size: var(--vf-services-num-size, clamp(34px, 4.5vw, 58px)) !important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--vf-services-num-color, rgba(255, 255, 255, 0.95)) !important;
    /* A tight dark ring under the glow. A white number reads on a dark photo
       from the glow alone, but the moment a card's bottom corner lands on a
       pale desk or a bright sky it disappears — the ring is what keeps it
       legible on both without choosing the colour for anybody. */
    text-shadow:
        0 0 1px rgba(15, 23, 42, 0.85),
        0 1px 3px rgba(15, 23, 42, 0.55),
        0 2px 14px rgba(15, 23, 42, 0.6);
    font-variant-numeric: tabular-nums;
}

.vf-section-services.vf-services-scrim-light .vf-services-parallax-corner-num span {
    color: var(--vf-services-num-color, #0f172a) !important;
    text-shadow: 0 2px 14px rgba(255, 255, 255, 0.75);
}

/* Position 1: Bottom-Right (Default) */
.vf-section-services.vf-services-num-pos-bottom-right .vf-services-parallax-corner-num {
    right: clamp(24px, 4vw, 56px);
    left: auto;
    bottom: clamp(20px, 3.5vw, 44px);
    top: auto;
}

/* Position 2: Bottom-Left */
.vf-section-services.vf-services-num-pos-bottom-left .vf-services-parallax-corner-num {
    left: clamp(24px, 4vw, 56px);
    right: auto;
    bottom: clamp(20px, 3.5vw, 44px);
    top: auto;
}

/* Position 3: Top-Right */
.vf-section-services.vf-services-num-pos-top-right .vf-services-parallax-corner-num {
    right: clamp(24px, 4vw, 56px);
    left: auto;
    top: calc(var(--vf-services-header-pad-top, 40px) + 90px);
    bottom: auto;
}

/* Position 4: Top-Left */
.vf-section-services.vf-services-num-pos-top-left .vf-services-parallax-corner-num {
    left: clamp(24px, 4vw, 56px);
    right: auto;
    top: calc(var(--vf-services-header-pad-top, 40px) + 90px);
    bottom: auto;
}

/* Fallback default position if class not on section yet */
.vf-section-services:not([class*="vf-services-num-pos-"]) .vf-services-parallax-corner-num {
    right: clamp(24px, 4vw, 56px);
    left: auto;
    bottom: clamp(20px, 3.5vw, 44px);
    top: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Phones: the same viewport measurement with less air under the header,
       and a ceiling on top of whatever was chosen — so the two height options
       still apply here instead of being overridden outright. */
    .vf-section-services.vf-services-layout-mode-infinite_parallax {
        --vf-services-h-gap: 18px;
        max-height: min(var(--vf-services-h-max, 920px), 680px);
    }

.vf-services-parallax-hero {
        padding: 24px 18px;
    }

.vf-services-parallax-head {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 18px 16px;
    }

.vf-services-parallax-watermark {
        display: none;
    }

.vf-services-parallax-title {
        font-size: 28px !important;
    }

.vf-services-parallax-desc {
        font-size: 13px !important;
    }

.vf-services-parallax-cta {
        padding: 9px 18px;
        font-size: 13px !important;
    }
}

/* Short screens — a landscape phone, a laptop with a small window. The deck
   already shrinks to fit; this is so its contents shrink with it instead of
   being cropped by the card they sit in. */
@media (max-height: 620px) {
    .vf-services-parallax-hero {
        padding: 18px 16px;
    }

    .vf-services-parallax-title {
        font-size: clamp(20px, 3.6vh, 30px) !important;
    }

    .vf-services-parallax-desc {
        font-size: clamp(12px, 2vh, 14px) !important;
        -webkit-line-clamp: 2;
    }

    .vf-services-parallax-watermark,
    .vf-services-parallax-corner-num {
        display: none;
    }
}

@media (max-width: 640px) {
.vf-section-services.vf-services-layout-mode-infinite_parallax.vf-services-capsule-mode .vf-services-capsule,
.vf-services-parallax-wrap,
.vf-services-parallax-container,
.vf-services-parallax-hero {
        border-radius: 16px !important;
    }
}

/* Die Überschrift über den Bildkarten klebte auf Tablet und Telefon an der
   Oberkante der Kapsel: dort hat die Kapsel keinen Innenabstand, und der
   Kopf bekam oben 0 (die Option „Abstand oben“ steht ab Werk auf 0) und
   seitlich 4 px. Gemessen beim Freund am 22.10.2026: 1 px Abstand nach oben,
   auf dem Computer 43 px. Die Option gilt weiter, nur nie unter dem Mindestmaß;
   auf dem Telefon steht der Text bündig mit dem Text in den Karten. */
@media (max-width: 1024px) {
    .vf-section-services.vf-services-layout-mode-infinite_parallax .vf-services-head.vf-services-header {
        padding-top: max(var(--vf-services-header-pad-top-tab, 0px), clamp(18px, 3.4vw, 30px));
    }
}

@media (max-width: 640px) {
    .vf-section-services.vf-services-layout-mode-infinite_parallax .vf-services-head.vf-services-header {
        padding-top: max(var(--vf-services-header-pad-top-mob, var(--vf-services-header-pad-top-tab, 0px)), 18px);
        padding-inline: 8px;
    }
}


/* 06. Media Queries: Tablet, Mobile, Small Devices & Accessibility */

/* ── services-responsive.css ── */
/*
 * Warum jeder Telefon-Wert hier über den Tablett-Wert zurückfällt.
 *
 * Der Mechanismus hinter den Geräte-Reglern schaltet bei 1024px auf den
 * Tablett-Wert und bei 640px auf den Telefon-Wert. Diese Datei schaltet bei
 * 1024, 768 und 480 um — der Entwurf hat seine eigenen Breiten, und das ist
 * in Ordnung. Nicht in Ordnung war, was dazwischen passierte: zwischen 641
 * und 768 las die Regel --x-mob, der Regler hatte dort aber den Tablett-Wert
 * gemeint. Wer nur das Tablett eingestellt hatte, sah in diesem Streifen
 * wieder die Zahl aus dem Entwurf.
 *
 * Mit der Kette var(--x-mob, var(--x-tab, Entwurf)) ist die genaue Breite
 * gleichgültig: das Telefon gewinnt, wo es etwas zu sagen hat, sonst das
 * Tablett, sonst der Entwurf. Geprüft von tools/tests/device_vars.php.
 * Gemessen am 06.10.2026.
 */
/* =============================================================
   Inverta — Section: Services
   Module 4: Responsive Media Queries & Reduced Motion
   ============================================================= */

/* -------------------------------------------------------------
   Responsive Breakpoints: Desktop, Tablet, Mobile & Small Mobile
   ------------------------------------------------------------- */

/* 1. Tablet Viewports (769px - 1024px) */
@media (max-width: 1024px) {:root {
        --card-w: min(720px, calc(92vw - 2 * var(--inv-section-px, var(--inv-edge, 8px))));
        --card-r: 0.50;
        --peek: 38px;
        --dip: 230px;
    }

.vf-section-services {
        --card-w: min(720px, calc(92vw - 2 * var(--inv-section-px, var(--inv-edge, 8px)))) !important;
        --card-r: 0.50 !important;
        --peek: 38px !important;
        --dip: 230px !important;
    }

.vf-services-stick {
        padding: calc(var(--inv-header-h, 54px) + 16px) 18px 30px !important;
        gap: 14px;
    }

/* Tablet Header: Stack cleanly to give title & subtitle maximum breathing room */
    .vf-services-head.vf-services-header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 18px;
        /*
         * Die 0 oben war eine Zahl, und damit war „Abstand oben“ unter
         * 1024px ohne Wirkung — in jeder der drei Breiten hier. Gemessen am
         * 06.10.2026: 0px blieb 0px, egal was der Regler sagte. Jetzt liest
         * jede Breite ihren eigenen Wert und faellt auf die 0 von vorher
         * zurueck.
         */
        padding: var(--vf-services-header-pad-top-tab, 0) clamp(16px, 3vw, 32px);
    }

.vf-services-header__left,
.vf-services-header__right {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: start;
        justify-content: flex-start;
        padding-top: 0;
    }

.vf-services-title {
        font-size: clamp(24px, 3.4vw, 34px) !important;
        line-height: 1.15;
    }

.vf-services-subtitle {
        font-size: clamp(14px, 1.8vw, 15.5px) !important;
        line-height: 1.5;
        max-width: 660px;
        text-align: start;
    }

/* Tablet Cards */
    .vf-service-card.card {
        min-height: var(--vf-services-card-min-h-tab, 300px) !important;
        padding: 26px 30px 20px !important;
        border-radius: 24px !important;
    }

.card__body h3 {
        font-size: var(--vf-services-card-title-size-tab, 24px) !important;
        line-height: 1.2;
    }

.card__body p {
        font-size: var(--vf-services-card-desc-size-tab, 14px) !important;
        margin-top: 8px !important;
        line-height: 1.5;
        max-width: 52ch;
    }

.tags {
        margin-top: 14px;
        gap: 7px;
    }

.tag {
        font-size: 12px;
        padding: 5px 12px;
    }

.num {
        font-size: 26px !important;
    }

/* Static Grid on Tablet */
    .vf-services-grid--bento,
.vf-services-grid--columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

.vf-services-grid--bento .vf-service-card--static:nth-child(n) {
        grid-column: span 1 !important;
    }
}

/* 2. Mobile Viewports (481px - 768px) */
@media (max-width: 768px) {:root {
        --card-w: min(100%, calc(93vw - 2 * var(--inv-section-px, var(--inv-edge, 8px))));
        --card-r: 0.78;
        --peek: 28px;
        --dip: 180px;
    }

.vf-section-services {
        --card-w: min(100%, calc(93vw - 2 * var(--inv-section-px, var(--inv-edge, 8px)))) !important;
        --card-r: 0.78 !important;
        --peek: 28px !important;
        --dip: 180px !important;
    }

.vf-section-services.vf-services-capsule-mode {
        margin-top: 14px !important;
        padding: 0 var(--inv-section-px, var(--inv-edge, 8px)) 12px var(--inv-section-px, var(--inv-edge, 8px)) !important;
    }

.vf-section-services.vf-services-capsule-mode .vf-services-capsule {
        border-radius: var(--inv-mob-radius, 20px) !important;
    }

.vf-services-stick {
        padding: calc(var(--inv-header-h, 52px) + 10px) 10px 18px !important;
        gap: 10px !important;
    }

/* Mobile Header */
    .vf-services-head.vf-services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        padding: var(--vf-services-header-pad-top-mob, var(--vf-services-header-pad-top-tab, 0)) 10px;
    }

.vf-services-header__left,
.vf-services-header__right {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: flex-start;
        text-align: start;
        padding-top: 0;
    }

.vf-services-title {
        font-size: clamp(21px, 5.4vw, 27px) !important;
        line-height: 1.18;
    }

.vf-services-subtitle {
        font-size: clamp(13px, 3.4vw, 14.5px) !important;
        line-height: 1.45;
        max-width: 100%;
    }

/* Mobile Deck & Cards */
    .vf-services-deck {
        min-height: calc(var(--vf-services-card-min-h-mob, var(--vf-services-card-min-h-tab, 270px)) + var(--peek) * 4) !important;
    }

.vf-service-card.card {
        padding: 20px 20px 16px !important;
        border-radius: 20px !important;
        min-height: var(--vf-services-card-min-h-mob, var(--vf-services-card-min-h-tab, 270px)) !important;
    }

.card__body {
        max-width: 100% !important;
    }

.card__body h3 {
        font-size: var(--vf-services-card-title-size-mob, var(--vf-services-card-title-size-tab, 18px)) !important;
        line-height: 1.22;
        letter-spacing: -0.025em;
    }

.card__body p {
        font-size: var(--vf-services-card-desc-size-mob, var(--vf-services-card-desc-size-tab, 13px)) !important;
        line-height: 1.45 !important;
        margin-top: 6px !important;
        max-width: 100% !important;
    }

.tags {
        gap: 5px !important;
        margin-top: 10px !important;
    }

.tag {
        font-size: 11px !important;
        padding: 4px 9px !important;
        font-weight: 550;
    }

.card__foot {
        margin-top: 8px !important;
    }

.num {
        font-size: 21px !important;
    }

/* Static Grid on Mobile */
    .vf-services-grid--bento,
.vf-services-grid--columns {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

.vf-services-grid--bento .vf-service-card--static {
        grid-column: span 1 !important;
    }

.vf-service-card--static {
        min-height: 260px !important;
        padding: 22px 20px 18px !important;
        border-radius: 20px !important;
    }

.vf-services-readability-glass .vf-service-card--has-custom-img .card__body,
.vf-services-readability-both .vf-service-card--has-custom-img .card__body {
        padding: var(--vf-services-card-plate-pad-mob, var(--vf-services-card-plate-pad-tab, 14px)) !important;
        border-radius: 16px;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.88);
    }
}

/* 3. Small Mobile Devices (<= 480px) */
@media (max-width: 480px) {:root {
        --card-w: calc(100vw - 24px - 2 * var(--inv-section-px, var(--inv-edge, 6px)));
        --card-r: 0.86;
        --peek: 22px;
        --dip: 150px;
    }

.vf-section-services {
        --card-w: calc(100vw - 24px - 2 * var(--inv-section-px, var(--inv-edge, 6px))) !important;
        --card-r: 0.86 !important;
        --peek: 22px !important;
        --dip: 150px !important;
    }

.vf-services-stick {
        padding: calc(var(--inv-header-h, 48px) + 6px) 6px 12px !important;
        gap: 8px !important;
    }

.vf-services-head.vf-services-header {
        padding: var(--vf-services-header-pad-top-mob, var(--vf-services-header-pad-top-tab, 0)) 4px;
        margin-bottom: 8px;
        gap: 5px;
    }

.vf-services-title {
        font-size: clamp(19px, 5.6vw, 23px) !important;
        line-height: 1.2;
    }

.vf-services-subtitle {
        font-size: 12.5px !important;
        line-height: 1.4;
    }

.vf-services-deck {
        min-height: calc(var(--vf-services-card-min-h-mob, var(--vf-services-card-min-h-tab, 255px)) + var(--peek) * 4) !important;
    }

.vf-service-card.card {
        padding: 16px 16px 12px !important;
        border-radius: 18px !important;
        min-height: var(--vf-services-card-min-h-mob, var(--vf-services-card-min-h-tab, 255px)) !important;
    }

.card__body h3 {
        font-size: var(--vf-services-card-title-size-mob, var(--vf-services-card-title-size-tab, 18px)) !important;
        line-height: 1.2;
    }

.card__body p {
        font-size: var(--vf-services-card-desc-size-mob, var(--vf-services-card-desc-size-tab, 12px)) !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

.tags {
        margin-top: 8px !important;
        gap: 4px !important;
    }

.tag {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

.card__foot {
        margin-top: 6px !important;
    }

.num {
        font-size: 18px !important;
    }

/* Position adjustments for card numbers on small screens */
    .vf-section-services.vf-services-num-pos-top-right .card__foot {
        top: 12px;
        right: 14px;
    }

.vf-section-services.vf-services-num-pos-top-left .card__foot {
        top: 12px;
        left: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {:root {
        --smooth: 1;
    }
}