/*-------------------------
    GRUNDLAGEN
-------------------------*/

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #413721;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
}


/*-------------------------
    HAUPTLAYOUT
-------------------------*/

#app {
    display: flex;
    width: 100%;
    height: 100vh;
}


/*-------------------------
    SERVERLEISTE
-------------------------*/

#serverauswahl {
    flex: 0 0 72px;
    background-color: #302819;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 12px;
}

.server-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-radius 0.2s, background-color 0.2s;
}

.server-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 25px;
}

.server-icon img {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.direktnachrichtenbutton:hover {
    scale: 120%;
}

.server-icon:hover {
    border-radius: 15px;

}

.server-icon.active {
    border-radius: 15px;

}

.server-icon.active::before {
    content: "";
    position: absolute;
    left: -12px;
    width: 5px;
    height: 32px;
    background-color: orange;
    border-radius: 0 5px 5px 0;
}

.add-server {
    background-color: rgba(255, 166, 0, 0.15);
    color: orange;
    font-size: 30px;
}

.add-server:hover {
    background-color: orange;
    color: white;
}

.sidebar-trenner {
    width: 32px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

.add-server {
    background-color: rgba(255, 166, 0, 0.2);
    color: orange;
    font-size: 30px;
}

.add-server:hover {
    background-color: orange;
    color: white;
}


/*-------------------------
    DM-SEITENLEISTE
-------------------------*/

#channelauswahl {
    flex: 0 0 240px;
    background-color: #382f20;
    padding: 15px;
}

#sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 5px 5px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar-header-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#sidebar-header h2 {
    font-size: 17px;
}

.sidebar-eintrag {
    margin-top: 20px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(255, 166, 0, 0.15);
    color: white;
    font-weight: bold;
}

#keine-freunde {
    padding: 15px 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}



#freunde-oeffnen {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: none;
    border-radius: 10px;
    background-color: rgba(255, 166, 0, 0.12);
    color: #ffa600;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#freunde-oeffnen img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

#freunde-oeffnen:hover {
    background-color: rgba(255, 166, 0, 0.25);
    transform: scale(1.05);
}

#freunde-oeffnen {
    position: relative;
}

#freunde-anfragen-punkt {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    background-color: #ff4757;
    border: 2px solid #2b2d31;
    border-radius: 50%;
    display: none;
}




/* ==========================================
   DIREKTNACHRICHTEN – PERSONENEINTRÄGE
========================================== */

.dm-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    margin: 3px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dm-person:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.dm-person.active {
    background-color: rgba(255, 166, 0, 0.15);
}

/* Profilbild */

.dm-person-bild {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Name und Bio */

.dm-person-info {
    flex: 1;
    min-width: 0;
    width: 0;
    overflow: hidden;
}

.dm-person-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.dm-person-bio {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Online-Status */

.dm-person-status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dm-person-status.online {
    background-color: #43b581;
}

.dm-person-status.abwesend {
    background-color: #faa61a;
}

.dm-person-status.beschaeftigt {
    background-color: #f04747;
}

.dm-person-status.offline {
    background-color: #747f8d;
}

.dm-unread-indicator {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background-color: #3b82f6;
    flex-shrink: 0;
    animation: dm-unread-indicator-anim 5s ease-in-out infinite;
}


@keyframes dm-unread-indicator-anim {
    16% {box-shadow: 0px 0px 10px yellow;}
    32% {box-shadow: 0px 0px 10px lime;}
    64% {box-shadow: 0px 0px 10px blue;}
    80% {box-shadow: 0px 0px 10px violet;}
    96% {box-shadow: 0px 0px 10px blueviolet;}
}
/*-------------------------
    HAUPTBEREICH
-------------------------*/

#maincontent {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #413721;
}

#chatheader {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#chatheader h2 {
    font-size: 17px;
}


/* Anrufbutton im Chat-Header */

#chatheader-anrufen {
    display: none;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: auto;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 166, 0, 0.12);
    cursor: pointer;
    opacity: 0.7;
    transition: background-color 0.2s, opacity 0.2s;
    flex-shrink: 0;
}

