/* Portal-Leiste — die globale, schlanke Kopfleiste des Serviceportals.
   Liegt über ALLEN Services (Portal, Turnier, Training, …) und ist die eine
   Konstante der Navigation: Wappen → Portal-Übersicht, Service-Umschalter,
   Nutzer + Abmelden. Gerendert von kern/portal_leiste.php. */

:root { --jfv-leiste-h: 44px; }

.jfv-leiste {
  position: sticky; top: 0; z-index: 150;
  height: var(--jfv-leiste-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px;
  background: var(--jfv-navy-deep, #142336);
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  color: rgba(255,255,255,.85);
  box-sizing: border-box;
}
.jfv-leiste a { text-decoration: none; color: inherit; }

/* Desktop: das <details> und sein Panel sind ineinandergeschachtelte Flex-Zeilen,
   die den Platz nach dem Wappen fuellen. Im Panel: Service-Nav links, Konto-Block
   per margin-left:auto rechts. Der Hamburger (summary) ist aus. */
.jfv-leiste-menu  { flex: 1; min-width: 0; display: flex; align-items: center; }
.jfv-leiste-panel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.jfv-leiste-burger { display: none; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; }

/* Links: Wappen + Portal-Home */
.jfv-leiste-heim {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: #fff; white-space: nowrap;
}
.jfv-leiste-heim img { width: 26px; height: 26px; object-fit: contain; display: block; }
.jfv-leiste-heim:hover span { text-decoration: underline; text-underline-offset: 3px; }
.jfv-leiste-heim .kurz { display: none; }

/* Mitte: Service-Umschalter */
.jfv-leiste-dienste { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.jfv-leiste-dienste::-webkit-scrollbar { display: none; }
.jfv-leiste-dienste a {
  padding: 5px 12px; border-radius: 999px;
  color: rgba(255,255,255,.72); font-weight: 600; white-space: nowrap;
}
.jfv-leiste-dienste a:hover { color: #fff; background: rgba(255,255,255,.08); }
.jfv-leiste-dienste a.aktiv {
  background: var(--jfv-sage, #7eb89c);
  color: var(--jfv-navy-deep, #142336);
}

/* Administration: kein Service, daher abgesetzt (Trennlinie + Zahnrad). */
.jfv-leiste-admin {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.jfv-leiste-admin svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Rechts: Nutzer + Abmelden/Anmelden */
.jfv-leiste-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.jfv-leiste-nutzer { opacity: .7; }
.jfv-leiste-knopf {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  font-weight: 600; color: #fff;
}
.jfv-leiste-knopf:hover { background: rgba(255,255,255,.1); }

@media (max-width: 700px) {
  .jfv-leiste { gap: 8px; padding: 0 10px; }
  .jfv-leiste-heim .lang { display: none; }
  .jfv-leiste-heim .kurz { display: inline; }

  /* Menü einklappen: Hamburger rechts, Inhalte in ein aufklappbares Panel. */
  .jfv-leiste-menu { flex: 0 0 auto; display: block; position: static; margin-left: auto; }
  .jfv-leiste-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -6px;
    border-radius: 9px; -webkit-tap-highlight-color: transparent;
  }
  .jfv-leiste-burger:hover, .jfv-leiste-menu.offen .jfv-leiste-burger { background: rgba(255,255,255,.1); }
  .jfv-leiste-burger svg { width: 22px; height: 22px; }
  .jfv-leiste-menu.offen .ic-menu { display: none; }
  .jfv-leiste-menu:not(.offen) .ic-close { display: none; }

  .jfv-leiste-menu:not(.offen) .jfv-leiste-panel { display: none; }
  .jfv-leiste-menu.offen .jfv-leiste-panel {
    display: block;
    position: absolute; top: var(--jfv-leiste-h); left: 0; right: 0;
    background: var(--jfv-navy-deep, #142336);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 14px 28px rgba(0,0,0,.30);
    padding: 8px; max-height: calc(100vh - var(--jfv-leiste-h)); overflow-y: auto;
  }
  .jfv-leiste-panel .jfv-leiste-dienste { flex-direction: column; overflow: visible; gap: 2px; }
  .jfv-leiste-panel .jfv-leiste-dienste a {
    display: block; padding: 12px 14px; border-radius: 9px;
    font-size: 15px; color: rgba(255,255,255,.9);
  }
  .jfv-leiste-panel .jfv-leiste-dienste a.aktiv { color: var(--jfv-navy-deep, #142336); }
  /* In der gestapelten Liste trennt eine Linie OBEN statt links. */
  .jfv-leiste-panel .jfv-leiste-admin {
    border-left: 0; margin-left: 0; padding-left: 14px;
    margin-top: 6px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .jfv-leiste-panel .jfv-leiste-rechts {
    margin: 8px 2px 2px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.12);
    flex-direction: column; align-items: stretch; gap: 8px; white-space: normal;
  }
  .jfv-leiste-panel .jfv-leiste-nutzer { display: block; padding: 2px 4px 4px; opacity: .65; font-size: 13px; }
  .jfv-leiste-panel .jfv-leiste-knopf { text-align: center; padding: 11px; font-size: 15px; border-radius: 9px; }
}

@media print { .jfv-leiste { display: none; } }