/* ============================================================================
 * tc-upload-drop - Datei-Upload-Dropzone mit Vorschau
 * ----------------------------------------------------------------------------
 * Klickbare Dropzone (loest verstecktes <input type=file> aus) und eine
 * Bild-Vorschau nach Auswahl. Fuer jeden Bild-/Datei-Upload einsetzbar.
 *
 * Struktur:
 *   .tc-upload-drop  > .tc-upload-drop__icon + Text
 *   (nach Auswahl)   .tc-upload-drop__preview > <img>
 *                    + .tc-upload-drop__change (Button "Anderes ...")
 * ASCII-safe.
 * ============================================================================ */

.tc-upload-drop {
  border: 1px dashed var(--tc-border-strong);
  border-radius: var(--tc-radius-md);
  padding: var(--tc-space-5);
  text-align: center;
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
/* Als <button> (Werkbank „Neuer Stand", Teamalbum #389) bringt die Fläche ihre
   Grundgestalt selbst mit (§9) — sonst malt der Browser sie hellgrau. Stand bis
   16.10.2026 nur als `.wb-ns-drop` in werkbank.css. */
button.tc-upload-drop {
  appearance: none;
  display: block;
  width: 100%;
  font: inherit;
  background: transparent;
}
.tc-upload-drop:hover { border-color: var(--tc-accent); background: var(--tc-deco-warm-bg); }
.tc-upload-drop__icon { font-size: 2rem; opacity: 0.7; display: block; margin-bottom: var(--tc-space-2); }

/* --zeile: eine Zeile unter einem Textfeld (#397, OWB-Datei im Listenformular).
   Die volle Fläche wäre dort eine zweite Hauptsache neben dem Feld; die Zeile
   sagt nur „oder so“. Doppelte Klasse, weil `button.tc-upload-drop` oben
   display:block setzt und sonst gewinnt. „oder hierher ziehen“ (__zusatz)
   fällt auf Touch-Geräten weg — dort gibt es nichts zu ziehen.
   .is-ueber: eine Datei schwebt über der Ablagefläche (dragover). */
.tc-upload-drop.tc-upload-drop--zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tc-space-1) var(--tc-space-2);
  min-height: 44px;
  margin-top: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
  font-size: var(--tc-text-sm);
}
.tc-upload-drop--zeile .tc-upload-drop__icon { font-size: 1.1rem; display: inline; margin: 0; }
.tc-upload-drop__zusatz { color: var(--tc-text-muted); }
@media (hover: none) { .tc-upload-drop__zusatz { display: none; } }
.tc-upload-drop.is-ueber {
  border-style: solid;
  border-color: var(--tc-accent);
  background: var(--tc-deco-warm-bg);
  color: var(--tc-text-strong);
}

.tc-upload-drop__preview {
  position: relative;
  border-radius: var(--tc-radius-md);
  overflow: hidden;
  max-height: 260px;
  background: rgba(0,0,0,0.3);
}
.tc-upload-drop__preview img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.tc-upload-drop__change { position: absolute; bottom: 8px; right: 8px; }

/* ============================================================================
 * tc-fotowahl — mehrere Fotos waehlen und beim Hochladen zusehen (#927/#928)
 * ----------------------------------------------------------------------------
 * Bis 07.10.2026 hiess das social-upload-* und lebte nur auf den Albumseiten.
 * „Neuer Stand" an der Werkbank (#928) braucht dieselbe Vorschau auf Dashboard
 * und im Untergrund, also ist sie jetzt ein Baustein (Heuristik 2).
 * Struktur:
 *   .tc-fotowahl [.is-hochladen]
 *     .tc-fotowahl__bild [.is-wartet|.is-laedt|.is-fertig|.is-fehler]
 *        style="--fortschritt: 0…1" > img + button.tc-fotowahl__weg
 *     button.tc-fotowahl__plus
 * Library: library-formulare.html „Fotos waehlen".
 * ========================================================================== */
.tc-fotowahl { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
.tc-fotowahl__bild {
  position: relative; width: 90px; height: 90px;
  border-radius: var(--tc-radius-md); overflow: hidden;
  border: 1px solid var(--tc-border-default); background: var(--tc-bg-canvas);
}
.tc-fotowahl__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-fotowahl__weg {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--tc-bg-canvas) 70%, transparent); color: var(--tc-text-strong);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.tc-fotowahl__weg:hover { background: var(--tc-danger); }
.tc-fotowahl__plus {
  width: 90px; height: 90px;
  border-radius: var(--tc-radius-md);
  border: 1px dashed var(--tc-border-default); background: transparent;
  color: var(--tc-text-muted); font-size: 1.8rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tc-fotowahl__plus:hover { border-color: var(--tc-accent); color: var(--tc-highlight); }

/* Hochladen sichtbar machen (#927, 07.10.2026). Tim: „Wieso kommuniziert mir
   das Uploadformular nicht, dass es gerade hochlaedt?" Jedes Vorschaubild
   zeigt seinen Zustand: wartet (gedimmt) · laedt (Balken waechst unten mit
   --fortschritt 0…1) · fertig (Haken) · Fehler (roter Rand). Gesetzt vom
   Aufrufer (social.js _thumbZustand, werkbank.js neuerStand); waehrend des Hochladens sind Entfernen
   und „+" weg, sonst verrutschte die Reihenfolge. */
.tc-fotowahl__bild::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--tc-highlight);
  transform-origin: left center;
  transform: scaleX(var(--fortschritt, 0));
  opacity: 0;
  transition: transform var(--tc-duration-fast, 120ms) linear,
              opacity var(--tc-duration-normal, 200ms) ease;
}
.tc-fotowahl__bild img { transition: opacity var(--tc-duration-normal, 200ms) ease; }
.tc-fotowahl__bild.is-wartet img { opacity: 0.4; }
.tc-fotowahl__bild.is-laedt img { opacity: 0.75; }
.tc-fotowahl__bild.is-laedt::after { opacity: 1; }
.tc-fotowahl__bild.is-fertig::after { opacity: 1; transform: scaleX(1); background: var(--tc-success); }
.tc-fotowahl__bild.is-fertig::before {
  content: '\2713';
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tc-success); color: var(--tc-text-on-accent);
  font-weight: 700; font-size: 1rem;
  animation: tc-scale-in var(--tc-motion-bounce) both;
}
.tc-fotowahl__bild.is-fehler { border-color: var(--tc-danger); box-shadow: 0 0 0 1px var(--tc-danger); }
.tc-fotowahl__bild.is-fehler img { opacity: 0.5; }
.tc-fotowahl.is-hochladen .tc-fotowahl__weg,
.tc-fotowahl.is-hochladen .tc-fotowahl__plus { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tc-fotowahl__bild.is-fertig::before { animation-duration: 0.01ms; }
}