.profile-area {
	max-width: 1290px;
	margin: 30px auto;
	outline: 1px solid var(--color-opac-border) !important;
	outline-offset: 10px !important;
	background-color: var(--color-background-opac);
	background-blend-mode: overlay;
	background-attachment: fixed;
	background-image: var(--accent-bg);
	color: var(--color-main);
}

.away-bit {
	color:var(--color-main);
}

/* Make sure .head-bit is properly structured */
.profile-area .head-bit {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Prevent scrolling */
	min-height: 400px;
	max-height: 400px;
}

/* Keep .pinterest-wall inside the grid */
.profile-area .head-bit .pinterest-wall {
	grid-column: span 3;
	/* ✅ Keeps your grid structure */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-height: 400px;
	/* ✅ Ensures it does NOT scroll */
	overflow: hidden !important;
	-webkit-mask-image: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.85) 0%,
			/* ? Darker top */
			rgba(0, 0, 0, 0.95) 15%,
			/* ? Slightly stronger fade at the top */
			rgba(0, 0, 0, 1) 35%,
			/* ? Middle: Fully visible */
			rgba(0, 0, 0, 0) 85%
			/* ? Earlier transparency at the bottom */
		);
	mask-image: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.95) 15%,
			rgba(0, 0, 0, 1) 35%,
			rgba(0, 0, 0, 0) 85%);
	opacity: 0.65;
	/* ✅ Slightly more transparent overall */

}

.profile-area .head-bit::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 115.2%;
	background: linear-gradient(to bottom, var(--profile-fadeout-dark) 90%, var(--profile-fadeout-mid) 25%, var(--profile-fadeout-light) 60%, transparent 100%);
	opacity: 0.85;
	pointer-events: none;
	z-index: 1;
}


.profile-area .head-bit .pinterest-wall span[class*="_board"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important; /* Von center auf flex-start ändern */
    align-items: flex-start;
    gap: 0 !important; /* Sicherheitshalber sicherstellen, dass kein Abstand da ist */
    padding: 0 !important;
    margin: 0 !important;
}


/* Hintergrund entfernen & weiche Kanten */
.profile-area .head-bit .pinterest-wall span[class*="_embed_grid"] {
	background: none;
	border-radius: 0;
}

/* Padding anpassen */
.profile-area .head-bit .pinterest-wall span[class*="_bd"] {
	width: 100% !important;
	/* ✅ Full width */
	height: 100% !important;
	/* ✅ Full height */
	max-height: 500px !important;
	/* ✅ Stops at parent height */
	overflow: hidden !important;
	/* ✅ No scrolling */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 0 !important;
}

/* Header & Footer innerhalb des Pinterest-Boards entfernen */
.profile-area .head-bit .pinterest-wall span[class*="_hd"],
.profile-area .head-bit .pinterest-wall span[class*="_ft"] {
	display: none;
}


/* Optional: Prevent hover effects */
/* Prevent images from changing color or size on hover */
.profile-area .head-bit .pinterest-wall span[class*="_img"]:hover {
	filter: grayscale(1) !important;
	/* ✅ Keeps it black & white */
	transform: none !important;
	/* ✅ No scaling */
	transition: none !important;
	/* ✅ No effects */
}

.profile-area .head-bit .pinterest-wall span[class*="_embed_grid"] {
	background: none !important;
	/* ✅ Remove background without breaking layout */
	border-radius: 0 !important;
	/* ✅ Ensure no rounded edges */
	display: flex !important;
	/* ✅ Make sure it stays visible */
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	width: 100% !important;
	/* ✅ Ensure full width */
	height: auto !important;
	/* ✅ Allow height to adjust */
	padding: 0 !important;
	margin: 0 !important;
}

.profile-area .head-bit .pinterest-wall span[class*="_img"] {
	display: block !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border: none !important;
	filter: grayscale(1) !important;
	/* ✅ Forces black & white */
	transition: none !important;
	/* ✅ Prevents hover transitions */
	filter: brightness(0.4) contrast(1.2);
	/* ✅ Reduziert Helligkeit und verstärkt Kontraste */
	 
}

