/* =========================================================
   NCC MOBILE FIX PACK (nur Handy/Tablet <= 991px)
   PC bleibt unverändert!
   ========================================================= */

@media (max-width: 991px){

  /* Kein horizontales Scrollen */
  html, body{
    overflow-x: hidden !important;
  }

  /* =====================================================
     1) OBEN: Logo-Band weg (nur im Header!)
     ===================================================== */
  header .logo,
  header .navbar-brand,
  header .logo img{
    display: none !important;
  }

  /* Header bleibt als kleine Leiste da (für Burger) */
  header,
  header.page-header,
  #slide-nav,
  .page-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #0f131a !important;
    background-image: none !important;
  }

  /* Header-Inhalt: rechts nur Burger */
  .header-row,
  header .header-row{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
  }

  /* =====================================================
     2) Burger-Menü sichtbar machen (immer!)
     ===================================================== */
  .navbar-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    background: rgba(255,255,255,.10) !important;
  }

  /* altes Icon ausblenden */
  .navbar-toggle i{
    display: none !important;
  }

  /* eigenes Burger-Zeichen (weiß) */
  .navbar-toggle::before{
    content: "☰";
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Bootstrap-Fallback (falls icon-bar verwendet wird) */
  .navbar-toggle .icon-bar{
    background: #fff !important;
  }

  /* =====================================================
     3) OFFCANVAS Menü (nutzt #slidemenu)
     Menü kommt rein, wenn body.menu-open gesetzt ist
     ===================================================== */
  #slidemenu{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    height: 100vh !important;
    width: min(86vw, 340px) !important;

    background: #0f131a !important;

    transform: translateX(-110%) !important;
    transition: transform .25s ease !important;

    z-index: 100000 !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    padding: calc(16px + env(safe-area-inset-top)) 14px 18px !important;
  }

  body.menu-open #slidemenu{
    transform: translateX(0) !important;
  }

  /* Overlay (darkout-menu ist bei dir schon im HTML) */
  .darkout-menu{
    display: none !important;
  }
  body.menu-open .darkout-menu{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 99999 !important;
  }

  /* Close-Button im Menü */
  #slidemenu .close-menu{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    color: #fff !important;
    font-size: 22px !important;
    padding: 6px 2px 12px !important;
  }

  /* Menü-Links lesbar */
  #slidemenu .navbar-nav > li > a{
    color: #fff !important;
    font-weight: 900 !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }
  #slidemenu .navbar-nav > li > a:hover{
    background: rgba(255,255,255,.08) !important;
  }

  /* Damit Kunden ALLES finden: Untermenüs auf Mobile sichtbar + eingerückt */
  #slidemenu .dropdown-menu,
  #slidemenu .dropdown-menu1{
    position: static !important;
    float: none !important;
    display: block !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 6px 0 10px !important;
  }

  #slidemenu .dropdown-menu > li > a{
    padding-left: 26px !important;
    font-weight: 800 !important;
    color: rgba(255,255,255,.92) !important;
  }

  #slidemenu .dropdown-menu1 > li > a{
    padding-left: 42px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.82) !important;
  }

  #slidemenu .caret,
  #slidemenu .ecaret{
    display: none !important;
  }

  /* =====================================================
     4) Texte auf Handy wieder LESBAR (verschoben/zu hell fix)
     - wir nehmen "Opacity/Filter" raus
     ===================================================== */
  #pageContent,
  #pageContent *{
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
  }

  /* Wenn bei dir der Hintergrund weiß ist: Text dunkel erzwingen */
  #pageContent p,
  #pageContent li,
  #pageContent span,
  #pageContent div{
    color: #111111 !important;
  }

  /* =====================================================
     5) Call Button nicht über Footer legen
     ===================================================== */
  .call-button{
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    z-index: 999999 !important;
  }
  body.menu-open .call-button{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* ===============================
   PRINZIP-KACHEL – REPARATUR STATT AUSTAUSCH
   =============================== */
.ncc-prinzip-pill{
  display: inline-block;
  margin: 14px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

}