/*
  workspace-bento-projektordner.css — Aussehen des Projektordners (Reiter + Listen) im Projekt-Detail, gehört zu workspace-bento-projektordner.js.
  Kurzbeschreibung (für Laien): Reiterleiste über dem Projekt, darunter schlichte Listen mit Zusatzzeile und Pille rechts, Eingabeformulare ohne
  Beispieltexte. Farben und Formen nur aus der Marke / den Seiten-Token, keine farbigen Seitenstreifen.
*/
.po-tabs { margin: 0 0 16px; }
.po-pane[hidden], [data-pj-stand][hidden] { display: none; }
.po-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.po-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--marke-r-m, 9px); background: var(--bs-weich); }
.po-klick { cursor: pointer; }
.po-klick:hover { background: color-mix(in srgb, var(--marke-nav-blau) 8%, var(--bs-weich)); }
.po-klick:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; }
.po-zt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.po-zt b { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.po-zt small { font-size: 12px; color: var(--bs-leise); overflow-wrap: anywhere; }
.po-leer, .po-unter { margin: 0; font-size: 13px; color: var(--bs-leise); }
.po-leer { padding: 12px 4px; }
.po-unter { margin-top: 12px; }
.po-raum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.po-raum .po-unter { margin-top: 0; }
.po-aktion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.po-form { max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.po-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.po-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--bs-leise); }
.po-fehl { margin: 0; font-size: 12.5px; color: var(--marke-gefahr); }
@media (max-width: 900px) { .po-zwei { grid-template-columns: 1fr; } }