/* ============================================================ sm-nav-varianten.css — wählbare Optik der Navigation Gesteuert über Attribute an (js/sm-optik.js): data-nav="glas" → untere Leiste schwebend mit Milchglas-Effekt data-nav="solid" → untere Leiste flächig, abgesetzt (Decathlon-Stil) data-topbar="sticky"→ obere Leiste bleibt beim Scrollen stehen Beide Varianten bauen auf der bestehenden #sm-bottom-nav auf und ändern nur die Optik — Aufbau, Verhalten und Klickflächen bleiben identisch. ============================================================ */ @media (max-width: 768px) { /* ══════════════════════════════════════════════════════ VARIANTE „glas" — schwebende Leiste mit Milchglas ══════════════════════════════════════════════════════ */ html[data-nav="glas"] #sm-bottom-nav { /* Etwas eingerückt und abgerundet, damit der Glaseffekt wirkt */ left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; border-radius: 22px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 8px 30px rgba(15, 18, 34, .16); } html[data-theme="dark"][data-nav="glas"] #sm-bottom-nav { background: rgba(20, 23, 42, .72); border-color: rgba(255, 255, 255, .10); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); } /* Rückfall für Engines ohne backdrop-filter: dann deckend, sonst unlesbar */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-nav="glas"] #sm-bottom-nav { background: rgba(255, 255, 255, .96); } html[data-theme="dark"][data-nav="glas"] #sm-bottom-nav { background: rgba(20, 23, 42, .96); } } /* ══════════════════════════════════════════════════════ VARIANTE „solid" — flächige Leiste am unteren Rand Vorbild: Decathlon-App (heller Balken, klare Trennlinie, Symbol über Beschriftung, aktiver Punkt farbig hervorgehoben) ══════════════════════════════════════════════════════ */ html[data-nav="solid"] #sm-bottom-nav { left: 0; right: 0; bottom: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); height: 62px; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; border-top: 1px solid #e5e7eb; box-shadow: 0 -1px 0 rgba(15, 18, 34, .04); } html[data-theme="dark"][data-nav="solid"] #sm-bottom-nav { background: var(--mb-surface, #14172a); border-top-color: var(--mb-border, #262b45); } /* Beschriftung immer sichtbar und etwas kräftiger */ html[data-nav="solid"] .smbn-item { gap: 2px; padding: 8px 0 6px; } html[data-nav="solid"] .smbn-item span, html[data-nav="solid"] .smbn-label { font-size: 11px; font-weight: 600; letter-spacing: .01em; } /* Aktiver Punkt: farbige Pille hinter dem Symbol (wie im Vorbild) */ html[data-nav="solid"] .smbn-item.active { position: relative; color: var(--mb-primary, #6366f1); } html[data-nav="solid"] .smbn-item.active::before { content: ''; position: absolute; top: 4px; width: 46px; height: 26px; border-radius: 999px; background: rgba(99, 102, 241, .12); z-index: -1; } html[data-theme="dark"][data-nav="solid"] .smbn-item.active::before { background: rgba(129, 140, 248, .18); } /* Der HeroAI-Knopf bleibt in beiden Varianten ohne farbigen Schein. */ html[data-nav="solid"] .smbn-heroai-icon, html[data-nav="glas"] .smbn-heroai-icon { box-shadow: none; } } /* ══════════════════════════════════════════════════════════ OBERE LEISTE: mitlaufend („sticky") Warum zusätzlich `#headerContainer { display: contents }`: Die Topbar wird von components.js IN diesen Wrapper gelegt, und der ist exakt so hoch wie die Leiste selbst. Ein sticky-Element kann sich aber nur innerhalb seines umschließenden Blocks bewegen — also um 0 Pixel. `contents` nimmt den Wrapper aus dem Layout, wodurch der Bezugsrahmen zum umgebenden Inhalt wird und sticky greift. (Dieser Zusammenhang ist in dashboard.css bereits dokumentiert.) ══════════════════════════════════════════════════════════ */ html[data-topbar="sticky"] #headerContainer { display: contents; } html[data-topbar="sticky"] .topbar { position: sticky; top: 0; z-index: 90; /* Ohne eigene Fläche würde der Inhalt durchscheinen */ background: #ffffff; box-shadow: 0 1px 0 rgba(15, 18, 34, .06), 0 4px 14px rgba(15, 18, 34, .05); } html[data-theme="dark"][data-topbar="sticky"] .topbar { background: var(--mb-surface, #14172a); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .35); } /* Lücke über der Leiste schließen. Auf dem Handy reicht die Seite bis unter die Statusleiste (Safe-Area). Die Leiste klebt zwar an der Viewport-Oberkante, der Streifen DARÜBER blieb aber frei — dort schob sich beim Scrollen der Seiteninhalt durch. Dieses Pseudo-Element füllt genau diesen Streifen in derselben Farbe mit. */ html[data-topbar="sticky"] .topbar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: env(safe-area-inset-top, 0px); background: inherit; pointer-events: none; } /* ════════════════════════════════════════════════════════════ KOPFZEILEN-KNÖPFE (Darstellung / Barrierefreiheit) Steht bewusst HIER und nicht in der Settings-CSS: die Knöpfe sitzen in der Kopfzeile JEDER Seite, die Settings-CSS wird aber nur auf der Einstellungs- seite geladen — der aktive Zustand war dadurch überall sonst unsichtbar. ════════════════════════════════════════════════════════════ */ .theme-icon { display: inline-flex; align-items: center; justify-content: center; } .theme-icon svg { width: 20px; height: 20px; } /* Barrierefreiheit aktiv: deutlich grün, damit man es auf einen Blick sieht */ #a11yToggle.is-active { background: #d1fae5 !important; color: #047857 !important; box-shadow: inset 0 0 0 2px #34d399; } #a11yToggle.is-active svg { color: #047857; } /* Kleiner Punkt als zusätzliches Signal — Farbe allein ist kein guter Indikator */ #a11yToggle.is-active::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px #fff; } #a11yToggle { position: relative; } html[data-theme="dark"] #a11yToggle.is-active { background: #0e2b23 !important; color: #6ee7b7 !important; box-shadow: inset 0 0 0 2px #10b981; } html[data-theme="dark"] #a11yToggle.is-active svg { color: #6ee7b7; } html[data-theme="dark"] #a11yToggle.is-active::after { box-shadow: 0 0 0 2px #14172a; }