.profile-area .head-bit .pinterest-wall [class$="_col"] {
    padding: 0 !important;
    margin-top: 0 !important;
    border: none !important;
}


.profile-area .head-bit .pinterest-wall span[class*="_img"] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
}



/* ? Overlay für den Header */
.profile-area .header-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 50px;
	width: 80%;
	max-width: 1200px;
	color: var(--color-main);
	z-index: 5;
}

/* ? Profilbild innerhalb des Overlays */
.profile-area .header-image {
	position: relative;
	/* Ensures absolute elements inside are positioned relative to this */
	display: block;
	width: 450px !important;
	height: 280px !important;
	min-width: 450px;
	min-height: 280px;
	overflow: hidden;
	/* Prevents overflow */
	outline: 1px solid var(--color-opac-border);
	outline-offset: 15px;
}

/* ? Color overlay */
.profile-area .header-image:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	z-index: 1;
}

/* ? The image itself */
.profile-area .header-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ✅ Ensures image fully covers the area without distortion */
	object-position: center;
}

/* ? Beim Hover das Overlay entfernen */
.profile-area .header-image:hover:after {
	display: none;
}

/* ? Beim Hover das Bild wieder in Farbe zeigen */
.profile-area .header-image:hover img {
	filter: none;
}


/* ? Name */
.header-profile-name {
	font-size: 45px;
	font-family: var(--display-font);
	color: var(--color-accent1);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ? Quote */
.profile-area .header-profile-quote {
	color: var(--color-main);
	font-style: italic;
	font-family: var(--main-font2);
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 200;


}

/* ? Extra-Inhalt */
.header-profile-extra {
	font-size: 14px;
	padding-top: 10px;
	opacity: 0.8;
}

.header-profile-extra .short-infos {
	display: flex;
	gap: 10px;
	/* Adjust this value for more spacing */
	flex-wrap: wrap;
	/* Prevents overflow on smaller screens */
	margin-top: 15px;
}


/* General Box Styling */
.header-profile-extra .short-infos .box {
	display: inline-flex;
	/* Ensures boxes stay aligned */
	align-items: center;
	/* Centers content */
	justify-content: center;
	/* Centers text */
	padding: 8px 12px;
	border: 1px solid var(--color-opac-border);
	/* Outline color */
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 1px;
	font-family: var(--main-font2);
	text-transform: uppercase;

}


.profile-area .header-profile-extra .short-infos .box.rank::before {
	content: "Rang ";
	/* ✅ Adds "Rang: " before the rank */
	margin-right: 5px;

}

/* If Box Contains a Link */
.header-profile-extra .short-infos .box a {
	color: var(--color-main);
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* Hover Effect */
.header-profile-extra .short-infos .box.button:hover {
	color: var(--color-main) !important;
	border-color: var(--color-main) !important;
}


/* Tabs */


.tabs-container {
	display: flex;
	justify-content: space-between;
	/* Places both sections at the edges */
	align-items: center;
	/* Aligns vertically */
	width: 100%;
}

.tabs ul,
.posts-contact ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tabs ul li,
.posts-contact ul li {
	margin: 0 5px;
	/* Spacing between elements */
}

.tabs-container ul li::marker {
    content: none;
}

.posts-contact {
	display: flex;
	align-items: center;
}

.posts-contact ul {
	list-style-type: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--base-gap);
	margin: 0;
	padding: 0;
}


.posts-contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid var(--color-main3)!important;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 1px;
	font-family: var(--main-font2);
	text-transform: uppercase;
	color: var(--color-main);
	transition: color 0.3s ease;
    color: var(--color-main3);

}

.posts-contact a:hover {
	color: var(--color-main3) !important;
	border: 1px solid var(--color-main3) !important;
	transition: color 0.3s ease;

}

.profile-area .profile-bit {
	width: 100%;
}

