/* Drag-Handle Overlay für Quill Image Resize */

.ql-image-overlay {
    box-sizing: border-box;
    border: 1px dashed #2684ff;
    pointer-events: none;
}

.ql-image-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid #2684ff;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 10001;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.ql-image-handle:hover {
    background: #2684ff;
}

.ql-image-handle-nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}

.ql-image-handle-ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}

.ql-image-handle-sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

.ql-image-handle-se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

/* Während des Drags Text-Selection global unterdrücken */
.ql-image-overlay.is-dragging,
.ql-image-overlay.is-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

/* Im Editor selbst soll das Bild visuell ein leichtes Outline bekommen,
   wenn es aktiv ist — aber CSS kann nicht aus dem Overlay zurückgreifen,
   daher: ein dünner Schatten ist genug; der gestrichelte Rand am Overlay
   markiert das aktive Bild klar genug. */