/* ========================================================================== MERZ — der Markenlook für native Elementor-Elemente Damit man Seiten mit Elementor-Bordmitteln bauen kann, ohne jedes Mal Farben und Maße von Hand zu setzen. Die Klassen werden ausdrücklich vergeben (`_css_classes` am Widget) — ohne Klasse keine Wirkung. Global geladen, weil die Klassen auf jeder Seite gebraucht werden. ⚠️ Setzt jemand denselben Wert im Editor über ein Control, gewinnt Elementor: dessen Seiten-CSS lädt später und ist gleich spezifisch. Das ist so gewollt — hier steht die Vorgabe, im Editor die Ausnahme. ========================================================================== */ /* -------------------------------------------------------------------------- Buttons Zwei Stufen, beide aus dem bestehenden Theme abgeleitet: · Primär — gefüllt rot, weiße Schrift. Wie `.ehnes-cards__cta`. · Sekundär — Kontur rot, roter Text; beim Überfahren gefüllt. Genau das Muster von `.ehnes-mag__chip` → `.is-active`. Kontraste (WCAG 2.1 AA, Fließtextgrenze 4,5:1): Weiß auf Merz-Rot #B51B26 6,67:1 ✓ Weiß auf Hover-Rot #8E151E 9,22:1 ✓ Merz-Rot auf Weiß 6,67:1 ✓ Kein `text-decoration: underline` beim Hover — Rückmeldung über Farbe. -------------------------------------------------------------------------- */ /* * KEINE Umrandung an Buttons — weder sichtbar noch transparent. * Zwei Stufen, beide gefüllt: Primär rot · Sekundär blau. */ .merz-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap, 6px); padding: 9px 22px; border: 0; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-button, 16px); line-height: 1; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } /* * Die Farbregeln stehen bewusst auf Spezifitaet 0,2,0 — genau eine Klasse * mehr als noetig waere, und keine mehr. * * Darunter liegt die Kit-Regel * .elementor-kit-5 .elementor-button { background-color: var(--e-global-color-primary) } * Die ist ebenfalls 0,2,0, steht aber in `post-5.css` und damit VOR diesem * Stylesheet — bei Gleichstand gewinnt das spaeter geladene, also diese Datei. * * Darueber liegt jede Einstellung aus dem Reiter „Stil". Elementor schreibt * die als * .elementor- .elementor-element.elementor-element- .elementor-button * mit 0,3,0 in die Seiten-CSS und gewinnt damit durch Spezifitaet — auch wenn * diese Datei spaeter laedt. Genau so ist es gedacht: hier die Vorgabe des * Designsystems, im Editor die Ausnahme. * * ⚠️ Deshalb hier NICHT `.elementor-widget-button.merz-btn--…` schreiben. Das * waere 0,3,0 und wuerde jede Farbe aus dem Editor blockieren — am 23.09.2026 * beim Umbau des EHNES-Buttons aufgefallen. */ /* * Die drei Ausprägungen als Variablensatz. Wer sie traegt, entscheidet der * Einsatzort: * * Widget „EHNES Button" — setzt sie ueber Elementors Selektoren (0,3,0). * Deshalb schaltet die Editor-Vorschau sofort um. * natives Button-Widget — setzt sie ueber die Klasse (0,1,0), von Hand * vergeben in „Erweitert → CSS-Klassen". * * Verbraucht werden sie eine Ebene tiefer, mit 0,2,0 — siehe unten. */ .merz-btn--primaer { --merz-btn-flaeche: var(--merz-rot); --merz-btn-schrift: var(--merz-weiss); --merz-btn-kontur: transparent; --merz-btn-flaeche-hover: #911520; --merz-btn-schrift-hover: var(--merz-weiss); } .merz-btn--outline { --merz-btn-flaeche: transparent; --merz-btn-schrift: var(--merz-rot); --merz-btn-kontur: var(--merz-rot); --merz-btn-flaeche-hover: var(--merz-rot); --merz-btn-schrift-hover: var(--merz-weiss); } .merz-btn--invers { --merz-btn-flaeche: var(--merz-weiss); --merz-btn-schrift: var(--merz-rot); --merz-btn-kontur: transparent; --merz-btn-flaeche-hover: var(--merz-hellgrau); --merz-btn-schrift-hover: var(--merz-rot); } /* Der Verbraucher. 0,2,0 — damit eine Farbe aus dem Reiter „Stil" (0,3,0) ihn schlaegt, das Kit (0,2,0, frueher geladen) aber nicht. */ .merz-btn .elementor-button { background-color: var(--merz-btn-flaeche, var(--merz-rot)); color: var(--merz-btn-schrift, var(--merz-weiss)); } /* * Hover, Fokus und Aktiv sehen gleich aus. `:focus` gehoert ausdruecklich * dazu: das Kit setzt `.elementor-kit-5 .elementor-button:focus` (0,3,0) auf * #911520 — nur die Flaeche, nicht die Schrift. Nach einem Mausklick behaelt * der Link den Fokus, und beim Outline stand dann rote Schrift auf Rot * (23.09.2026). Mit 0,3,0 und spaeterer Ladung gewinnt diese Regel. */ .merz-btn .elementor-button:hover, .merz-btn .elementor-button:focus, .merz-btn .elementor-button:active { background-color: var(--merz-btn-flaeche-hover, #911520); color: var(--merz-btn-schrift-hover, var(--merz-weiss)); } /* Die Kontur traegt nur `--outline`. Primaer und Invers bekommen auch keinen unsichtbaren Ring — Buttons haben keine Umrandung, auch keine transparente. */ .merz-btn--outline .elementor-button, .merz-btn--outline .elementor-button:hover, .merz-btn--outline .elementor-button:focus, .merz-btn--outline .elementor-button:active { box-shadow: inset 0 0 0 1px var(--merz-btn-kontur, var(--merz-rot)); } /* * Sekundär — blau gefüllt. * * Nicht das reine Merz-Blau: Weiß darauf ergibt nur 3,82:1 und fällt für * 16-px-Schrift durch. #007CB1 ist dieselbe Farbe minimal abgedunkelt und * erreicht 4,65:1 — derselbe Wert wie im Hero-Panel, aus demselben Grund. */ /* * Es gibt KEINE blaue Schaltflaeche. * * Bis zum 23.09.2026 stand hier `.merz-btn--sekundaer` in #007CB1. Der * Auftraggeber hat das gestrichen: fuer Schaltflaechen sind ausschliesslich * Merz-Rot und Weiss zugelassen. Merz-Blau bleibt Flaechenfarbe (Footer, * Kacheln, Hero-Panel) und wird nicht zur Aktion. * * Die Klasse ist ersatzlos entfernt, damit sie niemand versehentlich wieder * vergibt. Zweite Stufe ist `--outline`. */ /* * Outline — Kontur statt Flaeche. Die Nebenaktion neben der Hauptaktion. * * Der Rand liegt als innerer Schatten an, nicht als `border`: so bleibt das * Rahmen-Control im Reiter Stil frei, und der Knopf wird beim Umschalten der * Auspraegung nicht einen Pixel groesser. * * Kontrast: Merz-Rot auf Weiss 6,67:1, im Hover Weiss auf Merz-Rot 6,67:1. */ /* (Die Kontur von `--outline` kommt aus `--merz-btn-kontur`, siehe oben.) */ /* * Invers — weiss gefuellt, roter Text. Fuer farbige Flaechen, auf denen Rot * nicht traegt (rotes Schlussbanner, blaue Kachel). * * Kontrast: Merz-Rot auf Weiss 6,67:1, im Hover auf Hellgrau 6,10:1. */ /* (Auch `--invers` bezieht seine Farben aus dem Variablensatz oben.) */ /* Sichtbarer Tastatur-Fokus (WCAG 2.4.7). */ .merz-btn .elementor-button:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: 3px; } /* * Pfeil aus dem Altbestand. * * Die frueheren EHNES-Buttons hatten einen eigenen Schalter dafuer. Im * nativen Button ist der Pfeil ein Icon, und das Icon-Set von Elementor ist * Font Awesome — das diese Website bewusst nicht laedt. Damit die acht * bestehenden Schaltflaechen ihren Pfeil behalten, haengt ihn das Widget * weiterhin an, solange die alte Einstellung in den Daten steht. Siehe * Kopfkommentar von `widgets/class-ehnes-button-widget.php`. */ .merz-btn__altpfeil { display: inline-flex; align-items: center; margin-left: 7px; line-height: 0; } /* -------------------------------------------------------------------------- Akkordeon (`nested-accordion`) Nachgebaut nach dem FAQ auf der Startseite (`.ehnes-faq`): weiße Karten mit 5 px Radius und 15 px Abstand, Frage 24/25 px in 600, roter Chevron rechts, Antwort 18/24 px. Die Fläche dahinter ist dort Merz-Hellgrau — die gehört an den Container, nicht ans Widget, damit sie über die volle Breite laufen kann. -------------------------------------------------------------------------- */ /* * Gesteuert wird über Elementors eigene CSS-Variablen, nicht mit * Gegenregeln. Das ist der Weg, den das Widget vorsieht: dieselben * Variablen setzen auch die Editor-Controls, beides beisst sich also nicht. * * Zwei Werte waren dabei der Knackpunkt: * --n-accordion-title-icon-order stand auf -1, der Chevron sass links * --n-accordion-title-font-size stand auf „1,75rem" — mit Komma, also * ein ungültiger Wert */ .merz-akkordeon { --n-accordion-title-icon-order: 1; /* Chevron nach rechts */ --n-accordion-title-justify-content: space-between; --n-accordion-title-font-size: 24px; --n-accordion-title-normal-color: var(--merz-dunkelgrau); --n-accordion-title-hover-color: var(--merz-dunkelgrau); --n-accordion-title-active-color: var(--merz-dunkelgrau); --n-accordion-icon-normal-color: var(--merz-rot); --n-accordion-icon-hover-color: var(--merz-rot); --n-accordion-icon-active-color: var(--merz-rot); --n-accordion-icon-size: 20px; --n-accordion-border-width: 0; --n-accordion-border-radius: var(--radius); --n-accordion-padding: 24px 28px; --n-accordion-item-title-space-between: 15px; /* Abstand zwischen den Karten */ --n-accordion-item-title-distance-from-content: 0px; } /* Zweite Zeile unter der Frage — Bereich, Umfang, Ort bei Stellenangeboten. Steckt als im Titeltext; das Widget lässt Auszeichnung dort zu. */ .merz-akkordeon .merz-akk__meta { display: block; margin-top: 7px; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.4; color: #5C5C5B; } /* Spaltenüberschrift im aufgeklappten Bereich („Ihre Aufgaben"). */ .merz-akkordeon .merz-akk__spalte h4, .merz-akkordeon .merz-akk__spalte h3 { margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--merz-rot); } /* Die Strichliste darunter — enger gesetzt als normaler Fliesstext. */ .merz-akkordeon .merz-akk__spalte p { margin: 0 0 9px; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--merz-dunkelgrau); max-width: none; } /* Was die Variablen nicht abdecken: die getrennten weissen Karten. `--n-accordion-item-title-space-between` wirkt nur auf die Titelzeile, nicht auf den Abstand der Elemente untereinander. */ /* * Dieselben Variablen noch einmal am inneren Element (0,2,0). Im Editor * setzt Elementor seine Vorgaben direkt auf `.e-n-accordion` — geerbte Werte * vom Widget-Rahmen verlieren dagegen: Chevron links, kleine Schrift, * Kasten statt Karten (gemeldet 24.09.2026). Im Frontend ohne Wirkung. */ .merz-akkordeon .e-n-accordion, .merz-akkordeon .e-n-accordion-item, .merz-akkordeon .e-n-accordion-item-title { --n-accordion-title-icon-order: 1; --n-accordion-title-justify-content: space-between; --n-accordion-title-font-size: 24px; --n-accordion-title-normal-color: var(--merz-dunkelgrau); --n-accordion-title-hover-color: var(--merz-dunkelgrau); --n-accordion-title-active-color: var(--merz-dunkelgrau); --n-accordion-icon-normal-color: var(--merz-rot); --n-accordion-icon-hover-color: var(--merz-rot); --n-accordion-icon-active-color: var(--merz-rot); --n-accordion-icon-size: 20px; --n-accordion-border-width: 0; --n-accordion-border-radius: var(--radius); --n-accordion-padding: 24px 28px; --n-accordion-item-title-space-between: 0px; /* Abstand kommt aus gap */ --n-accordion-item-title-distance-from-content: 0px; } .merz-akkordeon .e-n-accordion { display: flex; flex-direction: column; gap: 15px; } .merz-akkordeon .e-n-accordion .e-n-accordion-item-title { justify-content: space-between; padding: 24px 28px; border: 0; } .merz-akkordeon .e-n-accordion .e-n-accordion-item-title-icon { order: 1; } .merz-akkordeon .e-n-accordion .e-n-accordion-item-title-text { font-size: 24px; font-weight: 600; } .merz-akkordeon .e-n-accordion-item { background-color: var(--merz-weiss); border-radius: var(--radius); overflow: hidden; } /* * Schriftgröße bewusst als fester Wert, nicht über die Variable. * * `--n-accordion-title-font-size` enthält auf dieser Installation * **„1,75rem"** — mit Komma statt Punkt, also kein gültiger Längenwert. CSS * verwirft die Deklaration dann beim Berechnen, und `font-size` fiel auf die * geerbten 16 px zurück; der Ersatzwert in `var(…, 24px)` greift nicht, weil * die Variable ja definiert ist, nur eben ungültig. * * ⚠️ Der kaputte Wert steckt in den Elementor-Site-Settings und betrifft * nicht nur das Akkordeon. Dort gehört er korrigiert; hier wird nur die * Auswirkung überdeckt. */ .merz-akkordeon .e-n-accordion-item-title-text { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--merz-dunkelgrau); text-align: left; } /* Antworttext — dieselben Maße wie im Theme-FAQ. */ .merz-akkordeon .e-n-accordion-item > .e-con p { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 24px; color: var(--merz-dunkelgrau); max-width: 600px; margin: 0; } /* Tastatur-Fokus auf der Frage. */ .merz-akkordeon .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--merz-rot); outline-offset: -3px; } @media (max-width: 1024px) { .merz-akkordeon .e-n-accordion-item-title-text { font-size: 20px; line-height: 24px; } .merz-akkordeon .e-n-accordion-item-title { padding: 16px 18px; } } /* -------------------------------------------------------------------------- Kopfbereich — die Header-Vorlage gehört über den Seiteninhalt Der Hero zieht sich mit `overlap_top` (Vorgabe −114 px) absichtlich unter die schwebende Menükarte. Solange der Kopf aus `ehnes_header` bestand, ging die Rechnung auf: dort trägt `.ehnes-header` ein `z-index: 10`. Der neue Kopf aus nativen Elementor-Elementen steht dagegen auf `position: static` — ohne Positionierung greift kein z-index, und der im Dokument später stehende Hero malt sich über das Menü. Auf der Startseite war die weiße Menükarte dadurch vollständig verdeckt. 20 liegt über allem im Seiteninhalt (höchster Wert dort: 11) und unter den Overlays von Lightbox und mobilem Menü (9998–10000) — die sollen den Kopf weiterhin verdecken dürfen. -------------------------------------------------------------------------- */ .elementor-location-header { position: relative; z-index: 20; } /* -------------------------------------------------------------------------- merz-buchstaben — Buchstaben leuchten nacheinander in Merz-Blau auf Klasse an den Raster-Container (Erweitert → CSS-Klassen). Je Kind-Container (Karte) ist das ERSTE Widget der Buchstabe. Karte 1–4 leuchten im Abstand von 2 s auf, danach beginnt es von vorn (8 s je Runde). Wechsel zack (0,25 s hoch, 0,25 s runter), dazwischen 1,5 s stehen — auf Kundenwunsch. Die Farbe kommt aus Keyframes: eine laufende Animation schlägt die Widget-Einstellung (0,3,0) ohne !important. Ruhefarbe ist die globale Primärfarbe — genau das, was die Buchstaben im Editor tragen. Bei „Bewegung reduzieren" bleibt alles rot. -------------------------------------------------------------------------- */ /* Buchstabe (1. Widget) und Titel (2. Widget) wechseln gemeinsam die Farbe, ohne Schein */ @keyframes merz-buchstabe-leuchten { 0%, 25%, 100% { color: var(--e-global-color-primary, #B51B26); } 3%, 22% { color: #008BC5; } } /* Karte hebt sich im selben Takt leicht an — wie die Kacheln im Typenschlüssel */ @keyframes merz-buchstabe-karte { 0%, 25%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 3%, 22% { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, .12); } } .merz-buchstaben > .e-con.e-con { animation: merz-buchstabe-karte 8s ease-in-out infinite; } .merz-buchstaben > .e-con > .elementor-widget:nth-child(-n+2) .elementor-heading-title { animation: merz-buchstabe-leuchten 8s ease-in-out infinite; } .merz-buchstaben > .e-con.e-con:nth-child(2), .merz-buchstaben > .e-con:nth-child(2) > .elementor-widget .elementor-heading-title { animation-delay: 2s; } .merz-buchstaben > .e-con.e-con:nth-child(3), .merz-buchstaben > .e-con:nth-child(3) > .elementor-widget .elementor-heading-title { animation-delay: 4s; } .merz-buchstaben > .e-con.e-con:nth-child(4), .merz-buchstaben > .e-con:nth-child(4) > .elementor-widget .elementor-heading-title { animation-delay: 6s; } @media (prefers-reduced-motion: reduce) { .merz-buchstaben > .e-con.e-con:nth-child(n), .merz-buchstaben > .e-con > .elementor-widget:nth-child(n) .elementor-heading-title { animation: none; } } /* -------------------------------------------------------------------------- merz-linkzeile — ganze Zeile als Link (Suchtreffer, Stellen-Liste …) Container mit HTML-Tag „a" und Klasse `merz-linkzeile`; darin optional ein Heading `merz-linkzeile__titel` und ein Icon `merz-linkzeile__pfeil`. Rückmeldung nur über Farbe, Pfeil und Schatten — keine Unterstreichung. -------------------------------------------------------------------------- */ .merz-linkzeile { text-decoration: none; transition: box-shadow .15s ease; } .merz-linkzeile:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); } .merz-linkzeile:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: 3px; } .merz-linkzeile .merz-linkzeile__titel .elementor-heading-title { transition: color .15s ease; } .merz-linkzeile:hover .merz-linkzeile__titel .elementor-heading-title { color: var(--merz-rot); } .merz-linkzeile .merz-linkzeile__pfeil .elementor-icon { transition: transform .15s ease; } .merz-linkzeile:hover .merz-linkzeile__pfeil .elementor-icon, .merz-linkzeile:focus-visible .merz-linkzeile__pfeil .elementor-icon { transform: translateX(4px); } /* -------------------------------------------------------------------------- merz-suchpanel — Suchfläche unter der Menükarte (Verhalten: merz-suche.js) Sitzt im Header-Container „Menü2" direkt unter der Karte, im selben Rahmen wie die Mega-Menüs (Breite min(1572px, 100% − 68px), weiß, Radius, Schatten). Klappt weich herunter; ohne JavaScript bleibt sie zu (die Lupe springt dann nur zum Anker). -------------------------------------------------------------------------- */ .elementor-location-header .merz-suchpanel { position: absolute !important; top: 100%; left: 50%; width: min(1572px, 100% - 68px) !important; max-width: none; transform: translate(-50%, -10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s; z-index: 5; } .elementor-location-header .merz-suchpanel.is-offen { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, transform .25s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .elementor-location-header .merz-suchpanel { transition: none; } } /* Editor: Fläche nur sichtbar, wenn der Header selbst bearbeitet wird — dann markiert Elementor ihn mit `elementor-edit-area-active`. Beim Bearbeiten einer normalen Seite läuft der Header nur mit und die Suche bleibt zu (gemeldet 24.09.2026). */ body.elementor-editor-active .elementor-location-header.elementor-edit-area-active .merz-suchpanel { position: relative !important; top: auto; left: auto; transform: none; opacity: 1; visibility: visible; pointer-events: auto; width: 100% !important; margin-top: 10px; } /* Lupe im geöffneten Zustand wie im Hover */ [data-merz-suche].is-aktiv .elementor-icon { background-color: #F3F3F3; color: var(--merz-rot) !important; } [data-merz-suche].is-aktiv .elementor-icon svg { fill: var(--merz-rot); } /* Browser-eigenes × im Suchfeld (Chrome/Safari) — wirkt wie ein Fremdkörper */ .merz-suchpanel input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }