/* ============================================================================= demo-switcher.css — NUR ZUM AUSPROBIEREN Styles für das interne Demo-Werkzeug. Für echte Kundenseiten entfernen oder die Klasse .demo-mode vom nehmen. ============================================================================= */ .demo-switcher { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: rgba(23, 23, 22, 0.94); color: #fff; padding: 10px 14px; border-radius: 999px; font: 600 12px/1 var(--font-display); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .demo-switcher__group { display: flex; gap: 4px; align-items: center; } .demo-switcher__label { opacity: 0.55; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 2px; } .demo-switcher button { font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); padding: 6px 10px; border-radius: 999px; cursor: pointer; } .demo-switcher button[aria-current="true"], .demo-switcher button[aria-pressed="true"] { background: var(--color-accent); color: #171716; border-color: transparent; } @media (max-width: 640px) { .demo-switcher { font-size: 11px; gap: 8px; padding: 8px 10px; bottom: 8px; } }