/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from bento.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 5
 */
/* =============================================================
   Inverta — Bento Grid Section
   Modular Architecture (Split into 4 specialized modules)
   ============================================================= */

/* 01. Base: Section Containers, Capsule Modes, Container Grid & Pencils */

/* ── bento-base.css ── */
/* =============================================================
   Inverta — Bento Grid Section
   Module 1: Base Structure, Capsule Mode & Edit Shortcuts
   ============================================================= */

.vf-section-bento {
    position: relative;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* -------------------------------------------------------------
   Customizer Edit Shortcut Pencils (Always clickable & properly placed)
   ------------------------------------------------------------- *

/* -------------------------------------------------------------
   Mode 1: Floating Glass Capsule (Matching Brands, About & Services)
   ------------------------------------------------------------- */
.vf-section-bento.vf-bento-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-bento-margin-top, 0px) !important;
    display: flex;
    justify-content: center;
    --vf-bento-cutout-bg: var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff));
}

.vf-section-bento.vf-bento-capsule-mode .vf-bento-capsule {
    position: relative;
    width: 100%;
    max-width: min(var(--vf-bento-max-w, 100%), var(--inv-shell-max, 100%));
    margin: 0 auto;
    border-radius: var(--vf-bento-capsule-radius, var(--vf-bento-radius, var(--inv-radius-capsule, 20px)));
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
    box-shadow: var(--inv-shadow-capsule-airy);
    -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, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)) 0%, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)) 100%);
    background-color: var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff));
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
    padding: clamp(24px, 3vw, 40px) var(--inv-gutter, clamp(20px, 2.5vw, 36px));
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* -------------------------------------------------------------
   Mode 2: Fullwidth (Edge-to-Edge)
   ------------------------------------------------------------- */
