/* ========================================================= advotec – Kopfzeile: feststehend und immer lesbar ========================================================= Verwendung: CSS-Klasse am Kopfzeilen-Container im Theme Builder bew-header Kopfzeile 55 (ce2ee41) und 1102 (52557fdd) Die Klasse hiess bis zum 24.08.2026 `adv-header`. EasyList — die Standard- Liste von uBlock Origin, AdBlock und AdGuard — enthaelt die kosmetische Regel `##.adv-header`. Die gilt auf jeder Website und blendet jedes Element mit dieser Klasse aus. Fuer Besucher mit Werbeblocker war die Kopfzeile damit komplett weg; im Inkognito-Fenster (Erweiterungen aus) war sie da. Deshalb: keine Klassen mit `ad-`/`adv-`/`werbung`/`banner` im Namen, auch wenn sie hier nur „advotec" abkuerzen sollen. Vorgeschichte (Kundenmeldung 24.08.2026, „Der Header ist nicht feststehend … es kommt zu Überlagerungen der Schriften"): Beide Kopfzeilen hingen mit zwei Eigenschaften an Elementor-Pro-JavaScript: „Sticky" hat den Container auf position:fixed gesetzt, und ein Motion-FX hat den Hintergrund über die ersten 12 % der Seite eingeblendet. Das mu-plugin lädt alle Scripts deferred, und beide Effekte werden von getrennten Handlern aufgebaut. Dazwischen liegt ein Fenster, in dem die Kopfzeile schon oben klebt, aber noch keinen Hintergrund hat — der Seiteninhalt scheint dann durch Logo und Navigation hindurch. Auf einem langsamen Server dauert das mehrere Sekunden. Beides steht jetzt hier im CSS und ist damit ab dem ersten Frame da. Fällt JavaScript ganz aus, bleibt die Kopfzeile deckend — der sichere Zustand. Die Klasse `bew-header-top` am setzt includes/header-scroll-state.php. Die Hintergrundfarbe steht bewusst nicht hier, sondern bleibt in Elementor einstellbar (55: #1F3566, 1102: #FFFFFF). Diese Datei kennt nur den Sonderfall „ganz oben". ========================================================= */ /* Feststehend, ohne JavaScript. Die Regel sitzt am

-Wrapper, nicht am Container darin: sticky ist auf den umgebenden Block begrenzt, und der Wrapper ist genauso hoch wie der Container — ein sticky Container würde also sofort wieder mitscrollen. Der Wrapper selbst hat als Kind von die ganze Seitenhöhe zur Verfügung. Der negative untere Aussenabstand des Containers (-104px, zieht den Hero unter die Kopfzeile) wirkt unverändert weiter, weil das Element im Fluss bleibt. */ body > header.elementor-location-header { position: sticky; top: 0; z-index: 1000; } /* Angemeldete Nutzer: die Admin-Bar liegt fest ueber allem. Ohne Versatz schiebt sich die Kopfzeile beim Scrollen 32px darunter und das Logo wird oben abgeschnitten. Elementors Sticky hatte das selbst gerechnet, CSS-Sticky nicht. Die Werte stammen aus WordPress' eigenem Admin-Bar-Stylesheet: 32px, ab 782px Breite 46px, und unter 600px steht die Bar nicht mehr fest, sondern scrollt mit — dort also kein Versatz. */ body.admin-bar > header.elementor-location-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar > header.elementor-location-header { top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar > header.elementor-location-header { top: 0; } } /* Ganz oben liegt die Kopfzeile über dem Hero und bleibt transparent. */ .elementor-location-header .bew-header { transition: background-color 220ms linear; } /* Die lange Kette ist noetig. Elementor schreibt jede klassische Hintergrundfarbe mit einem eingebauten :not() aus: .elementor-55 .elementor-element.elementor-element-ce2ee41:not(.elementor-motion-effects-element-type-background), … > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #1F3566; } Das sind vier Klassen — auch ohne Motion-FX, der Selektor steht fest in Group_Control_Background. Hier stehen vier Klassen plus `html`, damit die Regel ohne !important gewinnt und die Farbe im Theme Builder aenderbar bleibt. */ html.bew-header-top .elementor-location-header .elementor-element.bew-header { background-color: transparent; } @media (prefers-reduced-motion: reduce) { .elementor-location-header .bew-header { transition: none; } }