/* design-system: migriert */
/* ==========================================================================
   Dateibrowser „Projekte“ (mit Cloud Storage): Stile aus dem Entwurf
   docs/design/mockups/dateibrowser-entwurf.html (Stand 2026-10-12).
   AP-OC F3a, 2026-10-12, docs/design/PLAN-ordner-cloud.md 5.1 und 11.

   Eingebunden von app.html über extra_head, also nach style.css; seit
   AP-OC F8 (2026-10-18) ohne Schalter. Andere Seiten laden diese Datei
   nicht.

   Namensregel
   - Jede Klasse aus dem Entwurf heißt hier fb-<Name>, eins zu eins, auch
     Zustände und Varianten: item -> fb-item, is-selected -> fb-is-selected,
     badge--mix -> fb-badge--mix, body.is-dragging-files ->
     body.fb-is-dragging-files. Die Spezifität bleibt damit wie im Entwurf,
     und F3b übernimmt das Markup des Entwurfs mechanisch.
   - Jede Regel hängt an einer .fb-Klasse (nicht nur innerhalb von :is())
     oder an #storage-section.fb-usage.
   - .fb-browser ist der Container des Browsers (zusammen mit .page-wrap).
     Daran hängen die Typfarben und die Anpassungen an Bausteinen aus
     style.css.
   - Farben nur über var(). Keine neuen Token: --kind-* (Typfarben) liegt
     lokal hier, nicht in tokens.css (Plan 5.1, A18). --kind (je Eintrag)
     und --c (Punkt eines Chips) setzt das Markup.
   - Bewegung nur über Token (--dur-*, --spring, --motion-scale,
     --press-scale); tokens.css nimmt sie unter prefers-reduced-motion
     zurück, der Block am Ende dieser Datei schaltet den Rest ab.

   Zuordnung Entwurf -> Produkt. Diese Bausteine kommen aus style.css und
   shell.js und werden hier NICHT nachgebaut:
     Entwurf                    Produkt
     :root (Token)              tokens.css; nur --kind-* liegt hier
     *, html, body, button,     Grundlage aus style.css
       input, select, :focus-visible
     .page                      .page-wrap (style.css) + .fb-browser,
                                Breite --content-max wie im Entwurf
     .page-title                .page-title (style.css)
     .btn                       entfällt; die Knöpfe aus style.css bringen
                                Form und Gedrückt-Zustand selbst mit
     .btn-primary               .btn-primary (style.css)
     .btn-secondary             .btn-secondary (style.css)
     .btn-danger                .btn-danger (style.css)
     .icon-btn                  .icon-btn (style.css)
     #confirm (dialog.dlg)      confirmDialog (shell.js, .confirm-dialog)
     .toasts, .toast,           showToast (shell.js, .editor-toast); der
       .toast-msg, .toast-timer,  Zeitbalken entfällt
       .is-in, .is-out, .is-paused
     #segNav [data-seg]         #projectsTabNav.fb-seg [data-tab] (Plan 5.1)
     .demo, .demo-row           entfällt (Entwurfs-Steuerung)
   Ohne Gegenstück in style.css und deshalb hier: .fb-btn-sm,
   .fb-btn-plain, .fb-btn-danger-soft, .fb-sr-only, .fb-ic, der
   Teilen-Dialog .fb-dlg (natives <dialog>) und alles Übrige mit fb-.
   ========================================================================== */

/* ========================================================================== Typfarben */
/* Mix Blau, Beat Cyan, Master Gold (Nutzerentscheidung 2026-10-12). Gold ist
   zugleich --warning; deshalb trägt jede Warnung ein Dreieck und einen Satz,
   die Master-Plakette nie ein Symbol. Kontrast: tests/test_file_browser_css.py.
   --kind-mix-text (F3a, 2026-10-12): Schrift der Mix-Plakette. --tone-2 als
   Schrift erreicht auf ihrer 16-%-Unterlage in einer ausgewählten Zeile
   (--accent-soft über --panel) nur 3,7:1, über --panel-elevated 4,4:1. Ein
   Viertel --text-primary dazu hebt das auf mindestens 4,6:1; der Ton bleibt
   Blau. Symbole und Flächen behalten --kind-mix (3:1 genügt dort). */
.fb-browser,
#storage-section.fb-usage,
.fb-menu,
.fb-dlg {
  --kind-mix: var(--tone-2);
  --kind-beat: var(--tone-5);
  --kind-master: var(--accent-yellow);
  --kind-mix-text: color-mix(in srgb, var(--kind-mix) 75%, var(--text-primary));
}
/* Statt style="--kind:…" im Markup */
.fb-kind-mix { --kind: var(--kind-mix); }
.fb-kind-beat { --kind: var(--kind-beat); }
.fb-kind-master { --kind: var(--kind-master); }

/* ========================================================================== Grundlage */
.page-wrap.fb-browser { max-width: var(--content-max); }
/* .section-group bleibt im Markup (Plan 5.3: Einblenden der Einseitenseite),
   die Karte aus style.css nicht. Liste und Kacheln tragen ihre Fläche
   selbst, wie im Entwurf; sonst Karte in der Karte (DESIGNRICHTUNG H2).
   AP-OC F3b-Folgepunkt, 2026-10-17. */
