/* * LF Website Tools – statische Frontend-Regeln. * Jeder Block hängt an einer Body-Klasse und wird nur wirksam, wenn das Modul * aktiv ist. Konfigurierbare Werte kommen als CSS-Variablen (Inline-:root). */ /* ------------------------------------------------------------------ * Standard: sichere Überschriftenumbrüche * :where() hält die Spezifität bei 0, Divi-/Projekt-CSS gewinnt immer. * break-word bricht nur Wörter, die nicht in die Zeile passen. * hyphenate-limit-chars trennt nur lange Wörter (Browser ohne Unterstützung * trennen normal nach Sprache, setzt WordPress). * ------------------------------------------------------------------ */ :where(body.lf-wt-headings) :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; } /* ------------------------------------------------------------------ * Modul: Back-to-Top (Divis Button .et_pb_scroll_top) * ------------------------------------------------------------------ */ /* Abstand unten nie größer als die Fensterhöhe minus Button: große Werte (erlaubt bis 800 px) würden den Button auf niedrigen Bildschirmen sonst aus dem Bild schieben. dvh = sichtbare Höhe bei ein-/ausfahrender Browserleiste (mobil), vh bleibt Rückfall für ältere Browser. */ body.lf-wt-btt .et_pb_scroll_top.et-pb-icon { background: var(--lf-wt-btt-bg); right: var(--lf-wt-btt-right); bottom: min(var(--lf-wt-btt-bottom), calc(100vh - 60px)); bottom: min(var(--lf-wt-btt-bottom), calc(100dvh - 60px)); border-radius: var(--lf-wt-btt-radius); transition: background-color 0.2s ease-in-out; } body.lf-wt-btt .et_pb_scroll_top.et-pb-icon:hover, body.lf-wt-btt .et_pb_scroll_top.et-pb-icon:focus-visible { background: var(--lf-wt-btt-hover); } /* Einblenden von unten statt von rechts (bisheriger LF-Standard). */ body.lf-wt-btt .et_pb_scroll_top.et-visible { animation-name: fadeInBottom; } @media (max-width: 980px) { body.lf-wt-btt .et_pb_scroll_top.et-pb-icon { bottom: min(var(--lf-wt-btt-bottom-mobile), calc(100vh - 60px)); bottom: min(var(--lf-wt-btt-bottom-mobile), calc(100dvh - 60px)); } } @media (prefers-reduced-motion: reduce) { body.lf-wt-btt .et_pb_scroll_top.et-visible, body.lf-wt-btt .et_pb_scroll_top.et-hidden { animation: none; } } /* ------------------------------------------------------------------ * Modul: Divi-Dropdown-Menü (nur Standardheader #top-menu, ohne Mega-Menü) * * Normalisiert die Geometrie, die Divi 5.11.1 fest verdrahtet * (style-static.min.css): * .nav li ul padding: 20px 0 → erster/letzter Eintrag mit Extra-Abstand * #top-menu li li padding: 0 20px; Einträge inhaltsbreit → ungleich lange Trennlinien/Hoverflächen * #top-menu li li a padding: 6px 20px; width: 200px * … .menu-item-has-children > a:first-child padding-right: 40px * … .menu-item-has-children > a:first-child:after right: 20px; top: 6px (auf Divis 6px abgestimmt) * .nav li li ul top: -23px (20px + 3px Akzentlinie); left: 240px * Schrift, Farben, Akzentlinie und Animation bleiben bei Divi. * * Geometrie-Variablen mit Fallback (für spätere Presets, siehe Dropdown::preset_vars): * --lf-wt-dd-inset-y Innenabstand der Liste oben/unten (Standard 0) * --lf-wt-dd-indicator-space Platz rechts für den Submenü-Pfeil (Standard 24px) * --lf-wt-dd-accent-width Divis Akzentlinie oben (fest 3px bei Divi) * Das Sekundärmenü (#et-secondary-nav) und Menü-Module bleiben unberührt. * ------------------------------------------------------------------ */ body.lf-wt-dropdown #top-menu > li:not(.mega-menu) ul.sub-menu { width: var(--lf-wt-dd-width); padding: var(--lf-wt-dd-inset-y, 0px) 0; border-radius: var(--lf-wt-dd-radius); box-shadow: var(--lf-wt-dd-shadow); } /* Jeder Eintrag füllt die volle Breite: gleiche Hoverfläche und Trennlinien. */ body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li { display: block; float: none; width: 100%; margin: 0; padding: 0; } body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li > a { display: block; position: relative; box-sizing: border-box; width: 100%; padding: var(--lf-wt-dd-pad-y) var(--lf-wt-dd-pad-x); } /* Einträge mit Untermenü: gleiche Höhe, Platz für den Pfeil, Pfeil mittig. */ body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li.menu-item-has-children > a:first-child { padding-right: calc(var(--lf-wt-dd-pad-x) + var(--lf-wt-dd-indicator-space, 24px)); } body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li.menu-item-has-children > a:first-child::after { top: 50%; right: var(--lf-wt-dd-pad-x); transform: translateY(-50%); line-height: 1; } body.lf-wt-dropdown #top-menu > li:not(.mega-menu) ul.sub-menu > li:not(:last-child) { border-bottom: var(--lf-wt-dd-sep-width) solid var(--lf-wt-dd-sep-color); } /* 3. Ebene: schließt direkt an (links = volle Eintragsbreite), erster Eintrag auf Höhe des auslösenden Eintrags. */ body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li > ul.sub-menu { top: calc(-1 * (var(--lf-wt-dd-inset-y, 0px) + var(--lf-wt-dd-accent-width, 3px))); left: 100%; right: auto; } /* Richtungsumkehr (Klassen setzt assets/js/dropdown.js). */ body.lf-wt-dropdown #top-menu > li:not(.mega-menu) li.lf-wt-dd-flip > ul.sub-menu { left: auto; right: 100%; } body.lf-wt-dropdown #top-menu > li.lf-wt-dd-align-right:not(.mega-menu) > ul.sub-menu { left: auto; right: 0; } /* Nur Customizer-Vorschau: Dropdown geöffnet halten (Klasse setzt customizer-preview.js). */ #top-menu li.lf-wt-preview-open > ul.sub-menu { visibility: visible; opacity: 1; }