/*
===============================================================================
  COVER72.DE – HELIX ULTIMATE CUSTOM CSS
===============================================================================

  Projekt        : Cover72.de
  Template       : Helix Ultimate (Joomla 6)
  Datei          : custom.css
  Einbindung     : templates/shaper_helixultimate/css/custom.css

  Version        : 1.9.8
  Erstellt       : 05.09.2026
  Letzte Änderung: 09.09.2026

  Beschreibung:
  Seitenübergreifende Grundlage für Header-Höhen, Hauptmenü, Dropdown,
  Hamburger und das Offcanvas-Menü (inkl. Kontaktdaten).

  ZUSTÄNDIGKEIT – bitte beim Bearbeiten beachten:
  -----------------------------------------------------------------------------
  Diese Datei  : der gesamte Header. Höhen, Overlay über der Kopfsektion,
                 Scroll-Zustand, Logo, Hauptmenü, Dropdown, Hamburger,
                 Offcanvas-Menü und Kontaktdaten.
                 Änderungen am Header gehören ausschließlich hierher.
  Seiten-CSS   : ab hier nur noch der Seiteninhalt unterhalb des Headers.
                 Die Kopfsektion selbst (.cover72-hero / .c72-hero /
                 .c72-page-head) bleibt dort, nur der Header nicht mehr.
  Seiten-HTML  : das Skript in <name>-body.html setzt beim Scrollen die
                 Klasse cover72-scrolled am body – bitte beibehalten.
  Template     : Logo-Höhen (.logo-image / .logo-image-phone / .logo-sticky)
                 -> Template-Einstellungen, nicht hier überschreiben
  -----------------------------------------------------------------------------

  Änderungsverlauf:
  -----------------------------------------------------------------------------
  Version  Datum        Änderung
  -----------------------------------------------------------------------------
  1.0.0    05.09.2026  Grundstruktur erstellt
  1.1.0    05.09.2026  Header-Höhe angepasst
  1.2.0    05.09.2026  Sticky-Header angepasst
  1.9.0    05.09.2026  Header, Navigation und Hamburger vereinheitlicht
  1.9.1    05.09.2026  Hamburger-Symbol verbessert
  1.9.2    05.09.2026  Mobile Darstellung optimiert
  1.9.3    05.09.2026  Header- und Menüstruktur stabilisiert
  1.9.4    05.09.2026  Desktop-Modal-Menü korrigiert
  1.9.5    05.09.2026  Kontaktinformationen im Header korrigiert
  1.9.6    05.09.2026  Desktop-Modal-Menü optisch verfeinert
  1.9.7    09.09.2026  Abgleich mit dem tatsächlichen Markup von cover72.de
                       - Abschnitt #modal-menu entfernt: die Seite läuft im
                         Offcanvas-Modus, ein Modal-Menü existiert nicht.
                         Gestaltung auf .offcanvas-menu portiert
                       - .container-header entfernt (heißt .container-inner)
                       - .navbar-brand / .brand-logo entfernt
                         (Logo = .logo-image, Größe kommt aus dem Template)
                       - .navbar-toggler / .sticky-logo / .navbar-collapse
                         entfernt (im Helix-Markup nicht vorhanden)
                       - Toggler auf .offcanvas-toggler-secondary korrigiert
                       - Kontaktdaten: .sp-contact-info liegt im Offcanvas,
                         nicht in #logo-right
                       - Header-Hintergrund und Logo-Größe an das Seiten-CSS
                         abgegeben (dort halbtransparent + Scroll-Zustand)
                       - Einblendanimation an body.offcanvas-active gekoppelt,
                         läuft jetzt beim Öffnen statt beim Seitenaufbau
                       - Verzögerung für alle Menüpunkte, nicht nur die ersten 5
                       - Hamburger-Hover wirkt jetzt auch auf SVG-Icons
                       - outline:none durch sichtbaren :focus-visible ersetzt
                       - Farben durchgängig über CSS-Variablen
                       - doppelte Mobilblöcke entfernt (Datei ~55 % kürzer)
  1.9.8    09.09.2026  Header aus den Seiten-CSS-Dateien zusammengeführt
                       - Header-Hintergrund, Overlay-Position, Logo-Größe und
                         der Scroll-Zustand body.cover72-scrolled lagen bisher
                         fünffach in startseite.css, kontakt.css,
                         leistungsuebersicht.css, impressum.css und
                         datenschutz.css – jetzt nur noch hier
                       - Overlay wird über die Kopfsektion der Seite erkannt
                         (.cover72-hero / .c72-hero / .c72-page-head),
                         Notausgang: body-Klasse c72-header-overlay
                       - dadurch bekommt auch die Referenzseite den Header,
                         der ihr bisher fehlte, obwohl ihr Skript die Klasse
                         cover72-scrolled längst gesetzt hat
                       - animierte Linie unter dem Menüpunkt übernommen
  -----------------------------------------------------------------------------

===============================================================================
*/


