/* --- BASIS-DESIGN --- */

body { 

    margin: 0; 

    padding-top: 80px; /* WICHTIG: Erzeugt Platz unter dem fixierten Header */

    background: #fff0f3; 

    font-family: 'Segoe UI', sans-serif; 

    overflow-x: hidden; 

}


/* --- FIXIERTER HEADER --- */

.header-bar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 70px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 50px;

    background: rgba(255, 51, 102, 0.95); /* Leicht transparentes Pink */

    color: white;

    box-shadow: 0 2px 15px rgba(0,0,0,0.2);

    z-index: 9999;

    box-sizing: border-box;

}


.main-nav ul {

    list-style: none;

    display: flex;

    gap: 20px;

    margin: 0;

    padding: 0;

}


.main-nav a {

    color: white;

    text-decoration: none;

    font-weight: bold;

}


/* --- MENÜ (USER DROPDOWN) --- */

.user-dropdown {

    position: relative;

    display: inline-block;

}


.user-trigger {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 5px 15px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    cursor: pointer;

    transition: background 0.3s;

}


.user-trigger img {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid white;

}


.dropdown-content {

    display: none;

    position: absolute;

    right: 0;

    top: 100%; /* Klappt direkt unter dem Trigger aus */

    background-color: white;

    min-width: 200px;

    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);

    border-radius: 8px;

    z-index: 1000;

    overflow: hidden;

}


.user-dropdown:hover .dropdown-content {

    display: block;

}


.dropdown-content a {

    color: #333;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    border-bottom: 1px solid #f1f1f1;

}


.dropdown-content a:hover {

    background-color: #f9f9f9;

}


/* --- PLASMA HERZ-CONTAINER --- */

#heart-container {

    position: fixed;

    top: 0; left: 0;

    width: 100vw; height: 100vh;

    pointer-events: none; 

    z-index: 1; /* Herz-Animation hinter dem Header */

    overflow: hidden; 

}


.heart {

    position: absolute;

    width: 200px;

    height: 200px;

    clip-path: path('M 100 180 C 100 180 20 120 20 70 C 20 30 50 10 100 40 C 150 10 180 30 180 70 C 180 120 100 180 100 180');

    background: radial-gradient(circle at 35% 35%, #ffccd5, #ff3366 50%, #800020 95%);

    filter: drop-shadow(0px 0px 15px rgba(255, 51, 102, 0.6));

    animation: rise3D 20s linear infinite;

    opacity: 0.9;

}


@keyframes rise3D {

    0% { transform: translateY(110vh) scale(0.5) rotate(0deg); }

    100% { transform: translateY(-20vh) scale(1.2) rotate(10deg); }

}


/* --- MAIN CONTAINER --- */

#main-container {

    background: rgba(255, 255, 255, 0.7); 

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 51, 102, 0.2);

    border-radius: 20px; 

    padding: 30px; 

    margin: 50px auto; 

    width: 80%;

    max-width: 1000px;

    z-index: 10;

    position: relative;

    color: #2d1318;

}


.glass-panel {

    background: rgba(255, 255, 255, 0.5);

    padding: 20px;

    border-radius: 15px;

    margin-bottom: 20px;

}


.panel-title {

    font-weight: bold;

    margin-bottom: 10px;

    border-bottom: 2px solid #ff3366;

    display: inline-block;

}


/* Ticker Gesamt-Container */

.activity-ticker-container {

    display: flex;

    align-items: center;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    padding: 3px 15px 3px 5px;

    overflow: hidden;

    max-width: 500px; /* Kannst du je nach Platz im Header anpassen */

    height: 34px;

    backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.3);

}


/* Das rote "GERADE AKTIV" Label */

.ticker-badge {

    background: #ff3366;

    color: white;

    font-size: 0.75em;

    font-weight: bold;

    padding: 5px 10px;

    border-radius: 15px;

    text-transform: uppercase;

    white-space: nowrap;

    margin-right: 10px;

    box-shadow: 0 2px 5px rgba(255, 51, 102, 0.3);

}


/* Der sichtbare Bereich für das Laufband */

.ticker-wrapper {

    overflow: hidden;

    display: flex;

    align-items: center;

    width: 100%;

}


/* Die scrollende Box (CSS Animation) */

.ticker-scroll {

    display: flex;

    gap: 20px;

    align-items: center;

    white-space: nowrap;

    animation: tickerLoop 25s linear infinite;

}


/* Animation stoppen, wenn man mit der Maus drüber fährt */

.ticker-scroll:hover {

    animation-play-state: paused;

}


/* Ein einzelner User im Ticker */

.ticker-item {

    display: flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    color: #2d1318;

    font-weight: bold;

    font-size: 0.85em;

}


/* Kleiner runder Avatar im Ticker */

.ticker-avatar {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    overflow: hidden;

    border: 1.5px solid #ff3366;

    background: #fff;

}

.ticker-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* Grüner Online-Punkt hinter dem Namen */

.online-dot {

    width: 7px;

    height: 7px;

    background: #2ecc71;

    border-radius: 50%;

    display: inline-block;

    box-shadow: 0 0 4px #2ecc71;

}


/* Die unendliche CSS-Laufband-Animation */

@keyframes tickerLoop {

    0% { transform: translate3d(100%, 0, 0); }

    100% { transform: translate3d(-100%, 0, 0); }

} 


/* --- CHAT FREIGABE HERZ-SYMBOL & MENÜ --- */

.chat-heart-wrapper {
    position: relative;
    display: inline-block;
}

.chat-heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    padding: 5px;
    line-index: 1;
    transition: transform 0.2s ease;
}

.chat-heart-btn:hover {
    transform: scale(1.1);
}

/* Die drei Herz-Zustände */
.chat-heart.empty::before { content: "??"; } /* Leer / Keine Freigabe */
.chat-heart.half::before { content: "??"; }  /* Halbvoll / 1 Freigabe (Bild ODER Sprache) */
.chat-heart.full::before { content: "??"; }  /* Voll / Beide Freigaben aktiv */

/* Das Dropdown-Menü für das Herz */
.chat-heart-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #ffffff;
    min-width: 210px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 12px 15px;
    z-index: 100;
    border: 1px solid rgba(255, 51, 102, 0.2);
}

.chat-heart-wrapper.active .chat-heart-dropdown {
    display: block;
}

.chat-heart-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #2d1318;
    margin-bottom: 8px;
    cursor: pointer;
}

.chat-heart-dropdown label:last-child {
    margin-bottom: 0;
}

.chat-heart-dropdown input[type="checkbox"] {
    accent-color: #ff3366;
    width: 16px;
    height: 16px;
    cursor: pointer;
}