#chatheader-anrufen:hover {
    background-color: rgba(255, 166, 0, 0.25);
    transform: scale(1.05);
}

#chatheader-anrufen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#chat {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* Empty-State weiterhin zentrieren */
#empty-state {
    margin: auto;
}

/* Unterhaltung füllt den gesamten Chatbereich */
#unterhaltung {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


/*-------------------------
    LEERER CHAT
-------------------------*/

#empty-state {
    max-width: 500px;
    text-align: center;
    padding: 30px;
}

#empty-icon img {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(255, 166, 0, 0.15);
    border-radius: 25px;

    font-size: 45px;
}

#empty-state h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

#empty-state p {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    font-size: 14px;
    margin-bottom: 10px;
}


/*-------------------------
    RESPONSIVE
-------------------------*/

@media (max-width: 600px) {

    #channelauswahl {
        flex-basis: 190px;
    }

    #serverauswahl {
        flex-basis: 60px;
    }

    .server-icon {
        width: 42px;
        height: 42px;
    }

    .server-icon img {
        width: 42px;
        height: 42px;
    }

}


#api-status {
    margin-top: 15px;
    padding: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

#dm-suche {
    width: 100%;
    margin-top: 15px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    outline: none;

    background-color: rgba(0, 0, 0, 0.25);
    color: white;

    font-size: 13px;
}

#dm-suche::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#dm-suche:focus {
    box-shadow: 0 0 0 2px rgba(255, 166, 0, 0.6);
}


.sidebar-eintrag {
    margin-top: 20px;
    padding: 10px 5px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

#keine-freunde {
    padding: 12px 5px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    line-height: 1.5;
}

/* BENUTZERPROFIL */

#serverprofil {
    position: relative;
    margin-top: auto;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

#profilbild {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #a66b32;
    font-size: 22px;
    font-weight: bold;
}

#profilstatus {
    position: absolute;
    right: -2px;
    bottom: -2px;

    width: 14px;
    height: 14px;
    border-radius: 50%;

    border: 3px solid #302819;
}

/* Online */
#profilstatus {
    background-color: #23a55a;
}

/* Abwesend */
#profilstatus.abwesend {
    background-color: #f0b232;
}

/* Beschäftigt */
#profilstatus.beschaeftigt {
    background-color: #f23f43;
}

/* Offline */
#profilstatus.offline {
    background-color: #808080;
}


#profilbild {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

#profilbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* PROFILMENÜ */

#serverprofil {
    position: relative;
}

#profilmenue {
    display: none;
    position: absolute;

    bottom: 60px;
    left: 0;

    width: 260px;
    padding: 15px;

    background-color: #302819;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

#profilmenue-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

#profilmenue-bild {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}

#profilmenue-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profilmenue-info h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

#profilmenue-info p {
    margin: 0;
    color: #35c46a;
    font-size: 13px;
}

.profilmenue-trenner {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 15px 0;
}

#profileinstellungen {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 7px;
    background-color: rgba(255, 166, 0, 0.15);
    color: white;
    cursor: pointer;
}

#profileinstellungen:hover {
    background-color: rgba(255, 166, 0, 0.3);
}


#abmelden {
    width: 100%;
    margin-top: 8px;
    padding: 10px;

    border: none;
    border-radius: 7px;

    background-color: rgba(220, 60, 60, 0.15);
    color: #ff7777;

    cursor: pointer;
    transition: background-color 0.2s;
}

#abmelden:hover {
    background-color: rgba(220, 60, 60, 0.3);
}



/* PROFILEINSTELLUNGEN */

#profileinstellungen-fenster {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;

    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.7);
}

#profileinstellungen-inhalt {
    width: 450px;
    max-width: 90%;
    padding: 25px;

    background-color: #382f20;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#profileinstellungen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

#profileinstellungen-header h2 {
    margin: 0;
    font-size: 20px;
}

#profileinstellungen-schliessen {
    border: none;
    background: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

#profilbearbeitung {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

#profilbild-gross {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: solid black 1px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#profilbild-bereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#profilbild-gross img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profilbearbeitung p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.profilfeld {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.profilfeld label {
    font-size: 13px;
    font-weight: bold;
}

