/* Tagwerk 1.8 – Modul „Ablage“ (Kennung ablage, Vorsilbe dr-). Schlichtes Grund-CSS: Raster, Abstände, 390 px ohne Querscrollen,
   hell/dunkel über die Variablen aus app.css. Die Feingestaltung folgt in gestaltung.css.
   Wiederverwendet aus app.css/module.css: .kopf, .knopf, .eingabe, .chip, .leer, .rund, .form, .reihe. */

.kopf .k-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-still { color: var(--leise); margin: 8px 2px 16px; }
.dr-laedt { opacity: .8; }
.dr-fehler { color: var(--warn); margin: 8px 2px 12px; }
.dr-hinweis { margin-top: 8px; }
.dr-zwischen { font-size: 15px; font-weight: 650; margin: 8px 2px 10px; }

/* Suche */
.dr-suche { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dr-suche .eingabe { flex: 1 1 220px; min-width: 0; }

/* Krümelpfad */
.dr-krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 10px; min-width: 0; }
.dr-krume { background: none; border: 0; padding: 4px 6px; border-radius: 8px; color: var(--akzent-kraeftig, var(--text)); font: inherit; font-size: 14px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.dr-krume:hover { background: var(--akzent-weich); }
.dr-krume.aktuell { color: var(--text); font-weight: 650; cursor: default; padding: 4px 6px; }
.dr-krume-trenner { color: var(--zart); }

/* Ablegebereich und Liste */
.dr-zone { position: relative; border: 2px dashed transparent; border-radius: 14px; padding: 6px; margin: 0 -6px 18px; transition: border-color .15s, background .15s; }
.dr-zone.ziel { border-color: var(--akzent); background: var(--akzent-weich); }
.dr-zone-hinweis { display: flex; align-items: center; gap: 8px; color: var(--zart); font-size: 13px; margin: 12px 4px 0; }
.dr-liste, .dr-vermerke { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dr-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.dr-zeile:hover, .dr-zeile:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }
div.dr-zeile { cursor: default; }
.dr-z-bild { display: grid; place-items: center; color: var(--leise); }
.dr-ordner .dr-z-bild { color: var(--akzent); }
.dr-z-text { display: grid; gap: 2px; min-width: 0; }
.dr-z-name { overflow-wrap: anywhere; font-weight: 500; }
.dr-ordner .dr-z-name { font-weight: 650; }
.dr-z-pfad { color: var(--zart); font-size: 12.5px; overflow-wrap: anywhere; }
.dr-z-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; color: var(--leise); font-size: 13px; font-variant-numeric: tabular-nums; }
.dr-mehr { display: flex; justify-content: center; margin: 12px 0 4px; }

/* „Zuletzt aus Tagwerk abgelegt“ */
.dr-zuletzt { margin: 6px 0 24px; }
.dr-zuletzt-kopf { cursor: pointer; font-weight: 650; padding: 8px 2px; }
.dr-zahl { color: var(--zart); font-weight: 500; font-variant-numeric: tabular-nums; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.dr-vermerk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 10px; border-radius: 10px; }
.dr-vermerk .dr-z-meta { grid-column: 2; justify-content: flex-start; }
.dr-z-aktionen { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
.dr-marke { display: inline-flex; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--akzent-weich); color: var(--akzent-kraeftig, var(--text)); }

/* Fenster „Ablegen“ */
.dr-form { display: grid; gap: 12px; }
.dr-datei-info { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--leise); min-width: 0; }
.dr-datei-name { overflow-wrap: anywhere; color: var(--text); }
.dr-datei-groesse { color: var(--zart); white-space: nowrap; }
.dr-vorschau { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.dr-v-zeile { display: grid; gap: 2px; min-width: 0; }
.dr-v-etikett { font-size: 12px; color: var(--zart); }
.dr-v-name, .dr-v-pfad { overflow-wrap: anywhere; }
.dr-form-fehler { color: var(--warn); margin: 0; }

@media (max-width: 520px) {
  .dr-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .dr-z-meta { grid-column: 2; justify-content: flex-start; }
  .dr-vermerk { grid-template-columns: auto minmax(0, 1fr); }
  .dr-z-aktionen { grid-column: 2; grid-row: auto; justify-content: flex-start; }
}