/* Pre-allocated dimensions to eliminate FOUC & CLS (Layout Shift) */ #global-header, #siteHeader, header.site-header { position: fixed !important; top: 0 !important; left: 0 !important; min-height: 80px; background-color: #0F172A; display: block; width: 100%; z-index: 100000 !important; } @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Space+Grotesk:wght@500;600;700;800&display=swap'); /* Unified Global Stylesheet for Rocket Website */ /* GLOBAL DESKTOP HEADER LAYOUT */ header.site-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 100000 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 18px 0 !important; display: block !important; transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease !important; } header.site-header.scrolled { background: #FFFFFF !important; background-color: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; padding: 12px 0 !important; border-bottom: 1px solid #E2E8F0 !important; } .header-inner { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; } /* DESKTOP HEADER EXACT HORIZONTAL CENTERING */ @media (min-width: 1181px) { header.site-header .header-inner, .site-header .header-inner, .header-inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; justify-content: initial !important; } header.site-header .brand-logo, .site-header .brand-logo, .brand-logo { justify-self: start !important; } header.site-header nav.main-nav, .site-header nav.main-nav, nav.main-nav { justify-self: center !important; } header.site-header .header-actions, .site-header .header-actions, .header-actions { justify-self: end !important; } } @media (max-width: 1400px) and (min-width: 1181px) { header.site-header .main-nav > ul, nav.main-nav > ul { gap: 20px !important; } header.site-header .btn-header, .btn-header { padding: 10px 18px !important; font-size: 0.92rem !important; } .btn-header-kundenportal { padding: 9px 15px !important; font-size: 0.88rem !important; } .header-actions { gap: 8px !important; } } @media (max-width: 1220px) and (min-width: 1181px) { header.site-header .main-nav > ul, nav.main-nav > ul { gap: 16px !important; } header.site-header .main-nav > ul > li > a, nav.main-nav > ul > li > a { font-size: 15px !important; } header.site-header .header-inner, .header-inner { padding: 0 24px !important; } } .geo-container, .container, .footer-inner { max-width: 1400px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; box-sizing: border-box !important; } /* ========================================================================== GLOBAL CANONICAL CONTENT WIDTH (1400px) Enforces exact 1400px width across all content sections, facts bars, and grids under the hero on every single page. ========================================================================== */ :root { --brand-max-width: 1400px; } /* UNIVERSAL HEADLINE TYPOGRAPHY & BALANCED WRAPPING */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .section-title, .hero-title, .pflege-section-header h2, .editorial-hero-h1, .editorial-section-title, .page-hero-title, .geo-h1, .geo-h2 { text-wrap: balance !important; -webkit-text-wrap: balance !important; } /* Prevent awkward hyphen breaks in compound words */ .no-break, [data-no-break] { white-space: nowrap !important; } .page-container, .about-container, .seo-hub-container, .leistungen-container, .wissen-container, .news-container, .kontakt-container, .beratung-container, .checklist-container-main, .faq-container-main, .ana-container, .company-grid-2, .container-1330, .container-1400, .content-container, .editorial-content-inner { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; width: 100% !important; box-sizing: border-box !important; } @media (max-width: 768px) { .page-container, .about-container, .seo-hub-container, .leistungen-container, .wissen-container, .news-container, .kontakt-container, .beratung-container, .checklist-container-main, .faq-container-main, .ana-container, .company-grid-2, .container-1330, .content-container { padding-left: 20px !important; padding-right: 20px !important; } } .brand-logo { display: flex !important; align-items: center !important; gap: 12px !important; font-weight: 800 !important; font-size: 1.25rem !important; color: #FFFFFF !important; text-decoration: none !important; position: relative !important; z-index: 2 !important; } header.site-header.scrolled .brand-logo { color: #0F172A !important; } .brand-logo img, #headerLogo { width: 64px !important; height: 64px !important; max-height: 64px !important; object-fit: contain !important; } header.site-header nav.main-nav, .site-header nav.main-nav, nav.main-nav { position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 auto !important; z-index: 10 !important; } nav.main-nav > ul { display: flex !important; align-items: center !important; gap: 40px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } @media (max-width: 1400px) { nav.main-nav > ul { gap: 28px !important; } } @media (max-width: 1260px) { nav.main-nav > ul { gap: 20px !important; } } nav.main-nav > ul > li { position: relative !important; margin: 0 !important; padding: 0 !important; } nav.main-nav > ul > li.has-dropdown > a { display: inline-flex !important; align-items: center !important; gap: 6px !important; } nav.main-nav > ul > li.has-dropdown > a i { font-size: 11px !important; transition: transform 0.2s ease !important; } nav.main-nav > ul > li.has-dropdown:hover > a i { transform: rotate(180deg) !important; } /* HEADER CTA BUTTON - PROMINENT & LARGER */ header.site-header .btn-header, .btn-header { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 28px !important; font-size: 1.02rem !important; font-weight: 700 !important; color: #FFFFFF !important; background: linear-gradient(135deg, #3882DB 0%, #2563EB 100%) !important; border-radius: 99px !important; box-shadow: 0 6px 20px rgba(56, 130, 219, 0.4) !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; white-space: nowrap !important; border: none !important; } header.site-header .btn-header:hover, .btn-header:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 10px 25px rgba(56, 130, 219, 0.6) !important; color: #FFFFFF !important; } /* DROPDOWN MENU - TOP LEVEL (ALWAYS LIGHT) */ nav.main-nav ul li .dropdown-menu, header.site-header nav ul.dropdown-menu, header.site-header.scrolled nav.main-nav ul li .dropdown-menu, header.site-header.scrolled nav ul.dropdown-menu, header.site-header.scrolled .main-nav ul.dropdown-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12) !important; border-radius: 14px !important; padding: 8px !important; min-width: 250px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; flex-direction: column !important; gap: 2px !important; z-index: 1000 !important; list-style: none !important; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important; transition-delay: 0.18s !important; } /* Hover bridge for top-level dropdowns (e.g. Wissen) */ nav.main-nav ul li .dropdown-menu::before, header.site-header nav ul.dropdown-menu::before, header.site-header .main-nav .dropdown-menu::before { content: '' !important; position: absolute !important; top: -24px !important; left: 0 !important; width: 100% !important; height: 28px !important; background: transparent !important; pointer-events: auto !important; } nav.main-nav ul li:hover > .dropdown-menu, nav.main-nav ul li.has-dropdown:hover > .dropdown-menu, header.site-header nav ul li.has-dropdown:hover > .dropdown-menu, header.site-header.scrolled nav.main-nav ul li.has-dropdown:hover > .dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(4px) !important; transition-delay: 0s !important; } nav.main-nav ul li .dropdown-menu li { width: 100% !important; position: relative !important; } nav.main-nav ul li .dropdown-menu a, nav.main-nav ul li .dropdown-menu a:link, nav.main-nav ul li .dropdown-menu a:visited, header.site-header.scrolled nav.main-nav ul li .dropdown-menu a, header.site-header.scrolled nav.main-nav ul li .dropdown-menu a:link, header.site-header.scrolled nav.main-nav ul li .dropdown-menu a:visited { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1E293B !important; white-space: nowrap !important; transition: all 0.2s ease !important; background: transparent !important; text-decoration: none !important; border: none !important; border-radius: 10px !important; } nav.main-nav ul li .dropdown-menu a:hover, header.site-header.scrolled nav.main-nav ul li .dropdown-menu a:hover { background: rgba(56, 130, 219, 0.08) !important; color: #3882DB !important; padding-left: 20px !important; } /* ========================================================================== MEGA MENU STYLES (Leistungen) - ALWAYS LIGHT ========================================================================== */ nav.main-nav ul li.has-megamenu { position: static !important; } .megamenu-panel, header.site-header .megamenu-panel, header.site-header.scrolled .megamenu-panel { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; width: 760px !important; max-width: calc(100vw - 32px) !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important; border-radius: 16px !important; padding: 22px 28px 16px 28px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 100000 !important; box-sizing: border-box !important; } /* Hover bridge */ .megamenu-panel::before { content: '' !important; position: absolute !important; top: -14px !important; left: 0 !important; width: 100% !important; height: 18px !important; background: transparent !important; } /* Show Mega Menu on hover, click, or open */ nav.main-nav ul li.has-megamenu:hover > .megamenu-panel, nav.main-nav ul li.has-megamenu.open > .megamenu-panel, nav.main-nav ul li.has-megamenu:focus-within > .megamenu-panel { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } /* Grid Layout: 2 Columns */ .megamenu-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; align-items: stretch !important; } .megamenu-col { display: flex !important; flex-direction: column !important; } .megamenu-header, header.site-header .megamenu-header, header.site-header.scrolled .megamenu-header { margin-bottom: 10px !important; padding-bottom: 7px !important; border-bottom: 1px solid #E2E8F0 !important; } .megamenu-eyebrow { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-size: 0.88rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #3882DB !important; } .megamenu-eyebrow i { font-size: 0.98rem !important; } nav.main-nav ul.megamenu-list, nav.main-nav .megamenu-list, .megamenu-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } nav.main-nav ul.megamenu-list li, nav.main-nav .megamenu-list li, .megamenu-list li { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } .megamenu-item { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 9px 12px !important; border-radius: 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; background: transparent !important; } .megamenu-icon, header.site-header .megamenu-icon, header.site-header.scrolled .megamenu-icon { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: rgba(56, 130, 219, 0.08) !important; color: #3882DB !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; flex-shrink: 0 !important; margin-top: 1px !important; transition: all 0.2s ease !important; } .megamenu-content { display: flex !important; flex-direction: column !important; gap: 3px !important; } .megamenu-title, header.site-header .megamenu-title, header.site-header.scrolled .megamenu-title { font-size: 0.88rem !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.25 !important; transition: color 0.2s ease !important; } .megamenu-desc, header.site-header .megamenu-desc, header.site-header.scrolled .megamenu-desc { font-size: 0.75rem !important; color: #64748B !important; line-height: 1.3 !important; font-weight: 500 !important; } /* Hover on item */ .megamenu-item:hover, header.site-header.scrolled .megamenu-item:hover { background: #F8FAFC !important; transform: translateX(3px) !important; } .megamenu-item:hover .megamenu-icon { background: #3882DB !important; color: #FFFFFF !important; } .megamenu-item:hover .megamenu-icon i, .megamenu-item:hover .megamenu-icon svg, .megamenu-item:hover .megamenu-icon [class*="fa-"] { color: #FFFFFF !important; fill: #FFFFFF !important; } .megamenu-item:hover .megamenu-title { color: #3882DB !important; } /* Mega Menu Bottom Bar */ .megamenu-footer-bar, header.site-header .megamenu-footer-bar, header.site-header.scrolled .megamenu-footer-bar, header.site-header nav.main-nav .megamenu-footer-bar { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid #E2E8F0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } header.site-header nav.main-nav .megamenu-footer-bar a, header.site-header nav.main-nav .megamenu-footer-bar a:link, header.site-header nav.main-nav .megamenu-footer-bar a:visited, header.site-header .megamenu-footer-bar a, .megamenu-footer-bar a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 0.88rem !important; font-weight: 700 !important; color: #2563EB !important; text-decoration: none !important; transition: all 0.2s ease !important; padding: 8px 20px !important; background: #EFF6FF !important; border-radius: 99px !important; border: 1px solid #DBEAFE !important; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08) !important; } header.site-header nav.main-nav .megamenu-footer-bar a:hover, header.site-header .megamenu-footer-bar a:hover, .megamenu-footer-bar a:hover { background: #2563EB !important; color: #FFFFFF !important; border-color: #2563EB !important; gap: 12px !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important; } header.site-header nav.main-nav .megamenu-footer-bar a span, .megamenu-footer-bar a span { color: inherit !important; font-weight: 700 !important; } header.site-header nav.main-nav .megamenu-footer-bar a i, .megamenu-footer-bar a i { color: inherit !important; font-size: 0.85rem !important; } h1, h2, h3 { line-height: 1.25 !important; } .geo-mobile-toggle { display: none !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #FFFFFF !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 20px !important; cursor: pointer !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } header.site-header.scrolled .geo-mobile-toggle, header:not([style*="background: transparent"]) .geo-mobile-toggle { background: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #0F172A !important; } /* HEADER CTA BUTTON - PROMINENT & LARGER */ header.site-header .btn-header, header.site-header .header-cta, .btn-header { background: linear-gradient(135deg, #3882DB 0%, #2563EB 100%) !important; color: #FFFFFF !important; font-weight: 800 !important; font-size: 1.02rem !important; padding: 14px 28px !important; border-radius: 99px !important; box-shadow: 0 6px 20px rgba(56, 130, 219, 0.4) !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; border: none !important; } header.site-header .btn-header:hover, header.site-header .header-cta:hover, .btn-header:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 10px 25px rgba(56, 130, 219, 0.6) !important; color: #FFFFFF !important; background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important; } .btn-primary, .btn-secondary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; line-height: 1 !important; vertical-align: middle !important; text-align: center !important; text-decoration: none !important; font-weight: 700 !important; border-radius: 99px !important; padding: 14px 28px !important; transition: all 0.3s ease !important; } .btn-primary { background-color: #D80058; color: #FFFFFF !important; border: none !important; } .btn-primary span, .btn-secondary span { display: inline-block !important; line-height: 1 !important; } .btn-primary i, .btn-secondary i { display: inline-flex !important; align-items: center !important; line-height: 1 !important; font-size: 0.9em !important; } .btn-primary:hover { background-color: #B50043; color: #FFFFFF !important; transform: translateY(-2px) !important; } .btn-secondary:hover { transform: translateY(-2px) !important; } /* ProvenExpert contrast overrides */ .pe_u, .pe_u > span, .pe_u a { color: #E2E8F0 !important; } /* MOBILE DRAWER STYLING & DESKTOP HIDING */ #mobileDrawer, .geo-mobile-drawer { display: none !important; } .geo-mobile-toggle, #mobileMenuToggle { display: none !important; } @media (max-width: 1180px) { .geo-mobile-toggle, #mobileMenuToggle { display: flex !important; align-items: center !important; justify-content: center !important; } #mobileDrawer, .geo-mobile-drawer { display: flex !important; position: fixed !important; top: 0 !important; right: 0 !important; width: 320px !important; max-width: 85vw !important; height: 100vh !important; background: #0F172A !important; z-index: 9999999 !important; padding: 24px !important; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important; flex-direction: column !important; transform: translateX(100%) !important; visibility: hidden !important; opacity: 0 !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; overflow-y: auto !important; } #mobileDrawer.active, #mobileDrawer.open, .geo-mobile-drawer.active, .geo-mobile-drawer.open { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; } header.site-header nav.main-nav, .site-header nav.main-nav, nav.main-nav { display: none !important; } .header-actions { display: none !important; } } @media (max-width: 576px) { header.site-header .btn-header, header.site-header .header-cta { display: none !important; } } /* BACK TO TOP BUTTON */ .geo-back-to-top { position: fixed !important; bottom: 25px !important; right: 25px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #3882DB !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 4px 16px rgba(56, 130, 219, 0.4) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; z-index: 99999 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; } .geo-back-to-top.visible { opacity: 1 !important; visibility: visible !important; } .geo-back-to-top:hover { transform: translateY(-4px) !important; background: #2563EB !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important; } /* UNIFIED GLOBAL HEADER NAV LINK STYLES */ header.site-header nav.main-nav a, header.site-header nav.main-nav a:link, header.site-header nav.main-nav a:visited, header.site-header nav.main-nav a:active, .site-header nav.main-nav a, .site-header nav.main-nav a:link, .site-header nav.main-nav a:visited, .site-header nav.main-nav a:active { color: #FFFFFF !important; text-decoration: none !important; font-weight: 600 !important; font-size: 16px !important; opacity: 0.95 !important; transition: all 0.2s ease !important; } header.site-header nav.main-nav a:hover, .site-header nav.main-nav a:hover { color: #3882DB !important; opacity: 1 !important; } header.site-header.scrolled nav.main-nav a, header.site-header.scrolled nav.main-nav a:link, header.site-header.scrolled nav.main-nav a:visited, header.site-header.scrolled nav.main-nav a:active, .site-header.scrolled nav.main-nav a, .site-header.scrolled nav.main-nav a:link, .site-header.scrolled nav.main-nav a:visited, .site-header.scrolled nav.main-nav a:active { color: #0F172A !important; } header.site-header.scrolled nav.main-nav a:hover, .site-header.scrolled nav.main-nav a:hover { color: #FF006E !important; } /* PREMIUM DROPDOWN MENU OVERRIDES (ALWAYS LIGHT MODE) */ header.site-header nav ul.dropdown-menu, header.site-header nav .dropdown-menu, header.site-header .main-nav ul.dropdown-menu, header.site-header .main-nav .dropdown-menu, header.site-header.scrolled nav ul.dropdown-menu, header.site-header.scrolled nav .dropdown-menu, header.site-header.scrolled .main-nav ul.dropdown-menu, header.site-header.scrolled .main-nav .dropdown-menu { background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12) !important; border-radius: 16px !important; padding: 8px !important; min-width: 280px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow: visible !important; } header.site-header nav ul.dropdown-menu li, header.site-header nav .dropdown-menu li, header.site-header .main-nav ul.dropdown-menu li, header.site-header .main-nav .dropdown-menu li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; } header.site-header nav ul.dropdown-menu a, header.site-header nav ul.dropdown-menu a:link, header.site-header nav ul.dropdown-menu a:visited, header.site-header nav .dropdown-menu a, header.site-header nav .dropdown-menu a:link, header.site-header nav .dropdown-menu a:visited, header.site-header .main-nav ul.dropdown-menu a, header.site-header .main-nav ul.dropdown-menu a:link, header.site-header .main-nav ul.dropdown-menu a:visited, header.site-header .main-nav .dropdown-menu a, header.site-header .main-nav .dropdown-menu a:link, header.site-header .main-nav .dropdown-menu a:visited, header.site-header.scrolled nav ul.dropdown-menu a, header.site-header.scrolled nav .dropdown-menu a, header.site-header.scrolled .main-nav ul.dropdown-menu a, header.site-header.scrolled .main-nav .dropdown-menu a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; color: #1E293B !important; font-size: 0.92rem !important; font-weight: 600 !important; border-radius: 10px !important; border-bottom: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; background: transparent !important; text-align: left !important; white-space: nowrap !important; text-decoration: none !important; } header.site-header nav ul.dropdown-menu a:hover, header.site-header nav .dropdown-menu a:hover, header.site-header .main-nav ul.dropdown-menu a:hover, header.site-header .main-nav .dropdown-menu a:hover, header.site-header.scrolled nav ul.dropdown-menu a:hover, header.site-header.scrolled nav .dropdown-menu a:hover, header.site-header.scrolled .main-nav ul.dropdown-menu a:hover, header.site-header.scrolled .main-nav .dropdown-menu a:hover { background: rgba(56, 130, 219, 0.08) !important; color: #3882DB !important; padding-left: 20px !important; } /* Desktop Nested Submenu Flyout (Webdesign, SEO & GEO - ALWAYS LIGHT) */ header.site-header nav ul.dropdown-menu li.has-submenu, nav.main-nav ul li .dropdown-menu li.has-submenu, .has-submenu { position: relative !important; } header.site-header nav ul.dropdown-menu li.has-submenu .dropdown-submenu, nav.main-nav ul li .dropdown-menu li.has-submenu .dropdown-submenu, .dropdown-submenu, header.site-header.scrolled nav ul.dropdown-menu li.has-submenu .dropdown-submenu, header.site-header.scrolled nav.main-nav ul li.has-submenu .dropdown-submenu, header.site-header.scrolled .dropdown-submenu { display: flex !important; position: absolute !important; top: 0 !important; left: 100% !important; margin-left: 6px !important; transform: translateX(8px) !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12) !important; border-radius: 14px !important; padding: 8px !important; min-width: 260px !important; flex-direction: column !important; gap: 2px !important; list-style: none !important; z-index: 100000 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important; } /* Hover bridge to prevent losing hover when moving mouse */ .dropdown-submenu::before { content: '' !important; position: absolute !important; top: 0 !important; left: -12px !important; width: 14px !important; height: 100% !important; background: transparent !important; } /* Show submenu on hover, focus, or open class */ header.site-header nav ul.dropdown-menu li.has-submenu:hover > .dropdown-submenu, nav.main-nav ul li .dropdown-menu li.has-submenu:hover > .dropdown-submenu, li.has-submenu:hover > .dropdown-submenu, li.has-submenu.open > .dropdown-submenu, li.has-submenu:focus-within > .dropdown-submenu { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(0) !important; } nav.main-nav ul li .dropdown-submenu li, .dropdown-submenu li { width: 100% !important; position: relative !important; } nav.main-nav ul li .dropdown-submenu a, nav.main-nav ul li .dropdown-submenu a:link, nav.main-nav ul li .dropdown-submenu a:visited, .dropdown-submenu a, header.site-header.scrolled nav.main-nav ul li .dropdown-submenu a, header.site-header.scrolled nav.main-nav ul li .dropdown-submenu a:link, header.site-header.scrolled nav.main-nav ul li .dropdown-submenu a:visited, header.site-header.scrolled .dropdown-submenu a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1E293B !important; white-space: nowrap !important; transition: all 0.2s ease !important; background: transparent !important; text-decoration: none !important; border: none !important; border-radius: 10px !important; } nav.main-nav ul li .dropdown-submenu a:hover, .dropdown-submenu a:hover, header.site-header.scrolled nav.main-nav ul li .dropdown-submenu a:hover, header.site-header.scrolled .dropdown-submenu a:hover { background: rgba(56, 130, 219, 0.08) !important; color: #3882DB !important; padding-left: 20px !important; } /* Header actions (CTA + Kundenportal) */ .header-actions { display: flex !important; align-items: center !important; gap: 12px !important; } .btn-header-kundenportal { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 22px !important; font-size: 0.95rem !important; font-weight: 700 !important; color: #FFFFFF !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 99px !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; white-space: nowrap !important; } .btn-header-kundenportal:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: #FFFFFF !important; transform: translateY(-2px) scale(1.02) !important; } header.site-header.scrolled .btn-header-kundenportal { color: #0F172A !important; background: rgba(15, 23, 42, 0.06) !important; border-color: rgba(15, 23, 42, 0.15) !important; } header.site-header.scrolled .btn-header-kundenportal:hover { background: rgba(15, 23, 42, 0.12) !important; border-color: rgba(15, 23, 42, 0.3) !important; } @media (max-width: 1180px) { .header-actions { display: none !important; } } /* GLOBAL ICON COLOR OVERRIDE: FORCE GREEN ICONS TO BRAND BLUE */ i.fa-check, i.fa-check-circle, i.fa-circle-check, i.fa-shield-halved, i.fa-universal-access, i.fa-floppy-disk, .pricing-card ul li i, .trust-item i.fa-check-circle { color: #3882DB !important; } /* MEGAMENU HOVER ICON COLOR FIX: ENSURE ALL ICONS BECOME CRISP WHITE ON BLUE BACKGROUND */ .megamenu-item:hover .megamenu-icon i, .megamenu-item:hover .megamenu-icon svg, .megamenu-item:hover .megamenu-icon [class*="fa-"], header.site-header .megamenu-item:hover .megamenu-icon i, header.site-header.scrolled .megamenu-item:hover .megamenu-icon i, header.site-header .megamenu-item:hover .megamenu-icon [class*="fa-"], .megamenu-item:hover .megamenu-icon i.fa-shield-halved, .megamenu-item:hover .megamenu-icon i.fa-universal-access, .megamenu-item:hover .megamenu-icon i.fa-check, .megamenu-item:hover .megamenu-icon i.fa-circle-check { color: #FFFFFF !important; fill: #FFFFFF !important; } .geo-mobile-drawer { position: fixed !important; top: 0 !important; right: -100% !important; width: 100% !important; max-width: 400px !important; height: 100vh !important; background: #0F172A !important; color: #FFFFFF !important; z-index: 1000000 !important; padding: 24px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important; transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; overflow-y: auto !important; } .geo-mobile-drawer.active { right: 0 !important; } .mobile-drawer-header { display: flex !important; align-items: center !important; justify-content: flex-end !important; padding-bottom: 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .geo-mobile-close { background: rgba(255, 255, 255, 0.1) !important; border: none !important; color: #FFFFFF !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 20px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobile-drawer-nav { margin: 20px 0 !important; flex-grow: 1 !important; } .mobile-drawer-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .mobile-drawer-nav li { margin-bottom: 14px !important; } .mobile-drawer-nav a, .mobile-drawer-nav a:link, .mobile-drawer-nav a:visited { font-size: 1.15rem !important; font-weight: 700 !important; color: #FFFFFF !important; text-decoration: none !important; display: flex !important; align-items: center !important; } .mobile-drawer-nav a:hover { color: #3882DB !important; } .mobile-dropdown-header { display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; width: 100% !important; } .mobile-dropdown-label, .mobile-dropdown-link { font-size: 1.15rem !important; font-weight: 700 !important; color: #FFFFFF !important; text-decoration: none !important; } .mobile-dropdown-toggle { background: transparent !important; border: none !important; color: #FFFFFF !important; font-size: 1rem !important; cursor: pointer !important; padding: 6px 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.25s ease !important; } .mobile-dropdown.active > .mobile-dropdown-header .mobile-dropdown-toggle i { transform: rotate(180deg) !important; } .hero-section-home { background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.6) 40%, rgba(15, 23, 42, 0.85) 75%, #0F172A 100%), url('/images/webdesign-berlin.webp') center right/cover no-repeat !important; } @media (max-width: 768px) { .hero-section-home { background: #0F172A !important; } } .mobile-sub-menu { display: none !important; padding: 4px 0 8px 16px !important; margin-top: 6px !important; margin-bottom: 8px !important; list-style: none !important; border-left: 2px solid rgba(255, 255, 255, 0.12) !important; } .mobile-dropdown.active > .mobile-sub-menu { display: block !important; } .mobile-group-header { font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #3882DB !important; padding: 8px 0 2px 0 !important; list-style: none !important; } .mobile-sub-menu a, .mobile-sub-menu a:link, .mobile-sub-menu a:visited { font-size: 0.95rem !important; font-weight: 500 !important; color: #CBD5E1 !important; padding: 6px 0 !important; display: block !important; text-decoration: none !important; transition: color 0.2s ease !important; } .mobile-sub-menu a:hover, .mobile-sub-menu a:active { color: #FF006E !important; } /* UNIFIED PREMIUM FOOTER STYLES */ footer.site-footer, footer.master-footer, .master-footer { background-color: #070A13 !important; padding: 80px 0 40px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94A3B8 !important; font-family: inherit !important; display: block !important; } footer.site-footer .geo-container, footer.master-footer .geo-container, .master-footer .geo-container, footer.site-footer .container, footer.master-footer .container { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding: 0 24px !important; box-sizing: border-box !important; } footer.site-footer .footer-grid, footer.master-footer .footer-grid, .master-footer .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1.5fr !important; gap: 60px !important; margin-bottom: 60px !important; } @media (max-width: 992px) { footer.site-footer .footer-grid, footer.master-footer .footer-grid, .master-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; } } @media (max-width: 576px) { footer.site-footer .footer-grid, footer.master-footer .footer-grid, .master-footer .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; } } footer.site-footer h3, footer.site-footer h4, footer.master-footer h3, footer.master-footer h4, .master-footer h3, .master-footer h4, footer.site-footer .footer-title, footer.site-footer .footer-col .footer-title { color: #FFFFFF !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; margin-top: 0 !important; margin-bottom: 20px !important; } footer.site-footer p, footer.master-footer p, .master-footer p { color: #94A3B8 !important; font-size: 14.5px !important; line-height: 1.65 !important; margin: 0 0 16px 0 !important; } footer.site-footer ul, footer.master-footer ul, .master-footer ul { list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 0 !important; } footer.site-footer li, footer.master-footer li, .master-footer li { margin-bottom: 12px !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; } footer.site-footer li::before, footer.master-footer li::before, .master-footer li::before { content: none !important; } footer.site-footer a, footer.site-footer a:link, footer.site-footer a:visited, footer.site-footer a:active, .site-footer a, .site-footer a:link, .site-footer a:visited, .site-footer a:active, footer.master-footer a, footer.master-footer a:link, footer.master-footer a:visited, footer.master-footer a:active, .master-footer a, .master-footer a:link, .master-footer a:visited, .master-footer a:active { color: #94A3B8 !important; text-decoration: none !important; transition: color 0.25s ease !important; font-size: 14.5px !important; font-weight: 500 !important; } footer.site-footer a:hover, .site-footer a:hover, footer.master-footer a:hover, .master-footer a:hover { color: #3882DB !important; text-decoration: none !important; } footer.site-footer .footer-bottom, .site-footer .footer-bottom, footer.master-footer .footer-bottom, .master-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 30px 24px 0 24px !important; text-align: center !important; font-size: 13.5px !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } footer.site-footer .footer-bottom p, .site-footer .footer-bottom p, footer.master-footer .footer-bottom p, .master-footer .footer-bottom p { text-align: center !important; margin: 0 !important; color: #64748B !important; } footer.site-footer .footer-bottom a, footer.site-footer .footer-bottom a:link, footer.site-footer .footer-bottom a:visited, footer.site-footer .footer-bottom a:active, .site-footer .footer-bottom a, .site-footer .footer-bottom a:link, .site-footer .footer-bottom a:visited, .site-footer .footer-bottom a:active, footer.master-footer .footer-bottom a, footer.master-footer .footer-bottom a:link, footer.master-footer .footer-bottom a:visited, footer.master-footer .footer-bottom a:active, .master-footer .footer-bottom a, .master-footer .footer-bottom a:link, .master-footer .footer-bottom a:visited, .master-footer .footer-bottom a:active { color: #94A3B8 !important; margin: 0 8px !important; text-decoration: none !important; } footer.site-footer .footer-bottom a:hover, .site-footer .footer-bottom a:hover, footer.master-footer .footer-bottom a:hover, .master-footer .footer-bottom a:hover { color: #FF006E !important; text-decoration: underline !important; } /* GLOBAL BACK TO TOP BUTTON STYLES */ .geo-back-to-top { position: fixed !important; bottom: 30px !important; right: 30px !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: linear-gradient(135deg, #3882DB 0%, #2563EB 100%) !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 10px 25px rgba(56, 130, 219, 0.4) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; z-index: 99999 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; } .geo-back-to-top.visible { opacity: 1 !important; visibility: visible !important; } .geo-back-to-top:hover { transform: translateY(-4px) scale(1.05) !important; box-shadow: 0 15px 30px rgba(56, 130, 219, 0.6) !important; } /* GLOBAL FLOATING CONTACT PILL STYLES */ .geo-floating-contact-pill-right { position: fixed !important; right: 24px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 40px !important; padding: 12px 10px !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; width: 60px !important; z-index: 999999 !important; transition: all 0.3s ease !important; } @media (max-width: 1180px) { .geo-floating-contact-pill-right { position: fixed !important; top: auto !important; bottom: 12px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: calc(100% - 28px) !important; max-width: 360px !important; height: 54px !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 6px 14px !important; border-radius: 99px !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.22), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important; gap: 0 !important; z-index: 999999 !important; } .geo-floating-contact-pill-right .pill-avatar img { width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #FFFFFF !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important; } .geo-floating-contact-pill-right .pill-icon-link { width: 42px !important; height: 42px !important; font-size: 19px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } .geo-floating-contact-pill-right .pill-divider { width: 1px !important; height: 22px !important; background: #E2E8F0 !important; margin: 0 2px !important; } } @media (min-width: 769px) and (max-width: 1180px) { .geo-back-to-top { bottom: 76px !important; right: 14px !important; } .geo-cookie-trigger { bottom: 76px !important; left: 14px !important; } } @media (max-width: 768px) { .geo-back-to-top, #backToTopBtn, .geo-cookie-trigger, #cookieTriggerBtn { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } .geo-floating-contact-pill-right .pill-avatar img { width: 42px !important; height: 42px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #FFFFFF !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important; margin: 0 !important; display: block !important; } .geo-floating-contact-pill-right .pill-icon-link, .geo-floating-contact-pill-right .pill-icon-link i { color: #FF006E !important; } .geo-floating-contact-pill-right .pill-icon-link { font-size: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; transition: all 0.2s ease !important; text-decoration: none !important; } .geo-floating-contact-pill-right .pill-icon-link:hover, .geo-floating-contact-pill-right .pill-icon-link:hover i { color: #3882DB !important; transform: scale(1.15) !important; background: rgba(56, 130, 219, 0.08) !important; } .geo-floating-contact-pill-right .pill-divider { width: 24px !important; height: 1px !important; background: #E2E8F0 !important; margin: 0 !important; } .geo-floating-contact-pill-right .pill-calendar-btn-blue, .geo-floating-contact-pill-right .pill-calendar-btn-blue i { color: #FF006E !important; } .geo-floating-contact-pill-right .pill-calendar-btn-blue:hover, .geo-floating-contact-pill-right .pill-calendar-btn-blue:hover i { color: #3882DB !important; background: rgba(56, 130, 219, 0.08) !important; } /* GLOBAL COOKIE BANNER & TRIGGER STYLES */ .geo-cookie-trigger { position: fixed !important; bottom: 24px !important; left: 24px !important; width: 52px !important; height: 52px !important; background: #0F172A !important; border: 2px solid #FF006E !important; color: #FF006E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; cursor: pointer !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4) !important; z-index: 999999 !important; transition: all 0.3s ease !important; } .geo-cookie-trigger:hover { transform: translateY(-3px) scale(1.1) !important; background: #FF006E !important; color: #FFFFFF !important; border-color: #FF006E !important; } .geo-cookie-trigger.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(20px) !important; } @media (max-width: 768px) { .geo-cookie-trigger, #cookieTriggerBtn { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* PRIVACY & COOKIE MODAL - CENTERED IN WINDOW WITH BACKDROP OVERLAY */ .geo-cookie-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(7, 10, 19, 0.75) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 10000000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .geo-cookie-modal.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; } .geo-cookie-card { width: 100% !important; max-width: 880px !important; max-height: 92vh !important; overflow-y: auto !important; background: #111622 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 24px !important; padding: 36px 40px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2) !important; color: #FFFFFF !important; transform: scale(1) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .geo-cookie-modal.hidden .geo-cookie-card { transform: scale(0.96) !important; } .geo-cookie-header { display: flex !important; flex-direction: column !important; gap: 12px !important; } .geo-cookie-title-row { display: flex !important; align-items: center !important; gap: 12px !important; } .geo-cookie-icon-shield { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; flex-shrink: 0 !important; } .geo-cookie-heading { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #FFFFFF !important; margin: 0 !important; line-height: 1.2 !important; } .geo-cookie-description { color: #94A3B8 !important; font-size: 0.95rem !important; line-height: 1.55 !important; margin: 0 !important; } .geo-cookie-link { color: #FF006E !important; text-decoration: underline !important; font-weight: 600 !important; transition: color 0.2s ease !important; } .geo-cookie-link:hover { color: #FF3388 !important; } .geo-cookie-divider { height: 1px !important; width: 100% !important; background: rgba(255, 255, 255, 0.08) !important; margin: 22px 0 24px 0 !important; } .geo-cookie-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; margin-bottom: 28px !important; } .geo-cookie-item { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 20px 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; transition: border-color 0.2s ease, background 0.2s ease !important; } .geo-cookie-item:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.14) !important; } .geo-cookie-item-top { display: flex !important; align-items: center !important; justify-content: space-between !important; } .geo-cookie-item-label { font-size: 1.05rem !important; font-weight: 700 !important; color: #FFFFFF !important; } .geo-cookie-item-desc { font-size: 0.88rem !important; color: #94A3B8 !important; line-height: 1.45 !important; margin: 0 !important; } /* TOGGLE SWITCHES */ .geo-switch { position: relative !important; display: inline-block !important; width: 48px !important; height: 26px !important; cursor: pointer !important; flex-shrink: 0 !important; margin: 0 !important; } .geo-switch input { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; } .geo-slider { position: absolute !important; cursor: pointer !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: #2D3748 !important; border-radius: 99px !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .geo-slider::before { position: absolute !important; content: "" !important; height: 20px !important; width: 20px !important; left: 3px !important; bottom: 3px !important; background-color: #FFFFFF !important; border-radius: 50% !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .geo-switch input:checked + .geo-slider { background-color: #FF006E !important; box-shadow: 0 0 16px rgba(255, 0, 110, 0.6) !important; } .geo-switch input:checked + .geo-slider::before { transform: translateX(22px) !important; } .geo-switch-disabled { cursor: not-allowed !important; opacity: 0.9 !important; } .geo-switch input:disabled + .geo-slider, .geo-switch input:checked:disabled + .geo-slider, .geo-switch-disabled .geo-slider, .geo-switch-disabled input + .geo-slider, .geo-switch-disabled input:checked + .geo-slider { background-color: #2A3444 !important; box-shadow: none !important; cursor: not-allowed !important; } .geo-switch input:disabled + .geo-slider::before, .geo-switch input:checked:disabled + .geo-slider::before, .geo-switch-disabled .geo-slider::before, .geo-switch-disabled input + .geo-slider::before, .geo-switch-disabled input:checked + .geo-slider::before { background-color: #8C99A8 !important; transform: translateX(22px) !important; } /* COOKIE FOOTER BUTTONS */ .geo-cookie-footer { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; flex-wrap: wrap !important; } .btn-cookie-primary { background: linear-gradient(135deg, #FF006E 0%, #D80058 100%) !important; color: #FFFFFF !important; border: none !important; border-radius: 99px !important; padding: 13px 32px !important; font-weight: 700 !important; font-size: 0.95rem !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(255, 0, 110, 0.45) !important; transition: all 0.25s ease !important; outline: none !important; } .btn-cookie-primary:hover { box-shadow: 0 6px 25px rgba(255, 0, 110, 0.65) !important; transform: translateY(-2px) !important; } .btn-cookie-secondary { background: #182030 !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 99px !important; padding: 13px 26px !important; font-weight: 700 !important; font-size: 0.95rem !important; cursor: pointer !important; transition: all 0.25s ease !important; outline: none !important; } .btn-cookie-secondary:hover { background: #242E44 !important; border-color: rgba(255, 255, 255, 0.25) !important; transform: translateY(-2px) !important; } @media (max-width: 860px) { .geo-cookie-modal { padding: 16px 12px !important; } .geo-cookie-card { padding: 22px 18px !important; max-height: 90vh !important; border-radius: 20px !important; } .geo-cookie-heading { font-size: 1.05rem !important; letter-spacing: 0.02em !important; word-break: break-word !important; } .geo-cookie-description { font-size: 0.82rem !important; line-height: 1.45 !important; } .geo-cookie-grid { grid-template-columns: 1fr !important; gap: 10px !important; max-height: 38vh !important; overflow-y: auto !important; padding-right: 4px !important; } .geo-cookie-item { padding: 12px 14px !important; } .geo-cookie-item-label { font-size: 0.95rem !important; } .geo-cookie-item-desc { font-size: 0.78rem !important; } .geo-cookie-footer { flex-direction: column !important; gap: 8px !important; margin-top: 14px !important; } .btn-cookie-primary, .btn-cookie-secondary { width: 100% !important; text-align: center !important; padding: 11px 16px !important; font-size: 0.88rem !important; } } /* GLOBAL OVERRIDE FOR LARGER LOGO */ .brand-logo img, #headerLogo, #headerLogoMobile { width: 80px !important; height: 80px !important; max-height: 80px !important; object-fit: contain !important; } /* FAQ Accordion Styles */ /* ========================================================================== UNIFIED GLOBAL FAQ & TOGGLE STYLES (Strictly identical across all pages) Matching Reference: 14px radius, #E2E8F0 border, 28px circular button, #3882DB active border, 0 4px 16px rgba(56, 130, 219, 0.08) active shadow, rotated chevron-down (\f078) to chevron-up. ========================================================================== */ .editorial-faq-container, .faq-container, .faq-list, .home-faq-list, .geo-faq-container, .geo-faq-accordion, .seo-faq-container, .wpagent-faq-list, .wpbuild-faq-list, .pflege-faq-list, .pakete-faq-list, .beispiele-faq-container, .mieten-faq-container, .toggles, .toggles--minimal-shadow, .faq-category-block { max-width: 880px !important; width: 100% !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } .faq-category-block.is-hidden, .faq-category-block[style*="display: none"], .faq-category-block[style*="display:none"], .faq-item.is-hidden, .faq-item[style*="display: none"], .faq-item[style*="display:none"] { display: none !important; } .editorial-faq-item, .faq-item, .home-faq-item, .geo-faq-item, .seo-faq-item, .wpagent-faq-item, .wpbuild-faq-item, .pflege-faq-item, .pakete-faq-item, .toggle, details.faq-item, .faq-accordion details { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; overflow: hidden !important; margin-bottom: 0 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important; } .editorial-faq-item:hover, .faq-item:hover, .home-faq-item:hover, .geo-faq-item:hover, .seo-faq-item:hover, .wpagent-faq-item:hover, .wpbuild-faq-item:hover, .pflege-faq-item:hover, .pakete-faq-item:hover, .toggle:hover, details.faq-item:hover, .faq-accordion details:hover { border-color: #CBD5E1 !important; transform: none !important; } /* Active / Open state for Accordion Card */ .editorial-faq-item.active, .editorial-faq-item.is-active, .editorial-faq-item.open, .editorial-faq-item[open], .faq-item.active, .faq-item.is-active, .faq-item.open, .faq-item[open], .faq-item:has(.faq-trigger.active), .faq-item:has(.faq-trigger.is-active), .faq-item:has(.faq-trigger[aria-expanded="true"]), .home-faq-item.active, .home-faq-item.is-active, .home-faq-item.open, .geo-faq-item.active, .geo-faq-item.is-active, .geo-faq-item.open, .seo-faq-item.active, .seo-faq-item.is-active, .seo-faq-item.open, .wpagent-faq-item.active, .wpagent-faq-item.is-active, .wpagent-faq-item.open, .wpbuild-faq-item.active, .wpbuild-faq-item.is-active, .wpbuild-faq-item.open, .pflege-faq-item.active, .pflege-faq-item.is-active, .pflege-faq-item.open, .pakete-faq-item.active, .pakete-faq-item.is-active, .pakete-faq-item.open, .toggle.active, .toggle.is-active, .toggle.open, details.faq-item[open], .faq-accordion details[open] { border-color: #3882DB !important; box-shadow: 0 4px 16px rgba(56, 130, 219, 0.08) !important; } /* Trigger / Button styling */ .editorial-faq-trigger, .faq-trigger, .home-faq-trigger, .geo-faq-trigger, .seo-faq-trigger, .wpagent-faq-trigger, .wpbuild-faq-trigger, .pflege-faq-trigger, .pakete-faq-trigger, .toggle-heading, .toggle-title, details.faq-item > summary, .faq-accordion details > summary { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; text-align: left !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 1.08rem !important; font-weight: 700 !important; color: #0F172A !important; cursor: pointer !important; gap: 16px !important; margin: 0 !important; list-style: none !important; box-sizing: border-box !important; text-decoration: none !important; } details.faq-item > summary::-webkit-details-marker, .faq-accordion details > summary::-webkit-details-marker { display: none !important; } details.faq-item > summary::marker, .faq-accordion details > summary::marker { display: none !important; } .editorial-faq-trigger:hover, .faq-trigger:hover, .home-faq-trigger:hover, .geo-faq-trigger:hover, .seo-faq-trigger:hover, .wpagent-faq-trigger:hover, .wpbuild-faq-trigger:hover, .pflege-faq-trigger:hover, .pakete-faq-trigger:hover, .toggle-heading:hover, .toggle-title:hover { background: transparent !important; color: #0F172A !important; } .editorial-faq-trigger > span, .faq-trigger > span, .home-faq-trigger > span, .geo-faq-trigger > span, .seo-faq-trigger > span, .wpagent-faq-trigger > span, .wpbuild-faq-trigger > span, .pflege-faq-trigger > span, .pakete-faq-trigger > span, .toggle-heading > span, details.faq-item > summary > span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; color: #0F172A !important; flex: 1 !important; text-align: left !important; } /* 28px Circle Icon Badge */ .editorial-faq-icon, .faq-icon, .geo-faq-icon, .seo-faq-icon, .toggle-icon, .faq-trigger > i, .home-faq-trigger > i, .geo-faq-trigger > i, .seo-faq-trigger > i, .wpagent-faq-trigger > i, .wpbuild-faq-trigger > i, .pflege-faq-trigger > i, .pakete-faq-trigger > i, .toggle-heading > i { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; border-radius: 50% !important; background: #F1F5F9 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #3882DB !important; font-size: 0 !important; /* Hides raw '+' text in legacy spans */ transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease !important; flex-shrink: 0 !important; margin: 0 0 0 16px !important; padding: 0 !important; box-sizing: border-box !important; line-height: 1 !important; border: none !important; } .editorial-faq-icon > i, .faq-icon > i, .geo-faq-icon > i, .seo-faq-icon > i, .toggle-icon > i { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; background: transparent !important; color: inherit !important; font-size: 0.85rem !important; margin: 0 !important; display: inline-block !important; transition: none !important; line-height: 1 !important; } /* Overriding pseudo-element so all icons display FontAwesome chevron-down */ .editorial-faq-icon::before, .faq-icon::before, .geo-faq-icon::before, .seo-faq-icon::before, .toggle-icon::before, .editorial-faq-icon i::before, .faq-icon i::before, .geo-faq-icon i::before, .seo-faq-icon i::before, .toggle-icon i::before, .editorial-faq-icon:empty::before, .faq-icon:empty::before, .geo-faq-icon:empty::before, .seo-faq-icon:empty::before, .toggle-icon:empty::before, .faq-trigger > i::before, .editorial-faq-trigger > i::before, .home-faq-trigger > i::before, .geo-faq-trigger > i::before, .seo-faq-trigger > i::before, .wpagent-faq-trigger > i::before, .wpbuild-faq-trigger > i::before, .pflege-faq-trigger > i::before, .pakete-faq-trigger > i::before, .toggle-heading > i::before { content: "\f078" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 0.85rem !important; display: inline-block !important; line-height: 1 !important; color: #3882DB !important; } /* If an inner exists inside .faq-icon, suppress the duplicate outer pseudo-element */ .editorial-faq-icon:has(i)::before, .faq-icon:has(i)::before, .geo-faq-icon:has(i)::before, .seo-faq-icon:has(i)::before, .toggle-icon:has(i)::before { display: none !important; } /* Base rotation: always 0deg, never 45deg */ .faq-icon, .editorial-faq-icon, .geo-faq-icon, .seo-faq-icon, .toggle-icon, .faq-trigger > i, .editorial-faq-trigger > i, .home-faq-trigger > i, .geo-faq-trigger > i, .seo-faq-trigger > i, .wpagent-faq-trigger > i, .wpbuild-faq-trigger > i, .pflege-faq-trigger > i, .pakete-faq-trigger > i, .toggle-heading > i { transform: rotate(0deg) !important; } /* Pseudo-element for details summary */ details.faq-item > summary::after, .faq-accordion details > summary::after { content: "\f078" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #F1F5F9 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #3882DB !important; font-size: 0.85rem !important; transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease !important; flex-shrink: 0 !important; margin-left: 16px !important; } /* Active / Rotated Icon State: ALWAYS 180 DEGREE FLIP TO ARROW-UP, NEVER 45 DEGREE CROSS */ .editorial-faq-item.active .editorial-faq-icon, .editorial-faq-item.is-active .editorial-faq-icon, .editorial-faq-item.open .editorial-faq-icon, .editorial-faq-item[open] .editorial-faq-icon, .faq-item.active .faq-icon, .faq-item.is-active .faq-icon, .faq-item.open .faq-icon, .faq-item[open] .faq-icon, .faq-item.active .faq-trigger > i, .faq-item.is-active .faq-trigger > i, .faq-item.open .faq-trigger > i, .home-faq-item.active .home-faq-trigger > i, .home-faq-item.is-active .home-faq-trigger > i, .home-faq-item.open .home-faq-trigger > i, .geo-faq-item.active .geo-faq-icon, .geo-faq-item.is-active .geo-faq-icon, .geo-faq-item.open .geo-faq-icon, .geo-faq-item.active .geo-faq-trigger > i, .geo-faq-item.is-active .geo-faq-trigger > i, .geo-faq-item.open .geo-faq-trigger > i, .seo-faq-item.active .seo-faq-icon, .seo-faq-item.is-active .seo-faq-icon, .seo-faq-item.open .seo-faq-icon, .seo-faq-item.active .seo-faq-trigger > i, .seo-faq-item.is-active .seo-faq-trigger > i, .seo-faq-item.open .seo-faq-trigger > i, .wpagent-faq-item.active .faq-icon, .wpagent-faq-item.is-active .faq-icon, .wpagent-faq-item.open .faq-icon, .wpagent-faq-item.active .wpagent-faq-trigger > i, .wpagent-faq-item.is-active .wpagent-faq-trigger > i, .wpagent-faq-item.open .wpagent-faq-trigger > i, .wpbuild-faq-item.active .wpbuild-faq-trigger > i, .wpbuild-faq-item.is-active .wpbuild-faq-trigger > i, .wpbuild-faq-item.open .wpbuild-faq-trigger > i, .pflege-faq-item.active .pflege-faq-trigger > i, .pflege-faq-item.is-active .pflege-faq-trigger > i, .pflege-faq-item.open .pflege-faq-trigger > i, .pakete-faq-item.active .pakete-faq-trigger > i, .pakete-faq-item.is-active .pakete-faq-trigger > i, .pakete-faq-item.open .pakete-faq-trigger > i, .toggle.active .toggle-icon, .toggle.is-active .toggle-icon, .toggle.open .toggle-icon, .toggle.active .toggle-heading > i, .toggle.is-active .toggle-heading > i, .toggle.open .toggle-heading > i, .faq-trigger.active > i, .faq-trigger.is-active > i, .faq-trigger.active .faq-icon, .faq-trigger.is-active .faq-icon, .editorial-faq-trigger.active .editorial-faq-icon, .editorial-faq-trigger.is-active .editorial-faq-icon, .editorial-faq-trigger[aria-expanded="true"] .editorial-faq-icon, .faq-trigger[aria-expanded="true"] .faq-icon, .faq-trigger[aria-expanded="true"] > i, details.faq-item[open] > summary::after, .faq-accordion details[open] > summary::after, details.faq-item[open] .faq-icon, .faq-accordion details[open] .faq-icon { transform: rotate(180deg) !important; background-color: #3882DB !important; color: #FFFFFF !important; } .editorial-faq-item.active .editorial-faq-icon::before, .editorial-faq-item.is-active .editorial-faq-icon::before, .editorial-faq-item.open .editorial-faq-icon::before, .editorial-faq-item.active .editorial-faq-icon i::before, .editorial-faq-item.is-active .editorial-faq-icon i::before, .editorial-faq-item.open .editorial-faq-icon i::before, .faq-item.active .faq-icon::before, .faq-item.is-active .faq-icon::before, .faq-item.open .faq-icon::before, .faq-item.active .faq-icon i::before, .faq-item.is-active .faq-icon i::before, .faq-item.open .faq-icon i::before, .faq-item.active .faq-trigger > i::before, .faq-item.is-active .faq-trigger > i::before, .faq-item.open .faq-trigger > i::before, .home-faq-item.active .home-faq-trigger > i::before, .home-faq-item.is-active .home-faq-trigger > i::before, .home-faq-item.open .home-faq-trigger > i::before, .geo-faq-item.active .geo-faq-icon::before, .geo-faq-item.is-active .geo-faq-icon::before, .geo-faq-item.open .geo-faq-icon::before, .geo-faq-item.active .geo-faq-trigger > i::before, .geo-faq-item.is-active .geo-faq-trigger > i::before, .geo-faq-item.open .geo-faq-trigger > i::before, .seo-faq-item.active .seo-faq-icon::before, .seo-faq-item.is-active .seo-faq-icon::before, .seo-faq-item.open .seo-faq-icon::before, .seo-faq-item.active .seo-faq-trigger > i::before, .seo-faq-item.is-active .seo-faq-trigger > i::before, .seo-faq-item.open .seo-faq-trigger > i::before, .wpagent-faq-item.active .faq-icon::before, .wpagent-faq-item.is-active .faq-icon::before, .wpagent-faq-item.open .faq-icon::before, .wpagent-faq-item.active .wpagent-faq-trigger > i::before, .wpagent-faq-item.is-active .wpagent-faq-trigger > i::before, .wpagent-faq-item.open .wpagent-faq-trigger > i::before, .wpbuild-faq-item.active .wpbuild-faq-trigger > i::before, .wpbuild-faq-item.is-active .wpbuild-faq-trigger > i::before, .wpbuild-faq-item.open .wpbuild-faq-trigger > i::before, .pflege-faq-item.active .pflege-faq-trigger > i::before, .pflege-faq-item.is-active .pflege-faq-trigger > i::before, .pflege-faq-item.open .pflege-faq-trigger > i::before, .pakete-faq-item.active .pakete-faq-trigger > i::before, .pakete-faq-item.is-active .pakete-faq-trigger > i::before, .pakete-faq-item.open .pakete-faq-trigger > i::before, .toggle.active .toggle-icon::before, .toggle.is-active .toggle-icon::before, .toggle.open .toggle-icon::before, .toggle.active .toggle-heading > i::before, .toggle.is-active .toggle-heading > i::before, .toggle.open .toggle-heading > i::before, .faq-trigger.active > i::before, .faq-trigger.is-active > i::before, .faq-trigger.active .faq-icon::before, .faq-trigger.is-active .faq-icon::before, .faq-trigger.active .faq-icon i::before, .faq-trigger.is-active .faq-icon i::before, .editorial-faq-trigger.active .editorial-faq-icon::before, .editorial-faq-trigger.is-active .editorial-faq-icon::before, .editorial-faq-trigger.active .editorial-faq-icon i::before, .editorial-faq-trigger.is-active .editorial-faq-icon i::before, .editorial-faq-trigger[aria-expanded="true"] .editorial-faq-icon::before, .editorial-faq-trigger[aria-expanded="true"] .editorial-faq-icon i::before, .faq-trigger[aria-expanded="true"] .faq-icon::before, .faq-trigger[aria-expanded="true"] .faq-icon i::before, .faq-trigger[aria-expanded="true"] > i::before, details.faq-item[open] > summary::after, .faq-accordion details[open] > summary::after { color: #FFFFFF !important; } /* Panel / Content Styles */ .editorial-faq-content, .faq-panel, .faq-body, .home-faq-panel, .geo-faq-panel, .geo-faq-panel-content, .seo-faq-panel, .seo-faq-panel-content, .wpagent-faq-panel, .wpagent-faq-panel-content, .wpbuild-faq-panel, .wpbuild-faq-panel-content, .pflege-faq-panel, .pflege-faq-panel-content, .pakete-faq-panel, .pakete-faq-panel-content, .toggle-content, .toggles-content { padding: 0 24px 22px 24px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.98rem !important; line-height: 1.68 !important; color: #475569 !important; background: transparent !important; border-top: none !important; box-sizing: border-box !important; } /* Panel hidden state */ .editorial-faq-item:not(.active):not(.is-active):not(.open):not([open]) .editorial-faq-content, .faq-item:not(.active):not(.is-active):not(.open):not([open]) .faq-panel, .faq-item:not(.active):not(.is-active):not(.open):not([open]) .faq-body, .home-faq-item:not(.active):not(.is-active):not(.open):not([open]) .home-faq-panel, .geo-faq-item:not(.active):not(.is-active):not(.open):not([open]) .geo-faq-panel, .seo-faq-item:not(.active):not(.is-active):not(.open):not([open]) .seo-faq-panel, .wpagent-faq-item:not(.active):not(.is-active):not(.open):not([open]) .wpagent-faq-panel, .wpbuild-faq-item:not(.active):not(.is-active):not(.open):not([open]) .wpbuild-faq-panel, .pflege-faq-item:not(.active):not(.is-active):not(.open):not([open]) .pflege-faq-panel, .pakete-faq-item:not(.active):not(.is-active):not(.open):not([open]) .pakete-faq-panel, .toggle:not(.active):not(.is-active):not(.open):not([open]) .toggle-content { display: none !important; max-height: 0 !important; overflow: hidden !important; } /* Panel active/open state */ .editorial-faq-item.active .editorial-faq-content, .editorial-faq-item.is-active .editorial-faq-content, .editorial-faq-item.open .editorial-faq-content, .faq-item.active .faq-panel, .faq-item.is-active .faq-panel, .faq-item.open .faq-panel, .faq-item.active .faq-body, .faq-item.is-active .faq-body, .faq-item.open .faq-body, .home-faq-item.active .home-faq-panel, .home-faq-item.is-active .home-faq-panel, .home-faq-item.open .home-faq-panel, .geo-faq-item.active .geo-faq-panel, .geo-faq-item.is-active .geo-faq-panel, .geo-faq-item.open .geo-faq-panel, .seo-faq-item.active .seo-faq-panel, .seo-faq-item.is-active .seo-faq-panel, .seo-faq-item.open .seo-faq-panel, .wpagent-faq-item.active .wpagent-faq-panel, .wpagent-faq-item.is-active .wpagent-faq-panel, .wpagent-faq-item.open .wpagent-faq-panel, .wpbuild-faq-item.active .wpbuild-faq-panel, .wpbuild-faq-item.is-active .wpbuild-faq-panel, .wpbuild-faq-item.open .wpbuild-faq-panel, .pflege-faq-item.active .pflege-faq-panel, .pflege-faq-item.is-active .pflege-faq-panel, .pflege-faq-item.open .pflege-faq-panel, .pakete-faq-item.active .pakete-faq-panel, .pakete-faq-item.is-active .pakete-faq-panel, .pakete-faq-item.open .pakete-faq-panel, .toggle.active .toggle-content, .toggle.is-active .toggle-content, .toggle.open .toggle-content, details.faq-item[open] > :not(summary), .faq-accordion details[open] > :not(summary) { display: block !important; max-height: none !important; opacity: 1 !important; overflow: visible !important; } .editorial-faq-content p, .faq-panel p, .faq-body p, .geo-faq-panel p, .home-faq-panel p, .pflege-faq-panel p, .pakete-faq-panel p, .wpagent-faq-panel p, .wpbuild-faq-panel p, .toggle-content p { margin: 0 0 12px 0 !important; color: #475569 !important; font-size: 0.98rem !important; line-height: 1.68 !important; } .editorial-faq-content p:last-child, .faq-panel p:last-child, .faq-body p:last-child, .geo-faq-panel p:last-child, .home-faq-panel p:last-child, .pflege-faq-panel p:last-child, .pakete-faq-panel p:last-child, .wpagent-faq-panel p:last-child, .wpbuild-faq-panel p:last-child, .toggle-content p:last-child { margin-bottom: 0 !important; } /* Resources grid (3 on top, 3 below) */ .resources-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; } @media (max-width: 992px) { .resources-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .resources-grid { grid-template-columns: 1fr !important; } } /* ========================================== PRICING & WEBDESIGN-PREISE STYLES ========================================== */ .pricing-toggle-container { display: flex; flex-direction: column; align-items: center; margin: 0 auto 48px; position: relative; } .badge-jetzt-neu { position: absolute; top: -26px; right: calc(50% - 110px); background: transparent; color: #0F172A; font-family: 'Comic Sans MS', 'Caveat', cursive, sans-serif; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 4px; transform: rotate(-6deg); } .badge-jetzt-neu::after { content: "⤵"; font-size: 1.2rem; color: #64748B; } .pricing-toggle-switch { display: inline-flex; align-items: center; gap: 16px; background: #F1F5F9; padding: 8px 20px; border-radius: 99px; border: 1px solid #E2E8F0; } .pricing-toggle-label { font-weight: 700; font-size: 1.05rem; color: #64748B; cursor: pointer; transition: color 0.2s ease; } .pricing-toggle-label.active { color: #0F172A; } .pricing-switch-input { appearance: none; width: 52px; height: 28px; background: #CBD5E1; border-radius: 99px; position: relative; cursor: pointer; outline: none; transition: background 0.3s ease; } .pricing-switch-input:checked { background: #3B82F6; } .pricing-switch-input::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; top: 3px; left: 3px; background: #FFFFFF; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .pricing-switch-input:checked::before { transform: translateX(24px); } .btn-hot-pink { background: #FF006E !important; color: #FFFFFF !important; font-weight: 700; border-radius: var(--radius-md); padding: 12px 24px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(255, 0, 110, 0.35); border: none !important; } .btn-hot-pink:hover { background: #D9005B !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 0, 110, 0.45); } .pricing-card-highlighted { border: 2px solid #3B82F6 !important; background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%) !important; box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.2) !important; transform: scale(1.02); } .feature-check { color: #3B82F6; font-weight: bold; margin-right: 8px; } .feature-cross { color: #94A3B8; margin-right: 8px; } /* PREISE HERO BANNER & TRUST BAR STYLES */ .preise-hero-section { position: relative; background: #0F172A !important; background: radial-gradient(circle at 50% 10%, rgba(56, 130, 219, 0.25) 0%, rgba(255, 0, 110, 0.15) 45%, #0F172A 85%) !important; color: #FFFFFF !important; padding-top: 140px; padding-bottom: 70px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .preise-hero-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .hero-eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); color: #F8FAFC; padding: 8px 20px; border-radius: 99px; font-size: 0.9rem; font-weight: 700; margin-bottom: 24px; letter-spacing: 0.03em; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .hero-eyebrow-pill .pulse-dot { width: 9px; height: 9px; background-color: #FF006E; border-radius: 50%; box-shadow: 0 0 10px #FF006E; animation: pulse-glow 2s infinite; } @keyframes pulse-glow { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 110, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 0, 110, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 110, 0); } } .gradient-text-pink-blue { background: linear-gradient(135deg, #FF006E 0%, #3882DB 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .preise-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } @media (max-width: 992px) { .preise-hero-grid { grid-template-columns: 1fr; text-align: center; } } .preise-hero-card-preview { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); border-radius: 28px; padding: 36px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); position: relative; text-align: left; } .preise-hero-trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 55px; padding-top: 35px; border-top: 1px solid rgba(255, 255, 255, 0.12); } @media (max-width: 768px) { .preise-hero-trust-bar { grid-template-columns: repeat(2, 1fr); } } .hero-trust-item { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: #E2E8F0; font-weight: 600; } .hero-trust-item i { font-size: 1.3rem; color: #3882DB; } /* ========================================================================== MASTER GEO DESIGN SYSTEM (SUPERIOR SUBPAGE & PRICING ARCHITECTURE) ========================================================================== */ .geo-body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; background-color: #0F172A !important; color: #F8FAFC !important; } .geo-page-section { padding: 90px 0 !important; position: relative !important; } .geo-section-dark { background-color: #0F172A !important; color: #F8FAFC !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .geo-section-light { background-color: #F8FAFC !important; color: #0F172A !important; border-bottom: 1px solid #E2E8F0 !important; } .geo-section-white { background-color: #FFFFFF !important; color: #0F172A !important; border-bottom: 1px solid #F1F5F9 !important; } .geo-eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255, 0, 110, 0.12) !important; border: 1px solid rgba(255, 0, 110, 0.3) !important; color: #FF006E !important; font-size: 11px !important; font-weight: 800 !important; padding: 6px 16px !important; border-radius: 99px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 0 !important; } .geo-h1 { font-size: clamp(2.8rem, 5vw, 3.8rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; margin-bottom: 20px !important; color: #FFFFFF !important; } .geo-h2 { font-size: clamp(2.0rem, 3.6vw, 2.8rem) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; margin-top: 10px !important; margin-bottom: 16px !important; } .geo-section-dark .geo-h2 { color: #FFFFFF !important; } .geo-section-light .geo-h2, .geo-section-white .geo-h2 { color: #0F172A !important; } .geo-section-title-wrap { text-align: center !important; max-width: 820px !important; margin: 0 auto 55px auto !important; } .geo-section-desc { font-size: 1.12rem !important; line-height: 1.7 !important; margin-top: 14px !important; } .geo-section-dark .geo-section-desc { color: #CBD5E1 !important; } .geo-section-light .geo-section-desc, .geo-section-white .geo-section-desc { color: #475569 !important; } /* Grid Systems */ .geo-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: center !important; } .geo-grid-3, .geo-cards-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; margin: 40px 0 !important; } .geo-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; } @media (max-width: 992px) { .geo-grid-2, .geo-grid-3, .geo-cards-grid-3, .geo-grid-4 { grid-template-columns: 1fr !important; } } /* Trust Ribbon Bar */ .geo-trust-bar-section { background: #F8FAFC !important; border-top: 1px solid #E2E8F0 !important; border-bottom: 1px solid #E2E8F0 !important; padding: 24px 0 !important; } .geo-trust-bar-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; align-items: center !important; justify-items: center !important; width: 100% !important; } @media (max-width: 992px) { .geo-trust-bar-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 16px !important; } } @media (max-width: 640px) { .geo-trust-bar-grid { grid-template-columns: 1fr !important; gap: 16px 12px !important; text-align: center !important; } } .geo-trust-bar-item { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; color: #334155 !important; font-weight: 700 !important; font-size: 0.88rem !important; white-space: nowrap !important; text-align: center !important; } .geo-trust-bar-item svg, .geo-trust-bar-item i { color: #3882DB !important; font-size: 1.1rem !important; flex-shrink: 0 !important; } /* Card Box (Light & Dark Variants) */ .geo-card, .geo-card-box { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 20px !important; padding: 36px 30px !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; flex-direction: column !important; } .geo-card:hover, .geo-card-box:hover { transform: translateY(-5px) !important; border-color: #3882DB !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important; } .geo-section-dark .geo-card, .geo-section-dark .geo-card-box { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #F8FAFC !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important; } .geo-section-dark .geo-card:hover, .geo-section-dark .geo-card-box:hover { border-color: rgba(56, 130, 219, 0.6) !important; box-shadow: 0 20px 40px rgba(56, 130, 219, 0.2) !important; } /* Behavior Comparison Cards */ .geo-behavior-comparison { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; margin-top: 40px !important; } @media (max-width: 992px) { .geo-behavior-comparison { grid-template-columns: 1fr !important; } } .geo-behavior-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 24px !important; padding: 36px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; } .geo-behavior-card.ai-focused { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important; border: 1px solid rgba(255, 0, 110, 0.3) !important; box-shadow: 0 20px 40px rgba(255, 0, 110, 0.15) !important; color: #FFFFFF !important; } .geo-behavior-card.ai-focused * { color: #FFFFFF !important; } .geo-behavior-card.ai-focused .geo-behavior-list-item span { color: #E2E8F0 !important; } /* Buttons */ .geo-btn-primary, .btn-hot-pink { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background: linear-gradient(135deg, #FF006E 0%, #D9005B 100%) !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 32px !important; border-radius: 99px !important; box-shadow: 0 10px 25px rgba(255, 0, 110, 0.35) !important; text-decoration: none !important; transition: all 0.2s ease !important; border: none !important; cursor: pointer !important; box-sizing: border-box !important; max-width: 100% !important; } .geo-btn-primary:hover, .btn-hot-pink:hover { transform: translateY(-2px) !important; box-shadow: 0 15px 35px rgba(255, 0, 110, 0.5) !important; color: #FFFFFF !important; } .geo-btn-secondary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 32px !important; border-radius: 99px !important; backdrop-filter: blur(10px) !important; text-decoration: none !important; transition: all 0.2s ease !important; box-sizing: border-box !important; max-width: 100% !important; } .geo-btn-secondary:hover { background: rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) !important; color: #FFFFFF !important; } /* ========================================================= GLOBAL HEADER & FOOTER MASTER CSS (FOR ALL SUBPAGES) ========================================================= */ /* FOOTER MASTER STYLES */ footer.site-footer, #siteFooter, #global-footer { background-color: #070A12 !important; padding: 60px 0 30px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; color: #94A3B8 !important; font-size: 14px !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } footer.site-footer .container, #siteFooter .container, #global-footer .container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 24px !important; box-sizing: border-box !important; } .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1.5fr !important; gap: 40px !important; margin-bottom: 40px !important; } @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } .footer-col { display: flex !important; flex-direction: column !important; } .footer-title, .footer-col h5 { color: #FFFFFF !important; font-size: 16px !important; font-weight: 700 !important; margin-bottom: 16px !important; } .footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer-col li { margin-bottom: 10px !important; list-style: none !important; } .footer-col a, .footer-col a:link, .footer-col a:visited { color: #94A3B8 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .footer-col a:hover { color: #3882DB !important; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 24px !important; text-align: center !important; color: #64748B !important; font-size: 0.88rem !important; } .footer-bottom a, .footer-bottom a:link, .footer-bottom a:visited { color: #94A3B8 !important; text-decoration: underline !important; } .footer-bottom a:hover { color: #FF006E !important; } /* DESKTOP HIDING FOR MOBILE DRAWER & TOGGLE */ @media (min-width: 1181px) { #mobileDrawer, .geo-mobile-drawer, #mobileMenuToggle, .geo-mobile-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================================== CANONICAL GLOBAL FACTS / METRICS BAR (Pixel-Perfect Matching /wissen-expertise/) ========================================================================== */ .about-facts-light, .seo-facts-light, .page-facts-light, .preise-facts-light, .pflege-facts-light, .wp-facts-light, .geo-facts-light, .loc-facts-section, .berlin-facts-light, .wissen-facts-bar, .kontakt-facts-bar, .beratung-facts-bar, .leistungen-facts-bar, .news-facts-bar, .faq-facts-bar, .checklist-facts-bar, .ana-facts-bar, .beispiele-facts-bar, .mieten-facts-bar, .global-facts-bar { background: #FAFCFF !important; border-top: 1px solid rgba(226, 232, 240, 0.7) !important; border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important; padding: 28px 0 !important; position: relative !important; z-index: 10 !important; width: 100% !important; box-sizing: border-box !important; box-shadow: none !important; } .about-facts-grid, .seo-facts-grid, .page-facts-grid, .facts-grid, .berlin-facts-grid, .geo-facts-grid, .preise-facts-grid, .pflege-facts-grid, .wp-facts-grid, .wissen-facts-grid-4, .kontakt-facts-grid-4, .beratung-facts-grid-4, .leistungen-facts-grid-4, .news-facts-grid-4, .faq-facts-grid-4, .checklist-facts-grid-4, .ana-facts-grid-4, .beispiele-facts-container, .mieten-facts-container, .global-facts-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 24px !important; box-sizing: border-box !important; width: 100% !important; } @media (max-width: 900px) { .about-facts-grid, .seo-facts-grid, .page-facts-grid, .facts-grid, .berlin-facts-grid, .geo-facts-grid, .preise-facts-grid, .pflege-facts-grid, .wp-facts-grid, .wissen-facts-grid-4, .kontakt-facts-grid-4, .beratung-facts-grid-4, .leistungen-facts-grid-4, .news-facts-grid-4, .faq-facts-grid-4, .checklist-facts-grid-4, .ana-facts-grid-4, .beispiele-facts-container, .mieten-facts-container, .global-facts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; } } @media (max-width: 500px) { .about-facts-grid, .seo-facts-grid, .page-facts-grid, .facts-grid, .berlin-facts-grid, .geo-facts-grid, .preise-facts-grid, .pflege-facts-grid, .wp-facts-grid, .wissen-facts-grid-4, .kontakt-facts-grid-4, .beratung-facts-grid-4, .leistungen-facts-grid-4, .news-facts-grid-4, .faq-facts-grid-4, .checklist-facts-grid-4, .ana-facts-grid-4, .beispiele-facts-container, .mieten-facts-container, .global-facts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 14px !important; padding: 0 16px !important; } } .about-fact-cell, .seo-fact-cell, .page-fact-cell, .preise-fact-cell, .pflege-fact-cell, .wp-fact-cell, .wissen-fact-item, .kontakt-fact-item, .beratung-fact-item, .leistungen-fact-item, .news-fact-item, .faq-fact-item, .faq-fact-box, .checklist-fact-item, .ana-fact-item, .ana-fact-box, .beispiele-facts-container .fact-item, .mieten-facts-container .fact-item, .global-fact-item { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 0 20px !important; border-left: none !important; border-right: 1px solid rgba(226, 232, 240, 0.7) !important; border-top: none !important; border-bottom: none !important; text-align: left !important; align-items: flex-start !important; box-sizing: border-box !important; } .about-fact-cell:first-child, .seo-fact-cell:first-child, .page-fact-cell:first-child, .preise-fact-cell:first-child, .pflege-fact-cell:first-child, .wp-fact-cell:first-child, .wissen-fact-item:first-child, .kontakt-fact-item:first-child, .beratung-fact-item:first-child, .leistungen-fact-item:first-child, .news-fact-item:first-child, .faq-fact-item:first-child, .faq-fact-box:first-child, .checklist-fact-item:first-child, .ana-fact-item:first-child, .ana-fact-box:first-child, .beispiele-facts-container .fact-item:first-child, .mieten-facts-container .fact-item:first-child, .global-fact-item:first-child { padding-left: 0 !important; } .about-fact-cell:last-child, .seo-fact-cell:last-child, .page-fact-cell:last-child, .preise-fact-cell:last-child, .pflege-fact-cell:last-child, .wp-fact-cell:last-child, .wissen-fact-item:last-child, .kontakt-fact-item:last-child, .beratung-fact-item:last-child, .leistungen-fact-item:last-child, .news-fact-item:last-child, .faq-fact-item:last-child, .faq-fact-box:last-child, .checklist-fact-item:last-child, .ana-fact-item:last-child, .ana-fact-box:last-child, .beispiele-facts-container .fact-item:last-child, .mieten-facts-container .fact-item:last-child, .global-fact-item:last-child { border-right: none !important; padding-right: 0 !important; } @media (max-width: 900px) { .about-fact-cell:nth-child(2), .about-fact-cell:nth-child(4), .seo-fact-cell:nth-child(2), .seo-fact-cell:nth-child(4), .page-fact-cell:nth-child(2), .page-fact-cell:nth-child(4), .preise-fact-cell:nth-child(2), .preise-fact-cell:nth-child(4), .pflege-fact-cell:nth-child(2), .pflege-fact-cell:nth-child(4), .wp-fact-cell:nth-child(2), .wp-fact-cell:nth-child(4), .wissen-fact-item:nth-child(2), .wissen-fact-item:nth-child(4), .kontakt-fact-item:nth-child(2), .kontakt-fact-item:nth-child(4), .beratung-fact-item:nth-child(2), .beratung-fact-item:nth-child(4), .leistungen-fact-item:nth-child(2), .leistungen-fact-item:nth-child(4), .news-fact-item:nth-child(2), .news-fact-item:nth-child(4), .faq-fact-item:nth-child(2), .faq-fact-item:nth-child(4), .faq-fact-box:nth-child(2), .faq-fact-box:nth-child(4), .checklist-fact-item:nth-child(2), .checklist-fact-item:nth-child(4), .ana-fact-item:nth-child(2), .ana-fact-item:nth-child(4), .ana-fact-box:nth-child(2), .ana-fact-box:nth-child(4), .beispiele-facts-container .fact-item:nth-child(2), .beispiele-facts-container .fact-item:nth-child(4), .mieten-facts-container .fact-item:nth-child(2), .mieten-facts-container .fact-item:nth-child(4), .fact-item:nth-child(2), .fact-item:nth-child(4), .fact-cell:nth-child(2), .fact-cell:nth-child(4), .berlin-fact-cell:nth-child(2), .berlin-fact-cell:nth-child(4), .geo-fact-cell:nth-child(2), .geo-fact-cell:nth-child(4), .global-fact-item:nth-child(2), .global-fact-item:nth-child(4) { border-right: none !important; } } @media (max-width: 500px) { .about-fact-cell, .seo-fact-cell, .page-fact-cell, .preise-fact-cell, .pflege-fact-cell, .wp-fact-cell, .wissen-fact-item, .kontakt-fact-item, .beratung-fact-item, .leistungen-fact-item, .news-fact-item, .faq-fact-item, .faq-fact-box, .checklist-fact-item, .ana-fact-item, .ana-fact-box, .beispiele-facts-container .fact-item, .mieten-facts-container .fact-item, .fact-item, .fact-cell, .berlin-fact-cell, .geo-fact-cell, .global-fact-item { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; } } /* Fact Numbers / Values */ .about-fact-val, .seo-fact-val, .page-fact-val, .preise-fact-val, .pflege-fact-val, .wp-fact-val, .wissen-fact-num, .kontakt-fact-num, .beratung-fact-num, .leistungen-fact-num, .news-fact-num, .faq-fact-num, .faq-fact-number, .checklist-fact-num, .ana-fact-num, .ana-fact-number, .fact-num, .fact-number, .global-fact-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #0F172A !important; line-height: 1.15 !important; margin: 0 !important; display: block !important; } .about-fact-val span, .about-fact-val .fact-accent, .seo-fact-val span, .seo-fact-val .fact-accent, .page-fact-val span, .page-fact-val .fact-accent, .preise-fact-val span, .preise-fact-val .fact-accent, .pflege-fact-val span, .pflege-fact-val .fact-accent, .wp-fact-val span, .wp-fact-val .fact-accent, .wissen-fact-num span, .kontakt-fact-num span, .beratung-fact-num span, .leistungen-fact-num span, .news-fact-num span, .faq-fact-num span, .faq-fact-number span, .checklist-fact-num span, .ana-fact-num span, .ana-fact-number span, .fact-num span, .fact-number span, .fact-number .accent, .global-fact-num span, .global-fact-num .fact-accent { color: #2563EB !important; font-weight: 600 !important; } /* Fact Uppercase Labels */ .about-fact-title, .seo-fact-title, .page-fact-title, .preise-fact-title, .pflege-fact-title, .wp-fact-title, .wissen-fact-title, .kontakt-fact-title, .beratung-fact-title, .leistungen-fact-title, .news-fact-title, .faq-fact-title, .checklist-fact-title, .ana-fact-title, .fact-title, .fact-label, .global-fact-title { font-size: 0.74rem !important; font-weight: 600 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-top: 2px !important; line-height: 1.3 !important; display: block !important; } /* Fact Descriptions */ .about-fact-desc, .seo-fact-desc, .page-fact-desc, .preise-fact-desc, .pflege-fact-desc, .wp-fact-desc, .wissen-fact-desc, .kontakt-fact-desc, .beratung-fact-desc, .leistungen-fact-desc, .news-fact-desc, .faq-fact-desc, .faq-fact-sub, .checklist-fact-desc, .ana-fact-desc, .ana-fact-sub, .fact-desc, .fact-sub, .global-fact-desc { font-size: 0.76rem !important; font-weight: 400 !important; color: #64748B !important; line-height: 1.35 !important; margin-top: 2px !important; display: block !important; } /* ========================================================================== HERO BACKGROUND KACHELN / GRID VARIANTS ========================================================================== */ .page-hero, .about-hero-clean, .about-hero-compact, .seo-hub-hero, .kontakt-hero, .beratung-hero, .leistungen-hero, .wissen-hero, .news-hero, .faq-hero, .checklist-hero, .ana-hero, .preise-hero-compact, .pflege-hero-compact, .wp-hero-compact, .beispiele-hero, .mieten-hero { position: relative !important; overflow: hidden !important; } .page-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .about-hero-clean > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .about-hero-compact > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .seo-hub-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .kontakt-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .beratung-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .leistungen-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .wissen-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .news-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .faq-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .checklist-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .ana-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .preise-hero-compact > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .pflege-hero-compact > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .wp-hero-compact > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .beispiele-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]), .mieten-hero > *:not([aria-hidden="true"]):not([class*="-accent"]):not([class*="-dots"]):not([class*="-glow"]) { position: relative; z-index: 2; } .about-hero-grid-accent, .hero-kacheln-3d-dots, [class*="-grid-accent"], [class*="-kacheln-"] { position: absolute !important; } /* --- VARIANT A: 3D Isometric Dot-Matrix Plane with Ambient Glow --- */ .hero-kacheln-3d-dots { position: absolute !important; top: -15px !important; right: max(2%, calc(50% - 660px)) !important; width: 440px !important; height: 440px !important; pointer-events: none !important; z-index: 1 !important; } .hero-kacheln-3d-dots .hero-kacheln-glow { position: absolute !important; top: 8% !important; right: 15% !important; width: 320px !important; height: 220px !important; background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%) !important; filter: blur(42px) !important; } .hero-kacheln-3d-dots .hero-kacheln-glow.fuchsia { background: radial-gradient(ellipse at center, rgba(255, 0, 110, 0.38) 0%, rgba(255, 0, 110, 0) 70%) !important; } .hero-kacheln-3d-dots .hero-kacheln-plane { position: absolute !important; top: 12% !important; right: 5% !important; width: 360px !important; height: 360px !important; transform: perspective(750px) rotateX(46deg) rotateY(-8deg) rotateZ(-24deg) !important; background-image: radial-gradient(circle, #2563EB 2px, transparent 2.6px) !important; background-size: 22px 22px !important; mask-image: radial-gradient(circle at 45% 45%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0) 75%) !important; -webkit-mask-image: radial-gradient(circle at 45% 45%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0) 75%) !important; opacity: 0.75 !important; } .hero-kacheln-3d-dots .hero-kacheln-plane.fuchsia { background-image: radial-gradient(circle, #FF006E 2px, transparent 2.6px) !important; } @media (max-width: 900px) { .hero-kacheln-3d-dots { width: 280px !important; height: 280px !important; right: -40px !important; top: -20px !important; opacity: 0.55 !important; } .hero-kacheln-3d-dots .hero-kacheln-plane { width: 250px !important; height: 250px !important; } } /* --- VARIANT B: Subtle Full-Surface Geometric Grid / Kacheln Mesh --- */ .hero-kacheln-mesh { position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important; background-size: 40px 40px !important; mask-image: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0) 80%) !important; -webkit-mask-image: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0) 80%) !important; pointer-events: none !important; z-index: 1 !important; } /* --- VARIANT C: 3D Perspective Wireframe Grid Plane / Cyber Kacheln --- */ .hero-kacheln-perspective-wireframe { position: absolute !important; top: -15px !important; right: max(2%, calc(50% - 660px)) !important; width: 440px !important; height: 440px !important; pointer-events: none !important; z-index: 1 !important; } .hero-kacheln-perspective-wireframe .hero-kacheln-glow-wire { position: absolute !important; top: 10% !important; right: 15% !important; width: 320px !important; height: 220px !important; background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0) 70%) !important; filter: blur(42px) !important; } .hero-kacheln-perspective-wireframe .hero-kacheln-plane-wire { position: absolute !important; top: 12% !important; right: 5% !important; width: 360px !important; height: 360px !important; transform: perspective(750px) rotateX(48deg) rotateY(-8deg) rotateZ(-22deg) !important; background-image: linear-gradient(rgba(56, 189, 248, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.4) 1px, transparent 1px) !important; background-size: 26px 26px !important; mask-image: radial-gradient(circle at 45% 45%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 80%) !important; -webkit-mask-image: radial-gradient(circle at 45% 45%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 80%) !important; opacity: 0.85 !important; } @media (max-width: 900px) { .hero-kacheln-perspective-wireframe { width: 280px !important; height: 280px !important; right: -40px !important; top: -20px !important; opacity: 0.55 !important; } .hero-kacheln-perspective-wireframe .hero-kacheln-plane-wire { width: 250px !important; height: 250px !important; } } /* ========================================================================== UNIVERSAL MOBILE HERO CENTERING (Headlines, Subtitles & Action Buttons) Guarantees that all hero elements are strictly centered on mobile devices. ========================================================================== */ @media (max-width: 768px) { .hero-section-home, .page-hero, .about-hero-clean, .about-hero-compact, .seo-hub-hero, .kontakt-hero, .beratung-hero, .leistungen-hero, .wissen-hero, .news-hero, .faq-hero, .checklist-hero, .ana-hero, .preise-hero-section, .preise-hero-compact, .pflege-hero-compact, .wp-hero-compact, .beispiele-hero, .mieten-hero, .geo-hero-section, .geo-hero-compact, .berlin-hero-compact, .seo-hero-compact, .subpage-hero-compact, .wpb-hero, .hero-landing, header.page-hero, section.page-hero, [class*="-hero"], [class*="hero-section"] { text-align: center !important; } .seo-hub-hero-grid, .page-hero-grid, .preise-hero-grid, .editorial-hero-grid, [class*="-hero-grid"] { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .seo-hub-hero-grid > div:first-child, .page-hero-grid > div:first-child, .editorial-hero-grid > div:first-child, [class*="-hero-grid"] > div:first-child { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .hero-section-home h1, .page-hero h1, .page-hero-title, .hero-title, .geo-h1, .seo-hub-title, .leistungen-hero-title, .about-hero-title, .preise-hero-title, .beratung-hero-title, .wissen-hero-title, .news-hero-title, .faq-hero-title, .checklist-hero-title, .ana-hero-title, .beispiele-hero-title, .mieten-hero-title, [class*="-hero"] h1, [class*="hero-"] h1, [class*="-hero-title"] { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .hero-section-home p, .page-hero p, .page-hero-subtitle, .hero-lead, .hero-subtitle, .hero-desc, .hero-description, .seo-hub-subtitle, .pflege-hero-lead, .geo-hero-desc, [class*="-hero"] p, [class*="hero-"] p, [class*="-hero-subtitle"], [class*="-hero-lead"], [class*="-hero-desc"] { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .hero-badge, .hero-breadcrumb, .seo-eyebrow-badge, .hero-eyebrow-pill, .hero-eyebrow, .geo-eyebrow, .breadcrumb, .breadcrumb-wrap, .breadcrumb-nav, [class*="-hero"] .breadcrumb, [class*="-hero"] [class*="eyebrow"], [class*="-hero"] [class*="badge"], [class*="hero-"] [class*="eyebrow"], [class*="hero-"] [class*="badge"] { margin-left: auto !important; margin-right: auto !important; justify-content: center !important; text-align: center !important; display: inline-flex !important; } .seo-hub-actions, .hero-actions, .hero-btns, .page-hero-actions, .berlin-hero-actions, .geo-hero-actions, .kontakt-hero-btns, .pflege-hero-btns, .subpage-hero-btns, .wpb-hero-btns, .beispiele-hero-cta, .mieten-hero-cta, .hero-cta, [class*="-hero-actions"], [class*="-hero-btns"], [class*="-hero-cta"], [class*="hero-"][class*="actions"], [class*="hero-"][class*="btns"] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; gap: 12px !important; } .seo-hub-actions a, .hero-actions a, .hero-btns a, .page-hero-actions a, .berlin-hero-actions a, .geo-hero-actions a, .kontakt-hero-btns a, .pflege-hero-btns a, .subpage-hero-btns a, .wpb-hero-btns a, .beispiele-hero-cta a, .mieten-hero-cta a, .hero-cta a, [class*="-hero-actions"] a, [class*="-hero-btns"] a, [class*="-hero-cta"] a, [class*="hero-"][class*="actions"] a, [class*="hero-"][class*="btns"] a { width: 100% !important; max-width: 360px !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } } /* ========================================================================== GLOBAL CANONICAL TYPOGRAPHY SYSTEM ========================================================================== */ :root { --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; overflow-x: clip; font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.65 !important; color: #334155 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Headings: Always Plus Jakarta Sans with exact hierarchical sizes */ h1, .page-hero-title, .hero-title, .geo-h1, .seo-hub-title, .leistungen-hero-title, .about-hero-title, .preise-hero-title, .beratung-hero-title, .wissen-hero-title, .news-hero-title, .faq-hero-title, .checklist-hero-title, .ana-hero-title, .beispiele-hero-title, .mieten-hero-title { font-family: var(--font-heading) !important; font-size: clamp(2.3rem, 4vw, 3.4rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; } @media (max-width: 640px) { h1, .page-hero-title, .hero-title, .geo-h1, .seo-hub-title, .leistungen-hero-title, .about-hero-title, .preise-hero-title, .beratung-hero-title, .wissen-hero-title, .news-hero-title, .faq-hero-title, .checklist-hero-title, .ana-hero-title, .beispiele-hero-title, .mieten-hero-title { font-size: clamp(1.95rem, 6.5vw, 2.45rem) !important; line-height: 1.2 !important; } } h2, .section-h2, .geo-h2, .section-title, #portfolio-heading, #inquiry-heading { font-family: var(--font-heading) !important; font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #0F172A; } @media (max-width: 640px) { h2, .section-h2, .geo-h2, .section-title, #portfolio-heading, #inquiry-heading { font-size: clamp(1.55rem, 5.2vw, 1.95rem) !important; } } /* Ensure dark backgrounds have white text on headings */ .section-dark h2, .section-dark .section-h2, .site-cta-full h2, .site-cta-inner h2, .site-cta-full .site-cta-inner h2, .cta-title, #cta-heading, section[style*="linear-gradient"] h2, section[style*="linear-gradient"] .section-h2, section[style*="#0F172A"] h2, section[style*="#0F172A"] .section-h2, section[style*="#1E2B40"] h2, section[style*="#1E2B40"] .section-h2, section[style*="#1E293B"] h2, section[style*="#1E293B"] .section-h2, section[style*="#161E2E"] h2, section[style*="#161E2E"] .section-h2, section[style*="#162032"] h2, section[style*="#162032"] .section-h2, #kontakt h2, #kontakt .section-h2, .page-hero h2, .hero h2 { color: #FFFFFF !important; } h3, .service-box h3, .benefit-card h3, .card-title, .feature-card h3, .process-step h3, .step-card h3, .editorial-content-inner h3 { font-family: var(--font-heading) !important; font-size: clamp(1.2rem, 1.6vw, 1.35rem) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; color: #0F172A; } h4, .subcard-title, .faq-question { font-family: var(--font-heading) !important; font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: #0F172A; } /* Force pure white headings inside all dark backgrounds, dark cards, and heroes */ .seo-inclusive-dark h1, .seo-inclusive-dark h2, .seo-inclusive-dark h3, .seo-inclusive-dark h4, .inclusive-card h1, .inclusive-card h2, .inclusive-card h3, .inclusive-card h4, [class*="-dark"] h1, [class*="-dark"] h2, [class*="-dark"] h3, [class*="-dark"] h4, [class*="-dark"] .card-title, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .hero-glass-card h1, .hero-glass-card h2, .hero-glass-card h3, .hero-glass-card h4, .page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .site-cta-full h1, .site-cta-full h2, .site-cta-full h3, .site-cta-full h4, .featured-service-banner h1, .featured-service-banner h2, .featured-service-banner h3, section[style*="linear-gradient"] h3, [style*="background: #0B1120"] h3, [style*="background:#0B1120"] h3, [style*="background: #161E2E"] h3, [style*="background:#161E2E"] h3, [style*="background: #1E293B"] h3, [style*="background:#1E293B"] h3 { color: #FFFFFF !important; } /* Body Paragraphs & Descriptions */ p, .body-text { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.68; color: #475569; } /* Dark Background Typography Contrast Protection */ .pflege-hero-compact p, .pflege-hero-lead, .pflege-inclusive-section p, .pflege-inclusive-card p, .pflege-cta-banner p, .site-cta-full p, .dark-section p, .hero-dark p, [class*="hero-dark"] p, [class*="-dark"] p, [data-theme="dark"] p { color: #F1F5F9 !important; } /* Hero Subtitle */ .page-hero-subtitle, .hero-subtitle, .seo-hub-subtitle, .leistungen-hero-subtitle, .about-hero-subtitle, .preise-hero-subtitle, .beratung-hero-subtitle, .wissen-hero-subtitle, .news-hero-subtitle, .faq-hero-subtitle, .checklist-hero-subtitle, .ana-hero-subtitle, .beispiele-hero-subtitle, .mieten-hero-subtitle { font-family: var(--font-body) !important; font-size: clamp(1.05rem, 1.25vw, 1.16rem) !important; font-weight: 400 !important; line-height: 1.65 !important; color: #CBD5E1 !important; } /* Section Lead Subtitle */ .section-intro-center p, .section-intro p, .section-lead { font-family: var(--font-body) !important; font-size: clamp(1.02rem, 1.15vw, 1.12rem) !important; line-height: 1.65 !important; color: #64748B !important; } /* Eyebrows / Badges */ .site-cta-eyebrow, .section-eyebrow, .page-eyebrow, .badge-eyebrow, .eyebrow-badge { font-family: var(--font-body) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; width: fit-content !important; align-self: flex-start !important; } /* Editorial Body Text Styles (for full original content preservation) */ .editorial-content-section { padding: 80px 0; background: #FFFFFF; } .editorial-content-inner { max-width: 1080px; margin: 0 auto; } .editorial-content-inner h2 { margin-top: 48px !important; margin-bottom: 20px !important; font-family: var(--font-heading) !important; font-size: clamp(1.75rem, 2.8vw, 2.3rem) !important; font-weight: 800 !important; color: #0F172A !important; line-height: 1.25 !important; } .editorial-content-inner h2:first-child { margin-top: 0 !important; } .editorial-content-inner h3 { margin-top: 32px !important; margin-bottom: 14px !important; font-family: var(--font-heading) !important; font-size: 1.3rem !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.35 !important; } .editorial-content-inner p { margin-bottom: 22px !important; font-size: 1.02rem !important; line-height: 1.72 !important; color: #334155 !important; } .editorial-content-inner ul, .editorial-content-inner ol { margin: 0 0 24px 24px !important; padding: 0 !important; } .editorial-content-inner li { margin-bottom: 10px !important; font-size: 1.0rem !important; line-height: 1.65 !important; color: #334155 !important; } .editorial-content-inner strong { color: #0F172A !important; font-weight: 700 !important; } .editorial-card-highlight { background: #F8FAFC; border: 1px solid #E2E8F0; border-left: 4px solid #2563EB; border-radius: 14px; padding: 26px 30px; margin: 32px 0; } /* Editorial Links and Tables */ .editorial-content-inner a { color: #2563EB; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .editorial-content-inner a:hover { color: #1D4ED8; } .editorial-content-inner table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.95rem; } .editorial-content-inner th, .editorial-content-inner td { padding: 12px 16px; border: 1px solid #E2E8F0; text-align: left; } .editorial-content-inner th { background: #F8FAFC; font-weight: 700; color: #0F172A; } .editorial-content-inner tr:nth-child(even) { background: #F8FAFC; } /* GLOBAL ABSCHLUSS CTA BANNER */ .site-cta-full { width: 100%; background: #1E2B40; background: linear-gradient(180deg, #24324A 0%, #162032 100%); padding: 100px 0; margin: 0; text-align: center; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; } .site-cta-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } .site-cta-badge { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #60A5FA; margin-bottom: 16px; } .site-cta-inner h2, #cta-heading { font-family: var(--font-heading) !important; font-size: clamp(2.2rem, 3.8vw, 3.2rem) !important; font-weight: 800 !important; letter-spacing: -0.02em; color: #FFFFFF !important; margin: 0 0 20px 0 !important; line-height: 1.2 !important; } .site-cta-inner p { font-family: var(--font-body) !important; font-size: 1.15rem !important; line-height: 1.75 !important; color: #CBD5E1 !important; max-width: 58ch; margin: 0 auto 38px auto !important; } .site-cta-button-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } @media (max-width: 768px) { .site-cta-full { padding: 64px 0; } } /* ========================================================================== GLOBAL STANDARDIZED PAGE HERO & CTA SYSTEM Guarantees 100% visual consistency across all pages and subpages ========================================================================== */ /* ========================================================================== GLOBAL STANDARDIZED SUBPAGE COMPACT HERO SYSTEM Matches website-pflege reference 100% - Centered, Dark Navy, 3D Grid Plane ========================================================================== */ .page-hero, .subpage-hero-compact, .pflege-hero-compact, .wpb-hero { background: #0B1120 !important; position: relative !important; overflow: hidden !important; padding: 170px 0 80px 0 !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-align: center !important; } @media (max-width: 768px) { .page-hero, .subpage-hero-compact, .pflege-hero-compact, .wpb-hero { padding: 130px 0 60px 0 !important; } } .page-hero-grid { display: block !important; max-width: 900px !important; margin: 0 auto !important; text-align: center !important; } .page-hero-inner, .subpage-hero-inner, .pflege-hero-inner, .wpb-hero-inner { position: relative !important; z-index: 2 !important; max-width: 900px !important; margin: 0 auto !important; text-align: center !important; } /* Breadcrumbs: Centered, sleek, subtle (Universal for all pages) */ [class*="-hero-breadcrumb"], .page-hero-breadcrumb, .subpage-hero-breadcrumb, .pflege-hero-breadcrumb, .wpb-hero-breadcrumb, .geo-hero-breadcrumb, .preise-hero-breadcrumb, .blog-hero-breadcrumb, .cat-breadcrumb { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 0.88rem !important; color: #CBD5E1 !important; margin: 0 auto 20px auto !important; line-height: 1.4 !important; } [class*="-hero-breadcrumb"] a, .page-hero-breadcrumb a, .subpage-hero-breadcrumb a, .pflege-hero-breadcrumb a, .wpb-hero-breadcrumb a, .geo-hero-breadcrumb a, .preise-hero-breadcrumb a, .blog-hero-breadcrumb a, .cat-breadcrumb a { color: #CBD5E1 !important; text-decoration: none !important; transition: color 0.2s ease, text-decoration 0.2s ease !important; font-weight: 500 !important; } [class*="-hero-breadcrumb"] a:hover, .page-hero-breadcrumb a:hover, .subpage-hero-breadcrumb a:hover, .pflege-hero-breadcrumb a:hover, .wpb-hero-breadcrumb a:hover, .geo-hero-breadcrumb a:hover, .preise-hero-breadcrumb a:hover, .blog-hero-breadcrumb a:hover, .cat-breadcrumb a:hover { color: #FFFFFF !important; text-decoration: underline !important; } [class*="-hero-breadcrumb"] .sep, .page-hero-breadcrumb .sep, .subpage-hero-breadcrumb .sep, .pflege-hero-breadcrumb .sep, .wpb-hero-breadcrumb .sep, .geo-hero-breadcrumb .sep, .preise-hero-breadcrumb .sep, .blog-hero-breadcrumb .sep, .cat-breadcrumb .sep { color: #64748B !important; font-size: 0.72rem !important; display: inline-flex !important; align-items: center !important; padding: 0 2px !important; } [class*="-hero-breadcrumb"] .current, .page-hero-breadcrumb .current, .subpage-hero-breadcrumb .current, .pflege-hero-breadcrumb .current, .wpb-hero-breadcrumb .current, .geo-hero-breadcrumb .current, .preise-hero-breadcrumb .current, .blog-hero-breadcrumb .current, .cat-breadcrumb .current { color: #60A5FA !important; font-weight: 600 !important; } /* Headings: Clean, centered, bold, Plus Jakarta Sans */ .page-hero-title, .subpage-hero-title, .pflege-hero-title, .wpb-hero-title, .page-hero h1, .subpage-hero-compact h1, .wpb-hero h1 { font-family: 'Plus Jakarta Sans', var(--font-main, sans-serif) !important; font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.18 !important; letter-spacing: -0.03em !important; margin: 0 auto 20px auto !important; text-align: center !important; text-shadow: none !important; max-width: 900px !important; } .page-hero-title span, .subpage-hero-title span { color: inherit !important; } /* Subtitle / Lead Paragraph: Centered, clean reading width */ .page-hero-subtitle, .subpage-hero-lead, .pflege-hero-lead, .wpb-hero-lead, .page-hero p:not(.hero-badge):not(.btn-brand-primary-fuchsia):not(.btn-brand-secondary) { font-family: 'Plus Jakarta Sans', var(--font-main, sans-serif) !important; font-size: 1.18rem !important; color: #E2E8F0 !important; line-height: 1.7 !important; max-width: 780px !important; margin: 0 auto 34px auto !important; font-weight: 400 !important; text-align: center !important; text-shadow: none !important; } /* Button Group: Centered */ .page-hero-actions, .subpage-hero-btns, .pflege-hero-btns, .wpb-hero-btns { display: flex !important; gap: 16px !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; margin: 0 auto !important; } /* Primary Button: Brand Blue (matching screenshot) */ .btn-brand-primary-fuchsia, .subpage-btn-hero-primary, .pflege-btn-hero-primary, .btn-hero-primary { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: var(--brand-blue, #0055FF) !important; color: #FFFFFF !important; font-family: 'Plus Jakarta Sans', var(--font-main, sans-serif) !important; font-weight: 700 !important; font-size: 1rem !important; padding: 15px 30px !important; border-radius: 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; box-shadow: 0 4px 14px rgba(56, 130, 219, 0.35) !important; border: none !important; cursor: pointer !important; } .btn-brand-primary-fuchsia:hover, .subpage-btn-hero-primary:hover, .pflege-btn-hero-primary:hover, .btn-hero-primary:hover { background: var(--brand-blue-hover, #0044CC) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(56, 130, 219, 0.45) !important; color: #FFFFFF !important; } /* Secondary Button: Subtle Dark Glass with border */ .btn-brand-secondary, .btn-cta-secondary-dark, .subpage-btn-hero-secondary, .pflege-btn-hero-secondary, .btn-hero-secondary { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; font-family: 'Plus Jakarta Sans', var(--font-main, sans-serif) !important; font-weight: 600 !important; font-size: 1rem !important; padding: 15px 28px !important; border-radius: 10px !important; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; transition: all 0.2s ease !important; } .btn-brand-secondary:hover, .btn-cta-secondary-dark:hover, .subpage-btn-hero-secondary:hover, .pflege-btn-hero-secondary:hover, .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-2px) !important; color: #FFFFFF !important; } /* Hide unneeded hero artifacts as per "nicht mehr und nicht weniger" */ .hero-badge, .wpb-eyebrow, .hero-trust-row, .hero-graphic-col, .wpb-hero-card, .page-hero-image-bg .hero-bg-media { display: none !important; } /* ========================================================================== GLOBAL EDITORIAL STRUCTURE & RICH CONTENT SYSTEM Transforms in-depth guide text into modern magazine-quality layouts ========================================================================== */ .editorial-content-section { padding: 80px 0 100px 0 !important; background: #FFFFFF !important; } .editorial-content-inner { max-width: 1400px !important; margin: 0 auto !important; } /* Section Header in Editorial */ .editorial-section-header { margin-bottom: 36px !important; text-align: left !important; } .editorial-badge { display: inline-block !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #2563EB !important; background: #EFF6FF !important; padding: 4px 12px !important; border-radius: 9999px !important; margin-bottom: 12px !important; } /* Feature Card Grids (3-col & 2-col) */ .editorial-cards-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin: 36px 0 48px 0 !important; } .editorial-cards-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; margin: 36px 0 48px 0 !important; } @media (max-width: 900px) { .editorial-cards-grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .editorial-cards-grid-3, .editorial-cards-grid-2 { grid-template-columns: 1fr !important; } } .editorial-card { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; padding: 28px !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; display: flex !important; flex-direction: column !important; } .editorial-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important; border-color: #CBD5E1 !important; } .editorial-card-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: #EFF6FF !important; color: #2563EB !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.3rem !important; margin-bottom: 18px !important; } .editorial-card h4, .editorial-card-title { font-family: var(--font-heading) !important; font-size: 1.18rem !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 0 10px 0 !important; line-height: 1.3 !important; } .editorial-card p, .editorial-card-desc { font-family: var(--font-body) !important; font-size: 0.95rem !important; line-height: 1.62 !important; color: #475569 !important; margin: 0 !important; } /* 2-Column Split Rows (Text + Image/Media) */ .editorial-split-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 50px !important; align-items: center !important; margin: 56px 0 !important; } .editorial-split-row.reversed { grid-template-columns: 1fr 1fr !important; } @media (max-width: 860px) { .editorial-split-row, .editorial-split-row.reversed { grid-template-columns: 1fr !important; gap: 32px !important; } } .split-media, .editorial-media-wrap { position: relative !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important; border: 1px solid #E2E8F0 !important; background: #F8FAFC !important; max-height: 480px !important; aspect-ratio: 4 / 3 !important; } .split-media img, .editorial-media-img { width: 100% !important; height: 100% !important; max-height: 480px !important; display: block !important; object-fit: cover !important; object-position: top center !important; border-radius: 20px !important; } /* Callout Highlights */ .editorial-card-highlight { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #2563EB !important; border-radius: 14px !important; padding: 26px 30px !important; margin: 36px 0 !important; } .editorial-card-highlight p:last-child { margin-bottom: 0 !important; } /* Checklists inside editorial */ .editorial-check-list { list-style: none !important; padding: 0 !important; margin: 20px 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .editorial-check-list li { display: flex !important; align-items: flex-start !important; gap: 12px !important; font-size: 0.98rem !important; line-height: 1.6 !important; color: #334155 !important; margin-bottom: 0 !important; } .editorial-check-list li i { color: #10B981 !important; font-size: 1.1rem !important; margin-top: 3px !important; flex-shrink: 0 !important; } /* Clean Editorial FAQ Accordion */ .editorial-faq-container { margin: 40px 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } .editorial-faq-item { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; overflow: hidden !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .editorial-faq-item.active { border-color: #3882DB !important; box-shadow: 0 4px 16px rgba(56, 130, 219, 0.08) !important; } .editorial-faq-trigger { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; background: transparent !important; border: none !important; text-align: left !important; font-family: var(--font-heading) !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #0F172A !important; cursor: pointer !important; gap: 16px !important; } .editorial-faq-icon { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #F1F5F9 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3882DB !important; font-size: 0.85rem !important; transition: transform 0.25s ease, background 0.2s ease !important; flex-shrink: 0 !important; } .editorial-faq-item.active .editorial-faq-icon { transform: rotate(180deg) !important; background: #3882DB !important; color: #FFFFFF !important; } .editorial-faq-content { padding: 0 24px 22px 24px !important; font-family: var(--font-body) !important; font-size: 0.98rem !important; line-height: 1.68 !important; color: #475569 !important; display: none !important; } .editorial-faq-item.active .editorial-faq-content { display: block !important; } /* ========================================================================== BLOG 2-COLUMN LAYOUT WITH RIGHT STICKY SIDEBAR & TOC ========================================================================== */ .blog-layout-wrap { background-color: #FFFFFF !important; padding: 50px 0 90px 0 !important; } .blog-layout-container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 24px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; gap: 48px !important; align-items: start !important; box-sizing: border-box !important; } @media (max-width: 1023px) { .blog-layout-container { grid-template-columns: 1fr !important; gap: 40px !important; } } .blog-grid-main { display: contents !important; } /* Left Main Content Column */ .blog-main-content { min-width: 0 !important; } /* Right Sticky Sidebar Column */ .blog-sidebar { min-width: 0 !important; } @media (min-width: 1024px) { .blog-sidebar { position: -webkit-sticky !important; position: sticky !important; top: 110px !important; align-self: start !important; z-index: 20 !important; } } .blog-sidebar-sticky { display: flex !important; flex-direction: column !important; gap: 24px !important; } /* Sidebar Widgets */ .sidebar-widget { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; padding: 24px 22px !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important; overflow: visible !important; } .sidebar-widget-header { display: flex !important; align-items: center !important; gap: 10px !important; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #0F172A !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid #E2E8F0 !important; } .sidebar-widget-header i { color: #3882DB !important; font-size: 1.05rem !important; } /* Sidebar Inhaltsverzeichnis (TOC) */ .sidebar-toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .sidebar-toc-list li { margin: 0 !important; padding: 0 !important; } .sidebar-toc-link { display: block !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #475569 !important; text-decoration: none !important; line-height: 1.35 !important; transition: all 0.2s ease !important; border-left: 3px solid transparent !important; } .sidebar-toc-link:hover { background: #EDF2F7 !important; color: #0F172A !important; padding-left: 15px !important; } .sidebar-toc-link.active { background: rgba(56, 130, 219, 0.08) !important; color: #2563EB !important; border-left-color: #3882DB !important; font-weight: 700 !important; } /* Sidebar Contact Widget */ .sidebar-contact-widget { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important; border: 1px solid #E2E8F0 !important; } .sidebar-author-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; } .sidebar-author-img { width: 48px !important; height: 48px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #3882DB !important; } .sidebar-author-name { font-weight: 700 !important; font-size: 1.0rem !important; color: #0F172A !important; } .sidebar-author-role { font-size: 0.78rem !important; color: #64748B !important; font-weight: 600 !important; } .sidebar-contact-text { font-size: 0.88rem !important; line-height: 1.5 !important; color: #475569 !important; margin: 0 0 16px 0 !important; } .btn-sidebar-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #3882DB !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.92rem !important; padding: 12px 18px !important; border-radius: 9999px !important; text-decoration: none !important; transition: all 0.2s ease !important; box-shadow: 0 4px 14px rgba(56, 130, 219, 0.3) !important; width: 100% !important; box-sizing: border-box !important; } .btn-sidebar-cta:hover { background: #2563EB !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4) !important; } .sidebar-phone-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 0.88rem !important; font-weight: 700 !important; color: #475569 !important; text-decoration: none !important; margin-top: 10px !important; transition: color 0.2s ease !important; } .sidebar-phone-link:hover { color: #3882DB !important; } /* Sidebar Related Posts List (Clean unboxed layout) */ .sidebar-related-list { display: flex !important; flex-direction: column !important; gap: 0 !important; } .sidebar-related-item { display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 12px 4px !important; border-radius: 0 !important; background: transparent !important; border: none !important; border-bottom: 1px solid #E2E8F0 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .sidebar-related-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; } .sidebar-related-item:first-child { padding-top: 0 !important; } .sidebar-related-item:hover { background: transparent !important; padding-left: 8px !important; box-shadow: none !important; transform: none !important; } .sidebar-related-tag { font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; color: #3882DB !important; letter-spacing: 0.05em !important; } .sidebar-related-title { font-size: 0.88rem !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.35 !important; transition: color 0.2s ease !important; } .sidebar-related-item:hover .sidebar-related-title { color: #3882DB !important; } /* Mobile Quick-TOC Accordion (Visible on < 1024px) */ .mobile-toc-accordion { display: none !important; background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; margin-bottom: 30px !important; overflow: hidden !important; } @media (max-width: 1023px) { .mobile-toc-accordion { display: block !important; } } .mobile-toc-toggle { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; background: transparent !important; border: none !important; font-size: 0.98rem !important; font-weight: 700 !important; color: #0F172A !important; cursor: pointer !important; text-align: left !important; } .mobile-toc-toggle i { color: #3882DB !important; transition: transform 0.2s ease !important; } .mobile-toc-accordion.active .mobile-toc-toggle i { transform: rotate(180deg) !important; } .mobile-toc-content { display: none !important; padding: 0 18px 16px 18px !important; border-top: 1px solid #E2E8F0 !important; } .mobile-toc-accordion.active .mobile-toc-content { display: block !important; } /* ========================================================================= */ /* UNIFIED BLOG & MAGAZINE STYLES (GEO STANDARD) */ /* ========================================================================= */ .blog-article-hero { position: relative; background: radial-gradient(circle at 50% 0%, #15223C 0%, #0B1120 85%) !important; color: #FFFFFF !important; padding-top: 200px !important; padding-bottom: 70px !important; overflow: hidden !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-align: center !important; } @media (max-width: 768px) { .blog-article-hero { padding-top: 145px !important; padding-bottom: 50px !important; } } .cat-hero { position: relative !important; background: radial-gradient(circle at 50% 0%, #15223C 0%, #0B1120 85%) !important; color: #FFFFFF !important; padding-top: 200px !important; padding-bottom: 70px !important; overflow: hidden !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-align: center !important; } @media (max-width: 768px) { .cat-hero { padding-top: 145px !important; padding-bottom: 50px !important; } } .blog-hero-inner, .blog-hero-container { max-width: 1000px !important; margin: 0 auto !important; padding: 0 24px !important; position: relative !important; z-index: 2 !important; } .blog-breadcrumb, .blog-hero-breadcrumb { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 0.9rem !important; color: #94A3B8 !important; margin: 0 auto 24px auto !important; line-height: 1.4 !important; } .blog-breadcrumb a, .blog-hero-breadcrumb a { color: #CBD5E1 !important; text-decoration: none !important; transition: color 0.2s ease, text-decoration 0.2s ease !important; font-weight: 500 !important; } .blog-breadcrumb a:hover, .blog-hero-breadcrumb a:hover { color: #FFFFFF !important; text-decoration: underline !important; } .blog-breadcrumb .sep, .blog-hero-breadcrumb .sep { color: #64748B !important; font-size: 0.72rem !important; display: inline-flex !important; align-items: center !important; padding: 0 2px !important; } .blog-breadcrumb .current, .blog-hero-breadcrumb .current { color: #60A5FA !important; font-weight: 600 !important; max-width: 500px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } @media (max-width: 640px) { .blog-breadcrumb .current, .blog-hero-breadcrumb .current { max-width: 250px !important; } } .blog-hero-title, .blog-article-h1 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: clamp(2.1rem, 4vw, 3.2rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #FFFFFF !important; letter-spacing: -0.025em !important; margin: 0 auto 20px auto !important; text-wrap: balance !important; } .blog-hero-title span { background: linear-gradient(135deg, #3882DB 0%, #60A5FA 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .blog-hero-meta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important; flex-wrap: wrap !important; color: #CBD5E1 !important; font-size: 0.92rem !important; margin-top: 24px !important; } .blog-hero-author { display: inline-flex !important; align-items: center !important; gap: 10px !important; } .blog-hero-author img { width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #3882DB !important; } /* Inhaltsverzeichnis (TOC) Box - Clean Standard */ .blog-toc-box { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #3882DB !important; border-radius: 14px !important; padding: 26px 30px !important; margin: 35px 0 45px 0 !important; box-sizing: border-box !important; } .blog-toc-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 0 14px 0 !important; display: flex !important; align-items: center !important; gap: 9px !important; } .blog-toc-title i { color: #3882DB !important; } .blog-toc-list { margin: 0 !important; padding-left: 20px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .blog-toc-list li { font-size: 0.96rem !important; font-weight: 600 !important; color: #334155 !important; line-height: 1.5 !important; } .blog-toc-list li a { color: #334155 !important; text-decoration: none !important; font-size: 0.96rem !important; font-weight: 600 !important; transition: color 0.2s ease !important; } .blog-toc-list li a:hover { color: #3882DB !important; text-decoration: underline !important; } /* H2 immer in Blau (#3882DB) & Plus Jakarta Sans & Nie eingerückt */ .article-body h2, .blog-main-content h2, .editorial-article h2, section[id] > h2, .blog-layout-container article h2, .article-body section h2 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: clamp(1.6rem, 2.3vw, 2.05rem) !important; font-weight: 800 !important; color: #3882DB !important; margin-top: 48px !important; margin-bottom: 18px !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; scroll-margin-top: 120px !important; text-wrap: balance !important; } .article-body h1, .article-body h2, .article-body h3, .article-body h4, .blog-main-content h1, .blog-main-content h2, .blog-main-content h3, .blog-main-content h4 { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; } .article-body blockquote, .blog-main-content blockquote { margin: 28px 0 !important; padding: 16px 24px !important; border-left: 4px solid #3882DB !important; background: #F8FAFC !important; border-radius: 0 12px 12px 0 !important; font-style: italic !important; color: #334155 !important; } .article-body h3, .blog-main-content h3, .editorial-article h3 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.3rem !important; font-weight: 700 !important; color: #1E293B !important; margin-top: 36px !important; margin-bottom: 14px !important; line-height: 1.35 !important; } .article-body h4, .blog-main-content h4, .editorial-article h4 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #0F172A !important; } .article-body h2:first-child, .blog-main-content h2:first-child, section[id]:first-child > h2 { margin-top: 0 !important; } /* BILDER DÜRFEN NICHT ÜBER CONTENTBEREICH HINAUSRAGEN */ .blog-main-content, .article-body, .editorial-article { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .blog-main-content img, .article-body img, .editorial-article img, .article-featured-image-wrap img, .blog-featured-image-box img { max-width: 100% !important; height: auto !important; display: block !important; box-sizing: border-box !important; } .article-body img:not(.blog-author-avatar) { width: auto !important; max-width: 100% !important; height: auto !important; margin: 35px auto !important; border-radius: 14px !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important; } .article-featured-image-wrap, .blog-featured-image-box { width: 100% !important; max-width: 100% !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important; border: 1px solid #E2E8F0 !important; margin-bottom: 40px !important; box-sizing: border-box !important; } /* Experte & Autor Box */ .blog-author-box { margin-top: 60px !important; padding: 30px !important; border-radius: 18px !important; background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; display: flex !important; align-items: center !important; gap: 24px !important; box-sizing: border-box !important; } @media (max-width: 640px) { .blog-author-box { flex-direction: column !important; text-align: center !important; padding: 24px !important; } } .article-body .blog-author-box .blog-author-avatar, .blog-author-box .blog-author-avatar, img.blog-author-avatar, .blog-author-avatar { width: 86px !important; height: 86px !important; min-width: 86px !important; min-height: 86px !important; max-width: 86px !important; max-height: 86px !important; border-radius: 50% !important; object-fit: cover !important; border: 3px solid #3882DB !important; box-shadow: none !important; margin: 0 !important; display: block !important; flex-shrink: 0 !important; } .blog-author-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 !important; } @media (max-width: 640px) { .blog-author-info { align-items: center !important; } } .blog-author-role { font-size: 0.88rem !important; color: #3882DB !important; font-weight: 700 !important; margin-bottom: 6px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; } .blog-author-info h4 { margin: 0 0 8px 0 !important; font-size: 1.25rem !important; font-weight: 800 !important; color: #0F172A !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; line-height: 1.25 !important; } .blog-author-info p { margin: 0 !important; font-size: 0.95rem !important; color: #475569 !important; line-height: 1.6 !important; } /* Back bar */ .blog-back-bar { margin-top: 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-top: 1px solid #E2E8F0 !important; padding-top: 24px !important; flex-wrap: wrap !important; gap: 16px !important; } .blog-back-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #3882DB !important; font-weight: 700 !important; font-size: 0.96rem !important; text-decoration: none !important; transition: gap 0.2s ease !important; } .blog-back-link:hover { gap: 12px !important; color: #2563EB !important; }