/* ============================================================ * shell.css — Navigationsleiste in der „HW Ink"-Designsprache * Gehört zu shell.js. Erwartet hw-design.css (Tokens); alle * Werte haben trotzdem Fallbacks, falls eine Seite es nicht lädt. * * Strukturvertrag (unverändert aus dem Bestand): * - Leiste ist position:fixed, Seiten bekommen über * html.hw-shell-ready body { padding-top } ihren Platz. * - Eigene Sticky-Header der Seiten rutschen unter die Leiste. * ============================================================*/ :root { --hw-bar-h: 62px; } /* Platz für die feste Leiste schaffen */ html.hw-shell-ready body { padding-top: var(--hw-bar-h) !important; } /* Sprungmarken dürfen nicht unter der Leiste landen: ohne das scrollt der Browser das Ziel exakt an den Fensterrand – also hinter die 62px hohe Leiste. */ html.hw-shell-ready { scroll-padding-top: calc(var(--hw-bar-h) + var(--hw-hint-h, 0px) + 12px); } html.hw-shell-ready [id] { scroll-margin-top: calc(var(--hw-bar-h) + var(--hw-hint-h, 0px) + 12px); } /* Seiten mit eigener klebender Kopfzeile (Abendkasse, Einlass). :not(.hw-bar) ist wichtig — die Leiste selbst ist ein

und direktes Kind von , würde sich hier also selbst treffen und um ihre eigene Höhe nach unten rutschen. */ html.hw-shell-ready header.appbar, html.hw-shell-ready body > header:not(.hw-bar) { top: var(--hw-bar-h) !important; } /* Liegt ein Hinweisstreifen über der Seite, rutscht alles, was an der Leiste klebt, um dessen gemessene Höhe nach unten (--hw-hint-h setzt shell.js). Ohne das legte sich das aufgeklappte Mobilmenü genau über die Warnung, die es zu lesen gab. */ html.hw-shell-hint header.appbar, html.hw-shell-hint body > header:not(.hw-bar) { top: calc(var(--hw-bar-h) + var(--hw-hint-h, 0px)) !important; } /* Altlast: früheres Dashboard-Raster mit Seitenleisten-Spalte */ html.hw-shell-ready .dashboard { display: block !important; grid-template-columns: none !important; } html.hw-shell-ready .main-content { margin-left: 0 !important; padding-top: 1.5rem !important; } /* ── Die Leiste ─────────────────────────────────────────── */ .hw-bar { position: fixed; inset: 0 0 auto; height: var(--hw-bar-h); z-index: var(--z-bar, 9000); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: rgba(3, 7, 18, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--text, #f9fafb); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: .93rem; box-sizing: border-box; } .hw-bar *, .hw-bar *::before, .hw-bar *::after { box-sizing: border-box; } /* Sprunglink: unsichtbar, bis er den Fokus bekommt. Bewusst nicht display:none – das würde ihn auch für Screenreader verstecken. */ .hw-skip { position: absolute; left: 12px; top: 12px; padding: 10px 16px; border-radius: 10px; background: var(--brand-strong, #2563eb); color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; transform: translateY(-160%); transition: transform .15s ease; z-index: 1; } .hw-skip:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } /* Symbole der Leiste: gleiche Strichgrafik wie im Seiteninhalt. .hwi kommt aus hw-design.css – hier nochmal, weil nicht jede Seite das Designsystem lädt (z. B. entry-scan.html). */ .hw-bar .hwi { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hw-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display, 'Titillium Web', sans-serif); font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text, #f9fafb); text-decoration: none; flex: none; } .hw-brand img { width: 30px; height: 30px; flex: none; border-radius: 9px; display: block; /* Das Logo bringt seinen eigenen dunklen Hintergrund mit. */ } .hw-brand:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(59,130,246,.3)); border-radius: 10px; } /* ── Navigation ─────────────────────────────────────────── */ .hw-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .hw-nav::-webkit-scrollbar { display: none; } .hw-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; color: var(--muted, #9ca3af); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease; } .hw-nav a:hover { color: var(--text, #f9fafb); background: rgba(255,255,255,.06); } .hw-nav a:focus-visible { outline: none; color: var(--text, #f9fafb); box-shadow: var(--ring, 0 0 0 3px rgba(96,165,250,.9)); } /* Füllfarbe --brand-strong statt --brand: Weiß auf #3b82f6 erreicht nur 3,7:1 und verfehlt AA bei dieser Schriftgröße. */ .hw-nav a[aria-current='page'] { color: #fff; background: var(--brand-strong, #2563eb); } .hw-bar .hw-nav .hwi { width: 16px; height: 16px; } /* ── Rechte Seite: nur noch das Nutzermenü ──────────────── */ /* Tarif und Organisation standen früher als zwei Pillen daneben. Beides steht jetzt im aufklappbaren Menü und unter „Einstellungen“. */ .hw-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; } .hw-usermenu { position: relative; } .hw-usertrigger { display: inline-flex; align-items: center; gap: 9px; max-width: 230px; min-height: 44px; /* Tippziel auf dem Handy */ padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.03); color: var(--text, #f9fafb); font: 700 13.5px/1.2 var(--font-body, 'Inter', system-ui, sans-serif); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .hw-usertrigger:hover { background: rgba(255,255,255,.08); border-color: var(--border-strong, rgba(255,255,255,.14)); } .hw-usertrigger:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(59,130,246,.3)); } .hw-usertrigger[aria-expanded='true'] { background: rgba(255,255,255,.1); } /* Man befindet sich auf einer Seite, die hinter diesem Knopf liegt (Einstellungen, Team) – beide stehen nicht mehr in der Leiste. */ .hw-usertrigger[data-hier='true'] { border-color: var(--brand-line, rgba(59,130,246,.35)); background: var(--brand-soft, rgba(59,130,246,.12)); } .hw-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-strong, #2563eb); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; object-fit: cover; } .hw-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-caret { width: 14px !important; height: 14px !important; opacity: .6; transition: transform .2s ease; } .hw-usertrigger[aria-expanded='true'] .hw-caret { transform: rotate(180deg); } /* ── Aufklappmenü ───────────────────────────────────────── */ .hw-menu { position: absolute; top: calc(100% + 9px); right: 0; min-width: 262px; max-width: min(320px, calc(100vw - 24px)); padding: 7px; background: var(--elevated, #1f2937); border: 1px solid var(--border-strong, rgba(255,255,255,.14)); border-radius: 16px; box-shadow: 0 18px 46px rgba(0,0,0,.55); z-index: var(--z-menu, 9600); animation: hw-menu-in .16s cubic-bezier(.22,1,.36,1); } .hw-menu[hidden] { display: none; } @keyframes hw-menu-in { from { opacity: 0; transform: translateY(-6px); } } .hw-menu-head { padding: 11px 12px 12px; } .hw-menu-name { font-weight: 800; font-size: 14px; color: var(--text, #f9fafb); overflow-wrap: anywhere; } .hw-menu-mail { font-size: 12.5px; color: var(--muted, #9ca3af); margin-top: 2px; overflow-wrap: anywhere; } .hw-menu-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; } .hw-menu-org { max-width: 100%; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.05); color: var(--muted, #9ca3af); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-plan { padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.05); color: var(--muted, #9ca3af); white-space: nowrap; } .hw-plan[data-tarif='plus'] { color: var(--warn-text, #fbbf24); border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.14); } .hw-plan[data-tarif='premium'] { color: var(--brand-text, #93c5fd); border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.16); } .hw-plan[data-tarif='internal'] { color: var(--ok-text, #6ee7b7); border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.14); } .hw-menu-sep { height: 1px; margin: 5px 4px; background: var(--border, rgba(255,255,255,.08)); } .hw-menu-title { padding: 7px 12px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint, rgba(255,255,255,.45)); } .hw-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 11px; border: none; background: none; text-align: left; color: var(--text, #f9fafb); text-decoration: none; font: 600 13.5px/1.2 var(--font-body, 'Inter', system-ui, sans-serif); cursor: pointer; transition: background .15s ease; } .hw-menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-menu-item:hover { background: rgba(255,255,255,.07); } .hw-menu-item:focus-visible { outline: none; background: rgba(255,255,255,.07); box-shadow: var(--ring, 0 0 0 3px rgba(59,130,246,.3)); } .hw-menu-item .hwi { color: var(--muted, #9ca3af); } .hw-menu-item:hover .hwi { color: var(--text, #f9fafb); } .hw-menu-item[aria-current] { color: var(--brand-text, #93c5fd); font-weight: 800; } .hw-menu-item[aria-current] .hwi { color: var(--brand-text, #93c5fd); } .hw-menu-item.danger { color: var(--bad-text, #fca5a5); } .hw-menu-item.danger .hwi { color: var(--bad-text, #fca5a5); } .hw-menu-item.danger:hover { background: rgba(239,68,68,.14); color: #fecaca; } .hw-menu-item:disabled { opacity: .5; cursor: progress; } .hw-burger { display: none; } /* ── Hinweisstreifen ────────────────────────────────────── */ .hw-hint { padding: 11px 18px; text-align: center; font-size: 13.5px; font-weight: 600; background: rgba(245,158,11,.12); border-bottom: 1px solid rgba(245,158,11,.35); color: var(--warn, #f59e0b); } .hw-hint a { color: inherit; font-weight: 800; } /* ── Mobil ──────────────────────────────────────────────── */ @media (max-width: 860px) { /* Auf schmalen Geräten bleibt nur der Avatar – der Name würde die Leiste sprengen. Der volle Name steht im aufgeklappten Menü. */ .hw-username { display: none; } .hw-usertrigger { padding: 5px; gap: 0; } .hw-caret { display: none; } .hw-brand span { display: none; } .hw-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: none; /* Tippziel */ border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.03); color: var(--text, #f9fafb); cursor: pointer; } .hw-burger:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(59,130,246,.3)); } .hw-bar .hw-burger .hwi { width: 20px; height: 20px; } .hw-nav { display: none; position: fixed; top: var(--hw-bar-h); left: 0; right: 0; max-height: calc(100dvh - var(--hw-bar-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 16px; /* Deckend, nicht halbtransparent: der Seiteninhalt schien vorher lesbar durch die Menüpunkte hindurch. backdrop-filter hilft hier nicht, weil die Leiste bereits einen eigenen Composite-Kontext aufspannt. */ background: #080d18; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); box-shadow: 0 18px 40px rgba(0,0,0,.6); } .hw-nav[data-offen='true'] { display: flex; } html.hw-shell-hint .hw-nav { top: calc(var(--hw-bar-h) + var(--hw-hint-h, 0px)); } .hw-nav a { border-radius: 12px; padding: 12px 14px; font-size: 15px; } .hw-bar .hw-nav .hwi { width: 19px; height: 19px; } }