/* Bereichsnavigation – gemeinsame Leiste ganz oben auf allen Seiten von WEB & SMART HOME KONZEPT.
   Drei feste Ziele, unabhängig von der gerade geöffneten Seite:
   Haus-Symbol / WEB & SMART HOME KONZEPT -> zentrale Startseite, Webdesign -> Webdesign-Startseite,
   Smart Home -> https://smart-zuhause-einfach.de/.
   Eigene Pixelwerte, damit die Leiste auf Startseite, Webdesign-Seiten und Designbeispielen gleich aussieht. */

.bereichsnav { position: sticky; top: 0; z-index: 120; background: #0b1730; color: #eef2f8; font: 500 15px/1.3 "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.bereichsnav-in { box-sizing: border-box; max-width: 1240px; min-height: 48px; margin: 0 auto; padding: 2px clamp(16px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; }
.bereichsnav a { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: #fff; text-decoration: none; white-space: nowrap; transition: background-color 0.2s; }
.bereichsnav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bereichsnav a:focus-visible { outline: 3px solid #2cc4c4; outline-offset: 2px; }
.bereichsnav a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); }
/* Die Leiste bleibt beim Scrollen oben stehen, damit der Home-Button immer erreichbar ist.
   Die eigenen festen Kopfzeilen der Seiten rücken dafür um die Höhe der Leiste nach unten. */
.bereichsnav ~ .site-header, .bereichsnav ~ .demo-bar { top: 48px; }
.bereichsnav-in { height: 48px; }
.bn-home { margin-left: -12px; font-weight: 700; letter-spacing: 0.08em; }
.bn-home svg { flex: none; width: 20px; height: 20px; }
.bn-amp { color: #5fd0d0; font-weight: 400; padding-inline: 0.25em; }
.bn-kurz { display: none; }
.bn-bereiche { display: flex; gap: 4px; margin-right: -12px; }
.bn-bereiche a { font-weight: 600; }
.bn-bereiche a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2cc4c4; }
.bn-bereiche a.bn-smarthome::before { background: #ef8f2f; }
@media (max-width: 600px) {
  .bn-lang { display: none; }
  .bn-kurz { display: inline; }
  .bn-home { letter-spacing: 0.02em; }
}
@media (max-width: 340px) {
  .bereichsnav a { padding: 0 8px; gap: 6px; }
  .bn-home { margin-left: -8px; }
  .bn-bereiche { margin-right: -8px; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .bereichsnav a { transition: none; } }
@media print { .bereichsnav { display: none; } }