/* Last-loaded mobile fixes for Android and narrow tablet widths. */

/* === Einheitlicher Scrollbalken auf ALLEN Seiten ====================
   schmal (6px), Schiene dunkel, Daumen hellblau. Verhindert
   ausserdem Layout-Sprung zwischen kurzen und langen Seiten. */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #0086d6 #0A1520;
}
/* Chrome / Edge / Safari / Opera */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0A1520; }
::-webkit-scrollbar-thumb { background: #0086d6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0067b1; }

.chevron {
  display: none !important;
}

.mob-arrow {
  display: inline-flex !important;
  color: #0A1520 !important;
  opacity: 1 !important;
}

.hamburger {
  display: none !important;
}

@media (min-width: 901px) {
  .hamburger,
  .hamburger::before,
  .hamburger::after,
  .hamburger span {
    display: none !important;
    content: none !important;
  }

  /* Einheitlicher Navbar-Look auf allen Seiten.
     position:fixed verhindert Layout-Sprung bei unterschiedlichem Browser-Zoom. */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 5% !important;
    gap: clamp(14px, 2.2vw, 34px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    z-index: 200 !important;
  }

  body {
    padding-top: 72px !important;
  }

  /* Hero startet direkt unter Navbar — body-padding-top aufheben */
  .hero,
  .page-hero {
    margin-top: -72px !important;
  }
  .nav-logo {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .nav-logo img {
    height: clamp(57px, 4.8vw, 66px) !important;
    width: auto !important;
    max-width: clamp(140px, 18vw, 240px) !important;
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
  }
  .nav-main {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    position: static !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 72px !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  .nav-item {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .nav-item > a {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 clamp(5px, .72vw, 12px) !important;
    font-size: clamp(.72rem, .92vw, .88rem) !important;
    font-weight: 700 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .chevron {
    display: inline-flex !important;
  }
  #ni-kar > a,
  #ni-karriere > a,
  .nav-item > a[href="karriere.php"] {
    width: auto !important;
    min-width: 0 !important;
  }
  .nav-item > a[href="kontakt.html"] {
    width: auto !important;
    min-width: 0 !important;
  }
  .nav-item > a::after {
    left: 50% !important;
    right: auto !important;
    width: 112px !important;
    transform-origin: center !important;
    transform: translateX(-50%) scaleX(0) !important;
  }
  .nav-item:hover > a::after,
  .nav-item.active > a::after {
    transform: translateX(-50%) scaleX(1) !important;
  }
  .nav-item:hover > a,
  .nav-item.active > a {
    font-weight: 700 !important;
  }
  .dropdown,
  .dropdown a,
  .dropdown a:hover {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 16px !important;
    gap: 12px !important;
    justify-content: space-between !important;
    box-shadow: 0 3px 16px rgba(10, 21, 32, .08) !important;
  }

  body {
    padding-top: 56px !important;
  }

  .nav-logo {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  .nav-logo img {
    height: 51px !important;
    max-width: 140px !important;
    background: transparent !important;
  }

  .nav-main,
  .nav-right {
    display: none !important;
  }

  /* Hamburger-Container - Corporate Look wie alten-germany.de */
  .hamburger {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 320 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  /* Original-Spans als die 3 Strich-Linien wiederverwenden (sauber animierbar) */
  .hamburger span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    width: 26px !important;
    height: 1.5px !important;
    background: #1a1a1a !important;
    border-radius: 1px !important;
    margin: 0 !important;
    transform-origin: center !important;
    transform: translateX(-50%) !important;
    transition: top .25s ease .1s, opacity .15s ease, transform .25s ease !important;
  }
  .hamburger span:nth-child(1) { top: 16px !important; }
  .hamburger span:nth-child(2) { top: 22px !important; }
  .hamburger span:nth-child(3) { top: 28px !important; }

  /* ::before/::after deaktivieren, damit nur die spans rendern */
  .hamburger::before,
  .hamburger::after {
    content: none !important;
    background: none !important;
  }

  /* Offen-Zustand: sauberes X */
  body.mob-open .hamburger span {
    transition: top .2s ease, opacity .15s ease, transform .25s ease .15s !important;
  }
  body.mob-open .hamburger span:nth-child(1) {
    top: 22px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
  body.mob-open .hamburger span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(0) !important;
  }
  body.mob-open .hamburger span:nth-child(3) {
    top: 22px !important;
    transform: translateX(-50%) rotate(-45deg) !important;
  }

  #mob-nav {
    max-width: 88vw !important;
  }
}

@media (max-width: 760px) {
  .hero,
  .page-hero {
    min-height: auto !important;
    height: auto !important;
    padding: 76px 0 44px !important;
  }

  .hero-inner,
  .page-hero-inner,
  .section-inner,
  .breadcrumb-inner,
  .facts-band-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-inner h1,
  .page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  .hero-inner p,
  .page-hero p,
  .sec-desc {
    max-width: 100% !important;
  }

  .hero-cards,
  .leistung-grid,
  .service-grid,
  .branche-grid,
  .kontakt-grid,
  .ueber-grid,
  .facts-grid,
  .visa-grid,
  .press-list,
  .release-list {
    grid-template-columns: 1fr !important;
  }

  .tabs {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab {
    min-width: 220px !important;
  }

  .service-card,
  .branche-card,
  .contact-card,
  .leistung-card,
  .hero-card,
  .job-card,
  .press-card,
  .release-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  footer {
    width: 100% !important;
  }
}

/* Codex 2026-05-24: finaler Hamburger-Fix nach UTF-8-Wiederherstellung. */
@media (min-width: 901px) {
  .hamburger,
  .hamburger span,
  .hamburger::before,
  .hamburger::after { display: none !important; content: none !important; background: none !important; border: 0 !important; }
}
@media (max-width: 900px) {
  .hamburger { display: inline-flex !important; width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; margin-left: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; position: relative !important; }
  .hamburger::before, .hamburger::after { display: none !important; content: none !important; background: none !important; }
  .hamburger span { display: block !important; position: static !important; width: 28px !important; height: 2px !important; min-height: 2px !important; margin: 0 !important; flex: 0 0 2px !important; border-radius: 2px !important; background: #003f73 !important; opacity: 1 !important; transform: none !important; transform-origin: center !important; transition: transform .25s ease, opacity .2s ease !important; }
  body.mob-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  body.mob-open .hamburger span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  body.mob-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
}
/* Codex 2026-05-24: einheitliche blaue Hero-Farben fuer Unterseiten. */
.page-hero { color: #fff !important; }
.page-hero::before, .page-hero::after { display: none !important; content: none !important; background: none !important; opacity: 0 !important; }
.page-hero h1 em, .page-hero em { color: #00a3e0 !important; text-decoration: none !important; font-style: normal !important; }
.page-hero p:not(.page-hero-label), .page-hero p:last-child { color: rgba(255,255,255,.88) !important; }

/* Codex 2026-06-07: stabile mobile Navbar fuer alle Seiten. */
.navbar .chevron {
  color: #64748b !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.navbar .nav-item:hover > a .chevron,
.navbar .nav-item.active > a .chevron {
  color: #0086d6 !important;
}

.mob-parent {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 64px !important;
  position: relative !important;
  overflow: hidden !important;
}

.mob-parent .mob-link-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mob-toggle {
  width: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid #edf2f7 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1e293b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font: inherit !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mob-toggle:hover,
.mob-toggle:focus-visible,
.mob-toggle.sub-open,
.mob-toggle.open {
  background: #f4f8fb !important;
  color: #0086d6 !important;
  outline: none !important;
}

.mob-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform-origin: center !important;
  transition: transform .22s ease, color .2s ease !important;
}

.mob-toggle.sub-open .mob-arrow,
.mob-toggle.open .mob-arrow,
.mob-link.sub-open .mob-arrow,
.mob-link.open .mob-arrow {
  transform: rotate(180deg) !important;
  color: #0086d6 !important;
}

.mob-link {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.mob-link:not(.mob-link-main) .mob-arrow {
  margin-left: auto !important;
}

.mob-sub {
  width: 100% !important;
  box-sizing: border-box !important;
}

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

body.mob-open #mob-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Inhalte erscheinen unmittelbar; lange gestaffelte Reveal-Verzoegerungen vermeiden. */
.reveal {
  transition-duration: .24s !important;
  transition-delay: 0s !important;
}

@media (min-width: 901px) {
  .navbar .hamburger,
  .navbar .hamburger span,
  .navbar .hamburger::before,
  .navbar .hamburger::after {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .navbar {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 18px !important;
    gap: 0 !important;
  }

  .navbar .nav-main,
  .navbar .nav-right {
    display: none !important;
  }

  .navbar .nav-logo {
    height: 72px !important;
    min-height: 72px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .navbar .nav-logo img {
    width: auto !important;
    height: 40px !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }

  .navbar .hamburger {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .navbar .hamburger span {
    display: block !important;
    position: static !important;
    width: 28px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    flex: 0 0 2px !important;
    border-radius: 2px !important;
    background: #003f73 !important;
  }
}

@media (max-width: 420px) {
  .navbar {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 16px !important;
  }

  .navbar .nav-logo {
    height: 68px !important;
    min-height: 68px !important;
  }

  .navbar .nav-logo img {
    height: 34px !important;
    max-width: 135px !important;
  }
}