/* Upload-Portal — die wenigen Bausteine, die das Design-System (visionclean-v2.css)
   noch nicht kennt: Anmeldekarte, Fortschrittsbalken, Dateiliste.
   Farben, Radien und Schatten kommen ausschliesslich aus den Tokens dort. */

/* ── Anmelden ──────────────────────────────────────────────────────────── */
.tor { min-height: 100vh; min-height: 100dvh; display: none; place-items: center; padding: 24px; }
.tor.aktiv { display: grid; }
.tor-karte { width: min(100%, 460px); display: flex; flex-direction: column; gap: 24px; }
.tor-logo { height: 34px; width: auto; align-self: flex-start; }
.tor h1 { font-size: 32px; }
.tor .btn { margin-top: 8px; width: 100%; }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.kopf-titel { font: 600 18px/1.2 var(--font-sans); color: var(--navy); }
.kopf-abmelden { margin-left: auto; }

/* ── Warteschlange ─────────────────────────────────────────────────────── */
.warteschlange { display: flex; flex-direction: column; gap: 12px; }
.warteschlange:empty { display: none; }

.posten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-feld); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.posten-kopf { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.posten-name { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.posten-stand { font-size: 16px; color: var(--mute); flex: none; }
.posten.fertig { background: var(--blau-zart); border-color: var(--blau-zart); }
.posten.fertig .posten-stand { color: var(--blau); font-weight: 600; }
.posten.schief { background: var(--fehler-flaeche); border-color: var(--fehler); }
.posten.schief .posten-stand { color: var(--fehler); font-weight: 600; }

.balken { height: 8px; border-radius: 999px; background: var(--blau-zart); overflow: hidden; }
.balken span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--blau); transition: width 200ms linear; }
.posten.fertig .balken { display: none; }

/* ── Liste der abgelegten Dateien ──────────────────────────────────────── */
.liste { display: flex; flex-direction: column; gap: 8px; }
.liste-zeile { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.liste-zeile:last-child { border-bottom: 0; }
.liste-name { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-meta { font-size: 15px; color: var(--mute); flex: none; }

@media (max-width: 560px) {
  .posten-kopf { flex-direction: column; align-items: flex-start; gap: 4px; }
  .liste-zeile { flex-direction: column; gap: 2px; }
  /* Auf dem Handy lieber umbrechen als die Zeile abschneiden oder die Seite breit machen. */
  .liste-name { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Auswahl und Download ──────────────────────────────────────────────── */
.listen-kopf { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.listen-werkzeuge { display: flex; gap: 14px; align-items: center; }
.listen-werkzeuge .btn { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* Haken: gleiche Bauform wie `.check-zeile` im Design-System, nur ohne Rahmen. */
.haken { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-size: 16px; color: var(--ink); min-height: 44px; }
.haken input { position: absolute; opacity: 0; width: 0; height: 0; }
.haken .box { width: 24px; height: 24px; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); flex: none; display: grid; place-items: center; }
.haken .box svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; fill: none; visibility: hidden; }
.haken input:checked + .box { background: var(--blau); border-color: var(--blau); }
.haken input:checked + .box svg { visibility: visible; }
.haken input:focus-visible + .box { outline: 3px solid var(--cyan); outline-offset: 2px; }

.liste-zeile { align-items: center; }
.liste-zeile .liste-name { flex: 1; }
.liste-laden { font: 600 16px/1 var(--font-sans); color: var(--blau); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; flex: none; }
.liste-laden:hover { color: var(--blau-press); text-decoration: underline; }

@media (max-width: 560px) {
  .liste-zeile { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .liste-zeile .liste-name { flex: 1 1 60%; }
  .liste-meta { flex: 1 1 100%; padding-left: 34px; }
  .listen-werkzeuge { width: 100%; justify-content: space-between; }
}