/* * AUTO-GENERATED - NICHT MANUELL EDITIEREN. * Quelle: shared/mobile-nav.css * Re-Sync: tools/sync-tokens.ps1 * Letzter Sync: 2026-05-28 18:00 */ /* * Chaotec Mobile-Navigation Styles. * * Voraussetzung: chaotec-tokens.css geladen (fuer --ct-* Variablen). * * Verhalten: * - Hamburger ist nur sichtbar < 768px (--ct-bp-md). * - Drawer slidet von rechts ein, mit Backdrop. * - Body-Scroll wird via .ct-mobile-nav-open class auf gesperrt. * - Focus-Trap im Drawer (via mobile-nav.js). */ /* ─── Hamburger Button ────────────────────────────────────────────── */ .ct-hamburger { display: none; width: var(--ct-touch); height: var(--ct-touch); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: var(--ct-bg-elevated); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color var(--ct-duration) var(--ct-ease); font-family: inherit; } .ct-hamburger:hover { border-color: var(--ct-primary); } .ct-hamburger:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 2px; } .ct-hamburger-bar { display: block; width: 20px; height: 2px; background: var(--ct-text); border-radius: 1px; transition: transform 0.25s var(--ct-ease), opacity 0.2s var(--ct-ease); } .ct-hamburger[aria-expanded="true"] .ct-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ct-hamburger[aria-expanded="true"] .ct-hamburger-bar:nth-child(2) { opacity: 0; } .ct-hamburger[aria-expanded="true"] .ct-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── Backdrop ─────────────────────────────────────────────────────── */ .ct-mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 998; opacity: 0; transition: opacity 0.25s var(--ct-ease); } .ct-mobile-backdrop:not([hidden]) { opacity: 1; } /* ─── Drawer ───────────────────────────────────────────────────────── */ .ct-mobile-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: 84%; max-width: 340px; background: var(--ct-bg-elevated); border-left: 1px solid var(--ct-border); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35); z-index: 999; transform: translateX(100%); transition: transform 0.3s var(--ct-ease); display: flex; flex-direction: column; overflow: hidden; } .ct-mobile-drawer[aria-hidden="false"] { transform: translateX(0); } .ct-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ct-border); } .ct-mobile-drawer-title { font-size: var(--ct-text-lg); font-weight: 700; color: var(--ct-text); } .ct-mobile-drawer-close { width: var(--ct-touch); height: var(--ct-touch); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: transparent; color: var(--ct-text); cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; } .ct-mobile-drawer-close:hover { border-color: var(--ct-primary); color: var(--ct-primary); } .ct-mobile-drawer-close:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 2px; } /* ─── Drawer-Nav ───────────────────────────────────────────────────── */ .ct-mobile-drawer-nav { flex: 1; overflow-y: auto; padding: 12px 0; -webkit-overflow-scrolling: touch; } .ct-mobile-drawer-nav ul { list-style: none; margin: 0; padding: 0; } .ct-mobile-drawer-nav li { border-bottom: 1px solid var(--ct-border-soft); } .ct-mobile-drawer-nav a { display: flex; align-items: center; gap: 14px; min-height: var(--ct-touch); padding: 12px 20px; color: var(--ct-text); text-decoration: none; font-size: var(--ct-text-base); transition: background var(--ct-duration) var(--ct-ease), color var(--ct-duration) var(--ct-ease); } .ct-mobile-drawer-nav a:hover, .ct-mobile-drawer-nav a:focus { background: var(--ct-primary-softer); color: var(--ct-primary); outline: none; } .ct-mobile-drawer-nav a[aria-current="page"] { background: var(--ct-primary-soft); color: var(--ct-primary); font-weight: 700; } .ct-mobile-nav-icon { font-size: 1.15rem; width: 24px; text-align: center; flex-shrink: 0; } .ct-mobile-nav-label { flex: 1; } /* ─── Body-Scroll lock (gesetzt von JS via class) ──────────────────── */ body.ct-mobile-nav-open { overflow: hidden; } /* ─── Show Hamburger nur auf Mobile ────────────────────────────────── */ @media (max-width: 768px) { .ct-hamburger { display: inline-flex; } } /* ─── Reduced Motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ct-mobile-drawer, .ct-mobile-backdrop, .ct-hamburger-bar { transition-duration: 0.01ms !important; } }