/* Summary */

.profile-area .profile-bit #overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 410px;
	align-items: start;
	/* ✅ Aligns the columns at the top */
	margin-top: 45px;
	width: 100%;
	align-items: stretch;
}

.profile-area .profile-bit #character {
	width: 100%;
}

.profile-area .profile-bit .zodiac-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	height: 455px;
	/* oder eine passende feste Höhe */
	position: relative;
}


.profile-area .profile-bit .quote-box {
	min-height: 100px;
	max-width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: var(--main-font2);
	font-size: 8px;
	font-weight: 400;
	color: var(--color-main);
	line-height: 1.6;
	text-transform: uppercase;
	margin-top: 46.4px;
	margin-bottom: 20px;
}


.profile-area .profile-bit .quote-box .quote-text {
	position: relative;
	z-index: 1;
}


.profile-area .profile-bit .zodiac-box .image-area {
	width: 190px;
	height: 250px;
	position: relative;
	margin-top: 30px;
	/* Bild weiter nach unten schieben */
}


/* Die senkrechte Linie */
.profile-area .profile-bit .zodiac-box .image-line {
	position: absolute;
	top: -74.4px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 63.0px;
	background-color: var(--color-opac-border);
}

.profile-area .profile-bit .zodiac-box .quote-connector-line {
	position: absolute;
	top: 260.6px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 38.8px;
	background-color: var(--color-opac-border);
}


/* Die Box um das Bild */
.profile-area .profile-bit .zodiac-box .image-box {
	width: 190px;
	height: 250px;
	border: 1px solid var(--color-opac-border);
	outline: 1px solid var(--color-opac-border);
	outline-offset: 10px;
	border-radius: 120px 120px 0 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* Das Bild selbst */
.profile-area .profile-bit .zodiac-box .image-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.profile-area .profile-bit .inner-infos {
	display: grid;
	grid-auto-rows: 1fr;
	text-transform: uppercase;
	font-size: 11px;
	position: relative;
	margin-bottom: var(--base-gap);
}

.profile-area .profile-bit .inner-infos:after {
	content: "";
	position: absolute;
	top: 0;
	right: -0.5px;
	width: 1px;
	height: calc(100% + var(--base-gap));

}

.profile-area .profile-bit .inner-infos .info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--base-gap) calc(var(--base-gap) * 2);
	border-bottom: 1px solid var(--color-opac-border);
}

.profile-area .profile-bit .inner-infos .info:last-child {
	border-bottom: none;
}


.profile-area .profile-bit .inner-infos .headliner {
	display: block;
	font-family: var(--display-font);
	font-size: 14px;
	margin-bottom: 5px;
}

.inplayquotes {
	grid-column: 1 / -1;
	width: 100%;
	padding: 30px 20px;
	text-align: center;
	border-top: 1px solid var(--color-opac-border);

}


.inplayquotes .icon-wrapper {
	position: relative;
	width: 80px;
	height: 80px;
	margin-bottom: 50px;
	transform: rotate(45deg);
	/* Rhombus-Form */
}

.inplayquotes .icon-outline {
	width: 100%;
	height: 100%;
	outline: 1px solid var(--color-main3);
	outline-offset: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.inplayquotes .icon-outline img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	transform: rotate(-45deg);
}

.inplayquotes .quote-text {
	color: var(--color-main3);
	max-width: 800px;
	margin-top: 10px;
	text-transform: none;
	text-align: justify;
}

.quote-text blockquote {
	margin: 0 auto 20px auto;
	padding: 0 20px;
	font: 200 italic 15px / 150% var(--display-font2);
	color: var(--color-main3);
	text-transform: none;
	text-align: justify;
	background: none !important;
}

.inplayquotes_memberprofile_bit_footer {
	margin-top: 20px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-main2);
	text-align: center;
}

.quote-meta {
	display: flex;
	justify-content: center;
	align-items: right;
	gap: 15px;
	/* Abstand zwischen Szene-Link und Datum */
	margin-bottom: 10px;
	font-style: italic;
}