.fb-browser .section-group { background: none; border: 0; border-radius: 0; padding: 0; }
.fb-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fb-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fb-mono { font-family: var(--font-mono); font-size: var(--size-footnote); color: var(--text-dim); font-weight: 400; }

/* ========================================================================== Knöpfe (DESIGNRICHTUNG 2.5): Ergänzungen zu style.css */
.fb-btn-plain,
.fb-btn-danger-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h-m); padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-s);
  font-size: var(--size-callout); font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.fb-btn-plain:active:not([aria-disabled="true"]),
.fb-btn-danger-soft:active:not([aria-disabled="true"]) { transform: scale(var(--press-scale)); }
.fb-btn-plain { background: transparent; color: var(--accent); }
.fb-btn-plain:hover { background: var(--fill-1); }
.fb-btn-plain:active { background: var(--fill-2); }
.fb-btn-plain.fb-is-danger { color: var(--danger); }
.fb-btn-plain.fb-is-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.fb-btn-danger-soft { background: var(--fill-2); color: var(--danger); }
.fb-btn-danger-soft:hover { background: var(--fill-3); }
:is(.btn-primary, .btn-secondary, .btn-danger, .fb-btn-plain, .fb-btn-danger-soft).fb-btn-sm { min-height: 28px; padding: 0 var(--space-3); }
.fb-browser :is(.btn-primary, .btn-secondary, .btn-danger) { white-space: nowrap; }
.fb-browser :is(.btn-secondary, .btn-danger, .fb-btn-plain, .fb-btn-danger-soft)[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.fb-browser .btn-secondary[aria-pressed="true"] { background: var(--surface-3); box-shadow: var(--shadow-s), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.fb-browser .btn-secondary[aria-pressed="true"] .fb-ic { color: var(--accent); }
.fb-browser .icon-btn[aria-pressed="true"] { color: var(--accent); }
.fb-browser .icon-btn[aria-expanded="true"] { background: var(--fill-2); color: var(--text-primary); }
@media (pointer: coarse) {
  .fb-browser :is(.btn-primary, .btn-secondary, .btn-danger, .fb-btn-plain, .fb-btn-danger-soft) { min-height: var(--hit-min); }
}

/* ========================================================================== Seitenkopf */
.fb-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.fb-page-head .page-title { margin: 0; }
.fb-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-head-actions[hidden] { display: none; }

/* ========================================================================== Kopfzeile Belegung */
/* section#storage-section.fb-usage, innen bleibt .storage-usage-panel (Plan
   5.3, onboarding.js zeigt darauf). Dessen Karte aus style.css entfällt hier;
   die Zeile hat ihren eigenen Rahmen. */
#storage-section.fb-usage { margin-bottom: var(--space-4); }
#storage-section.fb-usage .storage-usage-panel { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
#storage-section.fb-usage .fb-usage-row {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 40px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-m); border: 1px solid var(--separator);
  transition: background var(--dur-fast) var(--ease);
}
#storage-section.fb-usage .fb-usage-row:hover { background: var(--fill-1); }
#storage-section.fb-usage .fb-usage-row:has(.fb-usage-toggle:active) { background: var(--fill-2); }
.fb-usage-label { font-size: var(--size-callout); font-weight: 600; color: var(--text-secondary); }
.fb-usage-bar { flex: 1 1 auto; min-width: 64px; height: 6px; border-radius: var(--radius-full); background: var(--fill-2); overflow: hidden; }
.fb-usage-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.fb-usage-text { font-size: var(--size-footnote); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-usage-pct { color: var(--text-dim); margin-left: var(--space-1); }
.fb-usage-toggle { position: static; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: calc(var(--radius-m) - 4px); background: transparent; color: var(--text-secondary); }
.fb-usage-toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.fb-usage-toggle:focus-visible { outline: none; }
#storage-section.fb-usage .fb-usage-row:has(.fb-usage-toggle:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.fb-usage-toggle .fb-ic { transition: transform var(--dur-base) var(--ease); }
.fb-usage-toggle[aria-expanded="true"] .fb-ic { transform: rotate(180deg); }
#storage-section.fb-usage.fb-is-warn .fb-usage-fill { background: var(--warning); }
#storage-section.fb-usage.fb-is-danger .fb-usage-fill { background: var(--danger); }
#storage-section.fb-usage.fb-is-warn .fb-usage-row { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
#storage-section.fb-usage.fb-is-danger .fb-usage-row { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.fb-usage-warn { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--size-footnote); }
.fb-usage-warn[hidden] { display: none; }
#storage-section.fb-usage.fb-is-warn .fb-usage-warn { color: var(--warning); }
#storage-section.fb-usage.fb-is-danger .fb-usage-warn { color: var(--danger); }
.fb-usage-warn a { color: var(--accent); }
.fb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; }
.fb-chips[hidden] { display: none; }
.fb-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--fill-1); border: 0; font-size: var(--size-footnote); color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.fb-chip b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--kind, var(--text-dim))); }
button.fb-chip:hover { background: var(--fill-2); }
button.fb-chip:active { transform: scale(var(--press-scale)); }
button.fb-chip .fb-ic { width: 12px; height: 12px; color: var(--accent); }

