/* ============ Seitenleiste des internen Boards (Schritt 6, 12.10.2026) ============
   Links eine feste Leiste wie in einem Dashboard: Marke, Bereiche, darunter die
   Kundenakten mit Phase und naechstem Termin (aktive Akte hervorgehoben), unten
   Verwaltung, Einstellungen (nur GF), Mein Konto, Farbmodus, Abmelden. Der Wechsel
   zwischen Akten laeuft hier, ohne „Zurueck zu den Kunden“.
   Unter 900 px wird die Leiste zur Schublade hinter dem Menue-Knopf einer schmalen
   Kopfzeile; Schliessen per Knopf, Abdunkelung, Escape oder Navigation.
   Das Portal (Kundensicht) ist davon unberuehrt und behaelt seine Kopfzeile. */
:root { --sl-breite: 256px; }

#app { display: grid; grid-template-columns: var(--sl-breite) minmax(0, 1fr); }
#seitenleiste {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 14px 12px 12px; background: var(--flaeche); border-right: 1px solid var(--linie);
}
.sl-marke { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 14px; }
.sl-marke .marke { justify-content: flex-start; text-decoration: none; border-radius: 6px; }
.sl-schliessen { display: none; padding: 4px 9px; font-size: 14px; line-height: 1; }

.sl-nav { display: grid; gap: 2px; }
.sl-nav a {
  display: block; padding: 7px 10px; border-radius: 8px;
  color: var(--gedimmt); text-decoration: none; font-size: 14px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-nav a:hover { color: var(--schrift); background: var(--flaeche2); }
.sl-nav a.aktiv { color: var(--schrift); background: var(--flaeche2); }

/* Kundenliste unter „Kunden“: Name, Phase-Chip, naechster Termin */
.sl-kunden { display: grid; gap: 1px; margin: 1px 0 4px; padding-left: 10px; }
.sl-kunde {
  display: grid; gap: 2px; padding: 6px 10px; border-radius: 8px;
  color: var(--schrift); text-decoration: none; min-width: 0;
}
.sl-kunde:hover { background: var(--flaeche2); }
.sl-kunde.aktiv { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.sl-kunde-name { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-kunde-meta {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; color: var(--gedimmt); white-space: nowrap;
}
.sl-kunde-meta > span:not(.abzeichen) { overflow: hidden; text-overflow: ellipsis; }
.sl-kunde-meta .abzeichen { font-size: 11px; padding: 0 7px; flex: none; }
.sl-kunde.aktiv .sl-kunde-meta .abzeichen { color: var(--schrift); }
.sl-kunde-fertig .sl-kunde-name { color: var(--gedimmt); font-weight: 500; }
.sl-leer { margin: 0; padding: 4px 10px 6px; font-size: 12.5px; color: var(--gedimmt); line-height: 1.45; }
.sl-leer a { color: var(--schrift); }

/* Unterer Block: Verwaltung, Konto, Farbmodus, Abmelden */
.sl-fuss { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie); display: grid; gap: 4px; }
.sl-fuss .thema-wahl { border-top: none; margin: 0; padding: 4px 10px 2px; }
.sl-wer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 0 10px; font-size: 13px; color: var(--gedimmt);
}
.sl-wer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-wer .klein-knopf { margin-left: 0; flex: none; }

/* Inhalt rechts neben der Leiste */
.board { min-width: 0; }
#app main { max-width: 1120px; padding: 28px 32px 60px; }
/* Die Abdunkelung existiert nur in der schmalen Ansicht; ueber 900 px darf sie
   nie ins Raster rutschen (sonst faellt .board in die zweite Zeile, wenn die
   Schublade beim Drehen des Tablets offen war) */
#leisten-schatten { display: none; }
/* Die Prozesslandschaft bricht aus der Textspalte aus (prozesse.css, 94vw);
   neben der Leiste bleibt ihr nur die Breite rechts davon. */
@media (min-width: 1140px) {
  #app .pz-breit { --pz-breite: min(calc(100vw - var(--sl-breite) - 56px), 1680px); }
}
.kopfzeile-schmal { display: none; }
.menue-knopf { display: inline-flex; align-items: center; gap: 8px; }
.menue-balken {
  display: inline-block; width: 16px; height: 2px; background: currentColor; position: relative;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Tastaturbedienung: ein Fokus-Ring fuer Leiste, Reiter und Knoepfe */
.sl-nav a:focus-visible, .sl-kunde:focus-visible, .sl-marke .marke:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: -2px;
}

/* Unter 900 px: Schublade statt fester Leiste */
@media (max-width: 899px) {
  #app { display: block; }
  /* zu: aus dem Bild UND aus der Tab-Reihenfolge (visibility, dazu inert aus app.js) */
  #seitenleiste {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 45;
    transform: translateX(-102%); visibility: hidden; border-right-color: transparent;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  #app.menue-offen #seitenleiste {
    transform: none; visibility: visible; transition-delay: 0s;
    border-right-color: var(--linie); box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  }
  .sl-schliessen { display: inline-flex; }
  #leisten-schatten { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .4); }
  #leisten-schatten[hidden] { display: none; }
  .kopfzeile-schmal {
    display: flex; align-items: center; gap: 12px; padding: 8px 14px;
    position: sticky; top: 0; z-index: 5;
    background: var(--kopf-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie);
  }
  #app main { padding: 20px 14px 60px; }
}
@media (prefers-reduced-motion: reduce) { #seitenleiste { transition: none; } }
@media print { #seitenleiste, .kopfzeile-schmal, #leisten-schatten { display: none !important; } #app { display: block; } }