/* Dropzone — Datei-Upload-Fläche (Design::file). Drag&Drop + klick-durchsuchen. Verhalten: dropzone.js. */
.cc-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap:var(--sp-2);
    padding:var(--sp-8) var(--sp-7);
    border: 1px dashed var(--grey-300);
    border-radius:var(--radius);
    background: var(--grey-50);
    color: var(--muted);
    font-size:var(--fs-base);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cc-dropzone:hover { border-color: var(--o); background: var(--surface); }
.cc-dropzone.cc-dropzone-over { border-color: var(--o); background: var(--surface); color: var(--ink); }
.cc-dropzone-ico { font-size:var(--fs-xl); color: var(--muted); }
.cc-dropzone:hover .cc-dropzone-ico, .cc-dropzone-over .cc-dropzone-ico { color: var(--o); }
.cc-dropzone-text strong { color: var(--o); font-weight:var(--fw-bold); }
.cc-dropzone-file { font-size:var(--fs-sm); color: var(--ink); font-weight:var(--fw-med); }
.cc-dropzone-file:empty { display: none; }

/* Ablage-Hinweis über einem ganzen Fenster (Design::dropOverlay) — sichtbar mit cc-drop-overlay-on (schaltet das Modul). */
.cc-drop-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-drawer); align-items: center; justify-content: center; pointer-events: none;
                   background: color-mix(in srgb, var(--o) 8%, transparent); border: 3px dashed var(--o); }
.cc-drop-overlay.cc-drop-overlay-on { display: flex; }
.cc-drop-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); color: var(--o); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.cc-drop-overlay-inner > .cc-ico { font-size: var(--fs-display); }

/* Ablage-Leiste (Design::dropStrip) — schmale Zeile „Datei hierher ziehen oder …" am Rand; beim Darüberziehen
   (cc-dropzone-over, setzt das Modul-JS) Kante + Text in Markenfarbe, wie die grosse Dropzone. */
.cc-drop-strip { border-top: 1px dashed var(--border); }
.cc-drop-strip-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); }
.cc-drop-strip-hint { margin-left: auto; font-size: var(--fs-xs); }
.cc-drop-strip.cc-dropzone-over { border-color: var(--o); background: var(--grey-50); }
.cc-drop-strip.cc-dropzone-over .cc-drop-strip-row { color: var(--o); }