/* ===== Basis: Markenfarben, Reset und gemeinsame Hilfsklassen =====
   Design-Tokens (Schrift, Abstände, Rundungen) kommen von Web Awesome (--wa-*),
   die Luminos-Farben stehen hier und werden weiter unten auf die --wa-color-brand-* Tokens gelegt. */
:root {
  --ink: #05141e;
  --deep: #143237;
  --sage: #d2e6d2;
  --amber: #e6a032;
  --canvas: #f0f5f5;
  --green: #73aa73;
  --muted: #607074;
  --line: #dfe7e5;
  --white: #fff;
  --font-brand: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-brand);
  color: var(--ink);
  background: var(--white);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 650; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
svg { display: block; flex: none; width: 21px; height: 21px; }
button svg { pointer-events: none; }
.icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
}
.icon-button:hover { background: var(--canvas); }
.icon-button svg { width: 18px; height: 18px; }
.field-hint { color: var(--muted); font-size: var(--wa-font-size-s); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== Ladebildschirm, Login und Ablage-Overlay ===== */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wa-space-l); height: 100dvh; text-align: center; }
.boot .spinner { font-size: 2rem; --indicator-color: var(--deep); }
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--wa-space-2xl) var(--wa-space-m); background: var(--canvas); }
.login-card { width: min(440px, 100%); --spacing: var(--wa-space-2xl); }
.login-card::part(body) { display: flex; flex-direction: column; gap: var(--wa-space-l); }
.login-logo { align-self: center; width: 72px; height: 72px; border-radius: 50%; }
.login-intro { display: flex; flex-direction: column; gap: var(--wa-space-xs); text-align: center; }
.login-intro h1 { font-size: var(--wa-font-size-xl); }
.login-intro p { color: var(--muted); }
.login-intro .password-account { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.login-google { width: 100%; }
.google-mark { display: block; width: 18px; height: 18px; }
.login-divider { display: flex; align-items: center; gap: var(--wa-space-s); color: var(--muted); font-size: var(--wa-font-size-s); }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-form { display: flex; flex-direction: column; gap: var(--wa-space-m); }
.drop-overlay {
  position: fixed;
  inset: var(--wa-space-m);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wa-space-s);
  border: 2px dashed var(--deep);
  border-radius: 20px;
  background: #f0f5f5fa;
  pointer-events: none;
}
.drop-icon svg { width: 44px; height: 44px; color: var(--green); }
.drop-overlay p { color: var(--muted); }

/* ===== Seitenleiste: ausgeklappt (232 px) oder nur Icons (72 px), im navigation-Slot von <wa-page> ===== */
.app-shell {
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 72px;
}

.sidebar {
  position: relative;
  width: var(--sidebar-width);
  height: calc(100dvh - var(--banner-height, 0px));
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 12px;
  border-right: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
}
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 0 4px;
  margin-bottom: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; border-radius: 12px; }
.brand-badge { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; white-space: nowrap; }
.brand-text strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.brand-text span { font-size: 12px; color: var(--muted); }
.sidebar-toggle { color: var(--muted); }
.sidebar-toggle:hover { color: var(--ink); }
.toggle-mobile { display: none; }

.sidebar-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.primary-navigation { margin-bottom: 20px; }
.nav-heading { margin: 0 12px 6px; font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
}
.nav-item:hover { background: var(--canvas); color: var(--ink); }
.nav-item.active { background: var(--sage); color: var(--deep); font-weight: 650; }
.nav-item svg { width: 20px; height: 20px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Collection names follow one pattern and only differ at the end, so they wrap in full instead of being cut. */
.collection-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.collection-heading { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 6px; }
.collection-heading .nav-heading { margin-bottom: 0; }
.collection-initial { display: none; }
.collection-actions { display: flex; align-items: center; }
.collection-actions .icon-button { width: 30px; height: 30px; margin-right: 6px; color: var(--muted); }
.collection-actions .icon-button svg { width: 18px; height: 18px; }
.folder-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.folder-row .nav-item { flex: 1; min-width: 0; margin-bottom: 0; font-weight: 650; }
.folder-edit { flex: none; width: 28px; height: 28px; color: var(--muted); opacity: 0; }
.folder-row:hover .folder-edit, .folder-edit:focus-visible { opacity: 1; }
@media (hover: none) { .folder-edit { opacity: 1; } }
.folder-children { display: none; margin: 0 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--line); }
.folder-group.open > .folder-children { display: block; }
.folder-empty { padding: 4px 8px; font-size: 12px; }
.sidebar-hint { padding: 4px 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }

.sidebar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.profile-button {
  flex: 1 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}
.profile-button:hover { background: var(--canvas); }
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
}
.profile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.profile-text strong, .profile-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-text strong { font-size: 14px; }
.profile-text span { font-size: 12px; color: var(--muted); }
.sidebar-footer .icon-button { color: var(--muted); }
.sidebar-footer .icon-button:hover { color: var(--ink); }
.profile-storage { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--canvas); color: var(--muted); font-size: 13px; }