.quote-meta .scene-link {
	font-weight: 600;
}

.quote-meta .postdate {
	color: var(--color-main2);
}

.quote-meta a {
	transition: all 1s ease-in-out;
}

.quote-meta a:hover {
	color: var(--color-main) !important;
	transition: all 1s ease-in-out;
}

.all-quotes {
	margin-top: 25px;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
}

.all-quotes a {
	transition: all 1s ease-in-out;
}

.all-quotes a:hover {
	color: var(--color-main) !important;
	transition: all 1s ease-in-out;
}


.inplayquotes-memberprofile .inplayquotes-content {
	font-family: var(--main-font2);
	font-size: 16px;
	color: var(--color-main);
	line-height: 1.8;
	opacity: 0.8;
}


.profile-area #character .trait-box {
	padding: 45px;
	text-align: justify;
	line-height: 1.8em;
	padding: 40px;
	border-bottom: 1px solid var(--color-opac-border);
	color: var(--color-main);
	font-size: 13px;
	background-color: var(--color-bg-transparent-dark);


}


.profile-area #freeform .trait-box {
	padding: 45px;
	text-align: justify;
	line-height: 1.8em;
	padding: 40px;
	border-bottom: 1px solid var(--color-opac-border);
	color: var(--color-main);
	font-size: 13px;
	background-color: var(--color-bg-transparent-dark);


}

.profile-area .top-text .icon {
	border: 1px solid var(--color-main);
	aspect-ratio: 1 / 1;
	width: 60px;
	height: 60px;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.profile-area .top-text .headliner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--display-font);
	font-size: 24px;
	text-transform: uppercase;
}

.profile-area .top-text .headliner span {
	font-family: var(--main-font2);
	display: block;
	font-size: 11px;
}


.profile-area .top-text {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-gap);
	margin-bottom: calc(var(--base-gap)*2);
	padding-top: 45px;
}

.profile-area .top-text2 .icon2 {
	border: 1px solid var(--color-main3);
	aspect-ratio: 1 / 1;
	width: 40px;
	height: 40px;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:var(--color-main3);
}

.profile-area .top-text2 .icon2 i {

	color:var(--color-main3);
}

.profile-area .top-text2 .headliner2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--display-font);
	font-size: 20px;
	text-transform: uppercase;
}

.profile-area .top-text2 .headliner2 span {
	font-family: var(--main-font2);
	display: block;
	font-size: 11px;
}


.profile-area .top-text2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base-gap);
	margin-bottom: calc(var(--base-gap)*2);
	padding-top: 25px;
}

.char-slide-bday {
	width: 100%;
	padding: 20px;
	/* optional */
	box-sizing: border-box;
}

.char-slide-bday .char-slide-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	/* optional */
	width: 100%;
}

.char-slide-bday .char-slide-grid .grid-item {
	padding: 20px;
}

.profile-area #character .chara-area .bar-area .bar {
	display: flex;
	flex-direction: column;
	gap: 5px;
}


.bar-area {
	padding: 30px;
	color: var(--secondary);
	font-size: 11px;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--base-gap);
}

.trait-switcher {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--color-main);
}


.bar-area .trait.one {
	text-align: left;
	margin-bottom: 5px;
}

.bar-area .trait.two {
	text-align: center;
	margin-bottom: 5px;

}

.bar-area .trait.three {
	text-align: right;
	margin-bottom: 5px;

}


.bar-surrounder {
	position: relative;
	width: 100%;
	border: 1px solid var(--color-opac-border);
	padding: 5px;
	z-index: 1;
}

.bar-surrounder .bar-output {
	height: 5px;
	background: var(--secondary);
}

.bar-surrounder:after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background: var(--color-opac-border);
	z-index: -1;
}

.char-slide-grid .grid-item:last-child {
	display: flex;
	justify-content: center;
	align-items: center;
}

.various-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	/* spacing between the image and the text */
}