/*
===============================================================================
  1. FARBEN
===============================================================================
*/

:root {
    --cover72-header: #101920;
    --cover72-white: #ffffff;
    --cover72-text: rgba(255,255,255,.88);
    --cover72-accent: #55b9df;
    --cover72-border: rgba(255,255,255,.08);

    /* Header über einer dunklen Kopfsektion */
    --cover72-overlay:          rgba(10,19,26,.34);
    --cover72-overlay-mobile:   rgba(10,19,26,.82);
    --cover72-overlay-scrolled: rgba(12,22,29,.90);
}


/*
===============================================================================
  2. HEADER – HÖHEN
===============================================================================

  Hintergrund, Position und Logo-Größe kommen aus dem Seiten-CSS
  bzw. aus den Template-Einstellungen und werden hier bewusst
  NICHT gesetzt.

  Hinweis zu den Breakpoints: 650px ist historisch gewachsen und
  wurde beibehalten, damit sich am aktuellen Erscheinungsbild
  nichts ändert.

===============================================================================
*/

#sp-header {
    min-height: 120px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

@media (min-width: 768px) and (max-width: 991px) {

    #sp-header {
        min-height: 110px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

@media (max-width: 767px) {

    #sp-header {
        min-height: 80px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

@media (max-width: 650px) {

    #sp-header {
        min-height: 76px !important;
    }
}


/*
===============================================================================
  3. HEADER – ERSCHEINUNGSBILD
===============================================================================

  Zwei Zustände:

  a) Grundzustand  – deckender Header im normalen Textfluss.
                     Für Seiten ohne dunkle Kopfsektion.

  b) Overlay       – Header liegt transparent über der Kopfsektion.
                     Wird automatisch aktiv, sobald die Seite eine
                     dunkle Kopfsektion enthält:
                     .cover72-hero  (Startseite, Leistungsübersicht, Referenzen)
                     .c72-hero      (Kontakt)
                     .c72-page-head (Impressum, Datenschutz)

  Notausgang: Lässt sich eine neue Kopfsektion nicht über diese Klassen
  erkennen, genügt die Klasse c72-header-overlay am body-Element.
  Sie steht bewusst in einer eigenen Regel, damit sie auch in Browsern
  ohne :has()-Unterstützung greift.

  Bis Version 1.9.7 lag dieser Abschnitt fünffach in den Seiten-CSS-Dateien.

===============================================================================
*/

/* ----- a) Grundzustand ----- */

#sp-header {
    background: var(--cover72-header) !important;
}


/* ----- b) Overlay – automatisch erkannt ----- */

body:has(.cover72-hero) #sp-header,
body:has(.c72-hero) #sp-header,
body:has(.c72-page-head) #sp-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: var(--cover72-overlay) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 2px 18px rgba(0,0,0,.04) !important;
    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease !important;
}


/* ----- b) Overlay – manuell über die body-Klasse ----- */

body.c72-header-overlay #sp-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: var(--cover72-overlay) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 2px 18px rgba(0,0,0,.04) !important;
    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease !important;
}