.profilfeld input,
.profilfeld textarea {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    outline: none;
}

#profileinstellungen-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

#profil-speichern {
    padding: 11px 16px;
    border: none;
    border-radius: 7px;
    background-color: #a66b32;
    color: white;
    cursor: pointer;
}

#profil-speichern:hover {
    background-color: #c0803d;
}


.profilfeld select {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background-color: #302819;
    color: white;
    outline: none;
    cursor: pointer;
}

.profilfeld select:focus {
    border-color: orange;
}


#profilbild-gross img {
    cursor: pointer;
}



/*--BILDEDITOR--*/
/*--PROFILBILD-EDITOR--*/

#profilbild-editor-fenster {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#profilbild-editor-inhalt {
    width: 450px;
    background-color: #302819;
    border-radius: 12px;
    padding: 20px;
}

#profilbild-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#profilbild-editor-schliessen {
    background: none;
    border: none;
    color: white;
    font-size: 25px;
    cursor: pointer;
}

#profilbild-editor-bereich {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#profilbild-editor-vorschau {
    width: 280px;
    height: 280px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background-color: #1e1e1e;
}

#profilbild-editor-bild {
    position: absolute;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

#profilbild-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

#profilbild-editor-footer button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}


/* PROFILBILD ZURÜCKSETZEN */

#profilbild-zuruecksetzen {
    margin-top: 10px;
    padding: 9px 14px;

    background-color: #8f3434;
    color: white;

    border: none;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

#profilbild-zuruecksetzen:hover {
    background-color: #b44343;
}

#profilbild-zuruecksetzen:active {
    background-color: #742929;
}



#account-loeschen-bereich {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #754040;
}

#account-loeschen-bereich h3 {
    color: #d9534f;
    margin-bottom: 10px;
}

#account-loeschen-bereich p {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 15px;
}

#account-loeschen {
    padding: 10px 16px;
    background-color: #8f3434;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#account-loeschen:hover {
    background-color: #b44343;
}




/*--UUID ANZEIGE--*/
/* ==========================================
   PROFIL – UUID ANZEIGE
========================================== */

#profil-uuid-anzeige {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 320px;
    margin-top: 0;
    font-size: 12px;
    color: #999;
}

#profil-uuid-anzeige > span {
    color: #bbb;
}

#profil-uuid-zeile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
}

#profil-uuid {
    color: #999;
    font-family: monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
    text-align: center;
}

#profil-uuid-kopieren {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: #241e15;
    color: #ffa600;
    cursor: pointer;
}

#profil-uuid-kopieren:hover {
    background: #3a2d1b;
}

#profil-uuid-rueckmeldung {
    min-height: 12px;
    color: #ffa600;
    font-size: 11px;
}

#profil-uuid-kopieren img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    margin: auto;
}




/*--ACCOUNT LÖSCHEN--*/

/*--ACCOUNT LÖSCHEN MODAL--*/

#account-loeschen-modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

#account-loeschen-inhalt {
    width: 450px;
    max-width: calc(100% - 40px);
    background-color: #302819;
    border-radius: 12px;
    padding: 20px;
}

#account-loeschen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#account-loeschen-header h2 {
    margin: 0;
}

#account-loeschen-schliessen {
    background: none;
    border: none;
    color: white;
    font-size: 25px;
    cursor: pointer;
}

#account-loeschen-warnung {
    background-color: rgba(143, 52, 52, 0.15);
    border: 1px solid #8f3434;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 20px;
}

#account-loeschen-warnung h3 {
    color: #d9534f;
    margin-top: 0;
}

#account-loeschen-warnung p {
    color: #ddd;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

#account-loeschen-eingabe {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#account-loeschen-bestaetigung {
    padding: 10px;
    background-color: #211c15;
    border: 1px solid #665b48;
    border-radius: 6px;
    color: white;
    outline: none;
}

#account-loeschen-bestaetigung:focus {
    border-color: #b44343;
}

#account-loeschen-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

#account-loeschen-footer button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
}

