/* ====================================================================
 * DIE LEISTE ALS ZEICHENSPALTE - eine Datei, zwei Schwellen.
 *
 * Die Regeln stehen EINMAL, hier, und OHNE eigene Medienabfrage. Wann sie
 * gelten, sagt der Verweis in grund.html (`media="(max-width: ...)"`):
 * auf jeder Seite unter 1100 px, auf dem Freigabebildschirm schon unter
 * 1440 px (UI-Umbau Teil 2, A.10) - dort sollen an 1280 px Original und
 * Positionen nebeneinander stehen. Zwei Abschriften desselben Blocks
 * liefen auseinander; ein Verweis mit Bedingung kann das nicht.
 *
 * Die Leiste wird 64 px breit und zeigt nur noch Zeichen. OHNE SKRIPT.
 * DIE WORTE BLEIBEN IM BAUM: versteckt wie `.nurlesbar`, nicht mit
 * `display: none`. Ein Screenreader liest die Leiste unveraendert; wer
 * sieht, bekommt Wort und Zahl als `title` am Verweis.
 *
 * Nach stil.css geladen: gleiche Spezifitaet, spaetere Regel gewinnt.
 * ================================================================= */

.rahmen {
  grid-template-columns: var(--leistenbreite-schmal) minmax(0, 1fr);
}

.leiste {
  gap: 18px;
  padding: 18px 10px 14px;
}

.leiste-chat-wort,
.leiste-chat-pfeil,
.leistenabschnitt-titel,
.leisteneintrag-wort,
.leisteneintrag-zahl,
.dienstkasten-text,
.profiltext,
.konto-pfeil,
.leiste .wortmarke-bild {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.leiste .wortmarke-kurz {
  display: block;
}

/* MEHR LUFT OBEN (Rueckmeldung vom 05.10.2026: um Knopf, Zeichen, Beta
 * und Mandant war es zu eng). Knopf, Marke und Mandant stehen mit 14 px
 * Abstand untereinander, eine Haarlinie trennt den Kopf von den
 * Eintraegen. Was dadurch unten nicht mehr passt, scrollt im Teil mit
 * den Abschnitten (siehe unten) - die Eintraege bleiben 34 px hoch. */
.leiste-kopf {
  align-items: center;
  gap: 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--leiste-kante);
}

.leiste .marke {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Der Chat-Knopf als Kachel allein: Wort und Pfeil stehen im Baum (oben), das Wort auch als
 * `title`. Der Punkt sitzt in der Ecke der Kachel. */
.leiste-chat {
  justify-content: center;
  padding: 4px;
  border-color: transparent;
  background: none;
}

.leiste-chat .leiste-chat-zeichen {
  width: 34px;
  height: 34px;
}

.leiste-chat-punkt {
  top: 4px;
  right: 6px;
}

.leiste .beta-marke {
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.leiste-abschnitte {
  gap: 8px;
}

/* Ohne Titel stuenden die Abschnitte aneinander; eine Haarlinie trennt
 * sie. */
.leistenabschnitt + .leistenabschnitt {
  padding-top: 8px;
  border-top: 1px solid var(--leiste-kante);
}

.leisteneintrag {
  justify-content: center;
  padding: 0;
}

/* Die Dienstlage als Punkt allein, mittig und etwas groesser - der Satz
 * steht im `title` und fuer den Screenreader im Baum. */
.dienstkasten {
  justify-content: center;
  padding: 10px 0;
  border: 0;
  background: none;
}

.dienstkasten > .dienstpunkt {
  width: 10px;
  height: 10px;
  margin-top: 0;
}

/* DER KONTOBEREICH IN DER SYMBOLSPALTE: nur die Initialen. Das Menue
 * zeigt Name und Adresse ganz; es geht neben der schmalen Leiste auf. */
.konto-knopf {
  justify-content: center;
  padding: 4px 0;
}

.kontomenue {
  left: calc(var(--leistenbreite-schmal) + 2 * var(--rand) + 8px);
}

/* Der Knopf zum Ein- und Ausklappen steht in der Symbolspalte ueber der
 * Marke und nicht in ihrer Ecke - dort ist kein Platz. So gross wie in der
 * breiten Leiste, nur flacher. */
.leistenwahl {
  position: static;
}

.leistenwahl-knopf {
  width: 36px;
  height: 30px;
}

/* 34 px je Eintrag (die Trefferflaeche liegt weit ueber den 24 px aus
 * WCAG 2.2) und 12 px Abstand zur Dienstlage. Gemessen am 25.09.2026:
 * bei 1280 x 800 passten so elf Eintraege der Sachbearbeitung. Seit dem
 * Kopf mit mehr Luft (05.10.2026) scrollt bei 800 px Hoehe der letzte
 * Eintrag in den Abschnittsteil - neu gemessen, siehe OFFENE_PUNKTE 231.
 * Wer an der Spalte aendert, misst neu. */
.leisteneintrag {
  min-height: 34px;
}

.leiste-lage {
  gap: 12px;
}

/* PASST SIE NICHT (1280 x 720, eine Verwalterin mit achtzehn Eintraegen),
 * scrollen die Abschnitte - mit einem schmalen, leisen Balken. Er liegt in
 * der rechten Polsterung der Spalte (`margin-right` ins Polster, gleich
 * viel `padding-right` zurueck): die Zeichen bleiben mittig, solange kein
 * Balken steht. Ein klassischer Balken (Maus angeschlossen) verschiebt sie
 * um die halbe Balkenbreite; ein ueberlagernder (Trackpad) um nichts.
 * In der Farbe der Haarlinien: ein dunkler Balken war auf der hellen
 * Leiste das Lauteste in der Spalte (05.10.2026). */
.leiste-abschnitte {
  margin: 0 -8px 0 -4px;
  padding: 0 8px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent;
}

/* Die Ladepille steht mittig ueber dem Inhalt neben der Zeichenspalte. */
.ladeschicht {
  left: calc(50% + (var(--leistenbreite-schmal) + var(--rand)) / 2);
}

/* Das grosse KI-Fenster beginnt neben der Zeichenspalte. */
.chat-schwebt[data-chatfenster="gross"] .chatfenster {
  left: calc(var(--leistenbreite-schmal) + 2 * var(--rand));
}