.vf-section-bento.vf-bento-fullwidth-mode {
    background-color: var(--vf-bento-bg, #f8fafc);
    padding-top: var(--vf-bento-pt, 60px);
    padding-bottom: var(--vf-bento-pb, 60px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    --vf-bento-cutout-bg: var(--vf-bento-bg, #f8fafc);
}

.vf-section-bento.vf-bento-fullwidth-mode .vf-bento-capsule {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 24px;
    max-width: 100%;
}

/* -------------------------------------------------------------
   Bento Container Grid (Full 100% Capsule Width)
   ------------------------------------------------------------- */
.vf-bento-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vf-bento-gap, 22px);
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .vf-bento-container {
        grid-template-columns: 1fr 1fr 1.18fr;
        gap: var(--vf-bento-gap, 22px);
        align-items: stretch;
    }
}

/* -------------------------------------------------------------
   Columns Structure
   ------------------------------------------------------------- */
.vf-bento-col {
    display: flex;
    flex-direction: column;
    gap: var(--vf-bento-gap, 22px);
    height: 100%;
}


/* 02. Cards: Typography, Palettes, Media & 5-Card Layouts */

/* ── bento-cards.css ── */
/* =============================================================
   Inverta — Bento Grid Section
   Module 2: Card Architecture, Badges, Media & Typography
   ============================================================= */

/* -------------------------------------------------------------
   Common Card Architecture
   ------------------------------------------------------------- */
.vf-bento-card {
    position: relative;
    border-radius: var(--vf-bento-card-radius, var(--inv-radius, 20px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transform: none;
    transition: box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
                border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* No permanent will-change.
     *
     * `will-change: transform` held every card on its own compositor layer for
     * the whole life of the page — five large glass cards' worth of texture
     * kept alive whether anything was moving or not, which is what the page
     * was paying for while scrolling past. box-shadow was in there too, and it
     * is not a compositable property at all, so it bought nothing. Browsers
     * promote an element when a transform transition actually starts. */
}

/* Palette: Specific Card Surfaces */
.vf-bento-card--art {
    background-color: var(--vf-bento-c1-bg, #0f172a);
    color: var(--vf-bento-c1-fg, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 
        0 4px 14px -2px rgba(15, 23, 42, 0.04),
        0 12px 28px -4px rgba(15, 23, 42, 0.06);
}

.vf-bento-card--art:hover {
    border-color: rgba(36, 169, 179, 0.4);
    box-shadow: 
        0 8px 20px -2px rgba(15, 23, 42, 0.06),
        0 20px 38px -4px rgba(15, 23, 42, 0.1);
}

.vf-bento-card--stat {
    background-color: var(--vf-bento-c4-bg, var(--inv-surface, #ffffff));
    color: var(--vf-bento-c4-fg, #0f172a);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 
        0 4px 14px -2px rgba(15, 23, 42, 0.04),
        0 12px 28px -4px rgba(15, 23, 42, 0.06);
}

.vf-bento-card--stat:hover {
    border-color: rgba(36, 169, 179, 0.4);
    box-shadow: 
        0 8px 20px -2px rgba(15, 23, 42, 0.06),
        0 20px 38px -4px rgba(15, 23, 42, 0.1);
}

.vf-bento-card--contact {
    background-color: var(--vf-bento-c2-bg, #0f172a);
    color: #faf5f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 6px 18px -2px rgba(15, 23, 42, 0.2),
        0 18px 36px -6px rgba(15, 23, 42, 0.35);
}

.vf-bento-card--contact:hover {
    border-color: rgba(36, 169, 179, 0.45);
    box-shadow: 
        0 10px 26px -2px rgba(15, 23, 42, 0.28),
        0 24px 46px -6px rgba(15, 23, 42, 0.45);
}

.vf-bento-card--testimonial {
    background-color: var(--vf-bento-c3-bg, #0f172a);
    color: var(--vf-bento-c3-fg, #faf5f0);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 6px 18px -2px rgba(15, 23, 42, 0.2),
        0 18px 36px -6px rgba(15, 23, 42, 0.35);
}

.vf-bento-card--testimonial:hover {
    border-color: rgba(36, 169, 179, 0.45);
    box-shadow: 
        0 10px 26px -2px rgba(15, 23, 42, 0.28),
        0 24px 46px -6px rgba(15, 23, 42, 0.45);
}

/* -------------------------------------------------------------
   Pill Badges (✦ BADGE ✦) — Matching Termin buchen Button Radius
   ------------------------------------------------------------- */
.vf-bento-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--vf-bento-badge-radius, 10px);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.vf-bento-badge--dark {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.vf-bento-badge--light {
    background: rgba(255, 255, 255, 0.10);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vf-bento-badge--accent {
    background: linear-gradient(135deg, rgba(36, 169, 179, 0.32) 0%, rgba(36, 169, 179, 0.14) 100%);
    color: #38bdf8;
    border: 1px solid rgba(36, 169, 179, 0.40);
    border-top: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(36, 169, 179, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vf-bento-badge--glass {
    background: rgba(15, 23, 42, 0.65);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top: 1.5px solid rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------------
   Generic Card Background Media & Overlay System
   ------------------------------------------------------------- */
.vf-bento-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vf-bento-card-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vf-bento-card-media__video,
.vf-bento-art-video,
.vf-bento-portrait-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    border: none;
    outline: none;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vf-bento-card:hover .vf-bento-card-media__img,
.vf-bento-card:hover .vf-bento-card-media__video,
.vf-bento-card--art:hover .vf-bento-art-video,
.vf-bento-card--portrait:hover .vf-bento-portrait-video {
    transform: scale(1.05);
}

.vf-bento-card-media__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vf-bento-card > *:not(.vf-bento-card-media):not(.vf-bento-art-wrap):not(.vf-bento-portrait-media):not(.vf-bento-watermark) {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------
   Card 1: About Us & Precision Tech (Top Left) - Full Bleed Image
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   Card 1: About Us & Precision Tech (Top Left) - Full Bleed Image
   ------------------------------------------------------------- */
.vf-bento-card--art {
    position: relative;
    padding: var(--vf-bento-c1-pad, clamp(24px, 2.5vw, 32px));
    min-height: var(--vf-bento-c1-min-h, 480px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) {
    .vf-bento-card--art {
        flex: 1.7;
        min-height: var(--vf-bento-c1-min-h, 490px);
    }
}

.vf-bento-card--art .vf-bento-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vf-bento-c1-gap, 16px);
    z-index: 2;
    position: relative;
}

.vf-bento-card--art .vf-bento-statement {
    font-size: clamp(15px, 1.25vw, var(--vf-bento-c1-size, 17px));
    line-height: 1.45;
    font-weight: var(--vf-bento-c1-weight, 700);
    color: var(--vf-bento-c1-fg, #ffffff) !important;
    max-width: var(--vf-bento-c1-max-w, 100%);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
    letter-spacing: -0.015em;
}

.vf-bento-card--art .vf-bento-art-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vf-bento-card--art .vf-bento-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vf-bento-card--art:hover .vf-bento-art-img {
    transform: scale(1.05);
}

.vf-bento-card--art .vf-bento-art-overlay {
    position: absolute;
    inset: 0;
    background: var(--vf-bento-c1-overlay-bg, #0f172a);
    opacity: var(--vf-bento-c1-overlay-op, 0.6);
    z-index: 1;
    pointer-events: none;
}

.vf-bento-card--art .vf-bento-badge {
    position: relative;
    z-index: 2;
    border-radius: var(--vf-bento-badge-radius, 10px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, 0.65) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------------
   Card 2: Contact (Bottom Left)
   ------------------------------------------------------------- */
.vf-bento-card--contact {
    padding: var(--vf-bento-c2-pad, clamp(24px, 2.2vw, 30px));
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vf-bento-c2-gap, 16px);
    border-radius: var(--vf-bento-card-radius, var(--inv-radius, 20px));
}

@media (min-width: 992px) {
    .vf-bento-card--contact {
        flex: 1;
    }
}

.vf-bento-contact__head {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: auto;
    position: relative;
    z-index: 4;
}

/* =============================================================
   Card Cutout / Notch Architecture (Universal for Cards 1 to 5)
   Supports Top Notch (flush at top) and Bottom Notch (flush at bottom)
   ============================================================= */

/* Card Specific Cutout Variables */
.vf-bento-card--art {
    --vf-bento-cutout-bg: var(--vf-bento-c1-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)));
    --vf-bento-cutout-fg: var(--vf-bento-c1-cutout-fg, #0f172a);
}

.vf-bento-card--contact {
    --vf-bento-cutout-bg: var(--vf-bento-c2-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)));
    --vf-bento-cutout-fg: var(--vf-bento-c2-cutout-fg, #0f172a);
}

.vf-bento-card--testimonial {
    --vf-bento-cutout-bg: var(--vf-bento-c3-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)));
    --vf-bento-cutout-fg: var(--vf-bento-c3-cutout-fg, #0f172a);
}

.vf-bento-card--stat {
    --vf-bento-cutout-bg: var(--vf-bento-c4-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)));
    --vf-bento-cutout-fg: var(--vf-bento-c4-cutout-fg, #0f172a);
}

.vf-bento-card--portrait {
    --vf-bento-cutout-bg: var(--vf-bento-c5-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)));
    --vf-bento-cutout-fg: var(--vf-bento-c5-cutout-fg, #0f172a);
}

/* Card 1 when cutout is disabled: place badge at top right */
.vf-bento-card--art:not(.vf-bento-card--cutout-active) .vf-bento-c1-badge-wrap {
    position: absolute !important;
    top: var(--vf-bento-c1-pad, clamp(24px, 2.5vw, 32px)) !important;
    right: var(--vf-bento-c1-pad, clamp(24px, 2.5vw, 32px)) !important;
    z-index: 3 !important;
}

.vf-bento-card--art:not(.vf-bento-card--cutout-active) .vf-bento-card__head {
    padding-right: 120px;
}

/* -------------------------------------------------------------
   TOP CUTOUT / NOTCH: Flush at top edge
   ------------------------------------------------------------- */
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-cutout-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-contact__head,
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-c1-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-portrait-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-c3-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-top .vf-bento-c4-badge-wrap,
.vf-bento-card--contact.vf-bento-card--cutout-active:not(.vf-bento-card--cutout-bottom) .vf-bento-contact__head {
    position: absolute !important;
    top: -2px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.vf-bento-card--cutout-active.vf-bento-card--cutout-top,
.vf-bento-card--contact.vf-bento-card--cutout-active:not(.vf-bento-card--cutout-bottom) {
    border-top: none !important;
    border-top-color: transparent !important;
}

.vf-bento-card--art.vf-bento-card--cutout-active.vf-bento-card--cutout-top {
    padding-top: calc(var(--vf-bento-c1-pad, clamp(24px, 2.5vw, 32px)) + 26px) !important;
}

.vf-bento-card--contact.vf-bento-card--cutout-active.vf-bento-card--cutout-top,
.vf-bento-card--contact.vf-bento-card--cutout-active:not(.vf-bento-card--cutout-bottom) {
    padding-top: calc(var(--vf-bento-c2-pad, clamp(24px, 2.2vw, 30px)) + 26px) !important;
}

.vf-bento-card--testimonial.vf-bento-card--cutout-active.vf-bento-card--cutout-top {
    padding-top: calc(var(--vf-bento-c3-pad, clamp(28px, 2.5vw, 36px)) + 26px) !important;
}

.vf-bento-card--stat.vf-bento-card--cutout-active.vf-bento-card--cutout-top {
    padding-top: calc(var(--vf-bento-c4-pad, clamp(26px, 2.5vw, 34px)) + 26px) !important;
}

.vf-bento-card--portrait.vf-bento-card--cutout-active.vf-bento-card--cutout-top {
    padding-top: calc(var(--vf-bento-c5-pad, clamp(28px, 2.5vw, 36px)) + 26px) !important;
}

/* -------------------------------------------------------------
   BOTTOM CUTOUT / NOTCH: Flush at bottom edge
   ------------------------------------------------------------- */
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-cutout-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-card__foot,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-contact__head,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-c1-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-portrait-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-c3-badge-wrap,
.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom .vf-bento-c4-badge-wrap {
    position: absolute !important;
    bottom: -2px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    border-bottom: none !important;
    border-bottom-color: transparent !important;
}

.vf-bento-card--art.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    padding-bottom: calc(var(--vf-bento-c1-pad, clamp(24px, 2.5vw, 32px)) + 26px) !important;
}

.vf-bento-card--contact.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    padding-bottom: calc(var(--vf-bento-c2-pad, clamp(24px, 2.2vw, 30px)) + 26px) !important;
}

.vf-bento-card--testimonial.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    padding-bottom: calc(var(--vf-bento-c3-pad, clamp(28px, 2.5vw, 36px)) + 26px) !important;
}

.vf-bento-card--stat.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    padding-bottom: calc(var(--vf-bento-c4-pad, clamp(26px, 2.5vw, 34px)) + 26px) !important;
}

.vf-bento-card--portrait.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    padding-bottom: calc(var(--vf-bento-c5-pad, clamp(28px, 2.5vw, 36px)) + 26px) !important;
}

/* -------------------------------------------------------------
   Architectural Cutout Tab Badge Base & Wings
   ------------------------------------------------------------- */
.vf-bento-badge--cutout {
    position: relative !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 32px 10px 32px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--vf-bento-cutout-fg, var(--vf-bento-c2-cutout-fg, #0f172a)) !important;
    background-image: none !important;
    background-color: var(--vf-bento-cutout-bg, var(--vf-bento-c2-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)))) !important;
    border: none !important;
}

.vf-bento-badge[style*="display:none"],
.vf-bento-badge[style*="display: none"],
.vf-bento-cutout-wrap[style*="display:none"],
.vf-bento-cutout-wrap[style*="display: none"],
.vf-bento-c1-badge-wrap[style*="display:none"],
.vf-bento-c1-badge-wrap[style*="display: none"],
.vf-bento-contact__head[style*="display:none"],
.vf-bento-contact__head[style*="display: none"],
.vf-bento-card__foot[style*="display:none"],
.vf-bento-card__foot[style*="display: none"],
.vf-bento-c4-badge-wrap[style*="display:none"],
.vf-bento-c4-badge-wrap[style*="display: none"],
.vf-bento-c5-badge-wrap[style*="display:none"],
.vf-bento-c5-badge-wrap[style*="display: none"] {
    display: none !important;
}

.vf-bento-badge--cutout::before,
.vf-bento-badge--cutout::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 20px !important;
    background-color: var(--vf-bento-cutout-bg, var(--vf-bento-c2-cutout-bg, var(--vf-bento-capsule-bg, var(--inv-surface, #ffffff)))) !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* TOP Notch Badge Details */
.vf-bento-badge--cutout-top,
.vf-bento-badge--cutout:not(.vf-bento-badge--cutout-bottom) {
    top: 0 !important;
    bottom: auto !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
}

.vf-bento-badge--cutout-top::before,
.vf-bento-badge--cutout:not(.vf-bento-badge--cutout-bottom)::before {
    top: -2px !important;
    bottom: auto !important;
    left: -16px !important;
    right: auto !important;
    mask-image: radial-gradient(circle at 0 100%, transparent 16px, black 16.5px) !important;
    -webkit-mask-image: radial-gradient(circle at 0 100%, transparent 16px, black 16.5px) !important;
}

.vf-bento-badge--cutout-top::after,
.vf-bento-badge--cutout:not(.vf-bento-badge--cutout-bottom)::after {
    top: -2px !important;
    bottom: auto !important;
    right: -16px !important;
    left: auto !important;
    mask-image: radial-gradient(circle at 100% 100%, transparent 16px, black 16.5px) !important;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 16px, black 16.5px) !important;
}

/* BOTTOM Notch Badge Details */
.vf-bento-badge--cutout-bottom {
    bottom: 0 !important;
    top: auto !important;
    padding: 10px 32px 8px 32px !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 16px -4px rgba(15, 23, 42, 0.08) !important;
}

.vf-bento-badge--cutout-bottom::before {
    bottom: -2px !important;
    top: auto !important;
    left: -16px !important;
    right: auto !important;
    mask-image: radial-gradient(circle at 0 0, transparent 16px, black 16.5px) !important;
    -webkit-mask-image: radial-gradient(circle at 0 0, transparent 16px, black 16.5px) !important;
}

.vf-bento-badge--cutout-bottom::after {
    bottom: -2px !important;
    top: auto !important;
    right: -16px !important;
    left: auto !important;
    mask-image: radial-gradient(circle at 100% 0, transparent 16px, black 16.5px) !important;
    -webkit-mask-image: radial-gradient(circle at 100% 0, transparent 16px, black 16.5px) !important;
}

.vf-bento-contact__details {
    display: flex;
    flex-direction: column;
    gap: var(--vf-bento-c2-gap, 6px);
}

.vf-bento-contact__link {
    color: var(--vf-bento-c2-fg, #FAF5F0);
    text-decoration: none;
    font-size: clamp(14px, 1.1vw, var(--vf-bento-c2-size, 15px));
    font-weight: var(--vf-bento-c2-weight, 500);
    letter-spacing: -0.01em;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.vf-bento-contact__link:hover {
    color: var(--vf-bento-c2-accent, #38bdf8);
}

.vf-bento-contact__phone {
    font-size: clamp(15px, 1.2vw, calc(var(--vf-bento-c2-size, 15px) + 2px));
    font-weight: 700;
}

/* -------------------------------------------------------------
   Card 3: Testimonial Quote (Top Center)
   ------------------------------------------------------------- */
.vf-bento-card--testimonial {
    padding: var(--vf-bento-c3-pad, clamp(28px, 2.5vw, 36px));
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .vf-bento-card--testimonial {
        flex: 1.25;
    }
}

.vf-bento-card--testimonial .vf-bento-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    color: #f59e0b;
    font-size: 15px;
}

.vf-bento-quote {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--vf-bento-c3-gap, 16px);
}

.vf-bento-quote__text {
    font-size: clamp(14px, 1.15vw, var(--vf-bento-c3-size, 16px));
    line-height: 1.55;
    font-weight: var(--vf-bento-c3-weight, 450);
    color: var(--vf-bento-c3-fg, #f1f5f9);
    max-width: var(--vf-bento-c3-max-w, 100%);
    margin: 0;
    letter-spacing: -0.01em;
    font-style: italic;
}

.vf-bento-quote__author {
    font-size: var(--vf-bento-c3-author-size, 13px);
    font-weight: 600;
    color: var(--vf-bento-c3-author-color, #38bdf8);
    font-style: normal;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.2s ease, font-size 0.2s ease;
}

.vf-bento-card__foot {
    display: flex;
    align-items: center;
    margin-top: var(--vf-bento-c3-gap, 20px);
}

.vf-bento-card__foot--center {
    justify-content: center;
}

/* -------------------------------------------------------------
   Card 4: Results & Big Number Stat (Bottom Center)
   ------------------------------------------------------------- */
.vf-bento-card--stat {
    padding: var(--vf-bento-c4-pad, clamp(28px, 2.8vw, 36px));
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

@media (min-width: 992px) {
    .vf-bento-card--stat {
        flex: 1;
    }
}

.vf-bento-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: var(--vf-bento-c4-op, 0.045);
}

.vf-bento-watermark__row {
    font-size: 72px;
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--vf-bento-c4-fg, #0f172a);
    white-space: nowrap;
    letter-spacing: -0.04em;
    transform: rotate(-12deg) scale(1.2);
}

.vf-bento-stat__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--vf-bento-c4-gap, 6px);
    text-align: center;
    margin: auto 0;
}

.vf-bento-stat__number {
    font-size: clamp(48px, 5.5vw, var(--vf-bento-c4-size, 68px));
    font-weight: var(--vf-bento-c4-weight, 800);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--vf-bento-c4-fg, #0f172a);
}

.vf-bento-stat__label {
    font-size: clamp(13px, 1.05vw, var(--vf-bento-c4-lbl-size, 15px));
    font-weight: var(--vf-bento-c4-lbl-weight, 600);
    color: var(--inv-muted-fg, #64748b);
    max-width: var(--vf-bento-c4-max-w, 100%);
    margin: 0 auto;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   Card 5: Master Technician Portrait (Full-Height Right Column)
   ------------------------------------------------------------- */
.vf-bento-card--portrait {
    position: relative;
    padding: var(--vf-bento-c5-pad, clamp(28px, 2.5vw, 36px));
    min-height: 580px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    isolation: isolate;
    background-color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vf-bento-portrait-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vf-bento-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vf-bento-card--portrait:hover .vf-bento-portrait-img {
    transform: scale(1.05);
}

.vf-bento-portrait-overlay {
    position: absolute;
    inset: 0;
    background: var(--vf-bento-c5-overlay-bg, #0f172a);
    opacity: var(--vf-bento-c5-overlay-op, 0.6);
    z-index: 1;
}

.vf-bento-portrait-badge-wrap {
    position: relative;
    z-index: 2;
}

.vf-bento-portrait-desc-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--vf-bento-c5-gap, 16px);
    margin-top: auto;
}

.vf-bento-portrait-desc {
    font-size: clamp(13px, 1.05vw, var(--vf-bento-c5-size, 14px));
    line-height: 1.55;
    font-weight: var(--vf-bento-c5-weight, 500);
    color: var(--vf-bento-c5-fg, #f1f5f9);
    max-width: var(--vf-bento-c5-max-w, 100%);
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Card 5 CTA: Identical to "Termin buchen" button in Header */
.vf-bento-portrait-cta.inv-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    align-self: flex-start;
    padding: 9px 20px !important;
    height: 38px !important;
    border-radius: var(--vf-bento-badge-radius, 10px) !important;
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.85) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.65) 100%) !important;
    color: var(--vf-bento-c5-cta-color, #ffffff) !important;
    font-size: var(--vf-bento-c5-cta-size, 15px) !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.95) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 4px 16px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: all 0.2s ease-out !important;
    pointer-events: auto !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-bento-portrait-cta.inv-cta:hover {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 1) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.8) 100%) !important;
    color: var(--vf-bento-c5-cta-color, #ffffff) !important;
    border-color: rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 1) !important;
    border-top-color: rgba(255,255,255,0.6) !important;
    transform: translateY(-1.5px) !important;
    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 rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.vf-bento-portrait-cta.inv-cta:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px 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-bento-portrait-cta > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.vf-bento-portrait-cta .txt-anim,
.vf-bento-contact__link .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-bento-portrait-cta .txt-anim__inner,
.vf-bento-contact__link .txt-anim__inner {
    display: block !important;
    position: relative !important;
    text-align: center !important;
    width: 100% !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.vf-cta-arrow {
    display: inline-block !important;
    margin-left: 6px !important;
    transition: transform 0.25s ease-out !important;
}

.vf-bento-portrait-cta:hover .vf-cta-arrow {
    transform: rotate(-45deg) !important;
}

.vf-cta-text {
    transition: opacity 0.3s ease !important;
}

.vf-bento-portrait-cta[data-anim-mode="fade"]:hover .vf-cta-text {
    opacity: 0.6 !important;
}

/* Fallback pure-CSS transition when GSAP is not loaded */
html:not(.js-gsap) .vf-bento-contact__link:hover .txt-anim__inner {
    transform: translateY(-130%);
}

/* =============================================================
   Media overlay, per card

   Cards 1 and 5 had their own overlay rules; cards 2-4 shipped the
   options without anything reading them. One rule per card keeps
   each card's colour and opacity independent.
   ============================================================= */
.vf-bento-card--contact .vf-bento-bg-overlay {
  background: var(--vf-bento-c2-overlay-bg, #0f172a);
  opacity: var(--vf-bento-c2-overlay-op, .65);
}

.vf-bento-card--testimonial .vf-bento-bg-overlay {
  background: var(--vf-bento-c3-overlay-bg, #0f172a);
  opacity: var(--vf-bento-c3-overlay-op, .75);
}

.vf-bento-card--stat .vf-bento-bg-overlay {
  background: var(--vf-bento-c4-overlay-bg, var(--inv-surface, #ffffff));
  opacity: var(--vf-bento-c4-overlay-op, .55);
}


/* 03. Animations: Smooth Staggered Entrance & Hover Micro-Effects */

/* ── bento-animation.css ── */
/* =============================================================
   Inverta — Bento Grid Section
   Module 3: Smooth Entrance Animations & Interactive Micro-Effects
   ============================================================= */

/* -------------------------------------------------------------
   The entrance

   A wave across the grid. Each card gets three values from bento.js —
   its place in the diagonal order (--vf-bento-i) and the direction it
   comes from (--vf-bento-dx / --vf-bento-dy / --vf-bento-rot, taken from
   where it sits relative to the middle) — and the rest is this one
   keyframe. Outer cards swing in from their own edge, the middle ones
   simply rise, and the whole grid resolves from the top-left corner
   outwards.

   Only opacity and transform — both of which the compositor can animate
   without repainting. An earlier version also blurred and opened a
   clip-path mask, which looked good on a still frame and cost a full
   repaint of five large glass cards on every frame of the entrance.
   That is what made the section feel like it was catching.

   The card is not hidden at rest. If the observer never fires, or the
   script never arrives, the grid is the finished grid — the animation
   only exists between `vf-bento-revealed` landing and the keyframe
   finishing. The previous version parked every card at opacity:0 and
   waited, which is a blank section one failed request away.
   ------------------------------------------------------------- */
@keyframes vfBentoCardIn {
    from {
        opacity: 0;
        transform:
            translate3d(var(--vf-bento-dx, 0px), var(--vf-bento-dy, 22px), 0)
            scale(0.975)
            rotate(var(--vf-bento-rot, 0deg));
    }

    to {
        opacity: var(--vf-bento-card-opacity, 1);
        transform: none;
    }
}

.vf-section-bento.vf-bento-anim-enabled.vf-bento-revealed .vf-bento-card,
.vf-section-bento.vf-bento-anim-enabled.is-visible .vf-bento-card {
    /* backwards, not both: the `from` state holds through the delay — which is
       what keeps a card out of sight until its turn — and the moment the
       animation ends the card goes back to its own styles. Holding the last
       frame instead would leave a clip-path and a filter on every card
       forever, and a clipped card cannot cast the hover shadow outside
       itself. */
    animation: vfBentoCardIn var(--vf-bento-anim-dur, 1150ms) cubic-bezier(0.22, 0.75, 0.24, 1) backwards;
    animation-delay: calc(var(--vf-bento-i, 0) * var(--vf-bento-anim-step, 95ms));
}

/* The picture inside settles a beat behind its own card, so the card lands
   first and the image comes to rest inside it. */
@keyframes vfBentoMediaIn {
    from { transform: scale(1.1); }

    to   { transform: scale(1); }
}

.vf-section-bento.vf-bento-anim-enabled.vf-bento-revealed .vf-bento-art-img,
.vf-section-bento.vf-bento-anim-enabled.vf-bento-revealed .vf-bento-portrait-img {
    animation: vfBentoMediaIn calc(var(--vf-bento-anim-dur, 1150ms) * 1.25) cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--vf-bento-i, 0) * var(--vf-bento-anim-step, 95ms) + 120ms);
}

/* -------------------------------------------------------------
   Interactive Hover Lift & Border Shimmer
   ------------------------------------------------------------- */
/* No !important on the hover.
 *
 * It was the one thing that could outrank the entrance animation — CSS
 * animations beat every normal declaration, whatever its specificity, but not
 * an !important one. So moving the pointer over the grid while the cards were
 * still arriving snapped whichever card was under it straight to its lifted
 * position and left the rest mid-flight. Without the flag the hover simply
 * waits its turn: the entrance owns the transform until it ends, and the lift
 * takes over from there. Three classes are ample specificity for the base
 * rule this replaces. */
.vf-section-bento.vf-bento-hover-lift .vf-bento-card {
    cursor: default;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease;
}

.vf-section-bento.vf-bento-hover-lift .vf-bento-card:hover {
    transform: translateY(-8px) scale(1.008);
    transition-delay: 0s;
    box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.22),
                0 8px 18px -4px rgba(15, 23, 42, 0.12);
    z-index: 5;
}

.vf-bento-arrow-btn {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

/* -------------------------------------------------------------
   Accessibility: Reduced Motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.vf-section-bento .vf-bento-card,
.vf-bento-art-img,
.vf-bento-portrait-img {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: var(--vf-bento-card-opacity, 1) !important;
    }
}


/* 04. Responsive: Breakpoints for Ultra-wide, Desktop, Tablet & Mobile */

/* ── bento-responsive.css ── */
/* =============================================================
   Inverta — Bento Grid Section
   Module 4: Responsive Breakpoints, Mobile & Tablet Adaptation
   ============================================================= */

/* -------------------------------------------------------------
   Large Screens & Ultra-wide (>= 1440px)
   ------------------------------------------------------------- */
/* Auf großen Bildschirmen etwas mehr Luft — aber weiter aus der Einstellung.
   Feste 24px hier haben "Abstand zwischen den Kacheln" ab 1440px stumm
   geschaltet, also genau auf den Bildschirmen, auf denen man es sieht. */
@media (min-width: 1440px) {
    .vf-bento-container {
        gap: var(--vf-bento-gap, 24px);
    }

.vf-bento-col {
        gap: var(--vf-bento-gap, 24px);
    }
}

/* -------------------------------------------------------------
   Tablet View (max-width: 991px)
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .vf-section-bento.vf-bento-capsule-mode {
        padding: 4px var(--inv-section-px, var(--inv-edge, 8px)) 16px var(--inv-section-px, var(--inv-edge, 8px));
    }

.vf-section-bento.vf-bento-capsule-mode .vf-bento-capsule {
        padding: clamp(20px, 3.5vw, 28px) clamp(16px, 2.5vw, 22px);
        border-radius: 18px;
    }

.vf-bento-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

.vf-bento-col {
        gap: 18px;
    }

.vf-bento-card {
        border-radius: 18px;
    }

.vf-bento-card--art {
        min-height: 420px;
    }

.vf-bento-card--contact {
        min-height: auto;
    }

.vf-bento-card--testimonial {
        min-height: 320px;
    }

.vf-bento-card--stat {
        min-height: 240px;
    }

.vf-bento-card--portrait {
        min-height: 480px;
        height: auto;
    }

.vf-bento-portrait-img {
        object-position: center 25%;
    }
}

/* -------------------------------------------------------------
   Mobile Phones (max-width: 767px)
   ------------------------------------------------------------- */
@media (max-width: 767px) {
    .vf-section-bento.vf-bento-capsule-mode .vf-bento-capsule {
        padding: 16px 14px;
        border-radius: 16px;
    }

.vf-bento-container {
        gap: 14px;
    }

.vf-bento-col {
        gap: 14px;
    }

.vf-bento-card {
        border-radius: 16px;
        padding: 20px 18px !important;
    }

.vf-bento-card--art {
        min-height: 380px;
    }

.vf-bento-statement {
        font-size: 15px !important;
    }

.vf-bento-card--contact {
        padding: 18px 16px !important;
    }

.vf-bento-contact__phone {
        font-size: 15px !important;
    }

.vf-bento-card--testimonial {
        min-height: auto;
        padding: 22px 18px !important;
    }

.vf-bento-quote__text {
        font-size: 14px !important;
        line-height: 1.5;
    }

.vf-bento-card--stat {
        min-height: 200px;
        padding: 24px 16px !important;
    }

.vf-bento-stat__number {
        font-size: clamp(42px, 12vw, 56px) !important;
    }

.vf-bento-card--portrait {
        min-height: 420px;
    }

.vf-bento-portrait-desc {
        font-size: 13px !important;
    }

/* Preserve notch clearance on mobile screens */
    .vf-bento-card--cutout-active.vf-bento-card--cutout-top {
        padding-top: 50px !important;
    }

.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
        padding-bottom: 50px !important;
    }
}

/* -------------------------------------------------------------
   Small Mobile Devices (max-width: 420px)
   ------------------------------------------------------------- */
@media (max-width: 420px) {
    .vf-section-bento.vf-bento-capsule-mode {
        padding-left: 6px;
        padding-right: 6px;
    }

.vf-bento-card__head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 12px;
    }

.vf-bento-badge {
        font-size: 10px;
        padding: 5px 11px;
    }
}

/* =============================================================
   Per-card text size, per breakpoint

   Each card's size option is responsive; a blank tablet or mobile
   value inherits the breakpoint above it.
   ============================================================= */
/* Per-card text sizes resolve per breakpoint in the compiled stylesheet. */


.vf-section-bento {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

/* -------------------------------------------------------------
 * Glassmorphism & Under-Card Glowing Gradients (Identical to Section About)
 * ------------------------------------------------------------- */
.vf-bento-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity 0.3s ease;
    display: block;
}

/* Glowing Ambient Gradient — Light Mode (matches About Light Pillars Glow) */
.vf-section-bento.vf-bento-theme-light .vf-bento-glow,
.vf-section-bento:not(.vf-bento-theme-dark) .vf-bento-glow {
    background: 
        radial-gradient(ellipse 65% 55% at 20% 40%, rgba(36, 169, 179, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 60%, rgba(14, 165, 233, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 75% 45% at 50% 50%, rgba(20, 184, 166, 0.35) 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.95;
}

/* Glowing Ambient Gradient — Dark Mode (matches About Dark Pillars Glow) */
.vf-section-bento.vf-bento-theme-dark .vf-bento-glow {
    background: 
        radial-gradient(ellipse 55% 50% at 28% 45%, rgba(36, 169, 179, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 75% 55%, rgba(14, 165, 233, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 70% 38% at 50% 50%, rgba(45, 212, 191, 0.32) 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.95;
}

/* Dark Theme Capsule (Identical to Section About Dark Capsule & Hero) */
.vf-section-bento.vf-bento-theme-dark.vf-bento-capsule-mode .vf-bento-capsule {
    border-radius: var(--vf-bento-capsule-radius, var(--vf-bento-radius, var(--inv-radius, 20px)));
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 
        0 12px 42px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.12) !important;
    background-color: var(--vf-bento-capsule-bg, #08111d) !important;
    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"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseLight'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseLight)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 75% at 50% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 65%, rgba(0, 0, 0, 0.35) 100%) !important;
    background-size: 160px 160px, 160px 160px, 100% 100% !important;
    background-repeat: repeat, repeat, no-repeat !important;
    --vf-bento-cutout-bg: var(--vf-bento-capsule-bg, #08111d);
    --vf-bento-cutout-fg: #f8fafc;
}

/* Dark Theme Fullwidth Mode */
.vf-section-bento.vf-bento-theme-dark.vf-bento-fullwidth-mode {
    background-color: var(--vf-bento-bg, #08111d) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    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"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseLight'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseLight)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 75% at 50% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 65%, rgba(0, 0, 0, 0.35) 100%) !important;
    background-size: 160px 160px, 160px 160px, 100% 100% !important;
    background-repeat: repeat, repeat, no-repeat !important;
    --vf-bento-cutout-bg: var(--vf-bento-bg, #08111d);
    --vf-bento-cutout-fg: #f8fafc;
}

.vf-section-bento.vf-bento--glass .vf-bento-capsule {
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
}

.vf-section-bento .vf-bento-container {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------
 * Global Card Transparency (Customizer-controlled)
 * ------------------------------------------------------------- */
.vf-section-bento .vf-bento-card {
    opacity: var(--vf-bento-card-opacity, 1);
}

/* -------------------------------------------------------------
 * Glassmorphism Cards (Exact Physics from Section About Advantage Cards)
 * ------------------------------------------------------------- */
.vf-bento--glass .vf-bento-card,
.vf-section-bento.vf-bento-theme-dark .vf-bento-card {
    -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.04) !important;
    backdrop-filter: blur(20px) saturate(190%) brightness(1.04) !important;
}

/* Light / Stat Card Glass (Identical to Section About Light Pillars Material) */
.vf-bento--glass .vf-bento-card--stat,
.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--stat {
    background-image: linear-gradient(145deg,
        color-mix(in srgb, var(--inv-surface, #fff) 45%, transparent) 0%,
        color-mix(in srgb, var(--inv-surface, #fff) 15%, transparent) 50%,
        color-mix(in srgb, var(--inv-surface, #fff) 28%, transparent) 100%
    ) !important;
    background-color: color-mix(in srgb, var(--vf-bento-c4-bg, var(--inv-surface, #ffffff)) 60%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 65%, transparent) !important;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent) !important;
    box-shadow: 
        0 4px 14px -2px rgba(15, 23, 42, 0.04),
        0 12px 28px -4px rgba(15, 23, 42, 0.06),
        inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 2px rgba(15, 23, 42, 0.04) !important;
}

.vf-bento--glass .vf-bento-card--stat:hover,
.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--stat:hover {
    border-color: rgba(36, 169, 179, 0.5) !important;
    box-shadow: 
        0 14px 36px -4px rgba(15, 23, 42, 0.12),
        0 0 20px rgba(36, 169, 179, 0.2),
        inset 0 1.5px 2px rgba(255, 255, 255, 1) !important;
}

/* Dynamic Glass Cards in Light Theme */
.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--art,
.vf-bento--glass:not(.vf-bento-theme-dark) .vf-bento-card--art {
    background-image: linear-gradient(150deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    background-color: color-mix(in srgb, var(--vf-bento-c1-bg, #0f172a) 45%, transparent) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 14px 38px 0 rgba(15, 23, 42, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--contact,
.vf-bento--glass:not(.vf-bento-theme-dark) .vf-bento-card--contact {
    background-image: linear-gradient(150deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    background-color: color-mix(in srgb, var(--vf-bento-c2-bg, #0f172a) 45%, transparent) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 14px 38px 0 rgba(15, 23, 42, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--testimonial,
.vf-bento--glass:not(.vf-bento-theme-dark) .vf-bento-card--testimonial {
    background-image: linear-gradient(150deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    background-color: color-mix(in srgb, var(--vf-bento-c3-bg, #0f172a) 45%, transparent) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 14px 38px 0 rgba(15, 23, 42, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.vf-section-bento.vf-bento-theme-light.vf-bento--glass .vf-bento-card--portrait,
.vf-bento--glass:not(.vf-bento-theme-dark) .vf-bento-card--portrait {
    background-image: linear-gradient(150deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    background-color: color-mix(in srgb, var(--vf-bento-c5-bg, #0f172a) 45%, transparent) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 14px 38px 0 rgba(15, 23, 42, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

/* Dark Theme Cards — Per-card background respecting Customizer --vf-bento-cX-bg variables */
.vf-section-bento.vf-bento-theme-dark .vf-bento-card {
    background-image: linear-gradient(158deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.06) 36%,
        rgba(255, 255, 255, 0.02) 64%,
        rgba(255, 255, 255, 0.09) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 
        0 14px 38px 0 rgba(0, 0, 0, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.04) !important;
    backdrop-filter: blur(20px) saturate(190%) brightness(1.04) !important;
}

/* Individual dark-theme card backgrounds using color-mix with Customizer CSS variables */
.vf-section-bento.vf-bento-theme-dark .vf-bento-card--art {
    background-color: color-mix(in srgb, var(--vf-bento-c1-bg, #0a1420) 48%, transparent) !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--contact {
    background-color: color-mix(in srgb, var(--vf-bento-c2-bg, #0a1420) 48%, transparent) !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--testimonial {
    background-color: color-mix(in srgb, var(--vf-bento-c3-bg, #0a1420) 48%, transparent) !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--stat {
    background-color: color-mix(in srgb, var(--vf-bento-c4-bg, #0a1420) 48%, transparent) !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--portrait {
    background-color: color-mix(in srgb, var(--vf-bento-c5-bg, #0a1420) 48%, transparent) !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card:hover {
    border-color: rgba(36, 169, 179, 0.45) !important;
    box-shadow: 
        0 18px 44px 0 rgba(0, 0, 0, 0.38),
        0 0 24px rgba(36, 169, 179, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

/* Card 4 (Stat) in Dark Theme: Contrast adjustments */
.vf-section-bento.vf-bento-theme-dark .vf-bento-card--stat .vf-bento-stat__number {
    color: #ffffff !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--stat .vf-bento-stat__label {
    color: #94a3b8 !important;
}

.vf-section-bento.vf-bento-theme-dark .vf-bento-card--stat .vf-bento-watermark__row {
    color: rgba(255, 255, 255, 0.06) !important;
}

/* Ensure no top or bottom border on cutout card in all modes */
.vf-bento-card--cutout-active.vf-bento-card--cutout-top,
.vf-bento--glass .vf-bento-card--cutout-active.vf-bento-card--cutout-top,
.vf-section-bento .vf-bento-card--cutout-active.vf-bento-card--cutout-top,
.vf-section-bento.vf-bento-theme-dark .vf-bento-card--cutout-active.vf-bento-card--cutout-top {
    border-top: none !important;
    border-top-width: 0 !important;
    border-top-color: transparent !important;
    border-top-style: none !important;
}

.vf-bento-card--cutout-active.vf-bento-card--cutout-bottom,
.vf-bento--glass .vf-bento-card--cutout-active.vf-bento-card--cutout-bottom,
.vf-section-bento .vf-bento-card--cutout-active.vf-bento-card--cutout-bottom,
.vf-section-bento.vf-bento-theme-dark .vf-bento-card--cutout-active.vf-bento-card--cutout-bottom {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    border-bottom-style: none !important;
}

/* Overlays adjust for glass */
.vf-bento--glass .vf-bento-art-overlay,
.vf-bento--glass .vf-bento-card-media__overlay,
.vf-bento--glass .vf-bento-portrait-overlay,
.vf-section-bento.vf-bento-theme-dark .vf-bento-art-overlay,
.vf-section-bento.vf-bento-theme-dark .vf-bento-card-media__overlay,
.vf-section-bento.vf-bento-theme-dark .vf-bento-portrait-overlay {
    mix-blend-mode: overlay;
}

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

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

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

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

/* Dark overlay on top of the background image */
.vf-bento-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--vf-bento-bg-overlay, 0));
    pointer-events: none;
    border-radius: inherit;
    transition: background 0.25s ease;
}

/* When background image is placed inside the capsule, soften the capsule solid background */
.vf-section-bento.vf-bento-has-bg-img.vf-bento-bg-mode-capsule .vf-bento-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-bento.vf-bento-bg-mode-section .vf-bento-capsule,
.vf-section-bento.vf-bento-has-bg-img.vf-bento-bg-mode-section .vf-bento-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;
}

/* Dark theme with bg image: adjust capsule */
.vf-section-bento.vf-bento-theme-dark.vf-bento-has-bg-img.vf-bento-bg-mode-capsule .vf-bento-capsule {
    background: linear-gradient(135deg, rgba(8, 17, 29, 0.65) 0%, rgba(8, 17, 29, 0.45) 100%) !important;
}

.vf-section-bento.vf-bento-theme-dark.vf-bento-has-bg-img.vf-bento-bg-mode-section .vf-bento-capsule {
    background: linear-gradient(135deg, rgba(8, 17, 29, 0.55) 0%, rgba(8, 17, 29, 0.35) 100%) !important;
}

/* Ensure content stays above bg layers */
.vf-bento-capsule > .vf-bento-container {
    position: relative;
    z-index: 2;
}