/* AA Startseite Design – Header, Megamenü, Offcanvas, Skip-Link und Footer auf ALLEN Seiten (Stand 19.10.2026). Quelle: vorschau/src/00-global.css. */
/* ===== 00-global.css ===== */
/* =====================================================================
   00-global.css – Header, Megamenü, Offcanvas-Menü, Warenkorb, Skip-Link und Footer
   auf ALLEN Seiten (Nutzerwunsch 18.10.2026: „die Korrekturen an Header und Footer
   sollen natürlich auf allen Seiten gelten“).
   Lädt VOR 10–50 (die nur auf der Startseite laufen). Die Regeln sind unverändert aus
   10-fundament, 20-oben, 40-unten und 50-a11y hierher verschoben (gleiche Selektoren,
   gleiche Reihenfolge untereinander). Keine Regel trifft Inhalte in <main>:
   - Token-Umbiegungen nur auf #app > header, [data-offcanvas] und footer.footer,
     nicht an :root (auf Unterseiten bleiben die Inhaltsfarben wie live).
   - Fokusring nur in Header, Offcanvas und Footer (auf der Startseite gilt er
     zusätzlich seitenweit über 50-a11y.css).
   Die Trust-Leiste (.benefits-bar) zählt nicht zum Footer und bleibt in 40-unten.css.
   Nur Darstellung und Semantik; kein Text, kein Bild, kein Link wird geändert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Tokens (spec-01, spec-12, ki-design-13) – neue Namen, wirken nur dort,
      wo sie benutzt werden (aus 10-fundament.css §0)
   --------------------------------------------------------------------- */
:root{
  --vx-navy:#1d4289;--vx-navy-dark:#15355A;--vx-slate:#54627d;--vx-light:#eef3fb;
  --vx-line:#dbe3ee;--vx-ink:#212429;--vx-on-navy:#cdd9ea;--vx-white:#fff;
  /* Inhaltskante = Gutter des Theme-.container (layout-6, spec-14) */
  --vx-gutter:16px;
  /* Abschnittsrhythmus: weit (Themenblöcke) / eng (zugehörige Leiste) (layout-7) */
  --vx-section:56px;--vx-tight:24px;
  /* Typo-Skala (layout-4, spec-09, spec-13) */
  --vx-h1:clamp(28px,2.6vw,38px);--vx-h2:clamp(26px,2.2vw,32px);--vx-h3:clamp(20px,1.6vw,24px);
}
@media (min-width:390px){:root{--vx-gutter:24px}}
@media (min-width:768px){:root{--vx-gutter:48px;--vx-section:72px;--vx-tight:32px}}
@media (min-width:1024px){:root{--vx-gutter:80px}}
@media (min-width:1200px){:root{--vx-section:96px;--vx-tight:40px}}

/* ---------------------------------------------------------------------
   1) Theme-Variablen in Header, Offcanvas und Footer umbiegen – dieselben Werte wie
      auf der Startseite (10-fundament.css: :root:has(body.home)), aber nur innerhalb
      dieser drei Bereiche. Die aus --hex-* abgeleiteten Theme-Variablen (--color-*,
      --wp--preset--color--*) werden am :root schon aufgelöst und deshalb hier neu
      gesetzt (wie im Schutzbereich 1b von 10-fundament). Auf der Startseite ergeben
      sich dieselben Werte wie bisher.
   --------------------------------------------------------------------- */
#app > header,
[data-offcanvas],
footer.footer{
  /* spec-01/spec-07: ein Primär-Navy statt #1e4f89 */
  --hex-1E4F89:var(--vx-navy);
  --hex-15355A:var(--vx-navy-dark);
  /* spec-15: helle Flächen Spec-Hellblau statt Neutralgrau */
  --hex-F2F5F8:var(--vx-light);
  --hex-DBE3EE:var(--vx-line);
  /* spec-02, mobil-a11y-07: Sekundärtext = Slate */
  --darkblue-600:var(--vx-slate);
  --hex-7A828A:var(--vx-slate);
  --hex-ACB5BD:var(--vx-slate);
  --darkblue-500:var(--vx-on-navy);
  /* spec-08: kein Orange (Offcanvas-Akzent, „Bestellen“-Kante) */
  --hex-CF7320:var(--vx-navy);
  --hex-E9963E:var(--vx-navy);
  /* spec-06: Radius 0 über die Theme-Tokens (Logo ist SVG, bleibt unberührt) */
  --radius-4:0px;--radius-8:0px;--radius-16:0px;--radius-40:0px;--radius-round:0px;--radius-9999:0px;
  --swiper-pagination-bullet-border-radius:0px;
  /* abgeleitete Theme-Variablen (app.css / global-styles setzen sie am :root) */
  --color-primary:var(--hex-1E4F89);--color-primary-dark:var(--hex-15355A);
  --color-neutrals-100:var(--hex-F2F5F8);--color-box-border:var(--hex-DBE3EE);
  --color-neutrals-400:var(--hex-7A828A);--color-neutrals-300:var(--hex-ACB5BD);
  --wp--preset--color--primary:var(--hex-1E4F89);--wp--preset--color--primary-dark:var(--hex-15355A);
  --wp--preset--color--neutrals-100:var(--hex-F2F5F8);--wp--preset--color--box-border:var(--hex-DBE3EE);
  --wp--preset--color--neutrals-400:var(--hex-7A828A);--wp--preset--color--neutrals-300:var(--hex-ACB5BD);
}

/* ---------------------------------------------------------------------
   2) FOOTER-Kleinzeilen (aus 10-fundament.css §2 und §5)
   --------------------------------------------------------------------- */
/* Nur im Footer: Die Bewertungs-Widgets (.ga-rev/.pe-rev) sind einbettbar; im Inhalt (weiße Fläche) sollen
   sie nicht die On-Navy-Farbe und 13 px bekommen. :where(footer.footer) hält die Spezifität wie bisher (0,1,1). */
/* Footer (global): Zahlungs-Label #374151 -> Slate (spec-02) */
body :where(footer.footer) .footer__payment-label{color:var(--vx-slate)}
/* Footer (global): Kleinzeilen ≥ 13px, Copyright-Kontrast 4,32:1 -> opacity .75 (mobil-a11y-14, mobil-a11y-07) */
body :where(footer.footer) .ga-rev__tag,body :where(footer.footer) .pe-rev__tag,body :where(footer.footer) .ga-rev__count,body :where(footer.footer) .pe-rev__count,
body :where(footer.footer) .footer__trust-sub,body :where(footer.footer) .footer__payment-label{font-size:13px}
body footer.footer .text-body-xs,
body nav.footer__legal-nav .menu .menu-item a{font-size:13px}   /* Copyright, Impressum/Datenschutz/AGB: 12px */
body footer.footer .text-body-xs.opacity-50{opacity:.75}
/* Footer liegt auf Navy-Dunkel: Sekundärtext Weiß 60 % (4,47:1 bei 13px) -> On-Navy (8,7:1) (spec-02) */
body :where(footer.footer) .footer__trust-sub,body :where(footer.footer) .ga-rev__tag,body :where(footer.footer) .pe-rev__tag,
body :where(footer.footer) .ga-rev__count,body :where(footer.footer) .pe-rev__count{color:var(--vx-on-navy)}


/* ---------------------------------------------------------------------
   3) HEADER (aus 20-oben.css „HEADER (global)“)
   --------------------------------------------------------------------- */

/* spec-03, ki-design-14: Header-Button „Bestellen“ – orange Oberkante weg, Radius 0 (alle Breiten),
   Fläche Navy, Hover Navy-Dunkel statt #0F3560 */
body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li#mega-menu-item-2972 > a.mega-menu-link,
body #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li#mega-menu-item-2972 > a.mega-menu-link {
  border-top: 0;
  border-radius: 0;
  background: var(--vx-navy);
  color: var(--vx-white);
}
body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li#mega-menu-item-2972 > a.mega-menu-link:hover,
body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li#mega-menu-item-2972.mega-toggle-on > a.mega-menu-link,
body #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li#mega-menu-item-2972:hover > a.mega-menu-link {
  background: var(--vx-navy-dark);
  color: var(--vx-white);
}
/* ki-design-14: im Desktop-Header nach Button-System – 16px/600, 48px hoch, padding 0 24px.
   !important nur bei font-weight, weil das Megamenü dort selbst !important setzt. */
@media (min-width: 1200px) {
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li#mega-menu-item-2972 > a.mega-menu-link {
    display: flex;
    align-items: center;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: 0;
  }
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li#mega-menu-item-2972 > a.mega-menu-link::before {
    margin-right: 8px;
    margin-top: 0;
    top: 0;
  }
}
/* ki-design-14: „Jetzt bestellen“ im Megamenü-Panel ebenfalls eckig (6px -> 0), Hover Navy-Dunkel */
body #mega-menu-wrap-primary_navigation .mmda-btn,
body #mega-menu-wrap-max_mega_menu_1 .mmda-btn {
  border-radius: 0;
  background: var(--vx-navy);
  font-size: 16px;
  font-weight: 600;
}
body #mega-menu-wrap-primary_navigation .mmda-btn:hover,
body #mega-menu-wrap-max_mega_menu_1 .mmda-btn:hover { background: var(--vx-navy-dark); }

/* mobil-a11y-01: Mobil-Menüknopf (Max Mega Menu Toggle) – Balken Navy statt #ddd (1,36:1 -> 9,6:1),
   Rahmen Slate statt #d1d9df (1,43:1 -> 6,1:1); Balken eckig. Selektor mit ID, sonst gewinnt das Plugin. */
body #mega-menu-wrap-primary_navigation .mega-menu-toggle { border-color: var(--vx-slate); }
body #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
body #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
body #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
  background-color: var(--vx-navy);
  border-radius: 0;
}

/* kritik-09: Der graue Verlauf am linken Rand (bis ca. 45 px, eine Bildschirmhöhe hoch) ist der
   Schlagschatten 18px 0 40px des geschlossenen Offcanvas-Menüs (position:fixed, nur um −104 % verschoben).
   Schatten weg; im offenen Zustand trennen die vorhandene 1px-Kante und der Schleier. */
body .offcanvas,
body .offcanvas__detail { box-shadow: none; }
body .offcanvas__head,
body .offcanvas__top { box-shadow: none; border-bottom: 1px solid var(--vx-line); }

/* spec-03: Offcanvas-CTA – orange Oberkante weg (alle Seiten), Button-Schrift 16px/600 ohne Sperrung */
body .offcanvas__rail .offcanvas__cta { border-top: 0; }
body .offcanvas__cta,
body .offcanvas__rail .offcanvas__cta {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  background-color: var(--vx-navy);
}
body .offcanvas__cta:hover { background-color: var(--vx-navy-dark); }

/* Nachbesserung: Offcanvas-Menüpunkte in normaler Schreibung statt Theme-Versalien (Text unverändert) */
body .offcanvas .offcanvas__item { text-transform: none; letter-spacing: 0; }

/* Nachbesserung: Keine Schatten (Spec). Sticky-Header trennt beim Scrollen mit 1px Linie statt
   Standardschatten; Megamenü-Panel und Bild im Panel mit Linie statt Schatten. */
body header.sticky.is-stuck { box-shadow: none; border-bottom: 1px solid var(--vx-line); }
body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu {
  box-shadow: none;
  border: 1px solid var(--vx-line);
}
body #mega-menu-wrap-primary_navigation .mega-sub-menu img,
body #mega-menu-wrap-primary_navigation .mmda-cta img { box-shadow: none; border-color: var(--vx-line); }

/* Nachbesserung: Desktop-Navigation und Megamenü-Panel nur noch mit Marken-Tokens
   (vorher #1E3A5F, #9FB4CB ≈ 2:1, #1E4F89, #F4F8FC, #EFF3F8, #E9EEF4, #F2F6FB, #5F7186, #1C2E42, #EAEFF5).
   Panel-Überschriften im Eyebrow-Stil statt Versalien 11,5 px. „Bestellen“ behält Weiß auf Navy
   (dessen Regel mit li#mega-menu-item-2972 ist spezifischer). */
@media (min-width: 1200px) {
  body header.sticky { border-bottom-color: var(--vx-line); }
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link { color: var(--vx-navy); }
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item:hover > a.mega-menu-link,
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: var(--vx-light);
    color: var(--vx-navy);
  }
  body #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link span.mega-indicator::after { color: var(--vx-slate); }
  body #mega-menu-wrap-primary_navigation .mmda-hl {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    color: var(--vx-slate);
  }
  body #mega-menu-wrap-primary_navigation .mmda-sq { width: 8px; height: 8px; background: var(--vx-navy); }  /* Marker-Stil */
  body #mega-menu-wrap-primary_navigation .mmda-cta { border-left-color: var(--vx-line); }
  body #mega-menu-wrap-primary_navigation .mmda-row { border-bottom-color: var(--vx-line); }
  body #mega-menu-wrap-primary_navigation .mmda-row:hover { background: var(--vx-light); }
  body #mega-menu-wrap-primary_navigation .mmda-t { color: var(--vx-navy); }
  body #mega-menu-wrap-primary_navigation .mmda-d,
  body #mega-menu-wrap-primary_navigation .mmda-cd { color: var(--vx-slate); }
  body #mega-menu-wrap-primary_navigation .mmda-ct { color: var(--vx-ink); }
}

/* Nachbesserung: Das Logo-SVG hat links ca. 12 px Leerraum (Pfad ab 19,5 von 297 bei 181 px Breite).
   Ab 1200 gleicht das Megamenü-CSS das schon aus; darunter jetzt ebenso, damit das Logo auf der
   Inhaltskante von Hero und Abschnitten steht. Logo selbst unverändert, nur verschoben. */
@media (max-width: 1199.98px) {
  body header .mainmenu-logo { margin-left: -12px; }
}
/* Nachbesserung (320 px = 400 % Zoom): Logo + Warenkorb + Menüknopf passten nicht in 320 px
   (Menüknopf endete bei x333). Logo dort 140 px breit (proportional), Leerraum-Ausgleich anteilig 9 px. */
@media (max-width: 359.98px) {
  body header .mainmenu-logo svg { width: 140px; height: auto; }
  body header .mainmenu-logo { margin-left: -9px; }
}


/* ---------------------------------------------------------------------
   4) FOOTER (aus 40-unten.css „FOOTER (global)“) – Raster und Ausrichtung bleiben
   --------------------------------------------------------------------- */

/* Brief: Spaltenüberschriften ohne Versalien, 14px */
body footer.footer .footer__heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-white);
}

/* Brief (Fließtext ≥ 14px): Footer-Links 14px in Token-Farbe auf Navy (8,7:1) */
body footer.footer .footer__cols .menu-item a,
body footer.footer .footer__contact-list a {
  font-size: 14px;
  color: var(--vx-on-navy);
}
body footer.footer .footer__cols .menu-item a:hover,
body footer.footer .footer__contact-list a:hover {
  color: var(--vx-white);
}
/* Rechtliche Kleinzeilen ≥ 13px in Token-Farbe */
body footer.footer .footer__legal-nav .menu-item a {
  font-size: 13px;
  color: var(--vx-on-navy);
}
/* Kontrast: Copyright mit opacity .5 = ca. 4,3:1 bei 12px → volle Deckkraft, --vx-on-navy */
body footer.footer p.text-body-xs {
  opacity: 1;
  font-size: 13px;
  color: var(--vx-on-navy);
}

/* Payment: Label-Farbe nach Token (Slate, vorher #374151 – Wert setzt Abschnitt 2 oben),
   Icons Slate (vorher #6b7280), eckig statt 4px-Radius. Label 14px (kein Rechtstext,
   Brief: nur Impressum/Datenschutz/AGB und © dürfen 13px haben). */
body footer.footer .footer__payment-icon {
  border-radius: 0;
}
body footer.footer .footer__payment-label {
  font-size: 14px;
  color: var(--vx-slate);
}
body footer.footer .footer__payment-icon svg {
  color: var(--vx-slate);
}

/* Trusted-Shops-Kasten eckig wie die Bewertungskästen, Kleintext 14px, Token-Farbe */
body footer.footer .footer__trust-badge {
  border-radius: 0;
}
body footer.footer .footer__trust-title { font-size: 14px; }
body footer.footer .footer__trust-sub {
  font-size: 14px;
  color: var(--vx-on-navy);
}

/* Bewertungskästen: 10/11/13px-Kleintext auf 14px, ohne Versalien, Token-Farbe
   (Sterne bleiben als Drittanbieter-Konvention unverändert). */
body footer.footer .ga-rev__tag,
body footer.footer .pe-rev__tag {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vx-on-navy);
}
body footer.footer .ga-rev__count,
body footer.footer .pe-rev__count {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--vx-on-navy);
}
body footer.footer .pe-rev__logo span {
  font-size: 14px;
}


/* ---------------------------------------------------------------------
   5) FOKUS, SKIP-LINK, KLICKZIELE in Header/Offcanvas/Footer (aus 50-a11y.css)
   --------------------------------------------------------------------- */

/* Fokusring (Brief „:focus-visible 3px Navy-Dunkel, auf Navy weiss“; mobil-a11y-02/-03) in Header,
   Offcanvas und Footer. :where() hält die Spezifität wie bisher bei :root body :focus-visible (0,2,1),
   knapp über der Theme-Regel .offcanvas :focus-visible (2px, primary). Seitenweit nur auf der
   Startseite (50-a11y.css). */
:root body :where(#app > header,[data-offcanvas],footer.footer) :focus-visible{outline:3px solid var(--vx-navy-dark,#15355A);outline-offset:2px}

/* scroll-padding-top (Fokus/Sprunglinks unter dem Sticky-Header) bleibt NUR auf der Startseite (50-a11y.css):
   Auf Unterseiten setzt das Theme schon scroll-margin-top (Artikel-Inhaltsverzeichnis 112 px, FAQ 120 px), beides
   addiert sich; die Landingpage /adhs-ausweis-bestellen/ hat einen eigenen Header ohne Sticky-Theme-Header. */

/* Auf Navy (Footer) weiss. Spezifitaet wie vorher (0,4,1) in der gemeinsamen :is()-Regel; die Startseiten-
   Flaechen (Hero-Box, Aktuell-Leiste, Teaser, News-Aufmacher) bleiben in 50-a11y.css. */
:root body :where(footer).footer.footer :focus-visible{outline-color:var(--vx-white,#fff)}

/* mobil-a11y-01 (Header): Max-Mega-Menu setzt bei Tastaturbedienung einen hellblauen Ring (#109cde, ID-Selektoren) – auf Marken-Ring umstellen */
#mega-menu-wrap-primary_navigation#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation :focus-visible,
#mega-menu-wrap-primary_navigation#mega-menu-wrap-primary_navigation .mega-menu-toggle :focus-visible{outline:3px solid var(--vx-navy-dark,#15355A);outline-offset:2px}

/* mobil-a11y-02 (offenes Menue): Zeilen-Buttons gehen ueber die volle Breite (Container overflow:hidden) -> Ring nach innen; Navy-CTA mit weissem Ring */
:root body .offcanvas :is(.offcanvas__item,.offcanvas__cols a):focus-visible{outline-offset:-3px}
:root body .offcanvas .offcanvas__cta:focus-visible{outline-color:var(--vx-white,#fff);outline-offset:-6px}

/* Logo-Link im Header beginnt bei y=0: der Ring nach aussen wurde oben vom Seitenrand abgeschnitten -> nach innen
   (Bildmarke sitzt mit eigenem Weissraum im SVG, der 3-px-Ring beruehrt sie nicht) */
:root body header a.mainmenu-logo:focus-visible{outline-offset:-3px}

/* ===== Skip-Link bleibt (mobil-a11y-02): ausserhalb des Bildes, beim Fokus als Navy-Flaeche oben links ===== */
/* Statt 1x1-px-Clip (zaehlte als Mini-Klickziel) echte Groesse >= 44 px, nur nach oben verschoben */
body #app > a[href="#main"]{position:fixed;top:8px;left:8px;z-index:1000;display:inline-flex;align-items:center;width:auto;height:auto;min-height:44px;margin:0;padding:12px 20px;clip-path:none;overflow:visible;white-space:nowrap;background:var(--vx-navy,#1d4289);color:var(--vx-white,#fff);font-size:16px;font-weight:600;line-height:1.25;text-decoration:none;transform:translateY(-200%)}
body #app > a[href="#main"]:focus{transform:none}
body #app > a[href="#main"]:focus-visible{outline:3px solid var(--vx-navy-dark,#15355A);outline-offset:2px}

/* ===== mobil-a11y-11: Klickziele >= 44 px auf Touch-Geraeten (Header, Offcanvas, Footer) ===== */
@media (max-width:1023.98px),(pointer:coarse){
  /* Footer-Menues: jede Zeile mind. 44 px hoch, Listenabstand dafuer auf 0 */
  footer.footer .widget_nav_menu .menu{row-gap:0}
  footer.footer .widget_nav_menu .menu-item > a{display:flex;align-items:center;min-height:44px}
  /* Rechtliche Links: auch schmale Eintraege („AGB“, 26 px) mind. 44 px breit; Text bleibt linksbuendig,
     die Flaeche waechst nach rechts (AGB ist der letzte Eintrag, sichtbarer Abstand bleibt gleich) */
  footer.footer nav.footer__legal-nav .menu .menu-item > a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  footer.footer .footer__contact-list a{min-height:44px}
  /* Warenkorb im Header: 32 x 32 -> 44 x 44, Symbol bleibt mittig */
  header a.cart-customlocation{min-width:44px;min-height:44px;justify-content:center}
  /* Offenes Menue: Schliessen/Zurueck 36-40 px -> 44 x 44 px, Logo-Link 36 -> 44 px hoch (Logo selbst bleibt 36 px).
     Kopfzeilen dafuer 4 px weniger Innenabstand oben/unten, damit sie so hoch bleiben wie vorher und die Liste nicht rutscht. */
  body .offcanvas .offcanvas__icon-btn{min-width:44px;min-height:44px;flex-basis:44px}
  body .offcanvas .offcanvas__home{min-height:44px}
  body .offcanvas .offcanvas__head{padding-top:12px;padding-bottom:12px}
  body .offcanvas .offcanvas__top{padding-top:12px;padding-bottom:12px}
}
/* Menue-Knopf (mobil-a11y-01): Das Theme oeffnet bei Klick auf die ganze 48-px-Leiste; der Button selbst war per
   scale(.8) nur 32 x 37 px. Skalierung auf das Symbol verlagern, damit auch der Button die Leiste fuellt.
   Mit body davor (1,3,1): Das Megamenue setzt transform:scale(.8) mit (1,3,0); so gewinnt die Regel unabhaengig
   von der Reihenfolge der Stylesheets. */
@media (max-width:1199.98px){
  body #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated{transform:none;min-width:44px;min-height:44px}
  body #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box{transform:scale(.8)}
}