/*-----------------------------------------------------------------*/
/*-------------------------WARNUNGEN ---------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-warnings {
    display: flex; 
    flex-wrap: nowrap; 
    gap: 10px; 
    align-items: center; 
}

.profil-awaywarning {
    flex: 0 1 auto; 
    max-width: 50%; 
}

.profil-triggerwarning {
	flex: 1; 
    text-align: center; 
	height: 80.56px;
	background-color: rgba(255, 37, 37, 0.3);
    color: var(--highlight);
    padding: 10px; 
    border-radius: 15px;
    font-weight: bold; 
    text-align: center;
	margin-bottom:5px;
	   display: flex; 
    align-items: center;
    justify-content: center; 
	font-size: 15px;
}
/*-----------------------------------------------------------------*/
/*----------------------- HEADER BEREICH ------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-header {
    position: relative;
    width: 100%;
    height: 364px;
    overflow: hidden;
	border: 2px solid var(--border);
}

.headerbild img {
    width: 100%;
    height: 364px;
    object-fit: cover;
    display: block;
}

.profil-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 364px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.profil-header-name {
    font-family: var(--title);
    font-size: 50px;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    z-index: 2;
    pointer-events: auto;
    text-align: center;
}

.profil-header-spotify {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 2;
    pointer-events: auto;
}

.profil-header-spotify i {
    font-size: 28px;
    color: var(--col4);
    transition: color 0.3s ease;
}

.profil-header-spotify i:hover {
    color: var(--highlight);
}
/*-----------------------------------------------------------------*/
/*------------------------ WRAPPER LAYOUT ----------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-layout {
    display: flex;
    gap: 2px;
    align-items: flex-start;
	height:830px;
	width:1105px;
}

/*-----------------------------------------------------------------*/
/*--------------------- LINKER PROFIL BEREICH --------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-avatarbox {
    border: 2px solid var(--border);
    background: var(--col6);
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.profil-avatarbox img {
    width: 100%;
    height: 162.25px;
    display: block;
}

.profil-links {
    width: 250px;
	height:820px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
	text-align: center;
	
}

.profil-info-row {
    display: flex;
    gap: 2px;
}

.profil-info-half {
    flex: 1;
    background: var(--col6);
    border: 2px solid var(--border);
    padding: 5px;
    font-size: var(--size);
    line-height: 1.4em;
    box-sizing: border-box;
}

.profil-info-block {
    background: var(--col6);
    border: 2px solid var(--border);
    padding: 5px;
    font-size: var(--size);
    line-height: 1.4em;
	height: 80px;
}

.profil-info-title-name {
    font-weight: bold;
    font-size: 20px;
    color: var(--col4);
    text-align: center;
}

.profil-info-title {
    font-weight: bold;
    font-size: 14px;
    color: var(--col4);
    border-bottom: 1px solid var(--border);
    margin-bottom: 3px;
    text-align: center;
}

.profil-iconbox {
    margin-top: auto;
    text-align: center;
}

.profil-iconbox img {
    width: 250px;
    height: auto;
    border: 2px solid var(--border);
}

/*-----------------------------------------------------------------*/
/*------------------------ TAB AUFBAU --------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-tabs-und-inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profil-tabinhalt {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: var(--col6);
	height:781px;
    overflow-y: auto;
}

.profil-tabinhalt.active-tab {
    display: flex;
}

.profil-tabs-row {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.tab-button {
    background: var(--col6);
    color: var(--highlight);
    border: 2px solid var(--border);
    font-size: 18px;
    padding: 8px;
    width: 42px;
    height: 42px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.tab-button.active {
    background: var(--col5);
    color: var(--col1);
}

.tab-button:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--col6);
    color: var(--highlight);
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    white-space: nowrap;
    z-index: 99;
}

/*-----------------------------------------------------------------*/
/*-------------------- EINZELNE TABS --------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-info-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    font-size: var(--size);
}

.profil-info-grid > div {
    padding: 8px;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: 0px;
    flex-direction: column;
}


.profil-info-block-pair {
    display: flex;
    gap: 5px;
}

.profil-info-halfblock {
    flex: 1;
    padding: 10px;
    font-size: var(--size);
    line-height: 1.6em;
    box-sizing: border-box;
	height: 170px;
	overflow: auto;
}

.profil-info-subtitle {
    font-weight: bold;
    font-size: 30px;
    color: var(--col4);
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    text-align: center;
    font-family: var(--title);
	padding-top:5px;
}

.profil-info-subtitle-small {
    font-weight: bold;
    font-size: 20px;
    color: var(--col4);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    text-align: center;
    font-family: var(--title);
}

.profil-fliesstext {
    font-size: var(--size);
    line-height: 1.8em;
	padding: 0px 10px 0px 10px;
}

.profil-info-block-big {
    font-size: var(--size);
    line-height: 1.8em;
	padding: 0px 10px 0px 10px;
}

.newhope-memprof-info {
    display: flex;
	position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    width: 100%;
    height: 50px;
    text-align: center;
}

.newhope-memprof-info svg {
	width: 50px;
	height: 50px;
	stroke-width: 2px;
}

.newhope-memprof-info i {
    font-size: 50px;
}

.newhope-memprof-info .bg-text {
    position: absolute;
    transform: translateX(-50%);
	top: 25px;
    left: 83px;
    font-size: 45px;
    font-weight: bold;
	transform: translate(-50%, -50%) rotate(-30deg); /* Dreht das "y/o" um 30° */
    opacity: 0.2;
    z-index: 4;
    text-transform: uppercase;
    white-space: nowrap;
	color: var(--col1);
}

