/* vitaqm-ui-fixes.css · nicht-destruktive UI-Korrekturen auf arbeit2 (Override NACH Haralds CSS) · 09.08.2026 */

/* (2) Kopf-Brand: Dachmarke „Vita Studio" bleibt sichtbar (Nutzerwunsch
   16.09.2026, wie im Live-Stand) — Kopfzeile hat mit min-height genug Platz.
   Untertitel einzeilig mit Ellipsis. Brand = "Vita Studio" + "VitaQM" + Untertitel. */
.marke{ height:auto; min-height:70px; overflow:visible; align-items:center; }
.brand{ align-items:flex-start; line-height:1.14; min-width:0; }
.brand-dach{ display:block !important; }
.marke .brand > div{ min-width:0; }
.marke .brand small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* (1) Menü: saubere Umbrüche statt mitten im Wort */
.side .nav-text{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  -webkit-hyphens:auto; hyphens:auto;
}

/* (3) Sidebar-Breite ziehbar: Griff am rechten Rand (JS setzt --nav-w) */
.side{ position:relative; }
/* … aber nur dort, wo die Navigation wirklich eine Spalte ist.
   Befund 06.09.2026, gemessen auf :8463: Diese Zeile stand ohne
   Breitenbedingung und hob damit das `position:fixed` auf, mit dem die
   Navigation unter 900 px zur Schublade wird. Die Schublade blieb dadurch im
   Raster stehen und nahm sich eine eigene Spalte — auf 360 px blieben dem
   Inhalt 50 px, auf 768 px 348 px. Der Ziehgriff braucht den Anker nur auf
   breiten Schirmen; unter 900 px gibt es ihn gar nicht. */
@media (max-width:899px){ .side{ position:fixed; } }
@media (min-width:900px) and (max-width:1199px) and (orientation:portrait){
  .side{ position:fixed; }
}
.side-resizer{ position:absolute; top:0; right:-4px; width:9px; height:100%; cursor:col-resize; z-index:40; }
.side-resizer:hover, .side-resizer.aktiv{ background:linear-gradient(90deg,transparent,rgba(14,138,156,.35)); }

/* (4) Externe-Dokument-Vorschau: deutlich größer + kleine Bilder/Scans füllen die Fläche */
.ext-vorschau{ min-height:min(84vh,920px) !important; }
.ext-vorschau img{ width:100%; height:auto; max-height:100%; object-fit:contain; cursor:zoom-in; }
.ext-vorschau img.ext-zoom{ width:auto; height:auto; max-width:none; max-height:none; object-fit:none; cursor:zoom-out; }
.ext-vorschau{ overflow:auto !important; align-items:flex-start !important; }

/* (5) Schulungsmatrix: Spaltenköpfe sprechend statt Kürzel — höher + lesbar */
.hm-kopf{ height:186px !important; width:30px !important; min-width:30px !important; }
.hm-kopf span{ color:var(--ink2) !important; max-height:174px; overflow:hidden; text-overflow:ellipsis; }
/* Balkenlisten: EINE gemeinsame Label-Spalte — der längste Text gibt die
   Spaltenbreite vor, alle Balken starten am selben Punkt. Umsetzung als
   Grid über die ganze Liste (display:contents auf den Zeilen). */
main div:has(> .row > span[title] + div + span.mono){
  display:grid!important;grid-template-columns:minmax(140px,max-content) 1fr max-content;
  column-gap:10px;row-gap:7px;align-items:center}
main div:has(> .row > span[title] + div + span.mono) > .row{display:contents!important}
main .row > span[title]:first-child{
  width:auto!important;max-width:72ch!important;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main .row > span[title] + div + span.mono{width:auto!important;white-space:nowrap}
/* Diagnosen: Donut-Karte quadratisch (Seite = Zeilenhöhe) — die Spaltenbreite
   setzt der Beobachter in ui-fixes.js exakt; hier nur Streckung + Zentrierung. */
main .grid:has(svg[viewBox='0 0 160 160']){align-items:stretch}
main .grid > div:has(svg[viewBox='0 0 160 160']){align-self:stretch;height:auto;min-width:0}
main .card:has(> svg[viewBox='0 0 160 160']){height:100%;width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center}
main .card > svg[viewBox='0 0 160 160']{height:88%!important;width:auto!important;
  aspect-ratio:1;max-width:88%;max-height:340px}