/* -------------------------------------------------
   Grundlayout
   ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

/* Hintergrundbild – Vollbild, fixiert */
body {
    background: url('background.jpg') center/cover no-repeat fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

/* Avatar */
.avatar-wrapper { margin-bottom: 2rem; }
.avatar {
    width: 150px; height: 150px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Social‑Links – nur Icons */
.social-links {
    display: flex; gap: 2rem; margin-top: 0.8rem;
}
.social-links a,
.social-links button {
    background:none; border:none; cursor:pointer;
}
.social-links img {
    width:48px; height:48px;
    filter:brightness(0) invert(1);
    transition:transform .2s, filter .2s;
}
.social-links a:hover img,
.social-links button:hover img {
    transform:scale(1.2);
    filter:brightness(1.2);
}

/* Feedback‑Blink‑Animation für den Discord‑Button */
.discord-copy.copied img {
    animation: blink 0.8s ease;
}
@keyframes blink {
    0%   { filter: brightness(2) invert(1); }
    50%  { filter: brightness(1) invert(1); }
    100% { filter: brightness(2) invert(1); }
}

/* Musik‑Button */
.music-btn {
    background:rgba(0,0,0,0.5);
    border:none; color:#fff;
    padding:0.6rem 1.2rem; font-size:1rem;
    border-radius:4px; cursor:pointer;
    transition:background .2s;
}
.music-btn:hover { background:rgba(0,0,0,0.7); }

/* Bottom‑Toolbar (rechts unten) */
.bottom-toolbar {
    position:fixed; right:1rem; bottom:1rem;
    display:flex; flex-direction:column; align-items:flex-end;
    gap:0.6rem; z-index:1000;
}
.toolbar-item {
    background:rgba(0,0,0,0.55);
    border-radius:4px; padding:0.4rem 0.8rem;
    font-size:0.95rem; color:#fff;
}

/* OnlyFans‑Modal */
.modal {
    position:fixed; top:0; left:0;
    width:100vw; height:100vh;
    background:rgba(0,0,0,0.9);
    display:flex; align-items:center; justify-content:center;
    z-index:2000; opacity:0; visibility:hidden;
    transition:opacity .3s ease;
}
.modal.hidden { opacity:0; visibility:hidden; }
.modal:not(.hidden) { opacity:1; visibility:visible; }

.modal-content {
    position:relative;
    max-width:90vw; max-height:90vh;
    overflow:hidden;
}
.modal-close {
    position:absolute; top:10px; right:10px;
    background:rgba(0,0,0,0.6);
    color:#fff; border:none;
    font-size:1.5rem; cursor:pointer;
    width:40px; height:40px;
    border-radius:50%; line-height:1; text-align:center;
}
.slide { display:none; }
.slide.active { display:block; }
.slide img {
    width:100%; height:auto;
    max-height:80vh;
    object-fit:contain;
    border-radius:8px;
}

/* Responsives Design */
@media (max-width:600px) {
    .avatar { width:120px; height:120px; }
    .social-links img { width:36px; height:36px; }
    .music-btn,
    .toolbar-item { font-size:.85rem; padding:.3rem .6rem; }
}