#account-loeschen-abbrechen {
    background-color: #514638;
}

#account-loeschen-abbrechen:hover {
    background-color: #665a48;
}

#account-loeschen-endgueltig {
    background-color: #8f3434;
}

#account-loeschen-endgueltig:hover {
    background-color: #b44343;
}


#account-loeschen-endgueltig:disabled {
    background-color: #514638;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

#profil-email-anzeige {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

#profil-email-anzeige span:first-child {
    color: #bbb;
}

#account-loeschen-erfolg {
    text-align: center;
    padding: 20px 10px;
}

#account-loeschen-erfolg h3 {
    color: #65c98b;
    margin-bottom: 12px;
}

#account-loeschen-erfolg p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
}

#account-loeschen-fehler {
    background-color: rgba(143, 52, 52, 0.15);
    border: 1px solid #8f3434;
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
}

#account-loeschen-fehler p {
    color: #e07878;
    font-size: 13px;
    margin: 0;
}



/* ==========================================
   CHAT-KOPF
========================================== */

#chatheader {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 0 20px;
    background-color: #302819;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#chatheader-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

#chatheader-bild {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

#chatheader-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#chatheader-titel {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

#chatheader-status {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}


/* ==========================================
   NACHRICHTENVERLAUF
========================================== */

#unterhaltung {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#nachrichtenverlauf {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;

    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   EINZELNE NACHRICHTEN
========================================== */

.nachricht {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
}

.nachricht:hover {
    background-color: rgba(255, 255, 255, 0.025);
}

/* Profilbild */

.nachricht-profilbild {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Nachrichteninhalt */

.nachricht-inhalt {
    flex: 1;
    min-width: 0;
}

/* Name und Zeit */

.nachricht-kopf {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.nachricht-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.nachricht-zeit {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

/* Nachrichtentext */

.nachricht-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
}

/* Zeilenumbrüche in Nachrichten erhalten */
.nachricht-text,
.nachricht-folge,
.nachricht-eigene-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ==========================================
   NACHRICHTENEINGABE
========================================== */

#nachrichteneingabe-bereich {
    padding: 12px 20px 20px;
    flex-shrink: 0;
}

#nachrichteneingabe {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: #302819;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#nachricht-text {
    flex: 1;
    min-width: 0;
    min-height: 20px;
    max-height: 120px;
    padding: 10px;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 14px;
    font-family: inherit;
    line-height: 20px;
    resize: none;
    overflow-y: auto;
}

#nachricht-text::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#nachricht-datei,
#nachricht-senden {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 166, 0, 0.15);
    color: #ffa600;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

#nachricht-datei:hover,
#nachricht-senden:hover {
    background-color: #ffa600;
    color: white;
}


/* ==========================================
   UNTERHALTUNG
========================================== */

#unterhaltung {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ==========================================
   NACHRICHTENVERLAUF
========================================== */

#nachrichtenverlauf {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

/* Nachrichten bei wenig Inhalt nach unten schieben */
#nachrichtenverlauf::before {
    content: "";
    flex: 1 0 auto;
}


/* ==========================================
   NACHRICHTENGRUPPEN
========================================== */

.nachrichtengruppe {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Folgemeldungen derselben Person */

.nachricht-folge {
    margin-left: 52px;
    padding: 2px 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Abstand zwischen verschiedenen Gruppen */

.nachrichtengruppe+.nachrichtengruppe {
    margin-top: 10px;
}


/* ==========================================
   EIGENE NACHRICHTEN
========================================== */

.nachricht-eigene {
    align-self: flex-end;
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: rgba(255, 166, 0, 0.18);
    border: 1px solid rgba(255, 166, 0, 0.25);
    color: white;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


.nachricht-eigene {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nachricht-eigene-zeit {
    align-self: flex-end;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}



/* ==========================================
   FREUNDEFENSTER
========================================== */

.freunde-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#freunde-fenster {
    display: flex;
    flex-direction: column;
    width: 850px;
    max-width: 100%;
    height: 600px;
    max-height: 90vh;
    background-color: #302819;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Kopfbereich */

#freunde-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background-color: #392f20;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#freunde-kopf h2 {
    margin: 0;
    color: white;
    font-size: 20px;
}

#freunde-schliessen {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    color: white;
    font-size: 24px;
    cursor: pointer;
}

#freunde-schliessen:hover {
    background-color: rgba(255, 166, 0, 0.2);
    color: #ffa600;
}

/* Hauptbereich */

#freunde-inhalt {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Navigation */

#freunde-navigation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 210px;
    flex-shrink: 0;
    padding: 20px 12px;
    background-color: #382e20;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.freunde-nav {
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.freunde-nav:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: white;
}

