/* ============================================================
   Seitenkopf, Navigation und Fusszeile
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ---------- Kopfbereich ---------- */

.seiten-kopf {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.kopf-innen {
  max-width: 1140px;
  margin: 0 auto;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
}

.marken-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Damit der Vereinsname darin kuerzen kann statt die Kopfzeile zu
     sprengen - siehe .marken-titel und .marken-block weiter unten. */
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 5px 9px 5px 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.marken-knopf:hover { background: var(--marke-lighter); border-color: var(--border); }

/* Vereinswappen. Max hat am 18.08. eine saubere Fassung geliefert
   (flache Farben, transparent, 99 px) - die ersetzt sowohl das
   Pin-Foto als auch meinen SVG-Nachbau. Quadratisch, deshalb feste
   Höhe UND Breite. */
.wappen {
  height: 40px;
  width: 40px;
  object-fit: contain;
  flex: none;
  display: block;
}

/* Max' Vorgabe: voller Vereinsname, kein Zusatz "Schiedsrichter-Abteilung"
   darunter - das stand klein und unruhig in der Ecke. */
.marken-titel {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.2;
  /* Von den beiden Zeilen im Kopf ist das die, die nachgeben darf: der
     Vereinsname steht auf jeder Seite derselbe, der Seitenname darunter
     ist der, den man gerade braucht. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haupt-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}
.haupt-nav a {
  color: var(--marke-hell);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 8px;
  /* 44px Mindesthöhe für Fingerbedienung. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.haupt-nav a:hover { background: var(--marke-lighter); }
.haupt-nav .nav-deaktiviert {
  min-height: 44px;
  padding: 7px 11px;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  color: #6b7280;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.05;
  background: #f3f4f6;
  cursor: not-allowed;
}
.nav-deaktiviert small {
  margin-top: 3px;
  color: #8b5e00;
  font-size: .61rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Zwei Staerken, weil es zwei Aussagen sind:
   "page" = genau diese Seite. "true" = dieser Bereich, aber eine andere
   Seite - vorlagen.html unter "Unterlagen", entscheiden.html hinter "Zum
   Quiz".

   Bis zum 03.09.2026 traf die Regel nur "page". Damit war "true" eine
   Angabe, die Vorleseprogramme vorlasen und sehende Leute nicht sahen -
   also genau die Haelfte dessen, wofuer sie gesetzt wurde. */
.haupt-nav a[aria-current] {
  color: var(--marke-dunkel);
  font-weight: 700;
}
.haupt-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); }
.haupt-nav a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--border); }

/* Nicht auf dem Aufruf-zum-Quiz: der ist eine runde Pille, ein Strich an
   ihrer Unterkante sieht aus wie ein Fehler. Auf schmalen Bildschirmen
   verlaesst er die Navigation ohnehin, dort griff die Regel nie. */
.haupt-nav a.nav-anmelden[aria-current] { box-shadow: none; }

/* Der Aufruf zum Quiz steht im HTML in der Navigation, wird von
   src/ui/kopf-navigation.js aber in die Kopfzeile gehaengt - sonst
   verschwindet er auf dem Handy im Burgermenue (Max am 30.08.2026: "Dass
   man zum Quiz nur ueber dieses Dropdown-Menue kommt, finde ich auch noch
   irgendwie ein bisschen bloed").

   Deshalb bringt er seit dem 30.08.2026 alles selbst mit, was er vorher
   von ".haupt-nav a" geerbt hat - ausserhalb der Navigation greift die
   Regel nicht mehr. */
.nav-anmelden {
  background: var(--marke);
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  font-size: .85rem;
}
.nav-anmelden:hover { background: var(--marke-dunkel) !important; }

/* Menüknopf für schmale Bildschirme. */
.nav-knopf {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px; height: 44px;
  cursor: pointer;
  color: var(--marke-hell);
  align-items: center;
  justify-content: center;
}

.nav-striche { width: 18px; display: grid; gap: 4px; }
.nav-striche i { height: 2px; border-radius: 2px; background: currentColor; display: block; }
.nav-quiz-kurz { display: none; }

@media (max-width: 960px) {
  .nav-knopf { display: inline-flex; }
  .haupt-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 14px 14px;
    gap: 2px;
  }
  .haupt-nav.offen { display: flex; }
  .haupt-nav .nav-deaktiviert {
    align-items: flex-start;
    padding: 9px 13px;
  }
  /* Der Quiz-Knopf steht neben dem Kontoknopf, nicht im Burgermenue.
     "margin-left: auto" sitzt hier und nicht am Kontobereich: er ist von
     den beiden der linkere, und nur der vorderste Auto-Rand darf den
     freien Platz schlucken - sonst reisst er die Gruppe auseinander.
     obmann.html hat keinen Quiz-Knopf; dort springt der Kontobereich ein
     (siehe stil/anmeldung.css). */
  .nav-anmelden { order: 0; margin-left: auto; padding: 8px 13px !important; }
}

