/* ============================================================ FABIAN HIRSCH – GLOBAL PREMIUM HEADER IDENTISCH AUF ALLEN SEITEN ============================================================ */ body.page-id-25, body.page-id-22, body.page-id-528, body.page-id-20, body.page-id-23, body.page-id-109 { --fh-header-cyan: #39c2d9; } /* ============================================================ HEADER – GRUNDLAGE ============================================================ */ body.page-id-25 header.wp-block-template-part, body.page-id-22 header.wp-block-template-part, body.page-id-528 header.wp-block-template-part, body.page-id-20 header.wp-block-template-part, body.page-id-23 header.wp-block-template-part, body.page-id-109 header.wp-block-template-part, body.page-id-25 .wp-site-blocks > header, body.page-id-22 .wp-site-blocks > header, body.page-id-528 .wp-site-blocks > header, body.page-id-20 .wp-site-blocks > header, body.page-id-23 .wp-site-blocks > header, body.page-id-109 .wp-site-blocks > header { position: relative !important; z-index: 9999 !important; width: 100% !important; max-width: none !important; min-height: 82px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; background: linear-gradient( 180deg, #071018 0%, #050b11 100% ) !important; background-color: #050b11 !important; background-image: none !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 10px 35px rgba(0,0,0,.18) !important; backdrop-filter: blur(18px) !important; } /* ============================================================ ALLE INNEREN HEADER-BLOCKS ============================================================ */ body.page-id-25 header.wp-block-template-part *, body.page-id-22 header.wp-block-template-part *, body.page-id-528 header.wp-block-template-part *, body.page-id-20 header.wp-block-template-part *, body.page-id-23 header.wp-block-template-part *, body.page-id-109 header.wp-block-template-part * { box-sizing: border-box; } /* innere Gruppen dürfen keinen weißen Hintergrund mehr bekommen */ body.page-id-25 header.wp-block-template-part .wp-block-group, body.page-id-22 header.wp-block-template-part .wp-block-group, body.page-id-528 header.wp-block-template-part .wp-block-group, body.page-id-20 header.wp-block-template-part .wp-block-group, body.page-id-23 header.wp-block-template-part .wp-block-group, body.page-id-109 header.wp-block-template-part .wp-block-group, body.page-id-25 header.wp-block-template-part .wp-block-navigation, body.page-id-22 header.wp-block-template-part .wp-block-navigation, body.page-id-528 header.wp-block-template-part .wp-block-navigation, body.page-id-20 header.wp-block-template-part .wp-block-navigation, body.page-id-23 header.wp-block-template-part .wp-block-navigation, body.page-id-109 header.wp-block-template-part .wp-block-navigation, body.page-id-25 header.wp-block-template-part .wp-block-navigation__container, body.page-id-22 header.wp-block-template-part .wp-block-navigation__container, body.page-id-528 header.wp-block-template-part .wp-block-navigation__container, body.page-id-20 header.wp-block-template-part .wp-block-navigation__container, body.page-id-23 header.wp-block-template-part .wp-block-navigation__container, body.page-id-109 header.wp-block-template-part .wp-block-navigation__container { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #ffffff !important; } /* ============================================================ LOGO ============================================================ */ body.page-id-25 header.wp-block-template-part .wp-block-site-logo img, body.page-id-22 header.wp-block-template-part .wp-block-site-logo img, body.page-id-528 header.wp-block-template-part .wp-block-site-logo img, body.page-id-20 header.wp-block-template-part .wp-block-site-logo img, body.page-id-23 header.wp-block-template-part .wp-block-site-logo img, body.page-id-109 header.wp-block-template-part .wp-block-site-logo img { display: block !important; max-height: 44px !important; width: auto !important; filter: brightness(0) invert(1) drop-shadow( 0 0 10px rgba(57,194,217,.10) ) !important; } /* ============================================================ NAVIGATION – ALLE WEISS ============================================================ */ body.page-id-25 header.wp-block-template-part .wp-block-navigation-item, body.page-id-22 header.wp-block-template-part .wp-block-navigation-item, body.page-id-528 header.wp-block-template-part .wp-block-navigation-item, body.page-id-20 header.wp-block-template-part .wp-block-navigation-item, body.page-id-23 header.wp-block-template-part .wp-block-navigation-item, body.page-id-109 header.wp-block-template-part .wp-block-navigation-item { background: transparent !important; color: #ffffff !important; } body.page-id-25 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-25 header.wp-block-template-part .wp-block-navigation-item__content, body.page-id-22 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-22 header.wp-block-template-part .wp-block-navigation-item__content, body.page-id-528 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-528 header.wp-block-template-part .wp-block-navigation-item__content, body.page-id-20 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-20 header.wp-block-template-part .wp-block-navigation-item__content, body.page-id-23 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-23 header.wp-block-template-part .wp-block-navigation-item__content, body.page-id-109 header.wp-block-template-part .wp-block-navigation-item a, body.page-id-109 header.wp-block-template-part .wp-block-navigation-item__content { position: relative !important; display: inline-flex !important; align-items: center !important; padding: 10px 0 !important; background: transparent !important; color: #ffffff !important; opacity: 1 !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1 !important; text-decoration: none !important; transition: color .25s ease, transform .25s ease !important; } /* ============================================================ CYAN HOVER ============================================================ */ body.page-id-25 header .wp-block-navigation-item a:hover, body.page-id-25 header .wp-block-navigation-item__content:hover, body.page-id-22 header .wp-block-navigation-item a:hover, body.page-id-22 header .wp-block-navigation-item__content:hover, body.page-id-528 header .wp-block-navigation-item a:hover, body.page-id-528 header .wp-block-navigation-item__content:hover, body.page-id-20 header .wp-block-navigation-item a:hover, body.page-id-20 header .wp-block-navigation-item__content:hover, body.page-id-23 header .wp-block-navigation-item a:hover, body.page-id-23 header .wp-block-navigation-item__content:hover, body.page-id-109 header .wp-block-navigation-item a:hover, body.page-id-109 header .wp-block-navigation-item__content:hover { color: var(--fh-header-cyan) !important; } /* ============================================================ HOVER-LINIE ============================================================ */ body.page-id-25 header .wp-block-navigation-item__content::after, body.page-id-22 header .wp-block-navigation-item__content::after, body.page-id-528 header .wp-block-navigation-item__content::after, body.page-id-20 header .wp-block-navigation-item__content::after, body.page-id-23 header .wp-block-navigation-item__content::after, body.page-id-109 header .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: var(--fh-header-cyan); transition: width .25s ease; } body.page-id-25 header .wp-block-navigation-item__content:hover::after, body.page-id-22 header .wp-block-navigation-item__content:hover::after, body.page-id-528 header .wp-block-navigation-item__content:hover::after, body.page-id-20 header .wp-block-navigation-item__content:hover::after, body.page-id-23 header .wp-block-navigation-item__content:hover::after, body.page-id-109 header .wp-block-navigation-item__content:hover::after { width: 100%; } /* ============================================================ KONTAKT – IMMER TÜRKIS ============================================================ */ body.page-id-25 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-25 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, body.page-id-22 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-22 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, body.page-id-528 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-528 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, body.page-id-20 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-20 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, body.page-id-23 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-23 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, body.page-id-109 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a, body.page-id-109 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content { padding: 11px 18px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 999px !important; background: linear-gradient( 135deg, #39c2d9, #64d8e5 ) !important; color: #061018 !important; box-shadow: 0 8px 22px rgba(57,194,217,.12) !important; } /* Kontakt Hover */ body.page-id-25 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover, body.page-id-22 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover, body.page-id-528 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover, body.page-id-20 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover, body.page-id-23 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover, body.page-id-109 header .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > a:hover { color: #061018 !important; background: linear-gradient( 135deg, #62d7e6, #7ce3ef ) !important; transform: translateY(-2px); } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 782px) { body.page-id-25 header.wp-block-template-part, body.page-id-22 header.wp-block-template-part, body.page-id-528 header.wp-block-template-part, body.page-id-20 header.wp-block-template-part, body.page-id-23 header.wp-block-template-part, body.page-id-109 header.wp-block-template-part { min-height: 68px !important; } body.page-id-25 header .wp-block-navigation, body.page-id-22 header .wp-block-navigation, body.page-id-528 header .wp-block-navigation, body.page-id-20 header .wp-block-navigation, body.page-id-23 header .wp-block-navigation, body.page-id-109 header .wp-block-navigation { gap: 12px !important; } body.page-id-25 header .wp-block-site-logo img, body.page-id-22 header .wp-block-site-logo img, body.page-id-528 header .wp-block-site-logo img, body.page-id-20 header .wp-block-site-logo img, body.page-id-23 header .wp-block-site-logo img, body.page-id-109 header .wp-block-site-logo img { max-height: 38px !important; } } /* ============================================================ FABIAN HIRSCH – MOBILES NAVIGATIONSMENÜ ============================================================ */ @media (max-width: 800px) { /* Öffnendes Menü */ body .wp-block-navigation__responsive-container.is-menu-open { background: radial-gradient( circle at 80% 10%, rgba(57,194,217,.08), transparent 30% ), #071018 !important; color: #ffffff !important; padding: 80px 24px 35px !important; box-sizing: border-box !important; z-index: 99999 !important; } /* Navigation als saubere Liste */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100% !important; gap: 5px !important; } /* Menüpunkte */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block !important; width: 100% !important; padding: 16px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(57,194,217,.10) !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 650 !important; text-decoration: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: #39c2d9 !important; background: rgba(57,194,217,.08) !important; border-color: rgba(57,194,217,.35) !important; } /* Kontakt Button */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.contact-button .wp-block-navigation-item__content, body .wp-block-navigation__responsive-container.is-menu-open a[href*="/kontakt/"] { color: #061018 !important; background: #39c2d9 !important; border-color: #39c2d9 !important; font-weight: 800 !important; } /* Schließen-X */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute !important; top: 18px !important; right: 18px !important; width: 44px !important; height: 44px !important; padding: 8px !important; color: #ffffff !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(57,194,217,.20) !important; border-radius: 10px !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { fill: #39c2d9 !important; stroke: #39c2d9 !important; } /* Menü-Button */ body .wp-block-navigation__responsive-container-open { color: #ffffff !important; } body .wp-block-navigation__responsive-container-open svg { fill: #39c2d9 !important; stroke: #39c2d9 !important; } } /* ============================================================ MOBILES MENÜ – KOMPAKTES POPUP-FENSTER ============================================================ */ @media (max-width: 800px) { /* Seite beim geöffneten Menü nicht mitscrollen */ body:has(.wp-block-navigation__responsive-container.is-menu-open) { overflow: hidden !important; } /* Hintergrund des geöffneten Menüs */ body .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; top: 78px !important; left: 16px !important; right: 16px !important; bottom: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: calc(100vh - 100px) !important; padding: 62px 16px 18px !important; box-sizing: border-box !important; background: linear-gradient( 145deg, rgba(17,32,42,.99), rgba(7,17,25,.99) ) !important; border: 1px solid rgba(57,194,217,.30) !important; border-radius: 18px !important; box-shadow: 0 25px 70px rgba(0,0,0,.50), 0 0 35px rgba(57,194,217,.08) !important; overflow: hidden !important; z-index: 99999 !important; } /* Inhalt */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100% !important; height: auto !important; display: block !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; } /* Menüpunkt */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; text-decoration: none !important; } /* Kontakt */ body .wp-block-navigation__responsive-container.is-menu-open a[href*="/kontakt/"] { justify-content: center !important; color: #071018 !important; background: #39c2d9 !important; border-color: #39c2d9 !important; font-weight: 800 !important; } /* Schließen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute !important; top: 13px !important; right: 13px !important; width: 38px !important; height: 38px !important; padding: 7px !important; color: #ffffff !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(57,194,217,.22) !important; border-radius: 9px !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 20px !important; height: 20px !important; fill: #39c2d9 !important; stroke: #39c2d9 !important; } /* Menü-Button */ body .wp-block-navigation__responsive-container-open { color: #ffffff !important; } body .wp-block-navigation__responsive-container-open svg { fill: #39c2d9 !important; stroke: #39c2d9 !important; } } /* ============================================================ HOME – MOBILES MENÜ: SCHWARZEN BEREICH HINTER LOGO/X ENTFERNEN ============================================================ */ @media (max-width: 800px) { body.home .wp-block-navigation__responsive-container.is-menu-open, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open { background: transparent !important; } /* Header selbst beim geöffneten Menü sauber dunkel halten */ body.home header.wp-block-template-part, body.page-id-25 header.wp-block-template-part { background: #071018 !important; } body.home > .wp-site-blocks > header, body.page-id-25 > .wp-site-blocks > header { background: #071018 !important; } /* Das eigentliche Popup bleibt erhalten */ body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { background: transparent !important; } } /* ============================================================ HOME = EXAKT DASSELBE MOBILE MENÜ WIE ALLE ANDEREN SEITEN ============================================================ */ @media (max-width: 800px) { body.home .wp-block-navigation__responsive-container.is-menu-open, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; top: 78px !important; left: 16px !important; right: 16px !important; bottom: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: calc(100vh - 100px) !important; padding: 62px 16px 18px !important; box-sizing: border-box !important; background: linear-gradient( 145deg, rgba(17,32,42,.99), rgba(7,17,25,.99) ) !important; border: 1px solid rgba(57,194,217,.30) !important; border-radius: 18px !important; box-shadow: 0 25px 70px rgba(0,0,0,.50), 0 0 35px rgba(57,194,217,.08) !important; overflow: hidden !important; z-index: 99999 !important; } body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100% !important; height: auto !important; background: transparent !important; } body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* Header auf Home genauso wie auf den anderen Seiten */ body.home .wp-block-template-part, body.page-id-25 .wp-block-template-part, body.home > .wp-site-blocks > header, body.page-id-25 > .wp-site-blocks > header { background: #071018 !important; } } /* ============================================================ HOME MOBILE – SCHWARZEN LOGO/X-BEREICH ENTFERNEN ============================================================ */ @media (max-width: 800px) { body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* Bereich um Logo und X ebenfalls transparent */ body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close > div, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close > div { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; } /* Logo selbst */ body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo { background: transparent !important; } body.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img, body.page-id-25 .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img { background: transparent !important; } } /* ============================================================ MOBILES MENÜ – KONTAKT WIE ALLE ANDEREN MENÜPUNKTE ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open a[href*="/kontakt/"] { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 44px !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; text-align: left !important; box-shadow: none !important; } body .wp-block-navigation__responsive-container.is-menu-open a[href*="/kontakt/"]:hover { color: #39c2d9 !important; background: rgba(57,194,217,.08) !important; border-color: rgba(57,194,217,.35) !important; } } /* ============================================================ KONTAKT – EXAKT WIE DIE ANDEREN MOBILEN MENÜPUNKTE ============================================================ */ @media (max-width: 800px) { /* Kontakt = 4. Menüpunkt */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content, /* Falls WordPress die Button-Klasse verwendet */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.contact-button .wp-block-navigation-item__content, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-button .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 44px !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; text-align: left !important; box-shadow: none !important; transform: none !important; } /* Hover ebenfalls identisch */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.contact-button .wp-block-navigation-item__content:hover { color: #39c2d9 !important; background: rgba(57,194,217,.08) !important; border-color: rgba(57,194,217,.35) !important; box-shadow: none !important; } } /* ============================================================ KONTAKT – PIXELGLEICH ZU DEN ANDEREN MENÜPUNKTEN ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[href*="kontakt"], body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; text-align: left !important; box-shadow: none !important; transform: none !important; } /* Auch alle inneren Elemente des Kontakt-Links zurücksetzen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) a *, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[href*="kontakt"] * { font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; color: #ffffff !important; } /* Hover */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) a:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[href*="kontakt"]:hover { color: #39c2d9 !important; background: rgba(57,194,217,.08) !important; border-color: rgba(57,194,217,.35) !important; } } /* ============================================================ KONTAKT – KOMPLETT AUF NORMALES MENÜ-ITEM ZURÜCKSETZEN ============================================================ */ @media (max-width: 800px) { /* Kontakt-Container selbst */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* Eventuelle Button-Wrapper entfernen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > .wp-block-button { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Kontakt-Link exakt wie die normalen Menüboxen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } /* Alles innerhalb des Kontakt-Links */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) a * { color: #ffffff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; letter-spacing: normal !important; } /* Hover genauso wie die anderen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) a:hover { color: #39c2d9 !important; background: rgba(57,194,217,.08) !important; border-color: rgba(57,194,217,.35) !important; box-shadow: none !important; transform: none !important; } } /* ============================================================ MOBILE MENU – ALLE PUNKTE WIE KONTAKT ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 8px !important; } /* Jeder Menüpunkt bekommt denselben Button-Stil */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-button { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* Alle Links exakt gleich */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-button > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-block-button__link, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-element-button { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 11px 14px !important; color: #ffffff !important; background: rgba(255,255,255,.08) !important; background-image: none !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 9px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; outline: none !important; } /* Auch alle WordPress-Button-Inhalte angleichen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li a span, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li a strong { color: #ffffff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: normal !important; } /* Hover / Touch für ALLE gleich */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:active { color: #ffffff !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; transform: none !important; } /* Kontakt verliert damit ebenfalls seinen bisherigen Sonderstil */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) .wp-block-button__link { width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 11px 14px !important; color: #ffffff !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 650 !important; box-shadow: none !important; transform: none !important; } } /* ============================================================ KONTAKT – KOMPLETT NEU AUFBAUEN ============================================================ */ @media (max-width: 800px) { /* Kontakt-Container komplett neutralisieren */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4), body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4).wp-block-button { all: unset !important; display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* Kontakt-Link komplett neu */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > .wp-block-button__link { all: unset !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 11px 14px !important; background: rgba(255,255,255,.08) !important; background-image: none !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 9px !important; color: #ffffff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* Kontakt-Schrift ebenfalls komplett neutral */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) a * { all: unset !important; color: #ffffff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: normal !important; } /* Kein Button-Hover mehr */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a:active { background: rgba(255,255,255,.08) !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } } /* ============================================================ FINAL MOBILE NAVIGATION ALLE NAVIGATION-LINKS ABSOLUT IDENTISCH ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } /* Alle direkten Navigationselemente */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: block !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* ALLE Links – inklusive Kontakt */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 11px 14px !important; color: #ffffff !important; background: rgba(255,255,255,0.08) !important; background-color: rgba(255,255,255,0.08) !important; background-image: none !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* Kontakt explizit auf exakt denselben Wert */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/kontakt/"] { display: flex !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #ffffff !important; background: rgba(255,255,255,0.08) !important; background-color: rgba(255,255,255,0.08) !important; background-image: none !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.2 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* Kein Unterschied bei Hover/Focus/Active */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/kontakt/"]:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/kontakt/"]:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/kontakt/"]:active { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; background-color: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } } /* ============================================================ MOBILE MENU – ABSOLUT EINHEITLICHE FELDER Kontakt wird vollständig vom Button-Styling befreit ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li { --wp--preset--color--background: transparent !important; --wp--preset--color--base: transparent !important; --wp--preset--color--contrast: #fff !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-button, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-button > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-element-button, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-block-button__link { background: rgba(255,255,255,0.045) !important; background-color: rgba(255,255,255,0.045) !important; background-image: none !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } /* Kontakt explizit exakt derselbe Wert */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a[href*="kontakt"] { background: rgba(255,255,255,0.045) !important; background-color: rgba(255,255,255,0.045) !important; background-image: none !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } /* Auch Button-Pseudo-Elemente entfernen */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li::before, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li::after, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li a::before, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li a::after { content: none !important; background: none !important; box-shadow: none !important; } /* Kontakt darf keine Button-Klasse mehr optisch auswerten */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-button, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-element-button { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-button > a { background: rgba(255,255,255,0.045) !important; background-color: rgba(255,255,255,0.045) !important; background-image: none !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 9px !important; box-shadow: none !important; } } /* ============================================================ MOBILE MENU – ALLE BUTTONS SCHWARZ ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-button, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-button > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-element-button, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-block-button__link { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } /* Kontakt ebenfalls absolut schwarz */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a[href*="kontakt"] { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } /* Hover/Fokus ebenfalls schwarz */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:active { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: none !important; } } /* ============================================================ HEADER NAVIGATION – FIX NACH ENTFERNEN VON DIENSTLEISTUNGEN ============================================================ */ /* Alle Navigationspunkte einheitlich */ header .wp-block-navigation .wp-block-navigation-item__content { background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255,255,255,.78) !important; padding: 10px 14px !important; border-radius: 999px !important; } /* Hover für alle normalen Menüpunkte */ header .wp-block-navigation .wp-block-navigation-item__content:hover { background: rgba(57,194,217,.08) !important; color: #39c2d9 !important; } /* Kontakt bleibt der hervorgehobene Button */ header .wp-block-navigation a[href*="/kontakt/"] { background: #39c2d9 !important; color: #061018 !important; border: 1px solid #39c2d9 !important; padding: 10px 18px !important; border-radius: 999px !important; box-shadow: none !important; } /* Kontakt Hover */ header .wp-block-navigation a[href*="/kontakt/"]:hover { background: #ffffff !important; color: #061018 !important; border-color: #ffffff !important; } /* Lebenslauf darf niemals wie der Kontakt-Button aussehen */ header .wp-block-navigation a[href*="/erfahrungsberichte/"] { background: transparent !important; color: rgba(255,255,255,.78) !important; border: none !important; box-shadow: none !important; } header .wp-block-navigation a[href*="/erfahrungsberichte/"]:hover { background: rgba(57,194,217,.08) !important; color: #39c2d9 !important; } /* ============================================================ GLOBALE NAVIGATION – ALLE MENÜPUNKTE EINHEITLICH ============================================================ */ header .wp-block-navigation .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation-item__content:visited, header .wp-block-navigation a[href*="/kontakt/"], header .wp-block-navigation a[href*="/erfahrungsberichte/"], header .wp-block-navigation a[href*="/netzwerk-fuer-macher/"], header .wp-block-navigation a[href*="/impressum/"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: rgba(255,255,255,.82) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 !important; margin: 0 18px !important; font-weight: 600 !important; text-decoration: none !important; } /* Hover – für ALLE gleich */ header .wp-block-navigation .wp-block-navigation-item__content:hover, header .wp-block-navigation a[href*="/kontakt/"]:hover, header .wp-block-navigation a[href*="/erfahrungsberichte/"]:hover, header .wp-block-navigation a[href*="/netzwerk-fuer-macher/"]:hover, header .wp-block-navigation a[href*="/impressum/"]:hover { background: transparent !important; color: #39c2d9 !important; border: none !important; box-shadow: none !important; } /* Aktiver Menüpunkt – ebenfalls gleiche Form, nur Cyan */ header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, header .wp-block-navigation .current-menu-item > a, header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] { background: transparent !important; color: #39c2d9 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Kein alter Kontakt-/Lebenslauf-Button darf durchkommen */ header .wp-block-navigation a[href*="/kontakt/"], header .wp-block-navigation a[href*="/erfahrungsberichte/"] { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* ============================================================ FINAL FIX – LEBENSLAUF KEIN BUTTON ============================================================ */ /* Lebenslauf als kompletter Navigationseintrag zurücksetzen */ header .wp-block-navigation .wp-block-navigation-item:has( > a[href*="/erfahrungsberichte/"] ), header .wp-block-navigation .wp-block-navigation-item:nth-child(4) { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Lebenslauf-Link selbst */ header .wp-block-navigation .wp-block-navigation-item:has( > a[href*="/erfahrungsberichte/"] ) > a, header .wp-block-navigation .wp-block-navigation-item:nth-child(4) > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: rgba(255,255,255,.82) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 !important; margin: 0 18px !important; font-weight: 600 !important; text-decoration: none !important; } /* Hover */ header .wp-block-navigation .wp-block-navigation-item:has( > a[href*="/erfahrungsberichte/"] ) > a:hover, header .wp-block-navigation .wp-block-navigation-item:nth-child(4) > a:hover { background: transparent !important; color: #39c2d9 !important; border: none !important; box-shadow: none !important; } /* Alte Button-/Pill-Effekte vollständig entfernen */ header .wp-block-navigation .wp-block-navigation-item:has( > a[href*="/erfahrungsberichte/"] )::before, header .wp-block-navigation .wp-block-navigation-item:has( > a[href*="/erfahrungsberichte/"] )::after { display: none !important; content: none !important; } /* ============================================================ LEBENSLAUF – ALLE BUTTON-STYLES ENTFERNEN ============================================================ */ /* kompletter Navigationseintrag */ header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* alle Elemente darin */ header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]) *, header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]) *::before, header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]) *::after { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* der eigentliche Lebenslauf-Link */ header a[href*="erfahrungsberichte"] { display: inline-flex !important; align-items: center !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.82) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 !important; margin: 0 18px !important; text-decoration: none !important; } /* Hover */ header a[href*="erfahrungsberichte"]:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #39c2d9 !important; } /* auch WP Button-Klassen ausschalten */ header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]).is-style-fill, header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]).wp-block-button, header .wp-block-navigation-item:has(a[href*="erfahrungsberichte"]) .wp-block-button__link { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ============================================================ ABSOLUTER FIX – LEBENSLAUF WIE ALLE ANDEREN NAV-PUNKTE ============================================================ */ /* Exakt der 4. Menüpunkt: Lebenslauf */ header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4) > a.wp-block-navigation-item__content[href*="erfahrungsberichte"] { background: none !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.82) !important; border: none !important; border-width: 0 !important; border-style: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 8px 0 !important; margin: 0 18px !important; } /* Auch das übergeordnete LI */ header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4) { background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Hover */ header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4) > a.wp-block-navigation-item__content[href*="erfahrungsberichte"]:hover { background: none !important; background-color: transparent !important; background-image: none !important; color: #39c2d9 !important; border: none !important; box-shadow: none !important; } /* Active */ header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4).current-menu-item > a.wp-block-navigation-item__content { background: none !important; background-color: transparent !important; background-image: none !important; color: #39c2d9 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Pseudo-Elemente ebenfalls entfernen */ header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4)::before, header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4)::after, header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4) > a::before, header.wp-block-template-part .wp-block-navigation ul.wp-block-navigation__container > li.wp-block-navigation-item:nth-child(4) > a::after { display: none !important; background: none !important; content: none !important; } /* ============================================================ MOBILE NAVIGATION – LEBENSLAUF EXAKT WIE ALLE ANDEREN ============================================================ */ @media (max-width: 782px) { /* Lebenslauf komplett auf normalen mobilen Nav-Stil setzen */ header .wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content[href*="erfahrungsberichte"] { background: transparent !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.9) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px !important; box-shadow: none !important; outline: none !important; padding: 13px 16px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Auch das LI darf keinen Sonderstil haben */ header .wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } /* Hover / Fokus / Aktiv exakt gleich */ header .wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content[href*="erfahrungsberichte"]:hover, header .wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content[href*="erfahrungsberichte"]:focus, header .wp-block-navigation__responsive-container .wp-block-navigation-item:nth-child(4).current-menu-item > .wp-block-navigation-item__content[href*="erfahrungsberichte"] { background: rgba(255,255,255,.05) !important; background-color: rgba(255,255,255,.05) !important; color: #39c2d9 !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px !important; box-shadow: none !important; } } /* ============================================================ FINAL MOBILE NAV – LEBENSLAUF EXAKT WIE DIE ANDEREN LINKS ============================================================ */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a.wp-block-navigation-item__content[href*="erfahrungsberichte"] { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; padding: 13px 16px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* Hover / Fokus / Aktiv ebenfalls identisch */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a.wp-block-navigation-item__content[href*="erfahrungsberichte"]:hover, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a.wp-block-navigation-item__content[href*="erfahrungsberichte"]:focus, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4).current-menu-item > a.wp-block-navigation-item__content[href*="erfahrungsberichte"] { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 9px !important; box-shadow: none !important; } } /* IMPRESSUM – exakt wie normale Navigation */ header .wp-block-navigation a[href*="/impressum/"], header .wp-block-navigation a[href*="/impressum/"]:visited, header .wp-block-navigation a[href*="/impressum/"]:hover, header .wp-block-navigation a[href*="/impressum/"]:focus, header .wp-block-navigation a[href*="/impressum/"]:active { background: transparent !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.82) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 !important; margin: 0 18px !important; font-weight: 600 !important; text-decoration: none !important; } /* 4. NAVIGATIONSPUNKT – exakt wie Home */ header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4), header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a, header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a.wp-element-button, header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a.wp-block-button__link { background: transparent !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.82) !important; border: none !important; border-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; padding: 8px 0 !important; margin: 0 18px !important; font-weight: 600 !important; text-decoration: none !important; } /* Auch Hover / Focus / Active */ header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4):hover, header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a:hover, header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a:focus, header .wp-block-navigation .wp-block-navigation__container > li:nth-child(4) > a:active { background: transparent !important; background-color: transparent !important; color: rgba(255,255,255,.82) !important; border: none !important; box-shadow: none !important; } /* Mobile ebenfalls */ @media (max-width: 800px) { body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4), body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) > a.wp-element-button { background: #000000 !important; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 9px !important; box-shadow: none !important; } } /* ============================================================ ALLE ANGEBOTE – LESBARES DROPDOWN ============================================================ */ header .wp-block-navigation .wp-block-navigation__submenu-container { background: #07121b !important; border: 1px solid rgba(57,194,217,.22) !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(0,0,0,.45) !important; padding: 8px !important; min-width: 235px !important; } /* Dropdown-Schrift */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #ffffff !important; background: transparent !important; border-radius: 8px !important; padding: 11px 14px !important; } /* Hover */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(57,194,217,.14) !important; color: #39c2d9 !important; } /* Abstand der Untermenüpunkte */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 2px 0 !important; } /* ============================================================ NAVIGATION – FINALE EINHEITLICHE HAUPTPUNKTE ============================================================ */ /* Alle Hauptmenüpunkte identisch */ header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* Alle direkten Hauptlinks identisch */ header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { background: transparent !important; background-image: none !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; color: rgba(255,255,255,.78) !important; padding: 10px 14px !important; margin: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover für ALLE Hauptpunkte */ header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: rgba(57,194,217,.08) !important; color: #39c2d9 !important; } /* ============================================================ KONTAKT – explizit KEIN Sonderdesign ============================================================ */ header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4), header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content { background: transparent !important; background-image: none !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px 14px !important; margin: 0 !important; } /* ============================================================ IMPRESSUM – ebenfalls normales Hauptmenü ============================================================ */ header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5), header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) > .wp-block-navigation-item__content { background: transparent !important; background-image: none !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px 14px !important; margin: 0 !important; } /* Mobile – gleichmäßige, größere Abstände aller Hauptmenüpunkte */ @media (max-width: 782px) { header .wp-block-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item { margin: 0 0 14px 0 !important; width: 100% !important; } header .wp-block-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:last-child { margin-bottom: 0 !important; } header .wp-block-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; } } /* ========================================================= MOBILE NAV – HAUPTPUNKTE KOMPLETT NEU ========================================================= */ @media screen and (max-width: 782px) { /* Hauptmenü wirklich mit Abstand untereinander */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { display: flex !important; flex-direction: column !important; gap: 16px !important; row-gap: 16px !important; } /* Jeder Hauptpunkt exakt gleich */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item, header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-submenu { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Auch wenn WordPress das Gap ignoriert: jeder Hauptpunkt bekommt festen Abstand */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li:not(:last-child) { margin-bottom: 16px !important; } /* Letzter Punkt kein zusätzlicher Abstand */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li:last-child { margin-bottom: 0 !important; } /* Einheitliche Hauptpunkt-Höhe */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li > a, header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li > .wp-block-navigation-item__content { min-height: 68px !important; height: 68px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; } } /* ========================================================= MOBILE NAV – SCROLLBAR ========================================================= */ @media screen and (max-width: 782px) { header .wp-block-navigation__responsive-container.is-menu-open { height: 100dvh !important; max-height: 100dvh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { min-height: 100% !important; height: auto !important; overflow: visible !important; } header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { padding-bottom: 40px !important; } } /* ========================================================= MOBILE NAV – KOMPAKTER KOPFBEREICH ========================================================= */ @media screen and (max-width: 782px) { /* Oberen Bereich des geöffneten Menükastens verkleinern */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; } /* Logo / oberer Headerbereich kompakter */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4px !important; } /* Schließen-Button kleiner */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { margin-top: 0 !important; margin-bottom: 0 !important; } /* Hauptmenü etwas weiter nach oben */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { margin-top: 4px !important; } } /* Mobile Navigation – Logo + X oben kompakter */ @media screen and (max-width: 782px) { header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 0 !important; height: auto !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; } /* Logo kleiner und näher an X */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img { max-height: 42px !important; width: auto !important; } /* X kompakter */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { width: 42px !important; height: 42px !important; margin: 0 !important; padding: 6px !important; } /* Menü direkt unter Logo/X */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { margin-top: 0 !important; padding-top: 0 !important; } } /* Mobile Menü – Logo + X ganz nach oben */ @media screen and (max-width: 782px) { header .wp-block-navigation__responsive-container.is-menu-open { padding-top: 0 !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { position: relative !important; top: -18px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; min-height: 0 !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; margin-top: -10px !important; } /* Logo */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo { margin-top: 0 !important; margin-bottom: 0 !important; } /* X */ header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { margin-top: 0 !important; } /* Menü danach wieder normal */ header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { margin-top: 0 !important; } } /* Mobile – X kompakter und gleichmäßig umgeben */ @media screen and (max-width: 782px) { header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 5px !important; margin: 0 !important; box-sizing: border-box !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 22px !important; height: 22px !important; } }