.elementor-421 .elementor-element.elementor-element-4f3627b{--display:flex;--position:fixed;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;--z-index:1000;}body:not(.rtl) .elementor-421 .elementor-element.elementor-element-4f3627b{left:0px;}body.rtl .elementor-421 .elementor-element.elementor-element-4f3627b{right:0px;}.elementor-421 .elementor-element.elementor-element-a57ff5e{--display:flex;--min-height:70px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-8ae11d0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-c7dddaa{margin:05px 0px calc(var(--kit-widget-spacing, 0px) + 05px) 0px;}.elementor-421 .elementor-element.elementor-element-c7dddaa.elementor-element{--align-self:flex-start;}.elementor-421 .elementor-element.elementor-element-c7dddaa .elementor-heading-title{font-family:"museo-slab", Sans-serif;font-weight:normal;}.elementor-421 .elementor-element.elementor-element-2df5f2a{margin:05px 0px calc(var(--kit-widget-spacing, 0px) + 05px) 0px;padding:0px 0px 0px 0px;}.elementor-421 .elementor-element.elementor-element-2df5f2a.elementor-element{--align-self:flex-start;}.elementor-421 .elementor-element.elementor-element-2df5f2a .elementor-heading-title{font-family:"museo-sans-display", Sans-serif;font-weight:bold;}.elementor-421 .elementor-element.elementor-element-30c50f8{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-421 .elementor-element.elementor-element-ba5aa0d .elementor-heading-title{font-size:34px;font-weight:100;letter-spacing:1.3px;}.elementor-421 .elementor-element.elementor-element-7ec9c47{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-421 .elementor-element.elementor-element-7ec9c47.e-con{--align-self:center;--order:99999 /* order end hack */;}.elementor-421 .elementor-element.elementor-element-9253b9b.elementor-element{--align-self:center;--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:1;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-menu-toggle{margin:0 auto;background-color:#02010100;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu .elementor-item{font-family:"museo", Sans-serif;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;padding-left:14px;padding-right:14px;padding-top:0px;padding-bottom:0px;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--main .elementor-item:hover, .elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--main .elementor-item.highlighted, .elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--main .elementor-item:focus{color:#A0A0A0;fill:#A0A0A0;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--dropdown .elementor-item, .elementor-421 .elementor-element.elementor-element-9253b9b .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"museo", Sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.5px;}.elementor-421 .elementor-element.elementor-element-9253b9b div.elementor-menu-toggle{color:#FFFFFF;}.elementor-421 .elementor-element.elementor-element-9253b9b div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-421 .elementor-element.elementor-element-9253b9b{--nav-menu-icon-size:23px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-421 .elementor-element.elementor-element-a57ff5e{--justify-content:center;}.elementor-421 .elementor-element.elementor-element-9253b9b .elementor-menu-toggle{border-radius:0px;}}@media(min-width:768px){.elementor-421 .elementor-element.elementor-element-4f3627b{--width:100%;}.elementor-421 .elementor-element.elementor-element-a57ff5e{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-4f3627b *//* ========================================================= GLOBALER PORTFOLIO-HEADER Aufbau: - Identity 1 links - Identity 2 exakt mittig - Navigation rechts Projektseiten: Projektakzent → neutrale Portfoliofarbe Allgemeine Seiten: neutrale Portfoliofarbe ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b { --tnl-header-offset: clamp(14px, 2vw, 30px); --tnl-header-height: 70px; --tnl-header-padding-inline: 22px; --tnl-header-neutral-rgb: 56 56 56; --tnl-header-neutral-opacity: 0.60; --tnl-header-project-opacity: 0.76; --tnl-header-project-blur: 28px; --tnl-header-neutral-blur: 33px; --tnl-header-border: rgb(255 255 255 / 0.07); --tnl-header-highlight: rgb(255 255 255 / 0.07); --tnl-header-shadow: rgb(0 0 0 / 0.18); position: fixed !important; top: max( var(--tnl-header-offset), env(safe-area-inset-top) ) !important; right: max( var(--tnl-header-offset), env(safe-area-inset-right) ) !important; bottom: auto !important; left: max( var(--tnl-header-offset), env(safe-area-inset-left) ) !important; z-index: 9100; display: block; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent; box-sizing: border-box; pointer-events: none; } /* ========================================================= INNERER HEADER – NEUTRALER GRUNDZUSTAND Dieser Zustand gilt auf allen allgemeinen Seiten. ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens { position: relative; isolation: isolate; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100% !important; max-width: none !important; min-height: var(--tnl-header-height); margin: 0 !important; padding: 0 var(--tnl-header-padding-inline) !important; overflow: visible !important; color: #ffffff; background: rgb( var(--tnl-header-neutral-rgb) / var(--tnl-header-neutral-opacity) ) !important; border: 1px solid var(--tnl-header-border); border-radius: 0; box-shadow: inset 0 1px 0 var(--tnl-header-highlight), 0 24px 70px var(--tnl-header-shadow); -webkit-backdrop-filter: blur(var(--tnl-header-neutral-blur)) saturate(100%); backdrop-filter: blur(var(--tnl-header-neutral-blur)) saturate(100%); box-sizing: border-box; pointer-events: auto; } /* ========================================================= PROJEKTSEITEN – DYNAMISCHER MORPH Die Variable --project-to-portfolio-progress wird bereits durch die Projektmasterseite gesteuert: 0 = Projektmodus 1 = neutraler Portfoliomodus ========================================================= */ body.single-projekt .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens { background: transparent !important; -webkit-backdrop-filter: blur( calc( var(--tnl-header-project-blur) + ( var(--tnl-header-neutral-blur) - var(--tnl-header-project-blur) ) * var( --project-to-portfolio-progress, 0 ) ) ) saturate( calc( 120% - ( 20% * var( --project-to-portfolio-progress, 0 ) ) ) ); backdrop-filter: blur( calc( var(--tnl-header-project-blur) + ( var(--tnl-header-neutral-blur) - var(--tnl-header-project-blur) ) * var( --project-to-portfolio-progress, 0 ) ) ) saturate( calc( 120% - ( 20% * var( --project-to-portfolio-progress, 0 ) ) ) ); } /* ========================================================= PROJEKTAKZENT Wird während des Morphs von 76 % auf 0 ausgeblendet. ========================================================= */ body.single-projekt .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var( --project-accent, rgb(56 56 56) ); opacity: calc( var(--tnl-header-project-opacity) * ( 1 - var( --project-to-portfolio-progress, 0 ) ) ); pointer-events: none; } /* ========================================================= NEUTRALE PORTFOLIOFARBE Wird während des Morphs von 0 auf 60 % eingeblendet. ========================================================= */ body.single-projekt .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgb( var(--tnl-header-neutral-rgb) / var(--tnl-header-neutral-opacity) ); opacity: var( --project-to-portfolio-progress, 0 ); pointer-events: none; } /* Inhalte bleiben über den beiden Farbebenen. */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens > * { position: relative; z-index: 1; } /* Falls Elementor einen zusätzlichen Innenwrapper ausgibt. */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-lens > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; max-width: none; margin: 0; padding: 0; position: relative; z-index: 1; } /* ========================================================= IDENTITY 1 – NAME LINKS ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-identity-primary { justify-self: start; display: flex; align-items: center; justify-content: flex-start; width: 100% !important; min-width: 0; margin: 0; padding: 0; } /* ========================================================= IDENTITY 2 – MARKE MITTIG ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-identity-mark { justify-self: center; display: flex; align-items: center; justify-content: center; width: auto !important; min-width: 0; margin: 0; padding: 0; } /* ========================================================= NAVIGATION – RECHTS ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-menu { justify-self: end; display: flex; align-items: center; justify-content: flex-end; width: 100% !important; min-width: 0; margin: 0; padding: 0; } .elementor-421 .elementor-element.elementor-element-4f3627b .portfolio-nav-menu .elementor-widget-nav-menu { width: auto; max-width: 100%; margin-left: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-421 .elementor-element.elementor-element-4f3627b { --tnl-header-height: 60px; --tnl-header-padding-inline: 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-421 .elementor-element.elementor-element-4f3627b { --tnl-header-offset: 12px; --tnl-header-height: 56px; --tnl-header-padding-inline: 14px; } } /* ========================================================= BOX-SIZING ========================================================= */ .elementor-421 .elementor-element.elementor-element-4f3627b, .elementor-421 .elementor-element.elementor-element-4f3627b * { box-sizing: border-box; }/* End custom CSS */