/* ========================================================================== Werkzeugleiste */
.fb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
/* Segmentschalter (DESIGNRICHTUNG 2.6): im Produkt #projectsTabNav.fb-seg [data-tab] */
.fb-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-s); background: var(--fill-1); flex-shrink: 0; }
.fb-seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  height: 28px; padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-s) - 2px);
  background: transparent; color: var(--text-secondary); font-size: var(--size-callout); font-weight: 500; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.fb-seg > button:hover:not([aria-pressed="true"]) { background: var(--fill-1); color: var(--text-primary); }
.fb-seg > button:active { transform: scale(var(--press-scale)); }
.fb-seg > button:focus-visible { outline-offset: 0; }
.fb-seg > button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-primary); box-shadow: var(--shadow-s); }
.fb-seg > button[hidden] { display: none; }
.fb-seg .fb-seg-sep { width: 1px; height: 16px; background: var(--separator); margin: 0 2px; }
.fb-seg-count { min-width: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--fill-2); font-size: var(--size-caption); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fb-seg--icons > button { width: 30px; padding: 0; }
@media (pointer: coarse) { .fb-seg > button { height: 40px; } .fb-seg--icons > button { width: 44px; } }
.fb-seg-select { display: none; position: relative; flex: 1 1 100%; }
.fb-seg-select select {
  width: 100%; min-height: var(--control-h-m); padding: 0 36px 0 var(--space-3);
  appearance: none; -webkit-appearance: none; background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--radius-s); color: var(--text-primary); font: inherit; font-size: var(--size-body);
}
.fb-seg-select .fb-ic { position: absolute; right: 10px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-secondary); }
.fb-tool-right { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 280px; justify-content: flex-end; min-width: 0; }
.fb-search { position: relative; flex: 0 1 240px; min-width: 0; }
.fb-search .fb-ic { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--text-dim); pointer-events: none; }
.fb-search input {
  width: 100%; min-height: var(--control-h-m); padding: 0 var(--space-3) 0 34px;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-s);
  color: var(--text-primary); font: inherit; font-size: var(--size-body);
}
.fb-search input::placeholder { color: var(--text-dim); }
/* Umbenennen an Ort und Stelle: Feld wie die Suche (im Entwurf „search-like“) */
.fb-rename {
  width: 100%; min-height: var(--control-h-m); padding: 0 var(--space-3);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-s);
  color: var(--text-primary); font: inherit; font-size: var(--size-body);
}
.fb-search input:focus-visible,
.fb-seg-select select:focus-visible,
.fb-rename:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (pointer: coarse) { .fb-search input, .fb-seg-select select, .fb-rename { min-height: var(--hit-min); } }

.fb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-4); padding: 0; font-size: var(--size-callout); }
.fb-crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.fb-crumbs button { background: none; border: 0; min-height: var(--control-h-s); padding: 2px var(--space-1); border-radius: var(--radius-s); color: var(--text-secondary); font: inherit; }
.fb-crumbs button:hover { background: var(--fill-2); color: var(--text-primary); }
.fb-crumbs [aria-current] { color: var(--text-primary); font-weight: 600; padding: 2px var(--space-1); overflow-wrap: anywhere; }
.fb-crumbs .fb-ic { width: 12px; height: 12px; color: var(--text-dim); }
.fb-crumbs[hidden] { display: none; }

/* Mehrfachauswahl-Leiste: klebt oben, damit sie beim Scrollen langer Listen
   erreichbar bleibt. Deckende Fläche (nicht --accent-soft), weil Inhalt
   darunter durchläuft. */
.fb-selbar {
  position: sticky; top: var(--space-2); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-m); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-m);
}
.fb-selbar[hidden] { display: none; }
.fb-selbar-count { font-size: var(--size-callout); font-weight: 600; margin: 0 auto 0 0; min-width: 0; }
.fb-selbar-note { display: block; font-weight: 400; font-size: var(--size-footnote); color: var(--text-secondary); }
.fb-selbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.fb-selbar-actions [hidden] { display: none; }

/* Auswahlmodus: leere Kreise an allem, was sich auswählen lässt; Tippen wählt aus */
.fb-is-selecting .fb-item:not(.fb-is-selected):has(> .fb-item-main[aria-pressed]) .fb-selmark {
  display: grid; background: var(--panel); box-shadow: inset 0 0 0 2px var(--text-dim), 0 0 0 2px var(--panel);
}
.fb-is-selecting .fb-item:not(.fb-is-selected):has(> .fb-item-main[aria-pressed]) .fb-selmark .fb-ic { visibility: hidden; }
.fb-is-selecting .fb-item:has(> .fb-item-main[aria-pressed]):hover .fb-selmark { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px var(--panel); }

/* Suche: Treffer im Namen */
.fb-item-name mark { background: var(--accent-soft); color: var(--text-primary); border-radius: 3px; box-shadow: inset 0 -2px 0 var(--accent); }
.fb-result-hint { color: var(--text-dim); }

