/* ===== Passwort ===== */
.dlg-titel { margin-bottom: 16px; }
.dlg-pw-wrap { max-width: 420px; margin: 40px auto; text-align: center; padding: 32px; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.12); }
.dlg-pw-hint { margin-bottom: 16px; color: #555; }
.dlg-pw-input { width: 100%; padding: 12px 16px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; margin-bottom: 12px; }
.dlg-pw-btn { width: 100%; padding: 12px; background: #111; color: #fff; border: none; border-radius: 6px; font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.dlg-pw-btn:hover { background: #333; }

/* ===== Toolbar ===== */
.dlg-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.dlg-count { color: #666; font-size: 14px; }
.dlg-zip-btn { background: #111; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dlg-zip-btn:hover { background: #333; }

/* ===== Masonry Grid ===== */
/* position:relative ist Pflicht - Masonry positioniert Items mit position:absolute darin */
.dlg-grid {
    position: relative;
    opacity: 0;                     /* unsichtbar bis Masonry fertig */
    transition: opacity 0.4s ease;
}

.dlg-grid.dlg-ready {
    opacity: 1;                     /* sichtbar sobald Masonry berechnet hat */
}

/* Breite wird per JS dynamisch gesetzt (abhaengig von Spaltenanzahl) */
.dlg-item {
    break-inside: avoid;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
    margin-bottom: 6px;
}
.dlg-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .25s;
}
.dlg-item:hover img { transform: scale(1.03); }
.dlg-loading { text-align: center; padding: 20px; color: #888; }

/* ===== Lightbox ===== */
.dlg-lb { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.dlg-lb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.92); }

.dlg-lb-close {
    position: absolute; top: 18px; right: 18px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; font-size: 20px;
    border: none; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
}
.dlg-lb-close:hover { background: rgba(255,255,255,.3); }

.dlg-lb-counter {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 14px; z-index: 2;
    background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 20px;
}

.dlg-lb-prev, .dlg-lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; background: rgba(255,255,255,.15);
    color: #fff; font-size: 32px; border: none; cursor: pointer;
    border-radius: 50%; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.dlg-lb-prev { left: 16px; }
.dlg-lb-next { right: 16px; }
.dlg-lb-prev:hover, .dlg-lb-next:hover { background: rgba(255,255,255,.3); }

.dlg-lb-img-wrap { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; }
.dlg-lb-img { max-width: 90vw; max-height: 88vh; object-fit: contain; display: block; border-radius: 4px; transition: opacity 0.2s ease; }
.dlg-lb-spinner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.dlg-lb-spinner::after {
    content: ''; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.3);
    border-top-color: #fff; border-radius: 50%; animation: dlg-spin .7s linear infinite;
}
@keyframes dlg-spin { to { transform: rotate(360deg); } }

.dlg-lb-dl {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: #fff; background: rgba(255,255,255,.15);
    padding: 8px 20px; border-radius: 20px; text-decoration: none;
    font-size: 13px; z-index: 2; white-space: nowrap;
}
.dlg-lb-dl:hover { background: rgba(255,255,255,.3); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .dlg-item { width: calc(50% - 3px) !important; }
}
@media (max-width: 520px) {
    .dlg-item { width: 100% !important; }
    .dlg-lb-prev { left: 4px; }
    .dlg-lb-next { right: 4px; }
}