.newhope-memprof-info .bg-wesen {
    position: absolute;
	top: 45px;
    left: 75px;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
	transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: 4;
    text-transform: uppercase;
    white-space: nowrap;
}

.newhope-memprof-info .age-number {
    font-size: 50px;
	top: 25px;
    left: 83px;
	width: 95px;
	height: 72px;
    font-weight: bold;
    position: absolute;  
    transform: translate(-50%, -50%);
    z-index: 5;
}

/*-----------------------------------------------------------------*/
/*----------------------- SKILLBILDER --------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-skillbilder {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
	margin-bottom: 10px;
}

.profil-skillbilder img {
    width: 245px;
    height: auto;
    border: 2px solid var(--border);
}

/*-----------------------------------------------------------------*/
/*----------------------- BEZIEHUNGEN ------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.relationava img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--border);
}

.relationbox {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.profil-beziehungstatus {
    font-size: var(--size);
    line-height: 1.8em;
}
/*-----------------------------------------------------------------*/
/*---------------------- SZENENTRACKER ----------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

.profil-szenentracker-split {
    display: flex;
    justify-content: space-between;
}

.szenentracker-links {
    width: 600px;
    padding: 10px 0 10px 10px; 
    overflow: auto;
}

.szenentracker-rechts {
    width: 240px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 10px 10px 0px; 
}

.szenentracker-rechts img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border: 2px solid var(--border);
}

/*-----------------------------------------------------------------*/
/*-------------------------- PB INFOS -----------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/* Container in einer Reihe */
.newhope-preference-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    text-align: center;
    margin-top: 5px;
}

/* Einzelne Präferenz-Box */
.newhope-preference {
    flex: 1;
    padding: 10px;
    border-radius: 0;
}

/* Titel */
.newhope-preference-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--col4);
    margin-bottom: 5px;
}

/* Icon-Anzeige */
.newhope-preference-icon {
    display: flex;
    justify-content: center;
    gap: 3px;
    font-size: 18px;
}

.newhope-mature-icons i,
.newhope-gore-icons i,
.newhope-violence-icons i {
    color: #ed4b4b;
}

.profil-info-halfblockl {
    padding: 10px;
    font-size: var(--size);
    line-height: 1.6em;
    box-sizing: border-box;
	width:455px;
}

.profil-info-halfblockr {
    padding: 10px;
    font-size: var(--size);
    line-height: 1.6em;
    box-sizing: border-box;
	width: 390px;
}

.moreaccounts {
        height: 160px;
        width: 808px;
        padding-right:5px;
        overflow:auto;
        text-align: justify;
}