/* ========================================================================== Teilen-Dialog (natives <dialog>) */
.fb-dlg {
  width: min(440px, calc(100vw - 32px)); padding: var(--space-6); color: var(--text-primary);
  background: var(--panel-elevated); border: 1px solid var(--separator); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
}
.fb-dlg[open] { animation: fb-dlg-in var(--dur-spring) var(--spring); }
@keyframes fb-dlg-in { from { opacity: 0; transform: scale(calc(1 - 0.02 * var(--motion-scale))); } }
.fb-dlg::backdrop { background: var(--scrim); }
.fb-dlg-title { margin: 0; font-family: var(--font-display); font-size: var(--size-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); font-weight: 600; }
.fb-dlg-text { margin: var(--space-2) 0 var(--space-6); color: var(--text-secondary); }
.fb-dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.fb-dlg-field { display: grid; gap: var(--space-1); margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.fb-dlg-field label { font-size: var(--size-callout); font-weight: 600; color: var(--text-secondary); }
.fb-dlg-field input {
  min-height: var(--control-h-l); padding: 0 var(--space-3); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-s); color: var(--text-primary); font: inherit; font-size: var(--size-body);
}
.fb-dlg-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.fb-dlg-field input:user-invalid { border-color: var(--danger); }
.fb-dlg-field-err { margin: 0; font-size: var(--size-footnote); color: var(--danger); }
.fb-dlg-field-err[hidden] { display: none; }

/* Linkfreigabe (AP-OC F9, 2026-10-18; file_browser_share.js): „Gültig für“
   im Teilen-Dialog, „Bestehende Links“ dort und im Dialog „Links verwalten …“.
   Die Rückfrage zum Widerruf steht in der Zeile (Plan 5.7). */
.fb-share-days select {
  min-height: var(--control-h-l); padding: 0 var(--space-3); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-s); color: var(--text-primary); font: inherit; font-size: var(--size-body);
}
.fb-share-days select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.fb-share-holder { margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.fb-share-links-title { margin: 0 0 var(--space-2); font-size: var(--size-callout); font-weight: 600; color: var(--text-secondary); }
.fb-share-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; border-top: 1px solid var(--separator); }
.fb-share-list[hidden] { display: none; }
.fb-share-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--separator);
}
.fb-share-who { display: grid; gap: var(--space-1); min-width: 0; }
.fb-share-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-share-meta { font-size: var(--size-footnote); color: var(--text-dim); }
.fb-share-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
.fb-share-ask { font-size: var(--size-footnote); color: var(--text-secondary); }
.fb-share-note { margin: var(--space-2) 0 0; font-size: var(--size-footnote); color: var(--text-secondary); }
.fb-share-status { margin: var(--space-2) 0 0; font-size: var(--size-footnote); color: var(--text-secondary); }
.fb-share-status:empty { display: none; }

