.login-box {


    background: grey;
    border: 1px solid #555 !important;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #f0f0f0 !important;



}
.login-box input { padding:6px; margin-right:6px; }
.login-box button { padding:6px 12px; margin-right:6px; }

/* Logout-Badge */
#logoutBadge {
    display:none;
    background:#d4edda;
    color:#155724;
    padding:6px 12px;
    border-radius:6px;
    margin-bottom:12px;
    font-weight:bold;
}

/* Tabs */
.tabs-wrapper { overflow-x:auto; background:grey; border-bottom:1px solid #e0e0e0; }
.tabs { display:flex; gap:12px; padding:12px; }
.tab-button { flex:0 0 auto; background:transparent; border:1px solid transparent; padding:8px 14px; cursor:pointer; border-radius:6px; font-weight:600; white-space:nowrap; transition: background 0.3s; }
.tab-button:hover { background:#e6f0ff; }
.tab-button.active { background:#486144; color:#fff; }
@media(max-width:767px){.tab-button.desktop-only{display:none;}}




.tab-content {
    display: none; /* statt absolute + opacity */
    flex-wrap: wrap;
    gap: 8px;
}

.tab-content.active {
    display: flex; /* zeigt die aktive Galerie */
}



/* Galerie Styles */
.thumb-large, .thumb-small { position: relative; box-sizing: border-box; }
.thumb-large img, .thumb-small img { width:100%; height:auto; display:block; border-radius:4px; }
.private-label { position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.7); color:#fff; padding:5px 10px; border-radius:6px; font-size:14px; z-index:50; }

/* Responsive */
#content200 .thumb-small { flex:0 0 calc(50% - 8px); }
@media(min-width:768px){ #content200 .thumb-small { flex:0 0 calc(25% - 8px); } }

/* Tab 500 */
#content500 .thumb-large { flex:0 0 100%; }
@media(min-width:601px) and (max-width:900px){ #content500 .thumb-large { flex:0 0 calc(50% - 8px); } }
@media(min-width:901px) { #content500 .thumb-large { flex:0 0 calc(33.33% - 8px); } }

/* Tab 900 */
#content900 .thumb-large { flex:0 0 100%; max-width:900px; margin:0 auto; }
@media(min-width:901px) and (max-width:1200px){ #content900 .thumb-large { flex:0 0 calc(50% - 8px); max-width:900px; margin:0 auto; } }
@media(min-width:1201px){ #content900 .thumb-large { flex:0 0 900px; margin:0 auto; } }

/* Allgemein responsive */
@media(max-width:600px){ .thumb-small, .thumb-large { flex:0 0 100%; } }



/* ============================================
   DARK MODE – Parameter
   ============================================ */

/* Gesamte Loginbox */
body.dark #loginContainer.login-box {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #f0f0f0 !important;
}


body.dark .tabs-wrapper {
    background: #2a2a2a !important;
    border-bottom: 1px solid #555 !important;
}

body.dark .tab-button {
    color: #ffffff !important;   /* Textfarbe weiß */

}

/* -----------------------------------------------------
   UX: Klickbare Galerie-Bilder sichtbar machen
------------------------------------------------------ */

/* Cursor zeigt: klickbar */
.thumb-large a,
.thumb-small a {
    cursor: pointer;
}

/* sanfter Hover-Effekt */
.thumb-large img,
.thumb-small img {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.thumb-large:hover img,
.thumb-small:hover img {
    transform: scale(1.03);
    opacity: 0.85;
}

/* Rahmen beim Hover – nur Desktop */
@media (hover: hover) {
    .thumb-large:hover,
    .thumb-small:hover {
        outline: 3px solid rgba(255,255,255,0.6);
        outline-offset: -3px;
        border-radius: 4px;
    }
}


/* Overlay-Icon – nur Desktop */
@media (hover: hover) {
    .thumb-large a,
    .thumb-small a {
        position: relative;
        display: block;
    }

    .thumb-large a::after,
    .thumb-small a::after {
        content: "🔍";
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.65);
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 18px;
        color: #fff;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
    }

    .thumb-large:hover a::after,
    .thumb-small:hover a::after {
        opacity: 1;
        transform: translateY(0);
    }
}