.freunde-nav.aktiv {
    background-color: rgba(255, 166, 0, 0.16);
    color: #ffa600;
}

/* Seiten */

#freunde-seiten {
    flex: 1;
    min-width: 0;
    padding: 25px;
    overflow-y: auto;
}

.freunde-seite {
    display: none;
}

.freunde-seite.aktiv {
    display: block;
}

.freunde-seite h3 {
    margin-top: 0;
    color: white;
    font-size: 18px;
}

.freunde-seite p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}



/* ==========================================
   FREUNDESUCHE
========================================== */

.freunde-beschreibung {
    margin-bottom: 22px;
}

#freundesuche-bereich {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 550px;
}

#freundesuche-eingabe {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    outline: none;
    background-color: #241e15;
    color: white;
    font-size: 14px;
}

#freundesuche-eingabe:focus {
    border-color: #ffa600;
}

#freundesuche-button {
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background-color: #ffa600;
    color: #241e15;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

#freundesuche-button:hover {
    background-color: #ffba33;
}

#freundesuche-ergebnisse {
    margin-top: 20px;
    max-width: 550px;
}

/* ==========================================
   FREUNDE – UUID HINZUFÜGEN
========================================== */

.freund-uuid-bereich {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 550px;
}

.freund-uuid-bereich h4 {
    margin-bottom: 10px;
    color: white;
}

.freund-uuid-bereich p {
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

#freund-uuid-eingabe {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    outline: none;
    background-color: #241e15;
    color: white;
    font-size: 14px;
    margin-bottom: 10px;
}

#freund-uuid-eingabe:focus {
    border-color: #ffa600;
}

#freund-uuid-button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background-color: #ffa600;
    color: #241e15;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

#freund-uuid-button:hover {
    background-color: #ffba33;
}

#freund-uuid-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#freund-uuid-rueckmeldung {
    margin-top: 12px;
    font-size: 13px;
    color: white;
}



/* ==========================================
   FREUNDESUCHE - ERGEBNISSE
========================================== */

.freundesuche-ergebnis {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.2s;
}