/* ----- Innencontainer immer transparent ----- */

#sp-header .container,
#sp-header .container-fluid,
#sp-header .container-inner,
#sp-header .sp-container {
    background: transparent !important;
}


/* ----- Logo ----- */

#sp-header .logo img {
    max-height: 72px;
    width: auto;
    transition: transform .35s ease;
}

#sp-header .logo:hover img {
    transform: scale(1.025);
}


/* ----- Mobil ----- */

@media (max-width: 991px) {

    body:has(.cover72-hero) #sp-header,
    body:has(.c72-hero) #sp-header,
    body:has(.c72-page-head) #sp-header {
        background: var(--cover72-overlay-mobile) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.c72-header-overlay #sp-header {
        background: var(--cover72-overlay-mobile) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #sp-header .logo img {
        max-height: 62px;
    }
}


/*
===============================================================================
  4. HEADER BEIM SCROLLEN
===============================================================================

  Zwei Mechanismen laufen parallel:

  .header-sticky        – von Helix gesetzt, steuert hier nur die Höhe
  body.cover72-scrolled – vom Skript der Seite (HTML-Addon) gesetzt,
                          steuert Hintergrund, Position und Logo

  Das Skript liegt in jeder <name>-body.html und setzt die Klasse ab
  35 Pixel Scrollweg.

===============================================================================
*/

body.cover72-scrolled #sp-header {
    position: fixed !important;
    background: var(--cover72-overlay-scrolled) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
}

body.cover72-scrolled #sp-header .logo img {
    max-height: 62px;
}


/*
===============================================================================
  5. STICKY-HEADER – HÖHEN
===============================================================================

  Helix setzt beim Scrollen die Klasse .header-sticky auf #sp-header.
  Das Seiten-CSS arbeitet zusätzlich mit body.cover72-scrolled für
  Hintergrund und Logo – beide Zustände greifen gleichzeitig.

===============================================================================
*/

#sp-header.header-sticky {
    min-height: 80px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (min-width: 768px) and (max-width: 991px) {

    #sp-header.header-sticky {
        min-height: 75px !important;
    }
}

@media (max-width: 767px) {

    #sp-header.header-sticky {
        min-height: 65px !important;
    }
}


/*
===============================================================================
  6. HAUPTMENÜ – GRUNDLAGE
===============================================================================

  Fallback für alle Seiten. Seiten mit eigenem Header-CSS
  (Startseite, Kontakt, Leistungsübersicht, Impressum, Datenschutz)
  überschreiben diese Farben mit ihrer eigenen Variante.

===============================================================================
*/

#sp-header #sp-menu .sp-megamenu-parent > li > a,
#sp-header #sp-menu .sp-megamenu-parent > li > span,
#sp-header #sp-menu .sp-megamenu-parent > li > a span,
#sp-header #sp-menu .sp-megamenu-parent > li > span span {
    color: var(--cover72-white) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    transition: color .25s ease !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a:hover,
#sp-header #sp-menu .sp-megamenu-parent > li > a:focus-visible,
#sp-header #sp-menu .sp-megamenu-parent > li:hover > a,
#sp-header #sp-menu .sp-megamenu-parent > li:hover > a span {
    color: var(--cover72-accent) !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li.active > a,
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a,
#sp-header #sp-menu .sp-megamenu-parent > li.active > a span,
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a span {
    color: var(--cover72-white) !important;
    font-weight: 700 !important;
}


/* ----- Animierte Linie unter dem Menüpunkt ----- */

#sp-header #sp-menu .sp-megamenu-parent > li > a {
    position: relative !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -1px !important;
    width: 0 !important;
    height: 2px !important;
    border-radius: 10px !important;
    background: var(--cover72-accent) !important;
    transform: translateX(-50%) !important;
    transition: width .3s ease !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a:hover::after,
#sp-header #sp-menu .sp-megamenu-parent > li.active > a::after,
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a::after {
    width: 65% !important;
}


