/*
 * DE: Kopfbereich. Avadas Vorlage stammt aus einer Demo von 2017 und arbeitet mit Floats
 *     und festen Breiten — das Logo rutschte unter die Vorteilszeile, die Knöpfe hatten
 *     Ecken, und unter dem Menü lag ein grauer Streifen über die volle Breite. Hier liegt
 *     alles in einer Flex-Reihe, die in klaren Stufen umbricht.
 *
 *     Der Umbruchpunkt 1050 ist nicht frei gewählt: Avada schaltet dort selbst auf das
 *     mobile Menü um. Jede eigene Grenze daneben erzeugt einen Bereich, in dem beide
 *     Fassungen halb gelten.
 * EN: Header area. Avada's template comes from a 2017 demo and works with floats and fixed
 *     widths — the logo slipped below the benefits row, the buttons had corners, and a grey
 *     stripe ran the full width below the menu. Here everything sits in one flex row that
 *     wraps in clear stages.
 *
 *     The 1050 breakpoint is not arbitrary: that is where Avada switches to its mobile
 *     menu. Any own boundary beside it creates a band where both versions half apply.
 *
 * Inhalt / Contents:
 * - Werte des Kopfbereichs
 * - Obere Leiste
 * - Hauptkopf: Logo, Vorteile, Knöpfe
 * - Menüleiste
 * - Titelleiste ohne grauen Streifen
 * - Mobiler Kopf
 * - Mobiles Menü als eigene Fläche
 */

:root {
    --cmwdHeadRed: #c01323;
    --cmwdHeadRedLight: #cf1a2b;
    --cmwdHeadDark: #2b2e32;
    --cmwdHeadWrap: 1050px;
}

/* ---------------------------------------------------------------- Obere Leiste */

/*
 * DE: Avada setzt das Polster der Leiste bei schmaleren Ansichten selbst zurück — dann
 *     klebten die Angaben oben und unten am Rand. Es gilt jetzt in jeder Breite.
 * EN: Avada resets the bar's padding on narrower views — the details then stuck to the
 *     top and bottom edges. It now applies at every width.
 */
.fusion-secondary-header,
body.fusion-body .fusion-secondary-header,
.fusion-mobile-menu-design-modern .fusion-secondary-header,
.fusion-mobile-menu-design-flyout .fusion-secondary-header,
.fusion-mobile-menu-design-classic .fusion-secondary-header {
    padding-bottom: 0.65rem !important;
    padding-top: 0.65rem !important;
}

.fusion-secondary-header .fusion-row {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/*
 * DE: Avada legt einen Platzhalter für den klebrigen Kopf an. Der ist hier nicht in
 *     Gebrauch, hinterließ aber einen dunklen Streifen zwischen Leiste und Kopf.
 * EN: Avada inserts a placeholder for the sticky header. It is not in use here but left a
 *     dark stripe between the bar and the header.
 */
.fusion-header-sticky-height {
    display: none !important;
}

/*
 * DE: Im mobilen Menüdesign legt Avada einen roten Ober- und Unterrand auf die Hälften
 *     der Leiste — daraus entstand der dunkle Streifen mit rotem Strich zwischen Leiste
 *     und Kopf. Die Leiste grenzt ohne Rand an den Kopf.
 * EN: In the mobile menu design Avada puts a red top and bottom border on the bar's
 *     halves — that produced the dark stripe with a red rule between bar and header. The
 *     bar borders the header without a rule.
 */
.fusion-secondary-header,
.fusion-secondary-header .fusion-alignleft,
.fusion-secondary-header .fusion-alignright,
.fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignleft,
.fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright,
.fusion-mobile-menu-sep {
    border-bottom: 0 !important;
    border-top: 0 !important;
}

.fusion-secondary-header .fusion-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.4rem;
    justify-content: center;
}

.fusion-secondary-header .fusion-alignleft,
.fusion-secondary-header .fusion-alignright {
    float: none;
    margin: 0;
    text-align: center;
}

.fusion-secondary-header .fusion-contact-info,
.fusion-secondary-header .fusion-contact-info-phone-number {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 2.4rem;
    justify-content: center;
    line-height: 1.6;
}

/*
 * DE: Jede Angabe ist eine eigene Einheit aus Zeichen und Text. Ohne das brach die Zeile
 *     mitten zwischen Symbol und Angabe um, sodass das Symbol allein am Zeilenende stand.
 * EN: Every detail is its own unit of icon and text. Without this the line broke between
 *     symbol and detail, leaving the symbol alone at the end of a line.
 */