/* ========================================================================== Abschnitte und Gruppen */
.fb-view { animation: fb-view-in var(--dur-spring) var(--spring) both; }
@keyframes fb-view-in { from { opacity: 0; transform: translateY(calc(var(--motion-scale) * 6px)); } }
.fb-sec { margin-top: var(--space-8); }
.fb-sec:first-child { margin-top: 0; }
.fb-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.fb-sec-title { margin: 0; font-family: var(--font-display); font-size: var(--size-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fb-sec-meta,
.fb-group-meta { font-size: var(--size-footnote); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fb-group + .fb-group { margin-top: var(--space-5); }
.fb-group-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.fb-group-title { margin: 0; font-size: var(--size-callout); font-weight: 600; color: var(--text-secondary); }

/* Mein Inhalt / Von NoMix: zwei klar getrennte Bereiche */
.fb-owner { margin-top: var(--space-8); }
.fb-owner:first-child { margin-top: 0; }
.fb-owner-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.fb-owner-mark { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--fill-2); color: var(--text-primary); }
.fb-owner-mark .fb-ic { width: 18px; height: 18px; }
.fb-owner--nomix {
  padding: var(--space-4); border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fb-owner--nomix .fb-owner-mark { background: var(--accent-fill); color: var(--on-accent-fill); }
.fb-owner-head .fb-sec-meta { margin-left: var(--space-1); }

/* Von NoMix: Kategorie-Filter und Software-Hinweis */
.fb-nm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.fb-nm-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-chip[aria-pressed] { color: var(--text-secondary); }
.fb-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--text-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.fb-chip-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fb-chip[aria-pressed="true"] .fb-chip-count { color: var(--text-secondary); }
@media (pointer: coarse) { button.fb-chip { min-height: var(--hit-min); } }
.fb-nm-note { display: flex; align-items: center; gap: var(--space-2); margin: 2px 0 0; color: var(--text-secondary); font-size: var(--size-footnote); }
.fb-nm-note .fb-ic { width: 14px; height: 14px; color: var(--text-dim); }
.fb-nm-note a { color: var(--accent); border-radius: 4px; }
/* Schmal: Von NoMix eingeklappt, nur Kategorien + „Alle anzeigen“. Am PC immer offen, Knopf weg. */
.fb-nm-more { display: none; }
.fb-nm-more .fb-ic { transition: transform var(--dur-base) var(--ease); }
.fb-nm-more[aria-expanded="true"] .fb-ic { transform: rotate(180deg); }
.fb-is-tiles .fb-coll.fb-coll--nomix { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* Kachel kompakt: Kopieren als Symbolknopf in derselben Zeile, damit „Alles“ kurz bleibt */
.fb-is-tiles .fb-item.fb-k-nomix { flex-wrap: nowrap; }
.fb-is-tiles .fb-k-nomix .fb-lbl-wide { display: none; }
.fb-is-tiles .fb-k-nomix [data-act="copy"] { aspect-ratio: 1; padding: 0; }

/* Ordnerkarten in Von NoMix (Kategorie- und Themenordner, 2026-10-31): als Zeile wie die Einträge
   daneben, nicht als hohe Verweiskachel von „Deine Bereiche“. */
.fb-is-tiles .fb-coll--nomix .fb-item.fb-k-jump { align-items: center; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
.fb-is-tiles .fb-coll--nomix .fb-k-jump .fb-item-main { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
.fb-is-tiles .fb-coll--nomix .fb-k-jump .fb-item-chev { position: static; }
.fb-coll--nomix .fb-k-jump .fb-item-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Verweiskarten in „Alles“ */
.fb-k-jump .fb-item-chev { flex-shrink: 0; }
.fb-k-jump .fb-item-meta { white-space: normal; }
.fb-is-tiles .fb-coll.fb-coll--jumps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fb-is-tiles .fb-item.fb-k-jump { align-items: flex-start; padding: var(--space-3); }
.fb-is-tiles .fb-k-jump .fb-item-main { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0; }
.fb-is-tiles .fb-k-jump .fb-item-chev { position: absolute; top: var(--space-3); right: var(--space-3); }
.fb-is-tiles .fb-k-jump.fb-has-kind { border-color: color-mix(in srgb, var(--kind) 24%, var(--separator)); background: linear-gradient(180deg, color-mix(in srgb, var(--kind) 8%, var(--panel)) 0%, var(--panel) 70%); }
.fb-is-tiles .fb-k-jump.fb-has-kind:hover { border-color: color-mix(in srgb, var(--kind) 50%, var(--separator)); }
.fb-k-jump.fb-is-vault .fb-item-icon { background: linear-gradient(180deg, var(--surface-3), var(--panel-elevated)); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border); }
.fb-is-tiles .fb-k-jump.fb-is-vault {
  background-color: var(--panel-deep);
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, var(--text-primary) 2.5%, transparent) 13px 14px);
  border-color: var(--border); box-shadow: inset 0 2px 10px var(--scrim);
}
.fb-is-tiles .fb-k-jump.fb-is-vault:hover { background-color: color-mix(in srgb, var(--panel-deep) 50%, var(--bg)); border-color: var(--border-strong); }
@media (max-width: 899.98px) { .fb-is-tiles .fb-coll.fb-coll--jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .fb-is-tiles .fb-coll.fb-coll--jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb-result-count { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--size-callout); }

/* ========================================================================== Plaketten */
.fb-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--size-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); font-weight: 600; white-space: nowrap;
  font-family: var(--font-text);
}
.fb-badge .fb-ic { width: 11px; height: 11px; stroke-width: 2; }
.fb-badge--mix { color: var(--kind-mix-text); background: color-mix(in srgb, var(--kind-mix) 16%, transparent); }
.fb-badge--beat { color: var(--kind-beat); background: color-mix(in srgb, var(--kind-beat) 16%, transparent); }
.fb-badge--master { color: var(--kind-master); background: color-mix(in srgb, var(--kind-master) 16%, transparent); }
.fb-badge--nomix { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.fb-badge--lock { color: var(--text-secondary); background: var(--fill-1); }
.fb-badge--cat { color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.fb-badge--days { color: var(--text-secondary); background: var(--fill-1); font-variant-numeric: tabular-nums; }
.fb-badge--days.fb-is-soon { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }

/* ========================================================================== Einträge: gemeinsamer Aufbau */
.fb-coll { list-style: none; margin: 0; padding: 0; }
.fb-item { position: relative; }
.fb-item-main {
  display: flex; align-items: center; gap: var(--space-3); flex: 1 1 200px; min-width: 0;
  padding: var(--space-1) 0; margin: 0; background: none; border: 0; text-align: left; color: inherit; font: inherit;
}
.fb-item-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fb-item-main:focus-visible { outline: none; }
.fb-item:has(> .fb-item-main:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.fb-item-icon {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--radius-s); background: var(--fill-1); color: var(--text-secondary);
}
.fb-item-icon .fb-ic { width: 18px; height: 18px; }
.fb-k-project .fb-item-icon,
.fb-k-trash.fb-is-proj .fb-item-icon,
.fb-k-jump.fb-has-kind .fb-item-icon { background: color-mix(in srgb, var(--kind) 16%, transparent); color: var(--kind); }
.fb-item-icon .fb-wave-ico { width: 22px; height: 22px; }
.fb-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.fb-item-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.fb-item-name { font-weight: 600; font-size: var(--size-body); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fb-item-badges { display: inline-flex; gap: var(--space-1); flex-shrink: 0; }
.fb-item-meta { font-size: var(--size-footnote); color: var(--text-secondary); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--space-1); }
.fb-item-meta .fb-ic { width: 12px; height: 12px; }
.fb-item-chev { color: var(--text-dim); margin-left: auto; }
.fb-is-tiles .fb-cat-dir { display: none; }
.fb-badge-meta { display: none; padding: 0 6px; }
.fb-item-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-left: auto; }
/* .fb-lbl-wide: Beschriftung, die schmal oder in Kacheln entfällt (Regeln unten). */
.fb-thumb { display: none; }
.fb-selmark { display: none; position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent-fill); place-items: center; box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }
.fb-selmark .fb-ic { width: 12px; height: 12px; stroke-width: 2.5; }
.fb-item.fb-is-selected .fb-selmark { display: grid; }
.fb-item.fb-is-selected { background: var(--accent-soft) !important; }
.fb-drop-hint { display: none; }
/* Fortschritt eines Uploads am Ziel */
.fb-item-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fill-2); }
.fb-item-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--dur-fast) linear; }
.fb-up-text { color: var(--accent); }

