.profile-wrapper {
	padding: 25px;
	font-size: 12px;
}

/********** PROFIL HEADER *************/
.profile-header {
	display: flex;
	align-items: center;
	background: var(--main-accent);
	border-radius: 5px;
	box-sizing: border-box;
	padding: 20px;
	border-radius: 5px;
}

.profile-header-infos {
	display: inline-block;
	width: 60%;
	margin-left: 5%;
}

.profile-header-name {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: bold;
}

.profile-header-faceclaim,
.profile-header-user {
	font-size: 13px;
	color: var(--font-color-one);
}

.profile-header-image {
	display: inline-block;
	width: 300px;
	height: 100px;
	margin-bottom: 8px;
}

.profile-header-image img {
	width: 100%;
	height: 100%;
	border: 5px solid var(--accent-two);
	object-fit: cover;
}

.profile-charasecure {
	font-size: 11px;
	color: var(--accent-one) !important;
}

/********** PROFIL TABS *************/
/* Zustands-Inputs verstecken, aber per Tab erreichbar lassen */
.profile-state {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Grundlayout: Sidebar + Inhalt */
.profile-nav {
	display: flex;
}


.profile-main {
	flex: 1;
	margin: 15px 0;
}

.profile-nav-item {
	display: block;
	padding: 10px;
	cursor: pointer;
	font-size: 24px;
  	background: var(--accent-two);
  	margin: 15px 0;
  	text-align: center;
  	border-radius: 5px;
}

/* Seiten standardmäßig ausblenden */
.profile-page {
	display: none;
}

/* LOGIK 1: aktive Seite einblenden */
#profile-r-1:checked~.profile-nav #profile-page-1,
#profile-r-2:checked~.profile-nav #profile-page-2,
#profile-r-3:checked~.profile-nav #profile-page-3,
#profile-r-4:checked~.profile-nav #profile-page-4,
#profile-r-5:checked~.profile-nav #profile-page-5,
#profile-r-6:checked~.profile-nav #profile-page-6 {
	display: block;
	margin-left: 40px;
}

/* LOGIK 2: aktiven Menüpunkt markieren */
#profile-r-1:checked~.profile-nav label[for="profile-r-1"],
#profile-r-2:checked~.profile-nav label[for="profile-r-2"],
#profile-r-3:checked~.profile-nav label[for="profile-r-3"],
#profile-r-4:checked~.profile-nav label[for="profile-r-4"],
#profile-r-5:checked~.profile-nav label[for="profile-r-5"],
#profile-r-6:checked~.profile-nav label[for="profile-r-6"] {
	font-weight: bold;
}

/********** PROFIL INHALT *************/
.profile-section-flex {
	display: flex;
	gap: 10px;
}

.profile-headlines {
	background: var(--accent-two);
	padding: 5px;
	text-align: center; 
	text-transform: uppercase;
	color: var(--font-color-one);
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

.profile-section-profilepic {
	flex: 0 0 230px;
	height: 260px;
}

.profile-section-facts {
	flex: 0 0 450px;
}

.profile-section-more {
	flex: 1;
}

.profile-section-profilepic img {
	width: 220px;
	height: 250px;
	border: 5px solid var(--accent-two); 
	border-radius: 5px;
	object-fit: cover;
}

.profile-short-desc {
	background: var(--accent-three);
	border: 5px solid var(--accent-two); 
	border-radius: 5px;
	height: 270px;
	overflow: auto;
	margin-top: 10px;
	box-sizing: border-box;
	padding: 10px;
	text-align: justify;
}

.profile-message-me {
	background: var(--accent-two);
	text-transform: uppercase;
	text-align: center;
	box-sizing: border-box; 
	padding: 15px 5px;
	color: var(--font-color-one);
	border-radius: 5px;
	margin-top: 10px;
}

.profile-message-me a {
	color: var(--font-color-one);
}

.profile-section-facts .profile-footer-facts {
	margin-bottom: 10.5px;
}

.profile-section-facts .profile-footer-facts-name,
.profile-section-facts .profile-footer-facts-value {
	display: flex;
	height: 40px;
	overflow: auto;
}

.profile-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 125px;
	border: 5px solid var(--accent-two);
	background: var(--accent-three);
	border-radius: 5px;
	box-sizing: border-box;
	flex-direction: column;
	text-align: center;
	overflow: auto;
}