.freundesuche-ergebnis:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.freundesuche-ergebnis-bild {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.freundesuche-ergebnis-info {
    flex: 1;
    min-width: 0;
}

.freundesuche-ergebnis-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.freundesuche-ergebnis-status {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.freundesuche-anfrage {
    padding: 9px 13px;
    border: none;
    border-radius: 7px;
    background-color: rgba(255, 166, 0, 0.15);
    color: #ffa600;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.freundesuche-anfrage:hover {
    background-color: rgba(255, 166, 0, 0.28);
}

.freundesuche-ergebnis-uuid {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-family: monospace;
    overflow-wrap: anywhere;
}


/* ==========================================
   FREUNDSCHAFTSANFRAGEN
========================================== */

.anfragen-bereich {
    margin-top: 25px;
}

.anfragen-bereich h4 {
    margin-bottom: 12px;
    color: #ffa600;
    font-size: 14px;
}

.anfragen-leer {
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* Einzelne Anfrage */

.freundschaftsanfrage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.freundschaftsanfrage-bild {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.freundschaftsanfrage-info {
    flex: 1;
    min-width: 0;
}

.freundschaftsanfrage-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.freundschaftsanfrage-uuid {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-family: monospace;
    overflow-wrap: anywhere;
}

.freundschaftsanfrage-aktionen {
    display: flex;
    gap: 7px;
}

.freundschaftsanfrage-aktionen button {
    padding: 8px 11px;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.anfrage-annehmen {
    background-color: rgba(67, 181, 129, 0.15);
    color: #43b581;
}

.anfrage-ignorieren {
    background-color: rgba(240, 71, 71, 0.12);
    color: #f04747;
}

/* ==========================================
   FREUNDSCHAFTSANFRAGEN – BUTTONS
========================================== */

.anfrage-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.anfrage-buttons button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.anfrage-annehmen-button {
    background: #2e9d55;
    color: white;
}

.anfrage-annehmen-button:hover {
    background: #258447;
}

.anfrage-ablehnen-button {
    background: #d64545;
    color: white;
}

.anfrage-ablehnen-button:hover {
    background: #b93636;
}

.anfrage-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}





/* ==========================================
   FREUNDESLISTE
========================================== */

.freunde-liste-leer {
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.freund-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.2s;
}

.freund-eintrag:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.freund-eintrag-bild {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.freund-eintrag-info {
    flex: 1;
    min-width: 0;
}

.freund-eintrag-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.freund-eintrag-status {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.freund-eintrag-uuid {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-family: monospace;
    overflow-wrap: anywhere;
}

.freund-eintrag-aktionen {
    display: flex;
    gap: 7px;
}

.freund-eintrag-aktionen button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 166, 0, 0.12);
    color: #ffa600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.freund-eintrag-aktionen button:hover {
    background-color: rgba(255, 166, 0, 0.25);
}

.freund-entfernen {
    background-color: rgba(240, 71, 71, 0.1) !important;
    color: #f04747 !important;
}

.freund-entfernen:hover {
    background-color: rgba(240, 71, 71, 0.22) !important;
}

/* ==========================================
   FREUNDE – FREUND ENTFERNEN
========================================== */

.freund-entfernen-button {
    margin-left: auto;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: #d64545;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.freund-entfernen-button:hover {
    background: #b93636;
}

.freund-entfernen-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.freunde-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.anfragen-zaehler {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #ffa600;
    color: #241e15;
    font-size: 11px;
    font-weight: bold;
    box-sizing: border-box;
}



#freundesuche-rueckmeldung {
    max-width: 550px;
    margin-top: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

#freundesuche-rueckmeldung.fehler {
    color: #f04747;
}

#freundesuche-rueckmeldung.erfolg {
    color: #43b581;
}


/* ==========================================
   FREUND ENTFERNEN MODAL
========================================== */

#freund-entfernen-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#freund-entfernen-inhalt {
    width: 100%;
    max-width: 450px;
    background: #25262b;
    border-radius: 12px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#freund-entfernen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#freund-entfernen-header h2 {
    margin: 0;
}

#freund-entfernen-schliessen {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
}

#freund-entfernen-warnung {
    background: rgba(214, 69, 69, 0.12);
    border: 1px solid rgba(214, 69, 69, 0.4);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

#freund-entfernen-warnung h3 {
    color: #e45b5b;
    margin-top: 0;
}

#freund-entfernen-warnung p {
    margin-bottom: 0;
    line-height: 1.5;
}

#freund-entfernen-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#freund-entfernen-footer button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

#freund-entfernen-abbrechen {
    background: #41434b;
    color: #ffffff;
}

#freund-entfernen-bestaetigen {
    background: #d64545;
    color: #ffffff;
}

#freund-entfernen-bestaetigen:hover {
    background: #b93636;
}

#freund-entfernen-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#freund-entfernen-fehler {
    color: #ff7777;
    margin-bottom: 15px;
}


/* ==========================================
   DM-NACHRICHT LÖSCHEN MODAL
========================================== */

#dm-nachricht-loeschen-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#dm-nachricht-loeschen-inhalt {
    width: 100%;
    max-width: 450px;
    background: #44311c;
    border-radius: 12px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#dm-nachricht-loeschen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#dm-nachricht-loeschen-header h2 {
    margin: 0;
}

#dm-nachricht-loeschen-schliessen {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
}

#dm-nachricht-loeschen-warnung {
    background: rgba(214, 69, 69, 0.12);
    border: 1px solid rgba(214, 69, 69, 0.4);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