.birthday-img {
	width: 225px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.birthday-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.various-box .info {
	font-size: 12px;
	font-family: var(--main-font2);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.8;
}

/* Skills */

.profile-area #skills {
	display: grid;
	grid-template-columns: 2fr 410px;
}

.profile-area #skills .skill-box {
	font-size: 11px;
}

.profile-area .trait-box,
.profile-area .specials-box,
.profile-area .familiar-box {
	text-align: justify;
	line-height: 1.8em;
	font-size: 13px;
}

.profile-area .skill-box,
.profile-area .species-box,
.profile-area .specials-box,
.profile-area .familiar-box {
	padding: 30px;
}

.profile-area .species-box,
.profile-area .familiar-box {
	border-left: 1px solid var(--color-opac-border);
}

.profile-area .specials-box,
.profile-area .familiar-box {
	border-top: 1px solid var(--color-opac-border);
}

.profile-area #skills .profil-skill {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--base-gap)*2);
}

.profile-area #skills div[class*="Profil_InfSkill"] {
	display: grid;
	grid-template-columns: 4fr repeat(6, 1fr);
}

.profile-area #skills .skill-text {
	display: flex;
	flex-direction: column;
	gap: var(--base-gap);
}

.profile-area #skills .Profile_Skill_Name {
	margin-right: var(--base-gap);
	display: flex;
	align-items: center;
	text-transform: uppercase;
	line-height: 1.3em;
}

.profile-area #skills .Profile_Skill {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}

.profile-area #skills .species-icon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	margin-bottom: 30px;
	width: 100px;
	/* Adjust as needed */
	height: 100px;
	margin-left: auto;
	margin-right: auto;
}

/* Diamond border */
.profile-area #skills .species-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	border: 1px solid var(--color-background-opac);
	transform: translate(-50%, -50%) rotate(45deg);
	box-sizing: border-box;
	pointer-events: none;
}

/* Line above the diamond */
.profile-area #skills .species-icon::after {
	content: "";
	position: absolute;
	top: -31.0px;
	left: 50%;
	width: 1px;
	height: 25.8px;
	background-color: var(--color-background-opac);
	transform: translateX(-50%);
	pointer-events: none;
}

.profile-area #skills .skills-img {
	position: relative;
	width: 100%;
	height: 170px;
	padding: 10px;
	outline: 1px solid var(--color-background-opac);
	outline-offset: 3px;
	margin-bottom: 30px;
	margin-top: 15px;
}

.profile-area #skills .skills-img img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: cover;
	object-position: center;
}

.profile-area #skills .species-name {
	font-family: var(--display-font);
	font-size: 30px;
	text-transform: uppercase;
	line-height: 1em;
	text-align: center;
}

.profile-area #skills .species-name span {
	display: block;
	font-family: var(--main-font);
	font-size: 10px;
	line-height: 1em;
	margin-top: 5px;
	color: var(--light);
}

.profile-area #inplay {
	font-size: 11px;
	padding: 30px;
}

.profile-area #inplay .postsbox {
	display: grid;
}


.inplayscenes_memberprofile {
	display: flex;
	flex-direction: column;
	gap: calc(var(--base-gap) * 2);
}

.inplayscenes_memberprofile-mainplays,
.inplayscenes_memberprofile-sideplays {
	padding: var(--base-gap);
}

.inplayscenes_memberprofile-sideplays h3 {
	margin-bottom: var(--base-gap);
	font-family: var(--display-font2);
	font-size: var(--font-size-h5);
	text-transform: uppercase;
	color: var(--color-highlight);
}

.inplayscenes_memberprofile-sideplays {
	font-family: var(--main-font2);
	font-size: var(--font-size-base);
	color: var(--color-main2);
	line-height: 1.8;
}

.inplayscenes_memberprofile-sideplays a {
	color: var(--color-highlight-alt);
	text-decoration: none;
	font-weight: 600;
}

.inplayscenes_memberprofile-sideplays a:hover {
	text-decoration: underline;
}

