.elementor-kit-5{--e-global-color-primary:#008AC9;--e-global-color-secondary:#0A0E0F;--e-global-color-text:#526D7A;--e-global-color-accent:#002233;--e-global-color-ed3e426:#5F7F8F;--e-global-color-795beb2:#95A2A9;--e-global-color-5b0fc7c:#C2CFD6;--e-global-color-4bbdd10:#FFFFFF;--e-global-color-d6157d2:#005580;--e-global-color-094d303:#ACD8E7;--e-global-color-aa9a533:#CCE8EF;--e-global-color-c4fe05a:#E3F1F7;--e-global-color-76eb206:#F1F5F7;--e-global-color-f02bbce:#70C3B4;--e-global-color-659e483:#B2DCD9;--e-global-color-b4fb2b9:#02010100;--e-global-typography-primary-font-family:"Futura MITCenter";--e-global-typography-primary-font-size:44px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:50px;--e-global-typography-secondary-font-family:"Futura MITCenter";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:30px;--e-global-typography-text-font-family:"Futura MITCenter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:22px;--e-global-typography-accent-font-family:"Futura MITCenter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:22px;--e-global-typography-066fa30-font-family:"Futura MITCenter";--e-global-typography-066fa30-font-size:64px;--e-global-typography-066fa30-font-weight:500;--e-global-typography-066fa30-text-transform:none;--e-global-typography-066fa30-font-style:normal;--e-global-typography-066fa30-text-decoration:none;--e-global-typography-066fa30-line-height:70px;--e-global-typography-f8ea5d2-font-family:"Futura MITCenter";--e-global-typography-f8ea5d2-font-size:18px;--e-global-typography-f8ea5d2-font-weight:500;--e-global-typography-f8ea5d2-text-transform:none;--e-global-typography-f8ea5d2-font-style:normal;--e-global-typography-f8ea5d2-text-decoration:none;--e-global-typography-f8ea5d2-line-height:18px;--e-global-typography-5c26795-font-family:"Futura MITCenter";--e-global-typography-5c26795-font-size:14px;--e-global-typography-5c26795-font-weight:400;--e-global-typography-5c26795-text-transform:none;--e-global-typography-5c26795-font-style:normal;--e-global-typography-5c26795-text-decoration:none;--e-global-typography-5c26795-line-height:22px;--e-global-typography-95ba8e6-font-size:14px;--e-global-typography-95ba8e6-font-weight:400;--e-global-typography-95ba8e6-text-transform:uppercase;--e-global-typography-95ba8e6-font-style:normal;--e-global-typography-95ba8e6-text-decoration:none;--e-global-typography-95ba8e6-line-height:22px;--e-global-typography-95ba8e6-letter-spacing:1px;--e-global-typography-2135777-font-family:"Futura MITCenter";--e-global-typography-2135777-font-size:18px;--e-global-typography-2135777-font-weight:400;--e-global-typography-2135777-text-transform:none;--e-global-typography-2135777-font-style:normal;--e-global-typography-2135777-text-decoration:none;--e-global-typography-2135777-line-height:22px;--e-global-typography-b9f2a6a-font-family:"Futura MITCenter";--e-global-typography-b9f2a6a-font-size:18px;--e-global-typography-b9f2a6a-font-weight:600;--e-global-typography-b9f2a6a-text-transform:none;--e-global-typography-b9f2a6a-font-style:normal;--e-global-typography-b9f2a6a-text-decoration:none;--e-global-typography-b9f2a6a-line-height:22px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-066fa30-font-size:50px;--e-global-typography-066fa30-line-height:60px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:38px;--e-global-typography-primary-line-height:48px;--e-global-typography-066fa30-font-size:44px;--e-global-typography-066fa30-line-height:50px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* Elementor unset Link Color */ a, a:hover, a:active, a:focus { color: unset; } /* Mesh BG Animation — performance-optimiert (keine optischen Änderungen) */ .mesh-hero { --cyan: 178, 220, 217; --mint: 111, 197, 182; --teal: 112, 195, 180; --blue: 0, 105, 158; --blue-2: 0, 138, 201; --blue-3: 20, 80, 130; --dark: 4, 20, 45; --navy: 8, 28, 58; --deep: 3, 12, 28; position: relative; overflow: hidden; isolation: isolate; background-color: #030a16; /* NEU: verhindert, dass Repaints innerhalb der Hero-Sektion Layout/Style-Neuberechnungen im Rest der Seite auslösen */ contain: layout style paint; background-image: radial-gradient(ellipse 36% 30% at 12% 62%, rgba(var(--navy), 0.45) 0%, transparent 100%), radial-gradient(ellipse 32% 28% at 48% 58%, rgba(var(--blue-3), 0.40) 0%, transparent 100%), radial-gradient(ellipse 34% 28% at 78% 64%, rgba(var(--navy), 0.42) 0%, transparent 100%), radial-gradient(ellipse 30% 26% at 30% 55%, rgba(var(--teal), 0.28) 0%, transparent 100%), linear-gradient(to top, rgba(var(--deep), 0.97) 0%, transparent 40%); background-repeat: no-repeat; } @property --p0x { syntax: ''; inherits: true; initial-value: 8%; } @property --p0y { syntax: ''; inherits: true; initial-value: 8%; } @property --p1x { syntax: ''; inherits: true; initial-value: 25%; } @property --p1y { syntax: ''; inherits: true; initial-value: 12%; } @property --p2x { syntax: ''; inherits: true; initial-value: 75%; } @property --p2y { syntax: ''; inherits: true; initial-value: 6%; } @property --p3x { syntax: ''; inherits: true; initial-value: 95%; } @property --p3y { syntax: ''; inherits: true; initial-value: 12%; } @property --p4x { syntax: ''; inherits: true; initial-value: 5%; } @property --p4y { syntax: ''; inherits: true; initial-value: 40%; } @property --p5x { syntax: ''; inherits: true; initial-value: 42%; } @property --p5y { syntax: ''; inherits: true; initial-value: 32%; } @property --p6x { syntax: ''; inherits: true; initial-value: 58%; } @property --p6y { syntax: ''; inherits: true; initial-value: 45%; } @property --p7x { syntax: ''; inherits: true; initial-value: 85%; } @property --p7y { syntax: ''; inherits: true; initial-value: 38%; } .mesh-hero::before { content: ""; position: absolute; inset: -60px; z-index: 0; filter: blur(55px); will-change: transform; transform: translateZ(0); /* NEU: isoliert das Repaint dieser Ebene, verhindert Hit-Testing */ contain: strict; pointer-events: none; animation: meshMove 12s ease-in-out infinite; background-image: radial-gradient(ellipse 48% 42% at var(--p0x) var(--p0y), rgba(var(--blue-2), 0.72) 0%, transparent 100%), radial-gradient(ellipse 40% 36% at var(--p1x) var(--p1y), rgba(var(--blue), 0.60) 0%, transparent 100%), radial-gradient(ellipse 44% 40% at var(--p2x) var(--p2y), rgba(var(--mint), 0.68) 0%, transparent 100%), radial-gradient(ellipse 42% 38% at var(--p3x) var(--p3y), rgba(var(--cyan), 0.58) 0%, transparent 100%), radial-gradient(ellipse 40% 38% at var(--p4x) var(--p4y), rgba(var(--blue-3), 0.50) 0%, transparent 100%), radial-gradient(ellipse 36% 34% at var(--p5x) var(--p5y), rgba(var(--teal), 0.45) 0%, transparent 100%), radial-gradient(ellipse 34% 32% at var(--p6x) var(--p6y), rgba(var(--blue-2), 0.40) 0%, transparent 100%), radial-gradient(ellipse 38% 34% at var(--p7x) var(--p7y), rgba(var(--teal), 0.42) 0%, transparent 100%); } .mesh-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle, rgba(255,255,255,0.28) 0.9px, transparent 1.2px); background-size: 72px 72px; animation: dotZoom 14s ease-in-out infinite; pointer-events: none; will-change: transform; transform: translateZ(0); /* NEU: isoliert Layer, günstiger da transform-only Animation */ contain: strict; } .mesh-hero > .e-con-inner, .mesh-hero > .elementor-container { position: relative; z-index: 2; } @keyframes meshMove { 0%, 100% { --p0x:8%; --p0y:8%; --p1x:25%; --p1y:12%; --p2x:75%; --p2y:6%; --p3x:95%; --p3y:12%; --p4x:5%; --p4y:40%; --p5x:42%; --p5y:32%; --p6x:58%; --p6y:45%; --p7x:85%; --p7y:38%; } 25% { --p0x:18%; --p0y:4%; --p1x:30%; --p1y:20%; --p2x:68%; --p2y:2%; --p3x:88%; --p3y:18%; --p4x:-2%; --p4y:48%; --p5x:50%; --p5y:26%; --p6x:62%; --p6y:38%; --p7x:92%; --p7y:45%; } 50% { --p0x:4%; --p0y:14%; --p1x:20%; --p1y:5%; --p2x:80%; --p2y:10%; --p3x:100%; --p3y:6%; --p4x:10%; --p4y:36%; --p5x:38%; --p5y:38%; --p6x:52%; --p6y:50%; --p7x:80%; --p7y:34%; } 75% { --p0x:14%; --p0y:2%; --p1x:28%; --p1y:18%; --p2x:72%; --p2y:4%; --p3x:92%; --p3y:16%; --p4x:0%; --p4y:44%; --p5x:46%; --p5y:28%; --p6x:60%; --p6y:42%; --p7x:90%; --p7y:42%; } } @keyframes dotZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .mesh-hero::before, .mesh-hero::after { animation: none; } } /* ===== Header Background Blur ===== */ .bg-blur { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* NEU: eigene Compositing-Ebene, verhindert Blur-Neuberechnung bei Nachbar-Repaints */ transform: translateZ(0); will-change: backdrop-filter; } /* ===== Dot Background ===== */ .dotbgsmall { background-color: #F3F5F8; background-image: radial-gradient(circle, #C8CDD4 1px, transparent 1px); background-size: 22px 22px; } /* ============================================= SPARTEN KACHELN — Hover Expand/Collapse ============================================= */ .elementor .sparten-wrapper.e-con { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 10px; align-items: stretch !important; width: 100%; /* NEU: begrenzt das durch flex-grow-Transitions ausgelöste Reflow auf diesen Container, statt die ganze Seite neu zu layouten */ contain: layout; } .elementor .sparten-wrapper .sparten-card.e-con { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-height: 314px; position: relative; overflow: hidden; transition: flex-grow 0.5s ease-out; will-change: flex-grow; backface-visibility: hidden; } /* Karte aufklappen: entweder aktiv gesetzt (JS) oder direkt gehovert */ .elementor .sparten-wrapper .sparten-card.active.e-con, .elementor .sparten-wrapper .sparten-card.e-con:hover { flex: 2 1 0 !important; } /* Aktive Karte schrumpft NUR, wenn tatsächlich eine ANDERE Karte im Wrapper gehovert wird */ .elementor .sparten-wrapper:has(.sparten-card.e-con:hover) .sparten-card.active.e-con:not(:hover) { flex: 1 1 0 !important; } /* Content — absolut positioniert, beeinflusst Höhe nicht */ .elementor .sparten-card .card-content.e-con { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; will-change: opacity; } /* Content sichtbar: aktive Karte ODER direkt gehoverte Karte */ .elementor .sparten-card.active .card-content.e-con, .elementor .sparten-card.e-con:hover .card-content.e-con { opacity: 1; visibility: visible; } /* Content der aktiven Karte ausblenden, NUR wenn eine andere Karte gehovert wird */ .elementor .sparten-wrapper:has(.sparten-card.e-con:hover) .sparten-card.active.e-con:not(:hover) .card-content.e-con { opacity: 0; visibility: hidden; } /* ============================================= MOBILE / TABLET (ab 1024px) ============================================= */ @media (max-width: 1024px) { .elementor .sparten-wrapper.e-con { flex-direction: column !important; gap: 10px; } .elementor .sparten-wrapper .sparten-card.e-con, .elementor .sparten-wrapper .sparten-card.active.e-con, .elementor .sparten-wrapper .sparten-card.e-con:hover, .elementor .sparten-wrapper:has(.sparten-card.e-con:hover) .sparten-card.active.e-con:not(:hover) { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; min-height: auto; } .elementor .sparten-card .card-content.e-con, .elementor .sparten-card.active .card-content.e-con, .elementor .sparten-wrapper:has(.sparten-card.e-con:hover) .sparten-card.active.e-con:not(:hover) .card-content.e-con { opacity: 1; visibility: visible; } } /* Menü SVG Abstand Fix */ .svg-fix-toggle svg { display: block; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.woff2') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Light.svg#FuturaMITCenter') format('svg'); } @font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.woff') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Book.svg#FuturaMITCenter') format('svg'); } @font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.woff') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Medium.svg#FuturaMITCenter') format('svg'); } @font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.woff') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Bold.svg#FuturaMITCenter') format('svg'); } @font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 800; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.woff') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-ExtraBold.svg#FuturaMITCenter') format('svg'); } @font-face { font-family: 'Futura MITCenter'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.eot'); src: url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.woff2') format('woff2'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.woff') format('woff'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.ttf') format('truetype'), url('https://mitcenter.de/wp-content/uploads/2026/08/FuturaStd-Heavy.svg#FuturaMITCenter') format('svg'); } /* End Custom Fonts CSS */