/* 02_steuerleiste.css — Top-Bar (Sprache, Musik, Schriftgröße). Phase 2: aus v7 Z. 879-907. */

.steuerleiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 50px;
  background: var(--farbe1);
  color: var(--farbe3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 2rem;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.steuerleiste h1 {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
}

.steuerleiste-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Sites-Dropdown (Stufe 3, 2026-05-26) — Multi-Site-Liste in der Steuerleiste */
.sites-dropdown {
  position: relative;
  display: inline-block;
}

.sites-dropdown-toggle {
  background: var(--farbe2);
  color: var(--farbe1);
  border: none;
  border-radius: 4px;
  padding: .35rem .75rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
  transition: background-color .15s;
}

.sites-dropdown-toggle:hover,
.sites-dropdown-toggle:focus-visible,
.sites-dropdown.open .sites-dropdown-toggle {
  background: var(--farbe3);
  outline: none;
}

.sites-dropdown-arrow {
  font-size: .8em;
  transition: transform .15s;
}

.sites-dropdown.open .sites-dropdown-arrow {
  transform: rotate(180deg);
}

.sites-dropdown-list {
  display: none;
  position: absolute;
  /* 2026-05-27 BUG 7: Direkt an Toggle ankleben statt 4 px Luecke.
     Vorher hatte die Luecke den Hover-Bereich unterbrochen — Maus zwischen
     Toggle und Liste -> Container nicht mehr gehovert -> Dropdown klappt zu. */
  top: 100%;
  right: 0;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  min-width: 200px;
  background: var(--farbe1);
  border: 1px solid var(--farbe2);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 110;
}

.sites-dropdown:hover .sites-dropdown-list,
.sites-dropdown.open .sites-dropdown-list {
  display: block;
}

.sites-dropdown-list li {
  display: block;
}

.sites-dropdown-list li a {
  display: block;
  padding: .5rem .9rem;
  color: var(--farbe3);
  text-decoration: none;
  font-size: .9rem;
  transition: background-color .15s, color .15s;
}

.sites-dropdown-list li a:hover,
.sites-dropdown-list li a:focus-visible {
  background: var(--farbe2);
  color: var(--farbe1);
  outline: none;
}

.sites-dropdown-list li.disabled {
  padding: .5rem .9rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  cursor: default;
  user-select: none;
}