.memberprofile-headline {
	margin-bottom: var(--base-gap);
	font-family: var(--display-font2);
	font-size: var(--font-size-h4);
	text-transform: uppercase;
	color: var(--color-highlight);
	border-bottom: 1px solid var(--color-opac-border);
	padding-bottom: calc(var(--base-gap) * 0.5);
}

.profile-scene-row {
	display: grid;
	grid-template-columns: 3fr 2fr 100px;
	/* Title (with Date) | Partners | Status */
	gap: 25px;
	/* ✅ More space between columns */
	padding: 15px 0;
	font-family: var(--main-font2);
	font-size: 12px;
	color: var(--color-main2);
	border-bottom: 1px solid var(--color-opac-border);
	align-items: center;
}

.profile-scene-date {
	font-weight: 700;
	color: var(--main-color);
	text-align: right;
	padding-right: 3px;
}

.profile-scene-title {
	font-weight: 600;
	text-align: left;
	padding-left: 10px;
	padding-right: 15px;
	/* ✅ Adds space between title and partners */
}

.profile-scene-title a {
	color: var(--color-main);
	text-decoration: none;
	text-transform: uppercase;
	transition: 1s ease-in-out;

}

.profile-scene-title a:hover {
	color: var(--color-accent1);
	cursor: pointer;
	transition: 1s ease-in-out;

}

.profile-scene-partners {
	text-align: left;
	/* ✅ Ensures they are properly spaced from status */
	font-size: 12px;

}

.awards-box {
	margin-top: 40px;
	/* Space from previous content */
	padding: 20px;
	width: 100%;
	border-top: 1px solid var(--color-opac-border);
}


.awards-box2 {
	padding: 20px;
	width: 100%;
	border-top: 1px solid var(--color-opac-border);
}


.profile-area .award-list {
	padding: 20px 55px 55px 55px;
	/* Oben 20px, Rechts 55px, Unten 55px, Links 55px */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--base-gap);
}

.profile-area .award-icon {
	height: 40px;
	width: 40px;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--color-main2);
	padding: 5px;
	font-size: 20px;
	color: var(--color-main);
	display: flex;
	justify-content: center;
	align-items: center;
}

.awards-box .top-text {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}

.awards-box .icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-opac-border);
}

.awards-box .icon i {
	font-size: 22px;
	color: var(--color-main);
}

.awards-box .headliner {
	font-family: var(--display-font2);
	font-size: var(--font-size-h4);
	font-weight: 700;
	text-transform: uppercase;
}

.awards-box .headliner span {
	display: block;
	font-size: var(--font-size-h6);
	font-weight: 400;
	color: var(--color-muted);
}

/* Add a top border ONLY to the 3-column grid container */
.profile-area #relations .rumorsbox {
	border-top: 1px solid var(--color-opac-border);
	padding-top: 15px;
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Keeps 3 equal columns */
	gap: 20px;
	color: var(--color-main3);
	/* Adjust spacing between columns */
}


/* Styling for each box */
.profile-area #relations .rumors-box,
.profile-area #relations .secrets-box,
.profile-area #relations .factions-box {
	padding: 15px;
}

/* Relationships section spans full width */
.profile-area #relations .relationships-box {
	grid-column: span 3;
}

.profile-area .member-faction {
	display: grid;
	gap: var(--base-gap);
	margin-bottom: 30px;
}

.profile-area .faction-membership {
	padding-left: var(--base-gap);
	border-left: 1px solid var(--color-opac-border);
	text-transform: uppercase;
	font-size: 11px;
}

.profile-area .faction-membership .faction-name {
	margin-bottom: 5px;
	font-weight: 700;
}

/* Titel-Design für Geheimnisse und Gerüchte */
.profile-area #relations .secret-box .Profil_InfTitle,
.profile-area #relations .rumors-box .Profil_InfTitle,
.profile-area #relations .secrets-box .Profil_InfTitle {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: var(--base-gap);
}