.cmwdTop__item {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 0.45rem;
    text-decoration: none;
    white-space: nowrap;
}

.cmwdTop__item > span {
    white-space: normal;
}

.cmwdTop__item--hours > span {
    white-space: nowrap;
}

/*
 * DE: Beim Überfahren wechselt nur die Farbe — eine Unterstreichung würde das Zeichen vom
 *     Text trennen. Die Auswahl muss Avadas eigene Farbregel für Verweise in der Leiste
 *     überbieten, sonst färbt sich nur der letzte Punkt.
 * EN: On hover only the colour changes — an underline would separate the icon from the
 *     text. The selector has to beat Avada's own colour rule for links in the bar,
 *     otherwise only the last item changes.
 */
.fusion-secondary-header a.cmwdTop__item,
.fusion-secondary-header .fusion-contact-info a.cmwdTop__item {
    cursor: pointer;
    transition: color 0.15s ease;
}

.fusion-secondary-header a.cmwdTop__item:hover,
.fusion-secondary-header a.cmwdTop__item:focus-visible,
.fusion-secondary-header .fusion-contact-info a.cmwdTop__item:hover,
.fusion-secondary-header .fusion-contact-info a.cmwdTop__item:focus-visible {
    color: var(--cmwdHeadRed) !important;
    text-decoration: none !important;
}

.fusion-secondary-header a.cmwdTop__item:hover i,
.fusion-secondary-header a.cmwdTop__item:focus-visible i {
    color: var(--cmwdHeadRed) !important;
}

.cmwdTop__item i {
    color: var(--cmwdHeadRed);
    flex: none;
}

/* DE: Der Verweis auf die Öffnungszeiten erscheint nur, wenn die Zeiten selbst nicht
   mehr passen. EN: The link to the opening hours appears only when the hours themselves
   no longer fit. */
.cmwdTop__item--onlyMobile {
    display: none;
}

@media only screen and (max-width: 1100px) {
    .cmwdTop__item--hours {
        display: none;
    }

    .cmwdTop__item--onlyMobile {
        display: inline-flex;
        /* DE: Steht im Markup am Ende, gehört aber wie im Desktop an die erste Stelle.
           EN: Sits last in the markup but belongs first, as on desktop. */
        order: -1;
    }

    .fusion-secondary-header .fusion-contact-info,
    .fusion-secondary-header .fusion-contact-info-phone-number {
        gap: 0.3rem 1.4rem;
    }
}

/*
 * DE: Auf schmalen Geräten steht jede Angabe in eigener Zeile — nebeneinander lief die
 *     E-Mail-Adresse über den Rand hinaus.
 * EN: On narrow devices each detail gets its own line — side by side the e-mail address
 *     ran past the edge.
 */
@media only screen and (max-width: 560px) {
    .fusion-secondary-header .fusion-contact-info,
    .fusion-secondary-header .fusion-contact-info-phone-number {
        align-items: center;
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }

    .fusion-secondary-header .fusion-alignleft,
    .fusion-secondary-header .fusion-alignright {
        width: 100%;
    }

    .cmwdTop__item {
        font-size: 0.82rem;
        max-width: 100%;
    }

    .cmwdTop__item > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------- Hauptkopf */

.fusion-header-wrapper .fusion-header {
    background-image: linear-gradient(175deg, var(--cmwdHeadRedLight) 0%, var(--cmwdHeadRed) 62%);
    padding-block: 0.9rem;
}

.fusion-header .fusion-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}

/*
 * DE: Avada hängt an jede Zeile zwei Pseudoelemente als Float-Klärung. In einer Flex-Zeile
 *     sind das zwei vollwertige Elemente: sie erhalten Lücke und Freiraum wie Logo und
 *     Menüzeichen. Daher rückte das Logo etwa 60 Pixel vom linken Rand ein und das
 *     Menüzeichen ebenso vom rechten, obwohl die Zeile über die volle Breite lief.
 * EN: Avada appends two pseudo-elements to every row to clear floats. In a flex row those
 *     are two full-blown items: they receive gap and free space just like the logo and the
 *     menu icon. That is why the logo sat some 60 pixels off the left edge and the menu
 *     icon the same off the right, although the row ran the full width.
 */
