/* ============================================================ Oneshot - Legacy Site Patches Targets Chrome scroll jank from Framer's stacked GPU layers and button label clipping. Loaded last in so it wins the cascade against Framer's inline styles (via !important). ============================================================ */ /* 1. Tame Framer's blanket will-change usage. Framer marks ~120 elements with will-change:transform; Chrome allocates a compositing layer per declaration. The resulting layer-tree pressure is the single biggest cause of Chrome lag on this page. Animations continue to work without the hint. */ [style*="will-change:transform"], [style*="will-change: transform"], [style*="will-change:var(--framer-will-change-override"], [style*="will-change:var(--framer-will-change-effect-override"], [style*="will-change:var(--framer-will-change-filter-override"] { will-change: auto !important; } /* 2. Collapse Framer's "stepped blur" animation. Framer emits 8 nested elements at progressive blur radii (0.078125px ... 5px) so a blur-in animation looks smooth. On Chrome each of these is rasterized every frame, which is the dominant paint cost. Strongest layers (5px / 10px / 8px) stay; the intermediates become no-ops. */ [style*="filter:blur(0.078125px)"], [style*="filter:blur(0.15625px)"], [style*="filter:blur(0.3125px)"], [style*="filter:blur(0.625px)"], [style*="filter:blur(1.25px)"], [style*="filter:blur(2.5px)"] { filter: none !important; } [style*="backdrop-filter:blur(0.078125px)"], [style*="backdrop-filter:blur(0.15625px)"], [style*="backdrop-filter:blur(0.3125px)"], [style*="backdrop-filter:blur(0.625px)"], [style*="backdrop-filter:blur(1.25px)"], [style*="backdrop-filter:blur(2.5px)"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 3. Cap remaining heavy backdrop blur. Backdrop-filter over a wide region is Chrome's most expensive per-frame paint. 10px -> 6px is visually indistinguishable but meaningfully cheaper. The 8px nav-bar blur is left alone. */ [style*="backdrop-filter:blur(10px)"] { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* 4. Button label overflow fix. Framer wraps each navigation/CTA label in an inner container with overflow:hidden plus translateZ/scale on hover. Chrome's subpixel rounding clips the text against the right edge by 1-2px. Force the wrappers to allow overflow and pin labels to a single line. */ nav a[href^="./#"], nav a[href^="#"], a[data-framer-name="Desktop"], a[data-framer-name="Mobile"], [data-framer-name="Give it a shot"], [data-framer-name="Trigger"], .framer-CUI1w { overflow: visible !important; } nav a[href^="./#"] > div, nav a[href^="#"] > div, a[data-framer-name="Desktop"] > div, a[data-framer-name="Mobile"] > div, [data-framer-name="Give it a shot"] > div, .framer-CUI1w > div { overflow: visible !important; } nav a[href^="./#"] p, nav a[href^="#"] p, a[data-framer-name="Desktop"] p, a[data-framer-name="Mobile"] p, [data-framer-name="Give it a shot"] p, [data-framer-name="Give it a shot"] span, .framer-CUI1w p { white-space: nowrap !important; text-overflow: clip !important; } /* 5. Honor user motion preference. Framer doesn't ship prefers-reduced-motion handling. This also gives users on lower-end Chrome installs a way out. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ "Das sagen unsere Kunden" — testimonials redesign. Layout: 3-col x 2-row grid. Left column stacks two text testimonial cards; middle + right columns each span both rows with a tall video. Cards reuse the pricing "Bento gradient ring" recipe for visual consistency. ============================================================ */ /* Tighten the section's outer chrome. The pricing-style 120px block padding + 48px head gap was the source of the "huge gaps" feel. Reuse the same numbers we tighten globally. */ .acc-reviews { padding: 72px 24px !important; gap: 28px !important; } /* Header: right-aligned, narrower intro copy. */ .acc-reviews-head-v2 { align-items: flex-end !important; text-align: right !important; max-width: 1180px !important; width: 100% !important; gap: 10px !important; margin-left: auto !important; margin-right: 0 !important; } .acc-reviews-head-v2 h2, .acc-reviews-head-v2 p { text-align: right !important; --framer-text-alignment: right !important; } .acc-reviews-head-v2 h2 { letter-spacing: -0.005em !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } /* Below the mobile breakpoint, allow the heading to wrap so it doesn't trigger horizontal scrolling on small screens. */ @media (max-width: 540px) { .acc-reviews-head-v2 h2 { white-space: normal !important; } } .acc-reviews-head-v2 p { max-width: 520px !important; } /* Grid: 3 simple columns. align-items:stretch so the testimonial column matches the (taller) video columns in height. */ .acc-reviews-grid-v2 { max-width: 1180px !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: auto !important; align-items: stretch !important; gap: 14px !important; } /* Left column: flex stack that fills the row height set by the videos. Each card flex:1 so the two cards share that height equally (with the 14px gap between them). Result: 2 cards stacked = 1 video tall. */ .acc-testi-col { display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; } .acc-testi-col > .acc-testi-card { flex: 1 1 0; min-height: 0; } /* Testimonial card: same Bento gradient-ring recipe used by .acc-plan (pricing cards). 1px outer gradient → glowing top edge; inner solid dark fill. Now height-driven by the flex:1 stretch above, so the inner needs to fill it. */ .acc-testi-card { position: relative; display: flex; flex-direction: column; padding: 1px; border-radius: 16px; background: linear-gradient(180deg, rgb(38, 38, 38) 0%, rgb(15, 15, 15) 25%) !important; overflow: hidden; border: none !important; } .acc-testi-card-inner { position: relative; display: flex; flex-direction: column; flex: 1; gap: 10px; background-color: rgb(15, 15, 15); border-radius: 15px; padding: 24px 26px 22px; color: #fff; font-family: Inter, sans-serif; } .acc-testi-name { font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .acc-testi-role { font-size: 13.5px; line-height: 1.4; color: rgb(163, 163, 163); margin-top: -6px; } .acc-testi-quote { font-size: clamp(14px, 1vw, 15.5px); line-height: 1.5; color: rgb(212, 212, 212); margin: 8px 0 0; } /* Stars pinned to the bottom-right of the (now tall) card so the layout reads name → role → quote up top, stars anchored down. */ .acc-testi-stars { align-self: flex-end; margin-top: auto; color: rgb(255, 0, 0); display: inline-flex; gap: 3px; line-height: 0; } .acc-testi-stars .acc-star { width: 17px; height: 17px; display: block; } /* Videos use their natural vertical (9:16) aspect ratio so the reel content is never cropped. They live in their own grid columns now, so they don't drag the testimonials' rows taller. */ .acc-reviews-grid-v2 .acc-review-card { position: relative; aspect-ratio: 9 / 16 !important; height: auto !important; min-height: 0 !important; width: 100%; align-self: start; border-radius: 16px; overflow: hidden; background: rgb(17, 17, 17); } .acc-reviews-grid-v2 .acc-review-card video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: rgb(17, 17, 17); } .acc-review-card, .acc-review-card video { cursor: pointer !important; } /* No play-button overlay on review cards — playback is click-only. */ .acc-review-card .acc-review-play, .acc-review-card .acc-hero-play { display: none !important; } .acc-reviews-grid-v2 .acc-review-card video { filter: brightness(0.6) contrast(1.05) !important; } /* Stats row sits closer to the grid. */ .acc-reviews-stats { margin-top: 8px !important; } /* Stats: brand red, matching the "Give it a shot" CTA gradient (rgb(255,0,0) -> rgb(140,0,0)). Use background-clip:text so the gradient is visible through the glyphs. Both the modern and the -webkit- prefixed forms are pinned with !important to outrank the default white-to-grey gradient declared earlier in the cascade. */ span.acc-stat-num, .acc-reviews-stats .acc-stat-num { background-image: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(140, 0, 0) 100%) !important; background-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-fill-color: transparent !important; color: rgb(255, 0, 0) !important; } /* Responsive: collapse to a single column under 900px. */ @media (max-width: 900px) { .acc-reviews { padding: 56px 20px !important; gap: 20px !important; } .acc-reviews-grid-v2 { grid-template-columns: 1fr !important; max-width: 420px !important; } } /* ============================================================ All videos: colored with a dark twist. The site has three places that apply `grayscale(1)` to videos: - .acc-review-card video (line 587 in legacy.html) - [data-framer-name="Media"] video (line 595, __acc_slide_videos_bw__) - .acc-hero-video (line 934) We override every one of them — and any inline filter Framer may add — with a single rule: dim the video, slight contrast + saturation boost, NO grayscale. Result: a moody, dark frame that still keeps the original color of the footage. ============================================================ */ video, .acc-hero-video, .acc-review-card video, .acc-reviews-grid-v2 .acc-review-card video, [data-framer-name="Media"] video { filter: brightness(0.55) contrast(1.08) saturate(1.05) !important; -webkit-filter: brightness(0.55) contrast(1.08) saturate(1.05) !important; } /* ============================================================ Unified Contact + FAQ block. The contact section now hosts a 2-column grid: the form card on the left, the Framer FAQ section on the right. Drops the "Lass uns reden" header (handled by hiding it inline in JS), and neutralises the FAQ section's own padding because it now lives inside the contact section. ============================================================ */ .acc-contact-unified { padding: 72px 24px !important; gap: 0 !important; } /* Force the FAQ
to stack vertically inside its grid column. Framer's base style is `flex-flow: row` — that puts the Title to the LEFT of the accordion. We want Title ABOVE accordion. */ .acc-contact-unified-grid > #faq, .acc-contact-unified-grid > section[aria-label="Frequently Asked Questions"] { display: flex !important; flex-direction: column !important; flex-flow: column nowrap !important; gap: 16px !important; width: 100% !important; max-width: none !important; padding: 0 !important; } /* Title widths inside the FAQ once it's in our grid. */ .acc-contact-unified-grid .framer-1ggj8ep, .acc-contact-unified-grid .framer-s8n8fh, .acc-contact-unified-grid .framer-16q98pg, .acc-contact-unified-grid .framer-sd4vc8-container { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; white-space: normal !important; word-break: normal !important; } .acc-contact-unified-grid { width: 100%; max-width: 1240px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } /* Grid tracks size to their CONTENT min-width by default. The FAQ accordion has wide questions that push its column past 50%, which crushes the form to a sliver on the left. Force both children to allow shrinking. */ .acc-contact-unified-grid > * { min-width: 0 !important; } /* Form card fills its column instead of the original 640px cap. Also stretches to match the FAQ column's height. */ .acc-contact-unified .acc-contact-card { max-width: none !important; margin: 0 !important; height: 100% !important; display: flex !important; flex-direction: column; } .acc-contact-unified .acc-contact-form { flex: 1; display: flex; flex-direction: column; } /* Push the textarea to absorb the extra height so the submit button stays anchored at the bottom of the card. */ .acc-contact-unified .acc-contact-form > .acc-field:has(textarea) { flex: 1; } .acc-contact-unified .acc-contact-form textarea { flex: 1; min-height: 120px; } /* The FAQ section was its own full-width
with 100+px of block padding. Inside the unified grid it's a column, so strip the padding and let the inner content sit at the top. */ .acc-contact-unified-grid > section[aria-label="Frequently Asked Questions"], .acc-contact-unified-grid > #faq { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: transparent !important; } .acc-contact-unified-grid > section[aria-label="Frequently Asked Questions"] > div, .acc-contact-unified-grid > #faq > div { width: 100% !important; max-width: none !important; } /* Responsive: stack columns below 900px. */ @media (max-width: 900px) { .acc-contact-unified { padding: 56px 20px !important; } .acc-contact-unified-grid { grid-template-columns: 1fr !important; gap: 24px; max-width: 560px; } } /* Features section heading (first block after the hero) right-aligned: "Wir sprechen nur die Sprache von Effizienz, Performance und Daten" + subtitle. The container is a flex column with align-items:center, and the Framer rich-text uses an inline --framer-text-alignment:center custom prop — override both. */ .framer-1btejof { align-items: flex-end !important; margin-left: auto !important; text-align: right !important; } .framer-1btejof .framer-text, .framer-1btejof [data-framer-component-type="RichTextContainer"] { text-align: right !important; --framer-text-alignment: right !important; } /* Services section heading left-aligned: "Services" + "ps. In allen unseren Services sind Analysen ..." */ .framer-e5t41u { align-items: flex-start !important; margin-right: auto !important; text-align: left !important; } .framer-e5t41u .framer-text, .framer-e5t41u [data-framer-component-type="RichTextContainer"] { text-align: left !important; --framer-text-alignment: left !important; } /* Mobile: the Services subtitle paragraph ($.framer-1ci4c07) has `white-space: pre` baked in, which is what forces it onto a single overflowing line. Override to normal wrap and clamp to the actual viewport width. Same treatment for the matching Features subtitle. */ @media (max-width: 720px) { .framer-e5t41u, .framer-1btejof { width: 100% !important; max-width: 100vw !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .framer-1ci4c07, .framer-e5t41u .framer-1ci4c07, .framer-1btejof .framer-1ci4c07 { white-space: normal !important; width: 100% !important; max-width: calc(100vw - 40px) !important; overflow-wrap: break-word !important; word-break: normal !important; } .framer-1ci4c07 p, .framer-e5t41u p, .framer-1btejof p { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; max-width: 100% !important; } /* Service cards (Branding & Design / Web Dev / Content / Automation) have inline width: 575px from Framer's desktop variant. On a phone that's wider than the viewport — the cards drift right and clip on the left edge. Clamp to viewport with the same 20px gutter used by the rest of the mobile layout. */ [data-framer-name="Intergrations Main Container"] { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; padding-left: 20px !important; padding-right: 20px !important; flex-direction: column !important; align-items: stretch !important; } [data-framer-name="Intergrations Main Container"] .framer-1a0s932, [data-framer-name="Intergrations Main Container"] .framer-tqavf3, [data-framer-name="Intergrations Main Container"] .framer-1cu0zkj-container, [data-framer-name="Intergrations Main Container"] .framer-8ti4em-container, [data-framer-name="Intergrations Main Container"] .framer-6bfhxd-container, [data-framer-name="Intergrations Main Container"] .framer-ilogti-container, [data-framer-name="Intergrations Main Container"] .framer-4l9zgs-container, [data-framer-name="Intergrations Main Container"] .framer-1ayaqup-container, [data-framer-name="Intergrations Main Container"] .framer-1f69uvv-container, [data-framer-name="Intergrations Main Container"] .framer-uql401-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } [data-framer-name="Intergrations Main Container"] .framer-M1F6e { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* Services cards (Branding & Design / Web Dev / Content / Automation) get the same 3D Bento gradient-ring as the pricing .acc-plan cards. Card background becomes a top-light → dark gradient; a ::before pseudo set at inset 1px draws the solid dark inner — creating a subtle glowing top edge. The original Framer "Full / Dark background" layer is hidden since the pseudo now provides the inner fill. */ [data-framer-name="Intergrations Main Container"] .framer-M1F6e { position: relative !important; background: linear-gradient(180deg, rgb(38, 38, 38) 0%, rgb(15, 15, 15) 25%) !important; background-color: transparent !important; border: none !important; border-radius: 20px !important; overflow: hidden !important; isolation: isolate; } [data-framer-name="Intergrations Main Container"] .framer-M1F6e::before { content: ""; position: absolute; inset: 1px; background-color: rgb(15, 15, 15); border-radius: 19px; z-index: 0; pointer-events: none; } [data-framer-name="Intergrations Main Container"] .framer-M1F6e > * { position: relative; z-index: 1; } [data-framer-name="Intergrations Main Container"] .framer-M1F6e [data-framer-name="Full / Dark background"] { display: none !important; } /* Framer draws the card border via a [data-border="true"]::after pseudo, not the CSS border property — so border:none alone wasn't enough. Strip the pseudo and zero out the custom-prop border widths it reads. */ [data-framer-name="Intergrations Main Container"] .framer-M1F6e[data-border="true"]::after { display: none !important; content: none !important; border: 0 none !important; } [data-framer-name="Intergrations Main Container"] .framer-M1F6e[data-border="true"] { --border-top-width: 0px !important; --border-right-width: 0px !important; --border-bottom-width: 0px !important; --border-left-width: 0px !important; --border-color: transparent !important; } /* Pricing section heading left-aligned: "Pakete für jede Wachstumsphase" + "Vom Einstieg über …" */ .acc-pricing-head { align-items: flex-start !important; text-align: left !important; margin-right: auto !important; margin-left: 0 !important; max-width: 1240px !important; width: 100% !important; } .acc-pricing-head h2, .acc-pricing-head p { text-align: left !important; --framer-text-alignment: left !important; } /* ============================================================ Unified section-heading sizing. Use the same scale Framer applies to "Services" / "Wir sprechen…" (Switzer 40px / 1em / 600) and the matching subtitle (18px / 1.4em / 400). Apply across Framer-built AND injected sections so the page reads as one system. ============================================================ */ .acc-pricing-head h2, .acc-reviews-head h2, .acc-contact-head h2, .acc-contact-unified-grid .framer-1ggj8ep h2, .framer-1btejof h2, .framer-e5t41u h2 { font-family: "Switzer", "Switzer Placeholder", Inter, sans-serif !important; font-size: 40px !important; font-weight: 600 !important; line-height: 1em !important; letter-spacing: 0em !important; color: #fff !important; margin: 0 !important; } .acc-pricing-head p, .acc-reviews-head p, .acc-contact-head p, .acc-contact-unified-grid .framer-1ggj8ep p, .framer-1btejof p, .framer-e5t41u p { font-family: "Switzer", "Switzer Placeholder", Inter, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4em !important; color: rgb(161, 161, 161) !important; margin: 0 !important; } /* Mobile: shrink section titles + subtitles so they don't dominate the screen. 40px / 18px is too big on a phone — drop to 26px / 15px. */ @media (max-width: 720px) { .acc-pricing-head h2, .acc-reviews-head h2, .acc-contact-head h2, .acc-contact-unified-grid .framer-1ggj8ep h2, .framer-1btejof h2, .framer-e5t41u h2 { font-size: 26px !important; line-height: 1.1em !important; } .acc-pricing-head p, .acc-reviews-head p, .acc-contact-head p, .acc-contact-unified-grid .framer-1ggj8ep p, .framer-1btejof p, .framer-e5t41u p { font-size: 15px !important; } /* Also bring back wrapping on the reviews heading at mobile, in case it was forced nowrap. */ .acc-reviews-head-v2 h2 { white-space: normal !important; } } /* Mobile: kill the fixed bottom frost/blur bar (#acc-bottom-blur). It's a 160px-tall, position:fixed overlay at the bottom of the viewport that eats touch interactions visually and is way more distracting on a small screen than it is helpful. */ @media (max-width: 810px) { #acc-bottom-blur { display: none !important; } } /* Pricing: make the middle (recommended) card BIGGER than the side cards. Wider column + a touch more vertical padding. No font / color / decoration changes — just size. */ .acc-pricing-grid { grid-template-columns: 1fr 1.18fr 1fr !important; } .acc-plan.recommended .acc-plan-inner { padding: 52px 36px !important; } @media (max-width: 980px) { .acc-pricing-grid { grid-template-columns: 1fr !important; } .acc-plan.recommended .acc-plan-inner { padding: 36px 32px !important; } }