/* Griff am rechten Rand zum Ändern der Breite */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 6px;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .15s;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.sidebar-resizing .sidebar-resizer::after { background: var(--amber); }
.sidebar-resizer:focus-visible { outline: none; }
.sidebar-resizing, .sidebar-resizing * { cursor: col-resize !important; user-select: none; }
.sidebar-collapsed .sidebar-resizer { display: none; }

/* Eingeklappt: nur Icons, Namen erscheinen als Tooltip (title) */
.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
.sidebar-collapsed .sidebar-top { flex-direction: column; gap: 12px; padding: 0; }
.sidebar-collapsed .brand-text,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-count,
.sidebar-collapsed .nav-heading,
.sidebar-collapsed .collection-name,
.sidebar-collapsed .sidebar-hint,
.sidebar-collapsed .profile-text { display: none; }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 9px 0; }
.sidebar-collapsed .collection-actions { flex-direction: column; }
.sidebar-collapsed .collection-actions .icon-button { margin: 0; }
.sidebar-collapsed .folder-row, .sidebar-collapsed .folder-empty { display: none; }
.sidebar-collapsed .folder-children, .sidebar-collapsed .folder-group:not(.open) > .folder-children { display: block; margin: 0; padding: 0; border: 0; }
.sidebar-collapsed .collection-heading { justify-content: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar-collapsed .collection-heading .icon-button { margin: 0; }
.sidebar-collapsed .collection-navigation .nav-item svg { display: none; }
.sidebar-collapsed .collection-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--canvas);
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
}
.sidebar-collapsed .nav-item.active .collection-initial { background: var(--white); }
.sidebar-collapsed .sidebar-footer { flex-direction: column; gap: 6px; }
.sidebar-collapsed .profile-button { flex: none; padding: 4px; }

/* Handy (hochkant oder quer, also auch niedrige Bildschirme): <wa-page> zeigt die Seitenleiste
   in seiner Navigationsschublade, immer ausgeklappt. Gleiche Bedingung wie PHONE_QUERY in app.js. */
@media (max-width: 650px), (max-height: 500px) {
  .sidebar, .sidebar-collapsed .sidebar { width: 100%; height: 100%; padding: 16px 12px; border-right: 0; }
  .sidebar-toggle, .sidebar-resizer { display: none; }
  .sidebar-collapsed .sidebar-top { flex-direction: row; }
  .sidebar-collapsed .brand-text, .sidebar-collapsed .profile-text { display: flex; }
  .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-count, .sidebar-collapsed .collection-name, .sidebar-collapsed .sidebar-hint { display: initial; }
  .sidebar-collapsed .nav-heading { display: block; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; gap: 12px; padding: 9px 12px; }
  .sidebar-collapsed .collection-heading { justify-content: space-between; border-top: 0; }
  .sidebar-collapsed .collection-actions { flex-direction: row; }
  .sidebar-collapsed .folder-row { display: flex; }
  .sidebar-collapsed .folder-empty { display: block; }
  .sidebar-collapsed .folder-children { display: none; margin: 0 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--line); }
  .sidebar-collapsed .folder-group.open > .folder-children { display: block; }
  .sidebar-collapsed .collection-navigation .nav-item svg { display: block; }
  .sidebar-collapsed .collection-initial { display: none; }
  .sidebar-collapsed .sidebar-footer { flex-direction: row; }
  .sidebar-collapsed .profile-button { flex: 1 0 100%; }
}

