/* SCENARIUM – Schrittnavigation auf schmalen Bildschirmen (Handy).
   Zeile 1: Marke + Darstellungs-Umschalter · Zeile 2: die Arbeitsschritte als gleich breite Stepper-Spalten
   (Nummer oben, Bezeichnung darunter, dünne Verbindungslinie zwischen den Nummern).
   Nach dem Seiten-Stylesheet laden, damit diese Regeln greifen. */
@media (max-width: 640px) {
  .pnav .pnav-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 0 12px; min-height: 0; }
  .pnav .pnav-brand { flex: 1 0 calc(100% - 48px); border-right: 0; margin: 0; padding: 10px 0 8px; font-size: 14px; }
  .pnav .pnav-brand img { width: 26px; height: 26px; }
  .pnav .theme-btn { flex: none; margin-left: 0; width: 34px; height: 34px; padding: 0; justify-content: center; }

  .pnav .pnav-in > a:not(.pnav-brand) {
    order: 2; position: relative; flex: 1 1 0; min-width: 22%; align-self: stretch;
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px;
    padding: 4px 1px 11px; border-radius: 0; background: none; box-shadow: none;
    font-size: 10.5px; line-height: 1.2; letter-spacing: -.01em; text-align: center; hyphens: manual; overflow-wrap: normal;
  }
  .pnav .pnav-in > a:not(.pnav-brand):hover { background: none; }
  .pnav .pnav-in > a:not(.pnav-brand) b { width: 26px; height: 26px; font-size: 12px; flex: none; }
  .pnav .pnav-in > a:not(.pnav-brand) em { display: none; }
  /* Verbindungslinie vom vorigen Schritt bis kurz vor die eigene Nummer */
  .pnav .pnav-in > a:not(.pnav-brand) + a::before {
    content: ""; position: absolute; top: 17px; left: calc(-50% + 18px); right: calc(50% + 18px);
    height: 1px; background: rgba(255, 255, 255, .2);
  }
  /* aktiver Schritt: Verlaufsbalken unter der Bezeichnung */
  .pnav .pnav-in > a.on:not(.pnav-brand)::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(120deg, #8b5cf6 0%, #6366f1 45%, #06b6d4 100%);
  }
}