/* Text-Design für Geheimnisse und Gerüchte */
.profile-area #relations .secret-box .Profil_InfText,
.profile-area #relations .rumors-box .Profil_InfText,
.profile-area #relations .secrets-box .Profil_InfText {
	line-height: 1.7em;
	text-align: justify;
}

/* Trenner für mehrere Geheimnisse und Gerüchte */
.profile-area #relations .secret-box:not(:last-child):after,
.profile-area #relations .rumor-box:not(:last-child):after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--color-opac-border);
	margin: 15px 0;
}

.relationships-box {
	padding: 30px;
	text-transform: none;
  font-size: 13px;
  color: var(--color-main);
}

.profile-area .rel-type {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	font-size: 11px;
}

.profile-area .relations-main {
	display: flex;
	flex-direction: column;
	gap: var(--base-gap);
}

.profile-area .relations-outer:nth-child(odd) {
	border-right: 1px solid var(--color-opac-border);
}

.profile-area .relation-ava {
	position: relative;
	max-width: 100px;
	height: 90px;
	width: 90px;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--color-opac-border);
	padding: 10px;
}

.profile-area .relation-ava img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: cover;
	object-position: center;
}

.profile-area .relations-head {
	display: flex;
	gap: var(--base-gap);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-right: calc(var(--base-gap)*2);
}

.profile-area .relations-outer:nth-child(even) .relations-head {
	padding-left: calc(var(--base-gap)*2);
	padding-right: unset;
	flex-direction: row-reverse;
}

.profile-area .relation-heading {
	flex: 1;
}

.profile-area .relations-headline {
	width: 100%;
	padding: 15px;
	background-blend-mode: multiply;
	box-sizing: border-box;
	background-image: var(--accent-bg);
	background-attachment: fixed;
	color: var(--color-main3);
	border-top: 1px solid var(--color-opac-border);
	border-bottom: 1px solid var(--color-opac-border);
	font-size: 14px;
	text-transform: uppercase;
	font-family: var(--display-font);
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: var(--base-gap);
}

.profile-area .relations-headline:after {
	display: none;
}

.profile-area .relations-outer:nth-child(even) .relations-headline {
	padding-left: calc(var(--base-gap)*2);
}

.profile-area .relation-name {
	text-transform: uppercase;
	font-weight: 700;
	font-family: var(--display-font);
	font-size: 18px;
	line-height: 1.1em;
}

.profile-area .relation-title {
	position: relative;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-top: 5px;
	margin-bottom: var(--base-gap);
}

.profile-area .relation-title:after {
	content: "";
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	height: 1px;
	width: calc(100% + (var(--base-gap)*2));
	background: var(--color-opac-border);
}

.profile-area .relations-outer:nth-child(even) .relation-title:after {
	left: unset;
	right: 0;
	width: calc(100% + (var(--base-gap)*2));
}

.profile-area .relation-text {
	text-align: justify;
	max-height: 250px;
	overflow-y: auto;
	text-transform: none;
  font-size: 13px;
  color: var(--color-main);
	padding: var(--base-gap) calc(var(--base-gap)*2) var(--base-gap) 0;
}

.profile-area .relation-text.none {
	padding: 0 calc(var(--base-gap)*2) var(--base-gap) 0;
}

.profile-area .relations-outer:nth-child(even) .relation-text {
	padding: var(--base-gap) 0 var(--base-gap) calc(var(--base-gap)*2);
	direction: rtl;
}

.profile-area .relations-outer:nth-child(even) .relation-text>div {
	direction: ltr;
}

.profile-area .relation-text.none {
	padding: 0 calc(var(--base-gap)*2) var(--base-gap) 0;
}

.profile-area .relations-outer:nth-child(even) .relation-text.none {
	padding: 0 0 var(--base-gap) calc(var(--base-gap)*2);
}

.profile-area .relation-option {
	padding: 0 calc(var(--base-gap)*2) var(--base-gap) 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
}

