/* =============================================================================
   NOBLECLEAN RUNDE 8 (25.09.2026) - geladen von novamira-sandbox/nobleclean-r8.php
   1. Ratgeber-Hub /ratgeber/: einheitliche Inhaltsbreite
   2. Alte Beitraege (body.nc-post-legacy): zentrierte Lesespalte, H1
   3. Slider/Marquee Mobil-Fix
   4. Header-Untermenues
   ========================================================================== */

/* 1. Ratgeber-Hub: alle Abschnitte auf die Hero-Breite (1240 px) begrenzen und zentrieren */
.nc-ratgeber-wrap > section > .nc-shell {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.nc-ratgeber-wrap .nc-sec-header p { max-width: 760px; }

/* 2. Alte Beitraege: verschachtelte Kadence-Zeilen/Spalten zu einer zentrierten Lesespalte (780 px) */
html body.nc-post-legacy .entry-content-wrap:not(#nc-x) {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout:not(#nc-x) {
  max-width: 812px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout .kt-row-column-wrap:not(#nc-x) {
  display: block !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout .wp-block-kadence-rowlayout:not(#nc-x),
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout .kt-row-layout-inner:not(#nc-x),
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout .wp-block-kadence-column:not(#nc-x),
html body.nc-post-legacy .entry-content > .wp-block-kadence-rowlayout .kt-inside-inner-col:not(#nc-x) {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
html body.nc-post-legacy .entry-content .wp-block-kadence-rowlayout.alignfull:not(#nc-x) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  background: transparent !important;
}
html body.nc-post-legacy .entry-content h1.nc-post-h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #0A192F !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 18px !important;
  max-width: 780px !important;
  text-wrap: balance;
}


/* 2b. Alte Beitraege: Theme-Container (1180 px, links) auf volle Breite, angehaengte Bloecke auf Spaltenbreite */
html body.nc-post-legacy .content-wrap:not(#nc-x),
html body.nc-post-legacy #main:not(#nc-x),
html body.nc-post-legacy .content-container.site-container:not(#nc-x),
html body.nc-post-legacy article.entry:not(#nc-x),
html body.nc-post-legacy .entry-content:not(#nc-x) {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body.nc-post-legacy .entry-content > *:not(.wp-block-kadence-rowlayout):not(script):not(style):not(#nc-x) {
  max-width: 812px !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 3. Slider/Marquee Mobil-Fix */
/* ==========================================================================
   NC SLIDER / MARQUEE MOBILE FIX (2026-09)
   Scope: .nc-logo-marquee-track (Logo-Trust-Band, Startseite + /kontakt/)
          .nc-gtm-track          (Footer-Referenz-Marquee, alle Seiten)
   Load order: must be printed AFTER the stylesheet "nc-motion-interactions-css"
   (Additional CSS / wp-custom-css or a late inline style is fine; the
   selectors below also win on specificity, so order is only a safety net).
   prefers-reduced-motion: reduce is intentionally NOT overridden.
   ========================================================================== */

/* 1) ROOT CAUSE FIX - Logo marquee frozen / half-empty on phones (<=767px).
      nc-motion-interactions-css sets, inside @media (max-width: 767px),
      [class*="marquee"] { max-width: 100vw !important; width: 100% !important;
      overflow: hidden !important; contain: paint !important; }
      That selector also hits the moving TRACK (.nc-logo-marquee-track), so the
      track is clamped to the viewport width and clipped. translateX(-50%) then
      only moves ~195px in 75s and the right half of the band turns empty.
      Restore the intrinsic track width (specificity 0,2,0 > 0,1,0). */
.nc-logo-marquee-container .nc-logo-marquee-track {
  max-width: none !important;
  width: max-content !important;
  overflow: visible !important;
  contain: none !important;
}

/* 2) Sticky :hover on touch screens - a tap on the band leaves :hover set
      until the user taps somewhere else, which keeps the marquee paused.
      Only real mouse/trackpad devices may pause on hover. */
@media (hover: none), (pointer: coarse) {
  .nc-logo-marquee-container .nc-logo-marquee-track:hover,
  .nc-gtm-marquee-outer .nc-gtm-track:hover {
    animation-play-state: running !important;
  }
}

/* 3) Cosmetic: seamless loop for the footer marquee. With "gap: 16px" the
      -50% keyframe end is 8px off the true period (36 cards / 35 gaps), which
      causes a small jump on every loop. Move the gap into a per-card margin so
      both halves are exactly equal. */
.nc-gtm-marquee-outer .nc-gtm-track {
  gap: 0 !important;
}
.nc-gtm-marquee-outer .nc-gtm-track > .nc-gtm-card {
  margin-right: 16px !important;
}

/* 4. Header-Untermenues */
/* =============================================================================
   NOBLECLEAN - HEADER-UNTERMENUES "UEBERSICHTLICHER & GROESSER"   (r8, 2026-09)
   -----------------------------------------------------------------------------
   Scope      : ausschliesslich Custom-Header .nc-header-wrapper (Desktop-Panels
                .nc-mega-menu / .nc-about-menu / .nc-bezirke-menu) und den
                Off-Canvas-Drawer #nc-mobile-drawer-wrap. Kein Markup-Eingriff.
   Hinweis    : Die Seite nutzt NICHT die Kadence-Navigation (.header-navigation
                .sub-menu), sondern einen eigenen Header (nc-header-mega-2026-css,
                components.css, motion-interactions-css + Inline-Styles im <body>).
                Alle Bestandsregeln arbeiten mit !important, daher hier ebenfalls
                !important + hoehere Spezifitaet (>= 0,3,0 bzw. ID-basiert), damit
                die Datei auch dann gewinnt, wenn sie VOR den Body-Inline-Styles
                (#nc-mega-menu-solid-override, #nc-global-footer-2026-css) laedt.
   Farben     : Navy #071320 (Site-Token --nc-navy), Mint #00D285, Teal-Dark
                #007A50 (Text-Akzent, 5.4:1 auf Weiss), Gold #F5B301, Weiss.
                Mint wird NUR als Flaeche/Balken genutzt (1.99:1 auf Weiss =
                als Textfarbe ungeeignet).
   Deployment : nach nc-header-mega-2026-css einbinden (oder Customizer >
                Zusaetzliches CSS), danach WP-Rocket-Cache leeren.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Lokale Tokens (nur im Header gueltig)
   ------------------------------------------------------------------------ */
.nc-header-wrapper,
#nc-mobile-drawer-wrap {
  --ncs-navy: #071320;
  --ncs-mint: #00D285;
  --ncs-accent-text: #007A50;
  --ncs-gold: #F5B301;
  --ncs-ink: #1E293B;
  --ncs-muted: #475569;
  --ncs-line: #E2E8F0;
  --ncs-hover-bg: #F1F5F9;
  --ncs-soft-bg: #F8FAFC;
  --ncs-radius: 16px;
  --ncs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   0b. Farb-Reparatur: components.css setzt fuer a[href*="ueber-uns"],
       a[href*="vertrauen"], a[href*="subunternehmer"] global
       "-webkit-text-fill-color:#0369A1 !important" (Spezifitaet 0,3,2). Das
       vererbt sich auf Titel UND Beschreibung -> 4 von 6 "Ueber uns"-Kacheln und
       mehrere Drawer-Links erscheinen blau statt Navy (uneinheitlich); ebenso
       der Top-Level-Trigger "Ueber uns".
       Hier wird die Fuellfarbe wieder an die normale Textfarbe gekoppelt.
   ------------------------------------------------------------------------ */
html body .nc-header-wrapper .nc-main-navbar .nc-nav-menu a[href],
html body .nc-header-wrapper .nc-main-navbar .nc-nav-menu a[href] *,
html body #nc-mobile-drawer-wrap .nc-drawer-nav a[href],
html body #nc-mobile-drawer-wrap .nc-drawer-nav a[href] * {
  -webkit-text-fill-color: currentColor !important;
}

/* ===========================================================================
   A. DESKTOP-DROPDOWNS (ab 1025 px; <= 1024 px zeigt die Seite den Burger)
   ======================================================================== */
@media (min-width: 1025px) {

  /* A1. Einheitlicher Anker: alle drei Panels werden an der Navbar (max. 1280 px,
         zentriert) ausgerichtet statt am jeweiligen <li>. Damit kann kein Panel
         bei 1025-1440 px rechts/links aus dem Viewport ragen (vorher: Bezirke-
         Panel 860 px um den Trigger zentriert -> Ueberlauf-Risiko rechts). */
  .nc-header-wrapper .nc-main-navbar {
    position: relative !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-item:is(.nc-has-mega, .nc-has-about, .nc-has-bezirke) {
    position: static !important;
  }

  /* A2. Panel-Grundgeruest (geschlossen) */
  .nc-header-wrapper .nc-main-navbar .nc-nav-item > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
    top: calc(100% + 6px) !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ncs-line) !important;
    border-top: 3px solid var(--ncs-mint) !important;       /* Marken-Akzent */
    border-radius: var(--ncs-radius) !important;
    box-shadow: 0 24px 60px -12px rgba(7, 19, 32, 0.28),
                0 4px 14px -2px rgba(7, 19, 32, 0.08) !important;
    padding: 28px !important;
    z-index: 10000 !important;   /* innerhalb des Header-Stacking-Contexts (Header = 9999) */
    font-family: var(--nc-font-body, 'Inter', -apple-system, sans-serif) !important;
    transform-origin: 50% 0 !important;
    transform: translateX(-50%) translateY(8px) !important;
    transition: opacity 160ms ease-out,
                transform 200ms var(--ncs-ease),
                visibility 160ms !important;
  }

  /* Breiten: gross genug fuer 16-px-Schrift, nie breiter als Navbar - 32 px */
  .nc-header-wrapper .nc-main-navbar .nc-nav-item > .nc-mega-menu {
    width: min(1180px, calc(100% - 32px)) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-item > .nc-about-menu {
    width: min(780px, calc(100% - 32px)) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-item > .nc-bezirke-menu {
    width: min(1020px, calc(100% - 32px)) !important;
  }

  /* A3. Offen: Hover, Tastatur (:focus-within) und JS-Klasse .is-active */
  .nc-header-wrapper .nc-main-navbar .nc-nav-item:is(:hover, :focus-within, .is-active) > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* A5. Trigger-Zustand + Chevron (vorher drehte der Chevron bei "Ueber uns" nicht) */
  /* "Ueber uns"-Trigger war durch components.css (a[href*="ueber-uns"]) blau */
  html body .nc-header-wrapper .nc-main-navbar .nc-nav-menu a.nc-nav-link[href] {
    color: var(--ncs-navy) !important;
  }
  html body .nc-header-wrapper .nc-main-navbar .nc-nav-menu .nc-nav-item:is(:hover, :focus-within, .is-active) > a.nc-nav-link[href] {
    color: var(--ncs-accent-text) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-link:focus-visible {
    outline: 2px solid var(--ncs-navy) !important;
    outline-offset: 2px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-item .nc-chevron {
    font-size: 0.7rem !important;
    color: var(--ncs-muted) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-nav-item:is(:hover, :focus-within, .is-active) > .nc-nav-link .nc-chevron {
    transform: rotate(180deg) !important;
    color: var(--ncs-accent-text) !important;
  }

  /* ---------------------------------------------------------------------
     A6. Gemeinsame Elemente: Spaltenkoepfe, Trust-Leiste
     ------------------------------------------------------------------ */
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-mega-col {
    gap: 6px !important;
    padding: 12px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-mega-col-header {
    gap: 10px !important;
    padding-bottom: 12px !important;
    margin-bottom: 6px !important;
    border-bottom: 2px solid var(--ncs-line) !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-col-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 11px !important;        /* ueberschreibt inline font-size:10px (Bezirke) */
    background: #E6F8F1 !important;
    color: var(--ncs-accent-text) !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-mega-col-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--ncs-navy) !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) :is(.nc-mega-bottom-bar, .nc-about-bottom-bar) {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ncs-line) !important;
    gap: 14px !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) .nc-mega-trust-chips {
    font-size: 14px !important;
    gap: 18px !important;
    color: var(--ncs-muted) !important;
  }

  /* ---------------------------------------------------------------------
     A7. LEISTUNGEN (Mega-Menue, 4 Spalten, 18 Links)
     ------------------------------------------------------------------ */
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-mega-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.08fr) !important;
    gap: 20px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-mega-links-list {
    gap: 2px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-mega-link-item a {
    min-height: 48px !important;
    justify-content: center !important;
    align-items: stretch !important;                 /* components.css zentrierte Eintraege ohne Badge */
    text-align: left !important;
    gap: 3px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    transform: none !important;                     /* kein "Springen" beim Hover */
    transition: background-color 140ms ease, box-shadow 140ms ease !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-link-title-row {
    flex-wrap: wrap !important;                      /* Badge bricht um statt Titel zu quetschen */
    justify-content: flex-start !important;
    gap: 4px 8px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-link-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
    color: var(--ncs-navy) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-micro-desc {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: var(--ncs-muted) !important;              /* 7.6:1 */
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-badge-pill {
    font-size: 11px !important;
    padding: 2px 8px !important;
    line-height: 1.5 !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-featured-price-tag {
    font-size: 1.3rem !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-featured-price-tag span {
    font-size: 13px !important;
  }
  /* CTA im Panel: vorher Navy auf Orange #C2410C = 2.9:1 (WCAG-Fehler) -> Gold/Navy 10:1 */
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-btn-mega-cta {
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-size: 15px !important;
    background: var(--ncs-gold) !important;
    color: var(--ncs-navy) !important;
    box-shadow: 0 4px 14px rgba(245, 179, 1, 0.3) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-btn-mega-cta:hover {
    background: var(--ncs-navy) !important;
    color: #FFFFFF !important;
  }

  /* ---------------------------------------------------------------------
     A8. UEBER UNS (6 Kacheln, 2 Spalten)
     ------------------------------------------------------------------ */
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-header {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    gap: 16px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-kicker {
    font-size: 12px !important;
    color: var(--ncs-accent-text) !important;       /* vorher #00F5A0 = 1.4:1 */
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-title {
    font-size: 16px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 16px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-item {
    min-height: 64px !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    transform: none !important;
    transition: background-color 140ms ease, box-shadow 140ms ease !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin-top: 0 !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-link-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-link-desc {
    font-size: 14px !important;                      /* vorher 11.5 px */
    line-height: 1.45 !important;
    margin-top: 3px !important;
    color: var(--ncs-muted) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-badge-hiring {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-all-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 15px !important;
    color: var(--ncs-accent-text) !important;
  }

  /* ---------------------------------------------------------------------
     A9. WIENER BEZIRKE (23 Bezirke in 4 Regionen)
     ------------------------------------------------------------------ */
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-bezirke-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  /* inline "gap:2px"-Wrapper der Linklisten */
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-mega-col > div:not(.nc-mega-col-header) {
    gap: 4px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-district-link {
    min-height: 44px !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;                  /* vorher 9999px (motion.css) */
    font-size: 15.5px !important;                    /* vorher 13 px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--ncs-ink) !important;
    transform: none !important;
    transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-district-nr {
    flex-shrink: 0 !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    background: #ECFDF5 !important;
    color: var(--ncs-accent-text) !important;       /* 5.1:1 */
    font-size: 13px !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: none !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-district-link:is(:hover, :focus-visible) .nc-district-nr {
    background: var(--ncs-mint) !important;
    color: var(--ncs-navy) !important;               /* 9.4:1 */
  }
  /* "Buero Wien"-Adressbox (inline 0.72-0.75rem) */
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-mega-col > div > div > span {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  /* "Alle 23 Bezirke Hub"-Button + "Interaktive Bezirkskarte"-Link (inline-Styles) */
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-bezirke-grid a[href="/einsatzgebiete-wien/"] {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-bezirke-grid a[href="/einsatzgebiete-wien/"]:is(:hover, :focus-visible) {
    background: var(--ncs-mint) !important;
    color: var(--ncs-navy) !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-mega-bottom-bar a[href="/einsatzgebiete-wien/"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 15px !important;
    color: var(--ncs-accent-text) !important;
  }

  /* ---------------------------------------------------------------------
     A10. Einheitlicher Hover-/Fokus-Zustand fuer alle Panel-Links:
          helle Flaeche + 3-px-Mintbalken links + Teal-Dark-Text.
          Fokus: 2-px-Navy-Outline (vorher #00F5A0 = 1.4:1, nicht sichtbar).
     ------------------------------------------------------------------ */
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-link-item a, .nc-about-item, .nc-district-link):is(:hover, :focus-visible) {
    background: var(--ncs-hover-bg) !important;
    box-shadow: inset 3px 0 0 var(--ncs-mint) !important;
    color: var(--ncs-accent-text) !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-link-item a, .nc-about-item):is(:hover, :focus-visible) :is(.nc-link-title, .nc-about-link-title) {
    color: var(--ncs-accent-text) !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) a:focus-visible {
    outline: 2px solid var(--ncs-navy) !important;
    outline-offset: 2px !important;
  }
  .nc-header-wrapper .nc-main-navbar :is(.nc-mega-link-item a, .nc-about-item, .nc-district-link):active {
    transform: none !important;
    background: #E2E8F0 !important;
  }

  /* Etwas kompakter zwischen 1025 und 1199 px (4 Spalten bleiben lesbar) */
  @media (max-width: 1199px) {
    .nc-header-wrapper .nc-main-navbar .nc-nav-item > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
      padding: 22px !important;
    }
    .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-mega-grid,
    .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-bezirke-grid {
      gap: 12px !important;
    }
    .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-mega-col {
      padding: 8px !important;
    }
    .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-link-title,
    .nc-header-wrapper .nc-main-navbar .nc-about-menu .nc-about-link-title {
      font-size: 15px !important;
    }
    .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-district-link {
      font-size: 15px !important;
      padding: 8px 10px !important;
    }
  }

  /* A11. Niedrige Viewports (steht bewusst am Ende von Abschnitt A, damit es die Basiswerte ueberschreibt) (z. B. 1280x720, 1366x768): Panel scrollt intern
         statt unter den Bildschirmrand zu laufen. overflow-x:hidden verhindert,
         dass die breite ::before-Hover-Bruecke eine Querscroll-Leiste erzeugt. */
  @media (max-height: 860px) {
    .nc-header-wrapper .nc-main-navbar .nc-nav-item > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
      max-height: calc(100vh - 170px) !important;
      max-height: calc(100dvh - 170px) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      overscroll-behavior: contain !important;
      scrollbar-width: thin;
    }
    /* Leistungen-Kurzbeschreibung auf 1 Zeile kuerzen (nur optisch; der volle
       Text bleibt im DOM/Accessibility-Tree) -> spart ca. 90 px Panelhoehe */
    .nc-header-wrapper .nc-main-navbar .nc-mega-menu .nc-micro-desc {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 1 !important;
      line-clamp: 1;
      overflow: hidden !important;
    }
    /* Vertikal verdichten, damit 1366x768 / 1280x720 moeglichst ohne Scrollen passt */
    .nc-header-wrapper .nc-main-navbar .nc-nav-item > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
      padding: 20px 24px !important;
    }
    .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) :is(.nc-mega-bottom-bar, .nc-about-bottom-bar) {
      margin-top: 12px !important;
      padding-top: 12px !important;
    }
    .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-mega-col-header {
      padding-bottom: 8px !important;
      margin-bottom: 4px !important;
    }
    .nc-header-wrapper .nc-main-navbar :is(.nc-mega-menu, .nc-bezirke-menu) .nc-col-icon-wrap {
      width: 32px !important;
      height: 32px !important;
    }
    .nc-header-wrapper .nc-main-navbar .nc-bezirke-menu .nc-district-link {
      min-height: 40px !important;               /* weiterhin > 24 px (WCAG 2.5.8) */
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
  }
}

/* ===========================================================================
   B. MOBILE OFF-CANVAS-DRAWER (#nc-mobile-drawer-wrap, Burger <= 1024 px)
   ======================================================================== */
#nc-mobile-drawer-wrap .nc-mobile-drawer-content {
  max-width: 420px !important;
  padding: 16px 20px 24px !important;
}

/* Schliessen-Button: vorher 38x38 (ID-Regel schlug die 48-px-Token-Regel) */
#nc-mobile-drawer-wrap #nc-close-drawer-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
}

#nc-mobile-drawer-wrap .nc-drawer-nav {
  gap: 0 !important;
}

/* B1. Hauptzeilen (Accordion-Trigger + direkte Links): 18 px, >= 56 px hoch,
       sichtbare Trennlinie (vorher #F8FAFC/#F1F5F9 = praktisch unsichtbar) */
#nc-mobile-drawer-wrap .nc-drawer-nav .nc-accordion-trigger,
#nc-mobile-drawer-wrap .nc-drawer-nav .nc-drawer-link {
  min-height: 56px !important;
  padding: 12px 8px 12px 12px !important;
  gap: 12px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--ncs-navy) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ncs-line) !important;
  border-radius: 0 !important;
  transform: none !important;
}
#nc-mobile-drawer-wrap .nc-drawer-nav .nc-drawer-link[href="/kundenportal/"] {
  color: var(--ncs-accent-text) !important;
}
#nc-mobile-drawer-wrap .nc-drawer-nav :is(.nc-accordion-trigger, .nc-drawer-link):is(:hover, :active) {
  background: var(--ncs-soft-bg) !important;
  color: var(--ncs-accent-text) !important;
}
#nc-mobile-drawer-wrap .nc-drawer-nav .nc-accordion-trigger[aria-expanded="true"] {
  background: var(--ncs-soft-bg) !important;
  color: var(--ncs-navy) !important;
  border-bottom-color: transparent !important;
}

/* B2. Groesserer Aufklapp-Indikator: 36-px-Kreis, offen = Mint */
#nc-mobile-drawer-wrap .nc-accordion-trigger .nc-acc-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  background: var(--ncs-hover-bg) !important;
  color: var(--ncs-navy) !important;
  transition: transform 220ms var(--ncs-ease), background-color 160ms ease !important;
}
#nc-mobile-drawer-wrap .nc-accordion-trigger .nc-acc-icon svg {
  width: 20px !important;
  height: 20px !important;
}
#nc-mobile-drawer-wrap .nc-accordion-trigger[aria-expanded="true"] .nc-acc-icon {
  background: var(--ncs-mint) !important;
  color: var(--ncs-navy) !important;
  transform: rotate(180deg) !important;
}

/* B3. Untermenue: eingerueckt, Mintbalken links, 17 px, >= 48 px je Zeile */
#nc-mobile-drawer-wrap .nc-mobile-sublist.is-open {
  margin: 0 0 10px 0 !important;
}
#nc-mobile-drawer-wrap .nc-mobile-sublist .nc-mobile-sublist-inner {
  gap: 0 !important;
  margin-left: 12px !important;
  padding: 4px 0 !important;
  background: var(--ncs-soft-bg) !important;
  border-left: 3px solid var(--ncs-mint) !important;
  border-radius: 0 12px 12px 0 !important;
}
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink {
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--ncs-ink) !important;              /* 13:1 auf #F8FAFC */
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ncs-line) !important;
  transform: none !important;
  box-shadow: none !important;
}
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink:last-child {
  border-bottom: 0 !important;
}
/* Erster Link = "Uebersicht ->" (inline fett) */
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink:first-child {
  color: var(--ncs-navy) !important;
  font-weight: 700 !important;
}
/* Kontrast-Fix: motion.css faerbt "Privatkunden-Pakete" #00D285 (1.9:1) */
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink[href="/reinigungspakete/"],
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink[href="/karriere/"] {
  color: var(--ncs-accent-text) !important;
  font-weight: 700 !important;
}
#nc-mobile-drawer-wrap .nc-mobile-sublist a.nc-drawer-sublink:is(:hover, :active) {
  background: #FFFFFF !important;
  color: var(--ncs-accent-text) !important;
  box-shadow: inset 3px 0 0 var(--ncs-mint) !important;
}

/* B4. Fokus sichtbar; negativer Offset, weil .nc-mobile-sublist overflow:hidden hat */
#nc-mobile-drawer-wrap :is(.nc-accordion-trigger, .nc-drawer-link, .nc-drawer-sublink, .nc-drawer-cta-primary, .nc-drawer-phone-btn, #nc-close-drawer-btn):focus-visible {
  outline: 2px solid var(--ncs-navy) !important;
  outline-offset: -2px !important;
}

/* B5. Footer des Drawers: groessere Ziele */
#nc-mobile-drawer-wrap .nc-mobile-drawer-footer a.nc-drawer-cta-primary {
  min-height: 52px !important;
  font-size: 17px !important;
}
#nc-mobile-drawer-wrap .nc-mobile-drawer-footer a.nc-drawer-phone-btn {
  min-height: 48px !important;
  font-size: 16px !important;
}
#nc-mobile-drawer-wrap .nc-mobile-drawer-footer .nc-drawer-trust-note {
  font-size: 12.5px !important;
  color: var(--ncs-muted) !important;
}

/* ===========================================================================
   C. REDUZIERTE BEWEGUNG
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nc-header-wrapper .nc-main-navbar .nc-nav-item > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu),
  .nc-header-wrapper .nc-main-navbar .nc-nav-item:is(:hover, :focus-within, .is-active) > :is(.nc-mega-menu, .nc-about-menu, .nc-bezirke-menu) {
    transform: translateX(-50%) !important;          /* nur Einblenden, keine Bewegung */
    transition: opacity 100ms linear, visibility 100ms !important;
  }
  .nc-header-wrapper .nc-main-navbar .nc-chevron,
  #nc-mobile-drawer-wrap .nc-acc-icon,
  #nc-mobile-drawer-wrap .nc-mobile-sublist,
  #nc-mobile-drawer-wrap .nc-mobile-drawer-content,
  #nc-mobile-drawer-wrap .nc-drawer-sublink,
  #nc-mobile-drawer-wrap .nc-drawer-close {
    transition: none !important;
  }
  #nc-mobile-drawer-wrap .nc-drawer-close:hover {
    transform: none !important;
  }
}