/* ===== Upload-Dialog: ohne Dateien eine große Ablagefläche, danach Dateiliste links und Angaben rechts ===== */
.dialog-subtitle { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dialog-subtitle:empty { display: none; }

.upload-workspace { display: flex; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.upload-workspace[data-state="empty"] { padding: 28px; }
.upload-workspace[data-state="empty"] > :not(.upload-dropzone) { display: none; }
.upload-workspace[data-state="files"] {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "dest dest" "nav editor";
}
.upload-workspace[data-state="files"] .upload-dropzone { display: none; }

.upload-dropzone {
  flex: 1;
  width: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  border: 2px dashed #b9cec4;
  border-radius: 16px;
  background: var(--canvas);
  color: var(--ink);
  text-align: center;
}
.upload-dropzone:hover, .upload-dropzone.drag-active { border-color: var(--deep); background: var(--sage); }
.dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--white);
  color: var(--deep);
  box-shadow: 0 2px 8px #05141e10;
}
.dropzone-icon svg { width: 28px; height: 28px; }
.upload-dropzone strong { font-size: 20px; font-weight: 650; }
.upload-dropzone > span:not(.dropzone-icon) { font-size: 15px; color: var(--muted); }
.dropzone-link { color: var(--deep); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.upload-dropzone small { margin-top: 8px; font-size: 13px; color: var(--muted); }

.upload-destination {
  grid-area: dest;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}
.destination-fields { display: flex; gap: 16px; flex: 0 1 640px; min-width: 0; }
.destination-field { flex: 1; min-width: 0; }
.destination-field label { margin: 0 0 6px; font-size: 13px; }
.upload-destination .field-hint { flex: 1; margin: 0 0 10px; font-size: 13px; }

.upload-file-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: var(--canvas);
}
.upload-nav-files { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.upload-nav-file { position: relative; display: flex; align-items: center; }
.upload-nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 40px 8px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.upload-nav-common { flex: none; padding-right: 8px; }
.upload-nav-item:hover { background: #ffffffb3; }
.upload-nav-item.active { background: var(--white); box-shadow: 0 1px 4px #05141e14, inset 0 0 0 1px var(--line); }
.upload-nav-thumb {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--deep);
}
.upload-nav-common .upload-nav-thumb { border-color: var(--deep); background: var(--deep); color: var(--sage); }
.upload-nav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-nav-thumb svg { width: 20px; height: 20px; }
.upload-nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.upload-nav-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.upload-nav-text small { font-size: 12px; color: var(--muted); }
.upload-remove {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  color: var(--muted);
  opacity: 0;
}
.upload-nav-file:hover .upload-remove, .upload-remove:focus-visible, .upload-nav-item.active + .upload-remove { opacity: 1; }
.upload-remove:hover { background: #fff0ec; color: #8b3020; }
.upload-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1.5px dashed #b9cec4;
  border-radius: 10px;
  background: transparent;
  color: var(--deep);
  font-size: 14px;
  font-weight: 600;
}
.upload-add:hover { border-color: var(--deep); background: var(--white); }
.upload-add svg { width: 18px; height: 18px; }

.upload-editor { grid-area: editor; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 32px 32px; }
.upload-panel-heading h3 { font-size: 18px; }
.upload-panel-heading .field-hint { margin: 4px 0 0; font-size: 13px; }
.upload-editor .metadata-editor { margin-top: 16px; }
.upload-editor .field-grid { grid-template-columns: 1fr 1fr; gap: 0 20px; }
.upload-file-header { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.upload-file-preview {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 150px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--canvas);
  color: var(--deep);
}
.upload-file-preview img { width: 100%; height: 100%; object-fit: contain; }
.upload-file-preview svg { width: 40px; height: 40px; opacity: .75; }
.upload-file-title { min-width: 0; }
.upload-file-title h3 { font-size: 18px; overflow-wrap: anywhere; }
.upload-file-title small { font-size: 13px; color: var(--muted); }
.upload-editor .error-message { margin-top: 20px; }

@media (hover: none) { .upload-remove { opacity: 1; } }
@media (max-width: 760px) {
  .upload-workspace[data-state="empty"] { padding: 16px; }
  .upload-dropzone { min-height: 320px; }
  .upload-workspace[data-state="files"] { display: block; overflow-y: auto; }
  .upload-destination { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 20px; }
  .destination-fields { flex-direction: column; flex-basis: auto; }
  .upload-file-nav { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .upload-editor { overflow: visible; padding: 20px; }
  .upload-editor .field-grid { grid-template-columns: minmax(0, 1fr); }
  .upload-file-header { flex-direction: column; align-items: stretch; }
  .upload-file-preview { width: 100%; }
}

/* ===== Web Awesome: Luminos-Farben und -Schrift für alle wa-Komponenten ===== */
:root {
  --wa-font-family-body: var(--font-brand);
  --wa-font-family-heading: var(--font-brand);
  --wa-color-brand-fill-loud: #143237;
  --wa-color-brand-fill-normal: #d2e6d2;
  --wa-color-brand-fill-quiet: #f0f5f5;
  --wa-color-brand-border-loud: #143237;
  --wa-color-brand-border-normal: #73aa73;
  --wa-color-brand-border-quiet: #d2e6d2;
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-brand-on-normal: #143237;
  --wa-color-brand-on-quiet: #143237;
  --wa-color-text-normal: #05141e;
  --wa-color-text-quiet: #607074;
  --wa-color-overlay-modal: #05141e70;
  --wa-form-control-activated-color: #143237;
  --wa-form-control-border-color: #cdd8d5;
  --wa-form-control-border-radius: 10px;
  --wa-form-control-label-font-weight: 600;
  --wa-focus-ring-color: #e6a032;
}
wa-dialog:not(:defined), wa-select:not(:defined), wa-input:not(:defined), wa-button:not(:defined) { visibility: hidden; }
wa-dialog { --backdrop-filter: blur(3px); }
wa-dialog::part(dialog) { border-radius: 20px; }
wa-dialog::part(title) { font-size: 20px; font-weight: 650; }

/* Filter-Dialog */
.filter-dialog { --width: 680px; }
.filter-form { display: flex; flex-direction: column; gap: 24px; }
.filter-group + .filter-group { padding-top: 24px; border-top: 1px solid var(--line); }
.filter-group h3 { margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-dialog wa-select::part(form-control-label), .filter-dialog wa-input::part(form-control-label) { font-size: 14px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.filter-dialog .field-hint { margin: 10px 0 0; font-size: 13px; }
.filter-dialog .error-message { margin: 0; }
@media (max-width: 600px) { .filter-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Typografie: eine Skala aus den Web-Awesome-Tokens (m = 16 px) ===== */
body { font-size: var(--wa-font-size-m); line-height: 1.5; background: var(--white); }
h1 { font-size: var(--wa-font-size-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: var(--wa-font-size-l); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: var(--wa-font-size-m); font-weight: 650; }

/* ===== Grundgerüst: <wa-page> mit Banner, Navigation, Kopfzeile und Inhalt ===== */
.app-shell { --page-gutter: var(--wa-space-2xl); min-height: 100vh; }
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  background: #e6a03222;
  color: var(--ink);
  font-size: var(--wa-font-size-s);
  text-align: center;
}
.demo-banner svg { width: 16px; height: 16px; color: #a86b10; }

/* Die Kopfzeile bleibt beim Scrollen stehen: sticky muss am Slot-Container von <wa-page> sitzen */
wa-page::part(main-header) { position: sticky; top: var(--banner-height, 0px); z-index: 10; }
/* Die Fußzeile bleibt ebenso am unteren Rand der Ansicht stehen */
wa-page::part(main-footer) { position: sticky; bottom: 0; z-index: 10; margin-top: auto; }
.app-header {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m) var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
/* Suchleiste: Suchfeld und Schnellfilter als ein zusammenhängendes Feld */
.search-bar {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  max-width: 1000px;
  border: 1px solid #cdd8d5;
  border-radius: 12px;
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within { border-color: var(--deep); box-shadow: 0 0 0 3px #e6a03233; }
.search-bar wa-input, .search-bar wa-select { --wa-form-control-border-color: transparent; --wa-focus-ring-width: 0; }
.search-bar > * + * { border-left: 1px solid var(--line); }
.app-search { flex: 1 1 auto; min-width: 0; }
.search-quick { flex: 0 0 180px; }
.search-filter { flex: none; }
.app-search svg { width: 18px; height: 18px; color: var(--muted); }
.search-shortcut {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: var(--wa-font-size-xs);
}
#upload-button { margin-left: auto; }
.app-header wa-button svg, .toolbar wa-button svg, .main-content wa-button svg, .empty-actions wa-button svg { width: 18px; height: 18px; }
.mobile-nav { display: none; }

.main-content {
  gap: var(--wa-space-2xl);
  width: 100%;
  max-width: 1600px;
  padding: var(--wa-space-xl) var(--page-gutter) var(--wa-space-xl);
}

/* Seitentitel */
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s) var(--wa-space-m); }
.page-description { max-width: 70ch; margin-top: var(--wa-space-xs); color: var(--muted); }

/* Werkzeugleiste: Schnellfilter links, Sortierung und Ansicht rechts, aktive Filter darunter */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s) var(--wa-space-m);
  margin-top: calc(var(--wa-space-l) * -1);
}
.toolbar-view { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); margin-left: auto; }
.toolbar-view wa-select { width: 180px; }
.view-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; }
.view-toggle wa-button::part(base) { border-color: transparent; background: transparent; color: var(--muted); }
.view-toggle wa-button.active::part(base) { background: var(--deep); color: var(--white); }
.active-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--wa-space-xs); }
.active-filters:empty { display: none; }
/* Die Filteranzahl steht im Knopf statt als überstehender Punkt an der Ecke (sonst Überlauf am Rand) */
#filter-count { position: static; translate: none; margin-left: 2px; }

.load-error-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-s); }

