/*
  workspace-bento-ordner.css — Ordner-Bento, Ordner-Ansicht, Notiz- und Freigeben-Fenster, Hinweis-Karte
  (Logik: workspace-bento-ordner.js).

  Kurzbeschreibung (für Laien): So sehen die gemeinsamen Ordner aus — auf dem Bento ein Ordner-Symbol im runden
  Kästchen, darunter der Name fett und klein die Anzahl der Einträge bzw. „geteilt mit N". Die Ordner-Ansicht ist ein
  Fenster im Bento-Look (Baustein „Dialog", marke/bausteine/43-dialog.html): oben Brotkrumen und die Knöpfe
  (Freigeben, Neu, Hochladen ganz außen), darunter die Liste mit Zeilen, die beim Überfahren hinterlegt werden.
  Wiederverwendet: .wb-fenster, .wb-knopf, .wb-feld, .wb-pille, .wb-kontext, .wb-meldung aus workspace-bento.css.
  Nur Marken-Werte, nur Inter. Ebene unter dem Rückfrage-Fenster (A4HDialog, 100) und dem Menü (95).
*/

/* ── Bento ── */
.wor-kachel { flex: 1; min-height: 0; display: flex; align-items: center; gap: 12px; }
.wor-kachel.klein, .wor-kachel.hoch { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.wor-kachel.gross { justify-content: center; gap: 16px; }
.wor-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.wor-name { display: block; font: 700 14px/1.3 var(--marke-schrift); color: var(--wb-text, var(--marke-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wor-unter { display: inline-flex; align-items: center; justify-content: inherit; gap: 4px; font-size: 12px; color: var(--wb-leise, var(--marke-text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wor-kachel.klein .wor-unter, .wor-kachel.hoch .wor-unter { justify-content: center; }
.wor-geteilt { display: inline-flex; align-items: center; gap: 3px; }
.wor-geteilt svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wor-symbol { flex: none; width: 44px; height: 44px; border-radius: var(--marke-r-l, 12px); display: inline-flex; align-items: center; justify-content: center;
  background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); }
.wor-symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wor-kachel.hoch .wor-symbol, .wor-kachel.gross .wor-symbol { width: 64px; height: 64px; }
.wor-kachel.hoch .wor-symbol svg, .wor-kachel.gross .wor-symbol svg { width: 30px; height: 30px; }

/* ── Fenster-Grundlage (Ordner-Ansicht und kleine Fenster darüber) ── */
.wor-hinter { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--marke-abdunklung); font-family: var(--marke-schrift); }
.wor-hinter.wor-oben { z-index: 92; }
.wor-fenster { position: relative; width: 100%; max-width: 760px; height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column; gap: 12px;
  padding: 20px 24px 24px; box-sizing: border-box; overflow: hidden; }
.wor-fenster.wor-ziehen { box-shadow: var(--marke-schatten), 0 0 0 2px var(--marke-akzent); }
.wor-fenster svg, .wor-klein svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Kopf: Brotkrumen links, Knöpfe rechts (Hauptknopf außen), Schließen ganz rechts */
.wor-kopf { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.wor-krumen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; }
.wor-krume { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; padding: 6px 8px; border-radius: var(--marke-r-m, 9px);
  font: 600 13px var(--marke-schrift); color: var(--wb-leise, var(--marke-text-2)); cursor: pointer; }
.wor-krume:hover { background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); }
.wor-krume.aktiv { font: 700 15px var(--marke-schrift); color: var(--wb-text, var(--marke-text)); cursor: default; }
.wor-krume.aktiv:hover { background: none; }
.wor-trenn { flex: none; display: inline-flex; color: var(--wb-leise, var(--marke-text-3)); }
.wor-trenn svg { width: 14px; height: 14px; }
.wor-aktionen { display: flex; align-items: center; gap: 8px; flex: none; }
.wor-aktionen svg { width: 15px; height: 15px; }
.wor-zahl { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--marke-r-pill); background: var(--wb-karte, var(--marke-flaeche));
  font-size: 11px; line-height: 18px; text-align: center; box-sizing: border-box; }
.wor-info { font-size: 12px; color: var(--wb-leise, var(--marke-text-2)); padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Liste */
.wor-liste { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px; }
.wor-zeile { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--marke-r-l, 12px); cursor: pointer; outline: none; transition: background .15s; }
.wor-zeile:hover { background: var(--wb-weich, var(--marke-flaeche-2)); }
.wor-zeile:focus-visible { box-shadow: 0 0 0 2px var(--marke-akzent); }
.wor-zsym { flex: none; width: 36px; height: 36px; border-radius: var(--marke-r-m, 9px); display: inline-flex; align-items: center; justify-content: center;
  background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-leise, var(--marke-text-2)); }
.wor-zsym svg { width: 18px; height: 18px; }
.wor-zsym.ordner { background: var(--marke-nav-kachel); color: var(--marke-nav-blau); }
.wor-zeile:hover .wor-zsym:not(.ordner) { background: var(--wb-karte, var(--marke-flaeche)); }
.wor-ztext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wor-ztext b { font: 600 13px var(--marke-schrift); color: var(--wb-text, var(--marke-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wor-ztext small { font-size: 12px; color: var(--wb-leise, var(--marke-text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wor-mehr { flex: none; opacity: 0; transition: opacity .15s; }
.wor-zeile:hover .wor-mehr, .wor-zeile:focus-within .wor-mehr { opacity: 1; }
@media (pointer: coarse) { .wor-mehr { opacity: 1; } }
.wor-leer { margin: auto; padding: 24px; max-width: 360px; text-align: center; font-size: 13px; color: var(--wb-leise, var(--marke-text-2)); }

/* Ladekreis mittig über dem Inhalt */
.wor-lade { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--marke-ladekreis);
  background: color-mix(in srgb, var(--wb-karte, var(--marke-flaeche)) 70%, transparent); border-radius: inherit; z-index: 2; }
.wor-lade.an { display: flex; }

/* ── Kleine Fenster: Notiz, Freigeben ── */
.wor-klein { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; box-sizing: border-box; }
.wor-klein.wor-teilen { max-width: 560px; }
.wor-kkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wor-kkopf .wb-fenster-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wor-notiz { min-height: 160px; resize: vertical; }
.wor-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0 0 8px; font: 600 12px var(--marke-schrift); color: var(--wb-leise, var(--marke-text-2)); }
.wor-kfuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wor-luecke { flex: 1; }
.wor-hinweistext { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wb-leise, var(--marke-text-2)); }
.wor-personen { position: relative; min-height: 80px; display: flex; flex-direction: column; gap: 2px; }
.wor-person { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--marke-r-l, 12px); transition: background .15s, opacity .15s; }
.wor-person:hover { background: var(--wb-weich, var(--marke-flaeche-2)); }
.wor-person.laeuft { opacity: .55; pointer-events: none; }
.wor-kreis { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--marke-nav-kachel); color: var(--marke-nav-blau); font: 700 13px var(--marke-schrift); }
.wor-recht { flex: none; flex-wrap: nowrap; }
.wor-recht .wb-pille { height: 28px; padding: 0 10px; }
@media (max-width: 520px) {
  .wor-person { flex-wrap: wrap; }
  .wor-recht { width: 100%; padding-left: 44px; box-sizing: border-box; }
  .wor-fenster { padding: 16px; height: calc(100vh - 32px); }
  .wor-aktionen .wb-knopf-klein { padding: 0 10px; }
  .wor-kopf { flex-wrap: wrap; }
  .wor-krumen { order: 1; flex-basis: calc(100% - 48px); }
  .wor-zu { order: 2; }
  .wor-aktionen { order: 3; width: 100%; flex-wrap: wrap; }
}

/* ── Hinweis-Karte („… hat dich zum Ordner … hinzugefügt") ── */
:root.ws-bento .wb-meldung.wor-hinweis { flex-wrap: wrap; }
.wor-hinweis-knoepfe { display: flex; gap: 8px; width: 100%; padding-left: 20px; box-sizing: border-box; }
.wb-meldung-knopf.wor-leise { background: var(--wb-weich, var(--marke-flaeche-2)); color: var(--wb-text, var(--marke-text)); }
.wb-meldung-knopf.wor-leise:hover { background: color-mix(in srgb, var(--wb-text, var(--marke-text)) 10%, var(--wb-karte, var(--marke-flaeche))); }