.fusion-header .fusion-row::before,
.fusion-header .fusion-row::after,
.fusion-secondary-header .fusion-row::before,
.fusion-secondary-header .fusion-row::after {
    content: none !important;
    display: none !important;
}

/*
 * DE: Der seitliche Abstand muss auf den Kopf selbst — Avada setzt das Polster der Zeile
 *     mit !important auf null und lädt seine Datei nach dieser hier.
 * EN: The horizontal gutter has to go on the header itself — Avada zeroes the row's
 *     padding with !important and loads its file after this one.
 */
.fusion-header-wrapper .fusion-header,
.fusion-mobile-menu-design-modern.fusion-header-v4 .fusion-header {
    padding-block: 0.9rem !important;
}

.fusion-header-wrapper .fusion-logo a img,
.fusion-header-wrapper .fusion-logo img {
    /* DE: Avada gibt dem Bild die Maße der Datei mit — die Höhe muss sie überstimmen.
       EN: Avada passes the file's dimensions to the image — the height must override them. */
    height: 44px !important;
    max-height: 44px !important;
    max-width: 100%;
    width: auto !important;
}

/* ------------------------------------------- Kopf ab dem Umbruchpunkt aufwärts */

/*
 * DE: Avada legt die Vorteilszeile INNERHALB des Logo-Containers ab — deshalb stand sie
 *     unter dem Logo, egal was die Zeile darüber vorgab. Also wird der Logo-Container
 *     selbst zur Reihe. Das gilt nur oberhalb des Umbruchpunkts: mobil nimmt das Logo
 *     sonst die volle Breite und drückt das Menüzeichen aus der Reihe.
 * EN: Avada places the benefits row INSIDE the logo container — which is why it sat below
 *     the logo no matter what the row above prescribed. So the logo container itself
 *     becomes the row. This applies above the breakpoint only: on mobile the logo would
 *     otherwise take the full width and push the menu icon out of the row.
 */