/* Abschnitte und Kachel-Raster (auto-fill statt wa-grid, damit wenige Kacheln nicht riesig werden) */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wa-space-xs) var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
}
.result-count { color: var(--muted); font-size: var(--wa-font-size-s); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), 1fr));
  gap: var(--wa-space-l) var(--wa-space-m);
}
.collection-grid { --min-column-size: 240px; }
.asset-grid { --min-column-size: 190px; }

.collection-card, .asset-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.collection-cover, .asset-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  transition: box-shadow .15s, transform .15s;
}
.collection-card:hover .collection-cover, .asset-card:hover .asset-thumbnail { box-shadow: 0 6px 18px #05141e1a; transform: translateY(-1px); }
.collection-cover img, .asset-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sobald ein Vorschaubild geladen ist, entfällt das Platzhalter-Icon */
.collection-cover img ~ svg, .collection-cover:has(img) > svg, .asset-thumbnail img ~ svg { display: none; }
.collection-cover { aspect-ratio: 16 / 9; background: var(--deep); color: var(--sage); }
.collection-card:nth-child(3n+2) .collection-cover { background: var(--sage); color: var(--deep); }
.collection-card:nth-child(3n+3) .collection-cover { background: var(--canvas); color: var(--deep); }
.collection-cover > svg { width: 36px; height: 36px; opacity: .8; }
.collection-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #05141e30); }
/* Vorschaubild-Collage auf der Sammlungskarte: 1 Bild = Vollfläche, 2 = nebeneinander, 3 = groß + 2 kleine */
.cover-collage,
.cover-collage .cover-part { position: absolute; inset: 0; }
.cover-collage .cover-part { overflow: hidden; }
.cover-collage .cover-part img { width: 100%; height: 100%; object-fit: cover; }
.cover-collage.count-2 .cover-part:first-child { right: 50%; }
.cover-collage.count-2 .cover-part:last-child { left: 50%; }
.cover-collage.count-2 .cover-part:first-child img { border-right: 2px solid var(--white); }
.cover-collage.count-3 .cover-part:first-child { right: 50%; }
.cover-collage.count-3 .cover-part:first-child img { border-right: 2px solid var(--white); }
.cover-collage.count-3 .cover-part:nth-child(2) { left: 50%; bottom: 50%; }
.cover-collage.count-3 .cover-part:nth-child(3) { left: 50%; top: 50%; }
.cover-collage.count-3 .cover-part:nth-child(2) img { border-bottom: 1px solid var(--white); }
.cover-collage.count-3 .cover-part:nth-child(3) img { border-top: 1px solid var(--white); }
.collection-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffffee;
  color: var(--ink);
  font-size: var(--wa-font-size-xs);
  font-weight: 600;
}
.collection-covers-area { display: flex; flex-direction: column; gap: var(--wa-space-s); }
.collection-covers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--wa-space-s); }
.collection-cover-choice {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas);
  cursor: pointer;
}
.collection-cover-choice:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.collection-cover-choice img { width: 100%; height: 100%; object-fit: cover; }
.collection-cover-choice.selected { border-color: var(--deep); box-shadow: 0 0 0 2px var(--deep); }
.collection-cover-choice .cover-check {
  position: absolute;
  top: 4px; right: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--white);
}
.collection-cover-choice:not(.selected) .cover-check { display: none; }
.collection-cover-choice .cover-check svg { width: 12px; height: 12px; }
.collection-info, .asset-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--wa-space-xs); }
.collection-name-title, .asset-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.collection-subtitle, .asset-subtitle { overflow: hidden; color: var(--muted); font-size: var(--wa-font-size-s); text-overflow: ellipsis; white-space: nowrap; }
.collection-empty {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--wa-space-m);
  padding: var(--wa-space-l);
  border-radius: 12px;
  background: var(--canvas);
}
.collection-empty > svg { width: 28px; height: 28px; color: var(--green); }
.collection-empty p { margin-top: 2px; color: var(--muted); font-size: var(--wa-font-size-s); }

