/* * Header, Burger-Menü und Kontakt-Bubble – 1:1 aus der style.css des * Child-Themes der König-Immobilien-Seite (Stand 29.10.2026), dort: * Zeilen 14–500 Scroll-Lock, Sticky-Header-Shrink, Header bei offenem * Menü, Logo-Verkleinerung, Light-/Dark-Header-Logo, * Klick-Fix * Zeilen 1402–1550 Sticky Kontakt-Button (Signet-Kreis), Kontakt-Popup * Zeilen 1558–1689 Kontakt-Bubble über dem Footer ausblenden, Burger * bündig, Header-Seitenabstände, Startseiten-Logo beim * Scrollen, Ebenen (Bubble, Popups über dem Header) * Zeilen 1732–1737 Fokusrahmen am Logo * * Gehört zu: inc/menus.php, inc/menu-render.php ([koenig_menu_trigger] + * Overlay im Footer), template-parts/menu-*.php, assets/css/menu.css * (Tailwind-Ausgabe), assets/css/menu-animation.css, assets/js/menu.js, * assets/js/header-scroll.js, assets/js/kontakt-fab.js. * * GEÄNDERT gegenüber dem Original (30.10.2026): Die Regeln für Logo-Container * und Logo hingen an Elementor-Element-IDs der Immobilien-Seite * (.elementor-element-0eade1a / -6094a0e / -b70ea82). Beim Import vergibt * Elementor NEUE IDs – die Regeln griffen nicht, das Logo hing beim Scrollen * unter dem geschrumpften Header (live gemessen: Container blieb bei * "top: 66px"). Jetzt über die CSS-Klassen, die mit den Vorlagen mitwandern: * 0eade1a → Container um .koenig-logo-invert-on-open (heller Header) * 6094a0e → Container um .koenig-logo-shrink (dunkler Header) * b70ea82 → das .koenig-logo-shrink-Widget selbst * Offen: #elementor-popup-modal-16328 (Kontakt-Popup) ist eine Beitrags-ID * der Immobilien-Seite und muss hier auf die neue Popup-ID angepasst werden. */ /** * Scroll-Lock, solange das Menü offen ist. War ursprünglich in * assets/css/menu-animation.css, ist beim Verschlanken dieser Datei * versehentlich komplett rausgeflogen (menu.js togglet zwar weiterhin * die Klasse body.menu-is-open, aber ohne diese Regel hatte das keine * Wirkung mehr) — DAS war die eigentliche Ursache für das "Blitzen": * ohne Scroll-Lock blieb die Hintergrundseite (inkl. Hero-Video) * weiter scrollbar UNTER dem Overlay, sichtbar als Sprung/Flackern. * * "position: fixed" statt nur "overflow: hidden": reines * overflow:hidden auf body friert zwar das Scrollen ein, ändert aber * nichts an der bisherigen scrollY-Position — wenn das Dokument durch * den Wegfall der Scrollbar (oder durch das Ausblenden von Inhalten * unterhalb der aktuellen Scroll-Position) neu umbricht und dadurch * kürzer wird, klemmt der Browser die Scroll-Position auf den neuen, * kleineren Maximalwert — sichtbar als Sprung nach oben beim Öffnen. * menu.js merkt sich deshalb window.scrollY VOR dem Öffnen und setzt * ihn als negativen "top"-Offset auf den jetzt fixierten body; beim * Schließen wird body.style.top entfernt und exakt dorthin * zurückgescrollt (window.scrollTo). "left/right: 0" statt "width: * 100%", damit body trotz "position: fixed" nicht auf seine * Inhaltsbreite zusammenschrumpft, unabhängig von etwaigem * horizontalen Padding. * * scrollbar-gutter reserviert zusätzlich den Scrollbar-Platz immer * (ob sichtbar oder nicht) — sonst würde das Verschwinden der * Scrollbar nochmal eine kleine Breitenänderung auslösen. Dieser * reservierte Rand liegt AUSSERHALB von "body" (auf "html") und bleibt * dadurch auch bei fixiertem body sichtbar — normalerweise unsichtbar, * da html/body-Hintergrund identisch ist, aber bei offenem (dunklem) * Overlay stünde dort sonst ein heller Streifen. Deshalb bekommt * "html" bei offenem Menü dieselbe Overlay-Hintergrundfarbe. * * "overflow-y: scroll" hier ist notwendig, nicht nur Deko: live per * Playwright verifiziert, dass "scrollbar-gutter" OHNE dieses * overflow-y auf "html" wirkungslos bleibt (Spec: scrollbar-gutter * greift nur an einem Element, das selbst einen Scroll-Container * bildet — mit dem Default "overflow-y: visible" ist "html" das * nicht, den Viewport-Scrollbalken zeigt der Browser dann weiterhin * nur aufgrund des VON BODY HOCHGEREICHTEN Overflows an). Ergebnis * ohne "overflow-y: scroll": document.documentElement.clientWidth * sprang beim Öffnen des Menüs (body.menu-is-open → overflow:hidden, * s. u.) von 1425px auf 1440px (kompletter Wegfall der 15px * Scrollbar-Breite) — sichtbar als Breiten-Sprung/"Herumspringen der * Seite" u. a. am auf feste Pixelbreite gesetzten Sticky-Header. Mit * "overflow-y: scroll" bildet "html" selbst durchgehend einen * Scroll-Container (Scrollbalken dauerhaft reserviert, unabhängig vom * Overflow-Zustand von body), wodurch "scrollbar-gutter: stable" hier * erst greifen kann und die Breite in beiden Zuständen exakt gleich * bleibt (verifiziert: 1425px offen wie geschlossen). */ html { overflow-y: scroll; scrollbar-gutter: stable; } body.menu-is-open { position: fixed; left: 0; right: 0; overflow: hidden; } html:has(body.menu-is-open) { background-color: var(--color-overlay-bg); } /** * Sticky-Header-Shrink beim Scrollen. * * "Sticky" selbst wird in Elementor gesetzt (Header-Container → * Advanced → Motion Effects → Sticky: "Top") — hier geht's nur um das * Kleiner-Werden ab einem Scroll-Schwellenwert, gesteuert über * body.header-scrolled (assets/js/header-scroll.js). * * Damit das in JEDEM Header-Template funktioniert (nicht nur einem * bestimmten, mit Elementor-eigenen "elementor-element-xxxxxxx"-IDs, * die sich pro Template unterscheiden), targeted das CSS zwei * generische Klassen, die im Editor manuell gesetzt werden müssen: * * Header-Container → Advanced → CSS-Klassen → "koenig-header-shrink" * Logo-Widget → Advanced → CSS-Klassen → "koenig-logo-shrink" * * Werte (Padding/Skalierung) sind ein sinnvoller Startpunkt ohne * konkrete Figma-Vorgabe — bei Bedarf einfach unten anpassen. * * background-color hier mit rein: harmlos/no-op beim "dark"-Header * (der ist eh schon weiß), aber nötig beim "light"-Header (der ist * transparent/über einem Hero-Video) — sonst bleibt der beim Scrollen * durchsichtig, obwohl Burger/Logo dann schon auf die "auf Weiß"-Optik * umschalten (siehe menu-trigger.php). * * min-height explizit mit überschrieben: Elementor setzt am * Container selbst eine feste Min-Height (live 189px). Mit * box-sizing:border-box zählt Padding zu dieser Höhe dazu, ändert die * SICHTBARE Höhe also nicht, solange die Min-Height nicht mitsinkt — * genau das war der Grund, warum der Header beim Scrollen bisher * gar nicht kleiner wirkte, obwohl das Padding technisch schon * korrekt runterging. * * background-color hier bewusst auf 0.3s gehalten, weil body.menu-is-open * (unten) genau diese Regel für den Farbwechsel beim Öffnen nutzt — * die Dauer muss zur Overlay-Fade-Dauer (duration-300 in * template-parts/menu-overlay.php) passen, sonst wird die * Hintergrundfarbe des Headers erst sichtbar NACH dem fertigen * Overlay-Fade fertig und wirkt "hinterherhinkend". Beide Werte bei * künftigen Anpassungen immer zusammen ändern. * * FRÜHER stand hier ":not(.menu-is-open)" an beiden Shrink-Regeln, um * Header/Logo/Burger beim Öffnen des Menüs zwangsweise auf normale * (nicht geschrumpfte) Größe zurückzusetzen — weil Logo/Wrapper vorher * per Elementor auf einen festen Pixel-Top-Wert positioniert waren, der * nur für die UNGESCHRUMPFTE Höhe passte. Live per Playwright * verifiziert, dass genau DAS ("springt herum") zusätzlich als Bug * empfunden wurde: bei gescrollter Seite wuchs der Header beim Öffnen * jedes Mal sichtbar animiert von ~90px auf ~189px (und beim Schließen * wieder zurück) — ein großer, unnötiger Sprung. * * Einfachere, robustere Lösung: gar nicht mehr erzwingen. Der Header * bleibt beim Öffnen/Schließen einfach in der Höhe, die er ohnehin * schon hat (geschrumpft, wenn vorher gescrollt wurde — sonst normal). * Das setzt voraus, dass Logo/Wrapper (s. u., ".elementor-element-*") * sich per top:50%/translateY(-50%) IMMER relativ zur aktuellen * Header-Höhe zentrieren statt an einem festen Pixel-Wert zu hängen — * dann gibt es unabhängig vom Header-Zustand nichts mehr, das beim * Öffnen/Schließen "passend gemacht" werden müsste, und keine Höhen- * Änderung (und damit keinen Sprung) mehr auszulösen. */ /* * Uebergang fuer Groesse und Farbe. * * ACHTUNG (06.10.2026 live gefunden): Diese Regel griff bisher NIE. * Elementors frontend.min.css setzt ".e-con:where(...)" eine eigene * transition (nur background/border/box-shadow/transform) mit gleicher * Spezifitaet und wird NACH style.css geladen - damit gewann Elementor. * Padding und Min-Height sprangen deshalb ohne Uebergang: der Header * wurde beim Scrollen und beim Schliessen des Menues ruckartig kleiner, * das wirkte wie ein Blitzen. Jetzt mit hoeherer Spezifitaet und * !important, alle Teile mit derselben Dauer und Kurve wie das * Menue-Overlay (0.35s, cubic-bezier(0.4, 0, 0.2, 1)). */ .e-con.koenig-header-shrink, .koenig-header-shrink.koenig-header-shrink { transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } /** * ":not(.menu-is-open)" HINZUGEFÜGT (war früher bewusst weg, s. Kommentar * weiter unten zum "Springt herum"-Bug): Auf Wunsch soll der Header beim * Öffnen des Menüs jetzt IMMER auf Normalgröße zurückspringen, auch wenn * vorher gescrollt wurde — dadurch bleibt der Abstand zwischen Header und * Menü-Inhalt konsistent (menu-overlay.php misst die Header-Höhe live und * bräuchte sonst zwei unterschiedliche Werte für "gescrollt" vs. "oben"). * Der 0.3s-Übergang unten sorgt dafür, dass das weich animiert statt hart * zu springen. */ /* Platzhalter NICHT mitschrumpfen (08.10.2026): Elementor-Sticky legt eine unsichtbare Kopie des Headers (.elementor-sticky__spacer) in den Seitenfluss, und die traegt dieselbe Klasse. Schrumpfte sie mit, rueckte beim Scrollen der ganze Inhalt um ~110px nach oben - Sprungmarken (z. B. Menue -> #wertermittlung) landeten dadurch zu weit unten. Jetzt schrumpft nur der sichtbare, fixierte Header. */ /* Elementor gibt den Innenabstand des Header-Containers (32px oben/unten) per Variable auch an ".e-con-inner" weiter - dadurch blieb der Header gescrollt live bei ~115px, egal welche min-height hier stand. Gescrollt deshalb den inneren Abstand auf 0 (07.10.2026). */ .koenig-header-shrink > .e-con-inner { transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.header-scrolled:not(.menu-is-open) .koenig-header-shrink:not(.elementor-sticky__spacer) > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; } /* 07.10.2026: gescrollt schmaler - wirkte zu maechtig (live ~115px). */ body.header-scrolled:not(.menu-is-open) .koenig-header-shrink:not(.elementor-sticky__spacer) { min-height: 80px !important; padding-top: 10px !important; padding-bottom: 10px !important; background-color: var(--color-surface) !important; } /* Beim geöffneten Menü übernimmt der Header die Overlay-Farbe (statt in Weiß/Transparent stehenzubleiben), damit Logo/Burger — die beim Öffnen auf Weiß wechseln — durchgängig sichtbar bleiben, unabhängig vom Scroll-Zustand davor. Gilt bewusst nach der Scroll-Regel, damit "offen" immer gewinnt, auch wenn zusätzlich gescrollt wurde. */ /* * "Header und Menü wie EINE Fläche": Früher bekam der Header beim Öffnen * selbst die Overlay-Farbe (background-color-Transition). Das Overlay * (#menu-overlay, inset-0) liegt aber ohnehin schon HINTER dem Header * — während des Fades lagen dadurch zwei halbtransparente Graus * übereinander, der Header-Streifen war sichtbar dunkler als das * restliche Menü. Zusätzlich lief background-color (Main-Thread) nicht * synchron zur opacity des Overlays (Compositor). * * Jetzt: * - Header ungescrollt (transparent): bleibt transparent — das Overlay * dahinter färbt die Header-Fläche exakt wie den Rest ein. * - Header gescrollt (weiß, verdeckt Inhalt dahinter): bleibt weiß, * darüber blendet ::after in Overlay-Farbe per OPACITY ein — gleiche * Dauer/Kurve wie das Overlay (duration-300, Tailwind-Default-Easing), * beides auf dem Compositor, dadurch Bild für Bild deckungsgleich. * isolation:isolate macht den Header zum Stacking-Context, damit * ::after (z-index:-1) über dem Header-Hintergrund, aber unter Logo und * Burger liegt. */ .koenig-header-shrink { isolation: isolate; } .koenig-header-shrink::after { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-overlay-bg); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.menu-is-open .koenig-header-shrink { background-color: transparent !important; } /* Menue offen (12.10.2026): Der Header liegt ueber dem Overlay (z-index 10000) und ist mobil deutlich hoeher als Logo + Burger - der leere, durchsichtige Rest lag ueber den obersten Menuepunkten und schluckte Tipps darauf. Header-Flaeche deshalb klick-durchlaessig, nur Links (Logo) und Buttons (Burger) bleiben klickbar. */ body.menu-is-open .koenig-header-shrink { pointer-events: none; } body.menu-is-open .koenig-header-shrink a, body.menu-is-open .koenig-header-shrink button { pointer-events: auto; } body.menu-is-open.header-scrolled .koenig-header-shrink { background-color: var(--color-surface) !important; } body.menu-is-open.header-scrolled .koenig-header-shrink::after { opacity: 1; } /* Menue offen + Seite gescrollt, Handy (12.10.2026, Screenshot Kunde, Figma 528:28029): Gescrollt bekam der Header beim Oeffnen eine DECKENDE Flaeche (weiss + graues ::after, s. o.) ueber seine vollen 192px - das Menue beginnt mobil aber schon direkt unter dem Logo (~147px), die Flaeche verdeckte "Kaufen" und "Aktuelle Immobilien". Im Figma ist das offene Menue EINE graue Flaeche ohne eigenen Header-Streifen. Deshalb mobil bei offenem Menue: Header immer durchsichtig, kein ::after - das Grau kommt allein vom Overlay dahinter, gescrollt wie ungescrollt. Das Weiss des gescrollten Headers blendet ueber die vorhandene background-color-Transition (0.3s) aus, waehrend das Overlay darunter einblendet. Bisherige Fehlversuche, NICHT wiederholen: - clip-path auf dem Header: Logo und Burger verschwanden beim Oeffnen (fixierter Header mit animierten Kindern, v. a. iOS). - Weiss/Grau nur auf Menue-Oberkante gekuerzt: blieb als weisser Balken stehen. */ @media (max-width: 767px) { body.menu-is-open .koenig-header-shrink, body.menu-is-open.header-scrolled .koenig-header-shrink { background-color: transparent !important; } body.menu-is-open .koenig-header-shrink::after, body.menu-is-open.header-scrolled .koenig-header-shrink::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .koenig-header-shrink::after { transition-duration: 0.01ms; } } /* * Logo vollflächig verlinkt: Der Burger sitzt in einem Text-Widget, das * sich über die GANZE Header-Breite zieht (live gemessen 1390x29px) und * damit den mittleren Streifen des Logos überdeckte — dort war das Logo * nicht klickbar. Der Wrapper lässt Klicks jetzt durch, nur der Button * selbst bleibt klickbar. Selektor über #menu-trigger statt über * Elementor-IDs, gilt dadurch in jedem Header-Template. * Link + Bild als block: kein Inline-/Baseline-Spalt, der Link deckt * exakt die Logo-Fläche. */ .koenig-header-shrink .elementor-element:has(#menu-trigger) { pointer-events: none; } #menu-trigger { pointer-events: auto; } .koenig-logo-shrink a, .koenig-logo-invert-on-open a, .koenig-logo-shrink img, .koenig-logo-invert-on-open img { display: block; } /* Logo-Verkleinerung (07.10.2026, ueberarbeitet): skaliert wird das BILD, nicht das Widget. Das Widget hat am Handy 24px Innenabstand links - beim Skalieren des Widgets schrumpfte dieser Abstand mit (live 12px statt 24px). Ab 768px steht das Logo mittig, dort wird um die Mitte skaliert, damit es mittig bleibt; am Handy links-mittig, damit es immer 24px vom Rand steht. */ .koenig-logo-shrink img { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; transform-origin: center center; } body.header-scrolled:not(.menu-is-open) .koenig-logo-shrink img { transform: scale(0.68); } /* Gescrollt (07.10.2026): Desktop 80px, Handy 64px - schmaler als vorher (live ~115px), aber nicht gequetscht. Ungescrollt bleibt es wie im Figma (528:25964: Logo 143x47, Header ~189px). */ @media (max-width: 767px) { .koenig-logo-shrink img { transform-origin: left center; } body.header-scrolled:not(.menu-is-open) .koenig-header-shrink:not(.elementor-sticky__spacer) { min-height: 64px !important; padding-top: 8px !important; padding-bottom: 8px !important; } body.header-scrolled:not(.menu-is-open) .koenig-logo-shrink img { transform: scale(0.65); } } /** * Logo/Text-Element im "light"-Header: standardmäßig UNSICHTBAR (auf * diesem Header soll ja bewusst kein Logo zu sehen sein — außer wenn * das Menü offen ist, dann erscheint es weiß, analog zum Burger). * Kein reines Farbwechsel mehr (das war mein erster, falscher Versuch) * — echtes Ein-/Ausblenden über opacity+visibility, gleiches Timing * wie das Overlay selbst (150ms). * * Klasse "koenig-logo-invert-on-open" ans Logo-Widget hängen * (Advanced → CSS-Klassen). Sobald das Platzhalter-Text-Widget durch * ein echtes Bild-Logo ersetzt wird, bleibt dieselbe Klasse gültig — * betrifft opacity/visibility, keine bild-spezifische Filter-Logik * nötig (die Farbe ist hier ohnehin immer Weiß, kein Invertieren). */ .koenig-logo-invert-on-open { opacity: 0; visibility: hidden; color: var(--color-surface) !important; transition: opacity 0.15s ease, visibility 0s linear 0.15s; } body.menu-is-open .koenig-logo-invert-on-open { opacity: 1; visibility: visible; transition: opacity 0.15s ease, visibility 0s linear 0s; } /** * Wrapper des Light-Header-Logos: dieselbe Elementor-Eigenart wie beim * Dark-Header oben (".elementor-element-6094a0e") — Advanced → Layout * → Position → "Absolute" mit fest eingetragenem "Top: 66px", passend * nur für die ungeschrumpfte Header-Höhe. Seit oben der Header beim * Öffnen des Menüs nicht mehr zwangsweise auf volle Größe springt, * bräuchte dieses Logo (sichtbar nur bei offenem Menü, s. o.) sonst * ebenfalls eine feste Höhe, um nicht aus einem geschrumpften Header * herauszuragen — live verifiziert. Gleiche Lösung: Zentrierung per * top:50%/translateY(-50%) relativ zur jeweiligen Header-Höhe statt * an einem festen Pixel-Wert. * * z-index/pointer-events aus demselben Grund wie beim Dark-Header * unten ("Klick-Fix") — live verifiziert, dass die Bildmitte auch hier * (unabhängig von der Höhen-Positionierung, dieser Wrapper hatte nie * ein eigenes position:fixed) vom vollbreiten Burger-Wrapper-Div * überdeckt wurde, weil beide volle-Breite-Boxen sich überlappen und * ohne z-index die DOM-Reihenfolge entscheidet. */ .koenig-header-shrink .e-con:has(> .koenig-logo-invert-on-open) { top: 50% !important; transform: translateY(-50%) !important; z-index: 1; pointer-events: none; } .koenig-header-shrink .e-con:has(> .koenig-logo-invert-on-open) .koenig-logo-invert-on-open { pointer-events: auto; } /** * Logo im Light-Header auf Mobile (< 768px, Tailwind "md"): rutscht * ohne diese Regel bündig an den linken Bildschirmrand (0px) — Figma * sieht hier denselben 24px-Seitenabstand wie der restliche * Menü-Content auf Mobile vor (vgl. "px-6" in template-parts/menu-overlay.php). * Nur auf Mobile nötig, weil der Wrapper ab "md" durch Elementors * eigene Zentrierung (text-align:center + Breite des Widgets, s. o.) * bereits mittig sitzt statt bündig links. */ @media (max-width: 767px) { /* !important + logische Eigenschaft: Elementor setzt am Container "padding-inline-start: var(--padding-left)" mit hoeherer Spezifitaet - ohne beides griff die Regel nicht, das Logo stand live (06.10.2026) bei 0px direkt am Rand. */ .koenig-header-shrink .elementor-element.e-con:has(> .koenig-logo-invert-on-open) { padding-left: 24px !important; padding-inline-start: 24px !important; } } @media (prefers-reduced-motion: reduce) { .koenig-header-shrink, .koenig-logo-shrink, .koenig-logo-shrink img, .koenig-header-shrink > .e-con-inner, .koenig-logo-invert-on-open { transition-duration: 0.01ms !important; } } /** * Logo im Dark-Header (".koenig-logo-shrink", z. B. auf * /aktuelle-immobilien/): live per DevTools/Playwright verifiziert, dass * das Logo beim Scrollen unten aus dem geschrumpften Header heraushängt * ("springt unter den Header"). * * Ursache liegt NICHT im Theme-CSS, sondern in Elementors eigenem, * generiertem post-.css für das Header-Template: das Logo-Widget * selbst hat dort (Editor: Advanced → Layout → Position → "Fixed", * ohne Top/Left-Wert) "position: fixed; z-index: 10000", sein Eltern- * Container (".elementor-element-6094a0e") "position: absolute; * top: 66px" — beide Werte fest für die UNGESCHRUMPFTE Header-Höhe * (189px) berechnet. Weil das Logo dadurch komplett aus dem Fluss * genommen ist, wandert es beim Schrumpfen (body.header-scrolled, s.o., * min-height 90px) nicht mit dem Header mit — es bleibt auf der alten, * für 189px passenden Position stehen und ragt unten aus dem jetzt * kürzeren Header heraus. * * Fix: Logo-Widget zurück in den normalen Fluss (kein eigenes * position:fixed mehr nötig — der Header-Container ist über * Elementors Sticky-Effekt selbst schon fixiert, und bei offenem Menü * sorgt bereits eine bestehende Elementor-Regel auf dem Header- * Container für z-index:10000 über dem Overlay). Der Wrapper zentriert * sich per top:50%/translateY(-50%) relativ zur JEWEILIGEN Höhe seines * positionierten Vorfahren (des Headers) statt an einem fixen Pixel- * Wert — das gilt automatisch für geschrumpften UND ungeschrumpften * Zustand und bleibt während der 0.3s-Schrumpf-Transition (s. o.) * durchgehend korrekt, weil es bei jedem Layout-Schritt neu berechnet * wird, statt einmalig fix zu sein. */ .koenig-header-shrink .e-con:has(> .koenig-logo-shrink) { top: 50% !important; transform: translateY(-50%) !important; justify-content: center !important; } .koenig-header-shrink .elementor-element.koenig-logo-shrink { position: static !important; } /** * Klick-Fix, NACHDEM das Logo oben aus "position:fixed" (mit eigenem * z-index:10000) in den normalen Fluss zurückgeholt wurde: live * verifiziert, dass die Bildmitte des Logos danach NICHT mehr klickbar * war (elementFromPoint traf stattdessen den Burger-Container). * * Grund: der Logo-Wrapper (oben) UND der Burger-Wrapper (Elementors * eigenes "e-con-full", volle Header-Breite, eigene ID pro Template) * sind beide unsichtbare, volle-Breite-Boxen, die sich über die * gesamte Header-Fläche überlappen — nur ihr jeweiliger Inhalt (Logo * mittig, Burger rechts) ist über justify-content/Ausrichtung * innerhalb davon verschoben. Ohne eigenes z-index:10000 am Logo * gewinnt bei gleichem Stack-Level (beide z-index:auto) die * DOM-Reihenfolge — der Burger-Wrapper kommt danach und liegt deshalb * über dem Logo, auch dort, wo er selbst gar nichts anzeigt. * * Fix: Wrapper bekommt pointer-events:none (Klicks auf seine LEERE * Fläche fallen durch zum darunterliegenden Burger-Wrapper — genau da, * wo vorher schon nichts Eigenes stand), das Logo-Widget selbst wieder * pointer-events:auto (bleibt klickbar) UND ein z-index, das den * Wrapper insgesamt vor den Burger-Wrapper stackt, damit das Logo an * seiner eigenen Position überhaupt als Treffer in Frage kommt. */ .koenig-header-shrink .e-con:has(> .koenig-logo-shrink) { z-index: 1; pointer-events: none; } .koenig-header-shrink .e-con:has(> .koenig-logo-shrink) .koenig-logo-shrink { pointer-events: auto; } /* ================================================================== Sticky Kontakt-Button (Signet-Kreis unten rechts) ================================================================== In Elementor: Symbol-Widget mit dem hochgeladenen SVG (assets/icons/koenig-signet.svg), Link -> Popup-Aktion, und unter Erweitert -> CSS-Klassen die Klasse "koenig-kontakt-fab" eintragen. Die Klasse landet am aeusseren Widget-Element; der eigentliche Kreis ist das ".elementor-icon" darin - das ist bei gesetztem Link das , also die komplette Kreisflaeche klickbar. Warum hier und nicht im Stil-Tab: Bei einem hochgeladenen SVG blendet Elementor die Symbol-Optionen "Ansicht: Gestapelt/ Gerahmt" samt Form, Hintergrund- und Rahmenfeldern aus - die Kreisflaeche ist ueber die Oberflaeche also gar nicht erreichbar. "!important" aus demselben Grund wie bei den Buttons weiter oben: Elementor schreibt fuer dasselbe Element eigene Groessen-/ Abstandsregeln mit vergleichbarer Spezifitaet, und die Ladereihenfolge entscheidet den Gleichstand nicht verlaesslich. Rahmen- und Flaechenfarbe bewusst ueber die Bridge-Variablen (koenig-hellgrau = --color-surface-alt, koenig-weiss = --color-surface), damit Elementors Global Colors die einzige Quelle bleiben - Hex nur als Fallback. ------------------------------------------------------------------ */ .koenig-kontakt-fab .elementor-icon { display: inline-flex !important; align-items: center; justify-content: center; /* Figma: 74,67px - auf 75 gerundet. Feste Breite UND Hoehe, weil der viewBox des Signets 41x40 ist (nicht quadratisch) und ein reines Padding daraus eine leicht ovale Flaeche machen wuerde. */ width: 75px; height: 75px; padding: 0 !important; border: 1px solid var(--color-surface-alt, #EFEFEF); border-radius: 9999px; background-color: var(--color-surface, #FFFFFF); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .koenig-kontakt-fab .elementor-icon svg { width: 41px; height: 40px; } /* Hover, Tastatur-Fokus, gedrueckter Zustand und geoeffnetes Popup teilen sich denselben hellgrauen Hintergrund. "body.kontakt-popup-open" setzt das kleine Skript, das an Elementors Events "elementor/popup/show" und ".../hide" haengt - Elementor selbst gibt dem Trigger-Element keine Zustandsklasse. */ .koenig-kontakt-fab .elementor-icon:hover, .koenig-kontakt-fab .elementor-icon:focus, .koenig-kontakt-fab .elementor-icon:focus-visible, .koenig-kontakt-fab .elementor-icon:active, body.kontakt-popup-open .koenig-kontakt-fab .elementor-icon { background-color: var(--color-surface-alt, #EFEFEF) !important; border-color: var(--color-surface-alt, #EFEFEF) !important; } /* Hello Elementor faerbt bare im Hover global um (a:hover{color:#336}) - das Signet ist ein SVG mit fest gesetzten fill-Werten und damit unberuehrt, die Regel hier haelt nur die Textfarbe stabil, falls spaeter ein Label dazukommt. */ .koenig-kontakt-fab .elementor-icon:hover, .koenig-kontakt-fab .elementor-icon:focus { color: inherit !important; } @media (prefers-reduced-motion: reduce) { .koenig-kontakt-fab .elementor-icon { transition: none; } } /* Nur der Kreis ist klickbar (06.10.2026). Der fixierte Elementor-Container um das Widget ist breiter/hoeher als der Kreis und lag unsichtbar ueber Formularen und Links darunter - die liessen sich an dieser Stelle nicht anklicken. Container und Widget lassen Klicks jetzt durch, nur das (der Kreis) faengt sie ab. */ .e-con:has(> .koenig-kontakt-fab), .koenig-kontakt-fab, .koenig-kontakt-fab .elementor-widget-container, .koenig-kontakt-fab .elementor-icon-wrapper { pointer-events: none; } .koenig-kontakt-fab .elementor-icon-wrapper { line-height: 0; /* kein Zeilen-Ueberstand unter dem Kreis */ } .koenig-kontakt-fab .elementor-icon { pointer-events: auto; box-sizing: border-box; } /* Mobil: Kreis inkl. Rahmen 55 x 55, Signet im selben Verhaeltnis. */ @media (max-width: 767px) { .koenig-kontakt-fab .elementor-icon { width: 55px !important; height: 55px !important; } .koenig-kontakt-fab .elementor-icon svg { width: 30px !important; height: 29px !important; } } /* ================================================================== Kontakt-Popup: Kopfzeile (Headline + Schliessen-Kreuz) ================================================================== Laut Figma (Node 608-29094) stehen Headline und Kreuz auf EINER Hoehe nebeneinander: Headline links, zweizeilig umbrochen, Kreuz rechts daneben auf Hoehe der ersten Zeile. Elementor liefert beides von Haus aus anders: - Das Kreuz ist ein absolut positionierter Button (".dialog-close- button", top/right je 20px) und sitzt dadurch OBERHALB der Headline statt neben ihr. - Es ist mit font-size 15px deutlich kleiner als die 18,3px aus der Vorlage. Weil "eicon-close" ein Icon-Font ist und die Glyphe ihre Box nicht ausfuellt, braucht es fuer die optische Groesse der Vorlage rund 22px font-size, nicht 18px. - Die Headline laeuft ueber die volle Panelbreite (322px) und bricht dadurch an der falschen Stelle um; die Vorlage gibt ihr nur ~238px, damit rechts daneben Platz fuers Kreuz bleibt. Die Popup-ID im Selektor ist die Post-ID des Popups ("Kontakt", #16328) - bewusst eng gefasst, damit andere Popups (und Elementors Lightbox, die dieselben dialog-*-Klassen benutzt) unberuehrt bleiben. Wird das Popup einmal geloescht und neu angelegt, aendert sich die ID und muss hier nachgezogen werden. "!important" beim Kreuz, weil Elementor top/right/font-size dafuer selbst als Inline-nahe Regel mit gleicher Spezifitaet setzt - siehe dieselbe Begruendung bei den Buttons weiter oben. ------------------------------------------------------------------ */ #elementor-popup-modal-16328 .dialog-close-button { top: 46px !important; right: 26px !important; font-size: 22px !important; line-height: 22px !important; } /* Breite der Headline so begrenzt, dass rechts daneben das Kreuz Platz hat. Der calc()-Zweig greift erst, wenn das Panel schmaler wird als ca. 310px (kleine Geraete) - dann schrumpft die Headline mit, statt unters Kreuz zu laufen. */ #elementor-popup-modal-16328 .elementor-widget-heading { max-width: min(240px, calc(100% - 72px)); } /* Kontakt-Bubble über dem Footer weich ausblenden (assets/js/kontakt-fab.js). Ausblenden: leicht nach unten + transparent, danach nicht mehr klickbar (visibility erst NACH dem Ausblenden umschalten). Einblenden umgekehrt. Bei offenem Kontakt-Popup bleibt sie immer sichtbar. */ .e-con:has(> .koenig-kontakt-fab) { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } body.kontakt-fab-versteckt:not(.kontakt-popup-open) .e-con:has(> .koenig-kontakt-fab) { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; } @media (prefers-reduced-motion: reduce) { .e-con:has(> .koenig-kontakt-fab), body.kontakt-fab-versteckt .e-con:has(> .koenig-kontakt-fab) { transform: none !important; transition-duration: 0.01ms !important; } } /* Burger buendig mit dem Seitenrand (06.10.2026). Elementors Kit-Stil fuer