/* ================= Runde 2f LEISTE (.sl-): Seitenleiste mit klaren Gruppen =================
   Titel kräftig (Textfarbe, 700), Einträge ruhig (--muted, 400). Ab 901 px scrollt nur die Liste, der Fuss bleibt immer sichtbar.
   Kein Rot und keine Markenfarbe in Titeln und Fuss (gilt für iPersonal und MediPersonal gleich). styles.css bleibt unverändert. */

.sidebar .sl-titel { user-select: none; pointer-events: none; }

/* ---------- Ab 901 px: Gruppentitel, interne Liste, abgetrennter Fuss ---------- */
@media (min-width: 901px) {
  .sidebar .sl-titel { display: flex; align-items: center; gap: 8px; margin: 16px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; line-height: 1.2; color: var(--silber); }
  html[data-theme="light"] .sidebar .sl-titel { color: var(--text); }
  .sidebar .sl-titel::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); }
  .sidebar .nav-main > .sl-titel:first-of-type { margin-top: 12px; }

  /* Liste scrollt intern. Negativer Rand mit gleichem Innenabstand: der aktive Strich (.nav-item.active::before, left -14px) bleibt ganz,
     4 px oben und unten für den Fokus-Ring (2 px Abstand plus 2 px Linie) */
  .sidebar.glass { overflow: hidden; }
  .sidebar .nav-main { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -14px; padding: 4px 14px 6px;
    scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; overscroll-behavior: contain; }
  .sidebar .nav-main > * { flex-shrink: 0; }   /* Einträge und Titel behalten ihre Höhe, die Liste scrollt statt zu stauchen */

  /* Fuss: Darstellung, Name, Rundruf, Einstellungen, Abmelden */
  .sidebar .sl-fuss { flex: none; margin: 10px -14px -14px; padding: 12px 14px 14px; border-top: 1px solid var(--line-strong);
    background: linear-gradient(180deg, var(--flaeche-2), var(--sb)); transition: box-shadow .2s ease; }
  .sidebar .sl-fuss .thema-wahl { margin-top: 0; }
  .sidebar.sl-mehr .sl-fuss { box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .55); }
  html[data-theme="light"] .sidebar.sl-mehr .sl-fuss { box-shadow: 0 -10px 18px -12px rgba(17, 17, 26, .30); }
  /* Weitere Einträge unten: der letzte sichtbare Teil der Liste blendet aus (deutlicher als nur der Schatten, Korrektur 2f).
     Steht unten ein Gruppentitel ohne lesbaren ersten Eintrag, setzt app.js (leisteMaske) --sl-maske-a/-b: Titel und Zeile blenden zusammen aus (Schluss-Korrektur 2f) */
  .sidebar.sl-mehr .nav-main { -webkit-mask-image: linear-gradient(180deg, #000 var(--sl-maske-a, calc(100% - 40px)), rgba(0, 0, 0, .12) var(--sl-maske-b, 100%));
    mask-image: linear-gradient(180deg, #000 var(--sl-maske-a, calc(100% - 40px)), rgba(0, 0, 0, .12) var(--sl-maske-b, 100%)); }
  /* Tastatur: der fokussierte Eintrag wird über der Ausblendzone gehalten (scroll-padding) und nie ausgeblendet (Maske aus, solange der Fokus in der Liste ist) */
  .sidebar .nav-main { scroll-padding: 8px 0 44px; }
  .sidebar.sl-mehr .nav-main:focus-within { -webkit-mask-image: none; mask-image: none; }

  /* Fuss mit Rundruf, Einstellungen und Abmelden: Rolle nur als Titel, damit Vor- und Nachname ganz lesbar sind (Vermittler: nur Abmelden, Rolle bleibt) */
  .sidebar .sl-fuss .sidebar-foot:has([data-action="glocke"]) { gap: 2px; }
  .sidebar .sl-fuss .sidebar-foot:has([data-action="glocke"]) .who { margin: 0 2px 0 6px; }
  .sidebar .sl-fuss .sidebar-foot:has([data-action="glocke"]) .who span { display: none; }
  .sidebar .sl-fuss .sidebar-foot:has([data-action="glocke"]) .btn.icon { width: 24px; height: 24px; min-height: 24px; }
  .sidebar .sl-fuss .sidebar-foot:has([data-action="glocke"]) .btn.icon svg.i { width: 16px; height: 16px; }
}

/* Niedrige Fenster bis Full HD (Browserfenster rund 950 bis 1050 px hoch): Einträge kompakt, Titel enger (nie kleinere Schrift).
   Bis Runde 2f galt das nur bis 940 px, dazwischen sprang der Überlauf (bei 950 px war „Verlauf“ verdeckt). */
@media (min-width: 901px) and (max-height: 1080px) {
  .sidebar .nav-main .nav-item { height: 34px; }
  .sidebar .sl-titel { margin: 10px 10px 4px; }
  .sidebar .nav-main > .sl-titel:first-of-type { margin-top: 10px; }
}

/* Sehr niedrige Fenster: Rückfall wie bis Runde 2e, die ganze Leiste scrollt */
@media (min-width: 901px) and (max-height: 560px) {
  .sidebar.glass { overflow-y: auto; }
  .sidebar .nav-main { flex: none; overflow: visible; margin: 0; padding: 0; }
  .sidebar .sl-fuss { margin-top: auto; }
}

/* ---------- Bis 900 px: waagrechte Pillenleiste, Titel als kleine Beschriftungen, Fuss wie bisher in der Kopfleiste ---------- */
@media (max-width: 900px) {
  .sidebar .sl-fuss { display: contents; }
  .sidebar .sl-titel { display: inline-flex; flex: none; align-items: center; align-self: center; height: 34px; margin: 0 0 0 4px; padding: 0 2px 0 10px;
    border-left: 1px solid var(--line-strong); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--muted);
    white-space: nowrap; }
  .sidebar .nav-main > .sl-titel:first-of-type { margin-top: 0; }   /* struktur.css setzt sonst 10 px oben, die Pillenleiste würde höher */
  .sidebar .sl-titel::after { content: none; }
}

@media (prefers-reduced-motion: reduce) { .sidebar .sl-fuss { transition: none; } }