#dm-nachricht-loeschen-warnung h3 {
    color: #e45b5b;
    margin-top: 0;
}

#dm-nachricht-loeschen-warnung p {
    margin-bottom: 0;
    line-height: 1.5;
}

#dm-nachricht-loeschen-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#dm-nachricht-loeschen-footer button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

#dm-nachricht-loeschen-abbrechen {
    background-color: #514638;
    color: #ffffff;
}

#dm-nachricht-loeschen-bestaetigen {
    background: #d64545;
    color: #ffffff;
}

#dm-nachricht-loeschen-bestaetigen:hover {
    background: #b93636;
}

#dm-nachricht-loeschen-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#dm-nachricht-loeschen-fehler {
    color: #ff7777;
    margin-bottom: 15px;
}


.anfrage-status {
    font-size: 13px;
    color: #b5bac1;
    background-color: #3a3d44;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}



/* ==========================================
   NACHRICHT BEARBEITEN – HOVER-BUTTON
========================================== */

.nachricht-eigene {
    position: relative;
}

.nachricht-bearbeiten {
    position: absolute;
    top: -14px;
    right: 8px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 7px;

    background: #925709;
    color: #ffffff;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;

    transform: translateY(4px);
    z-index: 10;
}

.bearbeiten-button-img{
    width:100%;
}

.loeschen-button-img{
    width:100%;
}

.nachricht-bearbeiten {
    right: 44px;
}

.nachricht-loeschen {
    right: 8px;
}

.nachricht-eigene:hover .nachricht-bearbeiten {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nachricht-bearbeiten:hover {
    background: #3b82f6;
}

/* ==========================================
   BENUTZERPROFIL MODAL
========================================== */

#benutzerprofil-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#benutzerprofil-inhalt {
    width: 100%;
    max-width: 420px;
    background: #44311c;
    border-radius: 12px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#benutzerprofil-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

#benutzerprofil-header h2 {
    margin: 0;
}

#benutzerprofil-schliessen {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
}

#benutzerprofil-daten {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
}

#benutzerprofil-bild {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

#benutzerprofil-name {
    margin: 8px 0 0;
    font-size: 22px;
}

#benutzerprofil-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

#benutzerprofil-status-punkt {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #747f8d;
}

#benutzerprofil-bio-bereich {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

#benutzerprofil-bio-bereich h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

#benutzerprofil-bio {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.75);
}

#benutzerprofil-footer {
    display: flex;
    justify-content: flex-end;
}

#benutzerprofil-nachricht {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: #5865f2;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

#benutzerprofil-nachricht:hover {
    background: #4752c4;
}

.benutzerprofil-id-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#benutzerprofil-id {
    margin: 0;
    font-size: 12px;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.75);
}

#benutzerprofil-id-kopieren {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
}

#benutzerprofil-id-kopieren img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

#benutzerprofil-id-kopieren:hover {
    opacity: 0.7;
}


/* ==========================================
   LOQUITUS ANRUF MODAL
========================================== */

#loquitus-call-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#loquitus-call-inhalt {
    width: 100%;
    max-width: 360px;
    padding: 30px 24px;
    background: #44311c;
    border-radius: 14px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#loquitus-call-status {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
}

#loquitus-call-profilbild {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

#loquitus-call-name {
    margin: 0 0 8px;
    font-size: 22px;
}

#loquitus-call-beschreibung {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

#loquitus-call-eingehend-buttons,
#loquitus-call-aktiv-buttons {
    display: none;
    justify-content: center;
    gap: 15px;
}

#loquitus-call-eingehend-buttons button,
#loquitus-call-aktiv-buttons button {
    padding: 11px 20px;
    border: none;
    border-radius: 7px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

#loquitus-call-ablehnen,
#loquitus-call-auflegen {
    background: #d83c3e;
}

#loquitus-call-ablehnen:hover,
#loquitus-call-auflegen:hover {
    background: #b52d30;
}

#loquitus-call-annehmen {
    background: #248046;
}

#loquitus-call-annehmen:hover {
    background: #1b6336;
}

#loquitus-remote-audio {
    display: none;
}