/* ============================================================
   v761: Fotos sortieren (Ziehen) und drehen – foto-werkzeuge.js.
   ============================================================ */

/* Griff mit Positionsnummer oben links an jedem Foto (nur mit Bearbeitungsrecht). */
#fotoGrid > .foto-kachel { position: relative; }
.foto-griff {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; min-width: 26px; padding: 0 9px 0 7px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(15, 18, 24, .62); color: #fff;
  font: inherit; font-size: 12px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background .15s;
}
.foto-griff svg { width: 8px; height: 13px; fill: currentColor; opacity: .9; }
/* Trefferfläche mindestens 44 × 44 px, ohne das Bild zu vergrößern. */
.foto-griff::before { content: ""; position: absolute; inset: -9px -6px; }
.foto-griff:hover { background: rgba(15, 18, 24, .82); }
.foto-griff:focus-visible { outline: 2px solid var(--accent, #3b6fe0); outline-offset: 2px; }
#fotoGrid.foto-sortierbar > .foto-kachel img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* Im Auswahlmodus („Fotos auswählen“) wird nicht sortiert. */
#fotoGrid > .foto-kachel.auswahl-modus .foto-griff { display: none; }

/* Das angehobene Foto folgt dem Zeiger. */
.foto-kachel.foto-zieht {
  position: fixed !important; z-index: 2000; margin: 0 !important; pointer-events: none;
  transform: scale(1.04); box-shadow: 0 16px 34px rgba(15, 23, 42, .32), 0 2px 6px rgba(15, 23, 42, .18);
  border-radius: 10px; opacity: .97; cursor: grabbing;
}
.foto-kachel.foto-landet { transform: scale(1); box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }
/* Die Lücke am Zielplatz. */
.foto-platzhalter {
  box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--accent, #3b6fe0) 70%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--accent, #3b6fe0) 9%, transparent);
}
body.foto-sortieren-aktiv, body.foto-sortieren-aktiv * { cursor: grabbing !important; user-select: none !important; }

/* Drehen in der Fotoansicht: [↺ | − | 100 % | + | ↻] – gleiche Höhe und Teilung wie die Zoom-Leiste. */
#fotoModal.foto-drehbar .foto-zoom-leiste { grid-template-columns: 44px 42px minmax(72px, auto) 42px 44px !important; }
#fotoModal .foto-dreh-btn:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#fotoModal .foto-dreh-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#fotoModal .foto-dreh-links { border-right: 1px solid rgba(255, 255, 255, 0.14); }
#fotoModal .foto-dreh-rechts { border-left: 1px solid rgba(255, 255, 255, 0.14); }
#fotoModal .foto-dreh-btn:disabled { opacity: .45; }