.profile-trigger-header {
	font-size: 13px;
	text-transform: uppercase;
}

.profile-quote {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-two);
	height: 102px;
	margin-top: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	color: var(--font-color-one);
	padding: 20px;
}

.profile-awards {
	height: 290px;
	margin: 10px 0;
	border: 5px solid var(--accent-two);
	background: var(--accent-three);
	border-radius: 5px;
	box-sizing: border-box;
	padding: 10px;
	overflow: auto;
	text-align: center;
}

.profile-usertitle {
	padding: 15px 5px;
	background: var(--accent-two);
	border-radius: 5px;
	box-sizing: border-box;
	color: var(--font-color-one);
	text-align: center;
	text-transform: uppercase;
}

.profile-add-contact {
	text-align: center;
	margin-top: 535px;
}

.profile-add-contact a {
	width: 200px;
	padding: 10px;
	margin: auto;
	background: var(--accent-two);
	text-transform: uppercase;
	border-radius: 5px;
}

.profile-appearance {
	flex: 0 0 285px;
}

.profile-sozials {
	flex: 0 0 285px;
}

.profile-character {
	flex: 1;
}

.profile-appearance .profile-footer-facts-value {
	width: 60%;
}

.profile-appearance-image {
	width: 275px;
	height: 150px;
	margin-bottom: 10px;
}

.profile-appearance-image img {
	width: 100%;
	height: 140px;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	object-fit: cover;
}

.profile-misc {
	height: 169px; 
	box-sizing: border-box; 
	border: 5px solid var(--accent-two);
	padding: 10px;
	border-radius: 0 0 5px 5px;
	overflow: auto;
	text-align: justify;
	background: var(--accent-three);
	white-space: pre-line;
}

.profile-sozials-image {
	display: inline-block;
	vertical-align: top;
}

.profile-sozials-sn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 181px;
	height: 100px;
	box-sizing: border-box; 
	border: 5px solid var(--accent-two);
	padding: 10px;
	border-radius: 5px;
	background: var(--accent-three);
	font-weight: bold;
	text-transform: uppercase;
}

.profile-sozials-image img {
	width: 90px; 
	height: 90px;
	border-radius: 5px;
	border: 5px solid var(--accent-two);
	object-fit: cover;
}

.profile-sozials-pinterest {
	width: 285px;
	margin-top: 10px;
	overflow: auto;
	background: var(--accent-three);
	box-sizing: border-box;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
}

.profile-sozials-pinterest [class*="_hd"],
.profile-sozials-pinterest [class*="_ft"] {
	display: none !important;
}

.profile-sozials-pinterest [class*="_bd"] {
	background: transparent !important;
	padding: 0 !important;	
}

.profile-sozials-pinterest [class*="_img"] {
	border-radius: 0 !important;
}

.profile-sozials-pinterest [class*="_embed_grid"],
.profile-sozials-pinterest [class*="_bd"] {
	border-radius: 0 !important;
	height: 332px;
}

.profile-characteriscs, 
.profile-likes-dislikes {
	height: 194px;
	overflow: auto;
	background: var(--accent-three);
	box-sizing: border-box;
	border: 5px solid var(--accent-two);
	border-radius: 0 0 5px 5px;
	padding: 10px;
	text-align: justify;
	white-space: pre-line;
}

.profile-characteriscs {
	margin-bottom: 11px;
}

.profile-misc-infos {
	flex: 0 0 230px;
}

.profile-spotify {
	flex: 0 0 300px;
}


.profile-misc-infos-image img {
	width: 230px;
	height: 140px;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	margin-bottom: 10px;
	object-fit: cover;
}

