/* Das hidden-Attribut muss die display:grid-Regel des Hauptplugins schlagen. */
.hsp-section-grid[hidden] {
    display: none !important;
}

.hsp-section-grid.hkrzs-sortable .hsp-tile {
    position: relative;
}

.hkrzs-sort-handle {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 4;
    transform: translateY(-50%);
    width: 24px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    font-size: 16px;
    line-height: 1;
    opacity: .46;
    background: rgba(255,255,255,.72);
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
}

.hkrzs-sort-handle:hover,
.hkrzs-sort-handle:focus-visible {
    opacity: .9;
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.hkrzs-sort-handle:active {
    cursor: grabbing;
}

.hsp-tile.hkrzs-dragging {
    opacity: .38;
}

.hsp-tile.hkrzs-drag-over {
    outline: 2px dashed var(--hsp-section-accent, #8f8177);
    outline-offset: 3px;
}

.hkrzs-save-status {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    max-width: min(340px, calc(100vw - 36px));
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    color: #3c3028;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.hkrzs-save-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 700px) {
    .hkrzs-sort-handle {
        right: 4px;
        width: 28px;
        height: 36px;
    }
}
.hsp-section-grid.hkrzs-external-over{outline:3px dashed var(--hsp-section-accent,#8f8177);outline-offset:5px;border-radius:15px;background:color-mix(in srgb,var(--hsp-section-accent,#8f8177) 7%,transparent)}