/* ---------- Name der aktuellen Seite ---------- */

/* Max am 03.09.2026: "dass man oben halt immer den Namen stehen hat, auf
   welcher Seite man gerade ist." Eingesetzt wird er von
   src/ui/kopf-navigation.js, gelesen aus dem Reiter mit
   aria-current="page" - hier steht nur, wie er aussieht.

   Der Knopf, der bis dahin an dieser Stelle stand, ist ersatzlos
   entfallen: er beantwortete "wie komme ich weg", und das tut das Wappen
   daneben laengst.

   Der Block bekommt bewusst KEIN "min-width: 0". Dadurch ist seine
   Mindestbreite die des Seitennamens - wird der Platz eng, kuerzt der
   Vereinsname darueber, der Seitenname nie. */
.marken-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.seiten-name {
  /* Buendig unter dem Vereinsnamen: Wappen (40) + Abstand (10) +
     Innenabstand des Wappen-Knopfes (6). */
  padding-left: 56px;
  margin-top: -3px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  display: none;
}

/* Auf schmalen Bildschirmen faellt der Einzug weg. Bei 375 px teilen sich
   Wappen, Vereinsname, Seitenname, "Zum Quiz", Kontoknopf und Burgermenue
   eine einzige Zeile - 56 px Vorlauf sind dort der Unterschied zwischen
   "passt" und "passt nicht". Der Name rueckt dann unter das Wappen statt
   unter den Vereinsnamen; die zweite Zeile bleibt er trotzdem.

   Steht bewusst HINTER der Grundregel: Media Queries erhoehen die
   Spezifitaet nicht, es entscheidet die Reihenfolge. */
@media (max-width: 960px) {
  .marken-titel { display: none; }
  .marken-knopf { padding: 4px; }
  .marken-block { flex: none; }
  .kopf-innen.hat-seiten-name {
    min-height: 84px;
    padding-bottom: 24px;
    position: relative;
  }
  .seiten-name {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: .8rem;
  }
}

@media (max-width: 430px) {
  .nav-quiz-lang { display: none; }
  .nav-quiz-kurz { display: inline; }
}

/* ---------- Fußbereich ---------- */

/* Von Anthrazit auf ein helles Grau umgestellt - der schwarze Balken am
   Seitenende zog optisch stark nach unten. */
.seiten-fuss { background: var(--marke-lighter); color: var(--muted); margin-top: 44px; border-top: 1px solid var(--border); }
.fuss-innen { max-width: 1140px; margin: 0 auto; padding: 24px 20px; font-size: .78rem; line-height: 1.7; }
.fuss-innen a { color: var(--marke-hell); text-decoration: none; margin-right: 16px; font-weight: 500; }
.fuss-innen a:hover { text-decoration: underline; }
/* opacity entfernt: mischte den Text auf 4,05:1 herunter und lag damit
   unter der WCAG-AA-Schwelle von 4,5:1. */
.fuss-zeile { margin-top: 11px; }
.fuss-obmann { opacity: .72; }

/* ============================================================
   Wegweiser: der Weg eine Ebene hoch (12.09.2026)
   ============================================================
   Auf dem Handy ist NUR der Zurueck-Weg zu sehen. Der Name der
   aktuellen Seite steht schon oben im Kopf; ihn hier zu wiederholen
   waere eine zweite Zeile, die nichts Neues sagt. Ab 640px passt der
   volle Pfad daneben - dort ist Platz, und der Pfad zeigt die ganze
   Baumtiefe auf einen Blick. */
.wegweiser {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 18px;
}
.wegweiser-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 15px 8px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 650;
  font-size: .93rem;
  text-decoration: none;
}
.wegweiser-zurueck:hover { border-color: var(--marke); color: var(--marke); }
.wegweiser-pfeil { font-size: 1.25rem; line-height: 1; }
.wegweiser-pfad {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--muted);
}
.wegweiser-pfad li { display: inline; }
.wegweiser-pfad li + li::before { content: "›"; margin: 0 7px; color: var(--border); }
.wegweiser-pfad a { color: var(--muted); }
.wegweiser-pfad [aria-current="page"] { color: var(--text); font-weight: 650; }
@media (min-width: 640px) {
  .wegweiser-pfad { display: block; }
}
@media print { .wegweiser { display: none; } }