/* ========================================================================== Kopfzeile 1:1 aus www.herrmann-cnc.de übernommen - Abschnitt 1: Basis-Regeln, die der Header im Original erbt (auf #header begrenzt) - Abschnitt 2: alle Header-Regeln aus themes/herrmann-cnc/assets/css/main.min.css (unverändert) - Abschnitt 3: Header-Regeln aus themes/herrmann-cnc-child/style.css (unverändert) - Abschnitt 4: Anpassungen für diese Seite ========================================================================== */ /* 1 – geerbte Basis (body, a, img aus Theme + Bootstrap-Reboot) */ /* :where() hält die Spezifität so niedrig wie im Original (dort: body, a, img ohne ID) */ :where(#header),:where(#header) *,:where(#header) :after,:where(#header) :before{box-sizing:border-box} :where(#header){font-family:"Nexa Book";font-weight:400;font-size:18px;line-height:29px} :where(#header) a{outline:none;text-decoration:none;color:inherit;background-color:transparent} :where(#header) a:hover{color:#0056b3;text-decoration:none} :where(#header) img{display:inline;max-width:none;width:100%;vertical-align:middle;border-style:none} :where(#header) ul{margin:0} /* 2 – main.min.css */ #header{display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:999;width:100%;background-color:#fff;padding-right:15px;padding-left:15px} #header.fixed{background-color:#fff;transition:background-color .3s ease} #header.fixed .menu-panel{color:#006AB7} #header.fixed .menu-panel .part--logo .white{display:none} #header.fixed .menu-panel .part--logo .blue{display:block} @media only screen and (max-width: 991px){#header{flex-direction:row;justify-content:space-between;align-items:center}} #header .menu-panel{display:flex;flex-direction:row;align-items:center;justify-content:space-between;color:#006AB7;transition:background-color .3s ease;padding:2.2rem 6.2rem 1.2rem} @media only screen and (max-width: 1600px){#header .menu-panel{padding:2.2rem 2.2rem 1.2rem}} @media only screen and (max-width: 1440px){#header .menu-panel{padding:2.2rem .2rem 1.2rem}} @media only screen and (max-width: 991px){#header .menu-panel{flex-direction:column;padding:2.2rem .2rem 1.2rem}} #header .menu-panel .part{display:flex;justify-content:space-between} @media only screen and (max-width: 991px){#header .menu-panel .part{flex-direction:column;width:100%}} #header .menu-panel .part--logo{display:flex;flex-direction:row} @media only screen and (max-width: 991px){#header .menu-panel .part--logo{display:none}} #header .menu-panel .part--menu{z-index:9999;display:flex;flex-direction:column;flex:1 1 0} @media only screen and (max-width: 991px){#header .menu-panel .part--menu{padding:0 10px;overflow-y:auto;flex-direction:column-reverse}} #header .menu-panel .part--menu .menu-wrapper{display:flex;align-items:flex-start;width:100%;height:100%;padding:0 1.3rem;justify-content:center} @media only screen and (max-width: 1600px){#header .menu-panel .part--menu .menu-wrapper{padding:0 1.3rem}} @media only screen and (max-width: 1440px){#header .menu-panel .part--menu .menu-wrapper{padding:0 .3rem}} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper{flex-direction:column;width:100%}} #header .menu-panel .part--menu .menu-wrapper .menu{display:flex;flex-direction:row;margin:0;text-transform:uppercase;list-style-type:none;padding:0;margin:0} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper .menu{flex-direction:column;width:100%;align-items:center}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item{padding:0px 18px 0;position:relative;margin-top:-5px} @media only screen and (max-width: 1600px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item{padding:0px 15px 0}} @media only screen and (max-width: 1440px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item{padding:0px 12px 0}} @media only screen and (max-width: 1199px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item{padding:0px 5px 0;text-align:center}} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item{padding:7px 0;text-align:center}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item.current-menu-item a{text-shadow:0 .015em #006AB7,0 -.015em #006AB7,.01em 0 #006AB7,-.01em 0 #006AB7} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item:hover > a,#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item:hover:after{color:#006AB7;text-decoration:none;text-shadow:0 .015em #006AB7,0 -.015em #006AB7,.01em 0 #006AB7,-.01em 0 #006AB7} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item.menu-item-has-children.open > a:after{transform:translateY(-50%) rotate(180deg)} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item.menu-item-has-children > a{width:100%;position:relative} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item.menu-item-has-children > a{display:inline;position:relative}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item.menu-item-has-children > a:after{content:"\e90d";font-family:"icomoon"!important;font-size:8px;position:absolute;top:50%;right:-16px;transform:translateY(-50%);transition:transform .3s ease} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item a{font-weight:400;font-size:18px;line-height:18px;transition:color .3s ease,text-shadow .3s ease} @media only screen and (max-width: 1440px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item a{font-size:16px}} @media only screen and (max-width: 1199px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item a{font-size:15px}} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item a{font-weight:600;font-size:22px;line-height:33px}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu{background-color:#fff;display:none;list-style-type:none;padding:0;margin:0;overflow:hidden} @media only screen and (min-width: 992px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu{position:absolute;left:20px;width:200px;z-index:222}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu li{padding:10px 25px;position:relative} @media only screen and (max-width: 991px){#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu li{display:flex;align-items:center;justify-content:center}} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu li a{font-weight:400;font-size:16px;line-height:24px;color:#006AB7;position:relative;display:block;transition:color .3s ease,text-shadow .3s ease} #header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu li:hover a,#header .menu-panel .part--menu .menu-wrapper .menu > .menu-item .sub-menu li.current-menu-item a{color:#006AB7;text-decoration:none;text-shadow:0 .015em #006AB7,0 -.015em #006AB7,.01em 0 #006AB7,-.01em 0 #006AB7} #header .menu-panel .part--cta{display:flex;flex-direction:row;padding-right:1.4125rem;font-size:14px;line-height:24px;margin-top:-7px} @media only screen and (max-width: 1199px){#header .menu-panel .part--cta{padding-right:0;font-size:12px;margin-top:-4px}} @media only screen and (max-width: 991px){#header .menu-panel .part--cta{justify-content:center;height:20%}} #header .menu-panel .part--cta a{text-decoration:none;transition:color .3s ease} @media only screen and (max-width: 991px){#nav-icon{flex:0 0 34px;width:34px;height:34px;background-color:transparent;color:#28323B;display:flex;align-items:center;justify-content:center;position:relative;padding-right:0;margin:1rem 0;position:relative;z-index:222222;cursor:pointer;order:2;display:flex;flex-direction:row}#nav-icon::before,#nav-icon::after{content:"";width:34px;height:2px;background:#28323B;position:absolute;border-radius:10px;border:0;margin:0;transition:all .3s ease-out;display:flex;justify-content:center;align-items:center;border-radius:30px}#nav-icon::before{top:calc(50% - 11px)}#nav-icon::after{bottom:calc(50% - 11px)}#nav-icon span{width:34px;height:2px;position:absolute;top:calc(50% - 1px);display:flex;justify-content:center;align-items:center}#nav-icon span::before,#nav-icon span::after{content:"";height:2px;background:#28323B;position:absolute;top:calc(50% - 1px);display:block;border-radius:10px}#nav-icon span::before{width:20px;left:0;transition:all .3s ease-out}#nav-icon span::after{width:8px;background:#28323B;right:0;transition:all .3s ease-out}#nav-icon.open::before,#nav-icon.open::after{transform:scale(0)}#nav-icon.open span::before{width:100%;transform:rotate(-45deg);background:#28323B}#nav-icon.open span::after{width:100%;background:#28323B;transform:rotate(45deg)}.menu-panel{pointer-events:all;z-index:1000;position:fixed;width:100%;top:66px;height:100vh;left:-120%;max-height:calc(100vh - 66px);transition:left .5s ease;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;background-color:#fff}} @media only screen and (max-width: 991px) and (max-width: 991px){.menu-panel .logos{display:none}} @media only screen and (max-width: 991px){.menu-panel.active{left:0}} .logos{display:flex;align-items:center} @media only screen and (min-width: 992px){.logos--small{display:none}} @media only screen and (max-width: 991px){.logos{width:100%;padding:0 10px}} .logos .logo-link{padding:.6125rem .3125rem} .logos .logo-link.white{display:none} .logos .logo-link.blue{display:block} .logos .logo-link img{max-width:210px} @media only screen and (max-width: 1440px){.logos .logo-link img{max-width:170px}} @media only screen and (max-width: 1199px){.logos .logo-link img{max-width:140px}} /* 2b – Startseiten-Kopfzeile aus main.min.css (transparent, weißes Logo; .fixed ab 40px Scroll) */ .home #header{background-color:#fff;color:#fff} @media only screen and (min-width: 992px){.home #header{background-color:transparent}} .home #header.open{background-color:#fff} .home #header.open .menu-panel{color:#006AB7} .home #header .menu-panel{color:#fff} .home #header .menu-panel .part--logo .white{display:block} .home #header .menu-panel .part--logo .blue{display:none} #header.fixed{background-color:#fff;transition:background-color .3s ease} #header.fixed .menu-panel{color:#006AB7} #header.fixed .menu-panel .part--logo .white{display:none} #header.fixed .menu-panel .part--logo .blue{display:block} /* 3 – herrmann-cnc-child/style.css */ /* Header-Logos nebeneinander erzwingen */ #header .logos .logo-link{ align-items: center; gap: 24px; white-space: nowrap; } /* WICHTIG: Parent setzt img{width:100%} → hier zurückdrehen */ #header .logos .logo-link img{ width: auto !important; height:40px; } /*.logos .logo-link img{ max-width: none !important; }*/ /* Größen */ #header .logos .logo-link img.logo-main{ max-height: 40px; height: 40px; } #header .logos .logo-link img.logo-anniversary{ height: 58px; margin-left: 12px; } @media only screen and (max-width: 991px){ .logos{ padding: 0 !important; } } /* 4 – Anpassungen für diese Seite */ /* sticky statt fixed: gleiche Optik, aber ohne main{margin-top} aus dem Theme */ #header{position:sticky} /* Startseiten-Variante: fixed wie im Original, damit der Hero unter der transparenten Kopfzeile liegt */ .home #header{position:fixed} @media only screen and (min-width: 992px){.home #header{transition:background-color .3s ease}} /*