/* huelle-output.css: Reiter-Art `output` (R-18, René, 30.09.2026), zu huelle-output.js.
   Links der Dateibaum, rechts der Text der gewählten Datei; auf dem Telefon untereinander. */

.outFlaeche { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 14px;
  align-items: start; }
@media (max-width: 760px) { .outFlaeche { grid-template-columns: minmax(0, 1fr); } }
.outLinks { min-width: 0; max-height: 70vh; overflow: auto; padding: 4px; border-radius: var(--rundKlein, 8px);
  background: var(--zeile); }
.outBaum, .outUnter { list-style: none; margin: 0; padding: 0; }
.outUnter { padding-left: 14px; }
.outZeile { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.outZeile:hover, .outZeile:focus-visible { background: var(--panel); outline: none; }
.outZeile[aria-current="true"] { background: var(--panel); box-shadow: inset 2px 0 0 var(--gold); }
.outPfeil { display: inline-flex; color: var(--dim); }
.outPfeil .ikon { width: 12px; height: 12px; transition: transform .12s; }
.outPfeil.offen .ikon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .outPfeil .ikon { transition: none; } }
.outLinks .verSuche { margin-bottom: 4px; }
.outName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outOrdner > .outZeile .outName { font-weight: 500; }
.outGroesse { font-size: 11.5px; color: var(--dim); }
.outAnsicht { min-width: 0; }
.outPfad { display: block; margin-bottom: 6px; font-family: var(--schriftMono, ui-monospace, monospace);
  font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.outText { margin: 0; max-height: 70vh; overflow: auto; padding: 12px; border-radius: var(--rundKlein, 8px);
  background: var(--zeile); color: var(--text); font-family: var(--schriftMono, ui-monospace, monospace);
  font-size: 12.5px; line-height: 1.5; white-space: pre; tab-size: 4; }
.outHinweis { margin: 8px 0; font-size: 13px; color: var(--dim); }
.outZeile:disabled { cursor: default; color: var(--text); }