/* Slideout-Panel für „Unterstützung“ (Sichtbarkeits-Übersicht / Hilfe). Der Drawer liegt fest am linken Rand des Inhaltsbereichs (rechts neben der Seitenleiste). Öffnen/Schließen und das Verschieben von #main steuert support_slideout.js per Inline-Style (robust über alle Browser). */ :root { --d4y-drawer-w: min(34rem, 92vw); } @media (max-width: 1024px) { :root { --d4y-drawer-w: min(30rem, 94vw); } } #d4y-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: var(--d4y-drawer-w); z-index: 45; display: none; /* JS schaltet auf flex zum Öffnen */ flex-direction: column; background: #fff; border-right: 1px solid rgba(128, 140, 150, .25); box-shadow: 0 0 40px rgba(0, 0, 0, .08); } #d4y-drawer.is-open { display: flex; } #main { transition: padding-left .22s ease; } .d4y-drawer-head { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; height: 65px; padding: 0 .6rem 0 1rem; border-bottom: 1px solid rgba(128, 140, 150, .2); font-weight: 600; white-space: nowrap; } .d4y-drawer-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .d4y-drawer-head a, .d4y-drawer-head button { display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border: 0; border-radius: .5rem; background: transparent; color: inherit; cursor: pointer; text-decoration: none; } .d4y-drawer-head a:hover, .d4y-drawer-head button:hover { background: rgba(128, 140, 150, .15); } .d4y-drawer-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; } /* Dark Mode (Unfold setzt .dark auf ). */ .dark #d4y-drawer { background: #18212b; border-right-color: rgba(255, 255, 255, .08); } .dark .d4y-drawer-head { border-bottom-color: rgba(255, 255, 255, .08); }