/* ========================================================================== Lucyris – Sprachumschalter, Navigation und mobile Kopfzeile Eingebunden ueber mu-plugins/lucyris-customizations.php. Die roten Ecken-Klammern an Links (Footer-Hover, Fliesstext, aktive Sprache) sind am 2026-08-31 ausgebaut worden; der Code liegt in archiv/l-marker-links.css. ========================================================================== */ :root { /* --- LinkedIn-Logo (Simple Icons, CC0) --- */ --linkedin-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E"); /* --- Sprach-Umschalter --- */ --langswitch-sep-gap: 0.3em; /* Abstand links/rechts vom "|"-Trenner */ /* --- L-Marker an der aktiven Sprache (Ecken-Klammer) --- */ --logo-red: #b11f29; --lmark-len: 0.75em; /* Armlaenge, gleichseitig (width == height) */ --lmark-thick: 3px; /* Strichstaerke der Marker-Arme */ --lmark-gap-x: 0.26em; /* Abstand Arm <-> Buchstabe, horizontal */ --lmark-gap-y: 0.38em; /* Abstand Arm <-> Grundlinie, vertikal. Bewusst groesser als gap-x: unten wird ab der Grundlinie gemessen, links ab der Vorbreite des Buchstabens. */ } a:focus:not(:focus-visible) { outline: none; } /* ========================================================================== 1. Sprach-Umschalter (EN | DE) im Header. Slug-Anzeige (en/de) wird per uppercase zu EN/DE; der Abstand zur Navigation kommt aus dem blockGap der Nav-Zeile (Header-Template). Die aktive Sprache traegt den L-Marker (DE links, EN rechts gespiegelt). ========================================================================== */ .lucyris-langswitch { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .lucyris-langswitch .lang-item { margin: 0; } .lucyris-langswitch .lang-item a { text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--brand-text, #1d3557); } .lucyris-langswitch .lang-item + .lang-item::before { content: "|"; margin: 0 var(--langswitch-sep-gap); color: var(--wp--preset--color--brand-text, #1d3557); } /* aktuelle Sprache DE -> Klammer links */ .lucyris-langswitch .current-lang.lang-item-de > a::before { content: ""; display: inline-block; box-sizing: border-box; width: var(--lmark-len); height: var(--lmark-len); border-left: var(--lmark-thick) solid var(--logo-red); border-bottom: var(--lmark-thick) solid var(--logo-red); margin-left: calc(-1 * var(--lmark-gap-x)); margin-right: calc(var(--lmark-gap-x) - var(--lmark-len)); vertical-align: calc(-1 * var(--lmark-gap-y)); pointer-events: none; } /* aktuelle Sprache EN -> Klammer rechts (gespiegelt) */ .lucyris-langswitch .current-lang.lang-item-en > a::after { content: ""; display: inline-block; box-sizing: border-box; width: var(--lmark-len); height: var(--lmark-len); border-right: var(--lmark-thick) solid var(--logo-red); border-bottom: var(--lmark-thick) solid var(--logo-red); margin-left: calc(var(--lmark-gap-x) - var(--lmark-len)); margin-right: calc(-1 * var(--lmark-gap-x)); vertical-align: calc(-1 * var(--lmark-gap-y)); pointer-events: none; } /* ========================================================================== 2. Navigations-Untermenue (Hover-Popup) nahtlos in Website-Farbe, ohne Rand/Schatten. ========================================================================== */ .wp-block-navigation .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--base-2) !important; border: 0 !important; box-shadow: none !important; } /* ========================================================================== 3. Kopfzeile auf schmalen Bildschirmen Die Kopfzeile ist eine Flex-Zeile mit `flex-wrap: wrap`. Unterhalb von rund 480 px reicht der Platz nicht mehr, die rechte Gruppe rutscht dann unter das Logo. Hier bleibt die Zeile erhalten: links das Logo, rechts der Sprachumschalter mit dem Menuebutton darunter. Die Klassen lucyris-header, __marke und __aktionen sind im Template-Teil „Header" am jeweiligen Gruppen-Block gesetzt. ========================================================================== */ @media (max-width: 781px) { .lucyris-header { flex-wrap: nowrap; gap: 1rem; } /* Ohne min-width kann ein Flex-Element nicht unter seine Inhaltsbreite schrumpfen; das Logo wuerde die Zeile aufsprengen. Der Block ist rechtsbuendig gesetzt, was auf voller Breite passt; in der schmalen Zeile gehoert das Logo an den linken Rand. */ .lucyris-header__marke { flex: 1 1 auto; min-width: 0; justify-content: flex-start; } .lucyris-header__marke .wp-block-site-logo, .lucyris-header__marke .wp-block-site-logo img { max-width: 100%; height: auto; } /* Reihenfolge im Markup ist Navigation, dann Sprachumschalter. column-reverse stellt den Sprachumschalter nach oben. */ .lucyris-header__aktionen { flex: 0 0 auto; flex-direction: column-reverse; align-items: flex-end; justify-content: center; gap: 0.5rem; } } /* ========================================================================== 4. LinkedIn-Logo im Footer Der Eintrag ist ein ganz normaler Menüpunkt – Schriftgröße und Farbe kommen damit aus derselben Quelle wie „Kontakt", „Impressum" usw. Das Logo hängt als Maske hinter dem Wort und nimmt über `currentColor` die Textfarbe an; `1em` bindet die Größe an die Schriftgröße. Icon: Simple Icons (CC0), https://simpleicons.org/ ========================================================================== */ footer a[href*="linkedin.com"]::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.4em; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--linkedin-logo) center / contain no-repeat; mask: var(--linkedin-logo) center / contain no-repeat; } /* ========================================================================== 5. Menue-Overlay frueher einschalten Das Kopfmenue ist seit 2026-09-21 flach und hat sieben Punkte. Die Abstaende stehen als Block-Einstellungen im Vorlagenteil „Header" (Menue 1.5rem, Menue zu Sprachumschalter 2.5rem). Damit stehen die Punkte bis hinunter zu 1200 px Fensterbreite in einer Zeile; ab 1366 px passt die ganze Kopfzeile in eine Zeile, darunter rutscht das Menue unter das Logo. Core schaltet auf das Menue-Overlay (Hamburger) erst bei 600 px um und bietet dafuer keine Block-Einstellung. Die beiden Regeln hier spiegeln die Core-Regeln aus `wp-block-navigation-inline-css` und ziehen den Umschaltpunkt auf 1200 px hoch. ========================================================================== */ @media (max-width: 1199px) { .lucyris-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .lucyris-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* Oberhalb davon steht das Menue in einer Zeile – auch wenn ein Punkt spaeter laenger wird, soll es lieber schmaler werden als umbrechen. */ @media (min-width: 1200px) { .lucyris-header__aktionen .wp-block-navigation__container { flex-wrap: nowrap; } .lucyris-header__aktionen .wp-block-navigation-item__content { white-space: nowrap; } }