/* Bis 28.10.2026 «../../../public/marke.css» - im Browser /public/marke.css,
   eine Fehlerseite statt eines Stilblatts, auf jeder Seite der Website (a8449117). */
@import '/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(--orange-hell);box-shadow:inset 3px 0 0 var(--orange,#E84C15)}

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

/* Die Felder rechts in der Leiste gleich hoch (Ticket c3622c36).
 *
 * Ralf, 04.11.2026: «hier haben wir gleich nebeneinander drei verschiedene
 * boxen grössen». Gemessen waren es 31.5, 41.5 und 39.5 px: der Rahmen von
 * My BikeHub kam zur Höhe dazu, die Sprachwahl hat kleinere Schrift. Jetzt
 * eine Höhe aus den Stufen, Rahmen eingerechnet, für Startseite, Garage
 * und Werkstatt-Seite; Breiten bleiben nach Inhalt. Am Telefon 36 px:
 * dort stehen Sprachwahl, My BikeHub und Menüsymbol nebeneinander, und
 * keines wird kleiner als vorher.
 *
 * Die Schrift steht über die Zeilenhöhe in der Mitte, nicht über eine
 * eigene Anzeige: jede Seite blendet die Felder selbst ein und aus (die
 * Garage zeigt My BikeHub zwischen 900 und 1100 px nicht). Nur wo eine
 * Seite gar nichts sagt, braucht ein Link «inline-block», damit die Höhe
 * greift; das steht in einer Ebene, und jede Regel der Seite geht ihr vor.
 */
@layer leiste { .nav .my, .nav .cta { display: inline-block } }
.nav .navr{align-items:center}
.nav .lang,.nav .my,.nav .cta,.nav .burger{box-sizing:border-box;height:calc(var(--raum-6) + var(--raum-2))}
.nav .my,.nav .cta{padding-top:0;padding-bottom:0;vertical-align:middle}
.nav .my{line-height:calc(var(--raum-6) + var(--raum-2) - 2px)}
.nav .cta{line-height:calc(var(--raum-6) + var(--raum-2))}
.nav .lang b,.nav .lang span{padding-top:0;padding-bottom:0;line-height:calc(var(--raum-6) + var(--raum-2) - 2px)}
.nav .burger{justify-content:center}
@media (max-width:900px){
  .nav .lang,.nav .my,.nav .burger{height:calc(var(--raum-6) + var(--raum-1))}
  .nav .my,.nav .lang b,.nav .lang span{line-height:calc(var(--raum-6) + var(--raum-1) - 2px)}
}