/*
 * Lumen Layout - Topbar (Kopfleiste im Hauptbereich)
 * Enthält Suche, Datum/Begrüßung, Veranstalterauswahl, Benutzer und Logout.
 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 28px;
  background: rgba(245, 247, 247, 0.85);
  /* Safari 9-17 kennt backdrop-filter nur mit -webkit-Präfix */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Ohne backdrop-filter-Unterstützung schiene der Inhalt scharf durch die
   halbtransparente Leiste - dann den Hintergrund opak stellen. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .topbar {
    background: var(--bg);
  }
}

/* Kurs-Schnellsuche (Formular in rahmen.sgt, POST auf
   setFilterStichwortKursUebersicht; Strg/Cmd+K-Fokus über js/shell/railcollapse.js) */
.topbar .search {
  flex: 1;
  max-width: 35rem;
  position: relative;
  margin: 0;
}

.topbar .search .fa {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.topbar .search input {
  width: 100%;
  /* links Platz für die Lupe, rechts für das Tastenkürzel */
  padding: 11px 66px 11px 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font-size: 0.84375rem;
  color: var(--ink);
}

.topbar .search input::placeholder {
  color: var(--ink-3);
}

.topbar .search kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
  pointer-events: none;
  white-space: nowrap;
}

.topbar .userbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Name + Datum liegen IM Benutzermenü-Button (der ganze Bereich ist klickbar),
   daher als span mit Block-Kindern statt div (Button erlaubt nur Phrasing-Content). */
.topbar .who {
  display: block;
  line-height: 1.2;
  text-align: right;
  color: var(--ink);
}

.topbar .who b {
  font-size: 0.84375rem;
  font-weight: 700;
}

.topbar .who span {
  display: block;
  font-size: 0.71875rem;
  color: var(--ink-2);
}

.topbar .veranstalter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78125rem;
  color: var(--ink-2);
}

.topbar .veranstalter select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  color: var(--ink);
}

/* Benutzermenü: Avatar, der ein kleines Menü aufklappt (Abmelden).
   Auf-/Zuklappen übernimmt js/components/usermenu.js über das hidden-Attribut. */
.topbar .usermenu {
  position: relative;
}

/* Kontur + Karten-Hintergrund schon im Ruhezustand: Name, Avatar und Caret
   gruppieren sich sichtbar zu EINEM klickbaren Element - ohne Pill wirkte nur
   der kleine Avatar-Kreis klickbar (und auf breiten Viewports ging er unter). */
.topbar .usermenu-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 10px 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
}

.topbar .usermenu-toggle:hover,
.topbar .usermenu.open .usermenu-toggle {
  border-color: var(--teal-d);
  background: var(--teal-soft);
}

/* Aufklapp-Indikator: signalisiert, dass hinter dem Benutzerbereich weitere
   Menüpunkte liegen; dreht sich im geöffneten Zustand. */
.topbar .usermenu-caret {
  margin-left: -4px;
  font-size: 1rem;
  color: var(--ink-2);
  transition: transform 0.15s ease;
}

.topbar .usermenu.open .usermenu-caret {
  transform: rotate(180deg);
}

/* Einmaliger Umstiegs-Hinweis (usermenu.js): erklärt Bestandskunden des
   klassischen Layouts, dass die frueher immer sichtbaren Account-Punkte
   jetzt hier im Benutzermenü liegen. */
.topbar .usermenu-hinweis {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 29;
  width: 264px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 40, 44, 0.14);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Pfeilspitze zum Avatar */
.topbar .usermenu-hinweis::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--card);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}

.topbar .usermenu-hinweis .usermenu-hinweis-ok {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.topbar .usermenu-hinweis .usermenu-hinweis-ok:hover {
  background: var(--bg);
}

/* Vollton-Teal wie die Primär-Buttons: das Benutzermenü ist der einzige Weg zu
   Konto/Abmelden - in Soft-Teal war der Kreis auf der hellen Topbar kaum als
   klickbares Element erkennbar. */
.topbar .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal-d);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Abdunkeln wie .btn-primary:hover */
.topbar .usermenu-toggle:hover .avatar,
.topbar .usermenu.open .avatar {
  filter: brightness(0.92);
}

/* Kein display im Grundzustand setzen, sonst griffe das hidden-Attribut nicht. */
.topbar .usermenu-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  /* Account-Punkte + Abmelden: bei vielen Einträgen scrollbar statt über den
     Viewport hinauslaufen. */
  max-height: min(70vh, 26rem);
  overflow-y: auto;
}

/* Trenner zwischen den Account-Punkten und dem Abmelden-Eintrag. */
.topbar .usermenu-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}

/* Aktueller Account-Punkt (gehört zum offenen Tool) hervorgehoben. */
.topbar .usermenu-item.active {
  font-weight: 700;
  color: var(--teal-d);
}

.topbar .usermenu-item {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  white-space: nowrap;
}

.topbar .usermenu-item:hover {
  background: var(--bg);
  text-decoration: none;
}

.topbar .usermenu-item .fa {
  margin-right: 8px;
}

/* Abmelden in Signalfarbe; --red-d erreicht auf Weiß und --bg >= 4,5:1. */
.topbar .usermenu-logout {
  color: var(--red-d);
}

/* Der Abmelden-Fallback ohne JavaScript (noscript in rahmen.sgt) nutzt die
   zentralen Button-Stile aus components/button.css. */

@media (max-width: 42.5em) {
  :root {
    /* geringeres Topbar-Padding -> kleinere Höhe (Offset für sticky Elemente) */
    --topbar-h: 59px;
  }

  .topbar {
    padding: 11px 16px;
  }

  .topbar .who {
    display: none;
  }

  /* Ohne den (ausgeblendeten) Namen bleibt nur der Avatar im Button -
     symmetrischer Innenabstand statt des Platzes für den Text */
  .topbar .usermenu-toggle {
    padding: 3px;
  }

  /* Auf schmalen Viewports ist die Topbar voll (Hamburger, Krümel, Benutzer) -
     die Schnellsuche ausblenden */
  .topbar .search {
    display: none;
  }
}