/* ========================================================= Kopfleiste — eine Navigation für alle Seiten. Warum es diese Datei gibt: Die Kopfleiste stand fünfmal von Hand im HTML (index, termine, kegelliste, songs, admin), und dieser Stilblock dreimal wortgleich in termine.css, kegelliste.css und songs.css. Die Menüs sind dabei auseinandergelaufen — die Startseite kannte die Mitgliederpunkte gar nicht, und für dieselbe Sache standen zwei Wörter da ("Backstage" auf der Startseite, "Admin" auf den Mitgliederseiten). Björn am 29.09.2026: „Sie sollte auf jeden Fall einheitlich sein und nicht ständig Positionen wechseln." Ab jetzt: gleiches Markup auf jeder Seite, Sichtbarkeit allein über den Anmeldestand auf (data-anmeldung / data-admin, früh gesetzt von /js/kopf-frueh.js). ========================================================= */ /* Hier wird nur versteckt, nie eingeblendet: So behalten die Punkte ihre Darstellung aus modi.css (display: inline-flex bei Menüpunkten, flex beim Kontoblock) und niemand muss zwei Stellen gleich halten. Schreibweise wie das schon vorhandene [data-nur] in modi.css. */ html:not([data-anmeldung="ja"]) [data-fuer="mitglied"], html:not([data-anmeldung="ja"]) [data-fuer="admin"], html:not([data-admin="ja"]) [data-fuer="admin"], html[data-anmeldung="ja"] [data-fuer="gast"] { display: none !important; } .kopf-rechts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 24px; } .konto { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; } /* Der Name kommt aus der Eigenschaft --wer, die /js/kopf-frueh.js schon im setzt. Damit steht er im allerersten Bild da und das rechtsbündige Menü rückt nicht mehr nach, sobald /api/ich geantwortet hat — am 29.09.2026 auf /termine gemessen waren das 125 Bildpunkte allein durch den Namen. Wer in dem Moment klickte, traf daneben. Eine reservierte Breite statt dieser Lösung half nur bei kurzen Spitznamen: mit 15 rem Reserve schob ein „Angemeldet als Wilhelmine" das Menü immer noch um 317 Punkte. */ .konto .wer { font-size: 14px; color: var(--gedaempft); font-weight: 500; } .konto .wer::after { content: var(--wer, ""); } .konto .knopf { min-height: 44px; } /* Je Modus (Grundform oben ist zugleich der Backstage-Stand) */ html[data-modus="backstage"] .konto .knopf { font-size: 18px; padding: 6px 12px; } html[data-modus="welttournee"] .konto .wer { color: var(--grau); font-weight: 400; } html[data-modus="welttournee"] .konto .knopf { font-size: 13px; padding: 0 12px; } html[data-modus="stumpi"] .konto .wer { color: inherit; font-weight: 600; } html[data-modus="stumpi"] .konto .knopf { font-size: 13px; padding: 0 12px; background: var(--schwarz); color: var(--gelb); border-color: var(--schwarz); box-shadow: none; } @media (max-width: 900px) { .kopf-rechts { justify-content: flex-start; } .konto { justify-content: flex-start; } } /* Grundform der Menüpunkte für Seiten ohne modi.css (die Verwaltung). Die öffentlichen Seiten tragen data-modus im HTML und bekommen Schrift und Farben aus modi.css — die Einschränkung hier verhindert, dass diese Ersatzform sie überschreibt (kopf.css wird nach modi.css geladen und würde sonst bei gleicher Spezifität gewinnen). */ html:not([data-modus]) .kopf nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; } html:not([data-modus]) .kopf nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 10px; text-decoration: none; font: 20px/1 var(--titel); text-transform: uppercase; border-bottom: 3px solid transparent; } html:not([data-modus]) .kopf nav a:hover { color: var(--rot-text); border-bottom-color: var(--rot); } html:not([data-modus]) .kopf nav a[aria-current="page"] { color: var(--rot-text); border-bottom-color: var(--rot); }