/* Ekasit-Hülle – Korrekturen für schmale Fenster und Windows-Scrollbalken.
   Prototyp 0.1.1 (v2). Kandidat für ekasit.css 0.4.2 – nur Hüllen-Regeln, nichts ToDo-Spezifisches. */

/* 1. Reiterleisten: wenn der Platz nicht reicht, umbrechen – kein Scroll-Container mehr.
   (overflow-x:auto machte die Leiste zum Scroll-Container; als Grid-Kind in einer scrollenden Karte fiel sie in Chrome auf 1 px zusammen
   und zeigte nur noch Scrollbalken – das war der Fehler im Detailfenster.) */
.reiter { flex-wrap: wrap; overflow: visible; row-gap: 2px; }

/* 2. Scrollbalken im Ekasit-Look: schmal, ohne Pfeile (Windows zeigt sonst graue Pfeilbalken) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
[data-design="hell"] * { scrollbar-color: rgba(3,37,108,.28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; }
[data-design="hell"] ::-webkit-scrollbar-thumb { background: rgba(3,37,108,.28); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* 3. Kopfleiste: Suche schrumpft zuerst, die rechte Gruppe (Uhr, Knöpfe, Benutzer) bleibt immer sichtbar */
.kopfleiste { flex-wrap: nowrap; }
.kopfleiste .suche { flex: 0 1 380px; min-width: 120px; }
.kopfleiste .status, .kopfleiste .uhren, .kopfleiste .knopf, .kopfleiste .benutzer { flex-shrink: 0; }
.kopfleiste .benutzer .name, .kopfleiste .benutzer .rolle { white-space: nowrap; }
@media (max-width: 1100px) {
  .kopfleiste .benutzer .name, .kopfleiste .benutzer .rolle { display: none; }
  .kopfleiste .benutzer { padding-left: 6px; margin-left: 0; }
}
@media (max-width: 860px) {
  .kopfleiste { padding: 0 14px; gap: 8px; }
  .kopfleiste .suche { flex-basis: 170px; }
  .kopfleiste .suche kbd { display: none; }
}

/* 4. Seitenleiste als schmale Leiste (< 960 px): nur das Logo, kein Text hinter dem Logo */
@media (max-width: 960px) {
  .seitenleiste { overflow: hidden; }
  .leistenkopf { justify-content: center; padding: 14px 0 8px; gap: 0; }
  .leistenkopf .kopf { display: none; }
  .leistenkopf .logo { width: 46px; height: 46px; flex-basis: 46px; }
}

/* 5. Ausgefahrene Seitenleiste (< 640 px): volle Breite mit Text, Schatten, darüber ein Abdunkler */
@media (max-width: 640px) {
  :root { --side-w: 300px; }
  .seitenleiste { width: var(--side-w); flex-basis: var(--side-w); box-shadow: 16px 0 40px rgba(0,0,0,.35); }
  .seitenleiste.offen .leistenkopf { justify-content: flex-start; padding: 14px 14px 8px 15px; gap: 12px; }
  .seitenleiste.offen .leistenkopf .kopf { display: block; }
  .seitenleiste.offen .untermenue { display: block; }
  .seitenleiste.offen .kontextwahl { display: block; }
  .seitenleiste-abdunkler { position: fixed; inset: 0; background: rgba(2,10,40,.55); z-index: 29; }
  .seitenleiste-abdunkler[hidden] { display: none; }
}

/* 6. Formulare und Karten dürfen nie breiter werden als ihr Platz */
.karte, .formular, .kv, .feld { min-width: 0; max-width: 100%; }
input, select, textarea { max-width: 100%; }