/* ============================================================
   Gemeinsame Menueleiste fuer alle Seiten (seit 02.10.2026)
   Wird als letztes Stylesheet im Kopf geladen und gewinnt deshalb
   gegen die Seiten-eigenen Regeln und gegen fable-live.css.
   Ab 1281 Pixel: eine Reihe, kein Umbruch, kompakte Abstaende
   (8 Pixel, Schrift 12,5 Pixel; die Seiten sind auf 1240 Pixel
   begrenzt, breitere Bildschirme bringen also keinen Platz).
   Bis 1280 Pixel: Burger-Menue (vorher erst ab 900 Pixel), weil
   seit dem Reiter SmartWeb360 die Reihe darunter nicht mehr passt.
   Neue Reiter: Breite bei 1281 Pixel pruefen, sonst Grenze anheben.
   ============================================================ */
@media (min-width:1281px){
  nav.top #navLinks{display:flex!important;align-items:center;gap:8px!important;flex-wrap:nowrap!important}
  nav.top #navLinks > a,
  nav.top #navLinks > .nav-item > a{white-space:nowrap;margin-left:0!important;font-size:12.5px!important}
  nav.top #navLinks > .nav-item{margin-left:0!important;flex-shrink:0}
  nav.top #navLinks > a.btn-nav{padding:10px 12px!important;font-size:12.5px!important}
}
@media (max-width:1280px){
  nav.top .nav-toggle{display:block}
  nav.top .nav-links#navLinks{position:absolute;top:100%;left:0;right:0;transform:none;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;flex-wrap:nowrap!important;background:rgba(6,13,26,0.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);padding:8px 28px 22px;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .3s,visibility .3s}
  nav.top .nav-links#navLinks.open{max-height:85vh;overflow-y:auto;opacity:1;visibility:visible}
  nav.top #navLinks a{margin-left:0!important;padding:15px 2px;font-size:16px!important;white-space:normal;border-bottom:1px solid rgba(255,255,255,0.07)}
  nav.top #navLinks a.btn-nav{margin-top:14px;padding:16px!important;font-size:15px!important;text-align:center;justify-content:center;border-bottom:0}
  nav.top #navLinks .nav-item{display:block;width:100%;margin-left:0!important}
  nav.top #navLinks .nav-item > a{width:100%;justify-content:space-between}
  nav.top #navLinks .nav-item > a::after{transform:rotate(45deg)}
  nav.top #navLinks .nav-sub{position:static;min-width:0;margin:0;padding:0 0 4px 16px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none}
  nav.top #navLinks .nav-sub::before{display:none}
  nav.top #navLinks .nav-sub a{font-size:15px!important;padding:13px 2px;border-radius:0;border-bottom:1px solid rgba(255,255,255,0.07)}
}

/* Reiter abwechselnd Blau/Orange (seit 04.10.2026).
   Gezaehlt wird die Position in der Leiste selbst, deshalb zaehlt
   "KI-Schulungen" mit Aufklappmenue (.nav-item) als ein Reiter.
   Die alte Regel in fable-live.css zaehlte innerhalb von .nav-item
   und machte die ersten drei Reiter alle blau. */
nav.top #navLinks > a:not(.btn-nav),
nav.top #navLinks > .nav-item > a{font-weight:600}
nav.top #navLinks > a:not(.btn-nav):nth-child(odd),
nav.top #navLinks > .nav-item:nth-child(odd) > a{color:#38BDF8!important}
nav.top #navLinks > a:not(.btn-nav):nth-child(even),
nav.top #navLinks > .nav-item:nth-child(even) > a{color:#FB923C!important}
nav.top #navLinks > a:not(.btn-nav):hover,
nav.top #navLinks > .nav-item > a:hover{color:#fff!important}