/* Ablage: Hervorhebung beim Ziehen von Dateien */
body.fb-is-dragging-files [data-drop]:not(.fb-is-drop-target) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.fb-is-drop-target { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.fb-item.fb-is-drop-target .fb-drop-hint {
  display: flex; position: absolute; inset: 0; z-index: 4; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); text-align: center; pointer-events: none; border-radius: inherit;
  background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--text-primary); font-size: var(--size-callout); font-weight: 600;
}

/* ---------- Liste: ein gemeinsamer Container, eingerückte Trennlinien ---------- */
.fb-is-list .fb-coll { background: var(--panel); border: 1px solid var(--separator); border-radius: var(--radius-m); overflow: hidden; }
.fb-is-list .fb-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  min-height: 56px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  transition: background var(--dur-fast) var(--ease);
}
.fb-is-list .fb-item:not(.fb-k-trash) { flex-wrap: nowrap; }
.fb-is-list .fb-item:not(.fb-k-trash) .fb-item-main { flex-basis: 0; }
.fb-is-list .fb-item:not(:first-child)::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--separator); }
.fb-is-list .fb-item:hover { background: var(--fill-1); }
.fb-is-list .fb-item:has(> .fb-item-main:active) { background: var(--fill-2); }
.fb-is-list .fb-item:has(> .fb-item-main:focus-visible) { outline-offset: calc(-1 * var(--focus-ring-width)); border-radius: var(--radius-m); }
.fb-is-list .fb-selmark { left: 40px; top: calc(50% + 4px); }

/* ---------- Kacheln ---------- */
.fb-is-tiles .fb-coll { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fb-is-tiles .fb-coll--projects,
.fb-is-tiles .fb-coll--archived { grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); }
.fb-is-tiles .fb-coll--cats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.fb-is-tiles .fb-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  min-height: 60px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--panel); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-s);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-press) var(--ease);
}
.fb-is-tiles .fb-item:not(.fb-k-nomix):not(.fb-k-trash) { flex-wrap: nowrap; }
.fb-is-tiles .fb-item:not(.fb-k-project):not(.fb-k-nomix):not(.fb-k-trash) .fb-item-main { flex-basis: 0; }
.fb-k-nomix .fb-item-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fb-k-nomix .fb-item-title { align-items: flex-start; }
.fb-is-tiles .fb-item:hover { background: var(--panel-elevated); box-shadow: var(--shadow-m); }
.fb-is-tiles .fb-item:has(> .fb-item-main:active) { transform: scale(var(--press-scale)); }
.fb-is-tiles .fb-selmark { left: 36px; top: calc(50% + 4px); }

