body {
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background: radial-gradient(circle at top, #1a1a1a, #000);
    color:white;
}

/* HEADER */
header {
    text-align:center;
    padding:30px 10px 10px;
}

h1 {
    font-size:2.5em;
    color:#d4af37;
    text-shadow:0 0 15px #d4af37, 0 0 30px #ff0000;
}

/* CONTROLS */
.controls {
    margin-top:10px;
}

.controls button {
    margin:5px;
    padding:8px 12px;
    border:none;
    border-radius:6px;
    background:#222;
    color:white;
    cursor:pointer;
}

/* UPLOAD BOX */
.upload {
    max-width:900px;
    margin:20px auto;
    padding:15px;

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;

    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    border-radius:12px;
}

.upload input,
.upload textarea {
    background:#222;
    border:1px solid #444;
    color:white;
    padding:8px;
    border-radius:6px;
}

.upload button {
    background:linear-gradient(45deg,#d4af37,#ff0000);
    border:none;
    padding:10px 15px;
    border-radius:8px;
    cursor:pointer;
}

/* DROPZONE */
#dropzone {
    max-width:900px;
    margin:20px auto;
    padding:25px;
    border:2px dashed #d4af37;
    border-radius:12px;
    text-align:center;
    transition:0.3s;
}

#dropzone:hover {
    background:rgba(212,175,55,0.1);
}

/* GALLERY WRAPPER */
.gallery {
    max-width:1200px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;

    padding:20px;
}

/* CARD */
.item {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    background:#111;

    box-shadow:0 0 15px rgba(0,0,0,0.6);
    transition:0.3s;
}

/* IMAGE */
.item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* HOVER */
.item:hover {
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 0 30px rgba(212,175,55,0.4);
}

/* TOP IMAGE (wichtig: NICHT mehr übertreiben) */
.item.top {
    grid-column:span 2;
}

/* LIKE */
.like {
    position:absolute;
    bottom:10px;
    left:10px;

    background:rgba(0,0,0,0.6);
    padding:5px 10px;
    border-radius:20px;
    font-size:14px;
}

/* LIKE BUTTON */
.like-btn {
    position:absolute;
    bottom:10px;
    right:10px;

    width:34px;
    height:34px;
    border-radius:50%;
    border:none;

    background:red;
    color:white;
    cursor:pointer;
}

/* LIGHTBOX */
#lightbox {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;

    justify-content:center;
    align-items:center;
    z-index:9999;
}

#lightbox img {
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}