/*
===============================================================================
  7. DROPDOWN-MENÜ
===============================================================================
*/

#sp-header #sp-menu .sp-dropdown,
#sp-header #sp-menu .sp-dropdown-inner,
#sp-header #sp-menu .sp-dropdown-items {
    background: var(--cover72-header) !important;
    border: 0 !important;
}

#sp-header #sp-menu .sp-dropdown li.sp-menu-item > a,
#sp-header #sp-menu .sp-dropdown li.sp-menu-item > a span {
    color: var(--cover72-white) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

#sp-header #sp-menu .sp-dropdown li.sp-menu-item > a:hover,
#sp-header #sp-menu .sp-dropdown li.sp-menu-item > a:focus-visible {
    color: var(--cover72-accent) !important;
}


/*
===============================================================================
  8. HAMBURGER IM HEADER
===============================================================================

  Markup auf cover72.de:

  #sp-header
      a.offcanvas-toggler-secondary.offcanvas-toggler-right
          div.burger-icon
              span
              span
              span

  Der Attributselektor deckt alle Helix-Varianten ab
  (offcanvas-toggler-secondary, -primary, -left, -right).

===============================================================================
*/

#sp-header [class*="offcanvas-toggler"] {
    color: var(--cover72-white) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

#sp-header [class*="offcanvas-toggler"]:focus-visible {
    outline: 2px solid var(--cover72-accent) !important;
    outline-offset: 3px !important;
}

#sp-header .burger-icon {
    color: var(--cover72-white) !important;
    background: transparent !important;
    opacity: 1 !important;
}

#sp-header .burger-icon > span,
#sp-header .burger-icon::before,
#sp-header .burger-icon::after {
    background-color: var(--cover72-white) !important;
    border-color: var(--cover72-white) !important;
    opacity: 1 !important;
    transition: background-color .25s ease !important;
}

#sp-header .burger-icon i,
#sp-header .burger-icon svg,
#sp-header .burger-icon svg *,
#sp-header .burger-icon path,
#sp-header .burger-icon rect {
    color: var(--cover72-white) !important;
    fill: var(--cover72-white) !important;
    stroke: var(--cover72-white) !important;
    opacity: 1 !important;
}


/* ----- Hover ----- */

#sp-header [class*="offcanvas-toggler"]:hover .burger-icon > span,
#sp-header [class*="offcanvas-toggler"]:hover .burger-icon::before,
#sp-header [class*="offcanvas-toggler"]:hover .burger-icon::after,
#sp-header .burger-icon:hover > span,
#sp-header .burger-icon:hover::before,
#sp-header .burger-icon:hover::after {
    background-color: var(--cover72-accent) !important;
    border-color: var(--cover72-accent) !important;
}

#sp-header [class*="offcanvas-toggler"]:hover .burger-icon i,
#sp-header [class*="offcanvas-toggler"]:hover .burger-icon svg *,
#sp-header [class*="offcanvas-toggler"]:hover .burger-icon path,
#sp-header [class*="offcanvas-toggler"]:hover .burger-icon rect {
    color: var(--cover72-accent) !important;
    fill: var(--cover72-accent) !important;
    stroke: var(--cover72-accent) !important;
}


/*
===============================================================================
  9. OFFCANVAS-MENÜ
===============================================================================

  Markup auf cover72.de:

  body.offcanvas-active            <- wird beim Öffnen gesetzt
  .offcanvas-menu.border-menu
      a.close-offcanvas
          div.burger-icon
      .offcanvas-inner
          .sp-module
              ul.mod-menu.menu.nav-pills
                  li.item-000 > a
          .mb-4
              ul.sp-contact-info

  Das Offcanvas liegt außerhalb von #sp-header und wird deshalb
  von den Regeln in Abschnitt 6 nicht erfasst.

===============================================================================
*/

/* ----- 7.1 Panel ----- */

.offcanvas-menu {
    background: var(--cover72-header) !important;
    color: var(--cover72-white) !important;
    border: 0 !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.35) !important;
}

