/* Vorschlag A — TEXTROLLE
   Keine Pille. Die Punkte stehen frei und groß wie eine Plakatzeile.
   Beim Überfahren rollt der Text nach oben weg, eine orange Kopie
   kommt von unten nach. Der aktive Punkt trägt einen orangen Balken. */

header nav{
  margin-left:auto;display:flex;align-items:center;
  gap:clamp(16px,2vw,34px);
  height:auto;padding:0;border:0;border-radius:0;
  background:none;backdrop-filter:none;
}
header nav a{
  position:relative;display:inline-flex;align-items:center;
  height:auto;padding:7px 0;border-radius:0;
  background:none;box-shadow:none;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,1.6vw,23px);letter-spacing:.015em;
  text-transform:uppercase;color:#fff;
}
header nav a:hover,header nav a:focus-visible,
header nav a[aria-current="page"]{background:none;box-shadow:none;color:#fff}

header nav a .roll{display:block;position:relative;overflow:hidden;line-height:1.06}
header nav a .roll span{display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
header nav a .r2{position:absolute;left:0;top:100%;color:var(--orange)}
header nav a:hover .roll span,
header nav a:focus-visible .roll span{transform:translateY(-100%)}

header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
header nav a:hover::after,
header nav a:focus-visible::after,
header nav a[aria-current="page"]::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  header nav a .roll span{transition:none}
  header nav a:hover .roll span{transform:none}
  header nav a:hover .r1{color:var(--orange)}
}

/* Muss hier stehen, nicht nur in nav.css: Diese Datei wird später geladen und
   ihr display:flex würde die dortige Ausblendregel sonst überstimmen. */
@media(max-width:700px){
  header nav{display:none}
}