/*
* Stile für das Markup, das die Shortcodes des Plugins selbst ausgeben.
*
* Warum diese Datei existiert: Elementors globale Klassen erzeugen nur dann CSS, wenn
* ein Elementor-Element sie trägt. Markup, das ein Plugin selbst ausgibt, erreichen sie
* grundsätzlich nicht. Alles hier stammt aus `Shortcodes` und muss deshalb an dieser
* Stelle gestaltet werden.
*
* Die Werte kommen ausschließlich aus den globalen Variablen des Kits. Elementor legt
* sie auf den Kit-Selektor am `body`, sie sind hier also verfügbar. Die Rückfallwerte
* hinter dem Komma greifen nur, wenn das Plugin ohne das Kit läuft — etwa in einer
* Testinstallation.
*/
/*
* Zustand der unteren Aktionsleiste.
*
* Warum das hier steht und nicht als globale Elementor-Klasse: Elementor erzeugt das CSS
* einer globalen Klasse nur für Klassen, die im Dokument stehen. `is-sichtbar` setzt aber
* erst JavaScript beim Scrollen — Elementor erfährt davon nie und schreibt keine Regel.
* Die Klasse war als globale Klasse angelegt und blieb wirkungslos; sie ist dort entfernt.
*
* **Regel daraus: Zustände, die zur Laufzeit gesetzt werden, gehören in diese Datei.**
*
* Der Selektor führt `.elementor` mit, damit er Elementors eigene Klassenregel
* (`.elementor .eumi-c-header__aktionsleiste { display: none }`) sicher übersteuert und
* nicht von der Ladereihenfolge abhängt.
*/
.elementor .eumi-c-header__aktionsleiste.is-sichtbar {
display: flex;
}
/*
* Die untere Aktionsleiste zieht sich von unten herein, statt zu erscheinen.
*
* `[ENTSCHIEDEN 17.08.2026]` Damit ist meine frühere Begründung überholt, und zwar zu
* Recht. Ich hatte auf jede Bewegung verzichtet mit dem Argument, `prefers-reduced-motion`
* lasse sich in einer globalen Elementor-Klasse nicht abfragen — lieber gar kein Übergang
* als einer, den empfindliche Nutzer nicht abschalten können.
*
* Das Argument stimmt für Elementor-Klassen und war für diese Datei nie zutreffend: Hier
* ist die Abfrage möglich, und sie steht am Ende der Datei. Der Verzicht war also eine
* Einschränkung, die es an dieser Stelle gar nicht gab.
*
* Weil die Leiste im Ruhezustand nur verschoben und nicht entfernt ist, muss sie
* ausdrücklich unsichtbar geschaltet werden — sonst bleibt sie für Tastatur und
* Screenreader erreichbar, während sie niemand sieht. Der Sichtbarkeitswechsel wird beim
* Ausblenden bis zum Ende der Bewegung verzögert und beim Einblenden sofort geschaltet.
*/
@media ( max-width: 767px ) {
.elementor .eumi-c-header__aktionsleiste {
display: flex;
visibility: hidden;
transform: translateY( 120% );
transition:
transform 320ms cubic-bezier( .2, 0, .2, 1 ),
visibility 0s linear 320ms;
}
.elementor .eumi-c-header__aktionsleiste.is-sichtbar {
visibility: visible;
transform: none;
transition:
transform 320ms cubic-bezier( .2, 0, .2, 1 ),
visibility 0s linear 0s;
}
}
/*
* Wer Bewegung abgeschaltet hat, bekommt keine. Der Zustandswechsel bleibt vollständig
* erhalten — nur ohne Weg dorthin. Das ist der Unterschied zwischen „keine Animation" und
* „kaputte Oberfläche".
*/
@media ( prefers-reduced-motion: reduce ) {
.elementor .eumi-c-header__aktionsleiste,
.elementor .eumi-c-header__serviceleiste,
header.elementor-location-header {
transition: none;
}
}
/*
* Der Termin-Knopf in der Kopfzeile bleibt auf dem Telefon einzeilig und kompakt.
*
* Auf Wunsch des Projektinhabers (20.08.2026): Zweizeilig gebrochen war er höher als
* das Logo und dominierte die Zeile. `white-space` allein würde ihn nur breiter machen —
* erst die kleinere Schrift mit engerem Innenabstand schafft den Platz für eine Zeile
* neben Logo und Menüschaltfläche.
*/
@media ( max-width: 767px ) {
.elementor .eumi-c-header__aktionen .eumi-c-button {
padding-block: 0.55rem;
padding-inline: 0.75rem;
font-size: var( --eumi-font-size-small, 0.9rem );
white-space: nowrap;
}
/*
* Das Logo ist das einzige Bild in der Kopfzeile. Ohne Deckel stießen Wortmarke
* und Termin-Knopf auf 375 px aneinander (1 px Überlappung, nachgemessen) —
* mit 112 px bleibt Luft für die Zwischenräume der Zeile.
*/
.elementor .eumi-c-header img {
max-width: 112px;
height: auto;
}
}
/*
* Eingeklappte Serviceleiste, sobald die Seite gescrollt ist.
*
* `[GEÄNDERT 17.08.2026]` **Kein Höhenkollaps mehr.** Der frühere Weg über `max-height`
* änderte die Dokumenthöhe — der Inhalt rückte beim Einklappen um die Leistenhöhe nach
* und die Seite machte einen sichtbaren Satz; in Safari und Opera vom Projektinhaber
* gemeldet. Jetzt verschiebt sich der klebende Wrapper per Transform nach oben (Regel
* weiter unten): Die Leiste gleitet aus dem Bild, im Dokument ändert sich keine einzige
* Höhe, und nichts kann springen. Hier bleibt nur noch das Ausblenden, damit die
* hinausgeschobene Leiste nicht oben herauslugt.
*
* Auch das ist ein Laufzeitzustand und gehört aus demselben Grund hierher wie
* `is-sichtbar`: Elementor erzeugt für Klassen, die erst JavaScript setzt, kein CSS.
*/
.elementor .eumi-c-header.is-kompakt .eumi-c-header__serviceleiste {
opacity: 0;
}
/*
* Die Serviceleiste ist eine schmale Informationszeile, keine zweite Kopfzeile.
*
* `[ENTSCHIEDEN 17.08.2026]` Auf Wunsch des Projektinhabers: einfarbig, bündig, deutlich
* schmaler. Sie war 115 px hoch — mehr als die Hauptzeile.
*
* Zwei Ursachen, beide hier behoben:
*
* 1. Die Zeile mit Status, Rufnummer und Anfahrt ist ein **inneres** Element mit
* `eumi-l-cluster`, und das bricht um. Der Umbruchstopp muss deshalb dort greifen und
* nicht an der Leiste selbst. `eumi-l-cluster` ist eine geteilte Layoutklasse und wird
* nicht angefasst — das würde jede andere Verwendung mitverändern.
* 2. Die Rufnummer trug 44 px Mindesthöhe. Dazu unten mehr.
*
* Die untere Trennlinie entfällt: Leiste und Hauptzeile liegen jetzt als eine Fläche
* übereinander, getrennt nur durch die Linie am Fuß der gesamten Kopfzeile.
*
* Der Übergang macht das Einklappen geschmeidig statt sprunghaft. `max-height` ist hier
* das richtige Mittel, weil die Höhe vom Inhalt abhängt; der Wert ist die Obergrenze, nicht
* die tatsächliche Höhe.
*/
.elementor .eumi-c-header__serviceleiste {
border-block-end-width: 0;
transition: opacity 180ms cubic-bezier( .2, 0, .2, 1 );
}
.elementor .eumi-c-header__serviceleiste > * {
flex-wrap: nowrap;
}
/*
* Die Rufnummer bricht nie mitten in der Nummer um. `white-space` gehört nicht zu den
* 73 Eigenschaften des Klassenschemas — deshalb hier, mit Nachfahren-Selektor.
*/
.elementor .eumi-c-header__serviceleiste .eumi-c-header__kontaktlink {
white-space: nowrap;
}
@media ( max-width: 767px ) {
.elementor .eumi-c-header__serviceleiste {
padding-inline: var( --eumi-space-m, 1rem );
}
}
/*
* Ankerziele dürfen nicht hinter der klebenden Kopfzeile landen. Die Höhe meldet das
* Skript, weil sie sich mit der eingeklappten Serviceleiste ändert.
*/
/*
* Das Kleben muss am Theme-Builder-Wrapper sitzen, nicht an der Kopfzeile selbst.
*
* `[BEFUND 17.08.2026]` `position: sticky` haftet nur innerhalb des Elternelements —
* und der Wrapper `header.elementor-location-header` ist exakt so hoch wie die
* Kopfzeile darin. Null Spielraum, das Kleben lief ins Leere; am Gerät scrollte die
* Kopfzeile schlicht mit. Aufgefallen dem Projektinhaber am iPhone, nicht der
* Messung — die hatte nur den berechneten Wert geprüft, nie echtes Scrollen.
*
* Der Wrapper liegt direkt im Seitenkörper und hat dort die volle Laufhöhe.
* Ebene 100 ist `sticky` aus dem Katalog in `docs/design-tokens.md`.
*/
header.elementor-location-header {
position: sticky;
inset-block-start: 0;
z-index: 100;
transition: transform 280ms cubic-bezier( .2, 0, .2, 1 );
will-change: transform;
}
/*
* Das Schrumpfen läuft über Verschieben, nicht über Höhe: Der Wrapper behält im
* Dokument seine volle Höhe und gleitet um die Leistenhöhe nach oben — die Hauptzeile
* steht dann am oberen Rand, die Serviceleiste liegt unsichtbar darüber. Weil sich
* keine Dokumenthöhe ändert, gibt es keinen Reflow und keinen Sprung. Die Leistenhöhe
* misst das Skript und meldet sie als Variable.
*/
header.elementor-location-header.is-kompakt {
transform: translateY( calc( -1 * var( --eumi-leistenhoehe, 0px ) ) );
}
html {
scroll-padding-top: var( --eumi-kopfhoehe, 5rem );
/*
* Beim Gummizug am Seitenanfang und an den Seitenrändern zeigt iOS den Grund des
* Wurzelelements. Weiß wirkt dort wie ein Riss über der Kopfzeile — die Fläche der
* Serviceleiste macht den Überzug unsichtbar.
*/
background: var( --eumi-color-surface, #F1F0EB );
}
/*
* Die Leistungsliste bricht nicht mehr ungleich um: Ab Tablet stehen alle Einträge
* gleich breit in einer Zeile. Auf Mobil stapeln sie wie bisher.
*/
@media ( min-width: 768px ) {
.elementor .eumi-c-leistungsliste {
flex-wrap: nowrap;
}
.elementor .eumi-c-leistungsliste > * {
flex: 1 1 0;
min-width: 0;
}
}
/*
* Verweise innerhalb von Textkomponenten folgen ihrer Komponente, nicht dem Kit.
*
* **Das Problem.** Ein Absatz mit Verweis rendert in Elementor 4 als
* `…`. Die globale Klasse sitzt am `span`, der `` bekommt
* aber die Kit-Regel `.elementor-kit-9 a:hover` direkt ab — und eine direkte Regel schlägt
* jede Vererbung. Auf der dunklen Footer-Fläche wurde der Verweis beim Überfahren dadurch
* dunkelblau auf dunkelblau und war nicht mehr lesbar.
*
* Mit globalen Elementor-Klassen ist das nicht zu beheben: Sie kennen keine
* Nachfahren-Selektoren, können den inneren `` also gar nicht ansprechen.
*
* `color: inherit` gibt die Entscheidung an die Komponente zurück. Die Farben selbst
* bleiben damit im Designsystem; hier steht nur, wer sie bestimmt.
*/
.elementor .eumi-c-footer__link a,
.elementor .eumi-c-footer__link a:hover,
.elementor .eumi-c-footer__link a:focus-visible,
.elementor .eumi-c-header__kontaktlink a,
.elementor .eumi-c-header__kontaktlink a:hover,
.elementor .eumi-c-header__kontaktlink a:focus-visible {
color: inherit;
}
/*
* Aufklappmenü der Kopfzeile auf Mobil.
*
* **Das Problem.** Das Navigations-Widget stammt aus Elementor 3 — ein atomares
* Navigationselement gibt es nicht. Sein Aufklappmenü ist bewusst nicht absolut
* positioniert: Elementor lässt es im Textfluss unter der Menüschaltfläche aufklappen und
* hält es geschlossen über `max-height: 0`.
*
* Das setzt voraus, dass das Widget innen als Spalte läuft. Hier ist es eine Flex-Zeile,
* und dadurch stand das geschlossene Menü **neben** der Schaltfläche. Sichtbar war nur der
* 33 px breite Burger, belegt hat er 107 px — genug, um Logo und Handlungsschaltfläche
* ineinanderzuschieben.
*
* Warum die Regel hier steht und nicht als globale Klasse: Sie muss in das Innere eines
* Elementor-3-Widgets greifen, und globale Klassen kennen keine Nachfahren-Selektoren.
*
* Die Breite entspricht dem Mobil-Haltepunkt des Kits (767 px). Ändert er sich, ist sie
* hier nachzuziehen.
*/
@media ( max-width: 767px ) {
.eumi-c-header__navigation .elementor-widget-nav-menu {
flex-direction: column;
align-items: flex-end;
gap: 0;
}
/*
* Aus dem Fluss nehmen, damit das geschlossene Menü keine Breite mehr beansprucht.
* Der Rahmen `.eumi-c-header__navigation` ist `position: relative`, das Menü hängt
* sich also an ihn und klappt rechtsbündig unter der Schaltfläche auf.
*
* Die Geschwisterfolge bleibt unangetastet — Elementor schließt das Menü über
* `.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container`.
*/
.eumi-c-header__navigation .elementor-nav-menu--dropdown {
position: absolute;
inset-block-start: 100%;
inset-inline-end: 0;
z-index: 100;
min-width: 15rem;
/*
* Der Kasten liegt weiß über weißem Seiteninhalt. Ohne Abhebung bricht der Text
* darunter an einer unsichtbaren Kante ab. `elevated` aus dem Schattenkatalog in
* `docs/design-tokens.md` — die Rolle für überlagernde Flächen.
*/
box-shadow:
0 2px 4px rgba( 17, 24, 39, 0.08 ),
0 18px 40px -16px rgba( 17, 24, 39, 0.28 );
}
/*
* Die Menüschaltfläche maß 33 × 33 px. Das Symbol bleibt bei 22 px, nur die Trefffläche
* wächst auf die 44 px aus PRODUCT.md. Elementor kennt für den Umschaltknopf nur eine
* Symbolgröße; eine größere Fläche bei gleichem Symbol lässt sich dort nicht einstellen.
*/
.eumi-c-header__navigation .elementor-menu-toggle {
min-width: 44px;
min-height: 44px;
}
}
/*
* Trefffläche der Verweise, die in einem Textelement stecken.
*
* Rufnummer und Anfahrtsverweis in der Serviceleiste maßen 24 × 24 px. Das erfüllt WCAG 2.2
* AA (Kriterium 2.5.8) genau an der Untergrenze und verfehlt die 44 px, die PRODUCT.md als
* Blueprint-Standard festlegt — begründet mit älteren Nutzern, Bedienung im Freien und unter
* Anspannung.
*
* Ausgerechnet die Rufnummer trifft das am härtesten: Besuchslage 3 in PRODUCT.md ist die
* Panne, „fast ausschließlich mobil", und dort kostet eine schlecht erreichbare Rufnummer
* den Auftrag vollständig.
*
* Die Mindesthöhe steht bereits an `eumi-c-header__kontaktlink` — nur sitzt die Klasse am
* umschließenden `span`, während der `` darin die eigentliche Trefffläche ist. Dieselbe
* Konstellation wie bei den Farben weiter oben, und aus demselben Grund hier zu lösen:
* globale Klassen kennen keine Nachfahren-Selektoren.
*
* Die Abfrage prüft die **Eingabeart, nicht die Fensterbreite.** Der Grund für die 44 px ist
* der Finger, nicht das kleine Display; ein Tablet am Tresen braucht sie ebenso, ein
* Schreibtisch mit Maus nicht. Auf Zeigegeräten bliebe die Serviceleiste sonst ohne Nutzen
* um 20 px höher.
*/
@media ( pointer: coarse ) {
.elementor .eumi-c-header__hauptzeile > .e-image-link-base {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
/*
* `[ENTSCHIEDEN 17.08.2026]` Die Rufnummer in der Serviceleiste bekommt **keine** 44 px
* mehr, entgegen der Regel von heute früh.
*
* Der Grund ist keine Aufweichung der Vorgabe, sondern ihre Erfüllung an der richtigen
* Stelle: Die untere Aktionsleiste trägt auf Mobil eine Anrufschaltfläche in voller
* Zielgröße. WCAG 2.2 nimmt ein Ziel ausdrücklich aus, wenn dieselbe Handlung an anderer
* Stelle auf derselben Seite in ausreichender Größe erreichbar ist. Genau das ist der Fall.
*
* Zweimal 44 px für dieselbe Rufnummer kosteten oben 20 px Bildhöhe und machten die
* Leiste höher als die Hauptzeile — für eine Handlung, die zwei Fingerbreit tiefer bereits
* in voller Größe bereitsteht.
*
* `[BEDINGUNG]` Diese Ausnahme hält nur, solange die untere Aktionsleiste tatsächlich auf
* jeder Seite erscheint. Wird sie entfernt oder auf einzelne Seiten beschränkt, gehören
* die 44 px hier zurück.
*/
/*
* Aufklappbare FAQ-Einträge.
*
* Das Skript `faq.js` baut je Eintrag einen Knopf in die Überschrift und legt die
* Antwort in einen animierbaren Bereich; geschlossen wird erst nach dem Verdrahten.
* Ohne Skript existiert `is-zu` nie — alle Antworten bleiben sichtbar.
*
* Die Höhe animiert über eine Rasterzeile zwischen `1fr` und `0fr`: inhaltsgenau,
* ohne geschätzten `max-height`-Deckel, der bei langen Antworten abschneidet oder
* bei kurzen die Bewegung verzerrt.
*/
.eumi-c-faq__frage .eumi-c-faq__schalter {
display: flex;
align-items: center;
justify-content: space-between;
gap: var( --eumi-space-m, 1rem );
width: 100%;
min-height: 44px;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: start;
cursor: pointer;
/*
* Knöpfe brechen ihren Text von Haus aus nicht um. Die längste Frage machte die
* Seite dadurch 594 px breit — als Seitwärts-Scrollen der ganzen Startseite auf
* dem iPhone gefunden (Projektinhaber, 20.08.2026). Dieselbe Lehre wie bei
* Hover und Fokus: geerbte Knopf-Eigenschaften vollständig überschreiben.
*/
white-space: normal;
}
/*
* Hover und Fokus vollständig deklarieren — dieselbe Lehre wie beim
* Bewertungskarussell: Wo eine Eigenschaft fehlt, greift die button:hover-Regel
* des Themes, und die ist magenta.
*/
.eumi-c-faq__frage .eumi-c-faq__schalter:hover,
.eumi-c-faq__frage .eumi-c-faq__schalter:focus {
background: none;
color: var( --eumi-color-primary, #164e8c );
}
.eumi-c-faq__frage .eumi-c-faq__schalter:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #1A66C4 );
outline-offset: 2px;
}
/*
* Der Pfeil ist gezeichnet, kein Schriftzeichen: zwei Kanten eines Quadrats, gedreht.
* Geschlossen zeigt er nach unten (da geht es hin), offen nach oben.
*/
.eumi-c-faq__schalter::after {
content: '';
flex: none;
width: 9px;
height: 9px;
margin-block-start: -4px;
border-inline-end: var( --eumi-border-strong, 2px ) solid var( --eumi-color-primary, #164E8C );
border-block-end: var( --eumi-border-strong, 2px ) solid var( --eumi-color-primary, #164E8C );
transform: rotate( -135deg );
transition: transform 200ms cubic-bezier( .2, 0, .2, 1 );
}
.eumi-c-faq__eintrag.is-zu .eumi-c-faq__schalter::after {
margin-block-start: 4px;
transform: rotate( 45deg );
}
.eumi-c-faq__antwort {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 280ms cubic-bezier( .2, 0, .2, 1 );
}
.eumi-c-faq__antwort-inhalt {
overflow: hidden;
min-height: 0;
}
.eumi-c-faq__eintrag.is-zu .eumi-c-faq__antwort {
grid-template-rows: 0fr;
}
@media ( prefers-reduced-motion: reduce ) {
.eumi-c-faq__antwort,
.eumi-c-faq__schalter::after {
transition: none;
}
}
/*
* Leistungsliste aus `[eumi_leistungen]`.
*
* Bis zum 19.08.2026 ungestylt: Der Kurzbefehl lief nur im Footer mit, wo der Kontext
* die Stile stellte. Als eigener Abschnitt rendert er als Berichtspositionen — Zeilen
* mit Haarlinie, wie die Merkmale. Das ist die Form der Linie Prüfplakette.
*/
.eumi-c-leistungen {
display: grid;
grid-template-columns: 1fr;
column-gap: var( --eumi-space-2xl, 3rem );
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-family: var( --eumi-font-body, Inter ), system-ui, sans-serif;
}
@media ( min-width: 48rem ) {
.eumi-c-leistungen {
grid-template-columns: 1fr 1fr;
}
}
.eumi-c-leistungen__eintrag {
display: flex;
align-items: center;
gap: var( --eumi-space-s, 0.75rem );
min-height: 44px;
padding-block: var( --eumi-space-xs, 0.5rem );
border-block-end: var( --eumi-border-default, 1px ) solid var( --eumi-color-border, #d9d8d0 );
color: var( --eumi-color-text, #1d1c18 );
}
.elementor .eumi-c-leistungen__link,
.eumi-c-leistungen__link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var( --eumi-color-primary, #164e8c );
text-decoration: none;
}
.elementor .eumi-c-leistungen__link:hover,
.eumi-c-leistungen__link:hover {
text-decoration: underline;
}
.elementor .eumi-c-leistungen__link:focus-visible,
.eumi-c-leistungen__link:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
/*
* Das Symbol vor einer Leistung, nur mit `symbole="ja"` am Kurzbefehl. Es ist reine
* Verzierung (`aria-hidden` im Markup) und erbt die Primärfarbe — im Footer bleibt die
* Liste ohne Symbole, dort wäre die Spalte zu unruhig.
*/
.eumi-c-leistungen__symbol {
display: inline-flex;
flex: none;
width: 22px;
height: 22px;
color: var( --eumi-color-primary, #164e8c );
}
.eumi-c-leistungen__symbol svg {
width: 100%;
height: 100%;
}
/* Abteilungsliste aus `[eumi_abteilungen]`. */
.eumi-c-abteilungen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var( --eumi-space-m, 1rem );
margin: 0;
padding: 0;
list-style: none;
}
.eumi-c-abteilungen__eintrag {
display: inline-flex;
align-items: center;
gap: var( --eumi-space-2xs, 0.25rem );
}
.eumi-c-abteilungen__name {
color: var( --eumi-color-text-muted, #4b5563 );
}
/*
* Der Ansprechpartner steht zwischen Abteilung und Rufnummer und liest sich damit als
* „Serviceannahme, Herr Krüger, 07161 …". Nebentextfarbe, weil er die Nummer begleitet
* und nicht mit ihr um die Handlung konkurriert.
*/
.eumi-c-abteilungen__person {
color: var( --eumi-color-text-muted, #4b5563 );
}
/*
* Der Status je Abteilung steht bewusst hinter der Nummer und in Nebentextfarbe: Er
* beantwortet eine Anschlussfrage, die Nummer ist die Handlung.
*/
.eumi-c-abteilungen__status {
font-size: var( --eumi-font-size-small, 0.875rem );
color: var( --eumi-color-text-muted, #4b5563 );
}
/*
* Mindestzielgröße nach dem Blueprint-Standard. Die Leiste wird dadurch etwa 44px hoch;
* das ist beabsichtigt, denn die Rufnummer ist auf dem Telefon der meistgenutzte Weg.
*/
.elementor .eumi-c-abteilungen__telefon,
.eumi-c-abteilungen__telefon {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 600;
color: inherit;
text-decoration: none;
}
/*
* Die Selektoren führen `.elementor` mit, weil sonst die Kit-Regel für Verweise
* (`.elementor-kit-9 a:hover`) gewinnt und die Rufnummer beim Überfahren die Farbe des
* Kits statt die der Komponente annimmt.
*/
.elementor .eumi-c-abteilungen__telefon:hover,
.eumi-c-abteilungen__telefon:hover {
color: var( --eumi-color-primary, #1d4ed8 );
}
.elementor .eumi-c-abteilungen__telefon:focus-visible,
.eumi-c-abteilungen__telefon:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #2563eb );
outline-offset: 2px;
}
/* Öffnungszeiten-Liste aus `[eumi_oeffnungszeiten]`. */
.eumi-c-oeffnungszeiten {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var( --eumi-space-m, 1rem );
row-gap: var( --eumi-space-2xs, 0.25rem );
margin: 0;
}
/*
* Die Zeile ist ein `div` zwischen `dl` und `dt`/`dd`. Das ist gültiges HTML und hält
* Tag und Zeit als Paar zusammen; `display: contents` gibt die beiden trotzdem an das
* Raster der Liste weiter, sodass alle Zeiten in einer Spalte fluchten.
*/
.eumi-c-oeffnungszeiten__zeile {
display: contents;
}
.eumi-c-oeffnungszeiten dt {
font-weight: 500;
}
.eumi-c-oeffnungszeiten dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
/*
* Onboarding-Bogen aus `[eumi_onboarding]`.
*
* Bewusst schmal gehalten: Der Bogen wird oft auf dem Telefon ausgefüllt, zwischen zwei
* Aufträgen. Eine Spalte, große Zielflächen, keine Nebenläufigkeit.
*/
.eumi-c-bogen__seitentitel {
max-width: 42rem;
margin: 0 auto var( --eumi-space-l, 1.5rem );
font-size: var( --eumi-font-size-h2, 2rem );
line-height: 1.2;
}
.eumi-c-bogen {
max-width: 42rem;
margin-inline: auto;
}
.eumi-c-bogen__block {
margin-block-end: var( --eumi-space-2xl, 3rem );
padding: 0;
border: 0;
border-block-start: 1px solid var( --eumi-color-border, #d9d8d0 );
padding-block-start: var( --eumi-space-l, 1.5rem );
}
/*
* `float` auf einer `legend` sieht nach Altlast aus, ist hier aber der Zweck: Eine
* Legende sitzt normalerweise **in** der oberen Rahmenlinie des `fieldset`, und die
* Linie lief dadurch auf halber Höhe neben der Überschrift weiter — sie las sich wie ein
* Durchstreichen. Mit `float` verlässt die Legende die Rahmenlücke, die Trennlinie
* zeichnet durch, und die Überschrift steht sauber darunter.
*/
.eumi-c-bogen__titel {
float: left;
width: 100%;
padding: 0;
font-size: var( --eumi-font-size-h3, 1.5rem );
font-weight: 600;
line-height: 1.2;
}
.eumi-c-bogen__einleitung {
clear: both;
margin-block: var( --eumi-space-xs, 0.5rem ) var( --eumi-space-l, 1.5rem );
color: var( --eumi-color-text-muted, #4b5563 );
}
.eumi-c-bogen__feld {
margin-block-end: var( --eumi-space-l, 1.5rem );
}
.eumi-c-bogen__gruppe {
margin: 0;
padding: 0;
border: 0;
}
.eumi-c-bogen__label {
display: block;
margin-block-end: var( --eumi-space-2xs, 0.25rem );
padding: 0;
font-weight: 600;
}
/*
* „wird gebraucht" statt eines Sternchens. Ein Sternchen muss erklärt werden, dieser
* Text nicht — und er sagt zugleich, wofür: für den Aufbau, nicht fürs Absenden.
*/
.eumi-c-bogen__pflicht {
margin-inline-start: var( --eumi-space-2xs, 0.25rem );
font-size: var( --eumi-font-size-small, 0.875rem );
font-weight: 400;
color: var( --eumi-color-accent, #a33b29 );
}
.eumi-c-bogen__hilfe {
margin-block: 0 var( --eumi-space-xs, 0.5rem );
font-size: var( --eumi-font-size-small, 0.875rem );
color: var( --eumi-color-text-muted, #4b5563 );
}
.eumi-c-bogen input[type="text"],
.eumi-c-bogen input[type="email"],
.eumi-c-bogen input[type="url"],
.eumi-c-bogen input[type="tel"],
.eumi-c-bogen input[type="number"],
.eumi-c-bogen textarea {
width: 100%;
min-height: 44px;
padding: var( --eumi-space-xs, 0.5rem ) var( --eumi-space-s, 0.75rem );
border: 1px solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-control, 4px );
background: var( --eumi-color-background, #fafaf8 );
color: var( --eumi-color-text, #1d1c18 );
font: inherit;
}
.eumi-c-bogen textarea {
min-height: 6rem;
resize: vertical;
}
.eumi-c-bogen input:focus-visible,
.eumi-c-bogen textarea:focus-visible {
outline: 2px solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
.eumi-c-bogen__optionen {
display: flex;
flex-direction: column;
gap: var( --eumi-space-2xs, 0.25rem );
}
/* Die ganze Zeile ist die Zielfläche, nicht nur das Kästchen. */
.eumi-c-bogen__option {
display: flex;
gap: var( --eumi-space-xs, 0.5rem );
align-items: baseline;
min-height: 44px;
padding: var( --eumi-space-xs, 0.5rem );
border: 1px solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-control, 4px );
cursor: pointer;
}
.eumi-c-bogen__option:hover {
border-color: var( --eumi-color-primary, #164e8c );
}
.eumi-c-bogen__option:focus-within {
outline: 2px solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
.eumi-c-bogen__abteilung {
margin-block-end: var( --eumi-space-m, 1rem );
padding: var( --eumi-space-m, 1rem );
border: 1px solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-card, 6px );
}
/*
* Beschriftung und Feld nebeneinander, sobald Platz ist — sieben Wochentage
* untereinander mit je zwei Zeilen wären eine sehr lange Strecke.
*/
.eumi-c-bogen__zeile {
display: grid;
gap: var( --eumi-space-2xs, 0.25rem );
margin-block: 0 var( --eumi-space-xs, 0.5rem );
}
@media ( min-width: 30rem ) {
.eumi-c-bogen__zeile {
grid-template-columns: 10rem 1fr;
gap: var( --eumi-space-s, 0.75rem );
align-items: center;
}
}
/*
* Haarlinie ringsum statt einer dicken Leiste an der Seite. Die Linie Prüfplakette
* arbeitet durchgehend mit Haarlinien und Berichtspositionen — eine 4-px-Leiste war der
* Fremdkörper darin. Den Zustand trägt jetzt die Rahmenfarbe zusammen mit der ersten
* Zeile, und damit auch dort, wo Farbe allein nicht ankommt.
*/
.eumi-c-bogen__meldung {
margin-block-end: var( --eumi-space-l, 1.5rem );
padding: var( --eumi-space-m, 1rem );
border: 1px solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-card, 6px );
background: var( --eumi-color-surface, #f1f0eb );
}
.eumi-c-bogen__meldung.is-erfolg {
border-color: var( --eumi-color-success, #14683a );
color: var( --eumi-color-success, #14683a );
font-weight: 600;
}
.eumi-c-bogen__meldung.is-offen {
border-color: var( --eumi-color-warning, #8f5308 );
}
/* Nur die Anrede trägt die Warnfarbe; die Liste darunter bleibt gewöhnlicher Text. */
.eumi-c-bogen__meldung.is-offen strong {
color: var( --eumi-color-warning, #8f5308 );
}
.eumi-c-bogen__meldung ul,
.eumi-c-bogen__fotoliste ul {
margin-block: var( --eumi-space-xs, 0.5rem ) 0;
padding-inline-start: var( --eumi-space-l, 1.5rem );
}
.eumi-c-bogen__fotoliste {
margin-block-end: var( --eumi-space-l, 1.5rem );
padding: var( --eumi-space-m, 1rem );
border-radius: var( --eumi-radius-card, 6px );
background: var( --eumi-color-surface, #f1f0eb );
}
.eumi-c-bogen__abschluss {
margin-block-start: var( --eumi-space-xl, 2rem );
}
.eumi-c-bogen__hinweis {
font-size: var( --eumi-font-size-small, 0.875rem );
color: var( --eumi-color-text-muted, #4b5563 );
}
/* Google-Bewertungen aus `[eumi_google_bewertungen]`. */
.eumi-c-gbewertungen {
display: flex;
flex-direction: column;
gap: var( --eumi-space-l, 1.5rem );
width: 100%;
font-family: var( --eumi-font-body, Inter ), system-ui, sans-serif;
}
.eumi-c-gbewertungen__kopf {
margin: 0;
font-weight: 600;
color: var( --eumi-color-text, #1d1c18 );
}
/*
* Karussell ohne Fremdbibliothek: Das Gleiten übernimmt natives Scroll-Snapping,
* das Skript ergänzt Pfeile und Punkte. Ohne JavaScript bleibt die Liste seitlich
* wischbar — verloren gehen nur die Knöpfe, nicht der Inhalt.
*/
.eumi-c-gbewertungen__kopfzeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: var( --eumi-space-m, 1rem );
}
.eumi-c-gbewertungen__liste {
display: flex;
gap: var( --eumi-space-l, 1.5rem );
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Luft für den Fokusring der Karten. */
padding: 4px;
margin: -4px;
}
.eumi-c-gbewertungen__liste::-webkit-scrollbar {
display: none;
}
.eumi-c-gbewertungen__liste:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
.eumi-c-gbewertungen__pfeile {
display: flex;
gap: var( --eumi-space-xs, 0.5rem );
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__pfeil {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: var( --eumi-border-default, 1px ) solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-pill, 999px );
background: var( --eumi-color-background, #fafaf8 );
color: var( --eumi-color-primary, #164e8c );
font-size: 1.25rem;
cursor: pointer;
}
/*
* Hover und Fokus vollständig deklarieren: Wo eine Eigenschaft fehlt, greift die
* button:hover-Regel des Themes — so kam Magenta auf die Pfeile.
*/
.eumi-c-gbewertungen .eumi-c-gbewertungen__pfeil:hover,
.eumi-c-gbewertungen .eumi-c-gbewertungen__pfeil:focus {
border-color: var( --eumi-color-primary, #164e8c );
background: var( --eumi-color-primary, #164e8c );
color: var( --eumi-color-on-primary, #ffffff );
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__pfeil:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
.eumi-c-gbewertungen__punkte {
display: flex;
gap: var( --eumi-space-m, 1rem );
justify-content: center;
}
.eumi-c-gbewertungen__punkte:empty {
display: none;
}
/*
* Sichtbar 12 px, treffbar 24 — die unsichtbare Ausdehnung hebt den Punkt auf die
* WCAG-Untergrenze für Zielgrößen. Der Abstand hält die Trefferflächen getrennt.
* Die 44er-Hausregel erfüllen hier die Pfeile daneben, die dieselben Ziele erreichen.
*/
.eumi-c-gbewertungen .eumi-c-gbewertungen__punkt {
position: relative;
box-sizing: border-box;
width: 12px;
height: 12px;
min-width: 0;
padding: 0;
border: var( --eumi-border-default, 1px ) solid var( --eumi-color-primary, #164e8c );
border-radius: var( --eumi-radius-pill, 999px );
background: transparent;
cursor: pointer;
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__punkt::after {
content: '';
position: absolute;
inset: -7px;
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__punkt:hover,
.eumi-c-gbewertungen .eumi-c-gbewertungen__punkt:focus {
border-color: var( --eumi-color-primary, #164e8c );
background: var( --eumi-color-primary, #164e8c );
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__punkt.is-aktiv {
background: var( --eumi-color-primary, #164e8c );
}
/* Eingeklappter Bewertungstext; das Skript hängt den Weiterlesen-Schalter an. */
.eumi-c-gbewertungen__text.is-geklappt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__mehrtext {
align-self: start;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var( --eumi-color-primary, #164e8c );
font: inherit;
font-size: var( --eumi-font-size-small, 0.875rem );
font-weight: 600;
cursor: pointer;
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__mehrtext:hover,
.eumi-c-gbewertungen .eumi-c-gbewertungen__mehrtext:focus {
background: none;
color: var( --eumi-color-primary-hover, #103a69 );
text-decoration: underline;
}
.eumi-c-gbewertungen .eumi-c-gbewertungen__mehrtext:focus-visible {
outline: var( --eumi-border-strong, 2px ) solid var( --eumi-color-focus, #1a66c4 );
outline-offset: 2px;
}
@media ( prefers-reduced-motion: reduce ) {
.eumi-c-gbewertungen__liste {
scroll-behavior: auto;
}
}
/* Karte wie ueberall: Haarlinie statt Schatten. */
.eumi-c-gbewertungen__zitat {
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: min( 21rem, 85% );
scroll-snap-align: start;
gap: var( --eumi-space-xs, 0.5rem );
margin: 0;
padding: var( --eumi-space-l, 1.5rem );
border: var( --eumi-border-default, 1px ) solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-card, 6px );
background: var( --eumi-color-background, #fafaf8 );
}
.eumi-c-gbewertungen__sterne {
margin: 0;
color: var( --eumi-color-warning, #8f5308 );
letter-spacing: 0.15em;
}
.eumi-c-gbewertungen__text {
margin: 0;
color: var( --eumi-color-text, #1d1c18 );
line-height: 1.6;
}
.eumi-c-gbewertungen__autor {
margin-block-start: auto;
font-size: var( --eumi-font-size-small, 0.875rem );
font-weight: 600;
color: var( --eumi-color-text, #1d1c18 );
}
.eumi-c-gbewertungen__zeit {
font-weight: 400;
color: var( --eumi-color-text-muted, #4b5563 );
}
.elementor .eumi-c-gbewertungen__mehr a,
.eumi-c-gbewertungen__mehr a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var( --eumi-color-primary, #164e8c );
}
.eumi-c-gbewertungen__mehr {
margin: 0;
}
/* Der Hinweis nach Paragraf 5b Abs. 3 UWG — sichtbar, nicht versteckt. */
.eumi-c-gbewertungen__hinweis {
margin: 0;
font-size: var( --eumi-font-size-small, 0.875rem );
color: var( --eumi-color-text-muted, #4b5563 );
}
/* Zertifikatsliste aus `[eumi_zertifikate]`. */
.eumi-c-belege {
display: flex;
flex-wrap: wrap;
gap: var( --eumi-space-xs, 0.5rem );
margin: 0;
padding: 0;
list-style: none;
}
/*
* Als Marke ausgezeichnet, nicht als Aufzählung: Ein Zertifikat ist eine
* abgeschlossene Aussage und wird beim Überfliegen einzeln erfasst. Der Rahmen statt
* einer Fläche hält die Liste ruhig genug für die Vertrauensleiste.
*/
.eumi-c-belege__eintrag {
padding: var( --eumi-space-2xs, 0.25rem ) var( --eumi-space-s, 0.75rem );
border: 1px solid var( --eumi-color-border, #d9d8d0 );
border-radius: var( --eumi-radius-control, 4px );
font-size: var( --eumi-font-size-small, 0.875rem );
color: var( --eumi-color-text-muted, #4b5563 );
}