@import '../../../public/marke.css';
/* Der orange Strich unter dem Menuepunkt.
 *
 * Er stand nur in bikepass-info.html - darum leuchtete er auch nur dort.
 * Die Startseite setzte die Klasse beim Scrollen brav, aber es gab keine
 * Regel, die etwas gezeichnet haette; auf garage.html war der Link
 * markiert, ebenfalls ohne Regel. Jetzt steht er an einer Stelle, und
 * jede Seite mit der Leiste holt ihn sich hier.
 *
 * Gezeichnet als ::after, nicht als border-bottom: ein Rahmen braucht
 * Platz, und der aktive Punkt waere gegen die anderen verrutscht.
 */
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--orange,#E84C15);opacity:0;transition:opacity .18s}
.nav nav a.on{color:var(--petrol,#00678A)}
.nav nav a.on::after{opacity:1}

/* Aufgeklappt auf dem Handy stehen die Punkte untereinander und haben
   schon eine Trennlinie unter sich. Dort markiert ein Balken links. */
.nav nav.open a::after{display:none}
.nav nav.open a.on{color:var(--orange2,#FF7A4A);box-shadow:inset 3px 0 0 var(--orange,#E84C15)}

@media (prefers-reduced-motion:reduce){.nav nav a::after{transition:none}}