@media only screen and (min-width: 1051px) {
    .fusion-header .fusion-logo,
    .fusion-header-wrapper .fusion-header .fusion-logo {
        align-items: center !important;
        display: flex !important;
        flex: 1 1 100% !important;
        flex-wrap: nowrap !important;
        float: none !important;
        gap: 0.8rem 2.5rem !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .fusion-header .fusion-logo > a,
    .fusion-header .fusion-logo > .fusion-logo-link {
        flex: 0 0 auto;
        line-height: 0;
    }

    /* DE: Der Inhaltsbereich füllt den Rest und schiebt Vorteile und Knöpfe nach rechts.
       EN: The content area fills the rest and pushes benefits and buttons to the right. */
    .fusion-header-content-3-wrapper,
    .fusion-header .fusion-logo .fusion-header-content-3-wrapper,
    .fusion-header-v4 .fusion-logo .fusion-header-content-3-wrapper {
        flex: 1 1 auto !important;
        float: none !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        width: auto !important;
    }

}

/* ------------------------------------------------- Vorteile und Knöpfe */

.fusion-header-tagline {
    align-items: center;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.9rem 1.6rem;
    justify-content: flex-end;
    margin: 0 !important;
}

/*
 * DE: Die Zeile bricht auf dem Rechner nie um. Sobald es eng wird, rutscht sie als Ganzes
 *     unter das Logo und hat dort die volle Breite — brach sie schon vorher, stand der
 *     Warenkorb allein in einer zweiten Zeile.
 * EN: The row never wraps on desktop. As soon as it gets tight it slips below the logo as
 *     a whole and has the full width there — wrapping earlier left the cart alone on a
 *     second line.
 */

/* DE: Die Einheiten stehen über die Lücke der Reihe auf Abstand, nicht über eigene Ränder.
   EN: The units keep their distance through the row's gap, not through own margins. */
.header-tagline-item {
    align-items: center;
    display: flex;
    float: none !important;
    gap: 0.65rem;
    margin-right: 0 !important;
}

.header-tagline-item .icon {
    flex: 0 0 auto;
}

.header-tagline-item .icon i {
    font-size: 1.5rem;
}

/*
 * DE: Der Text ist die Erläuterung, nicht die Botschaft — er steht schlank, die Zusage
 *     darüber trägt das Gewicht. Eine Höchstbreite hält die Erläuterung auf zwei Zeilen,
 *     statt sie über den halben Kopf laufen zu lassen.
 * EN: The text is the explanation, not the message — it stays light while the promise
 *     above it carries the weight. A maximum width keeps the explanation to two lines
 *     instead of letting it run across half the header.
 */
.header-tagline-item .icon-label {
    float: none !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    /* DE: Avada setzt 15 Pixel und lädt nach dieser Datei — der Abstand zum Zeichen kommt
       aus der Lücke der Einheit. EN: Avada sets 15 pixels and loads after this file — the
       distance to the icon comes from the unit's gap. */
    margin-left: 0 !important;
    max-width: 13.5rem;
    padding-top: 0;
}

.header-tagline-item .icon-label strong {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/*
 * DE: Im Bereich zwischen Umbruchpunkt und etwa 1200 Pixeln rutschte die Vorteilszeile
 *     unter das Logo — der Kopf wurde dadurch doppelt so hoch, obwohl nur eine Beschriftung
 *     zu viel war. Statt umzubrechen zeigt der Kontoknopf dort nur noch sein Zeichen, und
 *     die Abstände rücken enger zusammen.
 * EN: In the band between the breakpoint and about 1200 pixels the benefits row slipped
 *     below the logo — the header thereby grew twice as tall, although only one caption was
 *     too many. Instead of wrapping, the account button shows only its icon there, and the
 *     spacings move closer together.
 */
@media only screen and (min-width: 1051px) and (max-width: 1240px) {
    .fusion-header-tagline {
        gap: 0.7rem 1rem;
    }

    .header-tagline-item .icon-label {
        max-width: 11rem;
    }

    .header-tagline-item .fusion-button[href*="my-account"] .fusion-button-text {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .header-tagline-item .fusion-button[href*="my-account"] {
        padding-inline: 0.75rem;
    }

    .header-tagline-item .fusion-button[href*="my-account"] i {
        margin: 0 !important;
    }
}

/* DE: Knöpfe wie überall im Shop: voll gerundet.
   EN: Buttons as everywhere in the shop: fully rounded. */
.header-tagline-item .fusion-button,
.header-tagline-item .fusion-button.button-square,
.header-tagline-item .fusion-button.button-flat {
    border-radius: 999px !important;
    border-width: 2px;
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.header-tagline-item .fusion-button .fusion-button-text,
.header-tagline-item .fusion-button .cmwdHead__price {
    font-size: 0.78rem;
}

.header-tagline-item .fusion-button i {
    font-size: 0.9rem;
}

.header-tagline-item .fusion-button:hover,
.header-tagline-item .fusion-button:focus-visible {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--cmwdHeadRed) !important;
}

.header-tagline-item .fusion-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------- Menüleiste */

/*
 * DE: Das Menü stand linksbündig mit ungleichen Abständen und einem Pfeil, der neben dem
 *     Eintrag saß. Jetzt gleichmäßige Abstände und eine Linie unter dem aktiven Eintrag.
 * EN: The menu was left-aligned with uneven spacing and an arrow sitting beside the item.
 *     Now even spacing and a rule below the active item.
 */
.fusion-secondary-main-menu {
    border-bottom: 1px solid var(--cmwdRule, #e3e5e8);
}

.fusion-main-menu > ul > li > a {
    font-weight: 500;
    padding-inline: 0 !important;
}

.fusion-main-menu > ul > li {
    margin-right: 2.2rem;
}

.fusion-main-menu > ul > li:last-child {
    margin-right: 0;
}

/*
 * DE: Der Pfeil unter dem aktiven Eintrag ist bei Avada ein SVG in fester Farbe. Statt
 *     ihn zu entfernen, trägt er einen Verlauf von Weiß nach Rot — so wächst er aus der
 *     Menüleiste heraus, statt als harter roter Keil darunterzuhängen.
 * EN: The arrow below the active item is an SVG in a fixed colour in Avada. Instead of
 *     removing it, it carries a gradient from white to red — so it grows out of the menu
 *     bar rather than hanging below it as a hard red wedge.
 */
/*
 * DE: Avada stellt das Pfeil-SVG in einer sehr schwer wiegenden Regel wieder auf
 *     „sichtbar“. Ohne !important stand hinter dem eigenen Pfeil noch Avadas eigener —
 *     der Pfeil erschien doppelt.
 * EN: Avada sets the arrow SVG back to visible in a very heavily weighted rule. Without
 *     !important Avada's own arrow stood behind the own one — the arrow appeared twice.
 */
.fusion-main-menu .fusion-arrow-svg svg {
    display: none !important;
}

.fusion-main-menu .fusion-arrow-svg {
    background: linear-gradient(180deg, #fff 0%, var(--cmwdHeadRed) 92%);
    bottom: -15px !important;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    display: block;
    height: 15px !important;
    line-height: 15px !important;
    width: 34px;
}

.fusion-main-menu .fusion-bottombar-highlight::after,
.fusion-main-menu .fusion-bottombar-highlight::before,
.fusion-main-menu .fusion-menu-highlight-bar {
    display: none !important;
}

/*
 * DE: Die Menüschrift stand in 18 Pixeln mit normalem Schnitt und wirkte dadurch weich.
 *     Etwas kleiner, halbfett und mit leichter Laufweite liest sie sich klarer.
 * EN: The menu type stood at 18 pixels in a regular cut and looked soft because of it.
 *     Slightly smaller, semibold and with a little tracking it reads more clearly.
 */
.fusion-main-menu > ul > li > a .menu-text {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current_page_item > a {
    color: var(--cmwdHeadRed);
}

/* ---------------------------------------- Titelleiste ohne grauen Streifen */

/*
 * DE: Die Titelleiste schließt direkt ans Menü an und trägt die Seitenüberschrift. Auf
 *     der Startseite übernimmt die Bühne diese Rolle, dort entfällt sie.
 * EN: The title bar joins the menu directly and carries the page heading. On the home page
 *     the stage takes that role, so it is dropped there.
 */
.avada-page-titlebar-wrapper {
    background: var(--cmwdPanel, #f6f7f8) !important;
    border: 0 !important;
    margin: 0 !important;
}

/*
 * DE: Avada gibt der Leiste auf schmalen Geräten eine Mindesthöhe von 240 Pixeln — und
 *     zwar nicht der Leiste selbst, sondern der Zeile darin. Deshalb blieb sie hoch,
 *     obwohl Höhe und Mindesthöhe der Leiste längst auf „automatisch“ standen.
 * EN: On narrow devices Avada gives the bar a minimum height of 240 pixels — not the bar
 *     itself but the row inside it. That is why it stayed tall although the bar's height
 *     and minimum height had long been set to "auto".
 */
.fusion-page-title-bar,
.fusion-page-title-row,
.fusion-body:not(.avada-has-page-title-mobile-height-auto) .fusion-page-title-bar:not(.fusion-tb-page-title-bar),
.fusion-body:not(.avada-has-page-title-mobile-height-auto) .fusion-page-title-row {
    height: auto !important;
    min-height: 0 !important;
}

.fusion-page-title-bar {
    background: none !important;
    border: 0 !important;
    display: block !important;
    padding-block: 1.8rem !important;
}

/* DE: Auf schmalen Geräten nimmt die Überschrift sonst den halben ersten Bildschirm ein.
   EN: On narrow devices the heading otherwise takes up half the first screen. */
@media only screen and (max-width: 64rem) {
    .fusion-page-title-wrapper h1,
    .fusion-page-title-wrapper .fusion-page-title-captions h1 {
        font-size: 1.6rem !important;
    }
}

@media only screen and (max-width: 48rem) {
    .fusion-page-title-bar {
        padding-block: 1.3rem !important;
    }

    .fusion-page-title-wrapper h1,
    .fusion-page-title-wrapper .fusion-page-title-captions h1 {
        font-size: 1.4rem !important;
    }
}

/* DE: Die Überschrift lief mit dem Zeilenabstand des Themes auf zwei Zeilen weit
   auseinander. EN: With the theme's line height the heading ran far apart over two lines. */
.fusion-page-title-wrapper h1,
.fusion-page-title-wrapper .fusion-page-title-captions h1 {
    display: block;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.15 !important;
    margin: 0;
}

/*
 * DE: Avada färbt den Pfad in der Titelleiste hell, weil dort ursprünglich ein dunkles Bild
 *     lag. Auf dem hellen Grund war er dadurch nicht zu lesen.
 * EN: Avada colours the breadcrumb in the title bar light, because a dark image originally
 *     sat there. On the light ground it was therefore unreadable.
 */
.fusion-breadcrumbs,
.fusion-breadcrumbs a,
.fusion-page-title-bar .fusion-breadcrumbs span {
    color: var(--cmwdMutedText, #6b7079) !important;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.fusion-breadcrumbs a:hover {
    color: var(--cmwdRed, #c01323) !important;
}

/* DE: Auf der Startseite trägt die Bühne den grauen Grund — die Leiste entfällt.
   EN: On the home page the stage carries the grey ground — the bar is dropped. */
.home .avada-page-titlebar-wrapper,
.page-id-9 .avada-page-titlebar-wrapper {
    display: none;
}

/* DE: Kein Zwischenraum zwischen Menü und dem grauen Bereich.
   EN: No gap between the menu and the grey area. */
#main {
    padding-top: 0 !important;
}

#main > .fusion-row {
    padding-top: 0 !important;
}

.fusion-secondary-main-menu {
    margin-bottom: 0 !important;
}

#sliders-container {
    display: none;
}

#content,
#content.full-width {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.home #content,
.page-id-9 #content {
    margin-top: 0;
    padding-top: 0;
}

.home .cmwdStage,
.page-id-9 .cmwdStage {
    margin-top: 0;
}

/* ====================================================== Mobiler Kopf (≤ 1050) */

@media only screen and (max-width: 1050px) {
    .fusion-header-wrapper .fusion-header,
    .fusion-mobile-menu-design-modern .fusion-header {
        background-color: var(--cmwdHeadRed);
        background-image: linear-gradient(175deg, var(--cmwdHeadRedLight) 0%, var(--cmwdHeadRed) 62%);
    }

    /* DE: Logo links, Menüzeichen rechts — beide mit demselben Abstand zum Rand.
       EN: Logo left, menu icon right — both with the same distance to the edge. */
    .fusion-header .fusion-row {
        flex-wrap: nowrap !important;
        gap: 1rem;
        justify-content: space-between !important;
    }

    .fusion-header-wrapper .fusion-header,
    .fusion-mobile-menu-design-modern.fusion-header-v4 .fusion-header {
        padding-inline: 1.25rem !important;
    }

    /*
     * DE: Als Flex-Kasten statt als Block — ein eingebettetes Bild in einem Block erbt den
     *     Zeilenabstand und hinterlässt darunter einen Rest Freiraum. Dadurch saß das Logo
     *     im Kopf nicht mittig, sondern hatte oben mehr Luft als unten.
     * EN: As a flex box instead of a block — an inline image inside a block inherits the
     *     line height and leaves a slack below it. That is why the logo did not sit
     *     centred in the header but had more air above than below.
     */
    .fusion-header .fusion-logo,
    .fusion-header-wrapper .fusion-header .fusion-logo,
    .fusion-mobile-menu-design-modern.fusion-header-v4 .fusion-logo {
        align-items: center !important;
        display: flex !important;
        flex: 0 1 auto !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    .fusion-header .fusion-logo > a,
    .fusion-header .fusion-logo > .fusion-logo-link {
        display: block;
        line-height: 0;
    }

    .fusion-header-wrapper .fusion-logo a img,
    .fusion-header-wrapper .fusion-logo img {
        height: 42px !important;
        max-height: 42px !important;
    }

    /*
     * DE: Vorteile und Knöpfe erscheinen mobil nicht im Kopf — dort ist kein Platz, und
     *     Konto wie Warenkorb stehen in der aufgeklappten Fläche.
     * EN: Benefits and buttons do not appear in the mobile header — there is no room, and
     *     account and cart live in the opened panel.
     */
    .fusion-header-content-3-wrapper {
        display: none !important;
    }

    /*
     * DE: Avada nimmt das Menüzeichen aus dem Fluss und klebt es mit position:absolute in
     *     die rechte obere Ecke der Reihe — dort sitzt es am Rand und oberhalb des Logos.
     *     Zurück in die Reihe, damit es mit dem Logo auf einer Höhe und im Polster liegt.
     * EN: Avada takes the menu icon out of the flow and sticks it to the row's top right
     *     corner with position:absolute — where it clings to the edge above the logo. Back
     *     into the row, so it sits level with the logo and inside the padding.
     */
    .fusion-mobile-menu-icons,
    .fusion-header-v4.fusion-mobile-menu-design-modern .fusion-mobile-menu-icons {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        position: static !important;
        text-align: right;
    }

    .fusion-mobile-menu-icons a.fusion-icon {
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 10px;
        color: #fff !important;
        display: inline-flex !important;
        float: none !important;
        height: 42px;
        justify-content: center;
        line-height: 1;
        margin: 0 !important;
        transition: background-color 0.18s ease, color 0.18s ease;
        width: 42px;
    }

    .fusion-mobile-menu-icons a.fusion-icon:hover,
    .fusion-mobile-menu-icons a.fusion-icon:focus-visible {
        background: #fff;
        color: var(--cmwdHeadRed) !important;
    }

    /*
     * DE: Avadas eigenes mobiles Menü bleibt aus. Sein Halter wird erst durch dessen
     *     Skript gefüllt, klappt die Seite auseinander und schiebt den Inhalt nach unten;
     *     an seine Stelle tritt die eigene Fläche weiter unten.
     * EN: Avada's own mobile menu stays off. Its holder is only filled by its script,
     *     unfolds the page and pushes the content down; the own panel below takes its
     *     place.
     */
    .fusion-mobile-nav-holder,
    .fusion-secondary-header .fusion-mobile-nav-holder {
        display: none !important;
    }

    /* DE: Ohne Hauptmenü und ohne Halter bliebe nur ein leerer Streifen stehen.
       EN: Without the main menu and without the holder only an empty strip would remain. */
    .fusion-secondary-main-menu {
        display: none !important;
    }
}

@media only screen and (max-width: 640px) {
    .fusion-secondary-header {
        font-size: 0.8rem;
    }

    .fusion-secondary-header .fusion-row {
        padding-inline: 1rem;
    }

    .fusion-secondary-header .fusion-contact-info,
    .fusion-secondary-header .fusion-contact-info > * {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .fusion-header-wrapper .fusion-header,
    .fusion-mobile-menu-design-modern.fusion-header-v4 .fusion-header {
        padding-inline: 1rem !important;
    }

    .fusion-header-wrapper .fusion-logo a img,
    .fusion-header-wrapper .fusion-logo img {
        height: 38px !important;
        max-height: 38px !important;
    }
}

/* ============================================ Mobiles Menü als eigene Fläche */

/*
 * DE: Eine dunkle, halbdurchsichtige Tafel fährt von rechts über den Inhalt. Der Inhalt
 *     bleibt stehen, statt wie bei Avada nach unten geschoben zu werden. Die Tafel wird
 *     vom Skript aus den Einträgen des Hauptmenüs gebaut und trägt Konto und Warenkorb.
 * EN: A dark, semi-transparent panel slides in from the right over the content. The
 *     content stays put instead of being pushed down as with Avada. The panel is built by
 *     the script from the main menu's items and carries account and cart.
 */
.cmwdMenu {
    display: none;
}

@media only screen and (max-width: 1050px) {
    .cmwdMenu {
        display: block;
        inset: 0;
        pointer-events: none;
        position: fixed;
        z-index: 100000;
    }

    .cmwdMenu__veil {
        background: rgba(18, 20, 24, 0.55);
        inset: 0;
        opacity: 0;
        position: absolute;
        transition: opacity 0.28s ease;
    }

    .cmwdMenu__panel {
        backdrop-filter: blur(8px);
        background: rgba(20, 23, 28, 0.92);
        bottom: 0;
        box-shadow: -18px 0 46px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        max-width: 420px;
        overflow-y: auto;
        padding: 4.6rem 0 2rem;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        width: 90vw;
    }

    .cmwdMenu.cmwdOpen {
        pointer-events: auto;
    }

    .cmwdMenu.cmwdOpen .cmwdMenu__veil {
        opacity: 1;
    }

    .cmwdMenu.cmwdOpen .cmwdMenu__panel {
        transform: translateX(0);
    }

    /* DE: Schließen-Zeichen oben rechts, auf Höhe des Menüzeichens im Kopf.
       EN: Close icon at the top right, level with the menu icon in the header. */
    .cmwdMenu__close {
        align-items: center;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        display: flex;
        font-size: 1.6rem;
        height: 42px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        position: absolute;
        right: 1.1rem;
        top: 1.5rem;
        transition: background-color 0.18s ease, color 0.18s ease;
        width: 42px;
    }

    .cmwdMenu__close:hover,
    .cmwdMenu__close:focus-visible {
        background: #fff;
        color: var(--cmwdHeadRed);
    }

    .cmwdMenu__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cmwdMenu__list a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        display: block;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        padding: 1.05rem 1.5rem;
        text-decoration: none;
        transition: background-color 0.15s ease, padding-left 0.15s ease;
    }

    .cmwdMenu__list a:hover,
    .cmwdMenu__list a:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        padding-left: 1.8rem;
    }

    .cmwdMenu__item--active a {
        box-shadow: inset 3px 0 0 var(--cmwdHeadRed);
        color: #fff;
    }

    /* DE: Konto und Warenkorb fehlen in Avadas mobilem Menü — hier stehen sie am Fuß.
       EN: Account and cart are missing from Avada's mobile menu — here they sit at the foot. */
    .cmwdMenu__services {
        display: grid;
        gap: 0.7rem;
        margin-top: auto;
        padding: 1.8rem 1.5rem 0.5rem;
    }

    .cmwdMenu__service {
        align-items: center;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 999px;
        color: #fff;
        display: flex;
        font-weight: 700;
        gap: 0.6rem;
        justify-content: center;
        letter-spacing: 0.04em;
        padding: 0.8rem 1.2rem;
        text-decoration: none;
        transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .cmwdMenu__service:hover,
    .cmwdMenu__service:focus-visible {
        background: #fff;
        border-color: #fff;
        color: var(--cmwdHeadRed);
    }

    .cmwdMenu__service--full {
        background: var(--cmwdHeadRed);
        border-color: var(--cmwdHeadRed);
    }

    body.cmwdMenuOpen {
        overflow: hidden;
    }
}

/* ------------------------------------------------- Kopfbereich beim Scrollen */

/*
 * DE: Beim Scrollen bleibt der Kopf stehen. Avada legt die Menüleiste dort auf denselben
 *     roten Grund wie die Logo-Zeile — die Einträge standen dadurch rot auf rot, und der
 *     Pfeil unter dem aktiven Eintrag verschwand im Untergrund.
 * EN: While scrolling the header stays put. Avada places the menu bar on the same red
 *     ground as the logo row there — the items thereby stood red on red, and the arrow
 *     below the active item disappeared into the background.
 */
.fusion-is-sticky .fusion-secondary-main-menu {
    background: var(--cmwdHeadRed) !important;
    border-bottom: 0 !important;
}

.fusion-is-sticky .fusion-main-menu > ul > li > a,
.fusion-is-sticky .fusion-main-menu > ul > li > a .menu-text,
.fusion-is-sticky .fusion-main-menu > ul > li.current-menu-item > a,
.fusion-is-sticky .fusion-main-menu > ul > li.current-menu-item > a .menu-text,
.fusion-is-sticky .fusion-main-menu > ul > li.current_page_item > a {
    color: var(--cmwdWhite) !important;
}

.fusion-is-sticky .fusion-main-menu > ul > li > a:hover .menu-text {
    color: rgba(255, 255, 255, 0.75) !important;
}

/*
 * DE: Der Pfeil hängt unter der Menüleiste über dem Seiteninhalt. Im festen Kopf ist die
 *     Leiste rot — der Verlauf von Weiß nach Rot ergäbe dort einen hellen Keil, der aus
 *     nichts herauswächst. Im festen Kopf entfällt er deshalb; die Menüleiste selbst zeigt
 *     bereits an, wo man ist.
 * EN: The arrow hangs below the menu bar over the page content. In the fixed header the bar
 *     is red — the gradient from white to red would make a light wedge there, growing out
 *     of nothing. It is therefore dropped in the fixed header; the menu bar itself already
 *     shows where one is.
 */
.fusion-is-sticky .fusion-main-menu .fusion-arrow-svg {
    display: none !important;
}

/*
 * DE: Klebt der Kopf, nimmt Avada ihn aus dem Fluss — das Dokument wird um seine Höhe
 *     kürzer. Auf kurzen Seiten wie dem leeren Warenkorb schaukelt sich daraus ein Springen
 *     auf: Das Dokument schrumpft, die Scrollposition wird ungültig, der Browser rückt nach
 *     oben, der Kopf kehrt in den Fluss zurück, das Dokument wächst — und von vorn.
 *
 *     Die Lücke bleibt deshalb stehen. Die Höhe stammt aus der Messung des klebenden Teils;
 *     ändert sich die Kopfhöhe in den Theme-Optionen, gehört sie hier nachgezogen.
 * EN: When the header sticks, Avada takes it out of the flow — the document becomes shorter by
 *     its height. On short pages such as the empty cart this builds into a jumping: the
 *     document shrinks, the scroll position becomes invalid, the browser moves up, the header
 *     returns into the flow, the document grows — and again from the start.
 *
 *     The gap therefore stays. The height comes from measuring the sticking part; if the
 *     header's height changes in the theme options, it belongs updated here.
 */
.fusion-header-wrapper.fusion-is-sticky {
    min-height: var(--cmwdHeaderRest, 0px);
}