.elementor-233 .elementor-element.elementor-element-23cd5071{--display:flex;--min-height:80px;--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:8%;--padding-right:8%;--z-index:999;}.elementor-233 .elementor-element.elementor-element-53df94cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-233 .elementor-element.elementor-element-241a83bd{text-align:start;}.elementor-233 .elementor-element.elementor-element-241a83bd img{width:100%;height:34px;object-fit:contain;object-position:center center;}.elementor-233 .elementor-element.elementor-element-56677049{--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-menu-toggle{margin-left:auto;background-color:#1B252F00;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );padding-left:0px;padding-right:0px;padding-top:5px;padding-bottom:5px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item:hover, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-underline .elementor-item:after, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-overline .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-double-line .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-233 .elementor-element.elementor-element-7dd809c0{--e-nav-menu-horizontal-menu-item-margin:calc( 30px / 2 );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:30px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-menu-toggle{color:#BE0D1D;fill:#BE0D1D;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown{background-color:#1B252F;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a:hover, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a:focus, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a.highlighted, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-menu-toggle:hover, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-menu-toggle:focus{color:var( --e-global-color-accent );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a:hover, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a:focus, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a.highlighted{background-color:#1B252F;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a.elementor-item-active{background-color:#F9FAFD;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown .elementor-item, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:0px;word-spacing:0em;}.elementor-233 .elementor-element.elementor-element-7dd809c0 div.elementor-menu-toggle{color:#BE0D1D;}.elementor-233 .elementor-element.elementor-element-7dd809c0 div.elementor-menu-toggle svg{fill:#BE0D1D;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Bahnschrift", Sans-serif;font-size:32px;font-weight:normal;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:2px 2px 2px 2px;padding:5px 20px 5px 20px;}.elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button:hover, .elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button:focus{background-color:#02010100;color:#BE0D1D;}.elementor-233 .elementor-element.elementor-element-5923c866.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button:hover svg, .elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button:focus svg{fill:#BE0D1D;}.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-233 .elementor-element.elementor-element-23cd5071{--min-height:85px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-233 .elementor-element.elementor-element-241a83bd img{height:27px;}.elementor-233 .elementor-element.elementor-element-56677049{--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;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-secondary-font-size );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-underline .elementor-item:after, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-overline .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-double-line .elementor-item:before, .elementor-233 .elementor-element.elementor-element-7dd809c0 .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main .elementor-item{padding-left:0px;padding-right:0px;padding-top:5px;padding-bottom:5px;}.elementor-233 .elementor-element.elementor-element-7dd809c0{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:10px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown .elementor-item, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:14px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button{padding:14px 35px 14px 35px;}}@media(max-width:767px){.elementor-233 .elementor-element.elementor-element-23cd5071{--min-height:65px;}.elementor-233 .elementor-element.elementor-element-53df94cf{--width:20%;}.elementor-233 .elementor-element.elementor-element-241a83bd img{height:20px;}.elementor-233 .elementor-element.elementor-element-56677049{--width:80%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-secondary-font-size );}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--dropdown a{padding-top:14px;padding-bottom:14px;}.elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-233 .elementor-element.elementor-element-7dd809c0 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-233 .elementor-element.elementor-element-7dd809c0{--nav-menu-icon-size:25px;}.elementor-233 .elementor-element.elementor-element-5923c866 .elementor-button{font-size:24px;padding:6px 8px 6px 8px;}}@media(min-width:768px){.elementor-233 .elementor-element.elementor-element-53df94cf{--width:40%;}.elementor-233 .elementor-element.elementor-element-56677049{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-233 .elementor-element.elementor-element-53df94cf{--width:15%;}.elementor-233 .elementor-element.elementor-element-56677049{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-23cd5071 *//* ========================================================================== HaPe Bikes – Header CSS Transparent + weiße Schrift auf der Startseite (über dem Hero-Bild), weiß + dunkle Schrift beim Scrollen UND auf allen Unterseiten. ========================================================================== */ /* ===== Grundzustand: oben transparent ===== */ .mein-header { background-color: transparent !important; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } /* Schriftfarbe oben weiß */ .mein-header, .mein-header a, .mein-header .elementor-nav-menu a, .mein-header .elementor-heading-title { color: #ffffff !important; } /* ===== Zustand: gescrollt (Startseite) ===== */ .mein-header.elementor-sticky--effects { background-color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Schriftfarbe nach Scrollen: Desktop = dunkel */ .mein-header.elementor-sticky--effects, .mein-header.elementor-sticky--effects a, .mein-header.elementor-sticky--effects .elementor-nav-menu a, .mein-header.elementor-sticky--effects .elementor-heading-title { color: #1B252F !important; } /* Schriftfarbe nach Scrollen: Mobil = weiß (Burger-Menü auf dunklem Overlay) */ @media (max-width: 767px) { .mein-header.elementor-sticky--effects, .mein-header.elementor-sticky--effects a, .mein-header.elementor-sticky--effects .elementor-nav-menu a, .mein-header.elementor-sticky--effects .elementor-heading-title { color: #ffffff !important; } } /* ===== Option A: Unterseiten (alles außer Startseite) ===== */ /* Header sofort im "gescrollten" Look – kein Scrollen nötig. Falls .home bei dir nicht greift, body:not(.home) durch body:not(.page-id-XX) ersetzen (ID der Startseite einsetzen). */ body:not(.home) .mein-header { background-color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } body:not(.home) .mein-header, body:not(.home) .mein-header a, body:not(.home) .mein-header .elementor-nav-menu a, body:not(.home) .mein-header .elementor-heading-title { color: #1B252F !important; } /* Auf Unterseiten auch mobil dunkle Schrift (Header ist dort immer weiß) */ @media (max-width: 767px) { body:not(.home) .mein-header, body:not(.home) .mein-header a, body:not(.home) .mein-header .elementor-nav-menu a, body:not(.home) .mein-header .elementor-heading-title { color: #1B252F !important; } } /* ===== Hover & Active – HaPe-Rot (alle Zustände) ===== */ .mein-header .elementor-nav-menu a:hover, .mein-header .elementor-nav-menu a:focus, .mein-header .elementor-nav-menu a.elementor-item-active, .mein-header .elementor-nav-menu li.current-menu-item a, .mein-header.elementor-sticky--effects .elementor-nav-menu a:hover, .mein-header.elementor-sticky--effects .elementor-nav-menu a:focus, .mein-header.elementor-sticky--effects .elementor-nav-menu a.elementor-item-active, .mein-header.elementor-sticky--effects .elementor-nav-menu li.current-menu-item a, body:not(.home) .mein-header .elementor-nav-menu a:hover, body:not(.home) .mein-header .elementor-nav-menu a:focus, body:not(.home) .mein-header .elementor-nav-menu a.elementor-item-active, body:not(.home) .mein-header .elementor-nav-menu li.current-menu-item a { color: #be0d1d !important; } /* ===== Kontakt-Button: immer roter Hintergrund, weißer Text ===== */ .mein-header .elementor-button, .mein-header.elementor-sticky--effects .elementor-button, body:not(.home) .mein-header .elementor-button { background-color: #be0d1d !important; } .mein-header .elementor-button, .mein-header .elementor-button:hover, .mein-header .elementor-button-text, .mein-header .elementor-button span, .mein-header.elementor-sticky--effects .elementor-button, .mein-header.elementor-sticky--effects .elementor-button:hover, .mein-header.elementor-sticky--effects .elementor-button-text, .mein-header.elementor-sticky--effects .elementor-button span, body:not(.home) .mein-header .elementor-button, body:not(.home) .mein-header .elementor-button:hover, body:not(.home) .mein-header .elementor-button-text, body:not(.home) .mein-header .elementor-button span { color: #ffffff !important; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Bahnschrift'; font-style: normal; font-weight: bold; font-display: auto; src: url('https://hape.yannicmarx.de/wp-content/uploads/2026/04/BAHNSCHRIFT.ttf') format('truetype'); } @font-face { font-family: 'Bahnschrift'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://hape.yannicmarx.de/wp-content/uploads/2026/04/BAHNSCHRIFT-1.ttf') format('truetype'); } @font-face { font-family: 'Bahnschrift'; font-style: normal; font-weight: 100; font-display: auto; src: url('https://hape.yannicmarx.de/wp-content/uploads/2026/04/BAHNSCHRIFT-2.ttf') format('truetype'); } @font-face { font-family: 'Bahnschrift'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://hape.yannicmarx.de/wp-content/uploads/2026/04/BAHNSCHRIFT-3.ttf') format('truetype'); } /* End Custom Fonts CSS */