.elementor-5877 .elementor-element.elementor-element-8f209d2{--display:flex;--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-5266eeb{--display:flex;--min-height:95vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overflow:hidden;--padding-top:0px;--padding-bottom:40px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-c733436{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-84c0c97{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:10;}.elementor-5877 .elementor-element.elementor-element-1545316{text-align:center;}.elementor-5877 .elementor-element.elementor-element-dffb560{text-align:center;}.elementor-5877 .elementor-element.elementor-element-df62b31{text-align:center;}.elementor-5877 .elementor-element.elementor-element-b32007e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:wrap;--padding-top:24px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-25e9e30{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:96px 24px;--row-gap:96px;--column-gap:24px;--padding-top:96px;--padding-bottom:96px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-c6d2bca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-ef8dd93{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-ac9f8c6{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-9ce1c1d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-0c3a123{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-95cb8af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-810ddb1{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-7fb845f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-ed642b1{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-4fe01ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-c73f415{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:48px 24px;--row-gap:48px;--column-gap:24px;--padding-top:96px;--padding-bottom:96px;--padding-left:24px;--padding-right:24px;}.elementor-5877 .elementor-element.elementor-element-8944966{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-33ea738{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-8980932{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-b9a7a20{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-a9efa0a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-69b0e0e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-055d9b8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-9888e56{--display:flex;--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5877 .elementor-element.elementor-element-bc333e3{--display:flex;--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-5877 .elementor-element.elementor-element-84c0c97{--content-width:960px;}.elementor-5877 .elementor-element.elementor-element-25e9e30{--content-width:1440px;}.elementor-5877 .elementor-element.elementor-element-c6d2bca{--width:576px;}.elementor-5877 .elementor-element.elementor-element-c73f415{--content-width:1440px;}.elementor-5877 .elementor-element.elementor-element-33ea738{--width:448px;}}/* Start custom CSS *//* === Vision Multimedia — Custom Styles === */

/* Fonts */
.elementor-element .heading-font,
.heading-font { font-family: 'Space Grotesk', sans-serif !important; }

/* Body Hintergrund-Override für diese Seite */
body.elementor-page-5877 {
    background: #050508 !important;
    color: #cbd5e1; /* slate-300 */
    font-family: 'Inter', sans-serif;
}
body.elementor-page-5877 ::selection {
    background: rgba(168, 85, 247, 0.3);
    color: #fff;
}

/* Glow-Orbs für globalen Hintergrund (3 Stück) */
.vm-glow-orb { position: absolute; border-radius: 9999px; pointer-events: none; }
.vm-glow-purple { top: 0; left: 25%; width: 500px; height: 500px; background: rgba(147, 51, 234, 0.10); filter: blur(120px); }
.vm-glow-cyan   { top: 40vh; right: 25%; width: 600px; height: 600px; background: rgba(8, 145, 178, 0.10); filter: blur(150px); }
.vm-glow-pink   { top: 130vh; left: 33%; width: 500px; height: 500px; background: rgba(219, 39, 119, 0.05); filter: blur(130px); }

/* Hero — radial vignette + bottom-fade */
.vm-hero { position: relative; }
.vm-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at center, transparent 20%, #050508 90%);
}
.vm-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, #050508 0%, transparent 50%);
}
.vm-hero > .e-con-inner, .vm-hero > .elementor-container { position: relative; z-index: 2; }

/* Three.js Canvas Container */
#vm-three-canvas { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
#vm-three-canvas canvas { display: block; }

/* Tagline-Gradient (purple → cyan) */
.vm-text-gradient-pc {
    background: linear-gradient(to right, #c084fc, #22d3ee);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
/* Headline-Gradient (white → slate-500) */
.vm-text-gradient-ws {
    background: linear-gradient(to right, #ffffff, #e2e8f0 50%, #64748b);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.vm-text-purple { color: #c084fc !important; }
.vm-text-pink   { color: #f472b6 !important; }
.vm-text-emerald{ color: #34d399 !important; }
.vm-text-cyan   { color: #22d3ee !important; }

/* Service Card */
.vm-card {
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    transition: border-color .5s ease;
    position: relative; overflow: hidden;
    min-height: 400px;
}
.vm-card::before {
    content: ''; position: absolute; top: -96px; right: -96px;
    width: 192px; height: 192px; border-radius: 9999px;
    filter: blur(48px); transition: background .5s ease;
}
.vm-card-purple::before { background: rgba(168, 85, 247, 0.10); }
.vm-card-purple:hover { border-color: rgba(168, 85, 247, 0.30); }
.vm-card-purple:hover::before { background: rgba(168, 85, 247, 0.20); }
.vm-card-pink::before { background: rgba(236, 72, 153, 0.10); }
.vm-card-pink:hover { border-color: rgba(236, 72, 153, 0.30); }
.vm-card-pink:hover::before { background: rgba(236, 72, 153, 0.20); }
.vm-card-emerald::before { background: rgba(16, 185, 129, 0.10); }
.vm-card-emerald:hover { border-color: rgba(16, 185, 129, 0.30); }
.vm-card-emerald:hover::before { background: rgba(16, 185, 129, 0.20); }
.vm-card-cyan::before { background: rgba(6, 182, 212, 0.10); }
.vm-card-cyan:hover { border-color: rgba(6, 182, 212, 0.30); }
.vm-card-cyan:hover::before { background: rgba(6, 182, 212, 0.20); }

/* Icon Badge */
.vm-icon-badge {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.vm-icon-purple  { background: rgba(168, 85, 247, 0.10); border: 1px solid rgba(168, 85, 247, 0.20); color: #c084fc; }
.vm-icon-pink    { background: rgba(236, 72, 153, 0.10); border: 1px solid rgba(236, 72, 153, 0.20); color: #f472b6; }
.vm-icon-emerald { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.20); color: #34d399; }
.vm-icon-cyan    { background: rgba(6, 182, 212, 0.10); border: 1px solid rgba(6, 182, 212, 0.20); color: #22d3ee; }

/* Card Footer */
.vm-card-footer {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1rem; margin-top: 2rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
    color: #94a3b8;
}
.vm-card:hover .vm-card-footer { color: #ffffff; }

/* Header / Navigation */
.vm-header {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(5, 5, 8, 0.70);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 50;
}
.vm-nav-link {
    color: #94a3b8; font-size: 11px; font-weight: 500;
    letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; transition: color .2s ease;
}
.vm-nav-link:hover { color: #fff; }
.vm-nav-link.vm-link-ki:hover      { color: #c084fc; }
.vm-nav-link.vm-link-design:hover  { color: #f472b6; }
.vm-nav-link.vm-link-3d:hover      { color: #34d399; }
.vm-nav-link.vm-link-soft:hover    { color: #22d3ee; }

/* Logo Sigma-Letter (Ξ) Gradient */
.vm-logo-xi {
    background: linear-gradient(to right, #a855f7, #22d3ee);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* CTA Pill (gradient border) */




/* Primary White Button */
.vm-btn-white {
    background: #fff; color: #000;
    padding: 16px 32px; border-radius: 9999px;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    box-shadow: 0 10px 15px -3px rgba(255,255,255,0.05);
    transition: background .15s ease;
}
.vm-btn-white:hover { background: #e2e8f0; color: #000; }

/* Glass Button */



/* Hero Tagline */
.vm-hero-tagline {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase;
    background: linear-gradient(to right, #c084fc, #22d3ee);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: inline-block; margin-bottom: 24px;
}

/* Section Eyebrows */
.vm-eyebrow {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 12px;
}

/* Portfolio Filter Bar */
.vm-filter-bar {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-radius: 9999px; padding: 6px;
    display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.vm-filter-btn {
    padding: 8px 20px; border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #94a3b8; background: transparent; border: none;
    cursor: pointer; transition: all .3s ease;
}
.vm-filter-btn:hover { color: #fff; }
.vm-filter-btn.is-active { background: #fff; color: #000; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2); }

/* Portfolio Card */
.vm-portfolio-item {
    position: relative; overflow: hidden;
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.05);
    background: rgba(15, 23, 42, 0.40);
    height: 380px; transition: opacity .3s ease;
}
.vm-portfolio-item img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.55; transition: transform .7s ease;
}
.vm-portfolio-item:hover img { transform: scale(1.05); }
.vm-portfolio-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, #050508, rgba(5,5,8,0.4) 40%, transparent);
    pointer-events: none;
}
.vm-portfolio-overlay {
    position: absolute; bottom: 0; left: 0; padding: 32px;
    width: 100%; z-index: 2;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.vm-portfolio-tag {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px;
    display: inline-block;
}
.vm-tag-purple  { color: #c084fc; background: rgba(168, 85, 247, 0.10); border: 1px solid rgba(168, 85, 247, 0.20); }
.vm-tag-cyan    { color: #22d3ee; background: rgba(6, 182, 212, 0.10);  border: 1px solid rgba(6, 182, 212, 0.20); }
.vm-tag-pink    { color: #f472b6; background: rgba(236, 72, 153, 0.10); border: 1px solid rgba(236, 72, 153, 0.20); }
.vm-tag-emerald { color: #34d399; background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.20); }
.vm-portfolio-arrow {
    width: 40px; height: 40px; border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.20);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
    transition: all .3s ease;
}
.vm-portfolio-item:hover .vm-portfolio-arrow { background: #fff; color: #000; }

/* Headline Skeleton */
.vm-h1 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900; color: #fff;
    line-height: 0.9; letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: clamp(3rem, 8vw, 8rem);
}
.vm-h2-mega {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700; color: #fff;
    line-height: 1.05; letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.vm-h-card {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700; color: #fff;
    letter-spacing: -0.01em; text-transform: uppercase;
    font-size: 1.25rem; line-height: 1.2;
}

/* === Elementor-Wrapper Overrides (Selectors gegen .elementor-button etc.) === */
.elementor-widget.vm-btn-white .elementor-button,
.elementor-widget.vm-btn-white .elementor-button-link {
    background: #fff !important; color: #000 !important;
    padding: 16px 32px !important; border-radius: 9999px !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: 0.05em !important; text-transform: uppercase !important;
    box-shadow: 0 10px 15px -3px rgba(255,255,255,0.05) !important;
    border: none !important;
}
.elementor-widget.vm-btn-white .elementor-button:hover { background: #e2e8f0 !important; color: #000 !important; }

.elementor-widget.vm-btn-glass .elementor-button,
.elementor-widget.vm-btn-glass .elementor-button-link {
    background: rgba(255,255,255,0.05) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
    padding: 16px 32px !important; border-radius: 9999px !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: 0.05em !important; text-transform: uppercase !important;
}
.elementor-widget.vm-btn-glass .elementor-button:hover { background: rgba(255,255,255,0.10) !important; }

/* CTA Pill in Header */




/* Nav-Links: wenn als Heading mit Link gerendert wird, anchor stylen */
.elementor-widget.vm-nav-link .elementor-heading-title a,
.elementor-widget.vm-nav-link .elementor-heading-title {
    color: #94a3b8 !important; font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: 0.15em !important; text-transform: uppercase !important;
    text-decoration: none !important; transition: color .2s ease !important;
}
.elementor-widget.vm-nav-link .elementor-heading-title:hover,
.elementor-widget.vm-nav-link .elementor-heading-title a:hover { color: #fff !important; }
.elementor-widget.vm-link-ki .elementor-heading-title:hover,
.elementor-widget.vm-link-ki .elementor-heading-title a:hover { color: #c084fc !important; }
.elementor-widget.vm-link-design .elementor-heading-title:hover,
.elementor-widget.vm-link-design .elementor-heading-title a:hover { color: #f472b6 !important; }
.elementor-widget.vm-link-3d .elementor-heading-title:hover,
.elementor-widget.vm-link-3d .elementor-heading-title a:hover { color: #34d399 !important; }
.elementor-widget.vm-link-soft .elementor-heading-title:hover,
.elementor-widget.vm-link-soft .elementor-heading-title a:hover { color: #22d3ee !important; }

/* Hero-Subtitle Text */
.elementor-widget.vm-hero-subtitle .elementor-widget-container {
    max-width: 36rem; margin: 0 auto;
}
.elementor-widget.vm-hero-subtitle p {
    color: #94a3b8 !important; font-weight: 300; font-size: 18px; line-height: 1.6;
    text-align: center; max-width: 36rem; margin: 0 auto 0 auto;
}

/* Hide editor frame */
.elementor-element { position: relative; }

/* Eyebrow color helpers as widget classes */
.elementor-widget.vm-eyebrow-cyan .elementor-heading-title { color: #22d3ee !important; }
.elementor-widget.vm-eyebrow-pink .elementor-heading-title { color: #f472b6 !important; }

/* Cards inside service grid: spacing */
.vm-card-inner { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }

/* === Layout: Service-Grid (4 Spalten mit Gap auf Desktop) === */
.elementor-element .vm-card {
    flex: 1 1 280px;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .elementor-element .vm-card { flex: 1 1 calc((100% - 72px) / 4); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .elementor-element .vm-card { flex: 1 1 calc((100% - 24px) / 2); }
}

/* === Layout: Portfolio Bento-Grid (12-col) === */
.vm-portfolio-grid { width: 100%; }
.vm-portfolio-grid .vm-portfolio-item.vm-col-8 { flex: 1 1 calc((100% / 12 * 8) - 16px); min-width: 0; }
.vm-portfolio-grid .vm-portfolio-item.vm-col-4 { flex: 1 1 calc((100% / 12 * 4) - 16px); min-width: 0; }
@media (max-width: 767px) {
    .vm-portfolio-grid .vm-portfolio-item.vm-col-8,
    .vm-portfolio-grid .vm-portfolio-item.vm-col-4 { flex: 1 1 100%; }
}

/* === Glow-Host muss die Orbs positionsfrei darüber lassen; sie sollen relativ zum Body schweben === */
.vm-glow-host { 
    position: absolute !important; 
    top: 0; left: 0; right: 0; pointer-events: none; 
    z-index: 0; height: 1px; overflow: visible;
}
.vm-glow-orb { z-index: 0; }

/* Body fallback (für published page) */
body.page-id-5877 {
    background: #050508 !important;
    color: #cbd5e1; font-family: 'Inter', sans-serif;
    overflow-x: clip;
}
body.page-id-5877 ::selection { background: rgba(168,85,247,.3); color: #fff; }

/* Stelle sicher, dass Hero relative ist (für CSS pseudo overlays) */
.elementor-element.vm-hero { position: relative; }

/* Header-Inner Container -> Logo etc richtig flexen */
.vm-header > .e-con-inner { width: 100%; }

/* Hero Tagline: Block-Element für korrektes Margin */
.elementor-widget.vm-hero-tagline .elementor-heading-title { 
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.3em !important; text-transform: uppercase !important;
    background: linear-gradient(to right, #c084fc, #22d3ee) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
}

/* H1 in Elementor Heading-Title */
.elementor-widget.vm-h1 .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important; color: #fff !important;
    line-height: 0.9 !important; letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    font-size: clamp(2.5rem, 7vw, 6.5rem) !important;
    margin: 32px 0 !important;
}

/* H2 mega */
.elementor-widget.vm-h2-mega .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    line-height: 1.1 !important; letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
}

/* H-Card */
.elementor-widget.vm-h-card .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    letter-spacing: -0.01em !important; text-transform: uppercase !important;
    font-size: 1.25rem !important; line-height: 1.2 !important;
    margin-top: 16px !important; margin-bottom: 16px !important;
}

/* Card body text */
.elementor-widget.vm-card-body p,
.elementor-widget.vm-hero-subtitle p {
    color: #94a3b8 !important; font-weight: 300 !important;
    line-height: 1.6 !important;
}
.elementor-widget.vm-card-body p { font-size: 13px !important; }
.elementor-widget.vm-hero-subtitle p { font-size: 17px !important; max-width: 540px; margin-left: auto; margin-right: auto; }

/* Eyebrow style */
.elementor-widget.vm-eyebrow .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.2em !important; text-transform: uppercase !important;
}

/* Icon-Badge inside heading widget */
.elementor-widget.vm-icon-badge .elementor-heading-title {
    width: 44px !important; height: 44px !important; border-radius: 12px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 22px !important; font-weight: 700 !important;
    line-height: 1 !important; margin-bottom: 24px;
}
.elementor-widget.vm-icon-purple .elementor-heading-title  { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.2); color: #c084fc; }
.elementor-widget.vm-icon-pink .elementor-heading-title    { background: rgba(236,72,153,.1); border: 1px solid rgba(236,72,153,.2); color: #f472b6; }
.elementor-widget.vm-icon-emerald .elementor-heading-title { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); color: #34d399; }
.elementor-widget.vm-icon-cyan .elementor-heading-title    { background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.2); color: #22d3ee; }

/* Portfolio item containment — overlay positioning */
.elementor-element.vm-portfolio-item { 
    position: relative; overflow: hidden;
    border-radius: 24px; border: 1px solid rgba(255,255,255,.05);
    background: rgba(15,23,42,.4);
    height: 380px;
}
.elementor-element.vm-portfolio-item > .e-con-inner { 
    width: 100%; height: 100%; position: relative; padding: 0 !important; max-width: none;
}
.elementor-element.vm-portfolio-item .elementor-widget-html,
.elementor-element.vm-portfolio-item .elementor-widget-container {
    width: 100%; height: 100%; padding: 0; margin: 0;
}
.elementor-element.vm-portfolio-item img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.55; transition: transform .7s ease;
    display: block;
}
.elementor-element.vm-portfolio-item:hover img { transform: scale(1.05); }
.elementor-element.vm-portfolio-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, #050508, rgba(5,5,8,.4) 40%, transparent);
    pointer-events: none;
}

/* Scripts block keep invisible */
.vm-scripts-block { display: none; }

/* Remove Twenty Twenty-Two default header/footer from elementor_canvas template — handled by template, no-op here */

/* === Specificity boost — wins over Twenty Twenty-Two === */
html body.elementor-page-5877 .elementor-element .elementor-heading-title,
html body.elementor-page-5877 .elementor-element .elementor-button,
html body.elementor-page-5877 .elementor-element .elementor-text-editor,
html body.elementor-page-5877 .elementor-element p,
html body.elementor-page-5877 .elementor-element a,
html body.elementor-page-5877 .elementor-element h1,
html body.elementor-page-5877 .elementor-element h2,
html body.elementor-page-5877 .elementor-element h3,
html body.elementor-page-5877 .elementor-element h4,
html body.elementor-page-5877 .elementor-element span,
html body.elementor-page-5877 .elementor-element div {
    font-family: 'Inter', sans-serif !important;
}
html body.elementor-page-5877 .elementor-element.heading-font,
html body.elementor-page-5877 .elementor-element.heading-font .elementor-heading-title,
html body.elementor-page-5877 .heading-font,
html body.elementor-page-5877 .vm-h1 .elementor-heading-title,
html body.elementor-page-5877 .vm-h2-mega .elementor-heading-title,
html body.elementor-page-5877 .vm-h-card .elementor-heading-title,
html body.elementor-page-5877 .vm-hero-tagline .elementor-heading-title,
html body.elementor-page-5877 .vm-eyebrow .elementor-heading-title,
html body.elementor-page-5877 .vm-logo .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* No-wrap on Logo */
html body.elementor-page-5877 .vm-logo .elementor-heading-title {
    white-space: nowrap !important;
    overflow: visible;
}

/* === Hero — ensure relative + canvas mounting works === */
html body.elementor-page-5877 .vm-hero {
    position: relative !important;
    overflow: hidden;
    min-height: 95vh !important;
}
html body.elementor-page-5877 #vm-three-canvas {
    position: absolute !important;
    inset: 0; top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none;
    overflow: hidden;
}
html body.elementor-page-5877 .vm-hero-content {
    position: relative !important;
    z-index: 10 !important;
}

/* Hero radial vignette */
html body.elementor-page-5877 .vm-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at center, transparent 20%, #050508 90%);
}
html body.elementor-page-5877 .vm-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, #050508 0%, transparent 50%);
}

/* === Service Cards — fix wrapping/overlap === */
html body.elementor-page-5877 .vm-card .elementor-widget {
    margin-bottom: 0 !important;
}
html body.elementor-page-5877 .vm-card .elementor-element.vm-icon-badge {
    margin-bottom: 16px !important;
}
html body.elementor-page-5877 .vm-card .elementor-widget-heading {
    margin-bottom: 12px !important;
}

/* Card body text override (was too vague) */
html body.elementor-page-5877 .vm-card-body .elementor-text-editor,
html body.elementor-page-5877 .vm-card-body p {
    color: #94a3b8 !important; font-size: 13px !important;
    font-weight: 300 !important; line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 !important;
}

/* Hero subtitle */
html body.elementor-page-5877 .vm-hero-subtitle .elementor-text-editor p,
html body.elementor-page-5877 .vm-hero-subtitle p {
    color: #94a3b8 !important; font-size: 17px !important;
    font-weight: 300 !important; line-height: 1.6 !important;
    text-align: center !important;
    max-width: 540px; margin: 0 auto !important;
    font-family: 'Inter', sans-serif !important;
}

/* Eyebrow override */
html body.elementor-page-5877 .vm-eyebrow.vm-eyebrow-cyan .elementor-heading-title { color: #22d3ee !important; }
html body.elementor-page-5877 .vm-eyebrow.vm-eyebrow-pink .elementor-heading-title { color: #f472b6 !important; }
html body.elementor-page-5877 .vm-eyebrow .elementor-heading-title {
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.2em !important; text-transform: uppercase !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* H1 / H2 / H-Card */
html body.elementor-page-5877 .vm-h1 .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important; color: #fff !important;
    line-height: 0.9 !important; letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    font-size: clamp(2.5rem, 7vw, 6.5rem) !important;
}
html body.elementor-page-5877 .vm-h2-mega .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    line-height: 1.1 !important; letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    font-style: normal !important;
}
html body.elementor-page-5877 .vm-h-card .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    letter-spacing: -0.01em !important; text-transform: uppercase !important;
    font-size: 1.25rem !important; line-height: 1.2 !important;
    margin-top: 0 !important; margin-bottom: 12px !important;
    font-style: normal !important;
}

/* Hero tagline */
html body.elementor-page-5877 .vm-hero-tagline .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.3em !important; text-transform: uppercase !important;
    background: linear-gradient(to right, #c084fc, #22d3ee) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

/* Buttons — make sure custom styles win */
html body.elementor-page-5877 .elementor-widget.vm-btn-white .elementor-button {
    background-color: #ffffff !important; background-image: none !important;
    color: #000000 !important;
    padding: 16px 32px !important; border-radius: 9999px !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: 0.05em !important; text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(255,255,255,0.05) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
html body.elementor-page-5877 .elementor-widget.vm-btn-glass .elementor-button {
    background-color: rgba(255,255,255,0.05) !important; background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
    padding: 16px 32px !important; border-radius: 9999px !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: 0.05em !important; text-transform: uppercase !important;
    font-family: 'Space Grotesk', sans-serif !important;
}




/* Portfolio images dimmer */
html body.elementor-page-5877 .vm-portfolio-item img {
    opacity: 0.55 !important;
}

/* ===========================================
   FOOTER  &  SHARED ELEMENTS
   =========================================== */
html body .vm-footer {
    background: #050508 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    position: relative; z-index: 5;
}
html body .vm-footer > .e-con-inner { max-width: 1280px !important; }

/* Footer Eyebrow */
html body .elementor-widget.vm-footer-eyebrow .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.25em !important; text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
html body .elementor-widget.vm-eyebrow-purple .elementor-heading-title  { color: #c084fc !important; }
html body .elementor-widget.vm-eyebrow-pink .elementor-heading-title    { color: #f472b6 !important; }
html body .elementor-widget.vm-eyebrow-emerald .elementor-heading-title { color: #34d399 !important; }
html body .elementor-widget.vm-eyebrow-cyan .elementor-heading-title    { color: #22d3ee !important; }

/* Footer Links */
html body .elementor-widget.vm-footer-link .elementor-heading-title,
html body .elementor-widget.vm-footer-link .elementor-heading-title a {
    font-family: 'Inter', sans-serif !important;
    color: #94a3b8 !important;
    font-size: 13px !important; font-weight: 400 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
    line-height: 1.4 !important;
}
html body .elementor-widget.vm-footer-link .elementor-heading-title a:hover,
html body .elementor-widget.vm-footer-link .elementor-heading-title:hover { color: #fff !important; }

/* Footer Tagline */
html body .elementor-widget.vm-footer-tagline .elementor-text-editor p,
html body .elementor-widget.vm-footer-tagline p {
    color: #94a3b8 !important; font-weight: 300 !important;
    font-size: 14px !important; line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 !important;
    max-width: 360px;
}

/* Footer Logo (smaller than header) */
html body .vm-footer .elementor-widget.vm-logo .elementor-heading-title,
html body .vm-footer .elementor-widget.vm-logo .elementor-heading-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important; font-weight: 700 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #fff !important; text-decoration: none !important;
    white-space: nowrap; display: inline-block;
}

/* Social Pills */
.vm-footer-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-footer-socials .vm-social {
    width: 36px; height: 36px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 700; text-decoration: none;
    letter-spacing: 0.02em;
    transition: all .25s ease;
}
.vm-footer-socials .vm-social:hover {
    background: rgba(255,255,255,0.10); color: #fff;
    border-color: rgba(255,255,255,0.20);
    transform: translateY(-2px);
}

/* Footer-Cols layout: 4 columns, wrap to 2 on smaller screens */
html body .vm-footer-cols { flex: 1 1 600px !important; }
html body .vm-footer-cols > .e-con-inner > .e-con { flex: 1 1 130px; min-width: 130px; }
@media (max-width: 767px) {
    html body .vm-footer-cols > .e-con-inner > .e-con { flex: 1 1 calc((100% - 48px)/2); }
}

/* Divider */
html body .elementor-widget.vm-footer-divider .elementor-divider-separator {
    border-top-color: rgba(255,255,255,0.06) !important;
    border-top-width: 1px !important;
}

/* Footer Bottom Row */
html body .elementor-widget.vm-footer-copyright .elementor-heading-title {
    font-family: 'Inter', sans-serif !important;
    color: #64748b !important;
    font-size: 12px !important; font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}
html body .elementor-widget.vm-footer-tagline-end .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #94a3b8 !important;
    font-size: 12px !important; font-weight: 500 !important;
    letter-spacing: 0.15em !important; text-transform: uppercase !important;
}

/* === Header (now in Theme Builder Template) === */
html body .vm-header {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(5, 5, 8, 0.70) !important;
    -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
    position: sticky !important; top: 0; z-index: 50;
}
html body .vm-header > .e-con-inner { max-width: 1280px !important; width: 100%; }

/* Logo */
html body .elementor-widget.vm-logo .elementor-heading-title,
html body .elementor-widget.vm-logo .elementor-heading-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important; font-weight: 700 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #ffffff !important; text-decoration: none !important;
    white-space: nowrap !important; display: inline-block;
}
.vm-logo-xi {
    background: linear-gradient(to right, #a855f7, #22d3ee);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    display: inline-block;
    -webkit-text-fill-color: transparent;
}

/* Nav-Links in header */
html body .elementor-widget.vm-nav-link .elementor-heading-title,
html body .elementor-widget.vm-nav-link .elementor-heading-title a {
    color: #94a3b8 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: 0.20em !important; text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
    white-space: nowrap !important;
}
html body .elementor-widget.vm-nav-link .elementor-heading-title:hover,
html body .elementor-widget.vm-nav-link .elementor-heading-title a:hover { color: #fff !important; }
html body .elementor-widget.vm-link-ki .elementor-heading-title a:hover { color: #c084fc !important; }
html body .elementor-widget.vm-link-design .elementor-heading-title a:hover { color: #f472b6 !important; }
html body .elementor-widget.vm-link-3d .elementor-heading-title a:hover { color: #34d399 !important; }
html body .elementor-widget.vm-link-soft .elementor-heading-title a:hover { color: #22d3ee !important; }

/* === Width upgrade: 1280 → 1440 site-wide === */
html body .vm-header > .e-con-inner,
html body .vm-footer > .e-con-inner,
html body .vm-footer2 > .e-con-inner,
html body .elementor-element[data-element_type="container"].e-con-boxed > .e-con-inner {
    max-width: 1440px !important;
}

/* === Footer 2.0 (rebuilt to match index.html) === */
html body .vm-footer2 {
    background: #050508 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    position: relative; z-index: 5; margin-top: 96px;
}

/* Footer eyebrow (col headlines: Services / Studio) */
html body .elementor-widget.vm-footer2-eyebrow .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #ffffff !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.25em !important; text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

/* Footer links (level-2) */
html body .elementor-widget.vm-footer2-link .elementor-heading-title,
html body .elementor-widget.vm-footer2-link .elementor-heading-title a {
    font-family: 'Inter', sans-serif !important;
    color: #94a3b8 !important;
    font-size: 12px !important; font-weight: 400 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
    line-height: 1.6 !important;
}
html body .elementor-widget.vm-footer2-link .elementor-heading-title a:hover { color: #ffffff !important; }
html body .elementor-widget.vm-h-cyan    .elementor-heading-title a:hover { color: #22d3ee !important; }
html body .elementor-widget.vm-h-purple  .elementor-heading-title a:hover { color: #c084fc !important; }
html body .elementor-widget.vm-h-emerald .elementor-heading-title a:hover { color: #34d399 !important; }
html body .elementor-widget.vm-h-pink    .elementor-heading-title a:hover { color: #f472b6 !important; }

/* Footer tagline */
html body .elementor-widget.vm-footer2-tagline .elementor-text-editor p,
html body .elementor-widget.vm-footer2-tagline p {
    color: #64748b !important; font-weight: 300 !important;
    font-size: 14px !important; line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important; margin: 0 !important;
    max-width: 460px;
}

/* Footer logo (smaller than header) */
html body .vm-footer2 .elementor-widget.vm-logo .elementor-heading-title,
html body .vm-footer2 .elementor-widget.vm-logo .elementor-heading-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important; font-weight: 700 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #ffffff !important; text-decoration: none !important;
    white-space: nowrap; display: inline-block;
}

/* Footer bottom row */
html body .vm-footer2-bottom { border-top: 1px solid rgba(255,255,255,0.05) !important; }
html body .elementor-widget.vm-footer2-copy .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #64748b !important;
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: 0.15em !important; text-transform: uppercase !important;
}

/* Hide the old footer template's elements if anything leftover */
html body .vm-footer { display: none !important; }

/* === Logo: stronger no-wrap & spacing → fixes header overlap on smaller widths === */
html body .vm-header .vm-logo .elementor-widget-container { flex-shrink: 0; }
html body .vm-nav { flex: 1 1 auto; justify-content: flex-end; margin-right: 24px; }

/* Section eyebrow purple/emerald/cyan/pink — reusable */
html body .elementor-widget.vm-eyebrow-cyan .elementor-heading-title    { color: #22d3ee !important; }
html body .elementor-widget.vm-eyebrow-purple .elementor-heading-title  { color: #c084fc !important; }
html body .elementor-widget.vm-eyebrow-emerald .elementor-heading-title { color: #34d399 !important; }
html body .elementor-widget.vm-eyebrow-pink .elementor-heading-title    { color: #f472b6 !important; }

/* H1 generic for detail pages (smaller than home hero) */
html body .vm-h1-detail .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important; color: #fff !important;
    line-height: 1.0 !important; letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    margin: 0 !important;
}
html body .vm-h2-section .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    line-height: 1.1 !important; letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
}
html body .vm-h3-card .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    letter-spacing: -0.005em !important;
    font-size: 1.05rem !important; line-height: 1.25 !important;
    text-transform: none !important;
    margin: 0 0 12px 0 !important;
}

/* Body text default */
html body .vm-body-text .elementor-text-editor p,
html body .vm-body-text p {
    color: #94a3b8 !important; font-weight: 300 !important;
    font-size: 14px !important; line-height: 1.65 !important;
    font-family: 'Inter', sans-serif !important; margin: 0;
}
html body .vm-body-text-lg p {
    font-size: 16px !important; line-height: 1.7 !important;
}

/* Card pattern: subtle bordered card with gradient bg */
html body .vm-feature-card {
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    transition: border-color .3s ease, transform .3s ease !important;
    flex: 1 1 280px !important;
}
html body .vm-feature-card:hover { transform: translateY(-2px); }
html body .vm-feature-card.vm-card-purple:hover  { border-color: rgba(168, 85, 247, 0.30) !important; }
html body .vm-feature-card.vm-card-pink:hover    { border-color: rgba(236, 72, 153, 0.30) !important; }
html body .vm-feature-card.vm-card-emerald:hover { border-color: rgba(16, 185, 129, 0.30) !important; }
html body .vm-feature-card.vm-card-cyan:hover    { border-color: rgba(6, 182, 212, 0.30) !important; }

/* Icon badge bigger on detail pages */
html body .vm-icon-big.elementor-widget .elementor-heading-title {
    width: 48px !important; height: 48px !important;
    border-radius: 14px !important;
    font-size: 24px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    line-height: 1 !important; margin-bottom: 16px !important;
}

/* Subtitle / lead paragraph under H1 */
html body .vm-lead p, html body .vm-lead .elementor-text-editor p {
    color: #cbd5e1 !important; font-weight: 300 !important;
    font-size: 18px !important; line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important;
    max-width: 720px;
}

/* Page Hero section (detail pages) */
html body .vm-page-hero {
    padding-top: 80px !important; padding-bottom: 60px !important;
}

/* Section block (vertical content blocks on detail pages) */
html body .vm-section { padding: 64px 24px !important; }

/* Tag-pills (small accent labels) — used in hero of detail pages */
.vm-tag-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.vm-tag-pill.t-purple  { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.25); color: #c084fc; }
.vm-tag-pill.t-pink    { background: rgba(236,72,153,.1); border: 1px solid rgba(236,72,153,.25); color: #f472b6; }
.vm-tag-pill.t-emerald { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: #34d399; }
.vm-tag-pill.t-cyan    { background: rgba(6,182,212,.1);  border: 1px solid rgba(6,182,212,.25);  color: #22d3ee; }
.vm-tag-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }

/* "Sechs Felder" 3-col grid on service detail pages */
html body .vm-grid-3 { display: flex; flex-wrap: wrap; gap: 24px; }
html body .vm-grid-3 > .e-con { flex: 1 1 300px; }
@media (min-width: 1024px) {
    html body .vm-grid-3 > .e-con { flex: 1 1 calc((100% - 48px)/3); }
}

/* ========== CONTACT FORM ========== */
html body .vm-form-shell {
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 24px !important;
}
html body .vm-contact-form .elementor-field-group label {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #94a3b8 !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.15em !important; text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
html body .vm-contact-form .elementor-field {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: border-color .2s ease, background .2s ease !important;
}
html body .vm-contact-form .elementor-field:focus {
    outline: none !important;
    border-color: rgba(168,85,247,0.5) !important;
    background: rgba(255,255,255,0.04) !important;
}
html body .vm-contact-form .elementor-field::placeholder { color: #475569 !important; }
html body .vm-contact-form .elementor-field-type-textarea .elementor-field { min-height: 140px; }
html body .vm-contact-form .elementor-button {
    background: #ffffff !important; color: #000 !important;
    padding: 16px 32px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important;
    border-radius: 9999px !important; border: none !important;
}
html body .vm-contact-form .elementor-button:hover { background: #e2e8f0 !important; }

/* ========== LOCATION TAG ========== */
.vm-loc-tag {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    color: #c084fc; font-size: 12px;
    letter-spacing: 0.08em; margin-bottom: 16px;
}

/* ========== FAQ ACCORDION ========== */
html body .vm-faq .elementor-accordion-item {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important; overflow: hidden;
}
html body .vm-faq .elementor-tab-title {
    background: transparent !important;
    border: none !important;
    padding: 20px 24px !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important; letter-spacing: -0.005em !important;
    cursor: pointer;
}
html body .vm-faq .elementor-tab-title:hover { background: rgba(255,255,255,0.02) !important; }
html body .vm-faq .elementor-tab-title.elementor-active { background: rgba(168,85,247,0.04) !important; }
html body .vm-faq .elementor-accordion-icon { color: #c084fc !important; }
html body .vm-faq .elementor-tab-content {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding: 16px 24px 24px 24px !important;
    color: #94a3b8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important; font-size: 14px !important; line-height: 1.65 !important;
}
html body .vm-faq .elementor-tab-content p {
    color: #94a3b8 !important; font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important; font-size: 14px !important; line-height: 1.65 !important;
    margin: 0;
}

/* ========== Responsive grid wrap for principle/loc cards (2 cols on tablet, 4 on desktop) ========== */
@media (min-width: 768px) {
    .vm-feature-card { flex: 1 1 calc((100% - 24px)/2) !important; max-width: calc((100% - 24px)/2); }
}
@media (min-width: 1024px) {
    .vm-feature-card { flex: 1 1 calc((100% - 72px)/4) !important; max-width: none; }
}

/* === STICKY HEADER OVERRIDE === */
/* Elementor Pro Theme-Builder wraps header in <header class="elementor-location-header">.
   Force the WRAPPER itself to be sticky so the Theme Builder header sticks to viewport top. */
html body header.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    width: 100%;
}
html body .vm-header {
    position: relative !important;  /* the wrapper <header.elementor-location-header> is sticky */
    background: rgba(5, 5, 8, 0.78) !important;
    -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    z-index: 999;
}
/* Body cannot have overflow-x:hidden because it breaks position:sticky */
html, html body { overflow-x: clip; }
/* === END STICKY === */
/* === DETAIL PAGE SECTIONS === */

/* Section number badge ("// 02 Reference Architektur") — monospace, purple */
html body .elementor-widget.vm-section-no .elementor-heading-title,
.vm-section-no {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.2em !important; text-transform: uppercase !important;
    color: #c084fc !important;
    display: block; margin-bottom: 12px;
}
.vm-section-no.t-cyan    { color: #22d3ee !important; }
.vm-section-no.t-emerald { color: #34d399 !important; }
.vm-section-no.t-pink    { color: #f472b6 !important; }

/* Visual placeholder (aspect-video, dashed border) */
.vm-vis-placeholder {
    position: relative; width: 100%;
    aspect-ratio: 16/9;
    border-radius: 24px;
    border: 1px dashed rgba(168,85,247,0.25);
    background: linear-gradient(135deg, rgba(168,85,247,0.03), rgba(255,255,255,0.005));
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
}
.vm-vis-placeholder.t-cyan    { border-color: rgba(6,182,212,0.25); }
.vm-vis-placeholder.t-emerald { border-color: rgba(16,185,129,0.25); }
.vm-vis-placeholder.t-pink    { border-color: rgba(236,72,153,0.25); }
.vm-vis-placeholder::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, #050508 0%, transparent 60%);
    pointer-events: none;
}
.vm-vis-icon {
    width: 80px; height: 80px; border-radius: 16px;
    background: rgba(168,85,247,0.05);
    border: 1px solid rgba(168,85,247,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #c084fc;
    backdrop-filter: blur(12px); position: relative; z-index: 1;
}
.vm-vis-icon.t-cyan    { background: rgba(6,182,212,0.05);  border-color: rgba(6,182,212,0.2);  color: #22d3ee; }
.vm-vis-icon.t-emerald { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.2); color: #34d399; }
.vm-vis-icon.t-pink    { background: rgba(236,72,153,0.05); border-color: rgba(236,72,153,0.2); color: #f472b6; }
.vm-vis-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: #475569; position: relative; z-index: 1;
}
.vm-vis-dim {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.05em;
    color: #334155; position: relative; z-index: 1;
}
.vm-vis-corner {
    position: absolute; top: 18px; left: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(192,132,252,0.6); z-index: 1;
}

/* Aspect ratios variants */
.vm-vis-placeholder.r-4x3 { aspect-ratio: 4/3; }
.vm-vis-placeholder.r-1x1 { aspect-ratio: 1/1; }

/* Bullet list with mono arrow */
.vm-arrow-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.vm-arrow-list li {
    display: flex; gap: 12px; align-items: flex-start;
    font-family: 'Inter', sans-serif; font-weight: 300;
    color: #94a3b8; font-size: 14px; line-height: 1.65;
}
.vm-arrow-list li::before {
    content: '→';
    font-family: 'JetBrains Mono', monospace;
    color: #c084fc; font-size: 14px;
    flex-shrink: 0; margin-top: 1px;
}
.vm-arrow-list.t-cyan    li::before { color: #22d3ee; }
.vm-arrow-list.t-emerald li::before { color: #34d399; }
.vm-arrow-list.t-pink    li::before { color: #f472b6; }

/* Use-case card (with metrics row) */
.vm-case-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 40px;
    transition: border-color .25s ease;
}
.vm-case-card:hover { border-color: rgba(168,85,247,0.2); }
.vm-case-card.t-cyan:hover    { border-color: rgba(6,182,212,0.2); }
.vm-case-card.t-emerald:hover { border-color: rgba(16,185,129,0.2); }
.vm-case-card.t-pink:hover    { border-color: rgba(236,72,153,0.2); }
.vm-case-card .vm-case-slug {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: #64748b; margin-bottom: 12px;
}
.vm-case-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #fff !important; font-size: 20px; font-weight: 700;
    text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 12px 0;
}
.vm-case-card p {
    color: #94a3b8; font-weight: 300; font-size: 14px;
    line-height: 1.65; margin: 0 0 24px 0;
    font-family: 'Inter', sans-serif;
}
.vm-case-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05);
}
.vm-metric .num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px; font-weight: 700; line-height: 1;
    color: #c084fc;
}
.vm-metric .label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #64748b; margin-top: 6px; line-height: 1.3;
}
.vm-case-card.t-cyan .vm-metric .num    { color: #22d3ee; }
.vm-case-card.t-emerald .vm-metric .num { color: #34d399; }
.vm-case-card.t-pink .vm-metric .num    { color: #f472b6; }

/* Stack columns (Provider grids) */
.vm-stack-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 24px;
}
.vm-stack-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: #c084fc; margin: 0 0 16px 0; font-weight: 700;
}
.vm-stack-card.t-cyan h4    { color: #22d3ee; }
.vm-stack-card.t-emerald h4 { color: #34d399; }
.vm-stack-card.t-pink h4    { color: #f472b6; }
.vm-stack-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: #94a3b8;
}

/* Output tile (1:1 placeholder) */
.vm-output-tile {
    position: relative; width: 100%; aspect-ratio: 1/1;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.10);
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: rgba(168,85,247,0.02);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vm-output-tile.t-cyan    { background-color: rgba(6,182,212,0.02); }
.vm-output-tile.t-emerald { background-color: rgba(16,185,129,0.02); }
.vm-output-tile.t-pink    { background-color: rgba(236,72,153,0.02); }
.vm-output-tile span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: #475569; font-weight: 700;
}

/* Compliance / mini-card (2x2 grid) */
.vm-compliance-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 24px;
}
.vm-compliance-card .head {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px; font-weight: 700;
    color: #fff; text-transform: uppercase;
    letter-spacing: -0.005em; margin-bottom: 8px;
}
.vm-compliance-card p {
    font-family: 'Inter', sans-serif;
    color: #94a3b8; font-weight: 300;
    font-size: 12px; line-height: 1.6; margin: 0;
}

/* Make sure section h2 has correct sizing across detail pages */
html body .elementor-element.vm-h2-detail .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; color: #fff !important;
    text-transform: uppercase !important;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important;
    line-height: 1.1 !important; letter-spacing: -0.01em !important;
    margin: 0 0 16px 0 !important;
}

/* Grid 4-column inside service-cards (was already there but reinforced) */
html body .vm-grid-3 > .vm-feature-card,
html body .vm-grid-3 > .e-con.vm-feature-card { 
    flex: 1 1 calc((100% - 48px)/3) !important; 
    min-width: 240px;
}
@media (max-width: 1023px) { html body .vm-grid-3 > .vm-feature-card { flex: 1 1 calc((100% - 24px)/2) !important; } }
@media (max-width: 640px)  { html body .vm-grid-3 > .vm-feature-card { flex: 1 1 100% !important; } }

/* === END DETAIL === */
/* === UNTERNEHMEN BLOCKS === */

/* Team Member Card */
.vm-team-card { display: flex; flex-direction: column; }
.vm-team-portrait {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.10);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 8px;
    margin-bottom: 16px;
    transition: border-color .25s ease;
}
.vm-team-card:hover .vm-team-portrait { border-color: rgba(168,85,247,0.2); }
.vm-team-portrait .icon {
    width: 32px; height: 32px; color: #334155;
    display: flex; align-items: center; justify-content: center;
}
.vm-team-portrait .icon svg { width: 100%; height: 100%; }
.vm-team-portrait .label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; letter-spacing: 0.3em;
    text-transform: uppercase; color: #475569;
    font-weight: 700;
}
.vm-team-name {
    font-family: 'Space Grotesk', sans-serif;
    color: #fff !important; font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: -0.005em;
    margin: 0;
}
.vm-team-role {
    font-family: 'Inter', sans-serif;
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; margin-top: 4px;
}
.vm-team-role.c-purple  { color: #c084fc; }
.vm-team-role.c-cyan    { color: #22d3ee; }
.vm-team-role.c-emerald { color: #34d399; }
.vm-team-role.c-pink    { color: #f472b6; }

/* Studio grid (12-col, mixed aspect tiles) */
.vm-studio-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.vm-studio-tile {
    position: relative; overflow: hidden;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.10);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    min-height: 220px;
}
.vm-studio-tile.span-8 { grid-column: span 8; aspect-ratio: 16/10; }
.vm-studio-tile.span-4 { grid-column: span 4; }
.vm-studio-tile.r-3x4  { aspect-ratio: 3/4; }
.vm-studio-tile.r-1x1  { aspect-ratio: 1/1; }
.vm-studio-tile.r-16x10 { aspect-ratio: 16/10; }
.vm-studio-tile .icon-box {
    width: 40px; height: 40px; color: #334155;
    display: inline-flex; align-items: center; justify-content: center;
}
.vm-studio-tile .icon-box svg { width: 100%; height: 100%; }
.vm-studio-tile .label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: #475569; font-weight: 700;
}
.vm-studio-tile .dim {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.05em;
    color: #334155;
}
@media (max-width: 768px) {
    .vm-studio-grid { grid-template-columns: 1fr; }
    .vm-studio-tile.span-8, .vm-studio-tile.span-4 { grid-column: span 1; }
}

/* Logo grid (6 columns, dashed placeholders, 3:1 aspect) */
.vm-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (min-width: 768px) {
    .vm-logo-grid { grid-template-columns: repeat(6, 1fr); }
}
.vm-logo-tile {
    aspect-ratio: 3/1;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #334155; font-weight: 700;
}
.vm-logo-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: #64748b;
    font-weight: 700; text-align: center;
    margin-bottom: 32px;
}

/* Mission section: stacked paragraphs nicely spaced */
.vm-mission-text p {
    color: #94a3b8 !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 0 16px 0;
    max-width: 760px;
}
.vm-mission-text p:last-child { margin-bottom: 0; }

/* Team layout 4-cols */
.vm-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (min-width: 768px) { .vm-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .vm-team-grid { grid-template-columns: repeat(4, 1fr); } }

/* === END UNTERNEHMEN === */

/* === TIMELINE ZIGZAG === */
.vm-tlz {
    position: relative;
    width: 100%;
    margin: 32px 0 0 0;
}
.vm-tlz::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.10) 82%, transparent 100%);
    transform: translateX(-0.5px);
}

.vm-tlz-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 32px 0;
    align-items: center;
}
.vm-tlz-item .vm-tlz-side { display: flex; flex-direction: column; }
.vm-tlz-item.left .vm-tlz-side  { text-align: right; padding-right: 48px; grid-column: 1; }
.vm-tlz-item.right .vm-tlz-side { text-align: left;  padding-left: 48px;  grid-column: 2; }

/* Year — strong override (theme uses larger font-size by default) */
html body .vm-tlz-year,
html body div.vm-tlz-year {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
html body .vm-tlz-year.c-purple  { color: #c084fc !important; }
html body .vm-tlz-year.c-cyan    { color: #22d3ee !important; }
html body .vm-tlz-year.c-emerald { color: #34d399 !important; }
html body .vm-tlz-year.c-pink    { color: #f472b6 !important; }
html body .vm-tlz-year.c-white   { color: #ffffff !important; }

/* H3 label — strong override (theme makes H3 much bigger by default) */
html body h3.vm-tlz-label,
html body .vm-tlz-label,
html body .elementor-element h3.vm-tlz-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

/* Body */
html body p.vm-tlz-body,
html body .vm-tlz-body,
html body .elementor-element p.vm-tlz-body {
    font-family: 'Inter', sans-serif !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 480px;
    display: inline-block;
}
.vm-tlz-item.left .vm-tlz-body  { text-align: right; }
.vm-tlz-item.right .vm-tlz-body { text-align: left; }

/* Mobile: stack vertically, all left */
@media (max-width: 768px) {
    .vm-tlz::before { left: 12px; }
    .vm-tlz-item { grid-template-columns: 1fr; padding: 24px 0; }
    .vm-tlz-item.left .vm-tlz-side,
    .vm-tlz-item.right .vm-tlz-side {
        text-align: left; padding-left: 32px; padding-right: 0; grid-column: 1;
    }
    .vm-tlz-item .vm-tlz-empty { display: none; }
    html body p.vm-tlz-body, html body .vm-tlz-body { text-align: left !important; }
}

html body .vm-section-no.t-emerald { color: #34d399 !important; }
/* === END TIMELINE ZIGZAG === */
/* === FOOTER FIXES === */
/* Links must not wrap */
html body .vm-footer2 .elementor-widget.vm-footer2-link .elementor-heading-title,
html body .vm-footer2 .elementor-widget.vm-footer2-link .elementor-heading-title a {
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Eyebrows */
html body .vm-footer2 .elementor-widget.vm-footer2-eyebrow .elementor-heading-title {
    font-size: 11px !important;
    margin-bottom: 18px !important;
}

/* Tagline: max 2 lines feel, slightly tighter */
html body .vm-footer2 .elementor-widget.vm-footer2-tagline p {
    max-width: 420px;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Logo in footer: tighter letter-spacing so Ξ is visible mid-word */
html body .vm-footer2 .elementor-widget.vm-logo .elementor-heading-title,
html body .vm-footer2 .elementor-widget.vm-logo .elementor-heading-title a {
    font-size: 22px !important;
    letter-spacing: 0.14em !important;
}
html body .vm-footer2 .vm-logo-xi {
    color: #c084fc;
    font-weight: 400;
    padding: 0 0.04em;
    display: inline-block;
}

/* Header logo Ξ — same treatment for consistency */
html body .vm-header .vm-logo-xi {
    color: #c084fc;
    font-weight: 400;
    padding: 0 0.04em;
    display: inline-block;
}
/* === END FOOTER FIXES === */
/* === HERO CONSISTENCY ===
   Make every detail-page hero start at the SAME y-position for H1 and Lead,
   regardless of text length. We reserve a minimum height for the H1 (2 lines)
   and the Lead (3 lines) and freeze the section min-height. */

/* Hero section min-height so each page is at least this tall */
html body .vm-page-hero {
    min-height: 460px !important;
}

/* Inner boxed container of the hero — keep content top-aligned and consistent gap */
html body .vm-page-hero > .e-con-inner {
    justify-content: flex-start !important;
}

/* Tag-pill row consistent height */
html body .vm-page-hero .vm-tag-pill {
    line-height: 1;
}

/* H1: reserve 2 lines, so 1-line titles still take the same vertical space as 2-line titles */
html body .vm-h1-detail .elementor-heading-title {
    min-height: calc(2em * 1.0);  /* line-height is 1.0 */
    line-height: 1.0 !important;
    display: block;
}

/* Lead paragraph: reserve 3 lines, so 2/3/4-line leads all occupy the same row */
html body .vm-lead .elementor-text-editor p,
html body .vm-lead p {
    min-height: calc(3em * 1.6);  /* line-height 1.6 */
    line-height: 1.6 !important;
    margin: 0;
}

/* Mobile fallback: relax constraints */
@media (max-width: 768px) {
    html body .vm-page-hero { min-height: 0 !important; }
    html body .vm-h1-detail .elementor-heading-title { min-height: 0; }
    html body .vm-lead .elementor-text-editor p, html body .vm-lead p { min-height: 0; }
}
/* === END HERO CONSISTENCY === */
/* === TYPOGRAPHY SYSTEM v1 ===
   Token-based design system. Single source of truth for type and spacing. */

:root {
    /* Type scale — Perfect Fourth (1.333), clamped for fluidity */
    --t-eyebrow:  11px;
    --t-caption:  12px;
    --t-mono:     12px;
    --t-bodySm:   13px;
    --t-body:     15px;
    --t-bodyLg:   17px;
    --t-h6:       18px;
    --t-h5:       20px;
    --t-h4:       24px;
    --t-h3:       28px;
    --t-h2:       clamp(28px, 3.6vw, 44px);
    --t-h1:       clamp(44px, 6vw, 84px);
    --t-display:  clamp(64px, 9vw, 140px);

    /* Line heights */
    --lh-display: 0.95;
    --lh-tight:   1.05;
    --lh-snug:    1.15;
    --lh-normal:  1.4;
    --lh-relaxed: 1.65;
    --lh-loose:   1.75;

    /* Letter spacing */
    --ls-display:    -0.03em;
    --ls-tightest:   -0.025em;
    --ls-tight:      -0.015em;
    --ls-normal:     0;
    --ls-wide:       0.08em;
    --ls-eyebrow:    0.18em;
    --ls-eyebrow-lg: 0.28em;

    /* Spacing scale (4 / 8 hybrid grid) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  40px;
    --sp-8:  48px;
    --sp-9:  64px;
    --sp-10: 80px;
    --sp-11: 96px;
    --sp-12: 128px;

    /* Section vertical rhythm */
    --section-py-tight: clamp(48px, 6vw, 80px);
    --section-py:       clamp(64px, 8vw, 112px);
    --section-py-loose: clamp(80px, 10vw, 144px);

    /* Reading widths */
    --w-lead: 680px;
    --w-body: 720px;
    --w-h2:   880px;

    /* Surface colors */
    --c-bg:     #050508;
    --c-fg:     #ffffff;
    --c-text-1: #e2e8f0;  /* slate-200, primary body */
    --c-text-2: #cbd5e1;  /* slate-300, lead */
    --c-text-3: #94a3b8;  /* slate-400, secondary body */
    --c-text-4: #64748b;  /* slate-500, muted */
    --c-text-5: #475569;  /* slate-600, placeholder */
    --c-text-6: #334155;  /* slate-700, disabled */

    /* Accents */
    --c-purple:  #c084fc;
    --c-cyan:    #22d3ee;
    --c-emerald: #34d399;
    --c-pink:    #f472b6;
}

/* Better font rendering */
html body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============ HEADLINES ============ */
html body .vm-h1-detail .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-h1) !important;
    font-weight: 800 !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: var(--ls-tightest) !important;
    color: var(--c-fg) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-wrap: balance;
    min-height: calc(var(--t-h1) * var(--lh-tight) * 2);
}

html body .vm-h2-section .elementor-heading-title,
html body .vm-h2-detail .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-h2) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: var(--ls-tight) !important;
    color: var(--c-fg) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-wrap: balance;
    max-width: var(--w-h2);
}

html body .vm-h3-card .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-h6) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: var(--ls-tight) !important;
    color: var(--c-fg) !important;
    text-transform: none !important;
    margin: 0 0 var(--sp-3) 0 !important;
}

/* ============ EYEBROWS / TAG-PILLS / SECTION-NO ============ */
html body .vm-section-no,
html body .elementor-widget.vm-section-no .elementor-heading-title {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace !important;
    font-size: var(--t-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-eyebrow) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 0 var(--sp-4) 0 !important;
    display: block;
}

.vm-tag-pill {
    display: inline-flex; align-items: center;
    gap: var(--sp-2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--t-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    line-height: 1;
}
.vm-tag-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }

/* ============ BODY TEXT ============ */
html body .vm-lead .elementor-text-editor p,
html body .vm-lead p {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--t-bodyLg) !important;
    font-weight: 300 !important;
    line-height: var(--lh-relaxed) !important;
    letter-spacing: 0 !important;
    color: var(--c-text-2) !important;
    max-width: var(--w-lead);
    margin: 0 !important;
    text-wrap: pretty;
}

html body .vm-body-text .elementor-text-editor p,
html body .vm-body-text p {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--t-body) !important;
    font-weight: 300 !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-3) !important;
    margin: 0;
    text-wrap: pretty;
}

html body .vm-body-text-lg p {
    font-size: var(--t-bodyLg) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-2) !important;
}

/* Reduce hero H1 min-height because tokens make it consistent now */
@media (max-width: 768px) {
    html body .vm-h1-detail .elementor-heading-title { min-height: 0; }
    html body .vm-h2-section .elementor-heading-title,
    html body .vm-h2-detail .elementor-heading-title { font-size: clamp(24px, 6vw, 32px) !important; }
}

/* ============ SECTION SPACING ============ */
html body .vm-section {
    padding-top: var(--section-py) !important;
    padding-bottom: var(--section-py) !important;
    padding-left: clamp(20px, 4vw, 24px) !important;
    padding-right: clamp(20px, 4vw, 24px) !important;
}
html body .vm-section.vm-page-hero {
    padding-top: var(--section-py-loose) !important;
    padding-bottom: var(--section-py-tight) !important;
}

/* ============ CARDS — UNIFIED PADDING ============ */
html body .vm-feature-card {
    padding: var(--sp-7) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: border-color .25s ease, transform .25s ease !important;
}
html body .vm-feature-card:hover { transform: translateY(-2px); }

.vm-case-card { padding: var(--sp-8) !important; border-radius: 24px; }
.vm-stack-card { padding: var(--sp-5) !important; border-radius: 16px; }
.vm-compliance-card { padding: var(--sp-5) !important; border-radius: 16px; }

/* Card metrics inner */
.vm-case-metrics {
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.vm-metric .num {
    font-size: var(--t-h3);
    line-height: 1;
    letter-spacing: var(--ls-tight);
}
.vm-metric .label {
    font-size: 10px;
    letter-spacing: var(--ls-eyebrow);
    margin-top: var(--sp-2);
    line-height: 1.3;
    color: var(--c-text-4);
}

/* ============ ICON BADGES ============ */
html body .vm-icon-big.elementor-widget .elementor-heading-title {
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    line-height: 1 !important;
    margin: 0 0 var(--sp-5) 0 !important;
}

/* ============ ARROW LIST (bullet points) ============ */
.vm-arrow-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--sp-3);
}
.vm-arrow-list li {
    display: flex; gap: var(--sp-3);
    align-items: flex-start;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: var(--c-text-3);
    font-size: var(--t-body);
    line-height: var(--lh-relaxed);
}
.vm-arrow-list li::before {
    content: '→';
    font-family: 'JetBrains Mono', monospace;
    color: var(--c-purple);
    flex-shrink: 0; margin-top: 2px;
}

/* ============ BUTTONS ============ */
html body .elementor-button.vm-btn-white,
html body .elementor-button.vm-btn-glass {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-bodySm) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    border-radius: 9999px !important;
    line-height: 1 !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
html body .elementor-button.vm-btn-white {
    background: #ffffff !important; color: #000 !important; border: none !important;
}
html body .elementor-button.vm-btn-white:hover { background: var(--c-text-1) !important; }
html body .elementor-button.vm-btn-glass {
    background: rgba(255,255,255,0.03) !important;
    color: var(--c-fg) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
html body .elementor-button.vm-btn-glass:hover { background: rgba(255,255,255,0.07) !important; }

/* CTA Pill (header CTA — different style) */


/* ============ FORM ============ */
html body .vm-contact-form .elementor-field-group label {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--c-text-3) !important;
    font-size: var(--t-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: var(--ls-eyebrow) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--sp-2) !important;
}
html body .vm-contact-form .elementor-field {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--t-body) !important;
    padding: var(--sp-4) var(--sp-4) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--c-fg) !important;
    transition: border-color .2s ease, background .2s ease !important;
}
html body .vm-contact-form .elementor-field:focus {
    border-color: rgba(192,132,252,0.5) !important;
    background: rgba(255,255,255,0.04) !important;
    outline: none !important;
}
html body .vm-contact-form .elementor-field::placeholder { color: var(--c-text-5) !important; }
html body .vm-form-shell {
    padding: var(--sp-8) !important;
    border-radius: 24px !important;
}

/* ============ TIMELINE FINE-TUNING ============ */
html body .vm-tlz-year, html body div.vm-tlz-year {
    font-size: var(--t-eyebrow) !important;
    letter-spacing: var(--ls-eyebrow-lg) !important;
    margin: 0 0 var(--sp-2) 0 !important;
}
html body h3.vm-tlz-label, html body .vm-tlz-label {
    font-size: var(--t-h4) !important;
    line-height: var(--lh-tight) !important;
    margin: 0 0 var(--sp-3) 0 !important;
}
html body p.vm-tlz-body, html body .vm-tlz-body {
    font-size: var(--t-body) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-3) !important;
    max-width: 460px;
}

/* ============ FOOTER REFINEMENTS ============ */
html body .vm-footer2 { margin-top: 0 !important; }
html body .vm-footer2 > .e-con-inner {
    padding-top: var(--sp-12) !important;
    padding-bottom: var(--sp-7) !important;
}
html body .vm-footer2 .elementor-widget.vm-footer2-link .elementor-heading-title,
html body .vm-footer2 .elementor-widget.vm-footer2-link .elementor-heading-title a {
    font-size: var(--t-bodySm) !important;
    line-height: 1.6 !important;
    color: var(--c-text-3) !important;
}
html body .vm-footer2 .elementor-widget.vm-footer2-eyebrow .elementor-heading-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-eyebrow) !important;
    letter-spacing: var(--ls-eyebrow) !important;
    color: var(--c-fg) !important;
    margin-bottom: var(--sp-5) !important;
}
html body .vm-footer2 .elementor-widget.vm-footer2-copy .elementor-heading-title {
    font-size: 10px !important;
    letter-spacing: var(--ls-eyebrow) !important;
    color: var(--c-text-4) !important;
}
html body .vm-footer2 .elementor-widget.vm-footer2-tagline p {
    font-size: var(--t-bodySm) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-4) !important;
    max-width: 380px;
    margin: 0 !important;
}

/* ============ HEADER REFINEMENTS ============ */
html body .vm-header .elementor-widget.vm-logo .elementor-heading-title,
html body .vm-header .elementor-widget.vm-logo .elementor-heading-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
html body .vm-nav .elementor-widget.vm-nav-link .elementor-heading-title,
html body .vm-nav .elementor-widget.vm-nav-link .elementor-heading-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: var(--t-bodySm) !important;
    font-weight: 600 !important;
    letter-spacing: var(--ls-eyebrow) !important;
    text-transform: uppercase !important;
    color: var(--c-text-2) !important;
    transition: color .2s ease;
}
html body .vm-nav .elementor-widget.vm-nav-link .elementor-heading-title a:hover { color: var(--c-fg) !important; }

/* ============ STUDIO / TEAM CARDS / OUTPUT TILES POLISH ============ */
.vm-team-name { font-size: var(--t-h6) !important; margin: 0 0 var(--sp-1) 0 !important; }
.vm-team-role { font-size: 10px !important; letter-spacing: var(--ls-eyebrow) !important; margin-top: var(--sp-1) !important; }
.vm-team-portrait { margin-bottom: var(--sp-4) !important; }

/* Stack card heads/lists */
.vm-stack-card h4 {
    font-size: var(--t-eyebrow) !important;
    letter-spacing: var(--ls-eyebrow) !important;
    margin: 0 0 var(--sp-4) 0 !important;
}
.vm-stack-card ul li {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: var(--t-mono) !important;
    line-height: 1.7 !important;
    color: var(--c-text-3) !important;
}

/* Use-case slug + body */
.vm-case-card .vm-case-slug {
    font-size: 10px !important;
    letter-spacing: var(--ls-eyebrow) !important;
    margin-bottom: var(--sp-3) !important;
    color: var(--c-text-4) !important;
}
.vm-case-card h3 {
    font-size: var(--t-h5) !important;
    margin: 0 0 var(--sp-3) 0 !important;
}
.vm-case-card p {
    font-size: var(--t-body) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-3) !important;
    margin: 0 0 var(--sp-6) 0 !important;
}

/* Compliance mini-card */
.vm-compliance-card .head {
    font-size: var(--t-bodySm) !important;
    letter-spacing: var(--ls-tight) !important;
    margin-bottom: var(--sp-2) !important;
}
.vm-compliance-card p {
    font-size: var(--t-mono) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-3) !important;
}

/* FAQ accordion typography */
html body .vm-faq .elementor-tab-title {
    font-size: var(--t-body) !important;
    font-weight: 600 !important;
    letter-spacing: var(--ls-tight) !important;
    padding: var(--sp-5) var(--sp-6) !important;
}
html body .vm-faq .elementor-tab-content,
html body .vm-faq .elementor-tab-content p {
    font-size: var(--t-bodySm) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--c-text-3) !important;
    padding-bottom: var(--sp-6) !important;
}

/* === END TYPOGRAPHY SYSTEM === */
/* === HERO H1 BOTTOM-ANCHORED (override) ===
   H1 sits at the BOTTOM of its reserved 2-line slot, so the visual gap
   between H1 and Lead stays constant regardless of title length. */
html body .vm-h1-detail .elementor-heading-title {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}
/* Reduce hero visual padding so it feels closer to lead */
html body .vm-section.vm-page-hero {
    padding-bottom: var(--sp-7) !important;
}
/* === END HERO H1 BOTTOM-ANCHORED === */
/* === SENIOR TWEAK v2: scale H1 down, lead up, tighter rhythm === */

/* H1 — smaller, lighter, tighter */
html body .vm-h1-detail .elementor-heading-title {
    font-size: clamp(36px, 4.8vw, 64px) !important;
    font-weight: 700 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.035em !important;
    /* Reserve only 1 line — natural overflow if title is longer (rare) */
    min-height: 1em !important;
    display: block !important;
}

/* Lead — slightly larger, brighter, narrower for readability */
html body .vm-lead .elementor-text-editor p,
html body .vm-lead p {
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: #e2e8f0 !important;           /* slate-200 */
    font-weight: 300 !important;
    max-width: 640px !important;
    /* Reserve 3 lines so leads up-to-3-lines align across pages */
    min-height: calc(19px * 1.55 * 3) !important;
}

/* Hero section — less aggressive top padding, no large min-height */
html body .vm-section.vm-page-hero {
    padding-top: clamp(56px, 6vw, 88px) !important;
    padding-bottom: clamp(32px, 4vw, 48px) !important;
    min-height: 0 !important;
}

/* Tag pill — slightly smaller dot, tighter padding so it doesn't dwarf alone */
.vm-tag-pill {
    padding: 5px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
}
.vm-tag-pill .dot { width: 5px !important; height: 5px !important; }

/* Mobile: relax all */
@media (max-width: 768px) {
    html body .vm-h1-detail .elementor-heading-title { font-size: clamp(32px, 8vw, 44px) !important; min-height: 0 !important; }
    html body .vm-lead p { font-size: 16px !important; min-height: 0 !important; }
}

/* === END SENIOR TWEAK === */
/* === EYEBROW SPACING FIX ===
   Tagged eyebrow wrapper sits 20px ABOVE the H2 (vs the section's 32px flex-gap),
   giving a tight 12px optical gap between eyebrow and headline.
   H2 → Content stays at the section's 32px which feels right. */
html body .elementor-element.vm-eyebrow-wrap,
html body .elementor-widget.vm-eyebrow-wrap {
    margin-bottom: -20px !important;
}
/* The eyebrow span itself: kill its own bottom margin (we control via wrapper) */
html body .vm-section-no,
html body .elementor-widget.vm-eyebrow-wrap .vm-section-no {
    margin: 0 !important;
    display: block;
}
/* === END EYEBROW SPACING FIX === */
/* === MONO ICONS ===
   All decorative icons site-wide: no box, no border, no background, no radius.
   Single monochrome color via currentColor (slate-200). */

/* Card icons (service-cards detail pages + home) */
html body .vm-icon-big.elementor-widget .elementor-heading-title,
html body .vm-icon-badge,
html body .vm-icon-badge.vm-icon-purple,
html body .vm-icon-badge.vm-icon-cyan,
html body .vm-icon-badge.vm-icon-emerald,
html body .vm-icon-badge.vm-icon-pink {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 var(--sp-5) 0 !important;
    color: var(--c-text-2) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 0 !important;
}
html body .vm-icon-big .elementor-heading-title svg,
html body .vm-icon-badge svg {
    width: 28px; height: 28px;
    color: var(--c-text-2);
    display: block;
}

/* Hero-visual icon: bigger, dimmer (it's on a placeholder) */
html body .vm-vis-icon,
html body .vm-vis-icon.t-purple,
html body .vm-vis-icon.t-cyan,
html body .vm-vis-icon.t-emerald,
html body .vm-vis-icon.t-pink {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    color: var(--c-text-4) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}
html body .vm-vis-icon svg {
    width: 48px; height: 48px;
    color: var(--c-text-4);
    display: block;
}

/* Studio/team placeholders */
html body .vm-team-portrait .icon,
html body .vm-team-portrait .icon svg,
html body .vm-studio-tile .icon-box,
html body .vm-studio-tile .icon-box svg {
    color: var(--c-text-5) !important;
}

/* === END MONO ICONS === */

/* ==== Stack chips (Software Entwicklung, Service-Cards) ==== */
html body .vm-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
html body .vm-stack-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(203, 213, 225, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.4;
  white-space: nowrap;
}
html body .vm-feature-card:hover .vm-stack-chip {
  border-color: rgba(34, 211, 238, 0.35);
  color: rgba(226, 232, 240, 0.95);
}














/* ==== Bento layout — slim icon in head ==== */
html body .vm-bento-row { align-items: stretch !important; }
html body .vm-bento-card { border-radius: 18px; }

html body .vm-bento-card .vm-bento-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
html body .vm-bento-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(34, 211, 238, 0.85);
  flex: 0 0 auto;
}
html body .vm-bento-icon-inline svg {
  width: 100%;
  height: 100%;
}
html body .vm-bento-card .vm-bento-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: rgba(34, 211, 238, 0.95);
  letter-spacing: 0.04em;
}
html body .vm-bento-card .vm-h3-card { margin-top: 4px !important; }
html body .vm-bento-card .vm-body-text p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.78);
}

/* Hide any leftover old image boxes from previous layout */
html body .vm-bento-image-col,
html body .vm-bento-image,
html body .vm-bento-image-banner,
html body .vm-bento-image-label { display: none !important; }

/* Tablet / mobile */
@media (max-width: 1024px) {
  html body .vm-bento-card,
  html body .vm-bento-card-uniform { width: 100% !important; }
}
/* ==== END Bento layout ==== */




/* ==== Bento glass cards (Software page) ==== */
html body.elementor-page-5884 .vm-bento-card {
  /* Use background-image so the mu-plugin's "background-color: transparent !important" on .e-con doesn't kill us */
  background-image: linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 40px -8px rgba(0, 0, 0, 0.4);
  transition: background-image 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
html body.elementor-page-5884 .vm-bento-card:hover {
  background-image: linear-gradient(rgba(255,255,255,0.075), rgba(255,255,255,0.045)) !important;
  border-color: rgba(34, 211, 238, 0.28) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 48px -8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(34, 211, 238, 0.10);
}
/* Stack chips read better against frosted glass */
html body.elementor-page-5884 .vm-stack-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(34, 211, 238, 0.20) !important;
}
/* ==== END Bento glass cards ==== */



















/* ==== Detail pages atmosphere (orbs) — all detail pages, NOT home (5877) ==== */
body.elementor-page-5881,
  body.elementor-page-5882,
  body.elementor-page-5883,
  body.elementor-page-5884,
  body.elementor-page-5885,
  body.elementor-page-5886 {
  position: relative;
}
body.elementor-page-5881::before,
  body.elementor-page-5882::before,
  body.elementor-page-5883::before,
  body.elementor-page-5884::before,
  body.elementor-page-5885::before,
  body.elementor-page-5886::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%,  rgba(56, 189, 248, 0.09) 0%, transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(168, 85, 247, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 22% 62%, rgba(56, 189, 248, 0.05) 0%, transparent 36%),
    radial-gradient(circle at 78% 84%, rgba(168, 85, 247, 0.06) 0%, transparent 40%);
}
body.elementor-page-5881::after,
  body.elementor-page-5882::after,
  body.elementor-page-5883::after,
  body.elementor-page-5884::after,
  body.elementor-page-5885::after,
  body.elementor-page-5886::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(2, 1, 1, 0.35) 95%);
}
body.elementor-page-5881 .elementor,
  body.elementor-page-5882 .elementor,
  body.elementor-page-5883 .elementor,
  body.elementor-page-5884 .elementor,
  body.elementor-page-5885 .elementor,
  body.elementor-page-5886 .elementor {
  position: relative;
  z-index: 1;
}
/* ==== END Detail pages atmosphere ==== */




/* ==== Hero atmosphere shield (isolation only, no overlay) ==== */
/* All detail page heroes (.vm-page-hero — Home uses .vm-hero, unaffected) */
html body .vm-page-hero {
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate;
}
/* Make sure inner content sits above any background overlays */
html body .vm-page-hero > .e-con-inner,
html body .vm-page-hero > .e-con,
html body .vm-page-hero > .elementor-container {
  position: relative;
  z-index: 2;
}
/* ==== END Hero atmosphere shield ==== */

/* ==== Body overflow fix for sticky header (must be last, wins specificity battle) ==== */
html body,
html body.home,
html body.page-id-5877,
html body[class*="elementor-page-"] {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* ==== END Body overflow fix ==== */




/* The inner text span must not paint its own background anymore */

/* Hover: fill the pill with the gradient (text becomes the only "hole" if you want — easier: just darken slightly) */

/* ==== END vm-cta-pill rebuild ==== */

/* ==== vm-cta-pill — single source of truth (gradient outline pill) ==== */
html body .vm-cta-pill .elementor-button,
html body .vm-cta-pill .elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #9333ea, #06b6d4) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: filter 0.25s ease;
}
html body .vm-cta-pill .elementor-button-text {
  display: inline-block !important;
  background-color: #050508 !important;
  background-image: none !important;
  border-radius: 9999px !important;
  padding: 10px 22px !important;
  margin: 0 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  transition: background-color 0.25s ease;
}
html body .vm-cta-pill .elementor-button:hover .elementor-button-text,
html body .vm-cta-pill .elementor-button-link:hover .elementor-button-text {
  background-color: transparent !important;
}
/* ==== END vm-cta-pill ==== *//* End custom CSS */