.asset-thumbnail { aspect-ratio: 4 / 3; background: var(--canvas); color: var(--deep); }
.asset-thumbnail > svg { width: 30px; height: 30px; opacity: .7; }
.asset-thumbnail.type-video { background: var(--sage); }
.asset-thumbnail.type-audio { background: #e6a03222; }
.extension { display: none; }
.type-pill {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 5px;
  background: #ffffffee;
  font-size: var(--wa-font-size-2xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.asset-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.asset-tag { padding: 1px 6px; border-radius: 5px; background: var(--canvas); color: var(--muted); font-size: var(--wa-font-size-xs); }

/* Listenansicht */
.asset-grid.list-view { display: flex; flex-direction: column; gap: 0; }
.list-view .asset-card { display: flex; flex-direction: row; align-items: center; gap: var(--wa-space-m); padding: var(--wa-space-s) 0; border-bottom: 1px solid var(--line); }
.list-view .asset-thumbnail { flex: none; width: 88px; aspect-ratio: 4 / 3; border-radius: 8px; }
.list-view .asset-thumbnail > svg { width: 22px; height: 22px; }
.list-view .type-pill { bottom: 4px; left: 4px; }
.list-view .asset-card-info { flex: 1; padding: 0; }
.list-view .asset-card:hover .asset-thumbnail { transform: none; }

/* Leerer Zustand und Fußzeile */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--wa-space-s); padding: var(--wa-space-3xl) var(--wa-space-m); text-align: center; }
.empty-art { display: inline-flex; padding: var(--wa-space-m); border-radius: 18px; background: var(--sage); color: var(--deep); }
.empty-art svg { width: 32px; height: 32px; }
.empty-state > p { max-width: 46ch; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wa-space-s); margin-top: var(--wa-space-xs); }
.empty-footnote { font-size: var(--wa-font-size-s); }
.main-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-s) var(--page-gutter);
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: var(--wa-font-size-xs);
}
.main-footer > span { display: flex; align-items: center; gap: 6px; }
.main-footer svg { width: 14px; height: 14px; color: var(--green); }
.version { padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; }

/* Benachrichtigungen */
#toast-region { --width: 26rem; }
.toast-region .toast, #toast-region > .toast { padding: 12px 20px; border-radius: 10px; background: var(--deep); color: white; }

/* Schmalere Fenster: Schnellfilter wandern in den Filter-Dialog */
@media (max-width: 960px) { .search-quick { display: none; } }