.profile-infos {
	height: 263px;
	overflow: auto;
	box-sizing: border-box; 
	padding: 10px;
	border: 5px solid var(--accent-two);
	background: var(--accent-three);
	text-align: justify;
	border-radius: 0 0 5px 5px;
	white-space: pre-line;
}

.profile-spotify iframe {
	height: 450px;
}

.profile-storyline {
	flex: 1;
	height: 450px;
	overflow: auto;
	box-sizing: border-box; 
	padding: 10px;
	border: 5px solid var(--accent-two);
	background: var(--accent-three);
	text-align: justify;
	border-radius: 5px;
	white-space: pre-line;
}

.profile-student-facts {
	flex: 0 0 372px;
}

.profile-student-facts-image img {
	width: 362px;
	height: 200px;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	margin-bottom: 12px;
	object-fit: cover;
}

.profile-student-facts .profile-footer-facts-name {
	width: 30%;
}

.profile-student-facts .profile-footer-facts-value {
	width: 75%;
}

.profile-student-misc {
	flex: 0 0 372px;
}

.profile-student-misc .thead {
	background: var(--accent-two);
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    color: var(--font-color-one);
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.profile-clubs {
	height: 75px;
    overflow: auto;
    background: var(--accent-three);
    box-sizing: border-box;
    border: 5px solid var(--accent-two);
    border-radius: 0 0 5px 5px;
    padding: 10px;
    text-align: justify;
}

.profile-student-headlines {
	background: var(--accent-two);
	padding: 5px;
	text-align: center; 
	text-transform: uppercase;
	color: var(--font-color-one);
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

.profile-student-characteriscs {
	height: 266px;
	overflow: auto;
	background: var(--accent-three);
	box-sizing: border-box;
	border: 5px solid var(--accent-two);
	border-radius: 0 0 5px 5px;
	padding: 10px;
	text-align: justify;
	white-space: pre-line;
}

.profile-large-image {
	flex: 1;
}

.profile-large-image img {
	width: 175px;
	height: 402px;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	object-fit: cover;
}

/********** FOOTER *************/
.profile-footer {
	display: flex;
	gap: 5px;
}

.profile-footer-left {
	flex: 0 0 265px;
	height: 220px;
	overflow: auto;
	text-align: center;
	box-sizing: border-box;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	background: var(--accent-three);
}

.profile-footer-left a:hover {
	text-decoration: none;
}

.profile-as-avatar {
	width: 66px;
	height: 75px;
	border: 2px solid var(--accent-two);
	margin: 4px;
	border-radius: 5px;
}

.profile-footer-middle {
	flex: 0 0 410px;
	height: 220px;
}

.profile-footer-sig {
	display: inline-block;
	width: 400px;
	height: 210px;
	object-fit: cover;
	border: 5px solid var(--accent-two);
	border-radius: 5px;
	overflow-y: auto;
    overflow-x: hidden;
}

.profile-footer-right {
	flex: 1;
}

.profile-footer-facts {
	display: flex;
	align-items: center;
	margin-bottom: 5.3px;
}

.profile-footer-facts-name {
	display: inline-block;
	width: 40%;
	box-sizing: border-box;
	padding: 5px;
	background: var(--accent-two);
	color: var(--font-color-one);
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px 0 0 5px;
}

.profile-footer-facts-value {
	justify-content: right;
	width: 58%;
	box-sizing: border-box;
	padding: 5px;
	text-align: right;
	background: var(--accent-three);
	border-radius: 0 5px 5px 0;
	height: 27px;
}

/********** KONTAKTE HINZUFÜGEN *************/
.overlay-relations {
 	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
	background: rgba(0, 0, 0, 0.7);
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s, opacity 0.3s;
}

.overlay-content-relations {
  	text-align: center;
	width: 40%;
	background: var(--main-color);
}

.overlay-relations.show {
  	visibility: visible;
  	opacity: 1;
  	z-index: 5;
}


.profile-awards a:hover {
	text-decoration: none;
}