/* Gemeinsame Navigationsleiste für alle öffentlichen Seiten
   (Übersicht, Nutzen, Über mich, Einzelperson, Mannschaft, Ernährung).

   Bewusst eine geteilte Datei statt drei Kopien: die Leiste muss auf allen
   Seiten identisch aussehen und an derselben Stelle sitzen, sonst wirkt der
   Wechsel zwischen den Seiten wie ein Sprung auf eine fremde Website.

   Die Datei wird relativ eingebunden ("assets/nav.css" bzw.
   "../assets/nav.css"), damit die Seiten auch per Doppelklick aus dem
   Dateimanager funktionieren, nicht nur über die laufende App. */

/* ===== Gemeinsame Grundfarbe =====
   Jede der vier Seiten hatte vorher ihren eigenen Ton: #111111 auf Startseite
   und Vorteile, #0a0a0a auf schwarzem Grund bei "Über mich", #0E0D0B bei den
   Preisen. Beim Wechsel zwischen den Seiten sah man den Sprung. Die Farbe steht
   deshalb hier — an einer Stelle für alle. Wer sie ändert, ändert sie überall.

   Wichtig: die Seiten dürfen `background` auf html/body nicht mehr selbst
   setzen, sonst gilt wieder ihr eigener Wert. */
html, body { background: #111111; }

.tfs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(14, 13, 11, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(160, 136, 112, 0.3);
  font-family: 'DM Sans', system-ui, sans-serif;
  /* Nicht von der Seite erben: uebermich.html setzt kein line-height auf body,
     die drei anderen setzen 1.5. Dadurch war die Leiste dort 61px statt 64.8px
     hoch — gleiche Schriftgrösse, aber sichtbar flacher. Der Wert gehört
     hierher, damit die Leiste auf allen vier Seiten dieselbe Höhe hat. */
  line-height: 1.5;
}

.tfs-nav__inner {
  /* War 900px und reichte für fünf Links. Mit dem sechsten ("Mannschaft") passte
     die Zeile auf keiner Bildschirmbreite mehr — gemessen: Wortmarke + Links
     brauchen 906px. */
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Wortmarke links, führt immer zurück auf die Übersicht.
   Schreibweise wie im Logo: "TIM" hell, "E FOR SPORT" in Gold. Der Farbwechsel
   sitzt mitten im Wort, deshalb kein gap — der schöbe zwischen "TIM" und dem
   goldenen Teil eine sichtbare Lücke ein. */
.tfs-nav__home {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: #f0f0ed;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 0;
}
.tfs-nav__home span { color: #A08870; }
.tfs-nav__home:hover, .tfs-nav__home:focus-visible { color: #A08870; }

.tfs-nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Sechs Links passen ab ca. 1000px Fensterbreite nicht mehr in eine Zeile.
     Statt die Seite seitwärts zu schieben, bricht die Leiste dann auf zwei
     Zeilen um. */
  flex-wrap: wrap;
  row-gap: 2px;
}

.tfs-nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  /* Gleiche Grösse wie die Kacheltitel auf der Startseite (18.5px / 15.5px /
     14px). Die Stufen unten sind deshalb auf dieselben Breiten gesetzt wie
     dort — wer eine ändert, muss die andere mitziehen. */
  font-size: 18.5px;
  font-weight: 500;
  color: rgba(240, 240, 237, 0.65);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.tfs-nav__link:hover, .tfs-nav__link:focus-visible {
  color: #f0f0ed;
  background: rgba(160, 136, 112, 0.12);
}

/* Die Seite, auf der man gerade ist — sonst weiss niemand, wo er steht. */
.tfs-nav__link[aria-current="page"] {
  color: #A08870;
  background: rgba(160, 136, 112, 0.14);
  font-weight: 600;
}

/* Ab hier wird es mit sechs Links knapp — die Leiste dünnt sich in Stufen aus,
   statt die Seite seitwärts zu schieben. Grössenstufe wie die Kacheltitel. */
@media (max-width: 639px) {
  .tfs-nav__inner { padding: 8px 12px; gap: 4px; }
  .tfs-nav__link { padding: 7px 8px; font-size: 15.5px; }
}

/* Unter 760px stehen Wortmarke und Links so dicht beieinander, dass sie sich
   fast berühren. Die Wortmarke entfällt darunter — sie führt ohnehin an
   dieselbe Stelle wie der Link "Übersicht" daneben.

   Die Grenze hing bei vier Links bei 640px; ab dem fünften ("Ernährung")
   braucht es mehr Platz. Seit dem sechsten ("Mannschaft") stehen die Links hier
   auf zwei Zeilen — deshalb zentriert statt über die volle Breite verteilt:
   `space-between` zöge die zwei Links der unteren Zeile an die Ränder.
   Wer die Schriftgrösse ändert, sollte den Abstand hier nachmessen. */
@media (max-width: 759px) {
  .tfs-nav__home { display: none; }
  .tfs-nav__links {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .tfs-nav__link { padding: 7px 6px; }
}

/* Auf den schmalsten Geräten (~320px) noch eine Stufe kleiner. Sechs Links sind
   hier enger als die vier, für die diese Stufe ursprünglich gedacht war —
   deshalb gilt ab hier die sonst geltende Kopplung an die Kacheltitel-Grössen
   nicht mehr. */
@media (max-width: 359px) {
  .tfs-nav__link { padding: 6px 2px; font-size: 13px; }
}