/* Handy */
@media (max-width: 650px), (max-height: 500px) {
  .app-shell { --page-gutter: var(--wa-space-m); }
  .mobile-nav { display: inline-flex; }
  .search-shortcut, .upload-label { display: none; }
  /* Nur das Symbol: ohne leeren Beschriftungsbereich und Abstand zur Beschriftung sitzt es mittig */
  #upload-button::part(label), #open-filters::part(label) { display: none; }
  #upload-button [slot="start"], #open-filters [slot="start"] { margin-inline-end: 0; }
  #upload-button::part(base) { padding-inline: 0; aspect-ratio: 1; }
  .app-header { gap: var(--wa-space-xs); padding-block: var(--wa-space-s); }
  h1 { font-size: var(--wa-font-size-xl); }
  .toolbar-view wa-select { width: auto; flex: 1 1 140px; }
  .filter-label { display: none; }
  .asset-grid { --min-column-size: 140px; }
  .collection-grid { --min-column-size: 150px; }
}

/* ===== Dialoge (wa-dialog) ===== */
wa-dialog { --width: 640px; }
.small-dialog { --width: 480px; }
wa-dialog::part(footer) { gap: var(--wa-space-s); background: var(--white); }
.dialog-form { display: flex; flex-direction: column; gap: var(--wa-space-m); }
.dialog-intro { color: var(--muted); font-size: var(--wa-font-size-s); }
wa-input::part(form-control-label), wa-textarea::part(form-control-label), wa-select::part(form-control-label), .form-field > label {
  font-size: var(--wa-font-size-s);
  font-weight: 600;
}
.form-field > label { display: block; margin: 0 0 6px; }
.profile-content { display: flex; flex-direction: column; gap: var(--wa-space-m); }
.profile-content .detail-metadata { padding: 0; }
.profile-storage { margin: 0; }

/* Dateidetails: Vorschau links, Angaben rechts */
.detail-dialog { --width: min(1240px, 96vw); }
.detail-dialog::part(body) { padding: 0; }
.detail-heading { overflow-wrap: anywhere; }
#download-original { margin-right: auto; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); height: min(72vh, 820px); border-top: 1px solid var(--line); }
.preview-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--canvas); }
.preview-content { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--wa-space-l); overflow: auto; }
.preview-content img, .preview-content video { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-content audio { width: 100%; }
.preview-content iframe { width: 100%; height: 100%; border: 0; background: white; }
.preview-content pre { align-self: stretch; width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 ui-monospace, monospace; }
.preview-caption { padding: var(--wa-space-s) var(--wa-space-l); color: var(--muted); font-size: var(--wa-font-size-s); text-align: center; overflow-wrap: anywhere; }
.preview-area:focus { outline: none; }
.preview-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.detail-nav { position: absolute; top: 50%; z-index: 1; width: 40px; height: 40px; transform: translateY(-50%); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgb(5 20 30 / 18%); }
.detail-nav:hover:not(:disabled) { color: var(--deep); background: var(--sage); }
.detail-nav:disabled { opacity: .35; cursor: default; }
.detail-nav svg { width: 22px; height: 22px; }
#detail-prev { left: var(--wa-space-s); }
#detail-next { right: var(--wa-space-s); }
.preview-footer { display: flex; align-items: center; justify-content: center; gap: var(--wa-space-m); padding: 0 var(--wa-space-l); }
.preview-footer .preview-caption { padding-inline: 0; }
.detail-position { flex: none; color: var(--muted); font-size: var(--wa-font-size-s); font-variant-numeric: tabular-nums; }
.preview-fallback { max-width: 34ch; color: var(--muted); text-align: center; }
.preview-fallback svg { width: 44px; height: 44px; margin: 0 auto var(--wa-space-m); color: var(--deep); }
.preview-fallback strong { display: block; margin-bottom: var(--wa-space-xs); color: var(--ink); }
.detail-sidebar { min-width: 0; overflow-y: auto; padding: var(--wa-space-l); border-left: 1px solid var(--line); }
.detail-facts { display: flex; flex-direction: column; gap: var(--wa-space-s); margin-bottom: var(--wa-space-l); padding-bottom: var(--wa-space-m); border-bottom: 1px solid var(--line); }
.detail-facts wa-badge { align-self: flex-start; }
.detail-metadata { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px var(--wa-space-s); margin: 0; font-size: var(--wa-font-size-s); }
.detail-metadata dt { color: var(--muted); }
.detail-metadata dd { margin: 0; overflow-wrap: anywhere; }
.detail-form { display: flex; flex-direction: column; gap: var(--wa-space-m); }
.detail-sidebar .field-grid { grid-template-columns: minmax(0, 1fr); }
.detail-collections-field { margin: 0; padding: 0; border: 0; }
.detail-collections-field legend { margin-bottom: var(--wa-space-xs); padding: 0; font-size: var(--wa-font-size-s); font-weight: 600; }
.detail-collections { display: flex; flex-direction: column; gap: var(--wa-space-xs); }
.detail-collections p { color: var(--muted); font-size: var(--wa-font-size-s); }
.detail-note { margin-top: var(--wa-space-l); color: var(--muted); font-size: var(--wa-font-size-xs); }
@media (max-width: 760px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .preview-area { height: 40vh; }
  .detail-sidebar { overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
}

/* ===== Metadaten-Editor: wa-select/wa-input/wa-textarea/wa-switch, Chip-Felder als Eigenbau im selben Look ===== */
.metadata-editor { display: flex; flex-direction: column; }
.editor-section { padding: var(--wa-space-s) 0; border-bottom: 1px solid var(--line); }
.editor-section:last-child { border-bottom: 0; }
.editor-section > summary { padding: var(--wa-space-2xs) 0; cursor: pointer; font-weight: 650; }
.editor-section[open] > summary { margin-bottom: var(--wa-space-s); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-m) var(--wa-space-l); }
.metadata-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.metadata-field.wide { grid-column: 1 / -1; }
.metadata-field > label { margin: 0; font-size: var(--wa-font-size-s); font-weight: 600; }
.metadata-control { display: flex; flex-direction: column; gap: var(--wa-space-2xs); min-width: 0; }
.metadata-control .field-hint { margin: 0; color: var(--muted); font-size: var(--wa-font-size-xs); }
.metadata-note { grid-column: 1 / -1; padding: var(--wa-space-s) var(--wa-space-m); border-radius: 10px; background: var(--canvas); color: var(--muted); font-size: var(--wa-font-size-xs); }
.override-toggle { color: var(--muted); font-size: var(--wa-font-size-s); }
wa-input[readonly]::part(base) { background: var(--canvas); }
.add-term { align-self: flex-start; }
.new-term-editor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); }
.new-term-editor wa-input { flex: 1 1 200px; }
.manage-terms { align-self: flex-start; }
.term-list { display: flex; flex-direction: column; gap: var(--wa-space-3xs); padding: var(--wa-space-xs); border: 1px solid var(--wa-form-control-border-color); border-radius: 10px; background: var(--canvas); max-height: 220px; overflow-y: auto; }
.term-list[hidden] { display: none; }
.term-list-heading { color: var(--muted); font-size: var(--wa-font-size-xs); font-weight: 600; }
.term-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-xs); min-width: 0; }
.term-row.editing wa-input { flex: 1 1 160px; }
.term-label { min-width: 0; overflow-wrap: anywhere; font-size: var(--wa-font-size-s); }
.term-actions { display: inline-flex; align-items: center; gap: var(--wa-space-3xs); flex: none; }