/* Projektkachel: Bento-Bauform, Akzent je Art */
.fb-is-tiles .fb-item.fb-k-project {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: var(--space-2);
  height: 172px; padding: var(--space-4); border-radius: var(--radius-l); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kind) 9%, var(--panel)) 0%, var(--panel) 62%);
  border-color: color-mix(in srgb, var(--kind) 24%, var(--separator));
}
.fb-is-tiles .fb-item.fb-k-project:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--kind) 12%, var(--panel-elevated)) 0%, var(--panel-elevated) 62%); border-color: color-mix(in srgb, var(--kind) 50%, var(--separator)); }
/* Maske: nur der Alphakanal zählt, die Farbe ist beliebig deckend. */
.fb-is-tiles .fb-k-project .fb-thumb {
  display: block; position: absolute; inset: 0 0 30% 0; color: var(--kind); opacity: 0.32; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--bg) 0 45%, transparent 100%); mask-image: linear-gradient(to bottom, var(--bg) 0 45%, transparent 100%);
}
.fb-is-tiles .fb-k-project .fb-thumb svg { width: 100%; height: 100%; display: block; }
.fb-is-tiles .fb-k-project .fb-item-main { flex: 0 0 auto; padding: 0; }
.fb-is-tiles .fb-k-project .fb-item-icon { display: none; }
.fb-is-tiles .fb-k-project .fb-item-name { font-size: var(--size-headline); line-height: var(--leading-headline); }
.fb-is-tiles .fb-k-project .fb-item-badges { position: absolute; top: 14px; left: 14px; z-index: 1; pointer-events: none; }
/* Auf der Wellenform braucht die Plakette eine deckende Unterlage */
.fb-is-tiles .fb-k-project .fb-badge { padding: 2px var(--space-2); box-shadow: 0 0 0 1px var(--separator); }
.fb-is-tiles .fb-k-project .fb-badge--mix { background: color-mix(in srgb, var(--kind-mix) 18%, var(--panel)); }
.fb-is-tiles .fb-k-project .fb-badge--beat { background: color-mix(in srgb, var(--kind-beat) 18%, var(--panel)); }
.fb-is-tiles .fb-k-project .fb-badge--master { background: color-mix(in srgb, var(--kind-master) 18%, var(--panel)); }
.fb-is-tiles .fb-k-project .fb-badge--lock { background: var(--panel-elevated); }
.fb-is-tiles .fb-k-project:not(.fb-is-archived) .fb-item-actions {
  position: absolute; top: 10px; right: 10px; margin: 0; padding: 2px; gap: 2px;
  border-radius: var(--radius-m); background: color-mix(in srgb, var(--panel-deep) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fb-is-tiles .fb-k-project .fb-lbl-wide { display: none; }
.fb-is-tiles .fb-k-project .fb-btn-open { width: var(--control-h-m); padding: 0; }
.fb-is-tiles .fb-k-project .fb-selmark { left: auto; right: 14px; top: auto; bottom: 14px; }
.fb-is-tiles .fb-k-project.fb-is-archived .fb-item-actions { margin: 0; }
.fb-is-archived .fb-thumb { color: var(--text-dim) !important; opacity: 0.3 !important; }
.fb-is-tiles .fb-item.fb-k-project.fb-is-archived { background: var(--panel); border-color: var(--separator); }
.fb-is-archived .fb-item-icon { background: var(--fill-1) !important; color: var(--text-dim) !important; }

/* Spezialordner Archiv: eingelassene Fläche, Schrank statt Ordner */
.fb-vault-banner .fb-vault-icon {
  width: 40px; height: 40px; border-radius: var(--radius-s);
  background: linear-gradient(180deg, var(--surface-3), var(--panel-elevated)); border: 1px solid var(--border);
  color: var(--text-primary); box-shadow: var(--shadow-s);
}
.fb-vault-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background-color: var(--panel-deep);
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, var(--text-primary) 2.5%, transparent) 13px 14px);
  border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: inset 0 2px 10px var(--scrim);
}
.fb-vault-banner .fb-vault-icon { display: grid; place-items: center; flex-shrink: 0; }
.fb-vault-banner .fb-vault-icon .fb-ic { width: 20px; height: 20px; }
.fb-vault-banner .fb-sec-meta { margin-left: auto; }

/* NoMix-Inhalte: Schloss statt Löschen */
.fb-k-nomix .fb-item-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Papierkorb */
.fb-trash-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--fill-1); border-radius: var(--radius-m);
}
.fb-trash-bar p { margin: 0; color: var(--text-secondary); font-size: var(--size-callout); flex: 1 1 260px; }
.fb-trash-bar strong { color: var(--text-primary); }

/* Projektordner */
.fb-proj-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: var(--space-5); margin-bottom: var(--space-4); border-radius: var(--radius-l);
  background: linear-gradient(135deg, color-mix(in srgb, var(--kind, var(--text-dim)) 10%, var(--panel)) 0%, var(--panel) 55%);
  border: 1px solid color-mix(in srgb, var(--kind, var(--text-dim)) 28%, var(--separator));
}
.fb-proj-head.fb-is-folder { background: var(--panel); border-color: var(--separator); }
.fb-proj-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-m); background: color-mix(in srgb, var(--kind) 16%, transparent); color: var(--kind); }
.fb-proj-icon svg { width: 36px; height: 36px; }
.fb-proj-head.fb-is-folder .fb-proj-icon { background: var(--fill-1); color: var(--text-secondary); }
.fb-proj-head.fb-is-folder .fb-proj-icon .fb-ic { width: 26px; height: 26px; }
.fb-proj-title { margin: 0; font-family: var(--font-display); font-size: var(--size-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); font-weight: 600; overflow-wrap: anywhere; }
.fb-proj-title:focus { outline: none; }
.fb-proj-meta { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--size-footnote); font-variant-numeric: tabular-nums; }
.fb-proj-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.fb-subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-6) 0 var(--space-3); }
.fb-subbar-title { margin: 0; font-size: var(--size-callout); font-weight: 600; color: var(--text-secondary); display: inline-flex; gap: var(--space-2); align-items: baseline; }
.fb-dropzone {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5); padding: var(--space-5) var(--space-4); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-m); color: var(--text-secondary); font-size: var(--size-callout);
  position: relative; overflow: hidden; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fb-dropzone .fb-ic { color: var(--text-dim); width: 20px; height: 20px; }
.fb-dropzone .fb-up-text { flex-basis: 100%; }

