/* article-nav.css — volle Website-Navigation für Artikelseiten.
   Portiert aus styles.css (.nav__* Regeln), GESCOPT unter .article-nav,
   damit nichts in andere Seiten leakt. Artikelseiten laden NICHT styles.css
   (würde das Cream-:root von article.css überschreiben) → diese Datei trägt
   die Nav-Styles. Farben hartcodiert dunkel (wie die Startseiten-Dropdowns),
   nur var(--accent)/var(--font-*) kommen aus article.css.
   SYNC-HINWEIS: Ändert sich .nav__dropdown* in styles.css, hier nachziehen. */

.article-nav__inner { gap: 24px; }

.article-nav .nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.article-nav .nav__links > a,
.article-nav .nav__dropdown__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
  color: #F5F5F2;
  font-weight: 500;
  transition: color .15s;
}
.article-nav .nav__links > a:hover,
.article-nav .nav__dropdown__trigger:hover { color: #fff; }

.article-nav .nav__dropdown { position: relative; }
.article-nav .nav__dropdown__chev {
  width: 12px; height: 12px;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s; opacity: 0.7;
}
.article-nav .nav__dropdown:hover .nav__dropdown__chev,
.article-nav .nav__dropdown:focus-within .nav__dropdown__chev { transform: rotate(180deg); opacity: 1; }

.article-nav .nav__dropdown__menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 280px;
  background: #0F1B2D;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px -8px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  z-index: 60;
}
.article-nav .nav__dropdown:hover .nav__dropdown__menu,
.article-nav .nav__dropdown:focus-within .nav__dropdown__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .15s, transform .15s, visibility 0s;
}
/* Rechte Dropdowns am rechten Rand ausrichten → kein Viewport-Überlauf.
   (In der Verifikation messen; clippt auch das mittlere, dessen Menü ebenfalls
   right-alignen.) */
.article-nav .nav__dropdown:last-of-type .nav__dropdown__menu { left: auto; right: -16px; }

.article-nav .nav__dropdown__item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #F5F5F2;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  transition: background .15s, color .15s;
}
.article-nav .nav__dropdown__item:hover { background: rgba(255,255,255,0.08); color: var(--accent); }
.article-nav .nav__dropdown__item--all {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(245,245,242,0.55);
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-radius: 0; margin-bottom: 4px;
}
.article-nav .nav__dropdown__item--all:hover { color: var(--accent); background: transparent; }
.article-nav .nav__dropdown__item__title { display: block; font-weight: 500; }
.article-nav .nav__dropdown__item__sub {
  display: block; font-size: 12px; color: rgba(245,245,242,0.55); margin-top: 2px;
}
.article-nav .nav__dropdown__item:hover .nav__dropdown__item__sub { color: rgba(245,245,242,0.75); }

/* Such-Icon → Link zur Startseiten-Suche */
.article-nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; color: rgba(245,245,242,0.85);
  transition: color .15s;
}
.article-nav__search:hover { color: var(--accent); }
.article-nav__search svg { width: 18px; height: 18px; }

/* Mobil: Dropdown-Menüs aus, Trigger werden zu einfachen Links; die Leiste
   bleibt schlank in EINER Zeile und scrollt bei Bedarf horizontal (kein Umbruch
   → keine überhohe Sticky-Leiste, kein JS). */
@media (max-width: 760px) {
  .article-nav .nav__dropdown__chev { display: none; }
  .article-nav .nav__dropdown__menu { display: none; }
  .article-nav__inner { flex-wrap: nowrap; gap: 14px; }
  .article-nav__brand { flex-shrink: 0; }
  .article-nav .nav__links {
    flex-wrap: nowrap;
    min-width: 0;            /* erlaubt Schrumpfen unter Inhaltsbreite → Scroll greift */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;   /* Firefox: Scrollbalken aus */
    gap: 18px;
  }
  .article-nav .nav__links::-webkit-scrollbar { display: none; } /* WebKit: Scrollbalken aus */
  .article-nav .nav__links > a,
  .article-nav .nav__dropdown__trigger { white-space: nowrap; padding: 12px 0; }
  .article-nav__search { flex-shrink: 0; }
}