.offcanvas-menu .offcanvas-inner,
.offcanvas-menu .sp-module,
.offcanvas-menu .sp-module-content {
    background: transparent !important;
    color: var(--cover72-white) !important;
}

.offcanvas-menu .sp-module-title {
    color: var(--cover72-white) !important;
    border-bottom-color: var(--cover72-border) !important;
}


/* ----- 7.2 Schließen-Symbol ----- */

.offcanvas-menu .close-offcanvas {
    color: var(--cover72-white) !important;
    text-decoration: none !important;
}

.offcanvas-menu .close-offcanvas .burger-icon > span,
.offcanvas-menu .close-offcanvas .burger-icon::before,
.offcanvas-menu .close-offcanvas .burger-icon::after {
    background-color: var(--cover72-white) !important;
    border-color: var(--cover72-white) !important;
    transition: background-color .25s ease !important;
}

.offcanvas-menu .close-offcanvas:hover .burger-icon > span,
.offcanvas-menu .close-offcanvas:hover .burger-icon::before,
.offcanvas-menu .close-offcanvas:hover .burger-icon::after {
    background-color: var(--cover72-accent) !important;
    border-color: var(--cover72-accent) !important;
}

.offcanvas-menu .close-offcanvas:focus-visible {
    outline: 2px solid var(--cover72-accent) !important;
    outline-offset: 3px !important;
}


/* ----- 7.3 Menüliste ----- */

.offcanvas-menu ul.menu,
.offcanvas-menu ul.mod-menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.offcanvas-menu ul.menu > li,
.offcanvas-menu ul.mod-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--cover72-border) !important;
}

.offcanvas-menu ul.menu > li:last-child,
.offcanvas-menu ul.mod-menu > li:last-child {
    border-bottom: 0 !important;
}


/* ----- 7.4 Menülinks ----- */

.offcanvas-menu ul.menu > li > a,
.offcanvas-menu ul.mod-menu > li > a {
    position: relative !important;
    display: block !important;
    padding: 14px 16px 14px 22px !important;
    color: var(--cover72-text) !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition:
        color .25s ease,
        transform .25s ease !important;
}


/* ----- 7.5 Blaue Linie links ----- */

.offcanvas-menu ul.menu > li > a::before,
.offcanvas-menu ul.mod-menu > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 2px !important;
    background: var(--cover72-accent) !important;
    transform: scaleY(0) !important;
    transform-origin: center !important;
    transition: transform .25s ease !important;
}


/* ----- 7.6 Hover ----- */

.offcanvas-menu ul.menu > li > a:hover,
.offcanvas-menu ul.menu > li > a:focus-visible,
.offcanvas-menu ul.mod-menu > li > a:hover,
.offcanvas-menu ul.mod-menu > li > a:focus-visible {
    color: var(--cover72-accent) !important;
    transform: translateX(4px) !important;
}

.offcanvas-menu ul.menu > li > a:hover::before,
.offcanvas-menu ul.menu > li > a:focus-visible::before,
.offcanvas-menu ul.mod-menu > li > a:hover::before,
.offcanvas-menu ul.mod-menu > li > a:focus-visible::before {
    transform: scaleY(1) !important;
}


/* ----- 7.7 Aktiver Menüpunkt ----- */

.offcanvas-menu ul.menu > li.active > a,
.offcanvas-menu ul.menu > li.current > a,
.offcanvas-menu ul.menu > li.current-item > a,
.offcanvas-menu ul.mod-menu > li.active > a,
.offcanvas-menu ul.mod-menu > li.current > a,
.offcanvas-menu ul.mod-menu > li.current-item > a {
    color: var(--cover72-white) !important;
    font-weight: 700 !important;
}

.offcanvas-menu ul.menu > li.active > a::before,
.offcanvas-menu ul.menu > li.current > a::before,
.offcanvas-menu ul.menu > li.current-item > a::before,
.offcanvas-menu ul.mod-menu > li.active > a::before,
.offcanvas-menu ul.mod-menu > li.current > a::before,
.offcanvas-menu ul.mod-menu > li.current-item > a::before {
    transform: scaleY(1) !important;
}


