/* ========================================================================= Gemeinsame Shell-Navigation — eine Quelle für alle Seiten und beide Anmeldezustände. Jede Seite lädt dieses Blatt statisch im : würde es erst per Skript nachgezogen, sprängen Wortmarke und Menü beim Seitenwechsel. Baut auf style.css auf: die Sienna-Unterstreichung (.site-header nav a) und alle Tokens gelten unverändert weiter. EINE Sprache, ein Akzent. Hinweis Spezifität: die Basisregel `.site-header nav ul` (0,1,2) muss überschrieben werden — darum sind layoutbestimmende Regeln hier konsequent unter `.site-header nav` verankert. ========================================================================= */ /* Schalter standardmäßig verborgen — nur mobil sichtbar (s. u.). */ .shell-toggle { display: none; } /* --- Konto-Platz: GENAU EIN Eintrag, beide Zustände stehen im HTML --------- Gast sieht „Anmelden", angemeldet „Abmelden" — niemals beide, und keinen dritten Eintrag „Konto" daneben. Die Konto-Seite (abo.html) steht im Fußbereich bei den übrigen Dauer-Links. Ein Inline-Skript im setzt html.ek-angemeldet aus dem Anzeige-Cookie ek_angemeldet, BEVOR gezeichnet wird. Dadurch steht die Leiste beim Seitenwechsel sofort richtig, statt nach /api/me umgebaut zu werden und die Menüpunkte zu verschieben. Das Cookie läuft mit der Sitzung ab, kann also nicht veralten; js/konto.js bestätigt den Wert nach /api/me. display:none ist hier absichtlich hart und ohne Ausnahme: fällt dieses Blatt einmal aus (alter Browser-Cache), zeigt die Seite lieber beide Konto-Zustände als ein zerschossenes Layout — deshalb tragen die HTML-Seiten das Blatt statisch und versioniert (?v=…) im . */ .site-header nav .shell-menu .shell-angemeldet { display: none; } html.ek-angemeldet .site-header nav .shell-menu .shell-gast { display: none; } html.ek-angemeldet .site-header nav .shell-menu .shell-angemeldet { display: list-item; } /* --- Desktop: ruhige Katalog-Leiste, Konto-Cluster rechts abgesetzt ------- */ @media (min-width: 821px) { /* Etwas engere Laufweite als die Marketing-Nav, damit alle Bereiche möglichst in eine Zeile passen; bricht bei Bedarf trotzdem ruhig um (flex-wrap aus style.css bleibt aktiv). */ .site-header nav .shell-menu { gap: .5rem 1.25rem; } .site-header nav .shell-menu a { font-size: .95rem; } } /* --- Kontopflichtige Bereiche: dezent, nie tot ---------------------------- Karteikarten und Klausurtracker stehen in BEIDEN Zuständen an derselben Stelle — nur der Gast sieht sie blasser und mit Schloss. Beides steht fest im HTML und wird hier zurückgenommen, sobald html.ek-angemeldet gesetzt ist (was vor dem ersten Zeichnen geschieht). Würde ein Skript das Schloss nachträglich anhängen, rückten die Menüpunkte nach — genau der Sprung, den das Anzeige-Cookie abstellt. */ /* Das Schloss trägt die Aussage allein — ohne Klammerzusatz „(Konto nötig)". Dieser Text stand vorher als .sr-only im Menü; verlor eine Seite das Stylesheet (alter Browser-Cache), stand er plötzlich sichtbar in der Leiste. Den Hinweis tragen jetzt die Karteikarten- und die Tracker-Seite selbst (js/karteikarten.js, js/tracker.js) — dort, wo er hingehört und wo er nicht von einer CSS-Regel abhängt. Eine zusätzliche Abstufung der Farbe brächte nichts: --tinte-leise und --tinte-blass unterscheiden sich um drei Stufen (6.25:1 gegen 6.6:1) und sind im Menü nicht auseinanderzuhalten. */ html.ek-angemeldet .site-header nav .shell-menu a.gesperrt .nav-schloss { display: none; } /* Nur für Screenreader (Hilfsklasse, z. B. für reine Grafik-Beschriftungen). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Schlichtes Schloss aus Linienwerk (kein Emoji, kein zweiter Akzent): kleiner Körper mit angedeutetem Bügel. */ .nav-schloss { display: inline-block; width: 8px; height: 7px; margin-left: .3rem; border: 1.2px solid currentColor; border-radius: 1px; position: relative; vertical-align: middle; opacity: .85; } .nav-schloss::before { content: ""; position: absolute; left: 1px; right: 1px; top: -3px; height: 3px; border: 1.2px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; } /* --- Mobil: Wortmarke + Menü-Schalter oben, ausklappbares Panel darunter --- */ @media (max-width: 820px) { /* nav bleibt statisch; das Menü liegt absolut unter der (sticky) Kopfzeile. */ .site-header nav.shell-nav { position: static; } .site-header nav .shell-toggle { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; cursor: pointer; font-family: var(--schrift-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-blass); padding: .15rem 0; } .site-header nav .shell-toggle:hover { color: var(--terra-tief); } /* Hamburger aus drei Haarlinien; im offenen Zustand zum Kreuz. */ .shell-balken, .shell-balken::before, .shell-balken::after { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .shell-balken { position: relative; } .shell-balken::before { content: ""; position: absolute; top: -6px; left: 0; } .shell-balken::after { content: ""; position: absolute; top: 6px; left: 0; } .shell-nav.offen .shell-balken { background: transparent; } .shell-nav.offen .shell-balken::before { transform: translateY(6px) rotate(45deg); } .shell-nav.offen .shell-balken::after { transform: translateY(-6px) rotate(-45deg); } /* Verborgenes Klapp-Panel (0,2,1 schlägt die Basis 0,1,2). */ .site-header nav .shell-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--papier-hell); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); padding: .25rem 1.5rem 1rem; } /* Offen: 0,3,1 schlägt die Verbergen-Regel. */ .site-header nav.offen .shell-menu { display: flex; } .site-header nav .shell-menu li { width: 100%; } .site-header nav .shell-menu li + li { border-top: 1px solid var(--linie-zart); } .site-header nav .shell-menu a { display: block; padding: .85rem 0; font-size: 1.05rem; } /* Die einlaufende Unterstreichung der Kopf-Nav ergibt im Panel keinen Sinn. */ .site-header nav .shell-menu a::after { display: none; } .site-header nav .shell-menu a.active { color: var(--terra-tief); } /* Konto-Cluster im Klapp-Panel: eine kräftigere Trennlinie darüber. */ .site-header nav .shell-menu .shell-gast, html.ek-angemeldet .site-header nav .shell-menu .shell-angemeldet:not(:last-child) { border-top: 1px solid var(--linie); } }