.profile-area .relations-outer:nth-child(even) .relation-option {
	padding: 0 0 var(--base-gap) calc(var(--base-gap)*2);
}

.relations-add-container {
	border-top: 1px solid var(--color-opac-border);
	padding: 20px;
	margin-top: 20px;
}

/* Style only the NPC form (NOT the player form) */
.profile-area #relations .relation-add-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	/* Adds spacing between elements */
	background: var(--background-dark);
	/* Matches the theme */
	padding: 20px;
}

/* Inputs should be stacked nicely */
.profile-area #relations .relation-add-general {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Two-column layout */
	gap: 15px;
}

/* Make sure single inputs (like textarea) span full width */
.profile-area #relations .relation-add-desc,
.profile-area #relations .relation-add-search {
	width: 100%;
}

/* Full-width select dropdown */
.profile-area #relations .relation-add-general select {
	grid-column: span 2;
	/* Makes the dropdown span the full width */
}

/* Make textarea larger */
.profile-area #relations .relation-add-desc textarea {
	width: 100%;
	min-height: 120px;
}

/* Improve submit button placement */
.profile-area #relations input.button {
	width: 100%;
	padding: 10px;
	text-align: center;
}


/* Make sure the search input is properly spaced and full width */
.profile-area #relations .relation-add-search {
	width: 100%;
	margin-top: 15px;
	/* Adds spacing from the previous element */
	margin-bottom: 15px;
	/* Adds spacing from the previous element */
}

/* Ensure the input takes full width */
.profile-area #relations .relation-add-search .textbox {
	width: 100%;
}

.profile-area #player .player-layout {
	display: grid;
	grid-template-columns: 2fr 550px;
	align-items: stretch;
	/* Beide Spalten haben die gleiche Höhe */
	padding: 30px 0 0 30px;
	/* Oben und links 30px, unten und rechts 0 */
}


.profile-area .player-name {
	font-family: var(--display-font);
	font-size: 24px;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: var(--base-gap);
}

.profile-area .player-name span {
	text-transform: uppercase;
	font-size: 11px;
	line-height: 1em;
	display: block;
	font-family: var(--main-font);
	margin-bottom: 5px;
	letter-spacing: normal;
}

.profile-area #player .info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Ensures two equal columns */
	gap: 0;
	/* No gaps between columns */
	text-transform: uppercase;
	font-size: 11px;
	margin-bottom: var(--base-gap);
	margin-top: 40px;
}

/* Inner wrapper to control the structure properly */
.profile-area #player .inner-infos {
	display: grid;
	grid-template-rows: repeat(4, auto);
	/* Exactly 4 rows */
}

/* Each info block inside a column */
.profile-area #player .inner-infos .info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--base-gap) calc(var(--base-gap) * 2);
	border-bottom: 1px solid var(--color-opac-border);
	/* Default bottom border */
}

/* Remove bottom border from the last row in each column */
.profile-area #player .inner-infos .info:nth-child(4),
.profile-area #player .inner-infos .info:nth-child(8) {
	border-bottom: none;
}

/* Headliner styling */
.profile-area #player .inner-infos .headliner {
	display: block;
	font-family: var(--display-font);
	font-size: 14px;
	margin-bottom: 5px;
}


.profile-area #player .player-info {
	border-left: 1px solid var(--color-opac-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Centers vertically */
	align-items: center;
	/* Centers horizontally */
	text-align: center;
	/* Ensures text is centered */
	padding: 10px;
	/* Adjust as needed */
	align-self: stretch;
	/* Player-Info nimmt die volle Höhe ein */
}

.profile-area #player .ooc-box {
	max-width: 80%;
	/* Prevents it from being too wide */
	text-align: justify;
	line-height: 1.8em;
	color: var(--color-main);
	font-size: 11px;
}


.profile-area #character .award-icon.player,
.profile-area #player .award-icon.chara {
	display: none;
}

.main-text {
	font-family: var(--main-font2);
	text-transform:none;
	font-size:13px;
	color: var(--color-main);
	}