/* ----- 7.8 Untermenü ----- */

.offcanvas-menu ul.menu ul,
.offcanvas-menu ul.mod-menu ul {
    padding-left: 14px !important;
    list-style: none !important;
}

.offcanvas-menu ul.menu ul > li > a,
.offcanvas-menu ul.mod-menu ul > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}


/*
===============================================================================
  10. OFFCANVAS – KONTAKTDATEN
===============================================================================
*/

.offcanvas-menu .sp-contact-info {
    margin: 0 !important;
    padding: 4px 16px 0 22px !important;
    list-style: none !important;
}

.offcanvas-menu .sp-contact-info li {
    margin-bottom: 8px !important;
    color: var(--cover72-text) !important;
}

.offcanvas-menu .sp-contact-info a {
    color: var(--cover72-text) !important;
    text-decoration: none !important;
    transition: color .25s ease !important;
}

.offcanvas-menu .sp-contact-info a:hover,
.offcanvas-menu .sp-contact-info a:focus-visible {
    color: var(--cover72-accent) !important;
}

.offcanvas-menu .sp-contact-info span[class*="fa-"],
.offcanvas-menu .sp-contact-info i {
    margin-right: 8px !important;
    color: var(--cover72-accent) !important;
}

.offcanvas-menu .sp-contact-info svg,
.offcanvas-menu .sp-contact-info svg * {
    fill: var(--cover72-accent) !important;
    stroke: var(--cover72-accent) !important;
}


/*
  Falls später ein Kontaktmodul in den Header kommt,
  greift dieselbe Gestaltung auch dort.
*/

#sp-header .sp-contact-info,
#sp-header .sp-contact-info li {
    color: var(--cover72-text) !important;
}

#sp-header .sp-contact-info a {
    color: var(--cover72-text) !important;
    text-decoration: none !important;
}

#sp-header .sp-contact-info a:hover,
#sp-header .sp-contact-info a:focus-visible {
    color: var(--cover72-accent) !important;
}


/*
===============================================================================
  11. OFFCANVAS – EINBLENDANIMATION
===============================================================================

  Gekoppelt an body.offcanvas-active, damit die Animation beim
  Öffnen läuft und nicht schon beim Seitenaufbau.

  Die Verzögerung wird über die Variable --i berechnet, dadurch
  sind beliebig viele Menüpunkte abgedeckt.

===============================================================================
*/

@keyframes cover72OffcanvasItem {

    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

body.offcanvas-active .offcanvas-menu ul.menu > li,
body.offcanvas-active .offcanvas-menu ul.mod-menu > li {
    animation: cover72OffcanvasItem .45s ease both !important;
    animation-delay: calc(.08s + var(--i, 0) * .06s) !important;
}

body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(1),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(1)  { --i: 0; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(2),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(2)  { --i: 1; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(3),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(3)  { --i: 2; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(4),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(4)  { --i: 3; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(5),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(5)  { --i: 4; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(6),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(6)  { --i: 5; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(7),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(7)  { --i: 6; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(8),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(8)  { --i: 7; }
body.offcanvas-active .offcanvas-menu ul.menu > li:nth-child(n+9),
body.offcanvas-active .offcanvas-menu ul.mod-menu > li:nth-child(n+9) { --i: 8; }


/*
  Rücksicht auf reduzierte Bewegung.
*/

@media (prefers-reduced-motion: reduce) {

    body.offcanvas-active .offcanvas-menu ul.menu > li,
    body.offcanvas-active .offcanvas-menu ul.mod-menu > li {
        animation: none !important;
    }

    .offcanvas-menu ul.menu > li > a:hover,
    .offcanvas-menu ul.mod-menu > li > a:hover {
        transform: none !important;
    }
}


/*
===============================================================================
  ENDE COVER72.DE CUSTOM CSS
  VERSION 1.9.7
===============================================================================
*/