.chip-entry {
  width: 100%;
  height: var(--wa-form-control-height);
  padding: 0 var(--wa-form-control-padding-inline);
  border: 1px solid var(--wa-form-control-border-color);
  border-radius: var(--wa-form-control-border-radius);
  background: var(--wa-form-control-background-color);
  color: var(--ink);
  font: inherit;
}
.chip-entry::placeholder { color: var(--wa-form-control-placeholder-color); }
.chip-entry:focus { border-color: var(--deep); outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
.chip-entry:disabled { background: var(--canvas); color: var(--muted); cursor: not-allowed; }
.chip-list, .chip-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list:empty, .chip-suggestions:empty { display: none; }
.metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--deep);
  font-size: var(--wa-font-size-s);
  font-weight: 550;
}
.metadata-chip > span { overflow-wrap: anywhere; }
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--deep);
  font-size: 16px;
  line-height: 1;
}
.chip-remove:hover { background: #ffffffa0; }
.suggestion-chip {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: var(--wa-font-size-s);
}
.suggestion-chip:hover { border-color: var(--deep); color: var(--ink); }
.metadata-control :disabled { cursor: not-allowed; }
@media (max-width: 650px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }

/* Upload-Dialog als wa-dialog */
.upload-dialog { --width: min(1120px, 96vw); }
.upload-dialog::part(body) { padding: 0; }
.upload-dialog-label { display: flex; flex-direction: column; }
.upload-dialog-label .dialog-subtitle { font-size: var(--wa-font-size-s); font-weight: 400; }
.upload-form { display: flex; flex-direction: column; }
.upload-dialog:has(.upload-workspace[data-state="files"]) .upload-form { height: min(720px, 74vh); }
.upload-panel { display: flex; flex-direction: column; gap: var(--wa-space-m); }
.upload-panel-heading .field-hint { margin-top: 4px; }
.upload-editor .metadata-editor { margin-top: 0; }
.destination-field { flex: 1; min-width: 0; }
.upload-editor wa-callout { margin-top: var(--wa-space-m); }

/* Upload-Fortschritt unten rechts */
.upload-status {
  position: fixed;
  right: var(--wa-space-l);
  bottom: var(--wa-space-l);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: var(--wa-space-m);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 12px 40px #05141e24;
}
.upload-status-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); }
.upload-status-head span, .upload-status p { color: var(--muted); font-size: var(--wa-font-size-s); }
.upload-status p { white-space: pre-wrap; overflow-wrap: anywhere; }
#upload-progress { --track-height: 6px; --indicator-color: var(--green); }
#upload-dismiss { align-self: flex-end; }
/* Geerbte (gesperrte) Chip-Felder zeigen nur ihre Werte, keine Vorschläge */
.metadata-control:has(.chip-entry:disabled) .chip-suggestions,
.metadata-control:has(.chip-entry:disabled) .field-hint { display: none; }