.fb-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4);
  text-align: center; color: var(--text-secondary); border-radius: var(--radius-m); background: var(--fill-1);
}
.fb-empty p { margin: 0; max-width: 46ch; }
.fb-empty > .fb-ic { width: 28px; height: 28px; color: var(--text-dim); }

/* ========================================================================== Menü */
/* Ausgangspunkt der Bewegung ist der Auslöser: transform-origin setzt der
   Kern beim Öffnen (Entwurf: Position am Knopf). */
.fb-menu {
  position: fixed; z-index: 50; min-width: 220px; max-width: calc(100vw - 32px); padding: var(--space-1);
  background: var(--panel-elevated); border: 1px solid var(--separator); border-radius: var(--radius-m); box-shadow: var(--shadow-l);
  opacity: 0; transform: scale(calc(1 - 0.03 * var(--motion-scale)));
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-spring) var(--spring);
}
.fb-menu.fb-is-open { opacity: 1; transform: none; }
.fb-menu[hidden] { display: none; }
.fb-menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-h-m);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s); background: none; text-align: left;
  font: inherit; font-size: var(--size-callout); color: var(--text-primary);
}
.fb-menu-item:hover,
.fb-menu-item:focus-visible { background: var(--fill-2); outline: none; }
.fb-menu-item.fb-is-danger { color: var(--danger); }
.fb-menu-item[aria-disabled="true"] { color: var(--text-secondary); cursor: not-allowed; }
.fb-menu-item[aria-disabled="true"]:hover { background: none; }
.fb-menu-sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--separator); }
@media (pointer: coarse) { .fb-menu-item { min-height: var(--hit-min); } }

/* ========================================================================== Fuß: Tastenlegende */
.fb-kbd-legend { margin: var(--space-10) 0 0; color: var(--text-dim); font-size: var(--size-footnote); line-height: 2; }
.fb-kbd-legend kbd { font-family: var(--font-mono); font-size: var(--size-caption); padding: 1px 6px; border-radius: 4px; background: var(--fill-1); color: var(--text-secondary); box-shadow: inset 0 -1px 0 var(--border); }

/* ========================================================================== Schmale Viewports */
@media (max-width: 719.98px) {
  .fb-seg--nav { display: none; }
  .fb-seg-select { display: block; }
  .fb-tool-right { flex-basis: 100%; }
  .fb-search { flex: 1 1 auto; }
  .fb-proj-head { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
  .fb-proj-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .fb-nm-more { display: inline-flex; }
  .fb-owner--nomix.fb-is-collapsed .fb-coll--nomix { display: none; }
  .fb-owner--nomix.fb-is-collapsed .fb-nm-bar { margin-bottom: 0; }
}
@media (max-width: 559.98px) {
  .fb-page-head { align-items: stretch; }
  .fb-head-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .fb-lbl-wide { display: none; }
  .fb-btn-open { width: var(--control-h-m); padding: 0; }
  .fb-selbar-actions :is(.btn-primary, .btn-secondary, .btn-danger, .fb-btn-plain, .fb-btn-danger-soft) { padding: 0 var(--space-2); min-width: var(--control-h-m); }
  .fb-usage-label { display: none; }
  .fb-owner--nomix { padding: var(--space-3); }
  .fb-is-tiles .fb-item.fb-k-project { height: 140px; }
  /* Liste schmal: Typ-Plakette in die Meta-Zeile, damit der Name Platz hat */
  .fb-is-list .fb-k-project:not(.fb-is-archived) .fb-item-badges { display: none; }
  .fb-is-list .fb-k-project .fb-badge-meta { display: inline-flex; }
  .fb-proj-icon { width: 44px; height: 44px; }
  .fb-proj-icon svg { width: 28px; height: 28px; }
}

/* ========================================================================== Reduced Motion */
/* tokens.css setzt Federn, Dauern, --press-scale und --motion-scale schon
   zurück; Ansicht, Menü und Dialog kommen damit ohne Weg, nur überblendet.
   Hier fällt zusätzlich weg, was ohne Token wackelt: das Drehen der Pfeile
   und das Mitlaufen des Fortschrittsbalkens. */
@media (prefers-reduced-motion: reduce) {
  .fb-usage-toggle .fb-ic,
  .fb-nm-more .fb-ic,
  .fb-item-progress > span { transition: none; }
}

/* ========================================================================== Handy hochkant */
@media (max-width: 640px) {
  .fb-browser { overflow-x: clip; padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); }
  .fb-search input, .fb-seg-select select, .fb-rename { font-size: 16px; min-height: 44px; }
  .fb-btn-open, .fb-menu-item, button.fb-chip { min-height: 44px; }
  .fb-page-head .page-title { font-size: clamp(1.5rem, 7vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
  .fb-menu { max-width: calc(100vw - 2 * var(--space-3)); }
  dialog.fb-dialog, .fb-browser dialog {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh;
    border-radius: var(--radius-l); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  .fb-kbd-legend { display: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .fb-browser dialog[open] { animation: fb-sheet-in 280ms cubic-bezier(.32,.72,0,1); }
  @keyframes fb-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}