#ctl-header-plugin{ --black:#171717;--red:#e5272d;--orange:#ef6b21;--yellow:#efbd30;--green:#53a846;--lightblue:#59bbed;--blue:#274bbd;--purple:#7139ad;--magenta:#d52b8a; position:fixed;z-index:999999;top:0;left:0;right:0;width:100%;margin:0;padding:0;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(0,0,0,.055); -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);font-family:Arial,Helvetica,sans-serif;transition:background .3s ease,box-shadow .3s ease} #ctl-header-plugin *,#ctl-header-plugin *::before,#ctl-header-plugin *::after{box-sizing:border-box} #ctl-header-plugin::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 3%,rgba(229,39,45,.45),rgba(239,107,33,.5),rgba(239,189,48,.5),rgba(83,168,70,.5),rgba(89,187,237,.5),rgba(39,75,189,.5),rgba(113,57,173,.5),rgba(213,43,138,.45),transparent 97%);opacity:.45;pointer-events:none} #ctl-header-plugin .ctl-h3-inner{width:min(1320px,calc(100% - 50px));height:78px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:35px;transition:height .3s ease} #ctl-header-plugin .ctl-h3-brand-group{display:flex;align-items:center;gap:17px;flex:0 0 auto;min-width:0} #ctl-header-plugin .ctl-h3-brand{display:flex;align-items:center;justify-content:flex-start;width:220px;max-width:220px;height:48px;max-height:48px;overflow:hidden;margin:0;padding:0;text-decoration:none;opacity:0;transform:translateY(-7px);animation:ctlHeaderPluginLogoIn .65s cubic-bezier(.2,.7,.2,1) .05s forwards} #ctl-header-plugin .ctl-h3-logo{display:block;position:static;width:220px;min-width:0;max-width:220px;height:48px;min-height:0;max-height:48px;margin:0;padding:0;object-fit:contain;object-position:left center;border:0;box-shadow:none;transition:width .3s ease,height .3s ease} #ctl-header-plugin .ctl-h3-eye{position:relative;display:flex;align-items:center;justify-content:center;width:61px;height:38px;flex:0 0 61px;opacity:0;transform:scale(.75);animation:ctlHeaderPluginEyeEntrance .8s cubic-bezier(.2,1.2,.3,1) .28s forwards} #ctl-header-plugin .ctl-h3-eye svg{display:block;width:61px;height:auto;overflow:visible} #ctl-header-plugin .ctl-eye-outline{fill:none;stroke:rgba(23,23,23,.82);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #ctl-header-plugin .ctl-eye-left,#ctl-header-plugin .ctl-eye-right{fill:none;stroke-width:3;stroke-linecap:round;opacity:.78;transform-origin:50px 31px;animation:ctlHeaderPluginEyeBreathe 3.4s ease-in-out infinite} #ctl-header-plugin .ctl-eye-right{animation-delay:.25s} #ctl-header-plugin .ctl-eye-halo{transform-origin:50px 31px;animation:ctlHeaderPluginEyeHalo 2.5s ease-in-out infinite} #ctl-header-plugin .ctl-eye-core{transform-origin:50px 31px;animation:ctlHeaderPluginEyeCore 2.5s ease-in-out infinite} #ctl-header-plugin .ctl-h3-eye::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 6px #fff,0 0 12px rgba(239,189,48,.7),0 0 24px rgba(239,189,48,.35);pointer-events:none;animation:ctlHeaderPluginEyeGlow 2.5s ease-in-out infinite} #ctl-header-plugin .ctl-h3-divider{width:1px;height:26px;flex:0 0 1px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.14),transparent);opacity:.7} #ctl-header-plugin .ctl-h3-nav{margin-left:auto;min-width:0} #ctl-header-plugin .ctl-h3-nav-list{display:flex;align-items:center;justify-content:flex-end;gap:clamp(19px,2vw,33px);list-style:none;margin:0;padding:0} #ctl-header-plugin .ctl-h3-nav-list>li{position:relative;margin:0;padding:0} #ctl-header-plugin .ctl-h3-nav-list>li>a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0;color:var(--black);text-decoration:none;font:600 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.065em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(-7px);animation:ctlHeaderPluginNavIn .55s ease forwards} #ctl-header-plugin .ctl-h3-nav-list>li:nth-child(1)>a{animation-delay:.12s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(2)>a{animation-delay:.17s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(3)>a{animation-delay:.22s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(4)>a{animation-delay:.27s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(5)>a{animation-delay:.32s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(6)>a{animation-delay:.37s}#ctl-header-plugin .ctl-h3-nav-list>li:nth-child(7)>a{animation-delay:.42s} #ctl-header-plugin .ctl-h3-nav-list>li>a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:linear-gradient(90deg,var(--red),var(--orange),var(--purple));transform:scaleX(0);transform-origin:center;transition:transform .27s ease} @media(hover:hover) and (pointer:fine){#ctl-header-plugin .ctl-h3-nav-list>li>a:hover::after,#ctl-header-plugin .ctl-h3-nav-list>li.current-menu-item>a::after,#ctl-header-plugin .ctl-h3-nav-list>li.current-menu-ancestor>a::after{transform:scaleX(1)}} #ctl-header-plugin.ctl-header-last-button .ctl-h3-nav-list>li:last-child>a{min-height:38px;padding:0 17px;border:1px solid rgba(0,0,0,.16);transition:border-color .25s ease,background .25s ease} #ctl-header-plugin.ctl-header-last-button .ctl-h3-nav-list>li:last-child>a::after{display:none} @media(hover:hover) and (pointer:fine){#ctl-header-plugin.ctl-header-last-button .ctl-h3-nav-list>li:last-child>a:hover{border-color:var(--purple);background:rgba(113,57,173,.035)}} #ctl-header-plugin .ctl-h3-nav-list .sub-menu{position:absolute;z-index:20;left:50%;top:calc(100% - 1px);min-width:210px;margin:0;padding:9px;list-style:none;background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.08);box-shadow:0 15px 35px rgba(0,0,0,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(7px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease} #ctl-header-plugin .ctl-h3-nav-list li:hover>.sub-menu,#ctl-header-plugin .ctl-h3-nav-list li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} #ctl-header-plugin .ctl-h3-nav-list .sub-menu li{margin:0;padding:0} #ctl-header-plugin .ctl-h3-nav-list .sub-menu a{display:block;padding:11px 13px;color:var(--black);text-decoration:none;font-size:11px;font-weight:500;white-space:nowrap} #ctl-header-plugin .ctl-h3-nav-list .sub-menu a:hover{background:rgba(113,57,173,.04);color:var(--purple)} #ctl-header-plugin.is-scrolled{background:rgba(255,255,255,.975);box-shadow:0 9px 30px rgba(0,0,0,.055)} #ctl-header-plugin.is-scrolled .ctl-h3-inner{height:68px} #ctl-header-plugin.is-scrolled .ctl-h3-brand,#ctl-header-plugin.is-scrolled .ctl-h3-logo{width:195px;max-width:195px;height:43px;max-height:43px} #ctl-header-plugin.is-scrolled .ctl-h3-eye{width:54px;height:34px;flex-basis:54px} #ctl-header-plugin.is-scrolled .ctl-h3-eye svg{width:54px} #ctl-header-plugin .ctl-h3-toggle{display:none;position:relative;width:46px;height:46px;flex:0 0 46px;margin:0;padding:0;border:0;background:transparent;cursor:pointer} #ctl-header-plugin .ctl-h3-toggle span,#ctl-header-plugin .ctl-h3-toggle span::before{position:absolute;left:10px;width:26px;height:1px;background:var(--black);content:"";transition:transform .28s ease,top .28s ease} #ctl-header-plugin .ctl-h3-toggle span{top:18px}#ctl-header-plugin .ctl-h3-toggle span::before{left:0;top:9px} #ctl-header-plugin.menu-open .ctl-h3-toggle span{top:22px;transform:rotate(45deg)}#ctl-header-plugin.menu-open .ctl-h3-toggle span::before{top:0;transform:rotate(-90deg)} #ctl-header-plugin .ctl-h3-mobile{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 70px);overflow-y:auto;background:rgba(255,255,255,.985);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 18px 35px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} #ctl-header-plugin .ctl-h3-mobile-inner{width:calc(100% - 30px);margin:0 auto;padding:8px 0 18px} #ctl-header-plugin .ctl-h3-mobile-list,#ctl-header-plugin .ctl-h3-mobile-list .sub-menu{list-style:none;margin:0;padding:0} #ctl-header-plugin .ctl-h3-mobile-list>li{border-bottom:1px solid rgba(0,0,0,.07)} #ctl-header-plugin .ctl-h3-mobile-list>li:last-child{border-bottom:0} #ctl-header-plugin .ctl-h3-mobile-list>li>a{display:flex;align-items:center;justify-content:space-between;min-height:57px;color:var(--black);text-decoration:none;font:600 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase} #ctl-header-plugin .ctl-h3-mobile-list>li>a::after{content:"→";font-family:Georgia,serif;font-size:18px;color:var(--purple)} #ctl-header-plugin .ctl-h3-mobile-list .sub-menu{padding:0 0 10px 15px} #ctl-header-plugin .ctl-h3-mobile-list .sub-menu a{display:block;padding:9px 0;color:#666;text-decoration:none;font-size:12px} .ctl-h3-spacer{display:block;width:100%;height:78px;margin:0;padding:0} @keyframes ctlHeaderPluginLogoIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} @keyframes ctlHeaderPluginNavIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} @keyframes ctlHeaderPluginEyeEntrance{0%{opacity:0;transform:scale(.65) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes ctlHeaderPluginEyeBreathe{0%,100%{opacity:.63;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}} @keyframes ctlHeaderPluginEyeHalo{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:.95;transform:scale(1.3)}} @keyframes ctlHeaderPluginEyeCore{0%,100%{opacity:.8;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}} @keyframes ctlHeaderPluginEyeGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.75);box-shadow:0 0 5px #fff,0 0 10px rgba(239,189,48,.55),0 0 18px rgba(239,189,48,.22)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 7px #fff,0 0 17px rgba(239,189,48,.9),0 0 32px rgba(239,189,48,.48)}} @media(max-width:980px){#ctl-header-plugin .ctl-h3-nav-list{gap:16px}#ctl-header-plugin .ctl-h3-nav-list>li>a{font-size:9px}#ctl-header-plugin .ctl-h3-brand,#ctl-header-plugin .ctl-h3-logo{width:190px;max-width:190px}#ctl-header-plugin .ctl-h3-eye{width:50px;flex-basis:50px}#ctl-header-plugin .ctl-h3-eye svg{width:50px}} @media(max-width:860px){#ctl-header-plugin .ctl-h3-inner{width:calc(100% - 30px);height:72px}.ctl-h3-spacer{height:72px}#ctl-header-plugin .ctl-h3-nav{display:none}#ctl-header-plugin .ctl-h3-divider{display:none}#ctl-header-plugin .ctl-h3-toggle{display:block}#ctl-header-plugin .ctl-h3-brand-group{gap:12px}#ctl-header-plugin .ctl-h3-brand,#ctl-header-plugin .ctl-h3-logo{width:180px;max-width:180px;height:40px;max-height:40px}#ctl-header-plugin .ctl-h3-eye{width:47px;height:30px;flex-basis:47px}#ctl-header-plugin .ctl-h3-eye svg{width:47px}#ctl-header-plugin.is-scrolled .ctl-h3-inner{height:64px}#ctl-header-plugin.menu-open .ctl-h3-mobile{display:block;animation:ctlHeaderPluginMobileIn .28s ease forwards}} @keyframes ctlHeaderPluginMobileIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} @media(max-width:480px){#ctl-header-plugin .ctl-h3-brand-group{gap:8px}#ctl-header-plugin .ctl-h3-brand,#ctl-header-plugin .ctl-h3-logo{width:155px;max-width:155px;height:36px;max-height:36px}#ctl-header-plugin .ctl-h3-eye{width:41px;height:27px;flex-basis:41px}#ctl-header-plugin .ctl-h3-eye svg{width:41px}} @media(max-width:370px){#ctl-header-plugin .ctl-h3-brand,#ctl-header-plugin .ctl-h3-logo{width:135px;max-width:135px}#ctl-header-plugin .ctl-h3-eye{width:36px;flex-basis:36px}#ctl-header-plugin .ctl-h3-eye svg{width:36px}} @media(prefers-reduced-motion:reduce){#ctl-header-plugin *,#ctl-header-plugin *::before,#ctl-header-plugin *::after{animation:none!important;transition:none!important}#ctl-header-plugin .ctl-h3-brand,#ctl-header-plugin .ctl-h3-eye,#ctl-header-plugin .ctl-h3-nav-list>li>a{opacity:1!important;transform:none!important}} /* ========================================================= MW OVERRIDE – GRÖSSERE NAVIGATION ========================================================= */ /* Desktop Menüpunkte */ #ctl-header-plugin .ctl-h3-nav-list { gap: clamp(22px, 2vw, 34px); } #ctl-header-plugin .ctl-h3-nav-list > li > a { min-height: 46px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .055em; } /* Letzter Menüpunkt als Button */ #ctl-header-plugin.ctl-header-last-button .ctl-h3-nav-list > li:last-child > a { min-height: 46px; padding: 0 24px; font-size: 13px; font-weight: 600; } /* Dropdown */ #ctl-header-plugin .ctl-h3-nav-list .sub-menu a { padding: 13px 15px; font-size: 13px; } /* Zwischen 861 und 980px weiterhin gut lesbar */ @media (min-width: 861px) and (max-width: 980px) { #ctl-header-plugin .ctl-h3-nav-list { gap: 14px; } #ctl-header-plugin .ctl-h3-nav-list > li > a { font-size: 11px; letter-spacing: .04em; } #ctl-header-plugin.ctl-header-last-button .ctl-h3-nav-list > li:last-child > a { min-height: 44px; padding: 0 18px; font-size: 11px; } } /* Mobile Menü */ @media (max-width: 860px) { #ctl-header-plugin .ctl-h3-mobile-list > li > a { min-height: 64px; font-size: 14px; font-weight: 600; letter-spacing: .065em; } #ctl-header-plugin .ctl-h3-mobile-list .sub-menu a { padding: 12px 0; font-size: 13px; } } /* ========================================================= WORDPRESS ADMIN BAR FIX ========================================================= */ /* Header unterhalb der WordPress-Adminleiste halten */ #ctl-header-plugin { z-index: 99990; } /* Desktop Adminbar = 32px */ body.admin-bar #ctl-header-plugin { top: 32px; } /* Mobile / Tablet Adminbar = 46px */ @media screen and (max-width: 782px) { body.admin-bar #ctl-header-plugin { top: 46px; } } /* ========================================================= C THE LIGHT – TEXT WORDMARK identisch zur Startseite ========================================================= */ #ctl-header-plugin .ctl-h3-brand{ width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; overflow:visible !important; } #ctl-header-plugin .ctl-h3-wordmark{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; margin:0 !important; padding:0 !important; width:max-content !important; max-width:100% !important; font-family:Arial,Helvetica,sans-serif !important; font-size:29px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.015em !important; white-space:nowrap !important; text-decoration:none !important; } #ctl-header-plugin .ctl-h3-wordmark span{ display:inline !important; margin:0 !important; padding:0 !important; font:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; } /* EXAKT WIE STARTSEITE */ #ctl-header-plugin .ctl-wm-c{ color:#111111 !important; } #ctl-header-plugin .ctl-wm-t1{ color:#FA0101 !important; } #ctl-header-plugin .ctl-wm-h1{ color:#ef6b21 !important; } #ctl-header-plugin .ctl-wm-e{ color:#efbd30 !important; } #ctl-header-plugin .ctl-wm-l{ color:#53a846 !important; } #ctl-header-plugin .ctl-wm-i{ color:#59bbed !important; } #ctl-header-plugin .ctl-wm-g{ color:#274bbd !important; } #ctl-header-plugin .ctl-wm-h2{ color:#7139ad !important; } #ctl-header-plugin .ctl-wm-t2{ color:#d52b8a !important; } /* Sticky etwas kleiner */ #ctl-header-plugin.is-scrolled .ctl-h3-brand{ width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:26px !important; } /* Tablet / Mobile */ @media(max-width:980px){ #ctl-header-plugin .ctl-h3-brand{ width:auto !important; max-width:none !important; } #ctl-header-plugin .ctl-h3-wordmark{ font-size:25px !important; } } @media(max-width:860px){ #ctl-header-plugin .ctl-h3-brand, #ctl-header-plugin.is-scrolled .ctl-h3-brand{ width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; } #ctl-header-plugin .ctl-h3-wordmark{ font-size:24px !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:22px !important; } } @media(max-width:480px){ #ctl-header-plugin .ctl-h3-wordmark{ font-size:21px !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:20px !important; } } @media(max-width:370px){ #ctl-header-plugin .ctl-h3-wordmark{ font-size:19px !important; } } /* ========================================================= C THE LIGHT – TEXT WORDMARK FINAL exakt gleiche Farben wie Startseite ========================================================= */ #ctl-header-plugin .ctl-h3-brand{ display:flex !important; align-items:center !important; justify-content:flex-start !important; width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; overflow:visible !important; text-decoration:none !important; } #ctl-header-plugin .ctl-h3-wordmark{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; width:max-content !important; max-width:100% !important; margin:0 !important; padding:0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size:29px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.015em !important; text-transform:uppercase !important; white-space:nowrap !important; } #ctl-header-plugin .ctl-h3-wordmark span{ display:inline !important; margin:0 !important; padding:0 !important; font:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important; } /* C */ #ctl-header-plugin .ctl-wm-c{ color:#111111 !important; } /* THE */ #ctl-header-plugin .ctl-wm-t1{ color:#FA0101 !important; } #ctl-header-plugin .ctl-wm-h1{ color:#ef6b21 !important; } #ctl-header-plugin .ctl-wm-e{ color:#efbd30 !important; } /* LIGHT */ #ctl-header-plugin .ctl-wm-l{ color:#53a846 !important; } #ctl-header-plugin .ctl-wm-i{ color:#59bbed !important; } #ctl-header-plugin .ctl-wm-g{ color:#274bbd !important; } #ctl-header-plugin .ctl-wm-h2{ color:#7139ad !important; } #ctl-header-plugin .ctl-wm-t2{ color:#d52b8a !important; } /* STICKY */ #ctl-header-plugin.is-scrolled .ctl-h3-brand{ width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:26px !important; } /* TABLET */ @media(max-width:980px){ #ctl-header-plugin .ctl-h3-brand{ width:auto !important; max-width:none !important; } #ctl-header-plugin .ctl-h3-wordmark{ font-size:25px !important; } } /* MOBILE */ @media(max-width:860px){ #ctl-header-plugin .ctl-h3-brand, #ctl-header-plugin.is-scrolled .ctl-h3-brand{ width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; } #ctl-header-plugin .ctl-h3-wordmark{ font-size:24px !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:22px !important; } } @media(max-width:480px){ #ctl-header-plugin .ctl-h3-wordmark{ font-size:21px !important; } #ctl-header-plugin.is-scrolled .ctl-h3-wordmark{ font-size:20px !important; } } @media(max-width:370px){ #ctl-header-plugin .ctl-h3-wordmark{ font-size:19px !important; } }