/* HOPS24-Leiste über Vorlagen-Demo und Vorschau (website-vorlagen.php) – unabhängig vom Design der Vorlage. */
.hb-bar { background: #0e1822; color: #fff; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; border-bottom: 3px solid #fcc000; }
.hb-bar__inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hb-bar a { color: #fff; text-decoration: none; }
.hb-bar__back { font-weight: 700; white-space: nowrap; }
.hb-bar__switch { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: center; }
.hb-bar__switch a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 600; }
.hb-bar__switch a[aria-current="page"] { background: #fff; color: #0e1822; }
.hb-bar form { margin: 0; }
.hb-bar__cta { display: inline-flex; padding: 8px 16px; border: 0; border-radius: 8px; background: #fcc000; color: #1d1600 !important; font: 700 14px/1.2 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.hb-bar__label { max-width: 1240px; margin: 0 auto; padding: 0 16px 8px; font-size: 12px; color: rgba(255, 255, 255, .7); }
@media (max-width: 640px) { .hb-bar__switch { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .hb-bar__switch a { white-space: nowrap; } }