/* Kurze Knopfbeschriftungen nur auf dem Handy */
.label-short { display: none; }

/* Handy: Dialoge bildschirmfüllend, Aktionen nebeneinander */
@media (max-width: 650px), (max-height: 500px) {
  wa-dialog { --width: 100vw; }
  wa-dialog::part(dialog) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  wa-dialog::part(footer) { flex-wrap: nowrap; }
  wa-dialog > [slot="footer"] { flex: 1 1 auto; min-width: 0; }
  .label-long { display: none; }
  .label-short { display: inline; }
  #download-original { margin-right: 0; }
  .upload-dialog:has(.upload-workspace[data-state="files"]) .upload-form { height: auto; }
}

/* ===== Touch-Geräte (iPhone, iPad): Tippflächen mind. 44 px, kein Auto-Zoom in Feldern ===== */
@media (pointer: coarse) {
  /* Buttons, Felder und Auswahllisten von Web Awesome ebenfalls mind. 44 px hoch */
  :root { --wa-form-control-height: 44px; }
  .icon-button, .sidebar-footer .icon-button, .collection-heading .icon-button { width: 44px; height: 44px; }
  .nav-item, .upload-nav-item { min-height: 48px; }
  .chip-remove { width: 36px; height: 36px; }
  .suggestion-chip { min-height: 40px; padding: 6px 12px; }
  .upload-remove { width: 40px; height: 40px; }
  /* Safari auf iOS vergrößert die Seite, wenn ein Feld mit weniger als 16 px Schrift den Fokus bekommt */
  .chip-entry, wa-input::part(input), wa-textarea::part(textarea), wa-select::part(display-input) { font-size: 16px; }
  /* Breitenregler der Seitenleiste mit dem Finger greifbar */
  .sidebar-resizer { width: 16px; }
  .sidebar-resizer::after { width: 3px; }
}

/* ===== Rollen: Ansehen sieht keine Bearbeiten-Aktionen, nur Admins die Nutzerverwaltung ===== */
body:not([data-role="editor"]):not([data-role="admin"]) .requires-edit { display: none !important; }
body:not([data-role="admin"]) .requires-admin { display: none !important; }
body[data-auth-mode="demo"] .requires-admin { display: none !important; }
.user-last-sign-in { font-size: var(--wa-font-size-xs) !important; }

/* ===== Nutzerverwaltung ===== */
.users-dialog { --width: min(960px, 96vw); }
.invite-form { display: grid; grid-template-columns: 2fr 1.4fr 1fr auto; align-items: end; gap: var(--wa-space-s); margin-bottom: var(--wa-space-m); }
.users-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 150px 330px; align-items: center; gap: var(--wa-space-s); padding: var(--wa-space-s) 0; border-bottom: 1px solid var(--line); }
.user-who { display: flex; flex-direction: column; min-width: 0; }
.user-who strong, .user-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-who span { color: var(--muted); font-size: var(--wa-font-size-s); }
.user-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0; }
.user-status { justify-self: start; }
@media (max-width: 650px), (max-height: 500px) {
  .invite-form { grid-template-columns: minmax(0, 1fr); }
  .user-row { grid-template-columns: minmax(0, 1fr) auto; }
  .user-role, .user-actions { grid-column: 1 / -1; }
  .user-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* Selection mode and share dialog */
.selection-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 4px 14px #05141e14; }
.selection-count { margin-right: auto; font-weight: 600; }
.select-check { position: absolute; top: 8px; left: 8px; z-index: 1; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--white); border-radius: 8px; background: #05141e66; color: var(--white); box-shadow: 0 1px 4px #05141e40; }
.select-check svg { width: 14px; height: 14px; opacity: 0; }
.selecting .select-check { display: flex; }
.asset-card.selected .select-check { border-color: var(--deep); background: var(--deep); }
.asset-card.selected .select-check svg { opacity: 1; }
.asset-card.selected .asset-thumbnail { outline: 3px solid var(--deep); outline-offset: -3px; }
.share-result { display: flex; flex-direction: column; gap: var(--wa-space-s); align-items: stretch; }
.shares-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wa-space-s); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-s) var(--wa-space-m); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.share-row-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; gap: 2px; }
.share-row-name { overflow-wrap: anywhere; }
.share-row-meta { color: var(--muted); font-size: var(--wa-font-size-s); }
.share-row-actions { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs); }
.share-row-inactive .share-row-info { opacity: .55; }
.share-extend { display: flex; align-items: end; gap: var(--wa-space-s); flex: 1 1 100%; }
.share-extend[hidden] { display: none; }