/* Hauptnavigation (Pill-Leiste) auf Smartphone und Tablet: Hinweis, dass seitlich gewischt werden kann.
   1) Die Leiste läuft bis zum Bildschirmrand (statt 20/32 px davor abgeschnitten zu werden): Das nächste Element ragt sichtbar herein.
   2) Am rechten Rand liegt ein dezenter Verlauf mit Pfeil, solange es weitere Menüpunkte gibt (gesteuert von assets/js/navigation.js).
   Design, Größen und Abstände der Pills bleiben unverändert; ab 1024 px ändert sich nichts. */
/* Mobiles Menü (Dialog): Der Fokus wird beim Öffnen auf den Dialog selbst gesetzt (assets/js/navigation.js).
   Der Dialog ist kein Bedienelement, deshalb ohne Fokusrahmen; die Bedienelemente darin behalten ihren. */
.mnav:focus { outline: none; }

/* Farben von Verlauf und Pfeil: wie die Leiste (hell: --sand · Artikelseite im dunklen Schema „night“: --n-bg) */
.pillbar { --nav-bg: #ECE5D9; --nav-fade: rgba(236, 229, 217, 0); --nav-arrow: var(--ink, #2B2721); }
.night .pillbar { --nav-bg: #171E1B; --nav-fade: rgba(23, 30, 27, 0); --nav-arrow: #F1EAE0; }

@media (max-width: 1023px) {
  .pillbar { position: relative; }
  .pills {
    margin: 0 -20px;           /* gleicht den Seitenrand von .wrap aus → Leiste bis zum Bildschirmrand */
    padding-left: 20px;        /* erstes Element bleibt an seiner Position */
    padding-right: 0;
    scroll-padding-inline: 20px;
  }
  .pills::after { content: ""; flex: 0 0 12px; } /* 8 px Lücke + 12 px = 20 px Abstand nach dem letzten Element */

  .pillbar::before,
  .pillbar::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .pillbar::before {           /* Verlauf in der Farbe der Leiste */
    top: 0; right: 0; bottom: 0; width: 64px;
    background: linear-gradient(90deg, var(--nav-fade), var(--nav-bg) 80%);
  }
  .pillbar::after {            /* Pfeil › */
    top: 50%; right: 16px;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-top: 1.5px solid var(--nav-arrow);
    border-right: 1.5px solid var(--nav-arrow);
    transform: rotate(45deg);
  }
  .pillbar[data-mehr]::before { opacity: 1; }
  .pillbar[data-mehr]::after { opacity: .75; animation: pillbar-nudge 1.4s ease-in-out 3; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pills { margin: 0 -32px; padding-left: 32px; scroll-padding-inline: 32px; }
  .pills::after { flex-basis: 24px; } /* 8 px Lücke + 24 px = 32 px */
  .pillbar::before { width: 80px; }
  .pillbar::after { right: 22px; }
}
@keyframes pillbar-nudge {
  0%, 100% { transform: translateX(0) rotate(45deg); }
  50% { transform: translateX(4px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pillbar[data-mehr]::after { animation: none; }
  .pillbar::before, .pillbar::after { transition: none; }
}