:root { --rs-site-logo-image: url("assets/rs-klimaat-logo.png?v=1777400785"); --rs-home-top-banner-image: url("assets/rs-home-top-banner.png?v=1779037169"); --rs-home-bottom-banner-image: url("assets/rs-home-bottom-banner.png?v=1779037169"); --rs-home-top-header-height: 375px; --rs-home-top-header-height-mobile: 270px; --rs-home-second-header-height: 455px; --rs-home-second-header-height-mobile: 355px; --rs-home-page-bg: #748998; --rs-home-panel-bg: #b5c8d6; --rs-home-header-bg: #cddbe6; --rs-home-header-bar: #9fb5c7; --rs-home-photo-tint-color: #9fb5c7; --rs-home-card-tint-color: #9fb5c7; --rs-home-glass-tint-color: var(--rs-home-card-tint-color); --rs-home-glass-edge-color: #c6d0d9; --rs-home-glass-backplate-color: #8aceff; --rs-home-card-backplate-color: #f1f8fd; --rs-home-glass-edge-alpha: 64%; --rs-home-glass-edge-soft-alpha: 50%; --rs-home-glass-edge-strong-alpha: 76%; --rs-home-glass-edge-width: 1px; --rs-home-glass-edge-fade: 30px; --rs-home-glass-edge-fade-mid: 11px; --rs-home-glass-backplate-alpha: 100%; --rs-home-glass-backplate-soft-alpha: 60%; --rs-home-glass-backplate-strong-alpha: 100%; --rs-home-glass-tint-soft: transparent; --rs-home-glass-tint-mid: transparent; --rs-home-glass-tint-strong: transparent; --rs-home-glass-tint-edge: rgba(186, 207, 226, 0.42); --rs-home-photo-tint-soft: transparent; --rs-home-photo-tint-mid: transparent; --rs-home-photo-tint-strong: transparent; --rs-home-header-tint-top: transparent; --rs-home-header-tint-bottom: transparent; --rs-home-header-tint-bottom-mobile: transparent; --rs-home-hero-tint-top: transparent; --rs-home-hero-tint-bottom: transparent; --rs-home-hero-tint-bottom-mobile: transparent; --rs-home-toolbar-bg: #9fb5c7; --rs-home-toolbar-text: #17324b; --rs-home-text: #17324b; --rs-home-heading: #13283a; --rs-home-muted: #5d7488; --rs-home-accent: #4f7fab; --rs-home-hero-title-text: #000000; --rs-home-hero-body-text: #000000; --rs-home-hero-card-title-text: #173a62; --rs-home-hero-card-text: #213c57; --rs-home-hero-call-text: #17324b; --rs-home-hero-whatsapp-text: #000000; --rs-home-button-bg: #edf6fc; --rs-home-button-fg: #c9c9c9; --rs-home-button-hover: #bfe6ff; --rs-home-button-text: #17324b; --rs-home-button-active-text: #000000; --rs-home-button-hover-text: #000000; --rs-home-button-gloss: #ffffff; --rs-home-header-button-bg: #7eaece; --rs-home-header-button-fg: #dedede; --rs-home-header-button-hover: #7a7a7a; --rs-home-header-button-text: #17324b; --rs-home-header-button-active-text: #000000; --rs-home-header-button-hover-text: #000000; --rs-home-header-button-gloss: #ffffff; /* Centrale knop-aliassen: oudere en nieuwe knoppen volgen dezelfde page-editor kleuren. */ --rs-button-ink: var(--rs-home-button-text); --rs-button-muted: color-mix(in srgb, var(--rs-home-button-text) 70%, var(--rs-home-page-bg) 30%); --rs-button-blue-top: color-mix(in srgb, var(--rs-home-button-fg) 62%, var(--rs-home-button-gloss) 38%); --rs-button-blue-mid: var(--rs-home-button-fg); --rs-button-blue-bottom: color-mix(in srgb, var(--rs-home-button-fg) 82%, #052f60 18%); --rs-button-blue-dark: color-mix(in srgb, var(--rs-home-button-fg) 76%, #001b35 24%); --rs-button-ice-top: color-mix(in srgb, var(--rs-home-button-bg) 76%, var(--rs-home-button-gloss) 24%); --rs-button-ice-mid: var(--rs-home-button-bg); --rs-button-ice-bottom: color-mix(in srgb, var(--rs-home-button-bg) 76%, var(--rs-home-button-fg) 24%); --rs-button-hover-top: color-mix(in srgb, var(--rs-home-button-hover) 68%, var(--rs-home-button-gloss) 32%); --rs-button-hover-mid: var(--rs-home-button-hover); --rs-button-hover-bottom: color-mix(in srgb, var(--rs-home-button-hover) 70%, var(--rs-home-button-fg) 30%); --rs-button-active-text: var(--rs-home-button-active-text); --rs-button-hover-text: var(--rs-home-button-hover-text); --rs-button-line: color-mix(in srgb, var(--rs-home-button-fg) 46%, #ffffff 54%); --rs-button-line-strong: color-mix(in srgb, var(--rs-home-button-fg) 74%, #082a4a 26%); --rs-button-glow: color-mix(in srgb, var(--rs-home-button-fg) 26%, transparent 74%); --rs-button-shadow: color-mix(in srgb, var(--rs-home-button-fg) 18%, transparent 82%); --rs-text-main: var(--rs-home-text); --rs-text-heading: var(--rs-home-heading); --rs-text-muted: var(--rs-home-muted); --rs-text-accent: var(--rs-home-accent); } body:not(.document-page):not(.document-page--print-preview) .site-header .brand--banner { background-image: var(--rs-site-logo-image) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .brand--banner img { opacity: 0 !important; } /* Menuknop-layouts uit de Page editor. Zonder live-preview attribuut gebruikt de site de opgeslagen keuze. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { margin: 0 !important; min-width: 112px !important; min-height: 36px !important; height: 36px !important; padding: 0 18px !important; border-radius: 16px !important; clip-path: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 0 !important; padding: 3px 6px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 58%, #ffffff 42%) !important; border-radius: 999px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 44%, transparent 56%), transparent 48%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%), color-mix(in srgb, var(--rs-home-header-button-bg) 76%, var(--rs-home-header-button-fg) 24%) ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 70%, transparent 30%), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 42%, transparent 58%), 0 10px 20px color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%) !important; overflow: hidden !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { margin: 0 !important; min-width: 110px !important; min-height: 30px !important; height: 30px !important; padding: 0 20px !important; border-width: 0 0 0 1px !important; border-style: solid !important; border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 24%, transparent 76%) !important; border-radius: 0 !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { border-left: 0 !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 72%, var(--rs-home-header-button-gloss) 28%), var(--rs-home-header-button-fg) ) !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: 0 !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { margin-left: -7px !important; min-width: 112px !important; min-height: 34px !important; height: 34px !important; padding: 0 24px !important; border-radius: 0 !important; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%) !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { margin-left: 0 !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: 0 !important; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important; } } /* Topbalk: compact zwart glas met rustige premium knoppen. */ @media screen { body.site-home .top-toolbar { position: relative !important; z-index: 40 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.22) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.56) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 34%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.2)), linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.08) 72%, rgba(0, 0, 0, 0.24)) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } body.site-home .top-toolbar::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0)), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important; opacity: 0.7 !important; } body.site-home .top-toolbar__inner { position: relative !important; z-index: 1 !important; min-height: 48px !important; width: min(calc(100% - 24px), 1680px) !important; padding: 6px 12px !important; gap: 14px !important; } body.site-home .toolbar-group { align-items: center !important; gap: 10px !important; } body.site-home .toolbar-group--right { gap: 11px !important; } body.site-home .toolbar-group--right > a:not(.top-direct-contact) { min-height: 30px !important; display: inline-flex !important; align-items: center !important; color: #1c3449 !important; text-decoration: none !important; font-size: 0.74rem !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) !important; opacity: 0.9 !important; } body.site-home .toolbar-group a:not(:last-child)::after, body.site-home .toolbar-group span:not(:last-child)::after { width: 1px !important; height: 22px !important; right: -6px !important; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent) !important; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.24) !important; } body.site-home .top-login-link, body.site-home .top-toolbar .top-direct-contact, body.site-home .rs-language-button { min-height: 34px !important; border: 1px solid rgba(0, 0, 0, 0.5) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 48%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important; color: #142c42 !important; box-shadow: 0 9px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important; transform: none !important; filter: none !important; } body.site-home .top-login-link { min-width: 118px !important; padding: 0 20px !important; font-size: 0.82rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important; } body.site-home .top-toolbar .top-direct-contact { min-width: 132px !important; padding: 0 18px !important; font-size: 0.78rem !important; font-weight: 900 !important; letter-spacing: 0.02em !important; } body.site-home .top-toolbar .top-direct-contact--call { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 255, 0.34) 54%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important; } body.site-home .top-toolbar .top-direct-contact--whatsapp { border-color: rgba(0, 0, 0, 0.54) !important; color: #ffffff !important; background: linear-gradient(180deg, rgba(72, 226, 137, 0.98), rgba(20, 174, 92, 0.94) 54%, rgba(7, 95, 49, 0.98)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 10px 24px rgba(7, 116, 62, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important; } body.site-home .rs-language-switcher { top: 9px !important; left: 12px !important; gap: 6px !important; padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.48) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.1)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(0, 0, 0, 0.34) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; } body.site-home .rs-language-button { min-width: 92px !important; padding: 5px 11px 5px 8px !important; font-size: 0.74rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; } body.site-home .rs-language-button.is-active { border-color: rgba(0, 0, 0, 0.58) !important; color: #102b42 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(217, 239, 254, 0.38) 54%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important; } body.site-home .rs-lang-flag { border: 1px solid rgba(0, 0, 0, 0.26) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } } @media screen and (min-width: 900px) { body.site-home .toolbar-group--brand { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } } @media screen and (max-width: 680px) { body.site-home .top-toolbar { padding-top: 42px !important; } body.site-home .top-toolbar__inner { min-height: auto !important; padding: 5px 10px 8px !important; } body.site-home .toolbar-group--right { gap: 8px !important; } body.site-home .toolbar-group--right > a:not(.top-direct-contact) { display: none !important; } body.site-home .top-login-link { min-width: 112px !important; min-height: 34px !important; } body.site-home .top-toolbar .top-direct-contact { min-width: 0 !important; min-height: 42px !important; flex: 1 1 calc(50% - 8px) !important; padding-inline: 12px !important; } body.site-home .rs-language-switcher { top: 8px !important; left: 8px !important; transform: scale(0.82) !important; transform-origin: top left !important; } } /* REPAIR v1: editor-tint terug op glaslagen en topbalk gelijkmatiger verdeeld. */ @media screen { html body.site-home { --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, rgba(0, 0, 0, 0.54) 42%); --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 54%, rgba(0, 0, 0, 0.24) 46%); } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { border-color: var(--rs-repair-glass-edge) !important; background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 18px 22px -23px rgba(255, 255, 255, 0.34), inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58), inset 18px 0 24px -28px rgba(0, 0, 0, 0.5), inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { border-color: var(--rs-repair-glass-edge) !important; background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.74), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.08), transparent 34%, rgba(255, 255, 255, 0.14) 72%), linear-gradient(180deg, rgba(250, 253, 255, 0.78), rgba(229, 241, 249, 0.7)) !important; background-color: rgba(241, 248, 253, 0.64) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within, html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 246, 253, 0.66)) !important; background-color: rgba(241, 248, 253, 0.68) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: grid !important; grid-template-columns: minmax(230px, 1fr) auto minmax(560px, 1fr) !important; align-items: center !important; justify-content: stretch !important; gap: 18px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: static !important; grid-column: 2 !important; justify-self: center !important; transform: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #d7e9f8 !important; -webkit-text-fill-color: #d7e9f8 !important; font-size: 0.74rem !important; font-weight: 850 !important; letter-spacing: 0.12em !important; line-height: 1.1 !important; text-transform: uppercase !important; text-decoration: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: 3 !important; justify-self: end !important; justify-content: flex-end !important; margin-left: 0 !important; margin-right: clamp(80px, 6vw, 150px) !important; } } @media screen and (min-width: 900px) and (max-width: 1300px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { grid-template-columns: minmax(180px, 1fr) auto minmax(400px, 1fr) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: clamp(34px, 4vw, 74px) !important; } } @media screen and (max-width: 680px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; justify-content: center !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { order: 2 !important; flex: 0 0 100% !important; width: 100% !important; margin-right: 0 !important; justify-content: center !important; } } /* FINAL LOCK topbalk v3: zwart glas, strakke knoppen, geen overlap. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar { position: relative !important; z-index: 60 !important; min-height: 56px !important; overflow: visible !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.26) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.64) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.06) 58%, rgba(0, 0, 0, 0.34)), linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0.04) 82%, rgba(0, 0, 0, 0.34)) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(0, 0, 0, 0.18)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.16)) !important; opacity: 0.82 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: min(calc(100% - 24px), 1880px) !important; min-height: 56px !important; margin: 0 auto !important; padding: 7px 12px 7px 230px !important; gap: 14px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: absolute !important; left: 50% !important; top: 50% !important; z-index: 3 !important; transform: translate(-50%, -50%) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { flex: 0 1 auto !important; justify-content: flex-end !important; margin-left: auto !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a:not(.top-direct-contact) { min-height: 30px !important; display: inline-flex !important; align-items: center !important; color: #d7e9f8 !important; text-decoration: none !important; font-size: 0.74rem !important; font-weight: 850 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44) !important; opacity: 0.9 !important; white-space: nowrap !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group a:not(:last-child)::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group span:not(:last-child)::after { width: 1px !important; height: 24px !important; right: -7px !important; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38), transparent) !important; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.18) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact, html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button { min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(0, 0, 0, 0.58) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.22) 48%, rgba(0, 0, 0, 0.1)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important; color: #132a3f !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important; text-decoration: none !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important; transform: none !important; filter: none !important; white-space: nowrap !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: 124px !important; padding: 0 22px !important; font-size: 0.82rem !important; font-weight: 950 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact { min-width: 142px !important; padding: 0 18px !important; font-size: 0.78rem !important; font-weight: 950 !important; letter-spacing: 0.02em !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--call { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(226, 242, 253, 0.44) 52%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a.top-direct-contact.top-direct-contact--whatsapp, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar a[href*="wa.me"].top-direct-contact { border-color: rgba(0, 0, 0, 0.62) !important; color: #ffffff !important; background: linear-gradient(180deg, rgba(76, 229, 139, 0.98), rgba(19, 178, 94, 0.95) 54%, rgba(6, 104, 53, 0.98)), linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)) !important; box-shadow: 0 12px 24px rgba(5, 107, 56, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher { top: 8px !important; left: 12px !important; gap: 6px !important; padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.58) !important; border-radius: 25px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.14)), linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.22)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(0, 0, 0, 0.38) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-button { min-width: 92px !important; padding: 5px 11px 5px 8px !important; font-size: 0.74rem !important; font-weight: 950 !important; letter-spacing: 0.04em !important; } } @media screen and (max-width: 1600px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="mailto:"], html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="tel:"]:not(.top-direct-contact) { display: none !important; } } @media screen and (max-width: 680px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar { min-height: 132px !important; padding-top: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { width: 100% !important; min-height: 132px !important; padding: 52px 8px 8px !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: static !important; transform: none !important; order: 1 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; justify-content: center !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { order: 2 !important; width: 100% !important; flex: 0 0 100% !important; justify-content: center !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: 126px !important; min-height: 36px !important; margin-inline: auto !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact { min-width: 0 !important; min-height: 44px !important; flex: 1 1 calc(50% - 6px) !important; padding-inline: 10px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher { top: 7px !important; left: 8px !important; transform: scale(0.78) !important; transform-origin: top left !important; } } /* Laatste laag: de gekozen menuknop-vorm uit de Page editor wint van oudere headerregels. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 108px !important; min-height: 36px !important; height: 36px !important; max-height: 36px !important; padding: 0 17px !important; border-radius: 16px !important; clip-path: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a { min-width: 100px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 12px !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 4px 7px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 54%, var(--rs-home-header-button-gloss) 46%) !important; border-radius: 999px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 50%, transparent 50%), transparent 48%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%), color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 74%, transparent 26%), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 38%, transparent 62%), 0 10px 20px color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 108px !important; min-height: 32px !important; height: 32px !important; max-height: 32px !important; padding: 0 20px !important; border-width: 0 0 0 1px !important; border-style: solid !important; border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 24%, transparent 76%) !important; border-radius: 0 !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { border-left: 0 !important; border-radius: 999px 0 0 999px !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:last-child, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:last-child { border-radius: 0 999px 999px 0 !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { inset: 0 !important; border-radius: inherit !important; clip-path: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 9px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin-left: -7px !important; min-width: 112px !important; min-height: 36px !important; height: 36px !important; max-height: 36px !important; padding: 0 25px !important; border-radius: 0 !important; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%) !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { margin-left: 0 !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: 0 !important; clip-path: inherit !important; } } /* Eindlaag voor extra moderne menuknop-layouts. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 98px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 15px 3px !important; border: 0 !important; border-radius: 8px !important; clip-path: none !important; color: var(--rs-home-header-button-text) !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: inherit !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after { inset: auto 14px 4px !important; height: 3px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--rs-home-header-button-fg) 72%, transparent 28%) !important; opacity: 0.42 !important; box-shadow: 0 0 12px color-mix(in srgb, var(--rs-home-header-button-fg) 42%, transparent 58%) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 4px !important; padding: 5px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 34%, #0b1118 66%) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%), transparent 62%), linear-gradient(180deg, #263747, #101922) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 22px rgba(5, 12, 20, 0.22) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 32px !important; height: 32px !important; max-height: 32px !important; padding: 0 15px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 9px !important; clip-path: none !important; color: var(--rs-home-header-button-hover-text) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 88px !important; min-height: 28px !important; height: 28px !important; max-height: 28px !important; padding: 0 12px !important; border-radius: 10px !important; clip-path: none !important; font-size: 0.73rem !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 106px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) !important; border-radius: 999px !important; clip-path: none !important; background: color-mix(in srgb, var(--rs-home-header-button-bg) 28%, transparent 72%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 56%, transparent 44%) !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border-radius: 5px !important; clip-path: none !important; } } /* Definitieve 2de-header laag: dit staat echt onderaan zodat de editor-CSS het niet meer overschrijft. */ body.site-home .hero-copy .panel-corners { display: none !important; } body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { overflow: hidden !important; border-radius: 30px !important; transform: none !important; filter: none !important; transition: none !important; border-color: rgba(186, 207, 226, 0.42) !important; box-shadow: 0 0 0 18px var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)), 0 0 0 19px color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%), 0 30px 70px rgba(7, 13, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; } body.site-home .hero-copy::after, body.site-home .hero-copy:hover::after, body.site-home .hero-copy:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { border-radius: inherit !important; clip-path: inset(0 0 0 0 round 30px) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy:hover h1 { color: #173a62 !important; } body.site-home .hero-copy:hover .hero-text, body.site-home .hero-copy:hover .hero-intro { color: #314f69 !important; } body.site-home .hero-copy:hover .section-kicker { color: var(--rs-home-accent, #4f7fab) !important; } @media screen and (max-width: 680px) { body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { border-radius: 24px !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { clip-path: inset(0 0 0 0 round 24px) !important; } } /* Tweede banner: geen tilt/hover, heldere foto, glas alleen als rand en achterplaat. */ body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within, body.site-home .hero-copy[data-tilt], body.site-home .hero-copy[data-tilt]:hover, body.site-home .hero-copy[data-tilt]:focus-within { overflow: visible !important; border: 1px solid rgba(226, 241, 253, 0.78) !important; border-top-color: rgba(244, 251, 255, 0.9) !important; border-radius: 30px !important; background: transparent !important; box-shadow: 0 26px 58px rgba(7, 13, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; border: 1px solid rgba(238, 249, 255, 0.7) !important; background: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(105, 160, 208, 0.1) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel::after, body.site-home .hero-copy.tech-panel:hover::after, body.site-home .hero-copy.tech-panel:focus-within::after { content: "" !important; position: absolute !important; inset: 14px -18px -20px !important; z-index: -1 !important; display: block !important; border: 1px solid rgba(220, 238, 251, 0.46) !important; border-radius: 34px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 5%, transparent), color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 2%, transparent) ), linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(70, 95, 116, 0.08)) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.18) !important; opacity: 0.78 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; overflow: hidden !important; clip-path: inset(0 round 30px) !important; background: var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .panel-corners { display: none !important; } body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:hover *:not(a):not(button):not(.button):not(.button-primary):not(.button-secondary) { transform: none !important; filter: none !important; transition: none !important; } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { border-radius: 24px !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { clip-path: inset(0 round 24px) !important; background: var(--rs-home-bottom-banner-image) center top / cover no-repeat !important; } } /* Definitieve 2de-header laag: dit staat onderaan zodat de editor-CSS het niet meer overschrijft. */ body.site-home .hero-copy .panel-corners { display: none !important; } body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { overflow: hidden !important; border-radius: 30px !important; transform: none !important; filter: none !important; transition: none !important; border-color: rgba(186, 207, 226, 0.42) !important; box-shadow: 0 0 0 18px var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)), 0 0 0 19px color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%), 0 30px 70px rgba(7, 13, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; } body.site-home .hero-copy::after, body.site-home .hero-copy:hover::after, body.site-home .hero-copy:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { border-radius: inherit !important; clip-path: inset(0 0 0 0 round 30px) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy:hover h1 { color: #173a62 !important; } body.site-home .hero-copy:hover .hero-text, body.site-home .hero-copy:hover .hero-intro { color: #314f69 !important; } body.site-home .hero-copy:hover .section-kicker { color: var(--rs-home-accent, #4f7fab) !important; } @media screen and (max-width: 680px) { body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { border-radius: 24px !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { clip-path: inset(0 0 0 0 round 24px) !important; } } /* Laatste hero-fix: de 2de header heeft geen hoekdecoratie en geen hoverlaag op de banner. */ body.site-home .hero-copy .panel-corners { display: none !important; } body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within, body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-copy::after, body.site-home .hero-copy:hover::after, body.site-home .hero-copy:focus-within::after, body.site-home .hero-photo-bg { transform: none !important; transition: none !important; } body.site-home .hero-copy:hover .section-kicker, body.site-home .hero-copy:hover .hero-intro, body.site-home .hero-copy:hover h1, body.site-home .hero-copy:hover .hero-text { color: inherit !important; } /* Laatste correctielaag: tekstkleuren sturen tekst, knopkleuren sturen knoppen. */ @media screen { body:not(.document-page):not(.document-page--print-preview) :where( .site-footer, .site-footer p, .site-footer li, .site-footer a, .site-footer small, .footer-columns, .footer-columns p, .footer-columns ul, .footer-columns li, .footer-columns a ) { color: var(--rs-home-text) !important; -webkit-text-fill-color: var(--rs-home-text) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer strong, .footer-columns h1, .footer-columns h2, .footer-columns h3, .footer-columns h4, .footer-columns strong ) { color: var(--rs-home-heading) !important; -webkit-text-fill-color: var(--rs-home-heading) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .footer-bottom, .footer-bottom *, .site-footer .muted, .site-footer .eyebrow ) { color: var(--rs-home-muted) !important; -webkit-text-fill-color: var(--rs-home-muted) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where( .site-nav a, .site-nav__cta, .menu-toggle, .header-login-entry .portal-trigger, .header-login-entry .portal-trigger__label, .header-login-entry .portal-trigger__eyebrow, .client-access-link, .client-access-link__label, .client-access-link__eyebrow, .portal-mini-button, .top-login-link ), body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { color: var(--rs-home-header-button-text) !important; -webkit-text-fill-color: var(--rs-home-header-button-text) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where( .site-nav a:hover, .site-nav a:focus-visible, .site-nav__cta:hover, .site-nav__cta:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible, .header-login-entry .portal-trigger:hover, .header-login-entry .portal-trigger:focus-visible, .header-login-entry .portal-trigger:hover .portal-trigger__label, .header-login-entry .portal-trigger:focus-visible .portal-trigger__label, .header-login-entry .portal-trigger:hover .portal-trigger__eyebrow, .header-login-entry .portal-trigger:focus-visible .portal-trigger__eyebrow, .client-access-link:hover, .client-access-link:focus-visible, .client-access-link:hover .client-access-link__label, .client-access-link:focus-visible .client-access-link__label, .client-access-link:hover .client-access-link__eyebrow, .client-access-link:focus-visible .client-access-link__eyebrow, .portal-mini-button:hover, .portal-mini-button:focus-visible, .top-login-link:hover, .top-login-link:focus-visible ), body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:hover, body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:focus-visible { color: var(--rs-home-header-button-hover-text) !important; -webkit-text-fill-color: var(--rs-home-header-button-hover-text) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where( .site-nav a.is-active, .site-nav a[aria-current="page"], .site-nav__cta.is-active, .menu-toggle.is-active, .header-login-entry .portal-trigger--current, .header-login-entry .portal-trigger--current .portal-trigger__label, .header-login-entry .portal-trigger--current .portal-trigger__eyebrow, .client-access-link--active, .client-access-link--active .client-access-link__label, .client-access-link--active .client-access-link__eyebrow, .portal-mini-button.is-active, .top-login-link.is-active ) { color: var(--rs-home-header-button-active-text) !important; -webkit-text-fill-color: var(--rs-home-header-button-active-text) !important; } } /* Laatste tekstlaag: Page editor tekstkleuren winnen op alle gewone site- en portaalpagina's. */ @media screen { body:not(.document-page):not(.document-page--print-preview) { color: var(--rs-home-text) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .site-main, .content-section, .tech-panel, .portal-section, .portal-section-card, .portal-panel, .portal-card, .portal-case, .portal-mini-note, .portal-admin-card, .planning-card, .planning-event, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .footer-columns ) { color: var(--rs-home-text) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .hero-title, .section-title, .section-heading, .content-section h1, .content-section h2, .content-section h3, .tech-panel h1, .tech-panel h2, .tech-panel h3, .portal-section-card h1, .portal-section-card h2, .portal-section-card h3, .portal-panel h1, .portal-panel h2, .portal-panel h3, .portal-card h2, .portal-card h3, .portal-case h2, .portal-case h3, .homepage-media-card h3, .feature-card h3, .project-card h3, .process-card h3, .product-card h3, .faq-item h3, .client-name, .portal-dossier-title ) { color: var(--rs-home-heading) !important; -webkit-text-fill-color: var(--rs-home-heading) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .hero-copy, .hero-subtitle, .section-copy, .section-intro, .lead, .muted, .field-hint, .homepage-theme-help, .portal-form-note, .portal-muted, .empty-state, .card-meta, .portal-card__meta, .portal-case__meta, .content-section p, .tech-panel p, .portal-section-card p, .portal-panel p, .portal-card p, .portal-case p, .homepage-media-card p, .feature-card p, .project-card p, .process-card p, .product-card p, .faq-item p, .contact-copy p, .footer-columns p ) { color: var(--rs-home-muted) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .section-kicker, .project-label, .product-label, .card-label, .portal-label, .portal-status-label, .homepage-theme-group legend, .homepage-layout-options legend, .field > span:first-child, label > span:first-child ) { color: var(--rs-home-accent) !important; -webkit-text-fill-color: var(--rs-home-accent) !important; } body:not(.document-page):not(.document-page--print-preview) :where(input, textarea, select) { color: var(--rs-home-text); } body:not(.document-page):not(.document-page--print-preview) input::placeholder, body:not(.document-page):not(.document-page--print-preview) textarea::placeholder { color: color-mix(in srgb, var(--rs-home-muted) 72%, transparent 28%); opacity: 1; } } /* Centrale tekstkleuren uit de Page editor. Facturen en printweergaves blijven bewust ongemoeid. */ @media screen { body:not(.document-page):not(.document-page--print-preview) { color: var(--rs-home-text) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .site-main, .content-section, .tech-panel, .portal-section, .portal-section-card, .portal-panel, .portal-card, .portal-case, .portal-mini-note, .portal-admin-card, .planning-card, .planning-event, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .footer-columns ) { color: var(--rs-home-text) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .hero-title, .section-title, .section-heading, .content-section h1, .content-section h2, .content-section h3, .tech-panel h1, .tech-panel h2, .tech-panel h3, .portal-section-card h1, .portal-section-card h2, .portal-section-card h3, .portal-panel h1, .portal-panel h2, .portal-panel h3, .portal-card h2, .portal-card h3, .portal-case h2, .portal-case h3, .homepage-media-card h3, .feature-card h3, .project-card h3, .process-card h3, .product-card h3, .faq-item h3, .client-name, .portal-dossier-title ) { color: var(--rs-home-heading) !important; -webkit-text-fill-color: var(--rs-home-heading) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .hero-copy, .hero-subtitle, .section-copy, .section-intro, .lead, .muted, .field-hint, .homepage-theme-help, .portal-form-note, .portal-muted, .empty-state, .card-meta, .portal-card__meta, .portal-case__meta, .content-section p, .tech-panel p, .portal-section-card p, .portal-panel p, .portal-card p, .portal-case p, .homepage-media-card p, .feature-card p, .project-card p, .process-card p, .product-card p, .faq-item p, .contact-copy p, .footer-columns p ) { color: var(--rs-home-muted) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .section-kicker, .project-label, .product-label, .card-label, .portal-label, .portal-status-label, .homepage-theme-group legend, .homepage-layout-options legend, .field > span:first-child, label > span:first-child ) { color: var(--rs-home-accent) !important; -webkit-text-fill-color: var(--rs-home-accent) !important; } body:not(.document-page):not(.document-page--print-preview) :where(input, textarea, select) { color: var(--rs-home-text); } body:not(.document-page):not(.document-page--print-preview) input::placeholder, body:not(.document-page):not(.document-page--print-preview) textarea::placeholder { color: color-mix(in srgb, var(--rs-home-muted) 72%, transparent 28%); opacity: 1; } } /* Contact- en boekingsbevestigingen: houd de klantlogin klein naast het menu. */ @media screen and (min-width: 761px) { body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-actions { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; max-width: calc(100% - 24px) !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-actions::-webkit-scrollbar { display: none !important; } body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry { flex: 0 0 auto !important; padding-left: 0 !important; } body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry .portal-trigger { min-width: 104px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border-radius: 16px !important; clip-path: none !important; } body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry .portal-trigger__label { font-size: 0.82rem !important; line-height: 1 !important; } } /* Extra moderne menuknop-layouts uit de Page editor. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 98px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 15px 3px !important; border: 0 !important; border-radius: 8px !important; clip-path: none !important; color: var(--rs-home-header-button-text) !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: inherit !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after { inset: auto 14px 4px !important; height: 3px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--rs-home-header-button-fg) 72%, transparent 28%) !important; opacity: 0.42 !important; box-shadow: 0 0 12px color-mix(in srgb, var(--rs-home-header-button-fg) 42%, transparent 58%) !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-hover-text) !important; background: color-mix(in srgb, var(--rs-home-header-button-hover) 18%, transparent 82%) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 4px !important; padding: 5px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 34%, #0b1118 66%) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%), transparent 62%), linear-gradient(180deg, #263747, #101922) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 22px rgba(5, 12, 20, 0.22) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 32px !important; height: 32px !important; max-height: 32px !important; padding: 0 15px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 9px !important; clip-path: none !important; color: var(--rs-home-header-button-hover-text) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-active-text) !important; background: linear-gradient(180deg, var(--rs-home-header-button-hover), var(--rs-home-header-button-fg)) !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 88px !important; min-height: 28px !important; height: 28px !important; max-height: 28px !important; padding: 0 12px !important; border-radius: 10px !important; clip-path: none !important; font-size: 0.73rem !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 106px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) !important; border-radius: 999px !important; clip-path: none !important; background: color-mix(in srgb, var(--rs-home-header-button-bg) 28%, transparent 72%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 56%, transparent 44%) !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-active-text) !important; background: linear-gradient(180deg, var(--rs-home-header-button-hover), var(--rs-home-header-button-fg)) !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border-radius: 5px !important; clip-path: none !important; } } @media screen { body:not(.document-page):not(.document-page--print-preview) { background: radial-gradient(circle at 18% 10%, rgba(34, 104, 174, 0.22), transparent 22rem), radial-gradient(circle at 82% 0%, rgba(10, 30, 52, 0.28), transparent 26rem), linear-gradient( 155deg, color-mix(in srgb, var(--rs-home-page-bg) 94%, #ffffff 6%) 0%, var(--rs-home-page-bg) 46%, color-mix(in srgb, var(--rs-home-page-bg) 90%, #172a3d 10%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview)::before { background: linear-gradient(color-mix(in srgb, var(--rs-home-page-bg) 72%, rgba(19, 39, 58, 0.18) 28%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rs-home-page-bg) 72%, rgba(19, 39, 58, 0.18) 28%) 1px, transparent 1px) !important; } body:not(.document-page):not(.document-page--print-preview) .page-noise { opacity: 0.2 !important; } body:not(.document-page):not(.document-page--print-preview) :where(.top-toolbar, .header-bottom) { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bar) 82%, #ffffff 18%), color-mix(in srgb, var(--rs-home-header-bar) 88%, #18314a 12%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 62%, #24425f 38%) !important; } body:not(.document-page):not(.document-page--print-preview) :where(.site-header .header-shell) { background-color: color-mix(in srgb, var(--rs-home-header-bg) 58%, transparent 42%) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .portal-trigger, .portal-blocked-menu__toggle, .portal-status, .status-pill ) { background-color: color-mix(in srgb, var(--rs-home-header-bg) 88%, #ffffff 12%) !important; border-color: color-mix(in srgb, var(--rs-home-header-bg) 70%, #2a587c 30%) !important; } body:not(.document-page):not(.document-page--print-preview) :where(.content-section, .portal-section)::before { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-page-bg) 72%, rgba(15, 32, 48, 0.52) 28%), color-mix(in srgb, var(--rs-home-page-bg) 84%, rgba(255, 255, 255, 0.16) 16%) ), radial-gradient(circle at 82% 8%, rgba(20, 96, 172, 0.18), transparent 36%) !important; border-color: color-mix(in srgb, var(--rs-home-page-bg) 58%, #1f405f 42%) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .tech-panel:not(.hero-copy):not(.header-shell), .portal-session, .portal-blocked-menu__panel, .login-feedback, .portal-section-card, .portal-mini-note, .portal-detail-card, .portal-admin-card, .portal-case, .portal-customer-card, .portal-auth-card, .booking-card, .appointment-card, .contact-switcher, .contact-copy, .contact-form, .appointment-form, .feature-card, .project-card, .process-card, .homepage-media-card, .product-card, .faq-item, .footer-columns ) { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-panel-bg) 86%, #ffffff 14%), color-mix(in srgb, var(--rs-home-panel-bg) 86%, #203142 14%) ), radial-gradient(circle at 82% 12%, rgba(20, 104, 190, 0.14), transparent 34%), radial-gradient(circle at 10% 92%, rgba(6, 18, 30, 0.16), transparent 38%) !important; border-color: color-mix(in srgb, var(--rs-home-panel-bg) 62%, #244b6c 38%) !important; } body:not(.document-page):not(.document-page--print-preview) :where( input, select, textarea, .document-preview__meta div, .document-preview__note, .document-preview__totals div ) { background-color: color-mix(in srgb, var(--rs-home-panel-bg) 76%, #ffffff 24%) !important; border-color: color-mix(in srgb, var(--rs-home-panel-bg) 58%, #254763 42%) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .button:not(.button-danger):not(.top-direct-contact--whatsapp), button:not(.button-danger):not(.top-direct-contact--whatsapp), .top-direct-contact:not(.top-direct-contact--whatsapp), input[type="submit"], input[type="button"], .filter-button, .contact-tab, .site-nav a, .portal-trigger, .portal-inline-button, .portal-mini-button, .client-access-link, .portal-finance-filter, .portal-finance-chip, .portal-auth-tab, .portal-case-filter, .portal-admin-tab, .portal-admin-inline-link, .planning-duration-option, .planning-time-button, .menu-toggle, .home-jump-nav a, .product-card__link, .scroll-top-button ):not([href*="wa.me"]):not([href*="api.whatsapp.com"]) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 58%, var(--rs-home-button-gloss) 42%) !important; color: var(--rs-home-button-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-bg) 58%, var(--rs-home-button-gloss) 42%), transparent 46%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-bg) 82%, var(--rs-home-button-gloss) 18%) 0%, var(--rs-home-button-bg) 48%, color-mix(in srgb, var(--rs-home-button-bg) 74%, var(--rs-home-button-fg) 26%) 100% ) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-button-bg) 70%, var(--rs-home-button-gloss) 30%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-button-fg) 42%, transparent 58%), 0 10px 22px color-mix(in srgb, var(--rs-home-button-fg) 22%, transparent 78%), 0 0 0 1px rgba(255, 255, 255, 0.22) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .button-primary, .filter-button.is-active, .contact-tab.is-active, .portal-finance-filter.is-active, .portal-finance-chip.is-active, .portal-auth-tab.is-active, .portal-case-filter.is-active, .portal-admin-tab.is-active, .planning-duration-option.is-active, .planning-time-button.is-selected ):not(.top-direct-contact--whatsapp):not([href*="wa.me"]):not([href*="api.whatsapp.com"]) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 76%, #082a4a 24%) !important; color: var(--rs-home-button-active-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 54%, var(--rs-home-button-gloss) 46%), transparent 44%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-fg) 70%, var(--rs-home-button-gloss) 30%) 0%, var(--rs-home-button-fg) 52%, color-mix(in srgb, var(--rs-home-button-fg) 82%, #052f60 18%) 100% ) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .button:hover, .button:focus-visible, button:hover, button:focus-visible, .top-direct-contact:hover, .top-direct-contact:focus-visible, input[type="submit"]:hover, input[type="submit"]:focus-visible, input[type="button"]:hover, input[type="button"]:focus-visible, .filter-button:hover, .filter-button:focus-visible, .contact-tab:hover, .contact-tab:focus-visible, .site-nav a:hover, .site-nav a:focus-visible, .portal-trigger:hover, .portal-trigger:focus-visible, .portal-inline-button:hover, .portal-inline-button:focus-visible, .portal-mini-button:hover, .portal-mini-button:focus-visible, .client-access-link:hover, .client-access-link:focus-visible, .portal-finance-filter:hover, .portal-finance-filter:focus-visible, .portal-finance-chip:hover, .portal-finance-chip:focus-visible, .portal-auth-tab:hover, .portal-auth-tab:focus-visible, .portal-case-filter:hover, .portal-case-filter:focus-visible, .portal-admin-tab:hover, .portal-admin-tab:focus-visible, .portal-admin-inline-link:hover, .portal-admin-inline-link:focus-visible, .planning-duration-option:hover, .planning-duration-option:focus-visible, .planning-time-button:hover, .planning-time-button:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible, .home-jump-nav a:hover, .home-jump-nav a:focus-visible, .product-card__link:hover, .product-card__link:focus-visible, .scroll-top-button:hover, .scroll-top-button:focus-visible ):not(.button-danger):not(.top-direct-contact--whatsapp):not([href*="wa.me"]):not([href*="api.whatsapp.com"]) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 72%, var(--rs-home-button-gloss) 28%) !important; color: var(--rs-home-button-hover-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 62%, var(--rs-home-button-gloss) 38%), transparent 45%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-hover) 86%, var(--rs-home-button-gloss) 14%) 0%, var(--rs-home-button-hover) 48%, color-mix(in srgb, var(--rs-home-button-hover) 68%, var(--rs-home-button-fg) 32%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-button-fg) 48%, transparent 52%), 0 14px 28px color-mix(in srgb, var(--rs-home-button-fg) 26%, transparent 74%), 0 0 0 4px color-mix(in srgb, var(--rs-home-button-hover) 18%, transparent 82%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 56%, #ffffff 44%) !important; color: var(--rs-home-header-button-text) !important; background: radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--rs-home-header-button-bg) 58%, #ffffff 42%), transparent 36%), radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 28%, transparent 72%), transparent 40%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 86%, #ffffff 14%) 0%, var(--rs-home-header-button-bg) 48%, color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 34%, transparent 66%), 0 10px 18px color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%), 0 0 0 1px rgba(255, 255, 255, 0.56) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta)::before { border-color: color-mix(in srgb, #ffffff 78%, var(--rs-home-header-button-bg) 22%) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 48%, transparent), linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 16%, #ffffff 84%) 40%, transparent 76%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta)::after { background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--rs-home-header-button-fg) 48%, #ffffff 52%), color-mix(in srgb, var(--rs-home-header-button-hover) 58%, #ffffff 42%), transparent ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-core { opacity: 0.14 !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 32%, #ffffff 68%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 74%, #ffffff 26%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 84%, #052f60 16%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 70%, #001a33 30%), 0 12px 24px color-mix(in srgb, var(--rs-home-header-button-fg) 22%, transparent 78%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-core::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-core::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rs-home-header-button-hover) 48%, #ffffff 52%), transparent) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-sheen { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 14%, #ffffff 86%) 20%, rgba(255, 255, 255, 0.84) 48%, color-mix(in srgb, var(--rs-home-header-button-hover) 58%, #ffffff 42%) 58%, transparent 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-label { color: var(--rs-home-header-button-text) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-bg) 56%, #ffffff 44%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active, .site-nav__cta:hover, .site-nav__cta:focus-visible, .site-nav__cta.is-active) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 78%, #ffffff 22%) !important; color: var(--rs-home-header-button-hover-text) !important; background: radial-gradient(circle at 20% 6%, rgba(255, 255, 255, 0.72), transparent 30%), radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 48%, transparent 52%), transparent 38%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 72%, #ffffff 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 84%, #052f60 16%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -2px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 76%, #001a33 24%), 0 16px 30px color-mix(in srgb, var(--rs-home-header-button-fg) 28%, transparent 72%), 0 0 0 4px color-mix(in srgb, var(--rs-home-header-button-hover) 22%, transparent 78%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active, .site-nav__cta:hover, .site-nav__cta:focus-visible, .site-nav__cta.is-active) .nav-core { opacity: 1 !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 48%, #ffffff 52%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, #ffffff 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header :where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active, .site-nav__cta:hover, .site-nav__cta:focus-visible, .site-nav__cta.is-active) .nav-label { color: var(--rs-home-header-button-hover-text) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page):not(.document-page--print-preview) :where( .top-toolbar .top-login-link, .site-header .header-login-entry .portal-trigger, .site-header .portal-mini-button ) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 54%, #ffffff 46%) !important; color: var(--rs-home-header-button-text) !important; background: radial-gradient(circle at 22% 4%, color-mix(in srgb, var(--rs-home-header-button-bg) 64%, #ffffff 36%), transparent 38%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 88%, #ffffff 12%) 0%, var(--rs-home-header-button-bg) 54%, color-mix(in srgb, var(--rs-home-header-button-bg) 76%, var(--rs-home-header-button-fg) 24%) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 36%, transparent 64%), 0 8px 16px color-mix(in srgb, var(--rs-home-header-button-fg) 14%, transparent 86%), 0 0 0 1px rgba(255, 255, 255, 0.58) !important; text-decoration: none !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-bg) 62%, #ffffff 38%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry .portal-trigger, body:not(.document-page):not(.document-page--print-preview) .site-header .portal-mini-button { clip-path: none !important; border-radius: 14px !important; min-height: 40px !important; padding: 0 18px !important; } body.site-home .top-toolbar .top-login-link { min-height: 32px !important; padding: 0 12px !important; border-width: 1px !important; border-style: solid !important; border-radius: 999px !important; font-size: 0.76rem !important; letter-spacing: 0.06em !important; } body.site-home .top-toolbar__inner { padding-left: clamp(170px, 13vw, 210px) !important; } @media (max-width: 680px) { body.site-home .top-toolbar { padding-top: 48px !important; } body.site-home .top-toolbar__inner { padding-left: 10px !important; padding-right: 10px !important; } } body:not(.document-page):not(.document-page--print-preview) :where( .top-toolbar .top-login-link:hover, .top-toolbar .top-login-link:focus-visible, .site-header .header-login-entry .portal-trigger:hover, .site-header .header-login-entry .portal-trigger:focus-visible, .site-header .portal-mini-button:hover, .site-header .portal-mini-button:focus-visible ) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 76%, #ffffff 24%) !important; color: var(--rs-home-header-button-hover-text) !important; background: radial-gradient(circle at 24% 8%, rgba(255, 255, 255, 0.72), transparent 34%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 74%, #ffffff 26%) 0%, var(--rs-home-header-button-fg) 54%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry .portal-trigger__eyebrow { display: none !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .header-login-entry .portal-trigger__label, body:not(.document-page):not(.document-page--print-preview) .site-header .portal-mini-button { color: inherit !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* Laatste headerknop-laag: de page editor wint hier van alle oude witte menu-CSS. */ body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta, body:not(.document-page):not(.document-page--print-preview) .site-header .menu-toggle { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 54%, var(--rs-home-header-button-gloss) 46%) !important; color: var(--rs-home-header-button-text) !important; background: radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--rs-home-header-button-bg) 58%, var(--rs-home-header-button-gloss) 42%), transparent 36%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%) 0%, var(--rs-home-header-button-bg) 50%, color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-bg) 62%, var(--rs-home-header-button-gloss) 38%) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-label, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta .nav-label { color: var(--rs-home-header-button-text) !important; text-shadow: inherit !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta .nav-core { opacity: 0.12 !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 30%, var(--rs-home-header-button-gloss) 70%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 64%, var(--rs-home-header-button-gloss) 36%) 0%, var(--rs-home-header-button-fg) 54%, color-mix(in srgb, var(--rs-home-header-button-fg) 84%, #052f60 16%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta::before { border-color: color-mix(in srgb, var(--rs-home-header-button-gloss) 72%, var(--rs-home-header-button-bg) 28%) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-gloss) 58%, transparent 42%), color-mix(in srgb, var(--rs-home-header-button-gloss) 16%, transparent 84%) 48%, transparent ), linear-gradient( 110deg, transparent 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 18%, var(--rs-home-header-button-gloss) 82%) 42%, transparent 76% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta::after { background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--rs-home-header-button-fg) 48%, var(--rs-home-header-button-gloss) 52%), color-mix(in srgb, var(--rs-home-header-button-hover) 58%, var(--rs-home-header-button-gloss) 42%), transparent ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-sheen, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta .nav-sheen { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 20%, transparent 80%) 18%, color-mix(in srgb, var(--rs-home-header-button-gloss) 78%, transparent 22%) 48%, color-mix(in srgb, var(--rs-home-header-button-hover) 52%, var(--rs-home-header-button-gloss) 48%) 58%, transparent 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:hover, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:focus-visible, body:not(.document-page):not(.document-page--print-preview) .site-header .menu-toggle:hover, body:not(.document-page):not(.document-page--print-preview) .site-header .menu-toggle:focus-visible { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 76%, var(--rs-home-header-button-gloss) 24%) !important; color: var(--rs-home-header-button-hover-text) !important; background: radial-gradient(circle at 20% 6%, color-mix(in srgb, var(--rs-home-header-button-gloss) 64%, transparent 36%), transparent 30%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-hover) 52%, color-mix(in srgb, var(--rs-home-header-button-hover) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta.is-active { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 78%, var(--rs-home-header-button-gloss) 22%) !important; color: var(--rs-home-header-button-active-text) !important; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 30%, transparent 70%), transparent 34%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:hover .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:focus-visible .nav-core, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta.is-active .nav-core { opacity: 1 !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 48%, var(--rs-home-header-button-gloss) 52%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover .nav-label, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible .nav-label, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:hover .nav-label, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta:focus-visible .nav-label { color: var(--rs-home-header-button-hover-text) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active .nav-label, body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.site-nav__cta.is-active .nav-label { color: var(--rs-home-header-button-active-text) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body.site-home { --contour-blue: 69, 118, 168; --contour-cyan: 126, 190, 226; --contour-silver: 174, 185, 197; background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--rs-home-page-bg) 62%, rgba(255, 255, 255, 0.72) 38%), transparent 24%), radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--rs-home-page-bg) 78%, rgba(88, 119, 148, 0.36) 22%), transparent 30%), radial-gradient(circle at 18% 76%, color-mix(in srgb, var(--rs-home-page-bg) 84%, rgba(126, 190, 226, 0.18) 16%), transparent 32%), linear-gradient( 135deg, color-mix(in srgb, var(--rs-home-page-bg) 72%, #ffffff 28%) 0%, color-mix(in srgb, var(--rs-home-page-bg) 88%, #dce8ef 12%) 44%, var(--rs-home-page-bg) 100% ) !important; } body.site-home::before { background: linear-gradient(color-mix(in srgb, var(--rs-home-page-bg) 72%, rgba(88, 119, 148, 0.16) 28%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rs-home-page-bg) 74%, rgba(88, 119, 148, 0.14) 26%) 1px, transparent 1px) !important; opacity: 0.5 !important; } body.site-home :where( .content-section, .section-soft, .contact-switcher, .footer-callout__link, .footer-columns ) { background: radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--rs-home-panel-bg) 78%, rgba(126, 190, 226, 0.18) 22%), transparent 28%), linear-gradient( 145deg, color-mix(in srgb, var(--rs-home-panel-bg) 78%, #ffffff 22%), color-mix(in srgb, var(--rs-home-panel-bg) 88%, #f2f6f8 12%) 46%, color-mix(in srgb, var(--rs-home-panel-bg) 88%, #22415e 12%) ) !important; border-color: color-mix(in srgb, var(--rs-home-panel-bg) 56%, #244b6c 44%) !important; } body.site-home :where( .feature-card, .project-card, .product-card, .process-card, .visual-card, .hero-point, .overview-rail__item, .contact-copy, .contact-form, .appointment-form ) { background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rs-home-panel-bg) 82%, rgba(126, 190, 226, 0.16) 18%), transparent 34%), linear-gradient( 150deg, color-mix(in srgb, var(--rs-home-panel-bg) 74%, #ffffff 26%), color-mix(in srgb, var(--rs-home-panel-bg) 90%, #f2f6f8 10%) 50%, color-mix(in srgb, var(--rs-home-panel-bg) 88%, #22384f 12%) ) !important; border-color: color-mix(in srgb, var(--rs-home-panel-bg) 56%, #345a78 44%) !important; } body.site-home .hero-copy { background: linear-gradient( 180deg, rgba(232, 241, 248, 0.18), rgba(141, 160, 176, 0.12) ), linear-gradient( 180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--rs-home-panel-bg) 52%, #ffffff 48%), color-mix(in srgb, var(--rs-home-panel-bg) 72%, #eff8ff 28%) 54%, color-mix(in srgb, var(--rs-home-panel-bg) 68%, #f6f8fb 32%) ) !important; } body.site-home .hero-service-list { background: color-mix(in srgb, var(--rs-home-panel-bg) 68%, rgba(255, 255, 255, 0.72) 32%) !important; border-color: color-mix(in srgb, var(--rs-home-panel-bg) 56%, #2a6cae 44%) !important; } } @media screen and (max-width: 680px) { body.site-home .hero-copy { background: linear-gradient( 180deg, rgba(232, 241, 248, 0.2), rgba(141, 160, 176, 0.14) ), linear-gradient( 180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--rs-home-panel-bg) 52%, #ffffff 48%), color-mix(in srgb, var(--rs-home-panel-bg) 72%, #eff8ff 28%) 54%, color-mix(in srgb, var(--rs-home-panel-bg) 68%, #f6f8fb 32%) ) !important; } } /* Laatste themalaag: alle gewone knoppen volgen de kleuren uit de page editor. */ @media screen { body:not(.document-page--print-preview) :where( .button, .button-primary, .button-secondary, .button-danger, .portal-delete-button, .portal-inline-button, .portal-mini-button, .portal-trigger, .portal-blocked-menu__toggle, .portal-admin-inline-link, .portal-header-link, .client-access-link, .filter-button, .contact-tab, .portal-auth-tab, .portal-case-filter, .portal-finance-filter, .portal-finance-chip, .portal-admin-tab, .planning-duration-option, .planning-time-button, .payment-modal__cta, .home-jump-nav a, .product-card__link, .footer-callout__link, .scroll-top-button, .site-nav a, .site-nav__cta, .menu-toggle, .top-login-link, .top-direct-contact:not(.top-direct-contact--whatsapp), button:not(.rs-language-button):not(.top-direct-contact--whatsapp), input[type="submit"], input[type="button"], input[type="reset"], summary.button, [role="button"] ):not([href*="wa.me"]):not([href*="api.whatsapp.com"]) { -webkit-tap-highlight-color: transparent !important; appearance: none !important; border-color: color-mix(in srgb, var(--rs-home-button-fg) 54%, var(--rs-home-button-gloss) 46%) !important; color: var(--rs-home-button-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-bg) 58%, var(--rs-home-button-gloss) 42%), transparent 44%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-bg) 84%, var(--rs-home-button-gloss) 16%) 0%, var(--rs-home-button-bg) 50%, color-mix(in srgb, var(--rs-home-button-bg) 74%, var(--rs-home-button-fg) 26%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 72%, transparent 28%), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-button-fg) 38%, transparent 62%), 0 10px 20px color-mix(in srgb, var(--rs-home-button-fg) 18%, transparent 82%), 0 0 0 1px color-mix(in srgb, var(--rs-home-button-gloss) 34%, transparent 66%) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-button-bg) 62%, var(--rs-home-button-gloss) 38%) !important; } body:not(.document-page--print-preview) :where(input[type="file"])::file-selector-button { min-height: 36px !important; margin-right: 10px !important; padding: 0 14px !important; border: 1px solid color-mix(in srgb, var(--rs-home-button-fg) 54%, var(--rs-home-button-gloss) 46%) !important; border-radius: 12px !important; color: var(--rs-home-button-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-bg) 58%, var(--rs-home-button-gloss) 42%), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--rs-home-button-bg) 84%, var(--rs-home-button-gloss) 16%), var(--rs-home-button-bg) 50%, color-mix(in srgb, var(--rs-home-button-bg) 74%, var(--rs-home-button-fg) 26%)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 72%, transparent 28%), 0 8px 16px color-mix(in srgb, var(--rs-home-button-fg) 14%, transparent 86%) !important; font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important; font-weight: 900 !important; } body:not(.document-page--print-preview) :where( .button-primary, .button.is-active, .filter-button.is-active, .contact-tab.is-active, .portal-auth-tab.is-active, .portal-case-filter.is-active, .portal-finance-filter.is-active, .portal-finance-chip.is-active, .portal-admin-tab.is-active, .planning-duration-option.is-active, .planning-time-button.is-selected, .planning-time-button[aria-pressed="true"], .site-nav a.is-active, .site-nav__cta.is-active, .top-direct-contact--call, .scroll-top-button, [aria-current="page"], [aria-selected="true"] ):not([href*="wa.me"]):not([href*="api.whatsapp.com"]) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 78%, var(--rs-home-button-gloss) 22%) !important; color: var(--rs-home-button-active-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 46%, var(--rs-home-button-gloss) 54%), transparent 44%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-fg) 68%, var(--rs-home-button-gloss) 32%) 0%, var(--rs-home-button-fg) 52%, color-mix(in srgb, var(--rs-home-button-fg) 84%, #052f60 16%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 42%, transparent 58%), inset 0 -2px 0 color-mix(in srgb, var(--rs-home-button-fg) 70%, #001a33 30%), 0 13px 25px color-mix(in srgb, var(--rs-home-button-fg) 26%, transparent 74%), 0 0 0 1px color-mix(in srgb, var(--rs-home-button-gloss) 24%, transparent 76%) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page--print-preview) :where( .button, .button-primary, .button-secondary, .button-danger, .portal-delete-button, .portal-inline-button, .portal-mini-button, .portal-trigger, .portal-blocked-menu__toggle, .portal-admin-inline-link, .portal-header-link, .client-access-link, .filter-button, .contact-tab, .portal-auth-tab, .portal-case-filter, .portal-finance-filter, .portal-finance-chip, .portal-admin-tab, .planning-duration-option, .planning-time-button, .payment-modal__cta, .home-jump-nav a, .product-card__link, .footer-callout__link, .scroll-top-button, .site-nav a, .site-nav__cta, .menu-toggle, .top-login-link, .top-direct-contact:not(.top-direct-contact--whatsapp), button:not(.rs-language-button):not(.top-direct-contact--whatsapp), input[type="submit"], input[type="button"], input[type="reset"], summary.button, [role="button"] ):not([href*="wa.me"]):not([href*="api.whatsapp.com"]):hover, body:not(.document-page--print-preview) :where( .button, .button-primary, .button-secondary, .button-danger, .portal-delete-button, .portal-inline-button, .portal-mini-button, .portal-trigger, .portal-blocked-menu__toggle, .portal-admin-inline-link, .portal-header-link, .client-access-link, .filter-button, .contact-tab, .portal-auth-tab, .portal-case-filter, .portal-finance-filter, .portal-finance-chip, .portal-admin-tab, .planning-duration-option, .planning-time-button, .payment-modal__cta, .home-jump-nav a, .product-card__link, .footer-callout__link, .scroll-top-button, .site-nav a, .site-nav__cta, .menu-toggle, .top-login-link, .top-direct-contact:not(.top-direct-contact--whatsapp), button:not(.rs-language-button):not(.top-direct-contact--whatsapp), input[type="submit"], input[type="button"], input[type="reset"], summary.button, [role="button"] ):not([href*="wa.me"]):not([href*="api.whatsapp.com"]):focus-visible, body:not(.document-page--print-preview) input[type="file"]::file-selector-button:hover { border-color: color-mix(in srgb, var(--rs-home-button-fg) 76%, var(--rs-home-button-gloss) 24%) !important; color: var(--rs-home-button-hover-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 60%, var(--rs-home-button-gloss) 40%), transparent 45%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-hover) 86%, var(--rs-home-button-gloss) 14%) 0%, var(--rs-home-button-hover) 50%, color-mix(in srgb, var(--rs-home-button-hover) 68%, var(--rs-home-button-fg) 32%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 58%, transparent 42%), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-button-fg) 52%, transparent 48%), 0 14px 28px color-mix(in srgb, var(--rs-home-button-fg) 26%, transparent 74%), 0 0 0 4px color-mix(in srgb, var(--rs-home-button-hover) 18%, transparent 82%) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body:not(.document-page--print-preview) :where( .button, .button-primary, .button-secondary, .button-danger, .portal-delete-button, .portal-inline-button, .portal-mini-button, .portal-trigger, .portal-blocked-menu__toggle, .portal-admin-inline-link, .portal-header-link, .client-access-link, .filter-button, .contact-tab, .portal-auth-tab, .portal-case-filter, .portal-finance-filter, .portal-finance-chip, .portal-admin-tab, .planning-duration-option, .planning-time-button, .payment-modal__cta, .home-jump-nav a, .product-card__link, .footer-callout__link, .scroll-top-button, .site-nav a, .site-nav__cta, .menu-toggle, .top-login-link, .top-direct-contact, button, input[type="submit"], input[type="button"], input[type="reset"], summary.button, [role="button"] ) :where(span, strong, small, .nav-label) { color: inherit !important; text-shadow: inherit !important; } body:not(.document-page--print-preview) :where(.site-nav a, .site-nav__cta) .nav-core { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 32%, var(--rs-home-button-gloss) 68%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-fg) 68%, var(--rs-home-button-gloss) 32%) 0%, var(--rs-home-button-fg) 52%, color-mix(in srgb, var(--rs-home-button-fg) 84%, #052f60 16%) 100% ) !important; } body:not(.document-page--print-preview) :where(.site-nav a, .site-nav__cta) .nav-sheen { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--rs-home-button-gloss) 20%, transparent 80%) 18%, color-mix(in srgb, var(--rs-home-button-gloss) 78%, transparent 22%) 48%, color-mix(in srgb, var(--rs-home-button-hover) 52%, var(--rs-home-button-gloss) 48%) 58%, transparent 100% ) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta, .menu-toggle, .header-login-entry .portal-trigger, .portal-mini-button, .top-login-link) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 54%, var(--rs-home-header-button-gloss) 46%) !important; color: var(--rs-home-header-button-text) !important; background: radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--rs-home-header-button-bg) 58%, var(--rs-home-header-button-gloss) 42%), transparent 36%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%) 0%, var(--rs-home-header-button-bg) 50%, color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-bg) 62%, var(--rs-home-header-button-gloss) 38%) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-label { color: var(--rs-home-header-button-text) !important; text-shadow: inherit !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-core { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-hover) 48%, var(--rs-home-header-button-gloss) 52%), transparent 42%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a, .site-nav__cta) .nav-sheen { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 20%, transparent 80%) 18%, color-mix(in srgb, var(--rs-home-header-button-gloss) 78%, transparent 22%) 48%, color-mix(in srgb, var(--rs-home-header-button-hover) 52%, var(--rs-home-header-button-gloss) 48%) 58%, transparent 100% ) !important; } body:not(.document-page--print-preview) .site-header :where( .site-nav a:hover, .site-nav a:focus-visible, .site-nav__cta:hover, .site-nav__cta:focus-visible, .menu-toggle:hover, .menu-toggle:focus-visible, .header-login-entry .portal-trigger:hover, .header-login-entry .portal-trigger:focus-visible, .portal-mini-button:hover, .portal-mini-button:focus-visible, .top-login-link:hover, .top-login-link:focus-visible ) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 76%, var(--rs-home-header-button-gloss) 24%) !important; color: var(--rs-home-header-button-hover-text) !important; background: radial-gradient(circle at 20% 6%, color-mix(in srgb, var(--rs-home-header-button-gloss) 64%, transparent 36%), transparent 30%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-hover) 52%, color-mix(in srgb, var(--rs-home-header-button-hover) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a.is-active, .site-nav__cta.is-active, [aria-current="page"]) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 78%, var(--rs-home-header-button-gloss) 22%) !important; color: var(--rs-home-header-button-active-text) !important; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 30%, transparent 70%), transparent 34%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a:hover, .site-nav a:focus-visible, .site-nav__cta:hover, .site-nav__cta:focus-visible) .nav-label { color: var(--rs-home-header-button-hover-text) !important; } body:not(.document-page--print-preview) .site-header :where(.site-nav a.is-active, .site-nav__cta.is-active, [aria-current="page"]) .nav-label { color: var(--rs-home-header-button-active-text) !important; } body:not(.document-page--print-preview) :where( .top-toolbar .top-login-link, .rs-language-button ) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 54%, var(--rs-home-header-button-gloss) 46%) !important; color: var(--rs-home-header-button-text) !important; background: radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--rs-home-header-button-bg) 58%, var(--rs-home-header-button-gloss) 42%), transparent 36%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%) 0%, var(--rs-home-header-button-bg) 50%, color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-bg) 62%, var(--rs-home-header-button-gloss) 38%) !important; } body:not(.document-page--print-preview) :where( .top-toolbar .top-login-link:hover, .top-toolbar .top-login-link:focus-visible, .rs-language-button:hover, .rs-language-button:focus-visible ) { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 76%, var(--rs-home-header-button-gloss) 24%) !important; color: var(--rs-home-header-button-hover-text) !important; background: radial-gradient(circle at 20% 6%, color-mix(in srgb, var(--rs-home-header-button-gloss) 64%, transparent 36%), transparent 30%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-hover) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-hover) 52%, color-mix(in srgb, var(--rs-home-header-button-hover) 74%, var(--rs-home-header-button-fg) 26%) 100% ) !important; } body:not(.document-page--print-preview) .rs-language-button.is-active { border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 78%, var(--rs-home-header-button-gloss) 22%) !important; color: var(--rs-home-header-button-active-text) !important; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 30%, transparent 70%), transparent 34%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) 0%, var(--rs-home-header-button-fg) 52%, color-mix(in srgb, var(--rs-home-header-button-fg) 86%, #052f60 14%) 100% ) !important; } body:not(.document-page--print-preview) :where( .portal-inline-link, .admin-layout-controls__button, .admin-layout-controls__chip ) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 54%, var(--rs-home-button-gloss) 46%) !important; color: var(--rs-home-button-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-bg) 58%, var(--rs-home-button-gloss) 42%), transparent 44%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-bg) 84%, var(--rs-home-button-gloss) 16%) 0%, var(--rs-home-button-bg) 50%, color-mix(in srgb, var(--rs-home-button-bg) 74%, var(--rs-home-button-fg) 26%) 100% ) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-button-bg) 62%, var(--rs-home-button-gloss) 38%) !important; } body:not(.document-page--print-preview) :where( .portal-inline-link:hover, .portal-inline-link:focus-visible, .admin-layout-controls__button:hover, .admin-layout-controls__button:focus-visible, .admin-layout-controls__chip:hover, .admin-layout-controls__chip:focus-visible ) { border-color: color-mix(in srgb, var(--rs-home-button-fg) 76%, var(--rs-home-button-gloss) 24%) !important; color: var(--rs-home-button-hover-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 60%, var(--rs-home-button-gloss) 40%), transparent 45%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-hover) 86%, var(--rs-home-button-gloss) 14%) 0%, var(--rs-home-button-hover) 50%, color-mix(in srgb, var(--rs-home-button-hover) 68%, var(--rs-home-button-fg) 32%) 100% ) !important; } body:not(.document-page):not(.document-page--print-preview) .top-toolbar { background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rs-home-toolbar-bg) 28%, var(--rs-home-button-gloss) 72%), transparent 36%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-toolbar-bg) 86%, var(--rs-home-button-gloss) 14%) 0%, var(--rs-home-toolbar-bg) 55%, color-mix(in srgb, var(--rs-home-toolbar-bg) 82%, #102a42 18%) 100% ) !important; border-bottom-color: color-mix(in srgb, var(--rs-home-toolbar-bg) 62%, #0f2a42 38%) !important; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 42%, transparent 58%), 0 10px 24px color-mix(in srgb, var(--rs-home-toolbar-bg) 22%, transparent 78%) !important; } body:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner, body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(.top-direct-contact):not(.top-login-link), body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span { color: var(--rs-home-toolbar-text) !important; } body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(:last-child)::after, body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span:not(:last-child)::after { background: color-mix(in srgb, var(--rs-home-toolbar-text) 28%, transparent 72%) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 58%, transparent 42%), color-mix(in srgb, var(--rs-home-header-bar) 42%, transparent 58%) ), var(--rs-home-top-banner-image) center center / contain no-repeat !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 62%, #24425f 38%) !important; box-shadow: 0 26px 56px color-mix(in srgb, var(--rs-home-header-bar) 18%, transparent 82%), inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 42%, transparent 58%) !important; transform: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main::before, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main::before { background: radial-gradient( circle at center, color-mix(in srgb, var(--rs-home-header-bg) 28%, transparent 72%), transparent 72% ) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 74%, var(--rs-home-button-gloss) 26%), color-mix(in srgb, var(--rs-home-header-bg) 78%, var(--rs-home-header-bar) 22%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 58%, #24425f 42%) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__text, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger--current, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__text, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger--current { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 82%, var(--rs-home-button-gloss) 18%), color-mix(in srgb, var(--rs-home-header-bg) 70%, var(--rs-home-header-bar) 30%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 56%, #24425f 44%) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bar) 86%, var(--rs-home-button-gloss) 14%), color-mix(in srgb, var(--rs-home-header-bar) 88%, #18314a 12%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 66%, #24425f 34%) !important; } @media screen and (max-width: 680px) { body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 58%, transparent 42%), color-mix(in srgb, var(--rs-home-header-bar) 42%, transparent 58%) ), var(--rs-home-top-banner-image) center center / contain no-repeat !important; } } body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form .button.button-primary, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form button[type="submit"], body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form input[type="submit"], body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form .button.button-primary, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form button[type="submit"], body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form input[type="submit"] { min-width: 178px; border-color: color-mix(in srgb, var(--rs-home-button-fg) 78%, var(--rs-home-button-gloss) 22%) !important; color: var(--rs-home-button-active-text) !important; -webkit-text-fill-color: var(--rs-home-button-active-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 46%, var(--rs-home-button-gloss) 54%), transparent 44%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-fg) 68%, var(--rs-home-button-gloss) 32%) 0%, var(--rs-home-button-fg) 52%, color-mix(in srgb, var(--rs-home-button-fg) 84%, #052f60 16%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 42%, transparent 58%), inset 0 -2px 0 color-mix(in srgb, var(--rs-home-button-fg) 70%, #001a33 30%), 0 13px 25px color-mix(in srgb, var(--rs-home-button-fg) 26%, transparent 74%), 0 0 0 1px color-mix(in srgb, var(--rs-home-button-gloss) 24%, transparent 76%) !important; text-shadow: 0 1px 0 rgba(0, 22, 48, 0.62) !important; } body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form .button.button-primary:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form .button.button-primary:focus-visible, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form button[type="submit"]:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form button[type="submit"]:focus-visible, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form input[type="submit"]:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .contact-form input[type="submit"]:focus-visible, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form .button.button-primary:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form .button.button-primary:focus-visible, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form button[type="submit"]:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form button[type="submit"]:focus-visible, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form input[type="submit"]:hover, body.site-home:not(.document-page):not(.document-page--print-preview) #contact .appointment-form input[type="submit"]:focus-visible { border-color: color-mix(in srgb, var(--rs-home-button-fg) 76%, var(--rs-home-button-gloss) 24%) !important; color: var(--rs-home-button-hover-text) !important; -webkit-text-fill-color: var(--rs-home-button-hover-text) !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-button-hover) 60%, var(--rs-home-button-gloss) 40%), transparent 45%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-button-hover) 86%, var(--rs-home-button-gloss) 14%) 0%, var(--rs-home-button-hover) 50%, color-mix(in srgb, var(--rs-home-button-hover) 68%, var(--rs-home-button-fg) 32%) 100% ) !important; } .top-direct-contact--whatsapp, a.top-direct-contact--whatsapp, a[href*="wa.me"].top-direct-contact, a[href*="wa.me"], a[href*="api.whatsapp.com"] { border-color: rgba(18, 128, 74, 0.72) !important; color: #ffffff !important; background: radial-gradient(circle at 50% 0%, rgba(202, 255, 225, 0.5), transparent 42%), linear-gradient(180deg, #35dc82 0%, #1fb969 52%, #0b8f49 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -2px 0 rgba(5, 92, 45, 0.36), 0 12px 24px rgba(20, 157, 86, 0.23), 0 0 0 1px rgba(255, 255, 255, 0.24) !important; text-shadow: 0 1px 0 rgba(5, 58, 32, 0.62) !important; } .top-direct-contact--whatsapp:hover, .top-direct-contact--whatsapp:focus-visible, a[href*="wa.me"].top-direct-contact:hover, a[href*="wa.me"].top-direct-contact:focus-visible, a[href*="wa.me"]:hover, a[href*="wa.me"]:focus-visible, a[href*="api.whatsapp.com"]:hover, a[href*="api.whatsapp.com"]:focus-visible { border-color: rgba(10, 111, 57, 0.86) !important; color: #ffffff !important; background: radial-gradient(circle at 50% 0%, rgba(220, 255, 236, 0.56), transparent 44%), linear-gradient(180deg, #3feb8e 0%, #22c56f 50%, #087d3f 100%) !important; } /* Laatste compacte portal-headerlaag: ingelogde pagina's volgen dezelfde headerkleuren als de voorpagina. */ body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell.header-shell--portal, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within { display: grid !important; grid-template-rows: 104px 46px 42px !important; gap: 0 !important; align-items: stretch !important; overflow: hidden !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 74%, transparent 26%) 0%, color-mix(in srgb, var(--rs-home-header-bg) 54%, transparent 46%) 52%, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent 56%) 100% ), var(--rs-home-top-banner-image) center center / contain no-repeat !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 68%, #24425f 32%) !important; box-shadow: 0 18px 36px color-mix(in srgb, var(--rs-home-header-bar) 24%, transparent 76%), inset 0 1px 0 color-mix(in srgb, var(--rs-home-button-gloss) 38%, transparent 62%) !important; transform: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main { grid-row: 1 !important; min-height: 0 !important; height: 104px !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility { grid-row: 2 !important; width: min(100% - 32px, 860px) !important; min-height: 40px !important; height: 40px !important; margin: 2px auto 4px !important; padding: 4px 8px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; overflow: hidden !important; border-radius: 16px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 78%, var(--rs-home-button-gloss) 22%), color-mix(in srgb, var(--rs-home-header-bg) 72%, var(--rs-home-header-bar) 28%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 58%, #24425f 42%) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session { width: 100% !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__text, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger--current, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__text, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger--current { min-width: 170px !important; max-width: 240px !important; min-height: 30px !important; height: 30px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: color-mix(in srgb, var(--rs-home-header-bg) 72%, var(--rs-home-button-gloss) 28%) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 42%, transparent 58%) !important; overflow: hidden !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger__eyebrow, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .client-access-link__eyebrow, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger__eyebrow, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .client-access-link__eyebrow { display: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger__label, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .client-access-link__label, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-trigger__label, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .client-access-link__label { max-width: 100% !important; overflow: hidden !important; color: var(--rs-home-toolbar-text) !important; font-size: 0.9rem !important; line-height: 1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__actions, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-header-links, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-session__actions, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .portal-header-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: nowrap !important; min-width: 0 !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom { grid-row: 3 !important; width: min(100% - 32px, 1088px) !important; min-height: 38px !important; height: 38px !important; margin: 0 auto !important; padding: 3px 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; overflow: hidden !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bar) 90%, var(--rs-home-button-gloss) 10%), color-mix(in srgb, var(--rs-home-header-bar) 90%, #18314a 10%) ) !important; border-color: color-mix(in srgb, var(--rs-home-header-bar) 66%, #24425f 34%) !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav { width: auto !important; max-width: 100% !important; min-height: 0 !important; height: 32px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; scrollbar-width: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav::-webkit-scrollbar, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav::-webkit-scrollbar { display: none !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a.site-nav__cta, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a.site-nav__cta { flex: 0 0 auto !important; min-width: 102px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 0.74rem !important; line-height: 1 !important; } @media screen and (max-width: 760px) { body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell.header-shell--portal, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-shell { grid-template-rows: 78px auto auto !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bg) 74%, transparent 26%) 0%, color-mix(in srgb, var(--rs-home-header-bg) 54%, transparent 46%) 52%, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent 56%) 100% ), var(--rs-home-top-banner-image) center center / contain no-repeat !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-main { height: 78px !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility { width: calc(100% - 20px) !important; height: auto !important; min-height: 0 !important; margin: 2px auto 4px !important; align-items: stretch !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom { width: calc(100% - 20px) !important; justify-content: flex-start !important; } body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav, body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav { justify-content: flex-start !important; } } } /* Finale menuknop-vormlaag: deze staat bewust helemaal onderaan. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 108px !important; min-height: 36px !important; height: 36px !important; max-height: 36px !important; padding: 0 17px !important; border-radius: 16px !important; clip-path: none !important; } :root[data-rs-header-button-layout="separate"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav.portal-nav > a { min-width: 100px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 12px !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 4px 7px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 54%, var(--rs-home-header-button-gloss) 46%) !important; border-radius: 999px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-gloss) 50%, transparent 50%), transparent 48%), linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-button-bg) 84%, var(--rs-home-header-button-gloss) 16%), color-mix(in srgb, var(--rs-home-header-button-bg) 74%, var(--rs-home-header-button-fg) 26%) ) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 74%, transparent 26%), inset 0 -1px 0 color-mix(in srgb, var(--rs-home-header-button-fg) 38%, transparent 62%), 0 10px 20px color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 108px !important; min-height: 32px !important; height: 32px !important; max-height: 32px !important; padding: 0 20px !important; border-width: 0 0 0 1px !important; border-style: solid !important; border-color: color-mix(in srgb, var(--rs-home-header-button-fg) 24%, transparent 76%) !important; border-radius: 0 !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { border-left: 0 !important; border-radius: 999px 0 0 999px !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:last-child, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:last-child { border-radius: 0 999px 999px 0 !important; } :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root:not([data-rs-header-button-layout]) body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root[data-rs-header-button-layout="bar"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { inset: 0 !important; border-radius: inherit !important; clip-path: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 9px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin-left: -7px !important; min-width: 112px !important; min-height: 36px !important; height: 36px !important; max-height: 36px !important; padding: 0 25px !important; border-radius: 0 !important; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%) !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:first-child { margin-left: 0 !important; } :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after, :root[data-rs-header-button-layout="angled"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: 0 !important; clip-path: inherit !important; } } /* Eindlaag voor extra moderne menuknop-layouts. */ @media screen and (min-width: 761px) { :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav, :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar, :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav::-webkit-scrollbar { display: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 98px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 15px 3px !important; border: 0 !important; border-radius: 8px !important; clip-path: none !important; color: var(--rs-home-header-button-text) !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::before, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a .nav-core { border-radius: inherit !important; clip-path: none !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a::after { inset: auto 14px 4px !important; height: 3px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--rs-home-header-button-fg) 72%, transparent 28%) !important; opacity: 0.42 !important; box-shadow: 0 0 12px color-mix(in srgb, var(--rs-home-header-button-fg) 42%, transparent 58%) !important; } :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="underline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-hover-text) !important; background: color-mix(in srgb, var(--rs-home-header-button-hover) 18%, transparent 82%) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 4px !important; padding: 5px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 34%, #0b1118 66%) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rs-home-header-button-fg) 18%, transparent 82%), transparent 62%), linear-gradient(180deg, #263747, #101922) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 22px rgba(5, 12, 20, 0.22) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 32px !important; height: 32px !important; max-height: 32px !important; padding: 0 15px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 9px !important; clip-path: none !important; color: var(--rs-home-header-button-hover-text) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="carbon"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-active-text) !important; background: linear-gradient(180deg, var(--rs-home-header-button-hover), var(--rs-home-header-button-fg)) !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="compact"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 88px !important; min-height: 28px !important; height: 28px !important; max-height: 28px !important; padding: 0 12px !important; border-radius: 10px !important; clip-path: none !important; font-size: 0.73rem !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 106px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border: 1px solid color-mix(in srgb, var(--rs-home-header-button-fg) 72%, var(--rs-home-header-button-gloss) 28%) !important; border-radius: 999px !important; clip-path: none !important; background: color-mix(in srgb, var(--rs-home-header-button-bg) 28%, transparent 72%) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rs-home-header-button-gloss) 56%, transparent 44%) !important; } :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:hover, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a:focus-visible, :root[data-rs-header-button-layout="outline"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a.is-active { color: var(--rs-home-header-button-active-text) !important; background: linear-gradient(180deg, var(--rs-home-header-button-hover), var(--rs-home-header-button-fg)) !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav { gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-rs-header-button-layout="slab"] body:not(.document-page):not(.document-page--print-preview) .site-header .site-nav > a { flex: 0 0 auto !important; margin: 0 !important; min-width: 104px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 0 16px !important; border-radius: 5px !important; clip-path: none !important; } } /* Definitieve 2de-header laag: dit staat echt onderaan zodat de editor-CSS het niet meer overschrijft. */ body.site-home .hero-copy .panel-corners { display: none !important; } body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { overflow: hidden !important; border-radius: 30px !important; transform: none !important; filter: none !important; transition: none !important; border-color: rgba(186, 207, 226, 0.42) !important; box-shadow: 0 0 0 18px var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)), 0 0 0 19px color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%), 0 30px 70px rgba(7, 13, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; } body.site-home .hero-copy::after, body.site-home .hero-copy:hover::after, body.site-home .hero-copy:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { border-radius: inherit !important; clip-path: inset(0 0 0 0 round 30px) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy:hover h1 { color: #173a62 !important; } body.site-home .hero-copy:hover .hero-text, body.site-home .hero-copy:hover .hero-intro { color: #314f69 !important; } body.site-home .hero-copy:hover .section-kicker { color: var(--rs-home-accent, #4f7fab) !important; } @media screen and (max-width: 680px) { body.site-home .hero-copy, body.site-home .hero-copy:hover, body.site-home .hero-copy:focus, body.site-home .hero-copy:focus-within { border-radius: 24px !important; } body.site-home .hero-copy::before, body.site-home .hero-copy:hover::before, body.site-home .hero-copy:focus-within::before, body.site-home .hero-photo-bg { clip-path: inset(0 0 0 0 round 24px) !important; } } /* Tweede banner echt als laatste: geen tilt/hover, heldere foto, glas alleen als rand en achterplaat. */ body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within, body.site-home .hero-copy[data-tilt], body.site-home .hero-copy[data-tilt]:hover, body.site-home .hero-copy[data-tilt]:focus-within { overflow: visible !important; border: 1px solid rgba(226, 241, 253, 0.78) !important; border-top-color: rgba(244, 251, 255, 0.9) !important; border-radius: 30px !important; background: transparent !important; box-shadow: 0 26px 58px rgba(7, 13, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; border: 1px solid rgba(238, 249, 255, 0.7) !important; background: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(105, 160, 208, 0.1) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel::after, body.site-home .hero-copy.tech-panel:hover::after, body.site-home .hero-copy.tech-panel:focus-within::after { content: "" !important; position: absolute !important; inset: 14px -18px -20px !important; z-index: -1 !important; display: block !important; border: 1px solid rgba(220, 238, 251, 0.46) !important; border-radius: 34px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 5%, transparent), color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 2%, transparent) ), linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(70, 95, 116, 0.08)) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.18) !important; opacity: 0.78 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; overflow: hidden !important; clip-path: inset(0 round 30px) !important; background: var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .panel-corners { display: none !important; } body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:hover *:not(a):not(button):not(.button):not(.button-primary):not(.button-secondary) { transform: none !important; filter: none !important; transition: none !important; } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { border-radius: 24px !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { clip-path: inset(0 round 24px) !important; background: var(--rs-home-bottom-banner-image) center top / cover no-repeat !important; } } /* Glas-tint voor de rest van de voorpagina: op de voorkant van het glas, niet achter de plaat. */ @media screen { body.site-home :where(.content-section, .portal-section) { position: relative !important; isolation: isolate !important; overflow: visible !important; } body.site-home :where(.content-section, .portal-section)::before { z-index: -1 !important; background: linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%) !important; } body.site-home :where(.content-section, .portal-section)::after { content: "" !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important; opacity: 1 !important; pointer-events: none !important; } body.site-home :where(.content-section, .portal-section) > * { position: relative !important; z-index: 2 !important; } body.site-home :where( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .footer-columns, .hero-service-list, .contact-switcher ) { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body.site-home :where( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .footer-columns, .hero-service-list, .contact-switcher )::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 40%, rgba(60, 98, 132, 0.06)) !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none !important; } body.site-home :where( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .footer-columns, .hero-service-list, .contact-switcher ) > * { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 680px) { body.site-home :where(.content-section, .portal-section)::after { border-radius: inherit !important; } } /* Win van oudere sectie-backplates: tint hoort voorop, achterplaat blijft neutraal. */ @media screen { body.site-home .content-section::before, body.site-home .portal-section::before, body.site-home .content-section:hover::before, body.site-home .portal-section:hover::before, body.site-home .content-section:focus-within::before, body.site-home .portal-section:focus-within::before { z-index: -1 !important; background: linear-gradient(180deg, rgba(22, 33, 45, 0.18), rgba(185, 199, 213, 0.05)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.08), transparent 34%) !important; } body.site-home .content-section::after, body.site-home .portal-section::after, body.site-home .content-section:hover::after, body.site-home .portal-section:hover::after, body.site-home .content-section:focus-within::after, body.site-home .portal-section:focus-within::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; pointer-events: none !important; } body.site-home .content-section > *, body.site-home .portal-section > * { position: relative !important; z-index: 2 !important; } } /* Tweede header volgt weer dezelfde glas-tintkleur als de rest, zonder mouse-over terug te brengen. */ @media screen { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { isolation: isolate !important; background: transparent !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; border: 1px solid rgba(238, 249, 255, 0.64) !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-mid, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 0 0 1px rgba(105, 160, 208, 0.1) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; pointer-events: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { z-index: 0 !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } /* Hero tekstvak: gewone inhoudskaart, zonder clipping door de algemene glaslaag. */ @media screen { body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { position: relative !important; z-index: 2 !important; isolation: auto !important; display: grid !important; gap: 8px !important; width: min(100%, 620px) !important; max-width: 620px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 12px 14px !important; overflow: visible !important; border: 1px solid rgba(42, 108, 174, 0.18) !important; border-radius: 16px !important; background: rgba(246, 251, 255, 0.72) !important; box-shadow: 0 14px 28px rgba(33, 70, 104, 0.08) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #213c57 !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel .hero-service-list::before, body.site-home .hero-copy.tech-panel .hero-service-list::after, body.site-home .hero-copy.tech-panel .hero-service-list:hover::before, body.site-home .hero-copy.tech-panel .hero-service-list:hover::after, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::before, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy.tech-panel .hero-service-list > * { position: relative !important; z-index: 1 !important; } body.site-home .hero-copy.tech-panel .hero-service-list strong { color: #173a62 !important; font-size: 0.94rem !important; line-height: 1.28 !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { display: grid !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.site-home .hero-copy.tech-panel .hero-service-list li { position: relative !important; padding-left: 16px !important; color: #213c57 !important; font-size: 0.94rem !important; font-weight: 700 !important; line-height: 1.28 !important; text-shadow: none !important; } body.site-home .hero-copy.tech-panel .hero-service-list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0.58em !important; width: 7px !important; height: 7px !important; display: block !important; border-radius: 50% !important; background: #2f7ed8 !important; box-shadow: 0 0 0 4px rgba(47, 126, 216, 0.12) !important; } } @media screen and (min-width: 681px) { body.site-home .hero-copy.tech-panel .hero-service-list { margin-left: auto !important; margin-right: 0 !important; } } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel .hero-service-list { margin-left: 0 !important; margin-right: 0 !important; } } /* Extra borging: het servicekader moet alle regels binnen de achtergrond houden. */ @media screen { body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { box-sizing: border-box !important; align-content: start !important; grid-auto-rows: max-content !important; min-height: calc(6.8em + 64px) !important; padding: 14px 20px 26px !important; overflow: hidden !important; border-radius: 12px !important; } } /* Page editor: compacte bewerking voor Werkwijze en FAQ. */ @media screen { .homepage-section-quicklinks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .homepage-section-quicklinks .button { min-height: 34px !important; padding: 0 12px !important; border-radius: 11px !important; font-size: 0.78rem !important; letter-spacing: 0.03em !important; } .homepage-section-core { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(120px, 0.32fr) minmax(220px, 0.8fr) minmax(220px, 1fr); gap: 8px; } .homepage-section-editor--compact-items { gap: 10px !important; padding: 12px !important; scroll-margin-top: 18px; } .homepage-section-editor--compact-items .panel-corners { display: none !important; } .homepage-section-editor--compact-items legend { max-width: 100%; padding: 0 5px !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .homepage-section-editor--compact-items .homepage-section-items { grid-template-columns: 1fr !important; gap: 7px !important; } .homepage-section-editor--compact-items .homepage-section-item-editor { grid-template-columns: 56px minmax(180px, 0.78fr) minmax(240px, 1fr) !important; align-items: end; gap: 7px !important; padding: 8px !important; border-radius: 10px !important; background: rgba(236, 246, 253, 0.42) !important; } .homepage-section-editor--compact-items .homepage-section-item-editor .field-full { grid-column: auto !important; } .homepage-section-editor--compact-items .field { gap: 4px !important; } .homepage-section-editor--compact-items .field span { font-size: 0.62rem !important; line-height: 1 !important; letter-spacing: 0.08em !important; } .homepage-section-editor--compact-items input, .homepage-section-editor--compact-items textarea { min-height: 34px !important; height: 34px !important; padding: 6px 9px !important; border-radius: 9px !important; font-size: 0.82rem !important; line-height: 1.2 !important; } .homepage-section-editor--compact-items textarea { resize: vertical; overflow: auto !important; } } @media screen and (max-width: 860px) { .homepage-section-core, .homepage-section-editor--compact-items .homepage-section-item-editor { grid-template-columns: 1fr !important; } .homepage-section-editor--compact-items .homepage-section-item-editor .field-full { grid-column: 1 / -1 !important; } } /* Tweede header: duidelijkere dubbele glasrand zoals de top en de lagere platen. */ @media screen { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { border: 1px solid rgba(246, 252, 255, 0.9) !important; box-shadow: 0 0 0 1px rgba(43, 82, 112, 0.28), 0 0 0 12px color-mix(in srgb, var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)) 72%, rgba(238, 249, 255, 0.22) 28%), 0 0 0 13px rgba(232, 247, 255, 0.58), 0 0 0 14px rgba(43, 82, 112, 0.22), 0 30px 70px rgba(7, 13, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(18, 34, 50, 0.16), inset 0 0 0 1px rgba(74, 132, 182, 0.18) !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { border: 2px solid rgba(242, 250, 255, 0.68) !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%, rgba(40, 86, 126, 0.1)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(54, 113, 164, 0.2), inset 0 -18px 32px rgba(22, 45, 66, 0.1) !important; } } /* Reset 2de header: rustige glasplaat met de juiste bottom-banner foto. */ @media screen { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { overflow: hidden !important; border: 1px solid rgba(232, 247, 255, 0.76) !important; border-radius: 30px !important; background: transparent !important; box-shadow: 0 0 0 8px color-mix(in srgb, var(--rs-home-glass-tint-soft, rgba(158, 181, 199, 0.16)) 62%, transparent), 0 0 0 9px rgba(238, 249, 255, 0.34), 0 24px 58px rgba(7, 13, 22, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; clip-path: inset(0 round 30px) !important; background: url("assets/rs-home-bottom-banner.png?v=20260430-banner-01") center center / cover no-repeat !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border: 1px solid rgba(248, 253, 255, 0.5) !important; border-radius: inherit !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(40, 86, 126, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 0 0 1px rgba(74, 132, 182, 0.1) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::after, body.site-home .hero-copy.tech-panel:hover::after, body.site-home .hero-copy.tech-panel:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel .hero-photo-bg { clip-path: inset(0 round 24px) !important; background: url("assets/rs-home-bottom-banner.png?v=20260430-banner-01") center top / cover no-repeat !important; } } /* Definitief: 2de banner krijgt dezelfde glas- en achtergrondbehandeling als de topheader. */ @media screen { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { height: clamp(360px, 36vw, 455px) !important; min-height: clamp(360px, 36vw, 455px) !important; max-height: clamp(360px, 36vw, 455px) !important; overflow: hidden !important; border: 1px solid rgba(186, 207, 226, 0.42) !important; border-radius: 30px !important; background: linear-gradient( 180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18) ), linear-gradient( 180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent) ), var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; background-position: center center, center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 24px 60px rgba(11, 21, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04); transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { display: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border: 0 !important; border-radius: inherit !important; background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(91, 130, 164, 0.08)), linear-gradient(90deg, rgba(225, 234, 243, 0.04) 0%, rgba(213, 226, 238, 0.08) 34%, rgba(231, 239, 247, 0.2) 67%, rgba(235, 243, 250, 0.24) 100%) !important; box-shadow: none !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::after, body.site-home .hero-copy.tech-panel:hover::after, body.site-home .hero-copy.tech-panel:focus-within::after { content: none !important; display: none !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { height: auto !important; min-height: 0 !important; max-height: none !important; background: linear-gradient( 180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18) ), linear-gradient( 180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent) ), var(--rs-home-bottom-banner-image) center top / cover no-repeat !important; background-size: 100% 100%, 100% 100%, cover !important; } } /* FINAL: het middelste servicekader mag nooit tekst afsnijden. */ @media screen { body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { height: auto !important; min-height: 166px !important; max-height: none !important; padding: 14px 18px 22px !important; overflow: visible !important; align-content: start !important; box-sizing: border-box !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { gap: 6px !important; } } /* WINNING LAST: gelijke glasstijl en hover voor header 1, header 2 en alle grote glasplaten. */ @media screen { body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) { position: relative !important; isolation: isolate !important; overflow: visible !important; border: 1px solid rgba(186, 207, 226, 0.42) !important; border-radius: 24px !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 24px 60px rgba(11, 21, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04); transform: none !important; filter: none !important; transition: background-position 620ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important; } body.site-home .site-header .header-shell { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-top-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home .hero-copy.tech-panel { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel) { background: linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before { content: "" !important; position: absolute !important; inset: 16px -22px -24px !important; z-index: -1 !important; display: block !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; border-radius: 30px !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; transition: border-color 220ms ease, box-shadow 220ms ease !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transition: background-position 620ms ease, box-shadow 220ms ease !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > * { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .hero-service-list { z-index: 3 !important; } } @media (hover: hover) and (pointer: fine) { body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover, body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within { background-position: -160% 0, center center, center center, center center !important; border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background-position: 185% 0, 0 0, 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } } /* Alleen header 1 en 2: echte glas-hover op de voorgrond, zonder de rest aan te raken. */ @media screen { body.site-home .site-header .header-shell > .panel-corners, body.site-home .hero-copy.tech-panel > .panel-corners { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; overflow: hidden !important; border: 0 !important; border-radius: inherit !important; clip-path: inset(0 round 24px) !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transform: none !important; transition: background-position 620ms ease, box-shadow 220ms ease, opacity 220ms ease !important; } body.site-home .site-header .header-shell > :not(.panel-corners), body.site-home .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .hero-service-list { z-index: 3 !important; } } @media (hover: hover) and (pointer: fine) { body.site-home .site-header .header-shell:hover, body.site-home .site-header .header-shell:focus-within { background-position: -160% 0, center center, center center, center center !important; } body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus-within { background-position: -160% 0, center center, center center, center center !important; } body.site-home .site-header .header-shell:hover > .panel-corners, body.site-home .site-header .header-shell:focus-within > .panel-corners, body.site-home .hero-copy.tech-panel:hover > .panel-corners, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { background-position: 185% 0, 0 0, 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } } /* FINAL glasstijl: header 1 en 2 zijn de basis voor alle grote glasplaten. */ @media screen { body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ) { position: relative !important; isolation: isolate !important; overflow: visible !important; border: 1px solid rgba(186, 207, 226, 0.42) !important; border-radius: 24px !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 24px 60px rgba(11, 21, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04); transform: none !important; transition: background-position 620ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important; } body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel ) { background: linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important; } body.site-home .site-header .header-shell { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-top-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home .hero-copy.tech-panel { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel )::before { content: "" !important; position: absolute !important; inset: 16px -22px -24px !important; z-index: -1 !important; display: block !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; border-radius: 30px !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease !important; } body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel )::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transition: background-position 620ms ease, opacity 220ms ease, box-shadow 220ms ease !important; } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ) > * { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .hero-service-list { z-index: 3 !important; } } @media (hover: hover) and (pointer: fine) { body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover, body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within { background-position: -160% 0, center center, center center, center center !important; border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background-position: 185% 0, 0 0, 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):hover::before, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):focus-within::before { border-color: rgba(238, 249, 255, 0.58) !important; box-shadow: 0 34px 82px rgba(7, 13, 22, 0.28) !important; } } @media screen and (max-width: 680px) { body.site-home .site-header .header-shell { background-size: 76% 100%, 100% 100%, 100% 100%, cover !important; } body.site-home .hero-copy.tech-panel { background-size: 76% 100%, 100% 100%, 100% 100%, cover !important; } } /* Laatste borging voor het middelste tekstkader: alle regels blijven zichtbaar. */ @media screen { body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { height: auto !important; min-height: 166px !important; max-height: none !important; padding: 14px 18px 22px !important; overflow: visible !important; align-content: start !important; box-sizing: border-box !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { gap: 6px !important; } } /* Footer glasplaat en spiegel-hover voor de glasblokken. */ @media screen { body.site-home .footer-columns.tech-panel { position: relative !important; isolation: isolate !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.44)) 66%, transparent 34%) !important; border-radius: 24px !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, rgba(233, 244, 252, 0.34)), var(--rs-home-glass-tint-soft, rgba(128, 154, 176, 0.2))), linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 42%, rgba(54, 93, 124, 0.1)) !important; box-shadow: 0 30px 72px rgba(7, 13, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(20, 38, 56, 0.12) !important; -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05); } body.site-home .footer-columns.tech-panel > * { position: relative !important; z-index: 2 !important; } body.site-home :where( .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ) { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body.site-home :where( .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link )::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; pointer-events: none !important; opacity: 0.92 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transform: none !important; filter: none !important; transition: background-position 620ms ease, opacity 220ms ease, box-shadow 220ms ease !important; } body.site-home :where( .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ) > * { position: relative !important; z-index: 2 !important; } } @media (hover: hover) and (pointer: fine) { body.site-home :where( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ) { transition: border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important; } body.site-home :where( .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ):hover::after, body.site-home :where( .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ):focus-within::after { background-position: 185% 0, 0 0, 0 0 !important; opacity: 1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } body.site-home :where( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ):hover, body.site-home :where( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns, .footer-callout__link ):focus-within { border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.05) brightness(1.025); } } /* 2de banner inhoud: tekst blijft leesbaar op dezelfde donkere/neutrale headerachtergrond. */ @media screen { body.site-home .hero-copy.tech-panel h1, body.site-home .hero-copy.tech-panel:hover h1 { color: #eef8ff !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.72), 0 12px 28px rgba(0, 0, 0, 0.48) !important; } body.site-home .hero-copy.tech-panel .hero-text, body.site-home .hero-copy.tech-panel .hero-install-note, body.site-home .hero-copy.tech-panel .hero-availability-note, body.site-home .hero-copy.tech-panel:hover .hero-text, body.site-home .hero-copy.tech-panel:hover .hero-install-note, body.site-home .hero-copy.tech-panel:hover .hero-availability-note { color: #d9ebf7 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.72), 0 10px 22px rgba(0, 0, 0, 0.42) !important; } body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { background: rgba(236, 246, 253, 0.84) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } } /* 2de banner inhoud compacter houden binnen het venster. */ @media screen and (min-width: 681px) { body.site-home .hero-copy.tech-panel { padding-inline: clamp(30px, 5vw, 72px) !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { width: min(100%, 520px) !important; max-width: 520px !important; margin-left: auto !important; margin-right: clamp(18px, 4.8vw, 82px) !important; } body.site-home .hero-copy.tech-panel h1, body.site-home .hero-copy.tech-panel .hero-text, body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-install-note, body.site-home .hero-copy.tech-panel .hero-actions, body.site-home .hero-copy.tech-panel .hero-availability-note { width: 100% !important; max-width: 520px !important; } body.site-home .hero-copy.tech-panel h1 { font-size: clamp(1.24rem, 1.28vw, 1.54rem) !important; line-height: 1.1 !important; } body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { min-height: 0 !important; padding: 12px 16px 16px !important; } body.site-home .hero-copy.tech-panel .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.site-home .hero-copy.tech-panel .hero-actions .top-direct-contact { min-width: 0 !important; padding-inline: 12px !important; } } /* Match 2de header exact met de topheader: zelfde glas, radius, tint en randgedrag. */ @media screen { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { height: clamp(360px, 36vw, 455px) !important; min-height: clamp(360px, 36vw, 455px) !important; max-height: clamp(360px, 36vw, 455px) !important; overflow: visible !important; isolation: isolate !important; border: 1px solid rgba(186, 207, 226, 0.42) !important; border-radius: 24px !important; background: linear-gradient( 180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18) ), linear-gradient( 180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent)) ), var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; background-position: center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; background-repeat: no-repeat, no-repeat, no-repeat !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 24px 60px rgba(11, 21, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04); transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel .hero-photo-bg { display: none !important; } body.site-home .hero-copy.tech-panel::before, body.site-home .hero-copy.tech-panel:hover::before, body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 16px -22px -24px !important; z-index: -1 !important; display: block !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; border-radius: 30px !important; background: linear-gradient( 180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent) ), linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel::after, body.site-home .hero-copy.tech-panel:hover::after, body.site-home .hero-copy.tech-panel:focus-within::after { content: "" !important; position: absolute !important; inset: auto 24px 0 !important; z-index: 1 !important; display: block !important; height: 3px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, rgba(95, 165, 226, 0.18), rgba(68, 145, 214, 0.82), rgba(95, 165, 226, 0.18), transparent) !important; box-shadow: none !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 680px) { body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; border-radius: 24px !important; background: linear-gradient( 180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18) ), linear-gradient( 180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom-mobile, color-mix(in srgb, var(--rs-home-header-bar) 44%, transparent)) ), var(--rs-home-bottom-banner-image) center top / cover no-repeat !important; background-size: 100% 100%, 100% 100%, cover !important; } } /* FINAL EOF: het middelste servicekader mag nooit tekst afsnijden. */ @media screen { body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { height: auto !important; min-height: 166px !important; max-height: none !important; padding: 14px 18px 22px !important; overflow: visible !important; align-content: start !important; box-sizing: border-box !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { gap: 6px !important; } } /* ABSOLUTE LAST: deze wint over alle oudere glasregels. */ @media screen { body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) { position: relative !important; isolation: isolate !important; overflow: visible !important; border: 1px solid rgba(186, 207, 226, 0.42) !important; border-radius: 24px !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 24px 60px rgba(11, 21, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 -1px 0 rgba(18, 34, 50, 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04); transform: none !important; filter: none !important; transition: background-position 620ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important; } body.site-home .site-header .header-shell { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-top-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home .hero-copy.tech-panel { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-header-tint-top, color-mix(in srgb, var(--rs-home-header-bg) 56%, transparent)), var(--rs-home-header-tint-bottom, color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent))), var(--rs-home-bottom-banner-image) center center / contain no-repeat !important; background-position: -160% 0, center center, center center, center center !important; background-size: 76% 100%, 100% 100%, 100% 100%, contain !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel) { background: linear-gradient(180deg, rgba(232, 241, 248, 0.28), rgba(141, 160, 176, 0.18)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent) !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before { content: "" !important; position: absolute !important; inset: 16px -22px -24px !important; z-index: -1 !important; display: block !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; border-radius: 30px !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(185, 199, 213, 0.06)), radial-gradient(circle at 88% 8%, rgba(38, 120, 205, 0.09), transparent 34%) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; transition: border-color 220ms ease, box-shadow 220ms ease !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transition: background-position 620ms ease, box-shadow 220ms ease !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > * { position: relative !important; z-index: 2 !important; } body.site-home .hero-copy.tech-panel .hero-service-list { z-index: 3 !important; } body.site-home .site-header .header-shell > .panel-corners, body.site-home .hero-copy.tech-panel > .panel-corners { display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; overflow: hidden !important; border: 0 !important; border-radius: inherit !important; clip-path: inset(0 round 24px) !important; pointer-events: none !important; opacity: 1 !important; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.64) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 64%, transparent 100%) -160% 0 / 76% 100% no-repeat, linear-gradient(180deg, var(--rs-home-glass-tint-mid, transparent), var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(60, 98, 132, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(105, 160, 208, 0.08) !important; transform: none !important; transition: background-position 620ms ease, box-shadow 220ms ease, opacity 220ms ease !important; } body.site-home .hero-copy.tech-panel > .panel-corners::before, body.site-home .hero-copy.tech-panel > .panel-corners::after { content: none !important; display: none !important; } } @media (hover: hover) and (pointer: fine) { body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover, body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within { background-position: -160% 0, center center, center center, center center !important; border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(238, 249, 255, 0.74) !important; filter: saturate(1.06) brightness(1.03) !important; box-shadow: inset 0 0 0 999px var(--rs-home-glass-tint-soft, transparent), 0 30px 76px rgba(7, 13, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(18, 34, 50, 0.12) !important; } body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background-position: 185% 0, 0 0, 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } body.site-home .site-header .header-shell:hover > .panel-corners, body.site-home .site-header .header-shell:focus-within > .panel-corners, body.site-home .hero-copy.tech-panel:hover > .panel-corners, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { background-position: 185% 0, 0 0, 0 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(220, 242, 255, 0.26) !important; } } /* Alleen 2e header: aparte spiegelstreep, los van background-position conflicten. */ @keyframes rs-hero-header-sheen-swipe-ltr { 0% { opacity: 0; transform: translateX(-120%) skewX(-10deg); } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%) skewX(-10deg); } } body.site-home .hero-copy.tech-panel > .panel-corners, body.site-home .hero-copy.tech-panel:hover > .panel-corners, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { animation: none !important; background-position: -160% 0, 0 0, 0 0 !important; } body.site-home .hero-copy.tech-panel > .panel-corners::before { content: "" !important; display: block !important; position: absolute !important; inset: -8% -42% !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 0; background: linear-gradient( 115deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.16) 54%, transparent 60%, transparent 100% ) !important; box-shadow: none !important; transform: translateX(-120%) skewX(-10deg); animation: none !important; transition: none !important; } body.site-home .hero-copy.tech-panel > .panel-corners::after { content: none !important; display: none !important; } @media (hover: hover) and (pointer: fine) { body.site-home .hero-copy.tech-panel:hover > .panel-corners::before, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before { animation: rs-hero-header-sheen-swipe-ltr 720ms ease both !important; } } /* RS consistency layer: meer rust, vaste spacing en een strakker component-systeem. */ @media screen { body.site-home { --rs-pro-page-width: 1220px; --rs-pro-section-gap: clamp(50px, 5.2vw, 86px); --rs-pro-card-gap: clamp(12px, 1.4vw, 18px); --rs-pro-section-radius: 24px; --rs-pro-card-radius: 18px; --rs-pro-button-radius: 14px; --rs-pro-card-shadow: 0 16px 34px rgba(9, 18, 30, 0.16); --rs-pro-card-shadow-hover: 0 20px 44px rgba(9, 18, 30, 0.2); } body.site-home .hero-section + .content-section, body.site-home .content-section + .content-section { margin-top: var(--rs-pro-section-gap) !important; } body.site-home .content-section { width: min(calc(100% - clamp(28px, 5vw, 72px)), var(--rs-pro-page-width)) !important; padding: clamp(26px, 3.2vw, 42px) !important; border-radius: var(--rs-pro-section-radius) !important; } body.site-home .section-heading { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr) !important; align-items: end !important; gap: clamp(14px, 2.2vw, 30px) !important; margin-bottom: clamp(18px, 2.4vw, 30px) !important; } body.site-home .section-heading .section-kicker { grid-column: 1 / -1 !important; margin: 0 !important; } body.site-home .section-heading h2, body.site-home .contact-copy h2 { max-width: 18ch !important; margin: 0 !important; font-size: clamp(1.72rem, 1.22rem + 1.55vw, 3rem) !important; line-height: 1.06 !important; letter-spacing: 0 !important; } body.site-home .section-heading > p:not(.section-kicker), body.site-home .contact-copy > p, body.site-home .appointment-intro { max-width: 54ch !important; margin: 0 !important; color: var(--rs-home-muted, var(--muted)) !important; font-size: clamp(0.94rem, 0.9rem + 0.18vw, 1.04rem) !important; line-height: 1.55 !important; } body.site-home :is(.section-kicker, .card-code, .project-label) { letter-spacing: 0.12em !important; line-height: 1.2 !important; opacity: 0.86 !important; } body.site-home .hero-copy.tech-panel h1 { max-width: 520px !important; margin-bottom: 14px !important; font-size: clamp(1.42rem, 1.1rem + 1.05vw, 1.82rem) !important; line-height: 1.06 !important; letter-spacing: 0 !important; } body.site-home .hero-copy.tech-panel .hero-text, body.site-home .hero-copy.tech-panel .hero-install-note, body.site-home .hero-copy.tech-panel .hero-availability-note { font-size: clamp(0.92rem, 0.86rem + 0.18vw, 1rem) !important; line-height: 1.45 !important; } body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { height: auto !important; min-height: 146px !important; padding: 12px 18px 14px !important; border-radius: 16px !important; background: rgba(236, 246, 253, 0.74) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.64) !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { gap: 5px !important; } body.site-home .hero-copy.tech-panel .hero-service-list li { font-size: clamp(0.92rem, 0.88rem + 0.16vw, 1rem) !important; line-height: 1.18 !important; } body.site-home :is( .homepage-media-strip, .project-grid, .process-grid, .service-grid, .product-showroom__grid, .faq-list ) { gap: var(--rs-pro-card-gap) !important; } body.site-home :is( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher ) { border-radius: var(--rs-pro-card-radius) !important; box-shadow: var(--rs-pro-card-shadow) !important; } body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) { padding: clamp(14px, 1.45vw, 18px) !important; } body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) h3 { margin: 0 0 7px !important; font-size: clamp(1rem, 0.94rem + 0.24vw, 1.18rem) !important; line-height: 1.18 !important; letter-spacing: 0 !important; } body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) p { font-size: clamp(0.86rem, 0.82rem + 0.12vw, 0.94rem) !important; line-height: 1.45 !important; } body.site-home .homepage-media-card__image, body.site-home .project-media, body.site-home .product-card__visual { border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; } body.site-home .faq-item summary { padding: 16px 18px !important; line-height: 1.35 !important; } body.site-home .faq-item p { padding: 0 18px 18px !important; line-height: 1.55 !important; } body.site-home .hero-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 14px !important; } body.site-home :is( .hero-actions .top-direct-contact, .button, .button-primary, .contact-tab, .product-card__link ) { min-height: 46px !important; border-radius: var(--rs-pro-button-radius) !important; font-weight: 800 !important; letter-spacing: 0 !important; text-align: center !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease !important; } body.site-home .top-toolbar .top-direct-contact { min-height: 34px !important; border-radius: 999px !important; padding-inline: 14px !important; } body.site-home :is(.top-direct-contact--whatsapp, a[href*="wa.me"].top-direct-contact) { border-color: rgba(14, 139, 78, 0.72) !important; color: #ffffff !important; background: linear-gradient(180deg, #31d17c, #12a160) !important; box-shadow: 0 12px 24px rgba(13, 142, 80, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; } body.site-home .hero-actions .top-direct-contact--call { color: #17324a !important; background: linear-gradient(180deg, rgba(242, 250, 255, 0.94), rgba(203, 228, 245, 0.9)) !important; border-color: rgba(105, 174, 224, 0.7) !important; } } @media (hover: hover) and (pointer: fine) { body.site-home :is( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns ):hover { box-shadow: var(--rs-pro-card-shadow-hover) !important; filter: saturate(1.03) brightness(1.015) !important; } body.site-home :is( .hero-actions .top-direct-contact, .button, .button-primary, .contact-tab, .product-card__link ):hover { transform: translateY(-1px) !important; filter: saturate(1.05) brightness(1.02) !important; } } @media screen and (max-width: 680px) { body.site-home { --rs-pro-section-gap: 34px; --rs-pro-card-gap: 12px; --rs-pro-section-radius: 22px; --rs-pro-card-radius: 16px; } body.site-home .content-section { width: min(calc(100% - 20px), var(--rs-pro-page-width)) !important; padding: 20px 16px !important; } body.site-home .section-heading, body.site-home .section-heading--compact { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 16px !important; } body.site-home .section-heading h2, body.site-home .contact-copy h2 { max-width: 100% !important; font-size: clamp(1.38rem, 6.2vw, 2rem) !important; } body.site-home .section-heading > p:not(.section-kicker) { max-width: 100% !important; font-size: 0.94rem !important; } body.site-home .hero-copy.tech-panel h1 { max-width: 100% !important; font-size: clamp(1.45rem, 6.2vw, 2.08rem) !important; } body.site-home .hero-actions { grid-template-columns: 1fr !important; gap: 10px !important; } body.site-home .hero-actions .top-direct-contact--whatsapp { order: -1 !important; } body.site-home .hero-actions .top-direct-contact { width: 100% !important; min-height: 50px !important; } body.site-home :is(.homepage-media-strip, .project-grid, .process-grid, .service-grid, .product-showroom__grid) { grid-template-columns: 1fr !important; } body.site-home .homepage-media-card { display: grid !important; grid-template-columns: 86px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; } body.site-home .homepage-media-card__image { grid-row: 1 / span 3 !important; min-height: 76px !important; } body.site-home .homepage-media-card__image img { min-height: 76px !important; } body.site-home .homepage-media-card :is(.card-code, h3, p:last-child) { grid-column: 2 !important; } body.site-home .faq-item summary { padding: 15px 14px !important; } body.site-home .faq-item p { padding: 0 14px 15px !important; } body.site-home .footer-columns { grid-template-columns: 1fr !important; gap: 18px !important; padding: 22px 18px !important; } } /* Desktop: hover-glas en bewegende glans volledig uit. */ @media (hover: hover) and (pointer: fine) { body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher ):hover, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher ):focus-within, body.site-home [data-tilt]:hover, body.site-home [data-tilt]:focus-within { transform: none !important; filter: none !important; } body.site-home :is( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns ):hover, body.site-home :is( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher, .footer-columns ):focus-within { box-shadow: var(--rs-pro-card-shadow, 0 16px 34px rgba(9, 18, 30, 0.16)) !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover, body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within { background-position: -160% 0, center center, center center, center center !important; } body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover > .panel-corners, body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within > .panel-corners, body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher ):hover::after, body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel, .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher ):focus-within::after { animation: none !important; background-position: -160% 0, 0 0, 0 0 !important; } body.site-home .hero-copy.tech-panel:hover > .panel-corners::before, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before { animation: none !important; opacity: 0 !important; transform: translateX(-120%) skewX(-10deg) !important; } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):hover::before, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):focus-within::before { border-color: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; box-shadow: 0 30px 70px rgba(7, 13, 22, 0.22) !important; } body.site-home .site-nav a:hover .nav-sheen, body.site-home .site-nav a:focus-visible .nav-sheen { animation: none !important; opacity: 0 !important; transform: none !important; } } /* Mobile compact herstel: kaders minder uitgerekt, desktop blijft onaangeraakt. */ @media screen and (max-width: 680px) { body.site-home { --rs-pro-section-gap: 26px; --rs-pro-card-gap: 10px; --rs-pro-section-radius: 18px; --rs-pro-card-radius: 14px; } body.site-home .site-header .header-shell:not(.header-shell--portal), body.site-home .hero-shell, body.site-home .content-section, body.site-home .contact-switcher, body.site-home .footer-columns.tech-panel { width: min(calc(100% - 28px), 520px) !important; max-width: 520px !important; } body.site-home .hero-section + .content-section, body.site-home .content-section + .content-section { margin-top: 26px !important; } body.site-home .content-section { padding: 16px 14px !important; border-radius: var(--rs-pro-section-radius) !important; } body.site-home .section-heading, body.site-home .section-heading--compact { gap: 6px !important; margin-bottom: 12px !important; } body.site-home .section-heading h2, body.site-home .contact-copy h2 { max-width: 16ch !important; font-size: clamp(1.24rem, 5.2vw, 1.72rem) !important; line-height: 1.08 !important; } body.site-home .section-heading > p:not(.section-kicker), body.site-home .contact-copy > p, body.site-home .appointment-intro { font-size: 0.88rem !important; line-height: 1.35 !important; } body.site-home .hero-copy.tech-panel { padding: 18px 14px 16px !important; border-radius: var(--rs-pro-section-radius) !important; } body.site-home .hero-copy.tech-panel h1 { font-size: clamp(1.28rem, 5.4vw, 1.72rem) !important; line-height: 1.06 !important; margin-bottom: 10px !important; } body.site-home .hero-copy.tech-panel .hero-text, body.site-home .hero-copy.tech-panel .hero-install-note, body.site-home .hero-copy.tech-panel .hero-availability-note { font-size: 0.88rem !important; line-height: 1.35 !important; } body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { min-height: 0 !important; padding: 11px 12px 12px !important; border-radius: var(--rs-pro-card-radius) !important; } body.site-home .hero-copy.tech-panel .hero-service-list ul { gap: 4px !important; } body.site-home .hero-copy.tech-panel .hero-service-list li { font-size: 0.88rem !important; line-height: 1.2 !important; } body.site-home .hero-actions { gap: 9px !important; margin-top: 10px !important; } body.site-home .hero-actions .top-direct-contact { min-height: 44px !important; } body.site-home :is( .homepage-media-strip, .project-grid, .process-grid, .service-grid, .product-showroom__grid, .faq-list ) { gap: var(--rs-pro-card-gap) !important; } body.site-home :is( .homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item ) { min-height: 0 !important; padding: 12px !important; border-radius: var(--rs-pro-card-radius) !important; } body.site-home .homepage-media-card { grid-template-columns: 70px minmax(0, 1fr) !important; column-gap: 10px !important; } body.site-home .homepage-media-strip--compact { display: flex !important; grid-template-columns: none !important; overflow-x: auto !important; gap: var(--rs-pro-card-gap) !important; padding-bottom: 4px !important; scroll-snap-type: x proximity !important; } body.site-home .homepage-media-strip--compact .homepage-media-card { flex: 0 0 min(78vw, 300px) !important; width: min(78vw, 300px) !important; min-width: min(78vw, 300px) !important; max-width: 300px !important; scroll-snap-align: start !important; } body.site-home .homepage-media-card__image, body.site-home .homepage-media-card__image img { min-height: 62px !important; } body.site-home .project-card { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; align-items: start !important; column-gap: 10px !important; } body.site-home .project-card .project-media { grid-column: 1 !important; grid-row: 1 / span 4 !important; min-height: 68px !important; height: 68px !important; } body.site-home .project-card :is(.project-label, h3, p, .project-hovermeta) { grid-column: 2 !important; } body.site-home .project-card .project-hovermeta { display: none !important; } body.site-home .process-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: start !important; column-gap: 10px !important; } body.site-home .process-card > span { grid-column: 1 !important; grid-row: 1 / span 2 !important; } body.site-home .process-card h3, body.site-home .process-card p { grid-column: 2 !important; } body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) h3 { margin-bottom: 4px !important; font-size: 0.96rem !important; line-height: 1.16 !important; } body.site-home :is(.homepage-media-card, .project-card, .process-card, .product-card) p { margin-bottom: 0 !important; font-size: 0.82rem !important; line-height: 1.3 !important; } body.site-home .faq-item summary { padding: 12px !important; } body.site-home .faq-item p { padding: 0 12px 12px !important; font-size: 0.86rem !important; line-height: 1.35 !important; } body.site-home .footer-columns { gap: 14px !important; padding: 18px 14px !important; } } /* Strak zwart getint glas: donkere randen, midden blijft transparant. */ @media screen { body.site-home { --rs-black-glass-edge: rgba(0, 0, 0, 0.54); --rs-black-glass-edge-soft: rgba(0, 0, 0, 0.24); --rs-black-glass-glow: rgba(255, 255, 255, 0.2); --rs-black-glass-shadow: rgba(0, 0, 0, 0.24); } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ), body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ):hover, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ):focus-within { border-color: var(--rs-black-glass-edge) !important; background-color: transparent !important; box-shadow: 0 22px 54px var(--rs-black-glass-shadow), inset 0 0 0 1px var(--rs-black-glass-glow), inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 18px 22px -23px rgba(255, 255, 255, 0.34), inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58), inset 18px 0 24px -28px rgba(0, 0, 0, 0.5), inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important; transform: none !important; filter: none !important; } body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ), body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ):hover, body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel, .tech-panel, .hero-service-list ):focus-within { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.18)) !important; } body.site-home .site-header .header-shell, body.site-home .site-header .header-shell:hover, body.site-home .site-header .header-shell:focus-within { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus-within { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } body.site-home .hero-copy.tech-panel .hero-service-list, body.site-home .hero-copy.tech-panel .hero-service-list:hover, body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.16)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)) !important; background-color: transparent !important; border-color: var(--rs-black-glass-edge) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.16), inset 0 15px 20px -24px rgba(255, 255, 255, 0.28), inset 0 -15px 20px -22px rgba(0, 0, 0, 0.5) !important; } body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel )::before, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):hover::before, body.site-home :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel ):focus-within::before { border-color: rgba(0, 0, 0, 0.42) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 24%, transparent 78%, rgba(0, 0, 0, 0.14)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.18)) !important; box-shadow: 0 32px 72px rgba(0, 0, 0, 0.24) !important; } body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel )::after, body.site-home .tech-panel > .panel-corners, body.site-home .site-header .header-shell > .panel-corners, body.site-home .hero-copy.tech-panel > .panel-corners, body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel ):hover::after, body.site-home .tech-panel:hover > .panel-corners, body.site-home .site-header .header-shell:hover > .panel-corners, body.site-home .hero-copy.tech-panel:hover > .panel-corners, body.site-home :is( .content-section, .portal-section, .footer-columns.tech-panel ):focus-within::after, body.site-home .tech-panel:focus-within > .panel-corners, body.site-home .site-header .header-shell:focus-within > .panel-corners, body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 17%, transparent 82%, rgba(0, 0, 0, 0.18)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.18)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 18px 26px -28px rgba(255, 255, 255, 0.34), inset 0 -18px 26px -26px rgba(0, 0, 0, 0.62) !important; animation: none !important; opacity: 1 !important; } } /* FINAL CONTENT GLASS v1: panelen lichter houden, topheaders niet aanpassen. */ @media screen { html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(0, 0, 0, 0.32) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 5%, rgba(255, 255, 255, 0.1)), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.11), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.11)) !important; background-color: transparent !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.08), inset 0 18px 22px -26px rgba(255, 255, 255, 0.34), inset 0 -18px 24px -28px rgba(0, 0, 0, 0.28), inset 18px 0 24px -30px rgba(0, 0, 0, 0.18), inset -18px 0 24px -30px rgba(0, 0, 0, 0.18) !important; filter: none !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before { border-color: rgba(0, 0, 0, 0.2) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 24%, transparent 78%, rgba(0, 0, 0, 0.07)), linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.08)) !important; box-shadow: 0 22px 52px rgba(0, 0, 0, 0.14) !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.08), inset 0 18px 26px -30px rgba(255, 255, 255, 0.3), inset 0 -18px 26px -30px rgba(0, 0, 0, 0.24) !important; opacity: 1 !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within { border-color: rgba(0, 0, 0, 0.28) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 74%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.09), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.09)) !important; background-color: transparent !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.07), inset 0 16px 22px -28px rgba(255, 255, 255, 0.34), inset 0 -16px 22px -28px rgba(0, 0, 0, 0.2) !important; filter: none !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.08), inset 0 18px 26px -30px rgba(255, 255, 255, 0.28), inset 0 -18px 26px -30px rgba(0, 0, 0, 0.22) !important; opacity: 1 !important; } } /* FINAL CONTENT GLASS v2: alleen subtiele donkere randen, midden blijft helder. */ @media screen { html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(0, 0, 0, 0.24) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-glass-tint-color, #9fb5c7) 3%, rgba(255, 255, 255, 0.08)), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.035)), linear-gradient(90deg, rgba(0, 0, 0, 0.045), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.045)) !important; background-color: transparent !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 20px -28px rgba(255, 255, 255, 0.28), inset 0 -16px 20px -30px rgba(0, 0, 0, 0.12), inset 16px 0 22px -32px rgba(0, 0, 0, 0.1), inset -16px 0 22px -32px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before { border-color: rgba(0, 0, 0, 0.16) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%, transparent 82%, rgba(0, 0, 0, 0.035)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.04)) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.035)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within { border-color: rgba(0, 0, 0, 0.22) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 26%, transparent 78%, rgba(0, 0, 0, 0.035)), linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.035)) !important; background-color: transparent !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.04), inset 0 14px 20px -30px rgba(255, 255, 255, 0.28), inset 0 -14px 20px -32px rgba(0, 0, 0, 0.08) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.035)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.24), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel :is(p, li), html body.site-home .footer-columns.tech-panel :is(p, li) { color: rgba(34, 58, 80, 0.78) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) !important; } } /* FINAL CONTENT GLASS v3: witte basisplaat onder gewone panelen. */ @media screen { html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: rgba(0, 0, 0, 0.24) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.055)), linear-gradient(90deg, rgba(0, 0, 0, 0.055), transparent 11%, transparent 89%, rgba(0, 0, 0, 0.055)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.82), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.1), transparent 34%, rgba(255, 255, 255, 0.16) 72%), linear-gradient(180deg, rgba(250, 253, 255, 0.88), rgba(229, 241, 249, 0.8)) !important; background-color: rgba(241, 248, 253, 0.82) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.055), inset 0 18px 24px -30px rgba(255, 255, 255, 0.36), inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14), inset 18px 0 24px -34px rgba(0, 0, 0, 0.11), inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::before { border-color: rgba(0, 0, 0, 0.17) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11) !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 22%, transparent 84%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.035)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.17), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within { border-color: rgba(0, 0, 0, 0.22) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(236, 246, 253, 0.74)) !important; background-color: rgba(241, 248, 253, 0.78) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 14px 20px -30px rgba(255, 255, 255, 0.34), inset 0 -14px 20px -32px rgba(0, 0, 0, 0.1) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within > .panel-corners { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; } } /* FINAL TOPBAR TUNE v1: login als tekst, CTA's niet tegen de rand. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #d7e9f8 !important; -webkit-text-fill-color: #d7e9f8 !important; font-size: 0.74rem !important; font-weight: 850 !important; letter-spacing: 0.14em !important; line-height: 1.1 !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:focus-visible { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 4px !important; outline: 0 !important; } } @media screen and (min-width: 1601px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: clamp(110px, 7vw, 210px) !important; } } @media screen and (min-width: 900px) and (max-width: 1600px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: clamp(34px, 4vw, 72px) !important; } } @media screen and (max-width: 680px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-height: 0 !important; margin-inline: auto !important; } } /* FINAL topbalk polish: wint van alle oudere toolbar- en knopregels. */ @media screen { body.site-home .top-toolbar { position: relative !important; z-index: 40 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.22) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.58) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 34%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.2)), linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.08) 72%, rgba(0, 0, 0, 0.24)) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } body.site-home .top-toolbar::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0)), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important; opacity: 0.7 !important; } body.site-home .top-toolbar__inner { position: relative !important; z-index: 1 !important; min-height: 48px !important; width: min(calc(100% - 24px), 1680px) !important; padding: 6px 12px !important; gap: 14px !important; } body.site-home .toolbar-group { align-items: center !important; gap: 10px !important; } body.site-home .toolbar-group--right { gap: 11px !important; } body.site-home .toolbar-group--right > a:not(.top-direct-contact) { min-height: 30px !important; display: inline-flex !important; align-items: center !important; color: #1c3449 !important; text-decoration: none !important; font-size: 0.74rem !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) !important; opacity: 0.9 !important; } body.site-home .toolbar-group a:not(:last-child)::after, body.site-home .toolbar-group span:not(:last-child)::after { width: 1px !important; height: 22px !important; right: -6px !important; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent) !important; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.24) !important; } body.site-home .top-login-link, body.site-home .top-toolbar .top-direct-contact, body.site-home .rs-language-button { min-height: 34px !important; border: 1px solid rgba(0, 0, 0, 0.5) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.18) 48%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important; color: #142c42 !important; box-shadow: 0 9px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important; text-decoration: none !important; transform: none !important; filter: none !important; } body.site-home .top-login-link { min-width: 118px !important; padding: 0 20px !important; font-size: 0.82rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } body.site-home .top-toolbar .top-direct-contact { min-width: 132px !important; padding: 0 18px !important; font-size: 0.78rem !important; font-weight: 900 !important; letter-spacing: 0.02em !important; } body.site-home .top-toolbar .top-direct-contact--call { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 255, 0.34) 54%, rgba(0, 0, 0, 0.08)), linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.16)) !important; } body.site-home .top-toolbar .top-direct-contact--whatsapp { border-color: rgba(0, 0, 0, 0.54) !important; color: #ffffff !important; background: linear-gradient(180deg, rgba(72, 226, 137, 0.98), rgba(20, 174, 92, 0.94) 54%, rgba(7, 95, 49, 0.98)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 10px 24px rgba(7, 116, 62, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important; } body.site-home .rs-language-switcher { top: 9px !important; left: 12px !important; gap: 6px !important; padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.48) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.1)), linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(0, 0, 0, 0.34) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; } body.site-home .rs-language-button { min-width: 92px !important; padding: 5px 11px 5px 8px !important; font-size: 0.74rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; } body.site-home .rs-language-button.is-active { border-color: rgba(0, 0, 0, 0.58) !important; color: #102b42 !important; } body.site-home .rs-lang-flag { border: 1px solid rgba(0, 0, 0, 0.26) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } } @media screen and (min-width: 900px) { body.site-home .toolbar-group--brand { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } } @media screen and (max-width: 680px) { body.site-home .top-toolbar { padding-top: 42px !important; } body.site-home .top-toolbar__inner { min-height: auto !important; padding: 5px 10px 8px !important; } body.site-home .toolbar-group--right { gap: 8px !important; } body.site-home .toolbar-group--right > a:not(.top-direct-contact) { display: none !important; } body.site-home .top-login-link { min-width: 112px !important; min-height: 34px !important; } body.site-home .top-toolbar .top-direct-contact { min-width: 0 !important; min-height: 42px !important; flex: 1 1 calc(50% - 8px) !important; padding-inline: 12px !important; } body.site-home .rs-language-switcher { top: 8px !important; left: 8px !important; transform: scale(0.82) !important; transform-origin: top left !important; } } /* REPAIR v2 FINAL: editor-tint wint als laatste, zonder vaste donkere laag. */ @media screen { html body.site-home { --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, rgba(0, 0, 0, 0.54) 42%); --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 54%, rgba(0, 0, 0, 0.24) 46%); } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { border-color: var(--rs-repair-glass-edge) !important; background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.15)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 18px 22px -23px rgba(255, 255, 255, 0.34), inset 0 -18px 24px -24px rgba(0, 0, 0, 0.58), inset 18px 0 24px -28px rgba(0, 0, 0, 0.5), inset -18px 0 24px -28px rgba(0, 0, 0, 0.5) !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { border-color: var(--rs-repair-glass-edge) !important; background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-soft, transparent), transparent 22%, transparent 80%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.16)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.74), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.08), transparent 34%, rgba(255, 255, 255, 0.14) 72%), linear-gradient(180deg, rgba(250, 253, 255, 0.78), rgba(229, 241, 249, 0.7)) !important; background-color: rgba(241, 248, 253, 0.64) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within, html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 246, 253, 0.66)) !important; background-color: rgba(241, 248, 253, 0.68) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: grid !important; grid-template-columns: minmax(230px, 1fr) auto minmax(560px, 1fr) !important; align-items: center !important; justify-content: stretch !important; gap: 18px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: static !important; grid-column: 2 !important; justify-self: center !important; transform: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #d7e9f8 !important; -webkit-text-fill-color: #d7e9f8 !important; font-size: 0.74rem !important; font-weight: 850 !important; letter-spacing: 0.12em !important; line-height: 1.1 !important; text-transform: uppercase !important; text-decoration: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: 3 !important; justify-self: end !important; justify-content: flex-end !important; margin-left: 0 !important; margin-right: clamp(80px, 6vw, 150px) !important; } } @media screen and (min-width: 900px) and (max-width: 1300px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { grid-template-columns: minmax(180px, 1fr) auto minmax(400px, 1fr) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: clamp(34px, 4vw, 74px) !important; } } @media screen and (max-width: 680px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; justify-content: center !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { order: 2 !important; flex: 0 0 100% !important; width: 100% !important; margin-right: 0 !important; justify-content: center !important; } } /* REPAIR v3 FINAL: topmenu terug symmetrisch, login exact midden. */ @media screen and (min-width: 681px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: absolute !important; left: 50% !important; top: 50% !important; z-index: 3 !important; transform: translate(-50%, -50%) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-left: auto !important; margin-right: clamp(118px, 7.5vw, 190px) !important; justify-content: flex-end !important; } } @media screen and (min-width: 681px) and (max-width: 1300px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { margin-right: clamp(42px, 5vw, 86px) !important; } } /* REPAIR v4 FINAL: footer-cornerlaag mag geen extra kolom worden. */ @media screen { html body.site-home .site-footer .footer-columns.tech-panel > .panel-corners { display: none !important; } } /* REPAIR v5 FINAL: header 1 en 2 gebruiken dezelfde lichte glasplaat als de rest. */ @media screen { html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within, html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.055), inset 0 18px 24px -30px rgba(255, 255, 255, 0.36), inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14), inset 18px 0 24px -34px rgba(0, 0, 0, 0.11), inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important; } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { content: "" !important; position: absolute !important; inset: 12px -22px -22px !important; z-index: -1 !important; display: block !important; border: 1px solid var(--rs-repair-glass-edge-soft) !important; border-radius: 30px !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.38), transparent 42%), linear-gradient(180deg, rgba(250, 253, 255, 0.18), rgba(229, 241, 249, 0.12)) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11) !important; transform: none !important; filter: none !important; opacity: 1 !important; } html body.site-home .site-header .header-shell::after, html body.site-home .site-header .header-shell:hover::after, html body.site-home .site-header .header-shell:focus-within::after, html body.site-home .hero-copy.tech-panel::after, html body.site-home .hero-copy.tech-panel:hover::after, html body.site-home .hero-copy.tech-panel:focus-within::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 22%, transparent 84%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.035)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.17), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; opacity: 1 !important; } html body.site-home .site-header .header-shell > .panel-corners, html body.site-home .hero-copy.tech-panel > .panel-corners { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, transparent 84%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; opacity: 1 !important; } } /* REPAIR v6 FINAL: brede headerplaten houden hetzelfde glas zonder horizontale overscroll. */ @media screen { html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { inset: 12px -14px -22px !important; } } @media screen and (min-width: 1500px) { html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { inset: 12px -22px -22px !important; } } @media screen and (max-width: 680px) { html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { inset: 10px -8px -16px !important; border-radius: 24px !important; } } /* REPAIR v7 FINAL: animaties mogen geen horizontale scrollbar maken. */ @media screen { html, html body.site-home { max-width: 100% !important; overflow-x: clip !important; } } @supports not (overflow: clip) { @media screen { html, html body.site-home { overflow-x: hidden !important; } } } /* REPAIR v8 FINAL: glasrand en backplate komen nu uit de Page editor. */ @media screen { html body.site-home { --rs-editor-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-editor-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-editor-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-editor-glass-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent); --rs-editor-glass-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-editor-glass-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); --rs-repair-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), rgba(0, 0, 0, 0.42)); --rs-repair-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), rgba(0, 0, 0, 0.18)); } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: var(--rs-repair-glass-edge-soft) !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before { border-color: var(--rs-editor-glass-edge) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, var(--rs-editor-glass-backplate-strong), transparent 42%), linear-gradient(180deg, var(--rs-editor-glass-backplate-mid), var(--rs-editor-glass-backplate-soft)) !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section) > .panel-corners, html body.site-home :is(.content-section, .portal-section) .tech-panel > .panel-corners { background: linear-gradient(180deg, var(--rs-editor-glass-backplate-soft), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important; } html body.site-home :is(.content-section, .portal-section) .tech-panel, html body.site-home :is(.content-section, .portal-section) .tech-panel:hover, html body.site-home :is(.content-section, .portal-section) .tech-panel:focus-within, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card), html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):hover, html body.site-home .footer-columns.tech-panel :is(.tech-panel, .contact-card, .portal-section-card):focus-within, html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within { border-color: var(--rs-editor-glass-edge-soft) !important; background: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 26%, transparent 80%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), linear-gradient(135deg, color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 58%, rgba(255, 255, 255, 0.22)), color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 42%, transparent)) !important; background-color: color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 22%, transparent) !important; } } /* REPAIR v10 FINAL: banner 1 en 2 krijgen geen mouse-over glasbeweging meer. */ @media screen { html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within, html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { filter: none !important; transform: none !important; transition: none !important; border-color: var(--rs-repair-glass-edge-soft) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.055), inset 0 18px 24px -30px rgba(255, 255, 255, 0.36), inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14), inset 18px 0 24px -34px rgba(0, 0, 0, 0.11), inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important; } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-top-banner-image) center center / cover no-repeat !important; background-position: center center, center center, center center, center center, center center, center center !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 27%, transparent 82%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; background-position: center center, center center, center center, center center, center center, center center !important; } html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .site-header .header-shell::after, html body.site-home .site-header .header-shell:hover::after, html body.site-home .site-header .header-shell:focus-within::after, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before, html body.site-home .hero-copy.tech-panel::after, html body.site-home .hero-copy.tech-panel:hover::after, html body.site-home .hero-copy.tech-panel:focus-within::after { animation: none !important; filter: none !important; transform: none !important; transition: none !important; } html body.site-home .site-header .header-shell > .panel-corners, html body.site-home .site-header .header-shell:hover > .panel-corners, html body.site-home .site-header .header-shell:focus-within > .panel-corners, html body.site-home .hero-copy.tech-panel > .panel-corners, html body.site-home .hero-copy.tech-panel:hover > .panel-corners, html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { animation: none !important; background: linear-gradient(180deg, var(--rs-editor-glass-backplate-soft), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important; background-position: 0 0, 0 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 2px rgba(0, 0, 0, 0.045), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* REPAIR v11 FINAL: alle tekstkleuren in de tweede banner komen uit de Page editor. */ @media screen { html body.site-home .hero-copy.tech-panel h1, html body.site-home .hero-copy.tech-panel:hover h1, html body.site-home .hero-copy.tech-panel:focus-within h1 { color: var(--rs-home-hero-title-text, #eef8ff) !important; } html body.site-home .hero-copy.tech-panel .hero-text, html body.site-home .hero-copy.tech-panel .hero-install-note, html body.site-home .hero-copy.tech-panel .hero-availability-note, html body.site-home .hero-copy.tech-panel:hover .hero-text, html body.site-home .hero-copy.tech-panel:hover .hero-install-note, html body.site-home .hero-copy.tech-panel:hover .hero-availability-note, html body.site-home .hero-copy.tech-panel:focus-within .hero-text, html body.site-home .hero-copy.tech-panel:focus-within .hero-install-note, html body.site-home .hero-copy.tech-panel:focus-within .hero-availability-note { color: var(--rs-home-hero-body-text, #d9ebf7) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home .hero-copy.tech-panel .hero-service-list li { color: var(--rs-home-hero-card-text, #213c57) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list strong { color: var(--rs-home-hero-card-title-text, #173a62) !important; } html body.site-home .hero-actions .top-direct-contact--call, html body.site-home .hero-actions .top-direct-contact--call:hover, html body.site-home .hero-actions .top-direct-contact--call:focus-visible { color: var(--rs-home-hero-call-text, #17324b) !important; -webkit-text-fill-color: var(--rs-home-hero-call-text, #17324b) !important; } html body.site-home .hero-actions .top-direct-contact--whatsapp, html body.site-home .hero-actions .top-direct-contact--whatsapp:hover, html body.site-home .hero-actions .top-direct-contact--whatsapp:focus-visible, html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact, html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact:hover, html body.site-home .hero-actions a[href*="wa.me"].top-direct-contact:focus-visible { color: var(--rs-home-hero-whatsapp-text, #ffffff) !important; -webkit-text-fill-color: var(--rs-home-hero-whatsapp-text, #ffffff) !important; } } /* REPAIR v12 FINAL: geen glas-hover meer, randkleur en randdikte reageren stabiel vanuit de editor. */ @media screen { html body.site-home { --rs-editor-glass-edge-hard: var(--rs-home-glass-edge-color, #c6d0d9); --rs-editor-glass-edge-line: var(--rs-editor-glass-edge-hard); --rs-editor-glass-edge-fill: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 18%, transparent); --rs-editor-glass-edge-shadow: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 34%, transparent); --rs-editor-glass-corner-line: color-mix(in srgb, var(--rs-editor-glass-edge-hard) 28%, transparent); } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within { animation: none !important; border-color: var(--rs-editor-glass-edge-line) !important; filter: none !important; outline: 0 !important; transform: none !important; transition: none !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13), 0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-edge-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 calc(var(--rs-home-glass-edge-width, 3px) + 1px) var(--rs-editor-glass-edge-fill), inset 0 18px 24px -30px rgba(255, 255, 255, 0.36), inset 0 -18px 24px -32px rgba(0, 0, 0, 0.14), inset 18px 0 24px -34px rgba(0, 0, 0, 0.11), inset -18px 0 24px -34px rgba(0, 0, 0, 0.11) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher), html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within { animation: none !important; border-color: var(--rs-editor-glass-edge-line) !important; filter: none !important; transform: none !important; transition: none !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-edge-fill), inset 0 12px 18px -24px rgba(255, 255, 255, 0.34), inset 0 -12px 18px -24px rgba(0, 0, 0, 0.12) !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { animation: none !important; filter: none !important; transform: none !important; transition: none !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners { animation: none !important; background-position: 0 0, 0 0, 0 0 !important; filter: none !important; transform: none !important; transition: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 var(--rs-home-glass-edge-width, 3px) var(--rs-editor-glass-corner-line), inset 0 16px 24px -32px rgba(255, 255, 255, 0.26), inset 0 -16px 24px -34px rgba(0, 0, 0, 0.1) !important; } html body.site-home .hero-copy.tech-panel > .panel-corners::before, html body.site-home .hero-copy.tech-panel:hover > .panel-corners::before, html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::before, html body.site-home .hero-copy.tech-panel > .panel-corners::after, html body.site-home .hero-copy.tech-panel:hover > .panel-corners::after, html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners::after { animation: none !important; content: none !important; display: none !important; opacity: 0 !important; transform: none !important; transition: none !important; } html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::before, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::before, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after { animation: none !important; opacity: 0 !important; transform: none !important; transition: none !important; } } /* REPAIR v13 FINAL: glastint is alleen een binnenlaag, nooit de backplate of pagina-achtergrond. */ @media screen { html body.site-home { --rs-editor-glass-inner-tint: linear-gradient(180deg, var(--rs-home-glass-tint-strong, transparent), transparent 30%, transparent 78%, var(--rs-home-glass-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-glass-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-glass-tint-soft, transparent)); --rs-editor-glass-neutral-backplate: radial-gradient(circle at 18% 8%, var(--rs-editor-glass-backplate-strong, transparent), transparent 42%), linear-gradient(180deg, var(--rs-editor-glass-backplate-mid, transparent), var(--rs-editor-glass-backplate-soft, transparent)); } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-top-banner-image) center center / cover no-repeat !important; background-position: center center, center center, center center, center center !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; background-position: center center, center center, center center, center center !important; } html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.content-section, .portal-section, .footer-columns.tech-panel):focus-within { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 82%, rgba(0, 0, 0, 0.045)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.72), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.06), transparent 34%, rgba(255, 255, 255, 0.12) 72%) !important; background-color: transparent !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::before, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::before { background: var(--rs-editor-glass-neutral-backplate) !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; background: var(--rs-editor-glass-inner-tint) !important; opacity: 1 !important; pointer-events: none !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners { background: linear-gradient(180deg, var(--rs-editor-glass-backplate-soft, transparent), transparent 22%, transparent 84%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent), transparent 10%, transparent 90%, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 5%, transparent)) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher), html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 26%, transparent 80%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), linear-gradient(135deg, color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 58%, rgba(255, 255, 255, 0.22)), color-mix(in srgb, var(--rs-home-glass-backplate-color, #f1f8fd) 42%, transparent)) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list::after, html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; background: var(--rs-editor-glass-inner-tint) !important; opacity: 1 !important; pointer-events: none !important; } html body.site-home .hero-copy.tech-panel .hero-service-list > *, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher) > * { position: relative !important; z-index: 1 !important; } } /* REPAIR v14 FINAL: rand-slider maakt een zachte fade-rand, geen harde dikke outline. */ @media screen { html body.site-home { --rs-editor-glass-edge-outer: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 78%, transparent); --rs-editor-glass-edge-middle: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 34%, transparent); --rs-editor-glass-edge-inner: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 10%, transparent); --rs-editor-glass-edge-fade-layer: linear-gradient( 180deg, var(--rs-editor-glass-edge-outer) 0, var(--rs-editor-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-editor-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 10px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 10px), var(--rs-editor-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-editor-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-editor-glass-edge-outer) 100% ), linear-gradient( 90deg, var(--rs-editor-glass-edge-outer) 0, var(--rs-editor-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-editor-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 10px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 10px), var(--rs-editor-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-editor-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-editor-glass-edge-outer) 100% ); } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel), html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within { border-color: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 58%, transparent) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list, html body.site-home .hero-copy.tech-panel .hero-service-list:hover, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher), html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within { border-color: color-mix(in srgb, var(--rs-editor-glass-edge-hard, #c6d0d9) 54%, transparent) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel) > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover > .panel-corners, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within > .panel-corners { background: var(--rs-editor-glass-edge-fade-layer) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; } html body.site-home .hero-copy.tech-panel .hero-service-list::after, html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after { background: var(--rs-editor-glass-edge-fade-layer), var(--rs-editor-glass-inner-tint) !important; } } /* REPAIR v15 FINAL: ook de glasplaat zelf krijgt een randfade; het midden blijft open. */ @media screen { html body.site-home { --rs-editor-glass-tint-outer: var(--rs-home-glass-tint-strong, transparent); --rs-editor-glass-tint-middle: var(--rs-home-glass-tint-mid, transparent); --rs-editor-glass-tint-inner: var(--rs-home-glass-tint-soft, transparent); --rs-editor-glass-inner-tint: linear-gradient( 180deg, var(--rs-editor-glass-tint-outer) 0, var(--rs-editor-glass-tint-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-editor-glass-tint-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 14px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 14px), var(--rs-editor-glass-tint-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-editor-glass-tint-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-editor-glass-tint-outer) 100% ), linear-gradient( 90deg, var(--rs-editor-glass-tint-outer) 0, var(--rs-editor-glass-tint-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-editor-glass-tint-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 14px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 14px), var(--rs-editor-glass-tint-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-editor-glass-tint-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-editor-glass-tint-outer) 100% ); --rs-editor-glass-surface-fade: var(--rs-editor-glass-edge-fade-layer), var(--rs-editor-glass-inner-tint); } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel)::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):hover::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .footer-columns.tech-panel):focus-within::after, html body.site-home .hero-copy.tech-panel .hero-service-list::after, html body.site-home .hero-copy.tech-panel .hero-service-list:hover::after, html body.site-home .hero-copy.tech-panel .hero-service-list:focus-within::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after, html body.site-home :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after { background: var(--rs-editor-glass-surface-fade) !important; opacity: 1 !important; } } /* REPAIR v16 FINAL: foto/header tint en tekstkader tint zijn gescheiden. */ @media screen { html body.site-home { --rs-editor-photo-inner-tint: linear-gradient(180deg, var(--rs-home-photo-tint-strong, transparent), transparent 30%, transparent 78%, var(--rs-home-photo-tint-mid, transparent)), linear-gradient(90deg, var(--rs-home-photo-tint-soft, transparent), transparent 12%, transparent 88%, var(--rs-home-photo-tint-soft, transparent)); } html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel)::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):hover::after, html body.site-home :is(.site-header .header-shell, .hero-copy.tech-panel):focus-within::after { background: var(--rs-editor-glass-edge-fade-layer), var(--rs-editor-photo-inner-tint) !important; } } /* REPAIR v17 FINAL: geen horizontale uitsteeksels bij de ronde headerhoeken. */ @media screen { html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { top: 22px !important; border-top-color: transparent !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1) !important; } html body.site-home .site-header .header-shell > .panel-corners, html body.site-home .site-header .header-shell:hover > .panel-corners, html body.site-home .site-header .header-shell:focus-within > .panel-corners, html body.site-home .hero-copy.tech-panel > .panel-corners, html body.site-home .hero-copy.tech-panel:hover > .panel-corners, html body.site-home .hero-copy.tech-panel:focus-within > .panel-corners { overflow: hidden !important; clip-path: inset(0 round inherit) !important; } } /* REPAIR v18 FINAL: de externe backplate van header 1/2 tekende losse lijntjes buiten de radius. */ @media screen { html body.site-home .site-header .header-shell::before, html body.site-home .site-header .header-shell:hover::before, html body.site-home .site-header .header-shell:focus-within::before, html body.site-home .hero-copy.tech-panel::before, html body.site-home .hero-copy.tech-panel:hover::before, html body.site-home .hero-copy.tech-panel:focus-within::before { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; background: none !important; } } /* REPAIR v19 FINAL: bovenste headerhoogte komt uit de Page editor en de foto blijft onvervormd. */ @media screen { body.site-home .site-header .header-shell, body.site-home .site-header .header-shell:hover, body.site-home .site-header .header-shell:focus, body.site-home .site-header .header-shell:focus-within { height: var(--rs-home-top-header-height, 320px) !important; min-height: var(--rs-home-top-header-height, 320px) !important; max-height: var(--rs-home-top-header-height, 320px) !important; background-position: center center, center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; } } @media screen and (max-width: 680px) { body.site-home .site-header .header-shell, body.site-home .site-header .header-shell:hover, body.site-home .site-header .header-shell:focus, body.site-home .site-header .header-shell:focus-within { height: auto !important; min-height: var(--rs-home-top-header-height-mobile, 230px) !important; max-height: none !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; } } /* REPAIR v20 FINAL: header 1 en 2 schalen met foto, glaslaag en randfade als een geheel. */ @media screen { html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus, html body.site-home .site-header .header-shell:focus-within { height: var(--rs-home-top-header-height, 455px) !important; min-height: var(--rs-home-top-header-height, 455px) !important; max-height: var(--rs-home-top-header-height, 455px) !important; overflow: hidden !important; isolation: isolate !important; background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-top-banner-image) center top / 100% auto no-repeat !important; background-position: center center, center center, center center, center top !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus, html body.site-home .hero-copy.tech-panel:focus-within { height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important; min-height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important; max-height: clamp(360px, 36vw, var(--rs-home-second-header-height, 455px)) !important; overflow: hidden !important; isolation: isolate !important; border-radius: 30px !important; background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.05), transparent 34%, rgba(255, 255, 255, 0.1) 72%), var(--rs-home-bottom-banner-image) center top / 100% auto no-repeat !important; background-position: center center, center center, center center, center top !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; } html body.site-home .hero-copy.tech-panel .hero-photo-bg { inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; background: var(--rs-home-bottom-banner-image) center top / 100% auto no-repeat !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home .site-header .header-shell::after, html body.site-home .site-header .header-shell:hover::after, html body.site-home .site-header .header-shell:focus-within::after, html body.site-home .hero-copy.tech-panel::after, html body.site-home .hero-copy.tech-panel:hover::after, html body.site-home .hero-copy.tech-panel:focus-within::after { content: "" !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 1 !important; display: block !important; border-radius: inherit !important; pointer-events: none !important; background: var(--rs-editor-glass-edge-fade-layer), var(--rs-editor-photo-inner-tint) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home .site-header .header-shell > :not(.panel-corners), html body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 680px) { html body.site-home .site-header .header-shell, html body.site-home .site-header .header-shell:hover, html body.site-home .site-header .header-shell:focus, html body.site-home .site-header .header-shell:focus-within { height: auto !important; min-height: var(--rs-home-top-header-height-mobile, 292px) !important; max-height: none !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important; } html body.site-home .hero-copy.tech-panel, html body.site-home .hero-copy.tech-panel:hover, html body.site-home .hero-copy.tech-panel:focus, html body.site-home .hero-copy.tech-panel:focus-within { height: auto !important; min-height: var(--rs-home-second-header-height-mobile, 355px) !important; max-height: none !important; border-radius: 24px !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% auto !important; } } /* REPAIR v21: topbalk-kleuren uit de editor winnen overal van oude vaste headerkleuren. */ @media screen { html body:not(.document-page):not(.document-page--print-preview) .top-toolbar { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 38%, #ffffff 62%) 0%, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 72%, #ffffff 28%) 32%, var(--rs-home-toolbar-bg, #9fb5c7) 58%, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 76%, #000000 24%) 100% ), linear-gradient( 90deg, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 74%, #000000 26%), color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 90%, #ffffff 10%) 18%, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 90%, #ffffff 10%) 72%, color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 74%, #000000 26%) ) !important; border-top-color: color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 38%, #ffffff 62%) !important; border-bottom-color: color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 72%, #000000 28%) !important; } html body:not(.document-page):not(.document-page--print-preview) .top-toolbar::before { background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 18%, #ffffff 82%) 42%, color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 8%, #ffffff 92%) 55%, transparent ), linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 52%) !important; } html body:not(.document-page):not(.document-page--print-preview) .top-toolbar, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-direct-contact:not(.top-direct-contact--whatsapp), html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .status-pill { color: var(--rs-home-toolbar-text, #17324b) !important; -webkit-text-fill-color: var(--rs-home-toolbar-text, #17324b) !important; } html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(.top-direct-contact), html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span { text-shadow: 0 1px 0 color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 45%, #000000 55%), 0 0 10px color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 26%, transparent 74%) !important; } html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(:last-child)::after, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span:not(:last-child)::after { background: color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 52%, transparent 48%) !important; box-shadow: 1px 0 0 color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 55%, #ffffff 45%) !important; } html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:hover, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link:focus-visible, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(.top-direct-contact):hover, html body:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(.top-direct-contact):focus-visible { color: color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 72%, #ffffff 28%) !important; -webkit-text-fill-color: color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 72%, #ffffff 28%) !important; } html body:where(.portal-page, .booking-page):not(.document-page):not(.document-page--print-preview) .site-header .header-utility, html body:where(.portal-page, .booking-page):not(.document-page):not(.document-page--print-preview) .site-header .portal-session { color: var(--rs-home-toolbar-text, #17324b) !important; } html body:where(.portal-page, .booking-page):not(.document-page):not(.document-page--print-preview) .site-header :is( .portal-session__text, .portal-session__text *, .portal-trigger--current, .portal-trigger__eyebrow, .portal-trigger__label, .client-access-link__eyebrow, .client-access-link__label, .portal-header-link, .portal-header-link span, .portal-header-link strong, .portal-blocked-menu__toggle, .portal-blocked-menu__toggle span, .portal-mini-button ) { color: var(--rs-home-toolbar-text, #17324b) !important; -webkit-text-fill-color: var(--rs-home-toolbar-text, #17324b) !important; } } /* REPAIR v22: extra specifiek, zodat site-home/admin/booking topbalken de editorkleur altijd pakken. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar, html body.portal-page:not(.document-page):not(.document-page--print-preview) .top-toolbar, html body.booking-page:not(.document-page):not(.document-page--print-preview) .top-toolbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.04) 62%, rgba(0, 0, 0, 0.2)), linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)), var(--rs-home-toolbar-bg, #9fb5c7) !important; background-color: var(--rs-home-toolbar-bg, #9fb5c7) !important; border-top-color: color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 36%, #ffffff 64%) !important; border-bottom-color: color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 72%, #000000 28%) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar::before, html body.portal-page:not(.document-page):not(.document-page--print-preview) .top-toolbar::before, html body.booking-page:not(.document-page):not(.document-page--print-preview) .top-toolbar::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.06) 55%, transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar :is(.top-login-link, .toolbar-group > a:not(.top-direct-contact--whatsapp), .toolbar-group > span, .status-pill, .status-pill *), html body.portal-page:not(.document-page):not(.document-page--print-preview) .top-toolbar :is(.top-login-link, .toolbar-group > a:not(.top-direct-contact--whatsapp), .toolbar-group > span, .status-pill, .status-pill *), html body.booking-page:not(.document-page):not(.document-page--print-preview) .top-toolbar :is(.top-login-link, .toolbar-group > a:not(.top-direct-contact--whatsapp), .toolbar-group > span, .status-pill, .status-pill *) { color: var(--rs-home-toolbar-text, #17324b) !important; -webkit-text-fill-color: var(--rs-home-toolbar-text, #17324b) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(:last-child)::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span:not(:last-child)::after, html body.portal-page:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(:last-child)::after, html body.portal-page:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span:not(:last-child)::after, html body.booking-page:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > a:not(:last-child)::after, html body.booking-page:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group > span:not(:last-child)::after { background: color-mix(in srgb, var(--rs-home-toolbar-text, #17324b) 54%, transparent 46%) !important; box-shadow: 1px 0 0 color-mix(in srgb, var(--rs-home-toolbar-bg, #9fb5c7) 48%, #ffffff 52%) !important; } html body.portal-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility :is( .portal-session__text, .portal-session__text *, .portal-trigger--current, .portal-trigger--current *, .portal-header-link, .portal-header-link *, .portal-blocked-menu__toggle, .portal-blocked-menu__toggle *, .portal-mini-button ), html body.booking-page:not(.document-page):not(.document-page--print-preview) .site-header .header-utility :is( .portal-session__text, .portal-session__text *, .portal-trigger--current, .portal-trigger--current *, .portal-header-link, .portal-header-link *, .portal-blocked-menu__toggle, .portal-blocked-menu__toggle *, .portal-mini-button ) { color: var(--rs-home-toolbar-text, #17324b) !important; -webkit-text-fill-color: var(--rs-home-toolbar-text, #17324b) !important; } } /* REPAIR v23: voorpagina-panelen dichter bij elkaar zonder glas/kleur te raken. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header { margin-bottom: clamp(12px, 1.6vw, 24px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-section { padding-top: clamp(10px, 1.2vw, 20px) !important; padding-bottom: clamp(16px, 1.6vw, 28px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-section + .content-section, html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section + .content-section { margin-top: clamp(28px, 2.8vw, 42px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section { margin-bottom: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer { margin-top: clamp(30px, 3vw, 46px) !important; } } @media screen and (max-width: 680px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header { margin-bottom: 16px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-section { padding-top: 10px !important; padding-bottom: 16px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-section + .content-section, html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section + .content-section { margin-top: 24px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer { margin-top: 28px !important; } } /* REPAIR v24: glas/backplate van de bovenste twee headers terug, los van de foto. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { position: relative !important; isolation: isolate !important; overflow: visible !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 16px -22px -24px !important; z-index: -1 !important; width: auto !important; height: auto !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-tint-edge, rgba(186, 207, 226, 0.42)) 58%, transparent 42%) !important; border-radius: 30px !important; background: var(--rs-editor-glass-neutral-backplate, radial-gradient(circle at 18% 8%, rgba(241, 248, 253, 0.32), transparent 42%), linear-gradient(180deg, rgba(241, 248, 253, 0.2), rgba(241, 248, 253, 0.12))), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(21, 34, 48, 0.08)) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; border-radius: inherit !important; background: var(--rs-editor-glass-edge-fade-layer), var(--rs-editor-photo-inner-tint), linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 26%, transparent 78%, rgba(0, 0, 0, 0.05)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { position: relative !important; z-index: 2 !important; } } /* REPAIR v25: bovenbalk uitlijnen op dezelfde visuele breedte als de header. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: grid !important; grid-template-columns: minmax(210px, 1fr) auto minmax(300px, 1fr) !important; align-items: center !important; justify-content: normal !important; width: min(calc(100% - 24px), 1640px) !important; min-height: 56px !important; margin-inline: auto !important; padding: 7px clamp(12px, 1.6vw, 28px) !important; gap: clamp(12px, 1.8vw, 28px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: static !important; grid-column: 2 !important; justify-self: center !important; transform: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: 3 !important; justify-self: end !important; margin-left: 0 !important; gap: clamp(10px, 1vw, 14px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: auto !important; min-height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher { z-index: 80 !important; } } @media screen and (max-width: 900px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; padding: 52px 8px 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: auto !important; } } /* REPAIR v26: hero-schaduwen rustiger maken. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel h1, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover h1, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-text, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-install-note, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-availability-note, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover .hero-text, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover .hero-install-note, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover .hero-availability-note, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within .hero-text, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within .hero-install-note, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within .hero-availability-note { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:focus-within { box-shadow: 0 7px 16px rgba(8, 20, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list *, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:hover *, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:focus-within * { text-shadow: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact:focus-visible { text-shadow: none !important; box-shadow: 0 7px 15px rgba(8, 20, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact--whatsapp, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact--whatsapp:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact--whatsapp:focus-visible, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions a[href*="wa.me"].top-direct-contact, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions a[href*="wa.me"].top-direct-contact:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions a[href*="wa.me"].top-direct-contact:focus-visible { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) !important; box-shadow: 0 8px 18px rgba(5, 107, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; } } /* REPAIR v27: bovenbalk vast verdelen zonder de header/glaspanelen te raken. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar { position: sticky !important; top: 0 !important; z-index: 100 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .rs-language-switcher { position: fixed !important; top: 8px !important; left: 12px !important; right: auto !important; z-index: 130 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { display: grid !important; grid-template-columns: minmax(180px, 1fr) auto !important; align-items: center !important; justify-content: normal !important; width: min(calc(100% - 24px), 1640px) !important; min-height: 56px !important; margin-inline: auto !important; padding: 7px 12px 7px 244px !important; gap: 14px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand { position: static !important; grid-column: 1 !important; justify-self: start !important; transform: none !important; width: auto !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .top-login-link { min-width: auto !important; min-height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; white-space: nowrap !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: 2 !important; justify-self: end !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: auto !important; margin-left: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="mailto:"], html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="tel:"]:not(.top-direct-contact) { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right .top-direct-contact { flex: 0 0 auto !important; min-width: 156px !important; margin: 0 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar__inner { grid-template-columns: 1fr !important; justify-items: start !important; min-height: 112px !important; width: 100% !important; padding: 58px 10px 8px 12px !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--brand, html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { grid-column: 1 !important; justify-self: start !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { width: 100% !important; gap: 8px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right .top-direct-contact { min-width: 0 !important; flex: 1 1 0 !important; } } /* REPAIR v28: mail/telefoon blijven op desktop zichtbaar, knoppen blijven op een rij. */ @media screen and (min-width: 1000px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right { max-width: calc(100vw - 380px) !important; overflow: hidden !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="mailto:"], html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right > a[href^="tel:"]:not(.top-direct-contact) { display: inline-flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 190px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .top-toolbar .toolbar-group--right .top-direct-contact { min-width: 150px !important; } } /* REPAIR v29: kaart-/tekstkaders gebruiken een eigen kleur, niet de header glasplaatkleur. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) { --rs-card-glass-color: var(--rs-home-card-backplate-color, #f1f8fd); --rs-card-glass-edge-outer: color-mix(in srgb, var(--rs-card-glass-color) 48%, transparent); --rs-card-glass-edge-middle: color-mix(in srgb, var(--rs-card-glass-color) 18%, transparent); --rs-card-glass-edge-inner: color-mix(in srgb, var(--rs-card-glass-color) 5%, transparent); --rs-card-glass-edge-fade-layer: linear-gradient( 180deg, var(--rs-card-glass-edge-outer) 0, var(--rs-card-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-card-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 12px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 12px), var(--rs-card-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-card-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-card-glass-edge-outer) 100% ), linear-gradient( 90deg, var(--rs-card-glass-edge-outer) 0, var(--rs-card-glass-edge-middle) var(--rs-home-glass-edge-fade-mid, 14px), var(--rs-card-glass-edge-inner) var(--rs-home-glass-edge-fade, 30px), transparent calc(var(--rs-home-glass-edge-fade, 30px) + 12px), transparent calc(100% - var(--rs-home-glass-edge-fade, 30px) - 12px), var(--rs-card-glass-edge-inner) calc(100% - var(--rs-home-glass-edge-fade, 30px)), var(--rs-card-glass-edge-middle) calc(100% - var(--rs-home-glass-edge-fade-mid, 14px)), var(--rs-card-glass-edge-outer) 100% ); } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher), html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover, html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within { border-color: color-mix(in srgb, var(--rs-card-glass-color) 58%, rgba(26, 43, 57, 0.28)) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 26%, transparent 80%, rgba(0, 0, 0, 0.04)), linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), linear-gradient(135deg, color-mix(in srgb, var(--rs-card-glass-color) 64%, rgba(255, 255, 255, 0.34)), color-mix(in srgb, var(--rs-card-glass-color) 28%, transparent)) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher)::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.homepage-media-card, .feature-card, .project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher):focus-within::after { background: var(--rs-card-glass-edge-fade-layer), var(--rs-editor-glass-inner-tint) !important; } } /* REPAIR v30: mobiele voorpagina compact maken zonder desktop/editor styling te wijzigen. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) { overflow-x: clip !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-shell, .hero-copy.tech-panel, .content-section, .contact-layout, .site-footer, .footer-columns ) { width: min(calc(100% - 24px), 430px) !important; max-width: calc(100vw - 24px) !important; margin-left: auto !important; margin-right: auto !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .compact-home-hub, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .homepage-media-strip, .homepage-media-strip--compact, .project-grid, .process-grid, .faq-list, .contact-layout, .footer-columns ) { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; overflow-x: visible !important; padding-left: 0 !important; padding-right: 0 !important; scroll-snap-type: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card, html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip .homepage-media-card { width: 100% !important; min-width: 0 !important; max-width: none !important; scroll-snap-align: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; align-items: center !important; gap: 10px 12px !important; padding: 12px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card__image { grid-row: 1 / span 3 !important; width: 76px !important; min-width: 76px !important; height: 66px !important; min-height: 66px !important; margin: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card__image img { min-height: 66px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card :is(.card-code, h3, p) { min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card > p:last-child { grid-column: 2 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is(.project-card, .process-card, .product-card, .faq-item, .contact-copy, .contact-form, .appointment-form, .contact-switcher) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .process-grid--linked::before { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions { grid-template-columns: 1fr !important; width: 100% !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-actions .top-direct-contact { width: 100% !important; min-width: 0 !important; } } @media screen and (max-width: 480px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card { grid-template-columns: 64px minmax(0, 1fr) !important; padding: 10px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip--compact .homepage-media-card__image { width: 64px !important; min-width: 64px !important; height: 58px !important; min-height: 58px !important; } } /* REPAIR v31: mobiele hero gebruikt normale flow, geen desktop-offsets. */ @media screen and (max-width: 760px) { html body.site-home:not(#rs-mobile-transform-reset):not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel :is( h1, .hero-text, .hero-service-list, .hero-actions, .hero-install-note, .hero-availability-note ) { transform: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel h1, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover h1, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within h1 { margin-top: 0 !important; } } /* REPAIR v32: CTA-knoppen in de tweede header strak op het grid zetten. */ @media screen { html body.site-home:not(#rs-hero-button-align-reset):not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-actions { align-items: stretch !important; justify-items: stretch !important; } html body.site-home:not(#rs-hero-button-align-reset):not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-actions :is(.top-direct-contact, .top-direct-contact:hover, .top-direct-contact:focus-visible) { width: 100% !important; min-width: 0 !important; margin: 0 !important; justify-self: stretch !important; align-self: stretch !important; transform: none !important; translate: none !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-actions { grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; } } /* REPAIR v33: mobiele secties/kaartbeelden netjes binnen de glasrand. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub { padding: 16px 14px !important; grid-template-columns: minmax(0, 1fr) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub > *, html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub .section-heading, html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub .homepage-media-strip, html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub .homepage-media-strip--compact { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub .section-heading { padding-inline: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .content-section.compact-home-hub .homepage-media-card { width: 100% !important; max-width: 100% !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .project-grid .project-card { display: grid !important; grid-template-columns: 70px minmax(0, 1fr) !important; align-items: start !important; gap: 6px 12px !important; padding: 12px !important; min-height: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .project-card .project-media { grid-column: 1 !important; grid-row: 1 / span 3 !important; align-self: start !important; justify-self: start !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; border-radius: 14px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .project-card .project-media::after { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .project-media--placeholder span { width: 42px !important; height: 42px !important; border-radius: 12px !important; font-size: 1rem !important; letter-spacing: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .project-card :is(.project-label, h3, p, .project-hovermeta) { grid-column: 2 !important; min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; } } /* REPAIR v34: footertekst op mobiel compacter en beter leesbaar. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer { width: min(calc(100% - 24px), 430px) !important; max-width: calc(100vw - 24px) !important; margin-inline: auto !important; padding: 12px 0 28px !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; padding: 20px 18px !important; box-sizing: border-box !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel > div:not(.panel-corners) { display: grid !important; gap: 6px !important; min-width: 0 !important; max-width: 100% !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer h3, html body.site-home:not(.document-page):not(.document-page--print-preview) .footer-columns h3 { margin: 0 !important; font-size: 1rem !important; line-height: 1.18 !important; letter-spacing: 0 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer p, html body.site-home:not(.document-page):not(.document-page--print-preview) .footer-columns p, html body.site-home:not(.document-page):not(.document-page--print-preview) .footer-columns li { margin: 0 !important; max-width: 100% !important; font-size: 0.9rem !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .footer-columns ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 14px !important; margin: 0 !important; padding-left: 0 !important; list-style-position: inside !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .footer-bottom { width: 100% !important; margin: 10px 0 0 !important; text-align: center !important; font-size: 0.78rem !important; line-height: 1.25 !important; } } /* REPAIR v35: mobiele footerhoogte en glaslaag corrigeren. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer { height: auto !important; min-height: 0 !important; content-visibility: visible !important; contain-intrinsic-size: none !important; contain-intrinsic-block-size: none !important; contain-intrinsic-inline-size: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel { position: relative !important; isolation: isolate !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel::before { z-index: -1 !important; pointer-events: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel::after { z-index: 0 !important; pointer-events: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-columns.tech-panel > div:not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .site-footer .footer-bottom { position: relative !important; z-index: 2 !important; } } /* REPAIR v36: mobiele bovenste headerfoto vult de volledige header. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.24), transparent 42%), linear-gradient(135deg, rgba(86, 157, 221, 0.04), transparent 34%, rgba(255, 255, 255, 0.08) 72%), var(--rs-home-top-banner-image) center center / cover no-repeat !important; background-position: center center, center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, cover !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom { background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-header-bar) 34%, transparent), color-mix(in srgb, var(--rs-home-header-bar) 46%, transparent) ) !important; border-top-color: color-mix(in srgb, var(--rs-home-header-bar) 36%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(18, 34, 50, 0.08) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-main, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-bottom { position: relative !important; z-index: 2 !important; } } /* REPAIR v37: vaste laagopbouw, achterplaat achter en glasplaat voor. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ), html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within { position: relative !important; isolation: isolate !important; overflow: visible !important; border-color: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 58%, rgba(255, 255, 255, 0.42)) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: -1 !important; border: 1px solid rgba(0, 0, 0, 0.58) !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(4, 9, 14, 0.46), rgba(7, 14, 21, 0.34)), radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.08), transparent 42%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -24px 44px rgba(0, 0, 0, 0.2), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 70%, rgba(255, 255, 255, 0.58)) !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 42%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 15%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 32%, transparent) 100% ), linear-gradient( 90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 100% ), linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%, rgba(255, 255, 255, 0.08) 74%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::before { inset: -10px 10px 12px -10px !important; } } /* REPAIR v38: laagvolgorde omdraaien, glas voor en zwarte plaat achter. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::before { inset: 0 !important; z-index: 1 !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 70%, rgba(255, 255, 255, 0.58)) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 42%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 15%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 32%, transparent) 100% ), linear-gradient( 90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 100% ), linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%, rgba(255, 255, 255, 0.08) 74%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::after { inset: -16px 16px 18px -16px !important; z-index: -1 !important; border: 1px solid rgba(0, 0, 0, 0.58) !important; background: linear-gradient(180deg, rgba(4, 9, 14, 0.46), rgba(7, 14, 21, 0.34)), radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.08), transparent 42%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -24px 44px rgba(0, 0, 0, 0.2), 0 18px 38px rgba(0, 0, 0, 0.16) !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::after { inset: -10px 10px 12px -10px !important; } } /* REPAIR v39: achterplaat is apart element, glasplaat is containerlaag. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ), html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within { position: relative !important; isolation: isolate !important; overflow: visible !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within > .panel-corners { display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: -1 !important; pointer-events: none !important; overflow: hidden !important; border: 1px solid rgba(0, 0, 0, 0.58) !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(4, 9, 14, 0.48), rgba(7, 14, 21, 0.34)), radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.08), transparent 42%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -24px 44px rgba(0, 0, 0, 0.2), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; clip-path: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > .panel-corners::after { content: none !important; display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 70%, rgba(255, 255, 255, 0.58)) !important; border-radius: inherit !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 42%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 15%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 32%, transparent) 100% ), linear-gradient( 90deg, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 0, color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) 18px, transparent 48px, transparent calc(100% - 48px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 10%, transparent) calc(100% - 18px), color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) 30%, transparent) 100% ), linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%, rgba(255, 255, 255, 0.08) 74%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel )::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within::after { content: none !important; display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ) > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header .header-shell, .hero-copy.tech-panel, .content-section, .portal-section, .site-footer .footer-columns.tech-panel ):focus-within > .panel-corners { inset: -10px 10px 12px -10px !important; } } /* REPAIR v40: mobiele headerfoto los van de glasplaat leggen. */ @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { background: transparent !important; overflow: visible !important; isolation: isolate !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after { background: var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { background: var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { inset: 0 !important; z-index: 0 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { z-index: 1 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } } /* REPAIR v44: echte laatste regelset voor headerlagen, ook na v41. */ /* REPAIR v45: hoge specificiteit tegen oudere :is()-glasregels. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within { --rs-v45-radius: 24px; --rs-v45-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v45-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v45-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v45-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent); --rs-v45-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v45-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v45-radius) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within > .panel-corners { display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 64%, transparent) !important; border-radius: calc(var(--rs-v45-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v45-backplate-strong), var(--rs-v45-backplate-mid) 46%, var(--rs-v45-backplate-soft)), radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 46px rgba(0, 0, 0, 0.16), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > .panel-corners::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > .panel-corners::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > .panel-corners::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > .panel-corners::after { content: none !important; display: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; width: auto !important; height: auto !important; pointer-events: none !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v45-glass-edge) !important; border-radius: inherit !important; background: linear-gradient(180deg, var(--rs-v45-glass-edge-strong) 0, var(--rs-v45-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v45-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v45-glass-edge-strong) 100%), linear-gradient(90deg, var(--rs-v45-glass-edge) 0, var(--rs-v45-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v45-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v45-glass-edge) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(255, 255, 255, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel .hero-photo-bg { display: none !important; background: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > :not(.panel-corners), html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 3 !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel .hero-service-list { z-index: 4 !important; } } @media screen and (max-width: 760px) { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel { --rs-v45-radius: 22px; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > .panel-corners { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v45-radius) + 7px) !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { --rs-v44-radius: 24px; --rs-v44-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v44-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v44-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v44-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent); --rs-v44-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v44-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v44-radius) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within > .panel-corners { display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 64%, transparent) !important; border-radius: calc(var(--rs-v44-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v44-backplate-strong), var(--rs-v44-backplate-mid) 46%, var(--rs-v44-backplate-soft)), radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 46px rgba(0, 0, 0, 0.16), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::after { content: none !important; display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; width: auto !important; height: auto !important; pointer-events: none !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v44-glass-edge) !important; border-radius: inherit !important; background: linear-gradient(180deg, var(--rs-v44-glass-edge-strong) 0, var(--rs-v44-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v44-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v44-glass-edge-strong) 100%), linear-gradient(90deg, var(--rs-v44-glass-edge) 0, var(--rs-v44-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v44-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v44-glass-edge) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(255, 255, 255, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 3 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list { z-index: 4 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel { --rs-v44-radius: 22px; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v44-radius) + 7px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } /* REPAIR v43: laatste override, zodat v41 niet meer over de schone laagvolgorde heen valt. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { --rs-v42-radius: 24px; --rs-v42-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v42-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v42-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v42-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent); --rs-v42-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v42-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v42-radius) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within > .panel-corners { display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 64%, transparent) !important; border-radius: calc(var(--rs-v42-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v42-backplate-strong), var(--rs-v42-backplate-mid) 46%, var(--rs-v42-backplate-soft)), radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 46px rgba(0, 0, 0, 0.16), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::after { content: none !important; display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; width: auto !important; height: auto !important; pointer-events: none !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v42-glass-edge) !important; border-radius: inherit !important; background: linear-gradient(180deg, var(--rs-v42-glass-edge-strong) 0, var(--rs-v42-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v42-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v42-glass-edge-strong) 100%), linear-gradient(90deg, var(--rs-v42-glass-edge) 0, var(--rs-v42-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v42-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v42-glass-edge) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(255, 255, 255, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 3 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list { z-index: 4 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel { --rs-v42-radius: 22px; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v42-radius) + 7px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } /* REPAIR v42: een vaste laagvolgorde voor header 1 en 2 op pc en mobiel. Volgorde: achterplaat -> foto/tint -> glas/faderand -> inhoud. */ @media screen { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { --rs-v42-radius: 24px; --rs-v42-glass-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v42-glass-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v42-glass-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v42-backplate-soft: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-soft-alpha, 12%), transparent); --rs-v42-backplate-mid: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v42-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v42-radius) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within > .panel-corners { content: "" !important; display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 64%, transparent) !important; border-radius: calc(var(--rs-v42-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v42-backplate-strong), var(--rs-v42-backplate-mid) 46%, var(--rs-v42-backplate-soft)), radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 46px rgba(0, 0, 0, 0.16), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners::after { content: none !important; display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; width: auto !important; height: auto !important; pointer-events: none !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v42-glass-edge) !important; border-radius: inherit !important; background: linear-gradient( 180deg, var(--rs-v42-glass-edge-strong) 0, var(--rs-v42-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v42-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v42-glass-edge-strong) 100% ), linear-gradient( 90deg, var(--rs-v42-glass-edge) 0, var(--rs-v42-glass-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v42-glass-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v42-glass-edge) 100% ), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(255, 255, 255, 0.08)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { display: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 3 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-service-list { z-index: 4 !important; } } @media screen and (max-width: 760px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel { --rs-v42-radius: 22px; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > .panel-corners, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > .panel-corners { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v42-radius) + 7px) !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } /* REPAIR v41: pc gebruikt dezelfde foto-onder-glas laagopbouw. */ @media screen and (min-width: 761px) { html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within { background: transparent !important; overflow: visible !important; isolation: isolate !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::after { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::after, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::after { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel .hero-photo-bg { display: none !important; background: none !important; inset: 0 !important; z-index: 1 !important; border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell:focus-within::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:hover::before, html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel:focus-within::before { z-index: 2 !important; } html body.site-home:not(.document-page):not(.document-page--print-preview) .site-header .header-shell > :not(.panel-corners), html body.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 3 !important; } } /* REPAIR v47: simpel model - paneelachtergrond + transparante glasplaat met fade-rand. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within { --rs-v47-radius: 24px; --rs-v47-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v47-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v47-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v47-backplate: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v47-backplate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v47-radius) !important; box-shadow: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: -16px 16px 18px -16px !important; z-index: -1 !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 64%, transparent) !important; border-radius: calc(var(--rs-v47-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v47-backplate-strong), var(--rs-v47-backplate)), radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.08), transparent 40%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 46px rgba(0, 0, 0, 0.16), 0 18px 38px rgba(0, 0, 0, 0.16) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v47-edge) !important; border-radius: inherit !important; background: linear-gradient(180deg, var(--rs-v47-edge-strong) 0, var(--rs-v47-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v47-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v47-edge-strong) 100%), linear-gradient(90deg, var(--rs-v47-edge) 0, var(--rs-v47-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v47-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v47-edge) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(255, 255, 255, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel .hero-photo-bg { display: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell > :not(.panel-corners), html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 760px) { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel { --rs-v47-radius: 22px; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel::after { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v47-radius) + 7px) !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } /* REPAIR v48: one layer order for every homepage glass panel. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ), html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):focus-within { --rs-v48-radius: clamp(16px, 2vw, 24px); --rs-v48-edge: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-alpha, 64%), transparent); --rs-v48-edge-soft: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-soft-alpha, 50%), transparent); --rs-v48-edge-strong: color-mix(in srgb, var(--rs-home-glass-edge-color, #c6d0d9) var(--rs-home-glass-edge-strong-alpha, 76%), transparent); --rs-v48-plate: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-alpha, 20%), transparent); --rs-v48-plate-strong: color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) var(--rs-home-glass-backplate-strong-alpha, 32%), transparent); position: relative !important; z-index: 0 !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: var(--rs-v48-radius) !important; outline: 0 !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; box-shadow: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel:focus-within { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; box-shadow: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ), html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ):hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ):focus-within { background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 56%, transparent), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 34%, transparent)), color-mix(in srgb, var(--rs-home-panel-bg, #c6d8e5) 22%, transparent) !important; box-shadow: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel:focus-within { --rs-v48-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 64%, transparent), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 42%, transparent)), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 24%, transparent) !important; box-shadow: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel )::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):focus-within::after { content: "" !important; display: block !important; position: absolute !important; inset: -14px 14px 16px -14px !important; z-index: -1 !important; width: auto !important; height: auto !important; border: 1px solid color-mix(in srgb, var(--rs-home-glass-backplate-color, #111820) 58%, transparent) !important; border-radius: calc(var(--rs-v48-radius) + 8px) !important; background: linear-gradient(180deg, var(--rs-v48-plate-strong), var(--rs-v48-plate)), radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.08), transparent 38%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -20px 42px rgba(0, 0, 0, 0.14), 0 14px 30px rgba(0, 0, 0, 0.14) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-card.tech-panel.tech-panel:focus-within::after { inset: -6px 6px 7px -6px !important; border-radius: calc(var(--rs-v48-radius) + 5px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.12) !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel )::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ):focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: auto !important; height: auto !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v48-edge) !important; border-radius: inherit !important; background: linear-gradient(180deg, var(--rs-v48-edge-strong) 0, var(--rs-v48-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v48-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v48-edge-strong) 100%), linear-gradient(90deg, var(--rs-v48-edge) 0, var(--rs-v48-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v48-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v48-edge) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(255, 255, 255, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ) > .panel-corners, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel .hero-photo-bg { display: none !important; opacity: 0 !important; pointer-events: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel, .homepage-media-card.tech-panel.tech-panel ) > :not(.panel-corners):not(.hero-photo-bg) { position: relative !important; z-index: 2 !important; } } @media screen and (max-width: 760px) { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ) { --rs-v48-radius: 20px; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel )::after { inset: -10px 10px 12px -10px !important; border-radius: calc(var(--rs-v48-radius) + 7px) !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell { background: linear-gradient(180deg, var(--rs-home-header-tint-top, transparent), var(--rs-home-header-tint-bottom-mobile, transparent)), var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.tech-panel.tech-panel { background: linear-gradient(180deg, var(--rs-home-hero-tint-top, transparent), var(--rs-home-hero-tint-bottom-mobile, transparent)), var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } } /* REPAIR v48d: card compactness must win after the v48 mobile/pass rules. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus-within { --rs-v48-radius: 12px; border-radius: var(--rs-v48-radius) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 64%, transparent), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 42%, transparent)), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 24%, transparent) !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus-within::after { inset: -6px 6px 7px -6px !important; border-radius: calc(var(--rs-v48-radius) + 5px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.12) !important; } } /* REPAIR v49: cards are separate blocks, not part of the global glass edge color. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus-within { --rs-v49-card-radius: 12px; position: relative !important; isolation: isolate !important; overflow: hidden !important; border: 0 !important; outline: 0 !important; border-radius: var(--rs-v49-card-radius) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 58%, transparent), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 34%, transparent)), color-mix(in srgb, var(--rs-home-card-bg, #e8f2fa) 18%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -12px 26px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(10, 22, 32, 0.08) !important; transform: none !important; filter: none !important; transition: none !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:hover::after, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus-within::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .homepage-media-strip.homepage-media-strip .homepage-media-card.homepage-media-card.tech-panel.tech-panel:focus-within::after { content: none !important; display: none !important; border: 0 !important; background: none !important; box-shadow: none !important; opacity: 0 !important; } } /* REPAIR v50: photo stays background; glass color only lives in the foreground fade edge. */ @media screen { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell:focus-within { background: var(--rs-home-top-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.hero-copy.tech-panel.tech-panel, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.hero-copy.tech-panel.tech-panel:hover, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.hero-copy.tech-panel.tech-panel:focus, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.hero-copy.tech-panel.tech-panel:focus-within { background: var(--rs-home-bottom-banner-image) center center / cover no-repeat !important; } html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel )::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ):hover::before, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) :is( .site-header.site-header .header-shell.header-shell, .hero-copy.hero-copy.tech-panel.tech-panel, .content-section.content-section, .portal-section.portal-section, .site-footer.site-footer .footer-columns.tech-panel.tech-panel ):focus-within::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; border-radius: inherit !important; border: max(1px, var(--rs-home-glass-edge-width, 1px)) solid var(--rs-v48-edge) !important; background: linear-gradient(180deg, var(--rs-v48-edge-strong) 0, var(--rs-v48-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v48-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v48-edge-strong) 100%), linear-gradient(90deg, var(--rs-v48-edge) 0, var(--rs-v48-edge-soft) var(--rs-home-glass-edge-fade-mid, 10px), transparent var(--rs-home-glass-edge-fade, 26px), transparent calc(100% - var(--rs-home-glass-edge-fade, 26px)), var(--rs-v48-edge-soft) calc(100% - var(--rs-home-glass-edge-fade-mid, 10px)), var(--rs-v48-edge) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; pointer-events: none !important; transform: none !important; filter: none !important; transition: none !important; } } @media screen and (max-width: 760px) { html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .site-header.site-header .header-shell.header-shell, html body.site-home.site-home:not(.document-page):not(.document-page--print-preview) .hero-copy.hero-copy.tech-panel.tech-panel { background-size: cover !important; background-position: center center !important; } } /* ADMIN MOBILE NAV FINAL: beheerknoppen mogen niet horizontaal verdwijnen. */ @media screen and (max-width: 760px) { html body.portal-page.portal-page--admin .site-header, html body.portal-page[data-layout-role="admin"] .site-header { position: relative !important; z-index: 20000 !important; overflow: visible !important; } html body.portal-page.portal-page--admin .site-header .header-shell, html body.portal-page[data-layout-role="admin"] .site-header .header-shell, html body.portal-page.portal-page--admin .site-header .header-shell.header-shell--portal, html body.portal-page[data-layout-role="admin"] .site-header .header-shell.header-shell--portal { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body.portal-page.portal-page--admin .site-header .header-bottom, html body.portal-page[data-layout-role="admin"] .site-header .header-bottom { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 10px !important; padding: 8px !important; overflow: visible !important; } html body.portal-page.portal-page--admin .site-header .menu-toggle, html body.portal-page[data-layout-role="admin"] .site-header .menu-toggle { display: none !important; } html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav, html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav.is-open, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav.is-open { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; } html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav > a, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav > a { display: inline-flex !important; width: 100% !important; min-width: 0 !important; min-height: 42px !important; height: auto !important; padding: 0 8px !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; font-size: 0.78rem !important; line-height: 1.1 !important; white-space: nowrap !important; } html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav > a .nav-label, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav > a .nav-label { overflow: hidden !important; text-overflow: ellipsis !important; } } @media screen and (max-width: 380px) { html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav, html body.portal-page.portal-page--admin .site-header .site-nav.portal-nav.is-open, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav, html body.portal-page[data-layout-role="admin"] .site-header .site-nav.portal-nav.is-open { grid-template-columns: 1fr !important; } } /* ADMIN MOBILE NAV COMPACT: eigen admin-menu class wint van oude menu-opmaak. */ @media screen and (max-width: 760px) { html body .site-header .header-shell:has(.portal-nav--admin), html body.portal-page[data-layout-role="admin"] .site-header .header-shell, html body.portal-page.portal-page--admin .site-header .header-shell { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body .site-header .header-bottom:has(.portal-nav--admin), html body.portal-page[data-layout-role="admin"] .site-header .header-bottom, html body.portal-page.portal-page--admin .site-header .header-bottom { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 8px !important; padding: 7px 8px !important; overflow: visible !important; } html body .site-header .header-bottom:has(.portal-nav--admin) .menu-toggle, html body.portal-page[data-layout-role="admin"] .site-header .menu-toggle, html body.portal-page.portal-page--admin .site-header .menu-toggle { display: none !important; } html body .site-header .portal-nav--admin, html body .site-header .portal-nav--admin.is-open, html body.portal-page[data-layout-role="admin"] .site-header .portal-nav--admin, html body.portal-page.portal-page--admin .site-header .portal-nav--admin { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; flex: 0 0 100% !important; } html body .site-header .portal-nav--admin > a, html body .site-header .portal-nav--admin > a.site-nav__cta { display: inline-flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; padding: 0 5px !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; font-size: clamp(0.58rem, 2.35vw, 0.68rem) !important; line-height: 1 !important; letter-spacing: 0.01em !important; white-space: nowrap !important; overflow: hidden !important; } html body .site-header .portal-nav--admin > a .nav-label { display: block !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media screen and (min-width: 520px) and (max-width: 760px) { html body .site-header .portal-nav--admin, html body .site-header .portal-nav--admin.is-open { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media screen and (max-width: 360px) { html body .site-header .portal-nav--admin, html body .site-header .portal-nav--admin.is-open { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* MOBIEL BEHEER MENU: losse compacte balk onder de header, los van de brede headernav. */ .portal-admin-mobile-menu { display: none; } @media screen and (max-width: 760px) { body[data-layout-role="admin"] .site-header .header-bottom { display: none !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu { display: block !important; width: min(calc(100% - 22px), 720px); margin: 8px auto 14px; padding: 6px; border: 1px solid rgba(168, 213, 244, 0.58); border-radius: 24px; background: linear-gradient(180deg, rgba(236, 247, 255, 0.66), rgba(145, 174, 193, 0.28)), linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(20, 43, 61, 0.18), 0 10px 22px rgba(12, 32, 48, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body[data-layout-role="admin"] .portal-admin-mobile-menu summary { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(185,213,230,0.18)); color: #142c40; cursor: pointer; font-weight: 900; letter-spacing: 0.08em; list-style: none; text-transform: uppercase; } body[data-layout-role="admin"] .portal-admin-mobile-menu__shield { display: inline-block; width: 24px; height: 24px; border: 1px solid rgba(107, 204, 255, 0.92); background: radial-gradient(circle at 50% 26%, rgba(133, 236, 255, 0.95), rgba(35, 136, 221, 0.72) 46%, rgba(7, 49, 105, 0.88) 100%); box-shadow: 0 0 0 2px rgba(191, 236, 255, 0.34), 0 0 16px rgba(56, 178, 255, 0.54), inset 0 1px 0 rgba(255,255,255,0.72); clip-path: polygon(50% 3%, 88% 17%, 82% 63%, 50% 96%, 18% 63%, 12% 17%); } body[data-layout-role="admin"] .portal-admin-mobile-menu__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout-role="admin"] .portal-admin-mobile-menu summary::-webkit-details-marker { display: none; } body[data-layout-role="admin"] .portal-admin-mobile-menu[open] summary { margin-bottom: 6px; } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 31px; padding: 0 5px; border: 1px solid rgba(126, 184, 226, 0.72); border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(201,226,240,0.56)); color: #142c40; font-size: clamp(0.52rem, 2.3vw, 0.68rem); font-weight: 900; line-height: 1; text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(89, 169, 223, 0.26); } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a.is-active { border-color: rgba(72, 165, 232, 0.95); background: linear-gradient(180deg, #58b8f1, #1979bd); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.35); } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a .nav-core, body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a .nav-sheen { display: none !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 360px) { body[data-layout-role="admin"] .portal-admin-mobile-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a { min-height: 34px; font-size: 0.7rem; } } } /* Mobiel beheer: gebruik de bestaande headerbalk als compacte admin-dock. */ @media screen and (max-width: 760px) { body[data-layout-role="admin"] .portal-admin-mobile-menu { display: none !important; } body[data-layout-role="admin"] .site-header .header-bottom { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 0 !important; padding: 6px 8px 8px !important; overflow: visible !important; position: relative !important; background: linear-gradient(180deg, rgba(242, 250, 255, 0.78), rgba(153, 184, 205, 0.46)), linear-gradient(90deg, rgba(255,255,255,0.44), rgba(255,255,255,0.08)) !important; border-top: 1px solid rgba(184, 222, 248, 0.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.76), inset 0 -1px 0 rgba(40, 84, 111, 0.2) !important; } body[data-layout-role="admin"] .site-header .header-bottom::before { content: ""; position: absolute; left: 8px; top: 50%; width: 23px; height: 23px; transform: translateY(-50%); border: 1px solid rgba(107, 204, 255, 0.92); background: radial-gradient(circle at 50% 26%, rgba(133, 236, 255, 0.95), rgba(35, 136, 221, 0.72) 46%, rgba(7, 49, 105, 0.88) 100%); box-shadow: 0 0 0 2px rgba(191, 236, 255, 0.32), 0 0 14px rgba(56, 178, 255, 0.48), inset 0 1px 0 rgba(255,255,255,0.72); clip-path: polygon(50% 3%, 88% 17%, 82% 63%, 50% 96%, 18% 63%, 12% 17%); pointer-events: none; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 0 32px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 31px !important; min-height: 31px !important; max-height: 31px !important; margin: 0 !important; padding: 0 4px !important; border: 1px solid rgba(126, 184, 226, 0.72) !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(201,226,240,0.58)) !important; color: #142c40 !important; font-size: clamp(0.5rem, 2.2vw, 0.66rem) !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(89, 169, 223, 0.24) !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a.is-active { border-color: rgba(72, 165, 232, 0.95) !important; background: linear-gradient(180deg, #58b8f1, #1979bd) !important; color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,0.35) !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a::before, body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a::after, body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a .nav-core, body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a .nav-sheen { display: none !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a .nav-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media screen and (max-width: 340px) { body[data-layout-role="admin"] .site-header .header-bottom::before { display: none !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding-left: 0 !important; } body[data-layout-role="admin"] .site-header .site-nav.portal-nav--admin > a { height: 34px !important; min-height: 34px !important; max-height: 34px !important; font-size: 0.7rem !important; } } } /* Mobiel beheer herstel: toon de compacte adminlaag; de headernav blijft op mobiel uit. */ @media screen and (max-width: 760px) { body[data-layout-role="admin"] .site-header .header-bottom { display: none !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu { display: block !important; width: min(calc(100% - 26px), 680px) !important; margin: -2px auto 14px !important; padding: 5px !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(238, 248, 255, 0.62), rgba(143, 172, 192, 0.24)), linear-gradient(90deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), inset 0 -1px 0 rgba(28, 58, 78, 0.15), 0 8px 18px rgba(11, 30, 45, 0.14) !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu summary { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 7px !important; min-height: 28px !important; padding: 0 8px !important; border-radius: 15px !important; font-size: 0.7rem !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu__shield { width: 21px !important; height: 21px !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; } body[data-layout-role="admin"] .portal-admin-mobile-menu__grid a { min-height: 29px !important; padding: 0 4px !important; border-radius: 12px !important; font-size: clamp(0.49rem, 2.05vw, 0.64rem) !important; } @media screen and (max-width: 340px) { body[data-layout-role="admin"] .portal-admin-mobile-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } } /* Live mobile repair 2026-05-31: voorpagina moet op telefoon echte kolommen gebruiken, geen half-zichtbare desktop/carousel rijen. */ @media screen and (max-width: 680px) { html, body.site-home { max-width: 100% !important; overflow-x: hidden !important; } body.site-home .top-toolbar { min-height: 0 !important; } body.site-home .top-toolbar__inner { width: 100% !important; max-width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 58px 14px 12px !important; } body.site-home .toolbar-group, body.site-home .toolbar-group--right { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; gap: 8px !important; } body.site-home .toolbar-group--right > a:not(.top-direct-contact) { display: none !important; } body.site-home .top-login-link { justify-self: start !important; width: max-content !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.site-home .top-direct-contact { width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; padding-inline: 10px !important; } body.site-home .site-header { margin-top: 18px !important; margin-bottom: 24px !important; } body.site-home .site-header .header-shell, body.site-home .site-header .header-shell:hover, body.site-home .site-header .header-shell:focus, body.site-home .site-header .header-shell:focus-within { width: min(calc(100vw - 24px), 430px) !important; height: auto !important; min-height: 260px !important; max-height: none !important; margin-inline: auto !important; border-radius: 22px !important; } body.site-home .header-main { min-height: 190px !important; padding: 18px 16px 54px !important; } body.site-home .brand--banner { width: min(280px, 78vw) !important; height: 150px !important; background-size: contain !important; } body.site-home .brand--banner img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } body.site-home .header-bottom { left: 14px !important; right: 14px !important; bottom: 12px !important; width: auto !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr !important; padding: 7px !important; } body.site-home .menu-toggle { width: 100% !important; min-height: 42px !important; border-radius: 15px !important; } body.site-home .site-nav.is-open { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin-top: 8px !important; max-height: none !important; overflow: visible !important; } body.site-home .site-nav.is-open > a { width: 100% !important; min-width: 0 !important; min-height: 40px !important; } body.site-home .hero-section { margin-top: 0 !important; } body.site-home .hero-shell, body.site-home .hero-copy.tech-panel, body.site-home .content-section, body.site-home .footer-columns.tech-panel { width: min(calc(100vw - 24px), 430px) !important; max-width: min(calc(100vw - 24px), 430px) !important; margin-inline: auto !important; } body.site-home .hero-copy.tech-panel, body.site-home .hero-copy.tech-panel:hover, body.site-home .hero-copy.tech-panel:focus, body.site-home .hero-copy.tech-panel:focus-within { min-height: 0 !important; height: auto !important; padding: 24px 20px !important; border-radius: 22px !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; } body.site-home .hero-copy.tech-panel > :not(.hero-photo-bg):not(.panel-corners) { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } body.site-home .hero-copy.tech-panel h1 { font-size: clamp(1.85rem, 8vw, 2.45rem) !important; line-height: 1.05 !important; margin: 0 !important; } body.site-home .hero-eyebrow { font-size: 0.95rem !important; line-height: 1.35 !important; } body.site-home .hero-copy.tech-panel .hero-service-list { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 15px !important; border-radius: 16px !important; } body.site-home .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } body.site-home .hero-actions .top-direct-contact { width: 100% !important; min-width: 0 !important; min-height: 44px !important; } body.site-home .content-section { margin-top: 30px !important; padding: 28px 18px !important; border-radius: 22px !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } body.site-home .content-section .section-heading { margin: 0 0 18px !important; padding: 0 !important; } body.site-home .content-section .section-heading h2 { font-size: clamp(1.9rem, 8vw, 2.55rem) !important; line-height: 1.08 !important; margin-bottom: 8px !important; } body.site-home .content-section .section-heading p { font-size: 1rem !important; line-height: 1.45 !important; } body.site-home .homepage-media-strip--compact, body.site-home .homepage-media-strip, body.site-home .project-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important; } body.site-home .homepage-media-card, body.site-home .homepage-media-strip--compact .homepage-media-card, body.site-home .project-card, body.site-home .process-card, body.site-home .faq-item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; flex-basis: auto !important; transform: none !important; margin: 0 !important; } body.site-home .homepage-media-card, body.site-home .homepage-media-strip--compact .homepage-media-card, body.site-home .project-card { display: grid !important; grid-template-columns: 100px minmax(0, 1fr) !important; column-gap: 14px !important; align-items: center !important; min-height: 126px !important; padding: 14px !important; } body.site-home .homepage-media-card__image, body.site-home .project-card .project-media { grid-row: 1 / span 3 !important; width: 100% !important; height: 96px !important; min-height: 96px !important; border-radius: 14px !important; } body.site-home .homepage-media-card__image img, body.site-home .project-card .project-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } body.site-home .homepage-media-card .card-code, body.site-home .project-card .project-label { font-size: 0.75rem !important; letter-spacing: 0.12em !important; margin: 0 !important; } body.site-home .homepage-media-card h3, body.site-home .project-card h3 { font-size: 1.03rem !important; line-height: 1.18 !important; margin: 0 !important; } body.site-home .homepage-media-card p, body.site-home .project-card p { font-size: 0.9rem !important; line-height: 1.35 !important; margin: 0 !important; } body.site-home .process-grid, body.site-home .faq-list, body.site-home .contact-layout, body.site-home .footer-columns { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; } } @media screen and (max-width: 360px) { body.site-home .homepage-media-card, body.site-home .homepage-media-strip--compact .homepage-media-card, body.site-home .project-card { grid-template-columns: 86px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 12px !important; } body.site-home .homepage-media-card__image, body.site-home .project-card .project-media { height: 86px !important; min-height: 86px !important; } }